From 1a8ecd746e49598545ad0c5c27959e65fa528e91 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Thu, 16 Oct 2025 10:18:21 +0800
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E9=BA=A6=E5=85=8B=E9=A3=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/microphone.js                  |  46 ++++
 src/router/index.js                           |  10 +-
 .../register/components/Microphone/index.vue  | 225 ++++++++++++++++++
 src/views/device/register/index.vue           |   4 +
 4 files changed, 284 insertions(+), 1 deletion(-)
 create mode 100644 src/api/device/microphone.js
 create mode 100644 src/views/device/register/components/Microphone/index.vue

diff --git a/src/api/device/microphone.js b/src/api/device/microphone.js
new file mode 100644
index 0000000..e5fa841
--- /dev/null
+++ b/src/api/device/microphone.js
@@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+// 开始录音
+export function startMicrophoneApi(data) {
+  return request({
+      url: '/api/Microphone/start',
+      method: 'post',
+      params: data
+  })
+}
+
+// 暂停录音
+export function pauseMicrophoneApi(data) {
+  return request({
+      url: '/api/Microphone/pause',
+      method: 'post',
+      params: data
+  })
+}
+
+// 恢复录音
+export function resumeMicrophoneApi(data) {
+  return request({
+      url: '/api/Microphone/resume',
+      method: 'post',
+      params: data
+  })
+}
+
+// 停止录音
+export function stopMicrophoneApi(data) {
+ return request({
+    url: '/api/Microphone/stop',
+    method: 'post',
+    params: data
+  })
+}
+
+// 播放音频
+export function playSpeaker(data) {
+  return request({
+    url: '/api/Speaker/play',
+    method: 'post',
+    params: data
+  })
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index dbabe71..5c17dd3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 /* Layout */
 import Layout from "@/layout";
+import path from "path";
 
 /**
  * Note: 路由配置项
@@ -92,7 +93,14 @@ export const constantRoutes = [
         name: "灵巧手示教",
         meta: { title: "灵巧手详情" },
         hidden: true,
-      },
+      },{
+        path: "microphone/:id",
+        component: () =>
+          import("@/views/device/register/components/Microphone/index.vue"),
+        name: "麦克风示教",
+        meta: { title: "麦克风详情" },
+        hidden: true,
+      }
     ],
   },
   {
diff --git a/src/views/device/register/components/Microphone/index.vue b/src/views/device/register/components/Microphone/index.vue
new file mode 100644
index 0000000..fa76496
--- /dev/null
+++ b/src/views/device/register/components/Microphone/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="microphone-container">
+    <div class="title">远程麦克风</div>
+    <div class="audiosList" v-if="audiosList.length > 0">
+      <div class="speaker-container">
+          <div class="speaker-title">选择扬声器</div>
+          <el-select v-model="speaker" size="small">
+            <el-option
+            v-for="item in speakerOptions"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </div>
+      <div class="audioItem" v-for="item in audiosList">
+        <div>{{ item }}</div>
+        <div>
+          <el-button
+            circle
+            size="small"
+            :icon="VideoPlay"
+            @click="handlePlay(item)"
+          ></el-button>
+        </div>
+      </div>
+    </div>
+    <div class="btn-container">
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击开始录音"
+        placement="top-start"
+        v-if="recordStatus === 'end'"
+      >
+        <el-icon class="btn" :size="40" @click="startRecording"><Microphone /></el-icon>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击暂停录音"
+        placement="top-start"
+        v-if="recordStatus === 'recording'"
+      >
+        <el-icon class="btn" :size="40" @click="pauseRecording"><VideoPause /></el-icon>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击恢复录音"
+        placement="top-start"
+        v-if="recordStatus === 'pause'"
+      >
+        <el-icon class="btn" :size="40" @click="recoverRecording"><Mic /></el-icon>
+      </el-tooltip>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击结束录音"
+        placement="top-start"
+        v-if="recordStatus !== 'end'"
+      >
+        <el-icon class="btn" :size="40" @click="stopRecording"><Mute /></el-icon>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { Microphone, VideoPause, Mute, Mic, VideoPlay } from "@element-plus/icons-vue";
+import {
+  startMicrophoneApi,
+  pauseMicrophoneApi,
+  resumeMicrophoneApi,
+  stopMicrophoneApi,
+  playSpeaker
+} from '@/api/device/microphone'
+import { useRoute } from 'vue-router'
+import { ElMessage } from "element-plus";
+
+const route = useRoute()
+
+
+const terminalId = route.query.terminalId
+const deviceId = route.query.deviceId
+
+const recordStatus = ref('end');
+const isRecording = ref(false)
+const list = []
+const audiosList = ref([])
+const speaker = ref('spk1')
+const speakerOptions = ref(['spk1'])
+
+/**
+ * 开始录音
+ */
+const startRecording = async () => {
+  const fileName = new Date().getTime() + '.wav'
+  isRecording.value = true
+  const res = await startMicrophoneApi({
+    terminalId,
+    deviceId,
+    filePath: `/home/share/record/audios/${terminalId}_${deviceId}_${fileName}`
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'recording'
+    list.push(`${terminalId}_${deviceId}_${fileName}`)
+  }
+};
+
+/**
+ * 暂停录音
+ */
+const pauseRecording = async () => {
+  const res = await pauseMicrophoneApi({
+    terminalId,
+    deviceId
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'pause'
+  }
+};
+
+/**
+ * 恢复录音
+ */
+const recoverRecording = async () => {
+  const res = await resumeMicrophoneApi({
+    terminalId,
+    deviceId
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'recording'
+  }
+}
+
+/**
+ * 结束录音
+ */
+const stopRecording = async () => {
+  const res = await stopMicrophoneApi({
+    terminalId,
+    deviceId
+  })
+  if (res.code === 200) {
+    recordStatus.value = 'end'
+    audiosList.value.unshift(list[list.length - 1])
+  }
+  isRecording.value = false
+};
+
+/**
+ * 播放录音
+ */
+const handlePlay = async (audioPath) => {
+  const res = await playSpeaker({
+    terminalId,
+    deviceId: speaker.value,
+    audioPath: `/home/share/record/audios/${audioPath}`
+  })
+  if (res.code === 200) {
+    ElMessage.success('播放成功')
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.microphone-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  max-width: 800px;
+  width: 100%;
+  height: calc(100vh - 125px);
+  background-color: #fff;
+  border-radius: 20px;
+  margin: auto;
+
+  .audiosList {
+    margin: 20px;
+    max-height: 280px;
+    overflow-y: auto;
+
+    .speaker-container {
+      margin-bottom: 12px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+
+      .speaker-title {
+        width: 80px;
+      }
+
+      .el-select {
+        width: 200px;
+      }
+    }
+
+    .audioItem {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+  }
+
+  .title {
+    padding-top: 20px;
+    font-size: 20px;
+    text-align: center;
+    color: #333;
+  }
+
+  .btn-container {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .btn {
+      margin-right: 10px;
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/views/device/register/index.vue b/src/views/device/register/index.vue
index 986fb2d..7520614 100644
--- a/src/views/device/register/index.vue
+++ b/src/views/device/register/index.vue
@@ -378,6 +378,10 @@ function handleControl(row) {
   const fullPath = `${row.deviceModel}/${row.id}`; // 构造路由路径
   router.push({
     path: fullPath,
+    query: {
+      terminalId: row.idDeDeviceTerminalConfig,
+      deviceId: row.deviceCode
+    }
   }); // 使用路由跳转
   // intoControlPage(`/${row.deviceModel}`, `${row.id}`)
 }

From 907d75ffc1dfe2c0684c5d3075b563a0d656c04d Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Fri, 24 Oct 2025 09:28:21 +0800
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=E6=9D=83?=
 =?UTF-8?q?=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/device/profile/index.vue | 1018 ++++++++++++++--------------
 src/views/vi/testProject/index.vue |    3 +
 2 files changed, 511 insertions(+), 510 deletions(-)

diff --git a/src/views/device/profile/index.vue b/src/views/device/profile/index.vue
index c76ce62..ee10b2b 100644
--- a/src/views/device/profile/index.vue
+++ b/src/views/device/profile/index.vue
@@ -1,510 +1,508 @@
-<template>
-  <div class="app-container">
-
-
-    <TableSearch
-        :queryParams="queryParams"
-        :showSearch="showSearch"
-        queryRef="queryRef"
-        @refresh="resetQuery"
-        @search="handleQuery"
-    >
-      <template #one>
-        <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
-          <el-form-item :inline="true" label="设备类型" prop="deviceModel">
-            <el-select
-                v-model="queryParams.deviceModel"
-                :disabled="edit"
-                placeholder="请选择设备类型"
-                @change="handleQuery"
-            >
-              <el-option
-                  v-for="item in controlModuleList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
-          <el-form-item :inline="true" label="设备id" prop="idDeDeviceRegistration">
-            <el-input
-                v-model="queryParams.idDeDeviceRegistration"
-                clearable
-                placeholder="请输入设备id"
-                style="width:100%"
-                @keyup.enter="handleQuery"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
-          <el-form-item label="备注" prop="remark">
-            <el-input
-                v-model="queryParams.remark"
-                clearable
-                placeholder="请输入参数名称"
-                style="width:100%"
-                @keyup.enter="handleQuery"
-            />
-          </el-form-item>
-        </el-col>
-      </template>
-
-    </TableSearch>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-            v-hasPermi="['device:profile:add']"
-            icon="Plus"
-            plain
-            type="primary"
-            @click="handleAdd"
-        >新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-            v-hasPermi="['device:profile:edit']"
-            :disabled="single"
-            icon="Edit"
-            plain
-            type="success"
-            @click="handleUpdate"
-        >修改
-        </el-button>
-      </el-col>
-      <!--      <el-col :span="1.5">-->
-      <!--        <el-button-->
-      <!--            v-hasPermi="['device:profile:remove']"-->
-      <!--            :disabled="multiple"-->
-      <!--            icon="Delete"-->
-      <!--            plain-->
-      <!--            type="danger"-->
-      <!--            @click="handleDelete"-->
-      <!--        >删除-->
-      <!--        </el-button>-->
-      <!--      </el-col>-->
-      <!--      <el-col :span="1.5">-->
-      <!--        <el-button-->
-      <!--            type="warning"-->
-      <!--            plain-->
-      <!--            icon="Download"-->
-      <!--            @click="handleExport"-->
-      <!--            v-hasPermi="['device:profile:export']"-->
-      <!--        >导出-->
-      <!--        </el-button>-->
-      <!--      </el-col>-->
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="profileList" @selection-change="handleSelectionChange">
-      <!--      <el-table-column align="center" type="selection" width="55"/>-->
-      <el-table-column type="expand">
-        <template #default="props">
-          <el-table :data="props.row.parameters" :height="240">
-            <el-table-column align="center" label="参数名" prop="paramName" show-overflow-tooltip/>
-            <el-table-column align="center" label="参数值" prop="defaultValue" show-overflow-tooltip/>
-            <el-table-column align="center" label="参数类型" prop="paramType" show-overflow-tooltip/>
-            <el-table-column align="center" class-name="small-padding fixed-width" label="操作" show-overflow-tooltip>
-              <template #default="scope">
-                <el-button v-hasPermi="['device:profile:edit']"
-                           :disabled="scope.row.paramName==='idDeDeviceRegistration' || scope.row.paramName==='deviceModel'"
-                           icon="Edit" link
-                           type="primary"
-                           @click="handleOpenSingleParamsDialog(scope.row)"
-                >修改
-                </el-button>
-                <!--                <el-button v-hasPermi="['device:profile:remove']" icon="Delete" link type="primary"-->
-                <!--                           @click="handleDelete(scope.row)">删除-->
-                <!--                </el-button>-->
-              </template>
-            </el-table-column>
-          </el-table>
-
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="设备id" prop="idDeDeviceRegistration" show-overflow-tooltip/>
-      <el-table-column align="center" label="设备名称" prop="deviceName" show-overflow-tooltip/>
-      <el-table-column align="center" label="设备类型" prop="deviceModel">
-        <template #default="scope">
-          {{ controlModuleList.find(item => item.value === scope.row.deviceModel)?.label }}
-        </template>
-      </el-table-column>
-      <el-table-column align="center" label="终端名称" prop="terminalName" show-overflow-tooltip/>
-      <el-table-column align="center" label="备注" prop="remark" show-overflow-tooltip/>
-      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
-        <template #default="scope">
-          <el-button v-hasPermi="['device:profile:edit']" icon="Edit" link type="primary"
-                     @click="handleUpdate(scope.row)">修改
-          </el-button>
-          <el-button v-hasPermi="['device:profile:remove']" icon="Delete" link type="primary"
-                     @click="handleDelete(scope.row)">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-        v-show="total>0"
-        v-model:limit="queryParams.pageSize"
-        v-model:page="queryParams.pageNum"
-        :total="total"
-        @pagination="getList"
-    />
-
-    <!-- 添加或修改设备配置信息对话框 -->
-    <el-drawer v-model="open" :title="title" append-to-body size="580" @close="()=>edit=false"
-               @open="getDeviceList">
-      <el-form ref="profileRef" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="设备id" prop="idDeDeviceRegistration">
-          <el-select
-              v-model="form.idDeDeviceRegistration"
-              :disabled="edit"
-              placeholder="请选择设备类型"
-              @change="handleDeviceModelChange"
-          >
-            <el-option
-                v-for="item in deviceList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="设备类型" prop="deviceModel">
-          <el-select
-              v-model="form.deviceModel"
-              disabled
-              placeholder="请选择设备类型"
-          >
-            <el-option
-                v-for="item in controlModuleList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark"
-                    :rows="2" placeholder="请输入备注" type="textarea"/>
-        </el-form-item>
-
-        <template v-if="form?.deviceModel==='mechanical_arm'">
-          <el-form-item v-for="item in deviceParamsMap['mechanical_arm']" :label="item.label" :prop="item.key" :rules="[
-              { required: true, message: item.label + '为必填项', trigger: 'blur' }
-          ]">
-            <template v-if="item.formType==='select'">
-              <el-select v-model="form[item.key]">
-                <el-option v-for="option in item.options" :key="option.value" :label="option.label"
-                           :value="option.value">
-                </el-option>
-              </el-select>
-            </template>
-            <template v-if="item.formType==='input_number'">
-              <el-input-number v-model="form[item.key]" style="width:100%"/>
-            </template>
-          </el-form-item>
-        </template>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-drawer>
-
-    <!-- 添加或修改任务流程编排对话框 -->
-    <el-dialog v-model="editSingleParamsDialog" :align-center="true" :title="selectSingleParams.paramName+' 修改'"
-               width="500px"
-    >
-      <template
-          v-if="!['remark'].includes(selectSingleParams.paramName)">
-        <el-input-number v-model="selectSingleParams.defaultValue" style="width:100%"/>
-      </template>
-      <template v-else>
-        <el-input v-model="selectSingleParams.defaultValue"
-                  :rows="2" placeholder="请输入备注" type="textarea"/>
-      </template>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="handleEditParams">修 改</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script name="Profile" setup>
-import {addProfile, delProfile, getProfile, listProfile, updateProfile} from "@/api/device/profile"
-import TableSearch from "@/components/TableSearch/index.vue"
-import {controlModuleList, deviceParamsMap} from "@/enum/index.js";
-import {convertNumbersToStrings} from "@/views/device/register/components/index.js";
-import {listRegister} from "@/api/device/register.js";
-
-
-const {proxy} = getCurrentInstance()
-
-const profileList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    remark: null,
-    idDeDeviceRegistration: null,
-    paramName: null,
-    paramType: null
-  },
-  rules: {
-    idDeDeviceRegistration: [
-      {required: true, message: '请输入设备id', trigger: 'blur'}
-    ],
-    deviceModel: [
-      {required: true, message: '请输入设备类型', trigger: 'blur'}
-    ],
-  }
-})
-
-const {queryParams, form, rules} = toRefs(data)
-
-/** 查询设备配置信息列表 */
-function getList() {
-  loading.value = true
-  listProfile(queryParams.value).then(response => {
-    profileList.value = response.rows?.sort((a, b) => {
-      if (a.remark < b.remark) {
-        return -1; // 如果 a.remark 小于 b.remark，返回负数，表示 a 应该排在 b 前面
-      } else if (a.remark > b.remark) {
-        return 1; // 如果 a.remark 大于 b.remark，返回正数，表示 a 应该排在 b 后面
-      } else {
-        return 0; // 如果 a.remark 等于 b.remark，返回 0，表示顺序不变
-      }
-    })
-    total.value = response.total
-    loading.value = false
-  })
-}
-
-// 取消按钮
-function cancel() {
-  open.value = false
-  edit.value = false
-  editSingleParamsDialog.value = false
-  reset()
-}
-
-// 表单重置
-function reset() {
-  form.value = {
-    // id: null,
-    // createBy: null,
-    // createTime: null,
-    // updateBy: null,
-    // updateTime: null,
-    // remark: null,
-    // idDeDeviceRegistration: null,
-    // paramName: null,
-    // paramType: null
-  }
-  proxy.resetForm("profileRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.id)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加设备配置信息"
-}
-
-const formatData = (obj) => {
-//遍历对象
-  let res = []
-  for (let key in obj) {
-    if (edit.value) {
-      res.push({
-        remark: obj.remark,
-        idDeDeviceRegistration: obj.idDeDeviceRegistration,
-        paramName: key,
-        deviceModel: obj.deviceModel,
-        id: idParamsMap.value[key],
-        paramType: "float",
-        defaultValue: obj[key]
-      })
-    } else {
-      res.push({
-        remark: obj.remark,
-        idDeDeviceRegistration: obj.idDeDeviceRegistration,
-        paramName: key,
-        deviceModel: obj.deviceModel,
-        paramType: "float",
-        defaultValue: obj[key]
-      })
-    }
-  }
-  return res
-}
-
-
-const formInit = (arr) => {
-  const res = {}
-  res['remark'] = arr[0]['remark']
-  res['idDeDeviceRegistration'] = arr[0]['idDeDeviceRegistration']
-  res['paramType'] = arr[0]['paramType']
-  res['deviceModel'] = arr[0]['deviceModel']
-
-  for (let i = 0; i < arr.length; i++) {
-    res[arr[i]['paramName']] = arr[i]['defaultValue']
-  }
-  for (let key in res) {
-    if (!["remark", "idDeDeviceRegistration", "deviceModel", "workModule", "paramType"].includes(key)) {
-      res[key] = Number(res[key])
-    } else {
-      res[key] = res[key]
-    }
-  }
-
-  return res
-}
-
-const edit = ref(false)
-const idParamsMap = ref({})
-
-const formatIdParamMap = (arr) => {
-  const map = {}
-  for (let i = 0; i < arr.length; i++) {
-    map[arr[i]['paramName']] = arr[i]['id']
-  }
-  return map
-}
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset()
-  // const _id = row.id || ids.value
-  getProfile({id: row.idDeDeviceRegistration, remark: row.remark}).then(response => {
-    idParamsMap.value = formatIdParamMap(response.data)
-    form.value = formInit(response.data)
-    console.log(form.value, 'form.value')
-    edit.value = true
-    open.value = true
-    title.value = "修改设备配置信息"
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["profileRef"].validate(valid => {
-    if (valid) {
-      const temp = convertNumbersToStrings(form.value)
-      const res = formatData(temp)
-      if (edit.value) {
-        updateProfile(res).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          edit.value = false
-          getList()
-        })
-      } else {
-        addProfile(res).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _ids = row?.parameters?.map(item => item.id)
-
-  proxy.$modal.confirm('是否确认删除该配置信息？').then(function () {
-    return delProfile(_ids)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => {
-  })
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('device/profile/export', {
-    ...queryParams.value
-  }, `profile_${new Date().getTime()}.xlsx`)
-}
-
-getList()
-
-
-const deviceList = ref([])
-
-const getDeviceList = () => {
-  listRegister({pageSize: 10000, pageNum: 1}).then(response => {
-    deviceList.value = response.rows?.map(item => ({
-      label: `${item.deviceName} ( ${item.deviceCode} )`,
-      value: item.id,
-      deviceModel: item.deviceModel,
-    }))
-  })
-}
-getDeviceList()
-
-const handleDeviceModelChange = () => {
-  form.value.deviceModel = deviceList.value.find(item => item.value === form.value.idDeDeviceRegistration)["deviceModel"]
-}
-
-const editSingleParamsDialog = ref(false)
-const selectSingleParams = ref({})
-
-const handleOpenSingleParamsDialog = (row) => {
-  editSingleParamsDialog.value = true
-  selectSingleParams.value = JSON.parse(JSON.stringify(row))
-}
-
-const handleEditParams = () => {
-  console.log(selectSingleParams.value)
-  updateProfile([{
-    id: selectSingleParams.value.id,
-    defaultValue: String(selectSingleParams.value.defaultValue)
-  }]).then(response => {
-    proxy.$modal.msgSuccess("修改成功")
-    editSingleParamsDialog.value = false
-    getList()
-  })
-}
-</script>
+<template>
+  <div class="app-container">
+    <TableSearch
+        :queryParams="queryParams"
+        :showSearch="showSearch"
+        queryRef="queryRef"
+        @refresh="resetQuery"
+        @search="handleQuery"
+    >
+      <template #one>
+        <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
+          <el-form-item :inline="true" label="设备类型" prop="deviceModel">
+            <el-select
+                v-model="queryParams.deviceModel"
+                :disabled="edit"
+                placeholder="请选择设备类型"
+                @change="handleQuery"
+            >
+              <el-option
+                  v-for="item in controlModuleList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
+          <el-form-item :inline="true" label="设备id" prop="idDeDeviceRegistration">
+            <el-input
+                v-model="queryParams.idDeDeviceRegistration"
+                clearable
+                placeholder="请输入设备id"
+                style="width:100%"
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
+          <el-form-item label="备注" prop="remark">
+            <el-input
+                v-model="queryParams.remark"
+                clearable
+                placeholder="请输入参数名称"
+                style="width:100%"
+                @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+      </template>
+
+    </TableSearch>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+            v-hasPermi="['device:profile:add']"
+            icon="Plus"
+            plain
+            type="primary"
+            @click="handleAdd"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+            v-hasPermi="['device:profile:edit']"
+            :disabled="single"
+            icon="Edit"
+            plain
+            type="success"
+            @click="handleUpdate"
+        >修改
+        </el-button>
+      </el-col>
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--            v-hasPermi="['device:profile:remove']"-->
+      <!--            :disabled="multiple"-->
+      <!--            icon="Delete"-->
+      <!--            plain-->
+      <!--            type="danger"-->
+      <!--            @click="handleDelete"-->
+      <!--        >删除-->
+      <!--        </el-button>-->
+      <!--      </el-col>-->
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--            type="warning"-->
+      <!--            plain-->
+      <!--            icon="Download"-->
+      <!--            @click="handleExport"-->
+      <!--            v-hasPermi="['device:profile:export']"-->
+      <!--        >导出-->
+      <!--        </el-button>-->
+      <!--      </el-col>-->
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="profileList" @selection-change="handleSelectionChange">
+      <!--      <el-table-column align="center" type="selection" width="55"/>-->
+      <el-table-column type="expand">
+        <template #default="props">
+          <el-table :data="props.row.parameters" :height="240">
+            <el-table-column align="center" label="参数名" prop="paramName" show-overflow-tooltip/>
+            <el-table-column align="center" label="参数值" prop="defaultValue" show-overflow-tooltip/>
+            <el-table-column align="center" label="参数类型" prop="paramType" show-overflow-tooltip/>
+            <el-table-column align="center" class-name="small-padding fixed-width" label="操作" show-overflow-tooltip>
+              <template #default="scope">
+                <el-button v-hasPermi="['device:profile:edit']"
+                           :disabled="scope.row.paramName==='idDeDeviceRegistration' || scope.row.paramName==='deviceModel'"
+                           icon="Edit" link
+                           type="primary"
+                           @click="handleOpenSingleParamsDialog(scope.row)"
+                >修改
+                </el-button>
+                <!--                <el-button v-hasPermi="['device:profile:remove']" icon="Delete" link type="primary"-->
+                <!--                           @click="handleDelete(scope.row)">删除-->
+                <!--                </el-button>-->
+              </template>
+            </el-table-column>
+          </el-table>
+
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="设备id" prop="idDeDeviceRegistration" show-overflow-tooltip/>
+      <el-table-column align="center" label="设备名称" prop="deviceName" show-overflow-tooltip/>
+      <el-table-column align="center" label="设备类型" prop="deviceModel">
+        <template #default="scope">
+          {{ controlModuleList.find(item => item.value === scope.row.deviceModel)?.label }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="终端名称" prop="terminalName" show-overflow-tooltip/>
+      <el-table-column align="center" label="备注" prop="remark" show-overflow-tooltip/>
+      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
+        <template #default="scope">
+          <el-button v-hasPermi="['device:profile:edit']" icon="Edit" link type="primary"
+                     @click="handleUpdate(scope.row)">修改
+          </el-button>
+          <el-button v-hasPermi="['device:profile:remove']" icon="Delete" link type="primary"
+                     @click="handleDelete(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+        v-show="total>0"
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNum"
+        :total="total"
+        @pagination="getList"
+    />
+
+    <!-- 添加或修改设备配置信息对话框 -->
+    <el-drawer v-model="open" :title="title" append-to-body size="580" @close="()=>edit=false"
+               @open="getDeviceList">
+      <el-form ref="profileRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="设备id" prop="idDeDeviceRegistration">
+          <el-select
+              v-model="form.idDeDeviceRegistration"
+              :disabled="edit"
+              placeholder="请选择设备类型"
+              @change="handleDeviceModelChange"
+          >
+            <el-option
+                v-for="item in deviceList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备类型" prop="deviceModel">
+          <el-select
+              v-model="form.deviceModel"
+              disabled
+              placeholder="请选择设备类型"
+          >
+            <el-option
+                v-for="item in controlModuleList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark"
+                    :rows="2" placeholder="请输入备注" type="textarea"/>
+        </el-form-item>
+
+        <template v-if="form?.deviceModel==='mechanical_arm'">
+          <el-form-item v-for="item in deviceParamsMap['mechanical_arm']" :label="item.label" :prop="item.key" :rules="[
+              { required: true, message: item.label + '为必填项', trigger: 'blur' }
+          ]">
+            <template v-if="item.formType==='select'">
+              <el-select v-model="form[item.key]">
+                <el-option v-for="option in item.options" :key="option.value" :label="option.label"
+                           :value="option.value">
+                </el-option>
+              </el-select>
+            </template>
+            <template v-if="item.formType==='input_number'">
+              <el-input-number v-model="form[item.key]" style="width:100%"/>
+            </template>
+          </el-form-item>
+        </template>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-drawer>
+
+    <!-- 添加或修改任务流程编排对话框 -->
+    <el-dialog v-model="editSingleParamsDialog" :align-center="true" :title="selectSingleParams.paramName+' 修改'"
+               width="500px"
+    >
+      <template
+          v-if="!['remark'].includes(selectSingleParams.paramName)">
+        <el-input-number v-model="selectSingleParams.defaultValue" style="width:100%"/>
+      </template>
+      <template v-else>
+        <el-input v-model="selectSingleParams.defaultValue"
+                  :rows="2" placeholder="请输入备注" type="textarea"/>
+      </template>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleEditParams">修 改</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script name="Profile" setup>
+import {addProfile, delProfile, getProfile, listProfile, updateProfile} from "@/api/device/profile"
+import TableSearch from "@/components/TableSearch/index.vue"
+import {controlModuleList, deviceParamsMap} from "@/enum/index.js";
+import {convertNumbersToStrings} from "@/views/device/register/components/index.js";
+import {listRegister} from "@/api/device/register.js";
+
+
+const {proxy} = getCurrentInstance()
+
+const profileList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    remark: null,
+    idDeDeviceRegistration: null,
+    paramName: null,
+    paramType: null
+  },
+  rules: {
+    idDeDeviceRegistration: [
+      {required: true, message: '请输入设备id', trigger: 'blur'}
+    ],
+    deviceModel: [
+      {required: true, message: '请输入设备类型', trigger: 'blur'}
+    ],
+  }
+})
+
+const {queryParams, form, rules} = toRefs(data)
+
+/** 查询设备配置信息列表 */
+function getList() {
+  loading.value = true
+  listProfile(queryParams.value).then(response => {
+    profileList.value = response.rows?.sort((a, b) => {
+      if (a.remark < b.remark) {
+        return -1; // 如果 a.remark 小于 b.remark，返回负数，表示 a 应该排在 b 前面
+      } else if (a.remark > b.remark) {
+        return 1; // 如果 a.remark 大于 b.remark，返回正数，表示 a 应该排在 b 后面
+      } else {
+        return 0; // 如果 a.remark 等于 b.remark，返回 0，表示顺序不变
+      }
+    })
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  edit.value = false
+  editSingleParamsDialog.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    // id: null,
+    // createBy: null,
+    // createTime: null,
+    // updateBy: null,
+    // updateTime: null,
+    // remark: null,
+    // idDeDeviceRegistration: null,
+    // paramName: null,
+    // paramType: null
+  }
+  proxy.resetForm("profileRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加设备配置信息"
+}
+
+const formatData = (obj) => {
+//遍历对象
+  let res = []
+  for (let key in obj) {
+    if (edit.value) {
+      res.push({
+        remark: obj.remark,
+        idDeDeviceRegistration: obj.idDeDeviceRegistration,
+        paramName: key,
+        deviceModel: obj.deviceModel,
+        id: idParamsMap.value[key],
+        paramType: "float",
+        defaultValue: obj[key]
+      })
+    } else {
+      res.push({
+        remark: obj.remark,
+        idDeDeviceRegistration: obj.idDeDeviceRegistration,
+        paramName: key,
+        deviceModel: obj.deviceModel,
+        paramType: "float",
+        defaultValue: obj[key]
+      })
+    }
+  }
+  return res
+}
+
+
+const formInit = (arr) => {
+  const res = {}
+  res['remark'] = arr[0]['remark']
+  res['idDeDeviceRegistration'] = arr[0]['idDeDeviceRegistration']
+  res['paramType'] = arr[0]['paramType']
+  res['deviceModel'] = arr[0]['deviceModel']
+
+  for (let i = 0; i < arr.length; i++) {
+    res[arr[i]['paramName']] = arr[i]['defaultValue']
+  }
+  for (let key in res) {
+    if (!["remark", "idDeDeviceRegistration", "deviceModel", "workModule", "paramType"].includes(key)) {
+      res[key] = Number(res[key])
+    } else {
+      res[key] = res[key]
+    }
+  }
+
+  return res
+}
+
+const edit = ref(false)
+const idParamsMap = ref({})
+
+const formatIdParamMap = (arr) => {
+  const map = {}
+  for (let i = 0; i < arr.length; i++) {
+    map[arr[i]['paramName']] = arr[i]['id']
+  }
+  return map
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  // const _id = row.id || ids.value
+  getProfile({id: row.idDeDeviceRegistration, remark: row.remark}).then(response => {
+    idParamsMap.value = formatIdParamMap(response.data)
+    form.value = formInit(response.data)
+    console.log(form.value, 'form.value')
+    edit.value = true
+    open.value = true
+    title.value = "修改设备配置信息"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["profileRef"].validate(valid => {
+    if (valid) {
+      const temp = convertNumbersToStrings(form.value)
+      const res = formatData(temp)
+      if (edit.value) {
+        updateProfile(res).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          edit.value = false
+          getList()
+        })
+      } else {
+        addProfile(res).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row?.parameters?.map(item => item.id)
+
+  proxy.$modal.confirm('是否确认删除该配置信息？').then(function () {
+    return delProfile(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {
+  })
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('device/profile/export', {
+    ...queryParams.value
+  }, `profile_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+
+
+const deviceList = ref([])
+
+const getDeviceList = () => {
+  listRegister({pageSize: 10000, pageNum: 1}).then(response => {
+    deviceList.value = response.rows?.map(item => ({
+      label: `${item.deviceName} ( ${item.deviceCode} )`,
+      value: item.id,
+      deviceModel: item.deviceModel,
+    }))
+  })
+}
+getDeviceList()
+
+const handleDeviceModelChange = () => {
+  form.value.deviceModel = deviceList.value.find(item => item.value === form.value.idDeDeviceRegistration)["deviceModel"]
+}
+
+const editSingleParamsDialog = ref(false)
+const selectSingleParams = ref({})
+
+const handleOpenSingleParamsDialog = (row) => {
+  editSingleParamsDialog.value = true
+  selectSingleParams.value = JSON.parse(JSON.stringify(row))
+}
+
+const handleEditParams = () => {
+  console.log(selectSingleParams.value)
+  updateProfile([{
+    id: selectSingleParams.value.id,
+    defaultValue: String(selectSingleParams.value.defaultValue)
+  }]).then(response => {
+    proxy.$modal.msgSuccess("修改成功")
+    editSingleParamsDialog.value = false
+    getList()
+  })
+}
+</script>
diff --git a/src/views/vi/testProject/index.vue b/src/views/vi/testProject/index.vue
index 9ed1831..7f457ae 100644
--- a/src/views/vi/testProject/index.vue
+++ b/src/views/vi/testProject/index.vue
@@ -182,6 +182,7 @@
             size="mini"
             type="text"
             @click="handleSetting(row)"
+            v-hasPermi="['system:project:add','system:project:edit']"
             >配置
           </el-button>
           <el-button
@@ -189,6 +190,7 @@
             type="text"
             v-if="row.status == 1"
             @click="handleExecute(row)"
+            v-hasPermi="['system:project:add','system:project:edit']"
             >执行
           </el-button>
           <el-button
@@ -196,6 +198,7 @@
             v-if="row.status == 0"
             link
             type="primary"
+            v-hasPermi="['system:project:add','system:project:edit']"
             @click="handleOpenDashboard(row)"
             >可视化
           </el-button>

From 1cf8cba6c43b3a53fbd20a831379f21858bc17ce Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Fri, 24 Oct 2025 09:48:24 +0800
Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=E5=88=86?=
 =?UTF-8?q?=E8=BE=A8=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/menu/index.vue    |  913 ++++++++++-----------
 src/views/system/role/index.vue    | 1177 ++++++++++++++--------------
 src/views/system/user/index.vue    | 1085 ++++++++++++-------------
 src/views/vi/testProject/index.vue |  166 ++--
 4 files changed, 1684 insertions(+), 1657 deletions(-)

diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 6cd0a93..d6ed77f 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,452 +1,461 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
-         <el-form-item label="菜单名称" prop="menuName">
-            <el-input
-               v-model="queryParams.menuName"
-               placeholder="请输入菜单名称"
-               clearable
-               style="width: 200px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:menu:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button 
-               type="info"
-               plain
-               icon="Sort"
-               @click="toggleExpandAll"
-            >展开/折叠</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <el-table
-         v-if="refreshTable"
-         v-loading="loading"
-         :data="menuList"
-         row-key="menuId"
-         :default-expand-all="isExpandAll"
-         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      >
-         <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-         <el-table-column prop="icon" label="图标" align="center" width="100">
-            <template #default="scope">
-               <svg-icon :icon-class="scope.row.icon" />
-            </template>
-         </el-table-column>
-         <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
-         <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
-         <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
-         <el-table-column prop="status" label="状态" width="80">
-            <template #default="scope">
-               <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" width="160" prop="createTime">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
-            <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
-               <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <!-- 添加或修改菜单对话框 -->
-      <el-dialog :title="title" v-model="open" width="680px" append-to-body>
-         <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
-            <el-row>
-               <el-col :span="24">
-                  <el-form-item label="上级菜单">
-                     <el-tree-select
-                        v-model="form.parentId"
-                        :data="menuOptions"
-                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
-                        value-key="menuId"
-                        placeholder="选择上级菜单"
-                        check-strictly
-                     />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="24">
-                  <el-form-item label="菜单类型" prop="menuType">
-                     <el-radio-group v-model="form.menuType">
-                        <el-radio value="M">目录</el-radio>
-                        <el-radio value="C">菜单</el-radio>
-                        <el-radio value="F">按钮</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType != 'F'">
-                  <el-form-item label="菜单图标" prop="icon">
-                     <el-popover
-                        placement="bottom-start"
-                        :width="540"
-                        trigger="click"
-                     >
-                        <template #reference>
-                           <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
-                              <template #prefix>
-                                 <svg-icon
-                                    v-if="form.icon"
-                                    :icon-class="form.icon"
-                                    class="el-input__icon"
-                                    style="height: 32px;width: 16px;"
-                                 />
-                                 <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
-                              </template>
-                           </el-input>
-                        </template>
-                        <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
-                     </el-popover>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="显示排序" prop="orderNum">
-                     <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item label="菜单名称" prop="menuName">
-                     <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType == 'C'">
-                  <el-form-item prop="routeName">
-                     <template #label>
-                        <span>
-                           <el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           路由名称
-                        </span>
-                     </template>
-                     <el-input v-model="form.routeName" placeholder="请输入路由名称" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType != 'F'">
-                  <el-form-item>
-                     <template #label>
-                        <span>
-                           <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>是否外链
-                        </span>
-                     </template>
-                     <el-radio-group v-model="form.isFrame">
-                        <el-radio value="0">是</el-radio>
-                        <el-radio value="1">否</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType != 'F'">
-                  <el-form-item prop="path">
-                     <template #label>
-                        <span>
-                           <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           路由地址
-                        </span>
-                     </template>
-                     <el-input v-model="form.path" placeholder="请输入路由地址" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType == 'C'">
-                  <el-form-item prop="component">
-                     <template #label>
-                        <span>
-                           <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           组件路径
-                        </span>
-                     </template>
-                     <el-input v-model="form.component" placeholder="请输入组件路径" />
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType != 'M'">
-                  <el-form-item>
-                     <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
-                     <template #label>
-                        <span>
-                           <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           权限字符
-                        </span>
-                     </template>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType == 'C'">
-                  <el-form-item>
-                     <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
-                     <template #label>
-                        <span>
-                           <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           路由参数
-                        </span>
-                     </template>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType == 'C'">
-                  <el-form-item>
-                     <template #label>
-                        <span>
-                           <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           是否缓存
-                        </span>
-                     </template>
-                     <el-radio-group v-model="form.isCache">
-                        <el-radio value="0">缓存</el-radio>
-                        <el-radio value="1">不缓存</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12" v-if="form.menuType != 'F'">
-                  <el-form-item>
-                     <template #label>
-                        <span>
-                           <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           显示状态
-                        </span>
-                     </template>
-                     <el-radio-group v-model="form.visible">
-                        <el-radio
-                           v-for="dict in sys_show_hide"
-                           :key="dict.value"
-                           :value="dict.value"
-                        >{{ dict.label }}</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-               <el-col :span="12">
-                  <el-form-item>
-                     <template #label>
-                        <span>
-                           <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
-                              <el-icon><question-filled /></el-icon>
-                           </el-tooltip>
-                           菜单状态
-                        </span>
-                     </template>
-                     <el-radio-group v-model="form.status">
-                        <el-radio
-                           v-for="dict in sys_normal_disable"
-                           :key="dict.value"
-                           :value="dict.value"
-                        >{{ dict.label }}</el-radio>
-                     </el-radio-group>
-                  </el-form-item>
-               </el-col>
-            </el-row>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
-</template>
-
-<script setup name="Menu">
-import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
-import SvgIcon from "@/components/SvgIcon";
-import IconSelect from "@/components/IconSelect";
-
-const { proxy } = getCurrentInstance();
-const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
-
-const menuList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const title = ref("");
-const menuOptions = ref([]);
-const isExpandAll = ref(false);
-const refreshTable = ref(true);
-const iconSelectRef = ref(null);
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    menuName: undefined,
-    visible: undefined
-  },
-  rules: {
-    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
-    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
-    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
-  },
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询菜单列表 */
-function getList() {
-  loading.value = true;
-  listMenu(queryParams.value).then(response => {
-    menuList.value = proxy.handleTree(response.data, "menuId");
-    loading.value = false;
-  });
-}
-
-/** 查询菜单下拉树结构 */
-function getTreeselect() {
-  menuOptions.value = [];
-  listMenu().then(response => {
-    const menu = { menuId: 0, menuName: "主类目", children: [] };
-    menu.children = proxy.handleTree(response.data, "menuId");
-    menuOptions.value.push(menu);
-  });
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-
-/** 表单重置 */
-function reset() {
-  form.value = {
-    menuId: undefined,
-    parentId: 0,
-    menuName: undefined,
-    icon: undefined,
-    menuType: "M",
-    orderNum: undefined,
-    isFrame: "1",
-    isCache: "0",
-    visible: "0",
-    status: "0"
-  };
-  proxy.resetForm("menuRef");
-}
-
-/** 展示下拉图标 */
-function showSelectIcon() {
-  iconSelectRef.value.reset();
-}
-
-/** 选择图标 */
-function selected(name) {
-  form.value.icon = name;
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-
-/** 新增按钮操作 */
-function handleAdd(row) {
-  reset();
-  getTreeselect();
-  if (row != null && row.menuId) {
-    form.value.parentId = row.menuId;
-  } else {
-    form.value.parentId = 0;
-  }
-  open.value = true;
-  title.value = "添加菜单";
-}
-
-/** 展开/折叠操作 */
-function toggleExpandAll() {
-  refreshTable.value = false;
-  isExpandAll.value = !isExpandAll.value;
-  nextTick(() => {
-    refreshTable.value = true;
-  });
-}
-
-/** 修改按钮操作 */
-async function handleUpdate(row) {
-  reset();
-  await getTreeselect();
-  getMenu(row.menuId).then(response => {
-    form.value = response.data;
-    open.value = true;
-    title.value = "修改菜单";
-  });
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["menuRef"].validate(valid => {
-    if (valid) {
-      if (form.value.menuId != undefined) {
-        updateMenu(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addMenu(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
-    return delMenu(row.menuId);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-
-getList();
-</script>
+<template>
+   <div class="app-container">
+      <div ref="topContainerRef">
+         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+            <el-form-item label="菜单名称" prop="menuName">
+               <el-input
+                  v-model="queryParams.menuName"
+                  placeholder="请输入菜单名称"
+                  clearable
+                  style="width: 200px"
+                  @keyup.enter="handleQuery"
+               />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+               <el-select v-model="queryParams.status" placeholder="菜单状态" clearable style="width: 200px">
+                  <el-option
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :label="dict.label"
+                     :value="dict.value"
+                  />
+               </el-select>
+            </el-form-item>
+            <el-form-item>
+               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+         </el-form>
+
+         <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+               <el-button
+                  type="primary"
+                  plain
+                  icon="Plus"
+                  @click="handleAdd"
+                  v-hasPermi="['system:menu:add']"
+               >新增</el-button>
+            </el-col>
+            <el-col :span="1.5">
+               <el-button 
+                  type="info"
+                  plain
+                  icon="Sort"
+                  @click="toggleExpandAll"
+               >展开/折叠</el-button>
+            </el-col>
+            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+         </el-row>
+      </div>
+
+      <div :style="containerHeight">
+         <el-table
+            v-if="refreshTable"
+            height="100%"
+            v-loading="loading"
+            :data="menuList"
+            row-key="menuId"
+            :default-expand-all="isExpandAll"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+         >
+            <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+            <el-table-column prop="icon" label="图标" align="center" width="100">
+               <template #default="scope">
+                  <svg-icon :icon-class="scope.row.icon" />
+               </template>
+            </el-table-column>
+            <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+            <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="status" label="状态" width="80">
+               <template #default="scope">
+                  <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+               </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" width="160" prop="createTime">
+               <template #default="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+               </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
+               <template #default="scope">
+                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
+                  <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
+                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
+               </template>
+            </el-table-column>
+         </el-table>
+      </div>
+
+      <!-- 添加或修改菜单对话框 -->
+      <el-dialog :title="title" v-model="open" width="680px" append-to-body>
+         <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
+            <el-row>
+               <el-col :span="24">
+                  <el-form-item label="上级菜单">
+                     <el-tree-select
+                        v-model="form.parentId"
+                        :data="menuOptions"
+                        :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
+                        value-key="menuId"
+                        placeholder="选择上级菜单"
+                        check-strictly
+                     />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="24">
+                  <el-form-item label="菜单类型" prop="menuType">
+                     <el-radio-group v-model="form.menuType">
+                        <el-radio value="M">目录</el-radio>
+                        <el-radio value="C">菜单</el-radio>
+                        <el-radio value="F">按钮</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item label="菜单图标" prop="icon">
+                     <el-popover
+                        placement="bottom-start"
+                        :width="540"
+                        trigger="click"
+                     >
+                        <template #reference>
+                           <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
+                              <template #prefix>
+                                 <svg-icon
+                                    v-if="form.icon"
+                                    :icon-class="form.icon"
+                                    class="el-input__icon"
+                                    style="height: 32px;width: 16px;"
+                                 />
+                                 <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
+                              </template>
+                           </el-input>
+                        </template>
+                        <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
+                     </el-popover>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="显示排序" prop="orderNum">
+                     <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item label="菜单名称" prop="menuName">
+                     <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item prop="routeName">
+                     <template #label>
+                        <span>
+                           <el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           路由名称
+                        </span>
+                     </template>
+                     <el-input v-model="form.routeName" placeholder="请输入路由名称" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>是否外链
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.isFrame">
+                        <el-radio value="0">是</el-radio>
+                        <el-radio value="1">否</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item prop="path">
+                     <template #label>
+                        <span>
+                           <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           路由地址
+                        </span>
+                     </template>
+                     <el-input v-model="form.path" placeholder="请输入路由地址" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item prop="component">
+                     <template #label>
+                        <span>
+                           <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           组件路径
+                        </span>
+                     </template>
+                     <el-input v-model="form.component" placeholder="请输入组件路径" />
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'M'">
+                  <el-form-item>
+                     <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
+                     <template #label>
+                        <span>
+                           <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           权限字符
+                        </span>
+                     </template>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item>
+                     <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
+                     <template #label>
+                        <span>
+                           <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           路由参数
+                        </span>
+                     </template>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType == 'C'">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           是否缓存
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.isCache">
+                        <el-radio value="0">缓存</el-radio>
+                        <el-radio value="1">不缓存</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12" v-if="form.menuType != 'F'">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           显示状态
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.visible">
+                        <el-radio
+                           v-for="dict in sys_show_hide"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+               <el-col :span="12">
+                  <el-form-item>
+                     <template #label>
+                        <span>
+                           <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
+                              <el-icon><question-filled /></el-icon>
+                           </el-tooltip>
+                           菜单状态
+                        </span>
+                     </template>
+                     <el-radio-group v-model="form.status">
+                        <el-radio
+                           v-for="dict in sys_normal_disable"
+                           :key="dict.value"
+                           :value="dict.value"
+                        >{{ dict.label }}</el-radio>
+                     </el-radio-group>
+                  </el-form-item>
+               </el-col>
+            </el-row>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Menu">
+import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
+import SvgIcon from "@/components/SvgIcon";
+import IconSelect from "@/components/IconSelect";
+import { useContainerHeight } from "@/hooks/tableHeight";
+
+const topContainerRef = ref();
+const containerHeight = useContainerHeight(topContainerRef);
+
+const { proxy } = getCurrentInstance();
+const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
+
+const menuList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const title = ref("");
+const menuOptions = ref([]);
+const isExpandAll = ref(false);
+const refreshTable = ref(true);
+const iconSelectRef = ref(null);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    menuName: undefined,
+    visible: undefined
+  },
+  rules: {
+    menuName: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
+    orderNum: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
+    path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }]
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询菜单列表 */
+function getList() {
+  loading.value = true;
+  listMenu(queryParams.value).then(response => {
+    menuList.value = proxy.handleTree(response.data, "menuId");
+    loading.value = false;
+  });
+}
+
+/** 查询菜单下拉树结构 */
+function getTreeselect() {
+  menuOptions.value = [];
+  listMenu().then(response => {
+    const menu = { menuId: 0, menuName: "主类目", children: [] };
+    menu.children = proxy.handleTree(response.data, "menuId");
+    menuOptions.value.push(menu);
+  });
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    menuId: undefined,
+    parentId: 0,
+    menuName: undefined,
+    icon: undefined,
+    menuType: "M",
+    orderNum: undefined,
+    isFrame: "1",
+    isCache: "0",
+    visible: "0",
+    status: "0"
+  };
+  proxy.resetForm("menuRef");
+}
+
+/** 展示下拉图标 */
+function showSelectIcon() {
+  iconSelectRef.value.reset();
+}
+
+/** 选择图标 */
+function selected(name) {
+  form.value.icon = name;
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset();
+  getTreeselect();
+  if (row != null && row.menuId) {
+    form.value.parentId = row.menuId;
+  } else {
+    form.value.parentId = 0;
+  }
+  open.value = true;
+  title.value = "添加菜单";
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+
+/** 修改按钮操作 */
+async function handleUpdate(row) {
+  reset();
+  await getTreeselect();
+  getMenu(row.menuId).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改菜单";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["menuRef"].validate(valid => {
+    if (valid) {
+      if (form.value.menuId != undefined) {
+        updateMenu(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addMenu(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项?').then(function() {
+    return delMenu(row.menuId);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+getList();
+</script>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 81b98dc..02e8048 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,584 +1,593 @@
-<template>
-   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
-         <el-form-item label="角色名称" prop="roleName">
-            <el-input
-               v-model="queryParams.roleName"
-               placeholder="请输入角色名称"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="权限字符" prop="roleKey">
-            <el-input
-               v-model="queryParams.roleKey"
-               placeholder="请输入权限字符"
-               clearable
-               style="width: 240px"
-               @keyup.enter="handleQuery"
-            />
-         </el-form-item>
-         <el-form-item label="状态" prop="status">
-            <el-select
-               v-model="queryParams.status"
-               placeholder="角色状态"
-               clearable
-               style="width: 240px"
-            >
-               <el-option
-                  v-for="dict in sys_normal_disable"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-               />
-            </el-select>
-         </el-form-item>
-         <el-form-item label="创建时间" style="width: 308px">
-            <el-date-picker
-               v-model="dateRange"
-               value-format="YYYY-MM-DD"
-               type="daterange"
-               range-separator="-"
-               start-placeholder="开始日期"
-               end-placeholder="结束日期"
-            ></el-date-picker>
-         </el-form-item>
-         <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-         </el-form-item>
-      </el-form>
-      <el-row :gutter="10" class="mb8">
-         <el-col :span="1.5">
-            <el-button
-               type="primary"
-               plain
-               icon="Plus"
-               @click="handleAdd"
-               v-hasPermi="['system:role:add']"
-            >新增</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="success"
-               plain
-               icon="Edit"
-               :disabled="single"
-               @click="handleUpdate"
-               v-hasPermi="['system:role:edit']"
-            >修改</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="danger"
-               plain
-               icon="Delete"
-               :disabled="multiple"
-               @click="handleDelete"
-               v-hasPermi="['system:role:remove']"
-            >删除</el-button>
-         </el-col>
-         <el-col :span="1.5">
-            <el-button
-               type="warning"
-               plain
-               icon="Download"
-               @click="handleExport"
-               v-hasPermi="['system:role:export']"
-            >导出</el-button>
-         </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-      </el-row>
-
-      <!-- 表格数据 -->
-      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-         <el-table-column type="selection" width="55" align="center" />
-         <el-table-column label="角色编号" prop="roleId" width="120" />
-         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-         <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-         <el-table-column label="显示顺序" prop="roleSort" width="100" />
-         <el-table-column label="状态" align="center" width="100">
-            <template #default="scope">
-               <el-switch
-                  v-model="scope.row.status"
-                  active-value="0"
-                  inactive-value="0"
-                  @change="handleStatusChange(scope.row)"
-               ></el-switch>
-            </template>
-         </el-table-column>
-         <el-table-column label="创建时间" align="center" prop="createTime">
-            <template #default="scope">
-               <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-         </el-table-column>
-         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template #default="scope">
-              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
-                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
-              </el-tooltip>
-            </template>
-         </el-table-column>
-      </el-table>
-
-      <pagination
-         v-show="total > 0"
-         :total="total"
-         v-model:page="queryParams.pageNum"
-         v-model:limit="queryParams.pageSize"
-         @pagination="getList"
-      />
-
-      <!-- 添加或修改角色配置对话框 -->
-      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
-            <el-form-item label="角色名称" prop="roleName">
-               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
-            </el-form-item>
-            <el-form-item prop="roleKey">
-               <template #label>
-                  <span>
-                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
-                        <el-icon><question-filled /></el-icon>
-                     </el-tooltip>
-                     权限字符
-                  </span>
-               </template>
-               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-            </el-form-item>
-            <el-form-item label="角色顺序" prop="roleSort">
-               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-            </el-form-item>
-            <el-form-item label="状态">
-               <el-radio-group v-model="form.status">
-                  <el-radio
-                     v-for="dict in sys_normal_disable"
-                     :key="dict.value"
-                     :value="dict.value"
-                  >{{ dict.label }}</el-radio>
-               </el-radio-group>
-            </el-form-item>
-            <el-form-item label="菜单权限">
-               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
-               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-               <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
-               <el-tree
-                  class="tree-border"
-                  :data="menuOptions"
-                  show-checkbox
-                  ref="menuRef"
-                  node-key="id"
-                  :check-strictly="!form.menuCheckStrictly"
-                  empty-text="加载中，请稍候"
-                  :props="{ label: 'label', children: 'children' }"
-               ></el-tree>
-            </el-form-item>
-            <el-form-item label="备注">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitForm">确 定</el-button>
-               <el-button @click="cancel">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-
-      <!-- 分配角色数据权限对话框 -->
-      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
-         <el-form :model="form" label-width="80px">
-            <el-form-item label="角色名称">
-               <el-input v-model="form.roleName" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限字符">
-               <el-input v-model="form.roleKey" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="权限范围">
-               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
-                  <el-option
-                     v-for="item in dataScopeOptions"
-                     :key="item.value"
-                     :label="item.label"
-                     :value="item.value"
-                  ></el-option>
-               </el-select>
-            </el-form-item>
-            <el-form-item label="数据权限" v-show="form.dataScope == 2">
-               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
-               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
-               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
-               <el-tree
-                  class="tree-border"
-                  :data="deptOptions"
-                  show-checkbox
-                  default-expand-all
-                  ref="deptRef"
-                  node-key="id"
-                  :check-strictly="!form.deptCheckStrictly"
-                  empty-text="加载中，请稍候"
-                  :props="{ label: 'label', children: 'children' }"
-               ></el-tree>
-            </el-form-item>
-         </el-form>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button type="primary" @click="submitDataScope">确 定</el-button>
-               <el-button @click="cancelDataScope">取 消</el-button>
-            </div>
-         </template>
-      </el-dialog>
-   </div>
-</template>
-
-<script setup name="Role">
-import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
-import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
-
-const router = useRouter();
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
-
-const roleList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const dateRange = ref([]);
-const menuOptions = ref([]);
-const menuExpand = ref(false);
-const menuNodeAll = ref(false);
-const deptExpand = ref(true);
-const deptNodeAll = ref(false);
-const deptOptions = ref([]);
-const openDataScope = ref(false);
-const menuRef = ref(null);
-const deptRef = ref(null);
-
-/** 数据范围选项*/
-const dataScopeOptions = ref([
-  { value: "1", label: "全部数据权限" },
-  { value: "2", label: "自定数据权限" },
-  { value: "3", label: "本部门数据权限" },
-  { value: "4", label: "本部门及以下数据权限" },
-  { value: "5", label: "仅本人数据权限" }
-]);
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    roleName: undefined,
-    roleKey: undefined,
-    status: undefined
-  },
-  rules: {
-    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
-    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
-  },
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询角色列表 */
-function getList() {
-  loading.value = true;
-  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
-    roleList.value = response.rows;
-    total.value = response.total;
-    loading.value = false;
-  });
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  handleQuery();
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const roleIds = row.roleId || ids.value;
-  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
-    return delRole(roleIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-}
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/role/export", {
-    ...queryParams.value,
-  }, `role_${new Date().getTime()}.xlsx`);
-}
-
-/** 多选框选中数据 */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.roleId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-}
-
-/** 角色状态修改 */
-function handleStatusChange(row) {
-  let text = row.status === "0" ? "启用" : "停用";
-  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
-    return changeRoleStatus(row.roleId, row.status);
-  }).then(() => {
-    proxy.$modal.msgSuccess(text + "成功");
-  }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0";
-  });
-}
-
-/** 更多操作 */
-function handleCommand(command, row) {
-  switch (command) {
-    case "handleDataScope":
-      handleDataScope(row);
-      break;
-    case "handleAuthUser":
-      handleAuthUser(row);
-      break;
-    default:
-      break;
-  }
-}
-
-/** 分配用户 */
-function handleAuthUser(row) {
-  router.push("/system/role-auth/user/" + row.roleId);
-}
-
-/** 查询菜单树结构 */
-function getMenuTreeselect() {
-  menuTreeselect().then(response => {
-    menuOptions.value = response.data;
-  });
-}
-
-/** 所有部门节点数据 */
-function getDeptAllCheckedKeys() {
-  // 目前被选中的部门节点
-  let checkedKeys = deptRef.value.getCheckedKeys();
-  // 半选中的部门节点
-  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-  return checkedKeys;
-}
-
-/** 重置新增的表单以及其他数据  */
-function reset() {
-  if (menuRef.value != undefined) {
-    menuRef.value.setCheckedKeys([]);
-  }
-  menuExpand.value = false;
-  menuNodeAll.value = false;
-  deptExpand.value = true;
-  deptNodeAll.value = false;
-  form.value = {
-    roleId: undefined,
-    roleName: undefined,
-    roleKey: undefined,
-    roleSort: 0,
-    status: "0",
-    menuIds: [],
-    deptIds: [],
-    menuCheckStrictly: true,
-    deptCheckStrictly: true,
-    remark: undefined
-  };
-  proxy.resetForm("roleRef");
-}
-
-/** 添加角色 */
-function handleAdd() {
-  reset();
-  getMenuTreeselect();
-  open.value = true;
-  title.value = "添加角色";
-}
-
-/** 修改角色 */
-function handleUpdate(row) {
-  reset();
-  const roleId = row.roleId || ids.value;
-  const roleMenu = getRoleMenuTreeselect(roleId);
-  getRole(roleId).then(response => {
-    form.value = response.data;
-    form.value.roleSort = Number(form.value.roleSort);
-    open.value = true;
-    nextTick(() => {
-      roleMenu.then((res) => {
-        let checkedKeys = res.checkedKeys;
-        checkedKeys.forEach((v) => {
-          nextTick(() => {
-            menuRef.value.setChecked(v, true, false);
-          });
-        });
-      });
-    });
-  });
-  title.value = "修改角色";
-}
-
-/** 根据角色ID查询菜单树结构 */
-function getRoleMenuTreeselect(roleId) {
-  return roleMenuTreeselect(roleId).then(response => {
-    menuOptions.value = response.menus;
-    return response;
-  });
-}
-
-/** 根据角色ID查询部门树结构 */
-function getDeptTree(roleId) {
-  return deptTreeSelect(roleId).then(response => {
-    deptOptions.value = response.depts;
-    return response;
-  });
-}
-
-/** 树权限（展开/折叠）*/
-function handleCheckedTreeExpand(value, type) {
-  if (type == "menu") {
-    let treeList = menuOptions.value;
-    for (let i = 0; i < treeList.length; i++) {
-      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
-    }
-  } else if (type == "dept") {
-    let treeList = deptOptions.value;
-    for (let i = 0; i < treeList.length; i++) {
-      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
-    }
-  }
-}
-
-/** 树权限（全选/全不选） */
-function handleCheckedTreeNodeAll(value, type) {
-  if (type == "menu") {
-    menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
-  } else if (type == "dept") {
-    deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
-  }
-}
-
-/** 树权限（父子联动） */
-function handleCheckedTreeConnect(value, type) {
-  if (type == "menu") {
-    form.value.menuCheckStrictly = value ? true : false;
-  } else if (type == "dept") {
-    form.value.deptCheckStrictly = value ? true : false;
-  }
-}
-
-/** 所有菜单节点数据 */
-function getMenuAllCheckedKeys() {
-  // 目前被选中的菜单节点
-  let checkedKeys = menuRef.value.getCheckedKeys();
-  // 半选中的菜单节点
-  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
-  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-  return checkedKeys;
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["roleRef"].validate(valid => {
-    if (valid) {
-      if (form.value.roleId != undefined) {
-        form.value.menuIds = getMenuAllCheckedKeys();
-        updateRole(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        form.value.menuIds = getMenuAllCheckedKeys();
-        addRole(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-}
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-}
-
-/** 选择角色权限范围触发 */
-function dataScopeSelectChange(value) {
-  if (value !== "2") {
-    deptRef.value.setCheckedKeys([]);
-  }
-}
-
-/** 分配数据权限操作 */
-function handleDataScope(row) {
-  reset();
-  const deptTreeSelect = getDeptTree(row.roleId);
-  getRole(row.roleId).then(response => {
-    form.value = response.data;
-    openDataScope.value = true;
-    nextTick(() => {
-      deptTreeSelect.then(res => {
-        nextTick(() => {
-          if (deptRef.value) {
-            deptRef.value.setCheckedKeys(res.checkedKeys);
-          }
-        });
-      });
-    });
-  });
-  title.value = "分配数据权限";
-}
-
-/** 提交按钮（数据权限） */
-function submitDataScope() {
-  if (form.value.roleId != undefined) {
-    form.value.deptIds = getDeptAllCheckedKeys();
-    dataScope(form.value).then(response => {
-      proxy.$modal.msgSuccess("修改成功");
-      openDataScope.value = false;
-      getList();
-    });
-  }
-}
-
-/** 取消按钮（数据权限）*/
-function cancelDataScope() {
-  openDataScope.value = false;
-  reset();
-}
-
-getList();
-</script>
+<template>
+  <div class="app-container">
+    <div ref="topContainerRef">
+      <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
+        <el-form-item label="角色名称" prop="roleName">
+            <el-input
+              v-model="queryParams.roleName"
+              placeholder="请输入角色名称"
+              clearable
+              style="width: 240px"
+              @keyup.enter="handleQuery"
+            />
+        </el-form-item>
+        <el-form-item label="权限字符" prop="roleKey">
+            <el-input
+              v-model="queryParams.roleKey"
+              placeholder="请输入权限字符"
+              clearable
+              style="width: 240px"
+              @keyup.enter="handleQuery"
+            />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="角色状态"
+              clearable
+              style="width: 240px"
+            >
+              <el-option
+                  v-for="dict in sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+              />
+            </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间" style="width: 308px">
+            <el-date-picker
+              v-model="dateRange"
+              value-format="YYYY-MM-DD"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+            <el-button
+              type="primary"
+              plain
+              icon="Plus"
+              @click="handleAdd"
+              v-hasPermi="['system:role:add']"
+            >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button
+              type="success"
+              plain
+              icon="Edit"
+              :disabled="single"
+              @click="handleUpdate"
+              v-hasPermi="['system:role:edit']"
+            >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete"
+              v-hasPermi="['system:role:remove']"
+            >删除</el-button>
+        </el-col>
+        <el-col :span="1.5">
+            <el-button
+              type="warning"
+              plain
+              icon="Download"
+              @click="handleExport"
+              v-hasPermi="['system:role:export']"
+            >导出</el-button>
+        </el-col>
+        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+    </div>
+
+    <div :style="containerHeight">
+      <!-- 表格数据 -->
+      <el-table height="100%" v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+         <el-table-column type="selection" width="55" align="center" />
+         <el-table-column label="角色编号" prop="roleId" width="120" />
+         <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+         <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+         <el-table-column label="显示顺序" prop="roleSort" width="100" />
+         <el-table-column label="状态" align="center" width="100">
+            <template #default="scope">
+               <el-switch
+                  v-model="scope.row.status"
+                  active-value="0"
+                  inactive-value="0"
+                  @change="handleStatusChange(scope.row)"
+               ></el-switch>
+            </template>
+         </el-table-column>
+         <el-table-column label="创建时间" align="center" prop="createTime">
+            <template #default="scope">
+               <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+         </el-table-column>
+         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+              </el-tooltip>
+              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
+                <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
+              </el-tooltip>
+            </template>
+         </el-table-column>
+      </el-table>
+
+      <pagination
+         v-show="total > 0"
+         :total="total"
+         v-model:page="queryParams.pageNum"
+         v-model:limit="queryParams.pageSize"
+         @pagination="getList"
+      />
+
+    </div>
+
+      <!-- 添加或修改角色配置对话框 -->
+      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+         <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
+            <el-form-item label="角色名称" prop="roleName">
+               <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item prop="roleKey">
+               <template #label>
+                  <span>
+                     <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+                        <el-icon><question-filled /></el-icon>
+                     </el-tooltip>
+                     权限字符
+                  </span>
+               </template>
+               <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+            </el-form-item>
+            <el-form-item label="角色顺序" prop="roleSort">
+               <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+            </el-form-item>
+            <el-form-item label="状态">
+               <el-radio-group v-model="form.status">
+                  <el-radio
+                     v-for="dict in sys_normal_disable"
+                     :key="dict.value"
+                     :value="dict.value"
+                  >{{ dict.label }}</el-radio>
+               </el-radio-group>
+            </el-form-item>
+            <el-form-item label="菜单权限">
+               <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+               <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+               <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+               <el-tree
+                  class="tree-border"
+                  :data="menuOptions"
+                  show-checkbox
+                  ref="menuRef"
+                  node-key="id"
+                  :check-strictly="!form.menuCheckStrictly"
+                  empty-text="加载中，请稍候"
+                  :props="{ label: 'label', children: 'children' }"
+               ></el-tree>
+            </el-form-item>
+            <el-form-item label="备注">
+               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitForm">确 定</el-button>
+               <el-button @click="cancel">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+
+      <!-- 分配角色数据权限对话框 -->
+      <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>
+         <el-form :model="form" label-width="80px">
+            <el-form-item label="角色名称">
+               <el-input v-model="form.roleName" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="权限字符">
+               <el-input v-model="form.roleKey" :disabled="true" />
+            </el-form-item>
+            <el-form-item label="权限范围">
+               <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+                  <el-option
+                     v-for="item in dataScopeOptions"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value"
+                  ></el-option>
+               </el-select>
+            </el-form-item>
+            <el-form-item label="数据权限" v-show="form.dataScope == 2">
+               <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+               <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+               <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+               <el-tree
+                  class="tree-border"
+                  :data="deptOptions"
+                  show-checkbox
+                  default-expand-all
+                  ref="deptRef"
+                  node-key="id"
+                  :check-strictly="!form.deptCheckStrictly"
+                  empty-text="加载中，请稍候"
+                  :props="{ label: 'label', children: 'children' }"
+               ></el-tree>
+            </el-form-item>
+         </el-form>
+         <template #footer>
+            <div class="dialog-footer">
+               <el-button type="primary" @click="submitDataScope">确 定</el-button>
+               <el-button @click="cancelDataScope">取 消</el-button>
+            </div>
+         </template>
+      </el-dialog>
+   </div>
+</template>
+
+<script setup name="Role">
+import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api/system/role";
+import { roleMenuTreeselect, treeselect as menuTreeselect } from "@/api/system/menu";
+import { useContainerHeight } from "@/hooks/tableHeight";
+
+const topContainerRef = ref();
+const containerHeight = useContainerHeight(topContainerRef);
+
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+
+const roleList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+const menuOptions = ref([]);
+const menuExpand = ref(false);
+const menuNodeAll = ref(false);
+const deptExpand = ref(true);
+const deptNodeAll = ref(false);
+const deptOptions = ref([]);
+const openDataScope = ref(false);
+const menuRef = ref(null);
+const deptRef = ref(null);
+
+/** 数据范围选项*/
+const dataScopeOptions = ref([
+  { value: "1", label: "全部数据权限" },
+  { value: "2", label: "自定数据权限" },
+  { value: "3", label: "本部门数据权限" },
+  { value: "4", label: "本部门及以下数据权限" },
+  { value: "5", label: "仅本人数据权限" }
+]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    roleName: undefined,
+    roleKey: undefined,
+    status: undefined
+  },
+  rules: {
+    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
+    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
+    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询角色列表 */
+function getList() {
+  loading.value = true;
+  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+    roleList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const roleIds = row.roleId || ids.value;
+  proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function () {
+    return delRole(roleIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/role/export", {
+    ...queryParams.value,
+  }, `role_${new Date().getTime()}.xlsx`);
+}
+
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.roleId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 角色状态修改 */
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用";
+  proxy.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗?').then(function () {
+    return changeRoleStatus(row.roleId, row.status);
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功");
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0";
+  });
+}
+
+/** 更多操作 */
+function handleCommand(command, row) {
+  switch (command) {
+    case "handleDataScope":
+      handleDataScope(row);
+      break;
+    case "handleAuthUser":
+      handleAuthUser(row);
+      break;
+    default:
+      break;
+  }
+}
+
+/** 分配用户 */
+function handleAuthUser(row) {
+  router.push("/system/role-auth/user/" + row.roleId);
+}
+
+/** 查询菜单树结构 */
+function getMenuTreeselect() {
+  menuTreeselect().then(response => {
+    menuOptions.value = response.data;
+  });
+}
+
+/** 所有部门节点数据 */
+function getDeptAllCheckedKeys() {
+  // 目前被选中的部门节点
+  let checkedKeys = deptRef.value.getCheckedKeys();
+  // 半选中的部门节点
+  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  return checkedKeys;
+}
+
+/** 重置新增的表单以及其他数据  */
+function reset() {
+  if (menuRef.value != undefined) {
+    menuRef.value.setCheckedKeys([]);
+  }
+  menuExpand.value = false;
+  menuNodeAll.value = false;
+  deptExpand.value = true;
+  deptNodeAll.value = false;
+  form.value = {
+    roleId: undefined,
+    roleName: undefined,
+    roleKey: undefined,
+    roleSort: 0,
+    status: "0",
+    menuIds: [],
+    deptIds: [],
+    menuCheckStrictly: true,
+    deptCheckStrictly: true,
+    remark: undefined
+  };
+  proxy.resetForm("roleRef");
+}
+
+/** 添加角色 */
+function handleAdd() {
+  reset();
+  getMenuTreeselect();
+  open.value = true;
+  title.value = "添加角色";
+}
+
+/** 修改角色 */
+function handleUpdate(row) {
+  reset();
+  const roleId = row.roleId || ids.value;
+  const roleMenu = getRoleMenuTreeselect(roleId);
+  getRole(roleId).then(response => {
+    form.value = response.data;
+    form.value.roleSort = Number(form.value.roleSort);
+    open.value = true;
+    nextTick(() => {
+      roleMenu.then((res) => {
+        let checkedKeys = res.checkedKeys;
+        checkedKeys.forEach((v) => {
+          nextTick(() => {
+            menuRef.value.setChecked(v, true, false);
+          });
+        });
+      });
+    });
+  });
+  title.value = "修改角色";
+}
+
+/** 根据角色ID查询菜单树结构 */
+function getRoleMenuTreeselect(roleId) {
+  return roleMenuTreeselect(roleId).then(response => {
+    menuOptions.value = response.menus;
+    return response;
+  });
+}
+
+/** 根据角色ID查询部门树结构 */
+function getDeptTree(roleId) {
+  return deptTreeSelect(roleId).then(response => {
+    deptOptions.value = response.depts;
+    return response;
+  });
+}
+
+/** 树权限（展开/折叠）*/
+function handleCheckedTreeExpand(value, type) {
+  if (type == "menu") {
+    let treeList = menuOptions.value;
+    for (let i = 0; i < treeList.length; i++) {
+      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+    }
+  } else if (type == "dept") {
+    let treeList = deptOptions.value;
+    for (let i = 0; i < treeList.length; i++) {
+      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
+    }
+  }
+}
+
+/** 树权限（全选/全不选） */
+function handleCheckedTreeNodeAll(value, type) {
+  if (type == "menu") {
+    menuRef.value.setCheckedNodes(value ? menuOptions.value : []);
+  } else if (type == "dept") {
+    deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
+  }
+}
+
+/** 树权限（父子联动） */
+function handleCheckedTreeConnect(value, type) {
+  if (type == "menu") {
+    form.value.menuCheckStrictly = value ? true : false;
+  } else if (type == "dept") {
+    form.value.deptCheckStrictly = value ? true : false;
+  }
+}
+
+/** 所有菜单节点数据 */
+function getMenuAllCheckedKeys() {
+  // 目前被选中的菜单节点
+  let checkedKeys = menuRef.value.getCheckedKeys();
+  // 半选中的菜单节点
+  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  return checkedKeys;
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["roleRef"].validate(valid => {
+    if (valid) {
+      if (form.value.roleId != undefined) {
+        form.value.menuIds = getMenuAllCheckedKeys();
+        updateRole(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        form.value.menuIds = getMenuAllCheckedKeys();
+        addRole(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+/** 选择角色权限范围触发 */
+function dataScopeSelectChange(value) {
+  if (value !== "2") {
+    deptRef.value.setCheckedKeys([]);
+  }
+}
+
+/** 分配数据权限操作 */
+function handleDataScope(row) {
+  reset();
+  const deptTreeSelect = getDeptTree(row.roleId);
+  getRole(row.roleId).then(response => {
+    form.value = response.data;
+    openDataScope.value = true;
+    nextTick(() => {
+      deptTreeSelect.then(res => {
+        nextTick(() => {
+          if (deptRef.value) {
+            deptRef.value.setCheckedKeys(res.checkedKeys);
+          }
+        });
+      });
+    });
+  });
+  title.value = "分配数据权限";
+}
+
+/** 提交按钮（数据权限） */
+function submitDataScope() {
+  if (form.value.roleId != undefined) {
+    form.value.deptIds = getDeptAllCheckedKeys();
+    dataScope(form.value).then(response => {
+      proxy.$modal.msgSuccess("修改成功");
+      openDataScope.value = false;
+      getList();
+    });
+  }
+}
+
+/** 取消按钮（数据权限）*/
+function cancelDataScope() {
+  openDataScope.value = false;
+  reset();
+}
+
+getList();
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 04d482c..9cd3e8d 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,538 +1,547 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
-        <!--部门数据-->
-        <pane size="16">
-          <el-col>
-            <div class="head-container">
-              <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
-            </div>
-            <div class="head-container">
-              <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
-            </div>
-          </el-col>
-        </pane>
-        <!--用户数据-->
-        <pane size="84">
-          <el-col>
-            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px">
-              <el-form-item label="用户名称啊" prop="userName">
-                <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
-              </el-form-item>
-              <el-form-item label="手机号码" prop="phonenumber">
-                <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
-              </el-form-item>
-              <el-form-item label="状态" prop="status">
-                <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
-                  <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="创建时间" style="width: 308px">
-                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-              </el-form-item>
-            </el-form>
-
-            <el-row :gutter="10" class="mb8">
-              <el-col :span="1.5">
-                <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
-              </el-col>
-              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
-            </el-row>
-
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-              <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
-              <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
-              <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
-              <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
-                <template #default="scope">
-                  <el-switch
-                    v-model="scope.row.status"
-                    active-value="0"
-                    inactive-value="0"
-                    @change="handleStatusChange(scope.row)"
-                  ></el-switch>
-                </template>
-              </el-table-column>
-              <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
-                <template #default="scope">
-                  <span>{{ parseTime(scope.row.createTime) }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
-                <template #default="scope">
-                  <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
-                  </el-tooltip>
-                  <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
-                  </el-tooltip>
-                  <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
-                  </el-tooltip>
-                  <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
-                    <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
-                  </el-tooltip>
-                </template>
-              </el-table-column>
-            </el-table>
-            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-          </el-col>
-        </pane>
-      </splitpanes>
-    </el-row>
-
-    <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择">
-                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择">
-                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择">
-                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-    <!-- 用户导入对话框 -->
-    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
-      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
-        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <template #tip>
-          <div class="el-upload__tip text-center">
-            <div class="el-upload__tip">
-              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-            </div>
-            <span>仅允许导入xls、xlsx格式文件。</span>
-            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
-          </div>
-        </template>
-      </el-upload>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitFileForm">确 定</el-button>
-          <el-button @click="upload.open = false">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="User">
-import { getToken } from "@/utils/auth";
-import useAppStore from '@/store/modules/app'
-import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user";
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
-
-const router = useRouter();
-const appStore = useAppStore()
-const { proxy } = getCurrentInstance();
-const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");
-
-const userList = ref([]);
-const open = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-const title = ref("");
-const dateRange = ref([]);
-const deptName = ref("");
-const deptOptions = ref(undefined);
-const enabledDeptOptions = ref(undefined);
-const initPassword = ref(undefined);
-const postOptions = ref([]);
-const roleOptions = ref([]);
-/*** 用户导入参数 */
-const upload = reactive({
-  // 是否显示弹出层（用户导入）
-  open: false,
-  // 弹出层标题（用户导入）
-  title: "",
-  // 是否禁用上传
-  isUploading: false,
-  // 是否更新已经存在的用户数据
-  updateSupport: 0,
-  // 设置上传的请求头部
-  headers: { Authorization: "Bearer " + getToken() },
-  // 上传的地址
-  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
-});
-// 列显隐信息
-const columns = ref([
-  { key: 0, label: `用户编号`, visible: true },
-  { key: 1, label: `用户名称`, visible: true },
-  { key: 2, label: `用户昵称`, visible: true },
-  { key: 3, label: `部门`, visible: true },
-  { key: 4, label: `手机号码`, visible: true },
-  { key: 5, label: `状态`, visible: true },
-  { key: 6, label: `创建时间`, visible: true }
-]);
-
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    userName: undefined,
-    phonenumber: undefined,
-    status: undefined,
-    deptId: undefined
-  },
-  rules: {
-    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
-    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
-    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
-    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 通过条件过滤节点  */
-const filterNode = (value, data) => {
-  if (!value) return true;
-  return data.label.indexOf(value) !== -1;
-};
-
-/** 根据名称筛选部门树 */
-watch(deptName, val => {
-  proxy.$refs["deptTreeRef"].filter(val);
-});
-
-/** 查询用户列表 */
-function getList() {
-  loading.value = true;
-  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
-    loading.value = false;
-    userList.value = res.rows;
-    total.value = res.total;
-  });
-};
-
-/** 查询部门下拉树结构 */
-function getDeptTree() {
-  deptTreeSelect().then(response => {
-    deptOptions.value = response.data;
-    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)));
-  });
-};
-
-/** 过滤禁用的部门 */
-function filterDisabledDept(deptList) {
-  return deptList.filter(dept => {
-    if (dept.disabled) {
-      return false;
-    }
-    if (dept.children && dept.children.length) {
-      dept.children = filterDisabledDept(dept.children);
-    }
-    return true;
-  });
-};
-
-/** 节点单击事件 */
-function handleNodeClick(data) {
-  queryParams.value.deptId = data.id;
-  handleQuery();
-};
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-/** 重置按钮操作 */
-function resetQuery() {
-  dateRange.value = [];
-  proxy.resetForm("queryRef");
-  queryParams.value.deptId = undefined;
-  proxy.$refs.deptTreeRef.setCurrentKey(null);
-  handleQuery();
-};
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const userIds = row.userId || ids.value;
-  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
-    return delUser(userIds);
-  }).then(() => {
-    getList();
-    proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
-};
-
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download("system/user/export", {
-    ...queryParams.value,
-  },`user_${new Date().getTime()}.xlsx`);
-};
-
-/** 用户状态修改  */
-function handleStatusChange(row) {
-  let text = row.status === "0" ? "启用" : "停用";
-  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
-    return changeUserStatus(row.userId, row.status);
-  }).then(() => {
-    proxy.$modal.msgSuccess(text + "成功");
-  }).catch(function () {
-    row.status = row.status === "0" ? "1" : "0";
-  });
-};
-
-/** 更多操作 */
-function handleCommand(command, row) {
-  switch (command) {
-    case "handleResetPwd":
-      handleResetPwd(row);
-      break;
-    case "handleAuthRole":
-      handleAuthRole(row);
-      break;
-    default:
-      break;
-  }
-};
-
-/** 跳转角色分配 */
-function handleAuthRole(row) {
-  const userId = row.userId;
-  router.push("/system/user-auth/role/" + userId);
-};
-
-/** 重置密码按钮操作 */
-function handleResetPwd(row) {
-  proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    closeOnClickModal: false,
-    inputPattern: /^.{5,20}$/,
-    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
-    inputValidator: (value) => {
-      if (/<|>|"|'|\||\\/.test(value)) {
-        return "不能包含非法字符：< > \" ' \\\ |"
-      }
-    },
-  }).then(({ value }) => {
-    resetUserPwd(row.userId, value).then(response => {
-      proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
-    });
-  }).catch(() => {});
-};
-
-/** 选择条数  */
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.userId);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
-/** 导入按钮操作 */
-function handleImport() {
-  upload.title = "用户导入";
-  upload.open = true;
-};
-
-/** 下载模板操作 */
-function importTemplate() {
-  proxy.download("system/user/importTemplate", {
-  }, `user_template_${new Date().getTime()}.xlsx`);
-};
-
-/**文件上传中处理 */
-const handleFileUploadProgress = (event, file, fileList) => {
-  upload.isUploading = true;
-};
-
-/** 文件上传成功处理 */
-const handleFileSuccess = (response, file, fileList) => {
-  upload.open = false;
-  upload.isUploading = false;
-  proxy.$refs["uploadRef"].handleRemove(file);
-  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
-  getList();
-};
-
-/** 提交上传文件 */
-function submitFileForm() {
-  proxy.$refs["uploadRef"].submit();
-};
-
-/** 重置操作表单 */
-function reset() {
-  form.value = {
-    userId: undefined,
-    deptId: undefined,
-    userName: undefined,
-    nickName: undefined,
-    password: undefined,
-    phonenumber: undefined,
-    email: undefined,
-    sex: undefined,
-    status: "0",
-    remark: undefined,
-    postIds: [],
-    roleIds: []
-  };
-  proxy.resetForm("userRef");
-};
-
-/** 取消按钮 */
-function cancel() {
-  open.value = false;
-  reset();
-};
-
-/** 新增按钮操作 */
-function handleAdd() {
-  reset();
-  getUser().then(response => {
-    postOptions.value = response.posts;
-    roleOptions.value = response.roles;
-    open.value = true;
-    title.value = "添加用户";
-    form.value.password = initPassword.value;
-  });
-};
-
-/** 修改按钮操作 */
-function handleUpdate(row) {
-  reset();
-  const userId = row.userId || ids.value;
-  getUser(userId).then(response => {
-    form.value = response.data;
-    postOptions.value = response.posts;
-    roleOptions.value = response.roles;
-    form.value.postIds = response.postIds;
-    form.value.roleIds = response.roleIds;
-    open.value = true;
-    title.value = "修改用户";
-    form.password = "";
-  });
-};
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["userRef"].validate(valid => {
-    if (valid) {
-      if (form.value.userId != undefined) {
-        updateUser(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功");
-          open.value = false;
-          getList();
-        });
-      } else {
-        addUser(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功");
-          open.value = false;
-          getList();
-        });
-      }
-    }
-  });
-};
-
-getDeptTree();
-getList();
-</script>
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
+        <!--部门数据-->
+        <pane size="16">
+          <el-col>
+            <div class="head-container">
+              <el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="Search" style="margin-bottom: 20px" />
+            </div>
+            <div class="head-container">
+              <el-tree :data="deptOptions" :props="{ label: 'label', children: 'children' }" :expand-on-click-node="false" :filter-node-method="filterNode" ref="deptTreeRef" node-key="id" highlight-current default-expand-all @node-click="handleNodeClick" />
+            </div>
+          </el-col>
+        </pane>
+        <!--用户数据-->
+        <pane size="84">
+          <el-col>
+            <div ref="topContainerRef">
+              <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px">
+                <el-form-item label="用户名称啊" prop="userName">
+                  <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="手机号码" prop="phonenumber">
+                  <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter="handleQuery" />
+                </el-form-item>
+                <el-form-item label="状态" prop="status">
+                  <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+                    <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="创建时间" style="width: 308px">
+                  <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+
+              <el-row :gutter="10" class="mb8">
+                <el-col :span="1.5">
+                  <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button type="info" plain icon="Upload" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
+                </el-col>
+                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+              </el-row>
+            </div>
+
+            <div :style="containerHeight">
+              <el-table height="100%" v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="50" align="center" />
+                <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
+                <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+                <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+                <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+                <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
+                <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
+                  <template #default="scope">
+                    <el-switch
+                      v-model="scope.row.status"
+                      active-value="0"
+                      inactive-value="0"
+                      @change="handleStatusChange(scope.row)"
+                    ></el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
+                  <template #default="scope">
+                    <span>{{ parseTime(scope.row.createTime) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
+                  <template #default="scope">
+                    <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">
+                      <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
+                    </el-tooltip>
+                    <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">
+                      <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>
+                    </el-tooltip>
+                    <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">
+                      <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
+                    </el-tooltip>
+                    <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">
+                      <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>
+                    </el-tooltip>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+            </div>
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+
+    <!-- 添加或修改用户配置对话框 -->
+    <el-dialog :title="title" v-model="open" width="600px" append-to-body>
+      <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="归属部门" prop="deptId">
+              <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" check-strictly />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="用户性别">
+              <el-select v-model="form.sex" placeholder="请选择">
+                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="岗位">
+              <el-select v-model="form.postIds" multiple placeholder="请选择">
+                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="角色">
+              <el-select v-model="form.roleIds" multiple placeholder="请选择">
+                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注">
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 用户导入对话框 -->
+    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
+      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip text-center">
+            <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+            </div>
+            <span>仅允许导入xls、xlsx格式文件。</span>
+            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFileForm">确 定</el-button>
+          <el-button @click="upload.open = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="User">
+import { getToken } from "@/utils/auth";
+import useAppStore from '@/store/modules/app'
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user";
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+
+import { useContainerHeight } from "@/hooks/tableHeight";
+
+const topContainerRef = ref();
+const containerHeight = useContainerHeight(topContainerRef);
+
+const router = useRouter();
+const appStore = useAppStore()
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");
+
+const userList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+const deptName = ref("");
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const initPassword = ref(undefined);
+const postOptions = ref([]);
+const roleOptions = ref([]);
+/*** 用户导入参数 */
+const upload = reactive({
+  // 是否显示弹出层（用户导入）
+  open: false,
+  // 弹出层标题（用户导入）
+  title: "",
+  // 是否禁用上传
+  isUploading: false,
+  // 是否更新已经存在的用户数据
+  updateSupport: 0,
+  // 设置上传的请求头部
+  headers: { Authorization: "Bearer " + getToken() },
+  // 上传的地址
+  url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
+});
+// 列显隐信息
+const columns = ref([
+  { key: 0, label: `用户编号`, visible: true },
+  { key: 1, label: `用户名称`, visible: true },
+  { key: 2, label: `用户昵称`, visible: true },
+  { key: 3, label: `部门`, visible: true },
+  { key: 4, label: `手机号码`, visible: true },
+  { key: 5, label: `状态`, visible: true },
+  { key: 6, label: `创建时间`, visible: true }
+]);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined
+  },
+  rules: {
+    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
+    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 通过条件过滤节点  */
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+};
+
+/** 根据名称筛选部门树 */
+watch(deptName, val => {
+  proxy.$refs["deptTreeRef"].filter(val);
+});
+
+/** 查询用户列表 */
+function getList() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false;
+    userList.value = res.rows;
+    total.value = res.total;
+  });
+};
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)));
+  });
+};
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+};
+
+/** 节点单击事件 */
+function handleNodeClick(data) {
+  queryParams.value.deptId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  queryParams.value.deptId = undefined;
+  proxy.$refs.deptTreeRef.setCurrentKey(null);
+  handleQuery();
+};
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+};
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download("system/user/export", {
+    ...queryParams.value,
+  },`user_${new Date().getTime()}.xlsx`);
+};
+
+/** 用户状态修改  */
+function handleStatusChange(row) {
+  let text = row.status === "0" ? "启用" : "停用";
+  proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
+    return changeUserStatus(row.userId, row.status);
+  }).then(() => {
+    proxy.$modal.msgSuccess(text + "成功");
+  }).catch(function () {
+    row.status = row.status === "0" ? "1" : "0";
+  });
+};
+
+/** 更多操作 */
+function handleCommand(command, row) {
+  switch (command) {
+    case "handleResetPwd":
+      handleResetPwd(row);
+      break;
+    case "handleAuthRole":
+      handleAuthRole(row);
+      break;
+    default:
+      break;
+  }
+};
+
+/** 跳转角色分配 */
+function handleAuthRole(row) {
+  const userId = row.userId;
+  router.push("/system/user-auth/role/" + userId);
+};
+
+/** 重置密码按钮操作 */
+function handleResetPwd(row) {
+  proxy.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    closeOnClickModal: false,
+    inputPattern: /^.{5,20}$/,
+    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
+    inputValidator: (value) => {
+      if (/<|>|"|'|\||\\/.test(value)) {
+        return "不能包含非法字符：< > \" ' \\\ |"
+      }
+    },
+  }).then(({ value }) => {
+    resetUserPwd(row.userId, value).then(response => {
+      proxy.$modal.msgSuccess("修改成功，新密码是：" + value);
+    });
+  }).catch(() => {});
+};
+
+/** 选择条数  */
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.userId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 导入按钮操作 */
+function handleImport() {
+  upload.title = "用户导入";
+  upload.open = true;
+};
+
+/** 下载模板操作 */
+function importTemplate() {
+  proxy.download("system/user/importTemplate", {
+  }, `user_template_${new Date().getTime()}.xlsx`);
+};
+
+/**文件上传中处理 */
+const handleFileUploadProgress = (event, file, fileList) => {
+  upload.isUploading = true;
+};
+
+/** 文件上传成功处理 */
+const handleFileSuccess = (response, file, fileList) => {
+  upload.open = false;
+  upload.isUploading = false;
+  proxy.$refs["uploadRef"].handleRemove(file);
+  proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+  getList();
+};
+
+/** 提交上传文件 */
+function submitFileForm() {
+  proxy.$refs["uploadRef"].submit();
+};
+
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  };
+  proxy.resetForm("userRef");
+};
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+};
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then(response => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    open.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+};
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then(response => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    open.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+};
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["userRef"].validate(valid => {
+    if (valid) {
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+};
+
+getDeptTree();
+getList();
+</script>
diff --git a/src/views/vi/testProject/index.vue b/src/views/vi/testProject/index.vue
index 7f457ae..cbaddb9 100644
--- a/src/views/vi/testProject/index.vue
+++ b/src/views/vi/testProject/index.vue
@@ -142,91 +142,91 @@
 
     <div :style="containerHeight">
       <el-table
-      v-loading="loading"
-      height="100%"
-      :data="projectList"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="项目ID" align="center" prop="projectId" width="150" show-overflow-tooltip />
-      <el-table-column label="项目名称" align="center" prop="projectName"  width="150" show-overflow-tooltip />
-      <el-table-column label="测试人员" align="center" prop="tester" />
-      <el-table-column
-        label="计划测试开始时间"
-        align="center"
-        prop="planStart"
-        width="180"
+        v-loading="loading"
+        height="100%"
+        :data="projectList"
+        @selection-change="handleSelectionChange"
       >
-        <template #default="{ row }">
-          <span>{{ parseTime(row.planStart) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="计划测试结束时间" align="center" prop="planEnd" width="180">
-        <template #default="{ row }">
-          <span>{{ parseTime(row.planEnd) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="项目描述" width="200" show-overflow-tooltip align="center" prop="description" />
-      <el-table-column label="样品名称" align="center" prop="sampleName" width="150" show-overflow-tooltip />
-      <el-table-column label="商标" align="center" prop="trademark"  width="150" show-overflow-tooltip />
-      <el-table-column label="型号规格" align="center" prop="modelSpec"  width="150" show-overflow-tooltip />
-      <el-table-column label="数量" align="center" prop="quantity" />
-      <el-table-column label="项目状态" align="center" prop="status">
-        <template #default="{ row }">
-          {{ row.status == 0 ? '已执行': '未执行' }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="300px" class-name="small-padding fixed-width" fixed="right">
-        <template #default="{ row }">
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleSetting(row)"
-            v-hasPermi="['system:project:add','system:project:edit']"
-            >配置
-          </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            v-if="row.status == 1"
-            @click="handleExecute(row)"
-            v-hasPermi="['system:project:add','system:project:edit']"
-            >执行
-          </el-button>
-          <el-button
-            icon="DataLine"
-            v-if="row.status == 0"
-            link
-            type="primary"
-            v-hasPermi="['system:project:add','system:project:edit']"
-            @click="handleOpenDashboard(row)"
-            >可视化
-          </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleUpdate(row)"
-            v-hasPermi="['system:project:edit']"
-            >修改</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleDelete(row)"
-            v-hasPermi="['system:project:remove']"
-            >删除</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="项目ID" align="center" prop="projectId" width="150" show-overflow-tooltip />
+        <el-table-column label="项目名称" align="center" prop="projectName"  width="150" show-overflow-tooltip />
+        <el-table-column label="测试人员" align="center" prop="tester" />
+        <el-table-column
+          label="计划测试开始时间"
+          align="center"
+          prop="planStart"
+          width="180"
+        >
+          <template #default="{ row }">
+            <span>{{ parseTime(row.planStart) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="计划测试结束时间" align="center" prop="planEnd" width="180">
+          <template #default="{ row }">
+            <span>{{ parseTime(row.planEnd) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="项目描述" width="200" show-overflow-tooltip align="center" prop="description" />
+        <el-table-column label="样品名称" align="center" prop="sampleName" width="150" show-overflow-tooltip />
+        <el-table-column label="商标" align="center" prop="trademark"  width="150" show-overflow-tooltip />
+        <el-table-column label="型号规格" align="center" prop="modelSpec"  width="150" show-overflow-tooltip />
+        <el-table-column label="数量" align="center" prop="quantity" />
+        <el-table-column label="项目状态" align="center" prop="status">
+          <template #default="{ row }">
+            {{ row.status == 0 ? '已执行': '未执行' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="300px" class-name="small-padding fixed-width" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleSetting(row)"
+              v-hasPermi="['system:project:add','system:project:edit']"
+              >配置
+            </el-button>
+            <el-button
+              size="mini"
+              type="text"
+              v-if="row.status == 1"
+              @click="handleExecute(row)"
+              v-hasPermi="['system:project:add','system:project:edit']"
+              >执行
+            </el-button>
+            <el-button
+              icon="DataLine"
+              v-if="row.status == 0"
+              link
+              type="primary"
+              v-hasPermi="['system:project:add','system:project:edit']"
+              @click="handleOpenDashboard(row)"
+              >可视化
+            </el-button>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleUpdate(row)"
+              v-hasPermi="['system:project:edit']"
+              >修改</el-button
+            >
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleDelete(row)"
+              v-hasPermi="['system:project:remove']"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
     </div>
 
     <!-- 添加或修改语料库对话框 -->

From 031a38f4635605257b228d3642358977bf267155 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Wed, 5 Nov 2025 15:48:20 +0800
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/test/configs/Run.vue | 2 +-
 vite.config.js                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/test/configs/Run.vue b/src/views/test/configs/Run.vue
index 95d1b4b..a5a0c07 100644
--- a/src/views/test/configs/Run.vue
+++ b/src/views/test/configs/Run.vue
@@ -48,7 +48,7 @@
 
                     <el-table-column prop="value" label="入参值">
                         <template #default="{ row, column, $index }">
-                            <el-form-item v-if="row.type !== 'object' && !row.type.includes('array')" label="" :prop="`formData.tableData.${pIndex}.config.${row.propPath}.value`" :rules="row.required ? [{ required: true, message: '请输入', trigger: 'blur' }] : []">
+                            <el-form-item v-if="row.type !== 'object' && !row.type.includes('array')" label="" :prop="`formData.tableData.${pIndex}.config${row.propPath}value`" :rules="row.required ? [{ required: true, message: '请输入', trigger: 'blur' }] : []">
                                 <el-input v-if="row.type === 'string'" v-model="row.value" />
                                 <el-input-number  v-if="row.type === 'number'" :controls="false" v-model="row.value" />
                                 <el-switch v-if="row.type === 'boolean'" v-model="row.value" />
diff --git a/vite.config.js b/vite.config.js
index 9bddf63..20460d5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -35,7 +35,7 @@ export default defineConfig(({mode, command}) => {
                     //杨 http://192.168.0.10:13080
                     //赵 http://10.148.108.58:13080
                     // dev http://10.148.20.34:13080
-                    // target: command === 'build' ? VITE_API_URL : 'http://10.148.20.34:13080',
+                    // target: VITE_API_URL,
                     target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
                     changeOrigin: true,
                     rewrite: (p) => p.replace(/^\/dev-api/, '')

From 74c75e111e9219678d599ccb4e08a4f8221c0d9c Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Mon, 10 Nov 2025 17:22:23 +0800
Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=E8=A7=A6=E6=8E=A7=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/flow/config.js         | 18 ++++++++++++++++++
 src/views/flow/icon/dialogue.svg |  2 +-
 src/views/flow/icon/touch.svg    |  1 +
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/views/flow/icon/touch.svg

diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index f7fce53..2b528ad 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -16,6 +16,7 @@ import planSvg from './icon/plan.svg'
 import awakenSvg from './icon/awaken.svg'
 import dialogueSvg from './icon/dialogue.svg'
 import audioSvg from './icon/audio.svg'
+import touchSvg from './icon/touch.svg'
 
 import { v4 as randomUUID } from 'uuid'
 
@@ -350,4 +351,21 @@ export const collapseList = [
       }
     ],
   },
+  {
+    collapseTitle: "触控交互",
+    nodeList: [
+      {
+        icon: touchSvg,
+        name: "触控",
+        type: "serviceNode",
+        desc: "去触控坐标的点位",
+        action: 'TOUCH',
+        nodeParams: [
+          { name: "deviceId", type: "input", input: "", disabled: true },
+          { name: "touchParams", type: "input", input: "", disabled: true }
+        ],
+        outputType: 'json',
+      }
+    ],
+  },
 ]
diff --git a/src/views/flow/icon/dialogue.svg b/src/views/flow/icon/dialogue.svg
index e3481ff..b208067 100644
--- a/src/views/flow/icon/dialogue.svg
+++ b/src/views/flow/icon/dialogue.svg
@@ -1 +1 @@
-<svg t="1758526744847" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8113" width="200" height="200"><path d="M512 117.76c218.065455 0 395.636364 135.68 395.636364 302.545455s-177.570909 302.545455-395.636364 302.545454a144.058182 144.058182 0 0 0-50.501818 10.472727 791.272727 791.272727 0 0 0-162.909091 99.374546c-4.421818-128.232727-23.272727-168.96-56.087273-191.534546C162.909091 584.145455 116.363636 503.621818 116.363636 420.538182c0-167.098182 177.570909-302.545455 395.636364-302.545455m0-69.818182c-256 0-465.454545 166.632727-465.454545 372.363637 0 110.312727 59.810909 209.454545 155.22909 277.643636 23.272727 16.756364 27.694545 116.363636 27.694546 192.232727a41.192727 41.192727 0 0 0 40.494545 41.89091 40.029091 40.029091 0 0 0 23.272728-8.61091c58.414545-45.149091 141.730909-105.425455 192-124.50909a74.007273 74.007273 0 0 1 26.763636-6.05091c256 0 465.454545-166.865455 465.454545-372.363636s-209.454545-372.363636-465.454545-372.363636z" fill="#65BEE0" p-id="8114"></path><path d="M663.272727 325.818182h-302.545454a34.909091 34.909091 0 0 0 0 69.818182h302.545454a34.909091 34.909091 0 0 0 0-69.818182zM616.727273 488.727273h-209.454546a34.909091 34.909091 0 0 0 0 69.818182h209.454546a34.909091 34.909091 0 0 0 0-69.818182z" fill="#65BEE0" p-id="8115"></path></svg>
\ No newline at end of file
+<svg t="1762763163012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23408" width="200" height="200"><path d="M0 0m234.057143 0l555.885714 0q234.057143 0 234.057143 234.057143l0 555.885714q0 234.057143-234.057143 234.057143l-555.885714 0q-234.057143 0-234.057143-234.057143l0-555.885714q0-234.057143 234.057143-234.057143Z" fill="#65BEE0" p-id="23409" data-spm-anchor-id="a313x.search_index.0.i15.2cb83a81yhcKKA" class=""></path><path d="M735.319771 277.942857H376.451657A69.266286 69.266286 0 0 0 307.2 347.194514v197.953829A69.266286 69.266286 0 0 0 376.451657 614.4H446.171429s3.657143 43.885714-25.6 58.514286c0 0 72.206629-14.628571 94.6176-58.514286h220.130742A69.266286 69.266286 0 0 0 804.571429 545.148343V347.194514A69.266286 69.266286 0 0 0 735.319771 277.942857zM446.171429 482.742857a29.257143 29.257143 0 0 1-29.257143-29.257143 29.257143 29.257143 0 0 1 29.257143-29.257143 29.257143 29.257143 0 0 1 29.257142 29.257143 29.257143 29.257143 0 0 1-29.257142 29.257143z m109.714285 0a29.257143 29.257143 0 0 1-29.257143-29.257143 29.257143 29.257143 0 0 1 29.257143-29.257143 29.257143 29.257143 0 0 1 29.257143 29.257143 29.257143 29.257143 0 0 1-29.257143 29.257143z m109.714286 0a29.257143 29.257143 0 0 1-29.257143-29.257143 29.257143 29.257143 0 0 1 29.257143-29.257143 29.257143 29.257143 0 0 1 29.257143 29.257143 29.257143 29.257143 0 0 1-29.257143 29.257143z" fill="#ffffff" opacity=".34" p-id="23410" data-spm-anchor-id="a313x.search_index.0.i17.2cb83a81yhcKKA" class="selected"></path><path d="M662.176914 351.085714H303.3088A69.266286 69.266286 0 0 0 234.057143 420.337371v197.953829A69.266286 69.266286 0 0 0 303.3088 687.542857H373.028571s3.657143 43.885714-25.6 58.514286c0 0 72.206629-14.628571 94.6176-58.514286h220.130743A69.266286 69.266286 0 0 0 731.428571 618.2912V420.337371A69.266286 69.266286 0 0 0 662.176914 351.085714zM373.028571 555.885714a29.257143 29.257143 0 0 1-29.257142-29.257143 29.257143 29.257143 0 0 1 29.257142-29.257142 29.257143 29.257143 0 0 1 29.257143 29.257142 29.257143 29.257143 0 0 1-29.257143 29.257143z m109.714286 0a29.257143 29.257143 0 0 1-29.257143-29.257143 29.257143 29.257143 0 0 1 29.257143-29.257142 29.257143 29.257143 0 0 1 29.257143 29.257142 29.257143 29.257143 0 0 1-29.257143 29.257143z m109.714286 0a29.257143 29.257143 0 0 1-29.257143-29.257143 29.257143 29.257143 0 0 1 29.257143-29.257142 29.257143 29.257143 0 0 1 29.257143 29.257142 29.257143 29.257143 0 0 1-29.257143 29.257143z" fill="#ffffff" p-id="23411" data-spm-anchor-id="a313x.search_index.0.i14.2cb83a81yhcKKA" class="selected"></path></svg>
\ No newline at end of file
diff --git a/src/views/flow/icon/touch.svg b/src/views/flow/icon/touch.svg
new file mode 100644
index 0000000..44a14a5
--- /dev/null
+++ b/src/views/flow/icon/touch.svg
@@ -0,0 +1 @@
+<svg t="1762762024042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7115" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#65BEE0" p-id="7116" data-spm-anchor-id="a313x.search_index.0.i4.2cb83a81yhcKKA" class="selected"></path><path d="M440.018824 310.452706c6.625882 0 13.703529 2.198588 20.781176 7.68 11.294118 8.884706 17.709176 22.588235 17.769412 36.954353l0.391529 108.242823 0.120471 43.248942 0.150588 31.442823s20.239059-27.648 49.935059-27.648c15.932235 0 34.484706 7.890824 54.091294 32.165647 0 0 18.191059-30.539294 47.435294-30.539294 15.36 0 33.731765 8.342588 54.091294 33.912471 0 0 17.588706-34.424471 41.562353-34.424471 8.071529 0 16.865882 3.915294 25.99153 14.486588 10.752 12.739765 16.564706 29.063529 16.564705 45.808941v230.098824s-0.722824 5.963294-7.168 14.938353a63.608471 63.608471 0 0 1-51.83247 26.352941l-239.555765 0.060235a73.396706 73.396706 0 0 1-57.313882-27.557647l-131.373177-164.111059a46.019765 46.019765 0 0 1-6.595764-46.983529c4.517647-10.390588 13.251765-19.275294 29.635764-19.275294 8.432941 0 18.763294 2.349176 31.62353 7.951059 42.736941 19.154824 58.006588 59.542588 58.006588 59.542588l0.692706-146.100706 0.210823-43.158588 0.512-105.682824c0.060235-14.546824 6.716235-28.400941 18.31153-37.255529 7.228235-5.571765 16.263529-10.149647 25.961412-10.149647zM436.705882 180.705882a165.647059 165.647059 0 0 1 123.723294 275.787294 38.068706 38.068706 0 0 1-29.455058 12.468706h-1.987765a8.794353 8.794353 0 0 1-8.734118-8.734117l-0.090353-15.450353a15.058824 15.058824 0 0 1 4.336942-10.541177l0.090352-0.090353a123.392 123.392 0 0 0 36.352-87.792941c0-33.189647-12.950588-64.391529-36.352-87.883294A123.663059 123.663059 0 0 0 436.705882 222.117647c-33.189647 0-64.391529 12.950588-87.883294 36.352a123.663059 123.663059 0 0 0-36.352 87.883294c0 33.189647 12.950588 64.391529 36.352 87.883294l0.090353 0.060236c3.162353 3.162353 4.969412 7.499294 4.909177 11.956705a21.353412 21.353412 0 0 1-36.74353 14.697412A165.647059 165.647059 0 0 1 436.705882 180.705882z" fill="#ffffff" p-id="7117" data-spm-anchor-id="a313x.search_index.0.i3.2cb83a81yhcKKA" class=""></path></svg>
\ No newline at end of file

From 592ebddc251aaa95f7aa24df1671c42b306aed82 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Thu, 13 Nov 2025 21:55:20 +0800
Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 =?UTF-8?q?=E8=AF=B4=E8=AF=9D=E5=92=8C=E8=A1=A8=E6=83=85=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/flow/config.js                    | 69 ++++++++++++++++++++-
 src/views/flow/icon/expression.svg          |  1 +
 src/views/flow/nodes/common/serviceNode.vue | 14 ++++-
 3 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 src/views/flow/icon/expression.svg

diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index 2b528ad..46b30e1 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -17,6 +17,7 @@ import awakenSvg from './icon/awaken.svg'
 import dialogueSvg from './icon/dialogue.svg'
 import audioSvg from './icon/audio.svg'
 import touchSvg from './icon/touch.svg'
+import expressionSvg from './icon/expression.svg'
 
 import { v4 as randomUUID } from 'uuid'
 
@@ -74,11 +75,39 @@ export const registerCustomizeNode = (lf) => {
 };
 
 const deviceOptions =  () => {
-  return ['cam1', 'cam2', 'cam3', 'cam4']
+  return [{
+    value: 'cam1',
+    label: 'cam1'
+  }, {
+    value: 'cam2',
+    label: 'cam2'
+  }, {
+    value: 'cam3',
+    label: 'cam3' 
+  }, {
+    value: 'cam4',
+    label: 'cam4'
+  }]
 }
 
 const audioOptions = () => {
-  return ['spk1']
+  return [{
+    value: 'spk1',
+    label: 'spk1'
+  }]
+}
+
+const expressOptions = () => {
+  return [{
+    value: 1,
+    label: '高兴'
+  }, {
+    value: 2,
+    label: '惊讶'
+  }, {
+    value: 3,
+    label: '疲惫'
+  }]
 }
 
 export const collapseList = [
@@ -365,7 +394,41 @@ export const collapseList = [
           { name: "touchParams", type: "input", input: "", disabled: true }
         ],
         outputType: 'json',
-      }
+      },
+      {
+        icon: expressionSvg,
+        name: "开始说话",
+        type: "serviceNode",
+        desc: "控制机器人说话",
+        action: 'BIO_HEAD_SPEAK_START',
+        nodeParams: [
+          { name: "deviceId", type: "input", input: "", disabled: true }
+        ],
+        outputType: 'json',
+      },
+      {
+        icon: expressionSvg,
+        name: "停止说话",
+        type: "serviceNode",
+        desc: "停止机器人说话",
+        action: 'BIO_HEAD_SPEAK_STOP',
+        nodeParams: [
+          { name: "deviceId", type: "input", input: "", disabled: true }
+        ],
+        outputType: 'json',
+      },
+      {
+        icon: expressionSvg,
+        name: "表情",
+        type: "serviceNode",
+        desc: "控制机器人的面部表情",
+        action: 'BIO_HEAD_SPECIAL_EXPRESSION',
+        nodeParams: [
+          { name: "deviceId", type: "input", input: "", disabled: true },
+          { name: "expressKey", type: "input",componentType: 'select', selectOptions: expressOptions(), disabled: true },
+        ],
+        outputType: 'json',
+      },
     ],
   },
 ]
diff --git a/src/views/flow/icon/expression.svg b/src/views/flow/icon/expression.svg
new file mode 100644
index 0000000..ae84256
--- /dev/null
+++ b/src/views/flow/icon/expression.svg
@@ -0,0 +1 @@
+<svg t="1762999534829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4760" width="200" height="200"><path d="M512 979C263.472 979 62 777.528 62 529S263.472 79 512 79s450 201.472 450 450-201.472 450-450 450zM337 479c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75z m350 0c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75zM312 629c0 110.457 89.543 200 200 200s200-89.543 200-200H312z" fill="#65BEE0" p-id="4761"></path></svg>
\ No newline at end of file
diff --git a/src/views/flow/nodes/common/serviceNode.vue b/src/views/flow/nodes/common/serviceNode.vue
index dab8b6c..6e0956d 100644
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/src/views/flow/nodes/common/serviceNode.vue
@@ -62,6 +62,7 @@
                 <el-input
                   :disabled="property?.disabled || false"
                   v-model="property.name"
+                  @keydown="handleInputKeydown"
                   placeholder="请输入"
                   clearable
                 />
@@ -81,9 +82,9 @@
                 >
                     <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
                     <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
-                        <el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
+                        <el-option v-for="item in property.selectOptions" :key="item.value" :label="item.label" :value="item.value" />
                     </el-select>
-                    <el-input v-else v-model="property.input" placeholder="请输入" clearable />
+                    <el-input @keydown="handleInputKeydown" v-else v-model="property.input" placeholder="请输入" clearable />
                 </el-form-item>
                 <el-form-item
                   v-if="property.type === 'quote'"
@@ -322,6 +323,15 @@ watch(
   }
 );
 
+const handleInputKeydown = (e) => {
+  // 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
+  e.stopPropagation();
+  // 可选：明确放行 Ctrl+V（增强兼容性）
+  if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+    e.returnValue = true; // 允许默认粘贴行为
+  }
+}
+
 onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {

From 9a7afa8f6e6f889fbacd14b68aee00626ba369f5 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Mon, 17 Nov 2025 14:54:32 +0800
Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=E8=8A=82=E7=82=B9=E7=BC=A9?=
 =?UTF-8?q?=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/flow.js                           |  28 +
 src/views/flow/components/NodeTitle.vue     | 388 ++++----
 src/views/flow/config.js                    |   5 +
 src/views/flow/index.vue                    |  12 +-
 src/views/flow/nodes/common/serviceNode.vue | 247 +++--
 src/views/flow/nodes/common/startNode.vue   |  63 +-
 src/views/flow/nodes/function/loop.vue      | 170 ++--
 src/views/flow/nodes/function/sleep.vue     | 868 ++++++++---------
 src/views/flow/nodes/function/switch.vue    | 998 +++++++++++---------
 vite.config.js                              |   4 +-
 10 files changed, 1564 insertions(+), 1219 deletions(-)

diff --git a/src/utils/flow.js b/src/utils/flow.js
index 94f7557..10187e6 100644
--- a/src/utils/flow.js
+++ b/src/utils/flow.js
@@ -127,6 +127,34 @@ export const formatTableData = (arr, data = {}) => {
 }
 
 export const addNewEdge = (nodeId) => {
+  const { edges } = lf.getGraphData();
+  const ttt = edges.slice(); // 浅拷贝（比 JSON 深拷贝高效 10x+）
+
+  const edgesToDelete = ttt.filter(_edge => 
+    _edge.sourceNodeId === nodeId || _edge.targetNodeId === nodeId
+  );
+
+  edgesToDelete.forEach(edge => lf.deleteEdge(edge.id));
+
+   if (window.addNewEdgeTimer) {
+    clearTimeout(window.addNewEdgeTimer); // 清理上一次未执行的定时器
+  }
+
+   window.addNewEdgeTimer = setTimeout(() => {
+    edgesToDelete.forEach(item => {
+      lf.addEdge({
+        type: "bezier",
+        sourceNodeId: item.sourceNodeId,
+        targetNodeId: item.targetNodeId,
+        sourceAnchorId: item.sourceAnchorId,
+        targetAnchorId: item.targetAnchorId
+      });
+    })
+    delete window.addNewEdgeTimer;
+  }, 50)
+}
+
+export const newEdge = (nodeId) => {
   const { edges } = lf.getGraphData();
   const arr = JSON.parse(JSON.stringify(edges))
   arr.forEach(_edge => {
diff --git a/src/views/flow/components/NodeTitle.vue b/src/views/flow/components/NodeTitle.vue
index b7f61b4..1a66002 100644
--- a/src/views/flow/components/NodeTitle.vue
+++ b/src/views/flow/components/NodeTitle.vue
@@ -1,171 +1,217 @@
-<template>
-    <div class="title__container">
-        <div class="title">
-        <div class="left">
-            <img :src="icon" alt="">
-            <div class="text__container">
-            <div class="text__title" v-if="showTextTitle">
-                <span class="text">{{ nodeName }}</span>
-                <el-icon class="editIcon" @click="showTextTitle = false"><EditPen /></el-icon>
-            </div>
-            <div class="input_name_container" v-else>
-                <el-input v-model="nodeName" />
-                <el-button class="input_name_select" circle size="small" @click="confirmNodeName">
-                <el-icon><Select /></el-icon>
-                </el-button>
-                <el-button class="input_name_closeBold" circle size="small" @click="cancelNodeName">
-                <el-icon><CloseBold /></el-icon>
-                </el-button>
-            </div>
-            </div>
-        </div>
-        <div class="right">
-            <el-button circle size="small" @click="deleteNode">
-            <el-icon><Delete /></el-icon>
-            </el-button>
-        </div>
-        </div>
-        <div class="subTitle">{{ props.nodeDesc }}</div>
-    </div>
-</template>
-<script setup lang="js">
-import { ref } from 'vue'
-import { EditPen, Select, CloseBold, Delete } from '@element-plus/icons-vue'
-import { ElMessageBox } from 'element-plus'
-
-const props = defineProps({
-    icon: {
-        type: String,
-        default: ''
-    },
-    nodeId: {
-        type: String,
-        default: ''
-    },
-    nodeProperties: {
-        type: Object,
-        default: () => {}
-    },
-    nodeDesc: {
-        type: String,
-        default: ''
-    },
-    nodeName: {
-      type: String,
-      default: ''
-    },
-    nodeType: {
-      type: String,
-      default: ''
-    }
-})
-
-const showTextTitle = ref(true)
-const nodeName = ref(props.nodeProperties.name || props.nodeName)
-
-const confirmNodeName = () => {
-  const properties = lf.getProperties(props.nodeId)
-  lf.setProperties(props.nodeId, {
-    ...properties,
-    name: nodeName.value
-  })
-  showTextTitle.value = true
-}
-
-const cancelNodeName = () => {
-  nodeName.value = props.nodeProperties?.name || props.nodeName
-  showTextTitle.value = true
-}
-
-const deleteNode = () => {
-  ElMessageBox.confirm(
-    '是否删除该节点?',
-    '警告',
-    {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    }
-  )
-    .then(() => {
-      if (props.nodeType === 'selectArea') {
-        const children = lf.getNodeModelById(props.nodeId).children
-        lf.getNodeModelById(props.nodeId).children = []
-        children.forEach(item => {
-          lf.getNodeModelById(item).draggable = true
-        })
-      }
-      lf.deleteNode(props.nodeId);
-    })
-}
-</script>
-<style lang="scss" scoped>
-.title__container {
-    .title {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-
-        img {
-          width: 24px;
-          height: 24px;
-        }
-
-        .text__container {
-          .text__title {
-            display: flex;
-            align-items: center;
-
-            .text {
-              font-size: 16px;
-              font-weight: bold;
-              margin: 0 12px;
-            }
-
-            .editIcon {
-              cursor: pointer;
-            }
-          }
-
-          .input_name_container {
-            display: flex;
-            align-items: center;
-
-            .el-input {
-              margin-left: 12px;
-            }
-
-            .input_name_select {
-              color: #00b42a;
-              margin-left: 4px;
-              border: none;
-            }
-
-            .input_name_closeBold {
-              color: #f53f3f;
-              margin-left: 4px;
-              border: none;
-            }
-          }
-        }
-      }
-
-      .right {
-        cursor: pointer;
-
-        .el-button {
-          border: none;
-        }
-      }
-    }
-
-    .subTitle {
-      color: #737a87;
-      font-size: 12px;
-      margin: 8px 0;
-    }
-  }
-</style>
\ No newline at end of file
+<template>
+  <div class="title__container">
+    <div class="title">
+      <div class="left">
+        <img :src="icon" alt="" />
+        <div class="text__container">
+          <div class="text__title" v-if="showTextTitle">
+            <span class="text">{{ nodeName }}</span>
+            <el-icon class="editIcon" @click="showTextTitle = false"
+              ><EditPen
+            /></el-icon>
+          </div>
+          <div class="input_name_container" v-else>
+            <el-input v-model="nodeName" />
+            <el-button
+              class="input_name_select"
+              circle
+              size="small"
+              @click="confirmNodeName"
+            >
+              <el-icon><Select /></el-icon>
+            </el-button>
+            <el-button
+              class="input_name_closeBold"
+              circle
+              size="small"
+              @click="cancelNodeName"
+            >
+              <el-icon><CloseBold /></el-icon>
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          :content="zoomState ? '缩小' : '放大'"
+          placement="top"
+        >
+          <el-button v-if="showZoom" circle size="small" @click="zoom">
+            <el-icon>
+              <ZoomOut v-if="zoomState" />
+              <ZoomIn v-else />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="删除"
+          placement="top"
+        >
+          <el-button circle size="small" @click="deleteNode">
+            <el-icon><Delete /></el-icon>
+          </el-button>
+        </el-tooltip>
+      </div>
+    </div>
+    <div class="subTitle">{{ props.nodeDesc }}</div>
+  </div>
+</template>
+<script setup lang="js">
+import { ref } from 'vue'
+import { EditPen, Select, CloseBold, Delete, ZoomOut, ZoomIn } from '@element-plus/icons-vue'
+import { ElMessageBox } from 'element-plus'
+
+const props = defineProps({
+    icon: {
+        type: String,
+        default: ''
+    },
+    nodeId: {
+        type: String,
+        default: ''
+    },
+    nodeProperties: {
+        type: Object,
+        default: () => {}
+    },
+    nodeDesc: {
+        type: String,
+        default: ''
+    },
+    nodeName: {
+      type: String,
+      default: ''
+    },
+    nodeType: {
+      type: String,
+      default: ''
+    },
+    showZoom: {
+      type: Boolean,
+      default: true
+    },
+    zoomState: {
+      type: Boolean,
+      default: false
+    }
+})
+
+const emits = defineEmits(['zoom'])
+
+const showTextTitle = ref(true)
+const nodeName = ref(props.nodeProperties.name || props.nodeName)
+
+const confirmNodeName = () => {
+  const properties = lf.getProperties(props.nodeId)
+  lf.setProperties(props.nodeId, {
+    ...properties,
+    name: nodeName.value
+  })
+  showTextTitle.value = true
+}
+
+const cancelNodeName = () => {
+  nodeName.value = props.nodeProperties?.name || props.nodeName
+  showTextTitle.value = true
+}
+
+const deleteNode = () => {
+  ElMessageBox.confirm(
+    '是否删除该节点?',
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      if (props.nodeType === 'selectArea') {
+        const children = lf.getNodeModelById(props.nodeId).children
+        lf.getNodeModelById(props.nodeId).children = []
+        children.forEach(item => {
+          lf.getNodeModelById(item).draggable = true
+        })
+      }
+      lf.deleteNode(props.nodeId);
+    })
+}
+
+const zoom = () => {
+  emits('zoom', !props.zoomState)
+}
+</script>
+<style lang="scss" scoped>
+.title__container {
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+
+      img {
+        width: 24px;
+        height: 24px;
+      }
+
+      .text__container {
+        .text__title {
+          display: flex;
+          align-items: center;
+
+          .text {
+            font-size: 16px;
+            font-weight: bold;
+            margin: 0 12px;
+          }
+
+          .editIcon {
+            cursor: pointer;
+          }
+        }
+
+        .input_name_container {
+          display: flex;
+          align-items: center;
+
+          .el-input {
+            margin-left: 12px;
+          }
+
+          .input_name_select {
+            color: #00b42a;
+            margin-left: 4px;
+            border: none;
+          }
+
+          .input_name_closeBold {
+            color: #f53f3f;
+            margin-left: 4px;
+            border: none;
+          }
+        }
+      }
+    }
+
+    .right {
+      cursor: pointer;
+
+      .el-button {
+        border: none;
+      }
+    }
+  }
+
+  .subTitle {
+    color: #737a87;
+    font-size: 12px;
+    margin: 8px 0;
+  }
+}
+</style>
diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index 46b30e1..9584e80 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -42,6 +42,11 @@ export const lfConfig = {
   //   foldSize: 30, // 折叠后显示的图标尺寸
   // },
   edgeType: "bezier",
+  zoomConfig: {
+    min: 0.05, // 最小缩放比例（支持更小值，如 0.01，但不建议过小）
+    max: 3,    // 最大缩放比例（可自定义）
+    step: 0.1  // 每次滚轮缩放的步长（默认 0.1）
+  },
   style: {
     anchor: {
       show: true, // 强制全局锚点显示
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index c0541a3..df850c9 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -54,7 +54,7 @@
           </div>
         </div>
       </el-header>
-      <el-container>
+      <el-container class="container">
         <el-aside v-if="!flowStore.disableForm">
           <Aside />
         </el-aside>
@@ -79,7 +79,7 @@ import Aside from "./components/Aside.vue";
 import { ElMessage } from 'element-plus'
 import { useFlowStore } from '@/store/modules/flow'
 import { emitter } from '@/utils/eventBus';
-import { recursiveFilter, addNewEdge, convertToTree } from '@/utils/flow'
+import { recursiveFilter, newEdge, convertToTree } from '@/utils/flow'
 import { flowDeploy, flowView, flowPause, flowResume, flowStop } from '@/api/device/flow'
 import { getDetect } from '@/api/test/detect'
 import { Location } from "@element-plus/icons-vue";
@@ -502,7 +502,6 @@ const initFlow = () => {
         const node = lf.getNodeModelById(item.id)
         node.updateSize()
       })
-
       operationEdge(arr)
     });
 
@@ -588,7 +587,7 @@ onMounted(() => {
 
 const operationEdge = (arr) => {
   arr.forEach(item => {
-    addNewEdge(item.id)
+    newEdge(item.id)
   })
 }
 
@@ -601,6 +600,7 @@ onUnmounted(() => {
 .page {
   width: 100%;
   height: 100%;
+  overflow: hidden;
 
   .page__container {
     width: 100%;
@@ -622,6 +622,10 @@ onUnmounted(() => {
       }
     }
 
+    .container {
+      height: calc(100% - 60px);
+    }
+
     .el-main {
       padding: 0;
     }
diff --git a/src/views/flow/nodes/common/serviceNode.vue b/src/views/flow/nodes/common/serviceNode.vue
index 6e0956d..b92ac7c 100644
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/src/views/flow/nodes/common/serviceNode.vue
@@ -1,22 +1,33 @@
 <template>
-  <div class="node__container">
+  <div class="node__container" :class="props.model.id">
     <NodeState :state="nodeOperatingStatus">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
       <template #output>
-        <JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
-        <el-image
-            v-if="props.properties.outputType === 'img'"
-            v-for="item in outputJsonData.imageUrl"
-            style="width: 60px; height: 60px"
-            :src="item"
-            :preview-src-list="outputJsonData.imageUrl"
-            :preview-teleported="true"
-            show-progress
-            fit="fill"
+        <JsonViewer
+          v-if="props.properties.outputType === 'json'"
+          :value="outputJsonData"
+          copyable
+          boxed
+          sort
+          theme="light"
+        />
+        <el-image
+          v-if="props.properties.outputType === 'img'"
+          v-for="item in outputJsonData.imageUrl"
+          style="width: 60px; height: 60px"
+          :src="item"
+          :preview-src-list="outputJsonData.imageUrl"
+          :preview-teleported="true"
+          show-progress
+          fit="fill"
+        />
+        <IPlayer
+          v-if="props.properties.outputType === 'video'"
+          v-for="item in outputJsonData.videoUrl"
+          :videoUrl="item"
         />
-        <IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
       </template>
     </NodeState>
     <NodeTitle
@@ -25,8 +36,10 @@
       :nodeProperties="props.properties"
       :nodeName="props.properties.name"
       :nodeDesc="props.properties.desc"
+      :zoom-state="nodeZoom"
+      @zoom="zoom"
     />
-    <div class="input__container">
+    <div class="input__container" v-show="nodeZoom">
       <div class="title">
         <div class="left">
           <div class="tag"></div>
@@ -57,7 +70,9 @@
               <el-form-item
                 :label="index === 0 ? '参数名' : ''"
                 :prop="`nodeParams.${index}.name`"
-                :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
+                :rules="[
+                  { required: true, message: '请输入参数名', trigger: 'blur' },
+                ]"
               >
                 <el-input
                   :disabled="property?.disabled || false"
@@ -71,33 +86,76 @@
                 :label="index === 0 ? '参数值' : ''"
                 :prop="`nodeParams.${index}.type`"
               >
-                <el-select v-model="property.type" @change="handleTypeChange(index)">
+                <el-select
+                  v-model="property.type"
+                  @change="handleTypeChange(index)"
+                >
                   <el-option label="引用" value="quote" />
                   <el-option label="输入" value="input" />
                 </el-select>
                 <el-form-item
                   v-if="property.type === 'input'"
-                  :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
                   :prop="`nodeParams.${index}.input`"
                 >
-                    <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
-                    <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
-                        <el-option v-for="item in property.selectOptions" :key="item.value" :label="item.label" :value="item.value" />
-                    </el-select>
-                    <el-input @keydown="handleInputKeydown" v-else v-model="property.input" placeholder="请输入" clearable />
+                  <el-input-number
+                    v-if="property.componentType === 'number'"
+                    v-model="property.input"
+                    :min="0"
+                    :controls="false"
+                    :step-strictly="true"
+                    placeholder="请输入"
+                    clearable
+                  />
+                  <el-select
+                    v-model="property.input"
+                    v-else-if="property.componentType === 'select'"
+                  >
+                    <el-option
+                      v-for="item in property.selectOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                  <el-input
+                    @keydown="handleInputKeydown"
+                    v-else
+                    v-model="property.input"
+                    placeholder="请输入"
+                    clearable
+                  />
                 </el-form-item>
                 <el-form-item
                   v-if="property.type === 'quote'"
-                  :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
                   :prop="`nodeParams.${index}.quote`"
                 >
                   <el-cascader
-                    :ref="el => { if (el) cascaderRefs[index] = el }"
+                    :ref="
+                      (el) => {
+                        if (el) cascaderRefs[index] = el;
+                      }
+                    "
                     v-model="property.quote"
                     :checkStrictly="true"
                     :options="quoteOptions"
                     placeholder="请选择"
-                    @visible-change="(visible) => visibleChange(visible, index, property.quote)"
+                    @visible-change="
+                      (visible) => visibleChange(visible, index, property.quote)
+                    "
                     @change="(value) => cascaderChange(value, index)"
                   />
                 </el-form-item>
@@ -107,43 +165,45 @@
         </el-form>
       </div>
     </div>
-    <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输出</div>
+    <div class="output__container" v-show="nodeZoom">
+      <div v-if="props.properties?.outputParams?.length > 0">
+        <div class="title">
+          <div class="left">
+            <div class="tag"></div>
+            <div class="text">输出</div>
+          </div>
+          <div class="right">
+            <el-button
+              :disabled="flowStore.disableForm"
+              @click="addOutputFormItem"
+              class="addFormItem"
+            >
+              <el-icon :size="20"><Plus /></el-icon>
+            </el-button>
+          </div>
         </div>
-        <div class="right" >
-          <el-button
-            :disabled="flowStore.disableForm"
-            @click="addOutputFormItem"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
 
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          :model="formData"
-          label-position="top"
-          label-width="auto"
-          :rules="outputRules"
-          ref="outputFormRef"
-        >
-           <FormItemRecursive
-            formType="output"
-            :current-list="formData.outputParams"
-            prop-path="outputParams"
-            :depth="0"
-            :is-first-level="true"
-            :endDepth="2"
-            :parent-path="[]"
-            @delete-item="deleteTopLevelItem"
-          />
-        </el-form>
+        <div class="form__container">
+          <el-form
+            :inline="true"
+            :model="formData"
+            label-position="top"
+            label-width="auto"
+            :rules="outputRules"
+            ref="outputFormRef"
+          >
+            <FormItemRecursive
+              formType="output"
+              :current-list="formData.outputParams"
+              prop-path="outputParams"
+              :depth="0"
+              :is-first-level="true"
+              :endDepth="2"
+              :parent-path="[]"
+              @delete-item="deleteTopLevelItem"
+            />
+          </el-form>
+        </div>
       </div>
     </div>
   </div>
@@ -151,7 +211,7 @@
 
 <script setup>
 import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput } from "@/utils/flow";
+import { getInput, addNewEdge } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -172,7 +232,7 @@ const flowStore = useFlowStore();
 
 const formData = reactive({
   nodeParams: [],
-  outputParams: []
+  outputParams: [],
 });
 
 const rules = reactive({});
@@ -190,33 +250,33 @@ const handleTypeChange = (index) => {
   }
 };
 
-const cascaderRefs = ref([])
+const cascaderRefs = ref([]);
 const outputRules = reactive({});
 const cascaderChange = (value, index) => {
   const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
-  formData.nodeParams[index].quote = value
-  formData.nodeParams[index].quoteType = selectedOptions[0].data.type
-}
+  formData.nodeParams[index].quote = value;
+  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
+};
 
 const addOutputFormItem = () => {
   formData.outputParams.push({
-    name: '',
-    type: '',
-    desc: '',
-    children: []
-  })
-}
+    name: "",
+    type: "",
+    desc: "",
+    children: [],
+  });
+};
 
 const dynamicForm = ref();
-const outputFormRef = ref()
+const outputFormRef = ref();
 const setNodeProperties = async () => {
   try {
     const result = await dynamicForm.value.validate();
-    let flag = true
+    let flag = true;
     if (outputFormRef.value) {
-      flag = await outputFormRef.value.validate()
+      flag = await outputFormRef.value.validate();
     }
-    
+
     if (result && flag) {
       const data = toRaw(formData);
       const properties = lf.getProperties(props.model.id);
@@ -287,20 +347,36 @@ const addFormItem = () => {
 
 // 删除顶层表单项
 const deleteTopLevelItem = (fullPath) => {
-// 从顶层数据开始查找
+  // 从顶层数据开始查找
   let currentLevel = formData.outputParams;
-  
+
   // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
   for (let i = 0; i < fullPath.length - 1; i++) {
     const index = fullPath[i];
     // 进入下一层级
     currentLevel = currentLevel[index].children;
   }
-  
+
   // 最后一个索引是当前层级要删除的项
   const lastIndex = fullPath[fullPath.length - 1];
   currentLevel.splice(lastIndex, 1);
   emits("contentChange");
+};
+
+const nodeZoom = ref(true)
+const zoom = (flag) => {
+  nodeZoom.value = flag
+  const nodes = document.getElementsByClassName(props.model.id)
+  if (nodes.length > 0) {
+    const node = nodes[0]
+    const parent = node.closest('.node__box');
+    if (nodeZoom.value) {
+      parent.style.width = '680px'
+    } else {
+      parent.style.width = '300px'
+    }
+    addNewEdge(props.model.id)
+  }
 }
 
 watch(
@@ -313,7 +389,10 @@ watch(
         quoteOptions.value = option;
       }
     }
-    if (props.properties.outputParams && props.properties.outputParams.length > 0) {
+    if (
+      props.properties.outputParams &&
+      props.properties.outputParams.length > 0
+    ) {
       formData.outputParams = props.properties.outputParams;
     }
   },
@@ -327,10 +406,10 @@ const handleInputKeydown = (e) => {
   // 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
   e.stopPropagation();
   // 可选：明确放行 Ctrl+V（增强兼容性）
-  if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+  if ((e.ctrlKey || e.metaKey) && e.key === "v") {
     e.returnValue = true; // 允许默认粘贴行为
   }
-}
+};
 
 onMounted(() => {
   emitter.on("changeNodeState", (data) => {
@@ -509,13 +588,13 @@ defineExpose({
 
   :deep(.el-row) {
     align-items: end;
-    
+
     .el-input {
-        --el-input-width: 148px;
+      --el-input-width: 148px;
     }
 
     .el-select {
-        --el-select-width: 148px;
+      --el-select-width: 148px;
     }
 
     .el-cascader {
diff --git a/src/views/flow/nodes/common/startNode.vue b/src/views/flow/nodes/common/startNode.vue
index 3ef8ee4..1ada400 100644
--- a/src/views/flow/nodes/common/startNode.vue
+++ b/src/views/flow/nodes/common/startNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="node__container">
+  <div class="node__container" :class="props.model.id">
     <keep-alive>
       <NodeState :state="nodeOperatingStatus">
         <template #input>
@@ -12,12 +12,29 @@
     </keep-alive>
     <div class="title__container">
       <div class="title">
-        <img src="../../icon/start.svg" alt="" />
-        <span class="text">Start</span>
+       <div class="left">
+         <img src="../../icon/start.svg" alt="" />
+          <span class="text">Start</span>
+       </div>
+        <div class="right">
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="nodeZoom ? '缩小' : '放大'"
+            placement="top"
+          >
+            <el-button circle size="small" @click="zoom">
+              <el-icon>
+                <ZoomOut v-if="nodeZoom" />
+                <ZoomIn v-else />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
       </div>
       <div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
     </div>
-    <div class="input__container">
+    <div class="input__container" v-show="nodeZoom">
       <div class="title">
         <div class="left">
           <div class="tag"></div>
@@ -61,8 +78,9 @@
 
 <script setup>
 import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
-import { Plus } from "@element-plus/icons-vue";
+import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
 import { useFlowStore } from "@/store/modules/flow";
+import { addNewEdge } from "@/utils/flow";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
@@ -200,6 +218,22 @@ const validateForm = async () => {
   }
 };
 
+const nodeZoom = ref(true)
+const zoom = () => {
+  nodeZoom.value = !nodeZoom.value
+  const nodes = document.getElementsByClassName(props.model.id)
+  if (nodes.length > 0) {
+    const node = nodes[0]
+    const parent = node.closest('.node__box');
+    if (nodeZoom.value) {
+      parent.style.width = '680px'
+    } else {
+      parent.style.width = '300px'
+    }
+    addNewEdge(props.model.id)
+  }
+}
+
 onUnmounted(() => {
   emitter.off("changeNodeState");
   emitter.off("contentChange");
@@ -220,16 +254,19 @@ defineExpose({
     .title {
       display: flex;
       align-items: center;
+      justify-content: space-between;
 
-      img {
-        width: 24px;
-        height: 24px;
-      }
+      .left {
+        img {
+          width: 24px;
+          height: 24px;
+        }
 
-      .text {
-        font-size: 16px;
-        font-weight: bold;
-        margin-left: 12px;
+        .text {
+          font-size: 16px;
+          font-weight: bold;
+          margin-left: 12px;
+        }
       }
     }
 
diff --git a/src/views/flow/nodes/function/loop.vue b/src/views/flow/nodes/function/loop.vue
index 75da23c..c3124d7 100644
--- a/src/views/flow/nodes/function/loop.vue
+++ b/src/views/flow/nodes/function/loop.vue
@@ -1,107 +1,117 @@
 <template>
-  <div class="group__container" @mouseleave="setNodeProperties">
+  <div class="group__container" :class="props.model.id" @mouseleave="setNodeProperties">
     <NodeTitle
       :icon="loop"
       :nodeId="props.model.id"
       :nodeProperties="props.properties"
       :nodeName="props.properties?.name || '循环'"
       nodeDesc="循环执行一系列任务，直至输出所有结果"
+      :showZoom="false"
     />
-    <div class="loop__container">
-      <div>
-        <el-form
-          :inline="true"
-          :model="formData"
-          :rules="rules"
-          ref="dynamicForm"
-          label-position="top"
-          label-width="auto"
-          :disabled="flowStore.disableForm"
-        >
-          <div v-for="(property, index) in formData.nodeParams" :key="index">
-            <el-row>
-              <el-form-item
-                :label="index === 0 ? '参数名' : ''"
-                :prop="`nodeParams.${index}.name`"
-                :rules="[
-                  { required: true, message: '请输入参数名', trigger: 'blur' },
-                ]"
-              >
-                <el-input
-                  :disabled="index === 0"
-                  v-model="property.name"
-                  placeholder="请输入"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                :label="index === 0 ? '参数值' : ''"
-                :prop="`nodeParams.${index}.type`"
-              >
-                <el-select
-                  v-model="property.type"
-                  @change="handleTypeChange(index)"
-                >
-                  <el-option label="引用" value="quote" />
-                  <el-option label="输入" value="input" />
-                </el-select>
+      <div class="loop__container">
+        <div>
+          <el-form
+            :inline="true"
+            :model="formData"
+            :rules="rules"
+            ref="dynamicForm"
+            label-position="top"
+            label-width="auto"
+            :disabled="flowStore.disableForm"
+          >
+            <div v-for="(property, index) in formData.nodeParams" :key="index">
+              <el-row>
                 <el-form-item
-                  v-if="property.type === 'input'"
+                  :label="index === 0 ? '参数名' : ''"
+                  :prop="`nodeParams.${index}.name`"
                   :rules="[
                     {
                       required: true,
-                      message: '请输入参数值',
+                      message: '请输入参数名',
                       trigger: 'blur',
                     },
                   ]"
-                  :prop="`nodeParams.${index}.input`"
                 >
-                  <el-input-number
-                    v-model="property.input"
-                    :min="0"
-                    :controls="false"
-                    :step-strictly="true"
+                  <el-input
+                    :disabled="index === 0"
+                    v-model="property.name"
                     placeholder="请输入"
                     clearable
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="property.type === 'quote'"
-                  :rules="[
-                    {
-                      required: true,
-                      message: '请选择参数值',
-                      trigger: 'blur',
-                    },
-                  ]"
-                  :prop="`nodeParams.${index}.quote`"
+                  :label="index === 0 ? '参数值' : ''"
+                  :prop="`nodeParams.${index}.type`"
                 >
-                  <el-cascader
-                    :ref="
-                      (el) => {
-                        if (el) cascaderRefs[index] = el;
-                      }
-                    "
-                    v-model="property.quote"
-                    :checkStrictly="true"
-                    :options="quoteOptions"
-                    placeholder="请选择"
-                    @visible-change="
-                      (visible) => visibleChange(visible, index, property.quote)
-                    "
-                    @change="(value) => cascaderChange(value, index)"
-                  />
+                  <el-select
+                    v-model="property.type"
+                    @change="handleTypeChange(index)"
+                  >
+                    <el-option label="引用" value="quote" />
+                    <el-option label="输入" value="input" />
+                  </el-select>
+                  <el-form-item
+                    v-if="property.type === 'input'"
+                    :rules="[
+                      {
+                        required: true,
+                        message: '请输入参数值',
+                        trigger: 'blur',
+                      },
+                    ]"
+                    :prop="`nodeParams.${index}.input`"
+                  >
+                    <el-input-number
+                      v-model="property.input"
+                      :min="0"
+                      :controls="false"
+                      :step-strictly="true"
+                      placeholder="请输入"
+                      clearable
+                    />
+                  </el-form-item>
+                  <el-form-item
+                    v-if="property.type === 'quote'"
+                    :rules="[
+                      {
+                        required: true,
+                        message: '请选择参数值',
+                        trigger: 'blur',
+                      },
+                    ]"
+                    :prop="`nodeParams.${index}.quote`"
+                  >
+                    <el-cascader
+                      :ref="
+                        (el) => {
+                          if (el) cascaderRefs[index] = el;
+                        }
+                      "
+                      v-model="property.quote"
+                      :checkStrictly="true"
+                      :options="quoteOptions"
+                      placeholder="请选择"
+                      @visible-change="
+                        (visible) =>
+                          visibleChange(visible, index, property.quote)
+                      "
+                      @change="(value) => cascaderChange(value, index)"
+                    />
+                  </el-form-item>
                 </el-form-item>
-              </el-form-item>
-            </el-row>
-          </div>
-        </el-form>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+      </div>
+      <div>循环体</div>
+      <div
+        class="child__container"
+        @drop="handleDrop"
+        @dragover="handleDragover"
+      >
+        <slot></slot>
       </div>
-    </div>
-    <div>循环体</div>
-    <div class="child__container" @drop="handleDrop" @dragover="handleDragover">
-      <slot></slot>
-    </div>
   </div>
 </template>
 <script setup>
diff --git a/src/views/flow/nodes/function/sleep.vue b/src/views/flow/nodes/function/sleep.vue
index a4c3b21..54fb464 100644
--- a/src/views/flow/nodes/function/sleep.vue
+++ b/src/views/flow/nodes/function/sleep.vue
@@ -1,425 +1,443 @@
-<template>
-  <div class="node__container">
-    <NodeState :state="nodeOperatingStatus">
-      <template #input>
-        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
-      </template>
-      <template #output>
-        <JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
-        <el-image
-            v-if="props.properties.outputType === 'img'"
-            v-for="item in outputJsonData.imageUrl"
-            style="width: 60px; height: 60px"
-            :src="item"
-            :preview-src-list="outputJsonData.imageUrl"
-            :preview-teleported="true"
-            show-progress
-            fit="fill"
-        />
-        <IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
-      </template>
-    </NodeState>
-    <NodeTitle
-      :icon="props.properties.icon"
-      :nodeId="props.model.id"
-      :nodeProperties="props.properties"
-      :nodeName="props.properties.name"
-      :nodeDesc="props.properties.desc"
-    />
-    <div class="input__container">
-      <div class="title">
-        <div class="left">
-          <div class="tag"></div>
-          <div class="text">输入</div>
-        </div>
-        <div class="right" v-if="properties.properties?.canAddFormItem">
-          <el-button
-            :disabled="flowStore.disableForm"
-            @click="addFormItem"
-            class="addFormItem"
-          >
-            <el-icon :size="20"><Plus /></el-icon>
-          </el-button>
-        </div>
-      </div>
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          :model="formData"
-          :rules="rules"
-          ref="dynamicForm"
-          label-position="top"
-          label-width="auto"
-          :disabled="flowStore.disableForm"
-        >
-          <div v-for="(property, index) in formData.nodeParams" :key="index">
-            <el-row>
-              <el-form-item
-                :label="index === 0 ? '参数名' : ''"
-                :prop="`nodeParams.${index}.name`"
-                :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
-              >
-                <el-input
-                  :disabled="property?.disabled || false"
-                  v-model="property.name"
-                  placeholder="请输入"
-                  clearable
-                />
-              </el-form-item>
-              <el-form-item
-                :label="index === 0 ? '参数值' : ''"
-                :prop="`nodeParams.${index}.type`"
-              >
-                <el-select v-model="property.type" @change="handleTypeChange(index)">
-                  <el-option label="引用" value="quote" />
-                  <el-option label="输入" value="input" />
-                </el-select>
-                <el-form-item
-                  v-if="property.type === 'input'"
-                  :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
-                  :prop="`nodeParams.${index}.input`"
-                >
-                    <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
-                    <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
-                        <el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
-                    </el-select>
-                    <el-input v-else v-model="property.input" placeholder="请输入" clearable />
-                </el-form-item>
-                <el-form-item
-                  v-if="property.type === 'quote'"
-                  :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
-                  :prop="`nodeParams.${index}.quote`"
-                >
-                  <el-cascader
-                    v-model="property.quote"
-                    :options="quoteOptions"
-                    placeholder="请选择"
-                    @visible-change="visibleChange"
-                  />
-                </el-form-item>
-              </el-form-item>
-            </el-row>
-          </div>
-        </el-form>
-      </div>
-    </div>
-    <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
-      <div class="title">
-        <div class="tag"></div>
-        <div class="text">输出</div>
-      </div>
-
-      <div class="form__container">
-        <el-form
-          :inline="true"
-          label-position="top"
-          label-width="auto"
-          :disabled="true"
-        >
-          <el-row v-for="(item, index) in props.properties.outputParams">
-            <el-form-item label="参数名" >
-              <el-input :value="item.name" />
-            </el-form-item>
-            <el-form-item label="参数类型" >
-              <el-input :value="item.type" />
-            </el-form-item>
-            <el-form-item label="描述" >
-              <el-input :value="item.desc" />
-            </el-form-item>
-          </el-row>
-        </el-form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput } from "@/utils/flow";
-import { useFlowStore } from "@/store/modules/flow";
-import { Plus } from "@element-plus/icons-vue";
-import NodeTitle from "../../components/NodeTitle.vue";
-import NodeState from "../../components/NodeState.vue";
-import "vue3-json-viewer/dist/index.css";
-import { emitter } from "@/utils/eventBus";
-import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
-
-const props = defineProps({
-  model: Object,
-  properties: Object,
-});
-
-const emits = defineEmits(["contentChange"]);
-
-const flowStore = useFlowStore();
-
-const formData = reactive({
-  nodeParams: [],
-});
-
-const rules = reactive({});
-
-const quoteOptions = ref([]);
-const handleTypeChange = (index) => {
-  if (formData.nodeParams[index].type === "input") {
-    formData.nodeParams[index].quote = "";
-  } else {
-    formData.nodeParams[index].input = "";
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-    }
-  }
-};
-
-const dynamicForm = ref();
-
-const setNodeProperties = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      const data = toRaw(formData);
-      const properties = lf.getProperties(props.model.id);
-      lf.setProperties(props.model.id, {
-        ...properties,
-        ...data,
-      });
-      emits("contentChange");
-    }
-  } catch {
-    dynamicForm.value.clearValidate();
-  }
-};
-
-const nodeOperatingStatus = ref("NORMAL");
-const inputJsonData = ref({});
-const outputJsonData = ref({});
-
-const visibleChange = (value) => {
-  if (value) {
-    const option = getInput(props.model.id);
-    if (option) {
-      quoteOptions.value = option;
-    }
-  }
-};
-
-const validateForm = async () => {
-  try {
-    const result = await dynamicForm.value.validate();
-    if (result) {
-      return { valid: true, message: "验证通过" };
-    } else {
-      return { valid: false, message: "验证失败" };
-    }
-  } catch {
-    return { valid: false, message: "验证失败" };
-  }
-};
-
-const addFormItem = () => {
-  formData.nodeParams.push({
-    name: "",
-    type: "",
-    desc: "",
-    required: false,
-    children: [],
-  });
-  emits("contentChange");
-};
-
-watch(
-  () => props.properties,
-  () => {
-    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
-      formData.nodeParams = props.properties.nodeParams;
-      const option = getInput(props.model.id);
-      if (option) {
-        quoteOptions.value = option;
-      }
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-onMounted(() => {
-  emitter.on("changeNodeState", (data) => {
-    if (data.nodeId === props.model.id) {
-      nodeOperatingStatus.value = data.status;
-      let inputData = {};
-      let output = {};
-      try {
-        inputData = JSON.parse(data.paramsIn) || {};
-        output = JSON.parse(data.paramsOut) || {};
-      } catch (error) {
-        inputData = data.paramsIn || {};
-        output = data.paramsOut || {};
-      }
-      inputJsonData.value = inputData;
-      outputJsonData.value = output;
-      emits("contentChange");
-    }
-  });
-
-  emitter.on("contentChange", (data) => {
-    if (data.id === props.model.id) {
-      nodeOperatingStatus.value = "NORMAL";
-      inputJsonData.value = {};
-      outputJsonData.value = {};
-      emits("contentChange");
-    }
-  });
-});
-
-onUnmounted(() => {
-  emitter.off("changeNodeState");
-  emitter.off("contentChange");
-});
-
-defineExpose({
-  validateForm,
-  setNodeProperties,
-});
-</script>
-
-<style lang="scss" scoped>
-.node__container {
-  width: 100%;
-  height: auto;
-
-  .input__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .tag {
-          width: 3px;
-          height: 16px;
-          background: #1664ff;
-          border-radius: 0 4px 4px 0;
-          margin-right: 12px;
-        }
-
-        .text {
-          font-size: 16px;
-          font-weight: 700;
-          color: #0c0d0e;
-        }
-      }
-
-      .right {
-        .addFormItem {
-          border: none;
-          background: transparent;
-          cursor: pointer;
-        }
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-
-      .sub-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-
-      .gSon-properties {
-        margin-left: 10px;
-        .zw {
-          margin-left: 15px;
-          &::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: -4px;
-            width: 10px;
-            border-left: 1px solid gray;
-            border-bottom: 1px solid gray;
-            border-bottom-left-radius: 4px;
-            background-color: transparent;
-            height: 24px;
-          }
-        }
-      }
-    }
-  }
-
-  .output__container {
-    width: 100%;
-    background-color: #fafbfc;
-    padding: 0 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title {
-      height: 32px;
-      display: flex;
-      align-items: center;
-
-      .tag {
-        width: 3px;
-        height: 16px;
-        background: #1664ff;
-        border-radius: 0 4px 4px 0;
-        margin-right: 12px;
-      }
-
-      .text {
-        font-size: 16px;
-        font-weight: 700;
-        color: #0c0d0e;
-      }
-    }
-
-    .form__container {
-      margin: 12px 0;
-    }
-  }
-
-  :deep(.el-row) {
-    align-items: end;
-    
-    .el-input {
-        --el-input-width: 170px;
-    }
-
-    .el-select {
-        --el-select-width: 170px;
-    }
-
-    .el-cascader {
-    --el-form-inline-content-width: 170px;
-    }
-    }
-}
-</style>
+<template>
+  <div class="node__container" :class="props.model.id">
+    <NodeState :state="nodeOperatingStatus">
+      <template #input>
+        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
+      </template>
+      <template #output>
+        <JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
+        <el-image
+            v-if="props.properties.outputType === 'img'"
+            v-for="item in outputJsonData.imageUrl"
+            style="width: 60px; height: 60px"
+            :src="item"
+            :preview-src-list="outputJsonData.imageUrl"
+            :preview-teleported="true"
+            show-progress
+            fit="fill"
+        />
+        <IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
+      </template>
+    </NodeState>
+    <NodeTitle
+      :icon="props.properties.icon"
+      :nodeId="props.model.id"
+      :nodeProperties="props.properties"
+      :nodeName="props.properties.name"
+      :nodeDesc="props.properties.desc"
+      :zoom-state="nodeZoom"
+      @zoom="zoom"
+    />
+    <div class="input__container" v-show="nodeZoom">
+      <div class="title">
+        <div class="left">
+          <div class="tag"></div>
+          <div class="text">输入</div>
+        </div>
+        <div class="right" v-if="properties.properties?.canAddFormItem">
+          <el-button
+            :disabled="flowStore.disableForm"
+            @click="addFormItem"
+            class="addFormItem"
+          >
+            <el-icon :size="20"><Plus /></el-icon>
+          </el-button>
+        </div>
+      </div>
+      <div class="form__container" v-show="nodeZoom">
+        <el-form
+          :inline="true"
+          :model="formData"
+          :rules="rules"
+          ref="dynamicForm"
+          label-position="top"
+          label-width="auto"
+          :disabled="flowStore.disableForm"
+        >
+          <div v-for="(property, index) in formData.nodeParams" :key="index">
+            <el-row>
+              <el-form-item
+                :label="index === 0 ? '参数名' : ''"
+                :prop="`nodeParams.${index}.name`"
+                :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
+              >
+                <el-input
+                  :disabled="property?.disabled || false"
+                  v-model="property.name"
+                  placeholder="请输入"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item
+                :label="index === 0 ? '参数值' : ''"
+                :prop="`nodeParams.${index}.type`"
+              >
+                <el-select v-model="property.type" @change="handleTypeChange(index)">
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item
+                  v-if="property.type === 'input'"
+                  :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
+                  :prop="`nodeParams.${index}.input`"
+                >
+                    <el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
+                    <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
+                        <el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
+                    </el-select>
+                    <el-input v-else v-model="property.input" placeholder="请输入" clearable />
+                </el-form-item>
+                <el-form-item
+                  v-if="property.type === 'quote'"
+                  :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
+                  :prop="`nodeParams.${index}.quote`"
+                >
+                  <el-cascader
+                    v-model="property.quote"
+                    :options="quoteOptions"
+                    placeholder="请选择"
+                    @visible-change="visibleChange"
+                  />
+                </el-form-item>
+              </el-form-item>
+            </el-row>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
+      <div class="title">
+        <div class="tag"></div>
+        <div class="text">输出</div>
+      </div>
+
+      <div class="form__container">
+        <el-form
+          :inline="true"
+          label-position="top"
+          label-width="auto"
+          :disabled="true"
+        >
+          <el-row v-for="(item, index) in props.properties.outputParams">
+            <el-form-item label="参数名" >
+              <el-input :value="item.name" />
+            </el-form-item>
+            <el-form-item label="参数类型" >
+              <el-input :value="item.type" />
+            </el-form-item>
+            <el-form-item label="描述" >
+              <el-input :value="item.desc" />
+            </el-form-item>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { getInput, addNewEdge } from "@/utils/flow";
+import { useFlowStore } from "@/store/modules/flow";
+import { Plus } from "@element-plus/icons-vue";
+import NodeTitle from "../../components/NodeTitle.vue";
+import NodeState from "../../components/NodeState.vue";
+import "vue3-json-viewer/dist/index.css";
+import { emitter } from "@/utils/eventBus";
+import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
+
+const props = defineProps({
+  model: Object,
+  properties: Object,
+});
+
+const emits = defineEmits(["contentChange"]);
+
+const flowStore = useFlowStore();
+
+const formData = reactive({
+  nodeParams: [],
+});
+
+const rules = reactive({});
+
+const quoteOptions = ref([]);
+const handleTypeChange = (index) => {
+  if (formData.nodeParams[index].type === "input") {
+    formData.nodeParams[index].quote = "";
+  } else {
+    formData.nodeParams[index].input = "";
+    const option = getInput(props.model.id);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const dynamicForm = ref();
+
+const setNodeProperties = async () => {
+  try {
+    const result = await dynamicForm.value.validate();
+    if (result) {
+      const data = toRaw(formData);
+      const properties = lf.getProperties(props.model.id);
+      lf.setProperties(props.model.id, {
+        ...properties,
+        ...data,
+      });
+      emits("contentChange");
+    }
+  } catch {
+    dynamicForm.value.clearValidate();
+  }
+};
+
+const nodeOperatingStatus = ref("NORMAL");
+const inputJsonData = ref({});
+const outputJsonData = ref({});
+
+const visibleChange = (value) => {
+  if (value) {
+    const option = getInput(props.model.id);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const validateForm = async () => {
+  try {
+    const result = await dynamicForm.value.validate();
+    if (result) {
+      return { valid: true, message: "验证通过" };
+    } else {
+      return { valid: false, message: "验证失败" };
+    }
+  } catch {
+    return { valid: false, message: "验证失败" };
+  }
+};
+
+const addFormItem = () => {
+  formData.nodeParams.push({
+    name: "",
+    type: "",
+    desc: "",
+    required: false,
+    children: [],
+  });
+  emits("contentChange");
+};
+
+const nodeZoom = ref(true)
+const zoom = (flag) => {
+  nodeZoom.value = flag
+  const nodes = document.getElementsByClassName(props.model.id)
+  if (nodes.length > 0) {
+    const node = nodes[0]
+    const parent = node.closest('.node__box');
+    if (nodeZoom.value) {
+      parent.style.width = '680px'
+    } else {
+      parent.style.width = '300px'
+    }
+    addNewEdge(props.model.id)
+  }
+}
+
+watch(
+  () => props.properties,
+  () => {
+    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
+      formData.nodeParams = props.properties.nodeParams;
+      const option = getInput(props.model.id);
+      if (option) {
+        quoteOptions.value = option;
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+onMounted(() => {
+  emitter.on("changeNodeState", (data) => {
+    if (data.nodeId === props.model.id) {
+      nodeOperatingStatus.value = data.status;
+      let inputData = {};
+      let output = {};
+      try {
+        inputData = JSON.parse(data.paramsIn) || {};
+        output = JSON.parse(data.paramsOut) || {};
+      } catch (error) {
+        inputData = data.paramsIn || {};
+        output = data.paramsOut || {};
+      }
+      inputJsonData.value = inputData;
+      outputJsonData.value = output;
+      emits("contentChange");
+    }
+  });
+
+  emitter.on("contentChange", (data) => {
+    if (data.id === props.model.id) {
+      nodeOperatingStatus.value = "NORMAL";
+      inputJsonData.value = {};
+      outputJsonData.value = {};
+      emits("contentChange");
+    }
+  });
+});
+
+onUnmounted(() => {
+  emitter.off("changeNodeState");
+  emitter.off("contentChange");
+});
+
+defineExpose({
+  validateForm,
+  setNodeProperties,
+});
+</script>
+
+<style lang="scss" scoped>
+.node__container {
+  width: 100%;
+  height: auto;
+
+  .input__container {
+    width: 100%;
+    background-color: #fafbfc;
+    padding: 0 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .title {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .tag {
+          width: 3px;
+          height: 16px;
+          background: #1664ff;
+          border-radius: 0 4px 4px 0;
+          margin-right: 12px;
+        }
+
+        .text {
+          font-size: 16px;
+          font-weight: 700;
+          color: #0c0d0e;
+        }
+      }
+
+      .right {
+        .addFormItem {
+          border: none;
+          background: transparent;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .form__container {
+      margin: 12px 0;
+
+      .sub-properties {
+        margin-left: 10px;
+        .zw {
+          margin-left: 15px;
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -4px;
+            width: 10px;
+            border-left: 1px solid gray;
+            border-bottom: 1px solid gray;
+            border-bottom-left-radius: 4px;
+            background-color: transparent;
+            height: 24px;
+          }
+        }
+      }
+
+      .gSon-properties {
+        margin-left: 10px;
+        .zw {
+          margin-left: 15px;
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: -4px;
+            width: 10px;
+            border-left: 1px solid gray;
+            border-bottom: 1px solid gray;
+            border-bottom-left-radius: 4px;
+            background-color: transparent;
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  .output__container {
+    width: 100%;
+    background-color: #fafbfc;
+    padding: 0 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .title {
+      height: 32px;
+      display: flex;
+      align-items: center;
+
+      .tag {
+        width: 3px;
+        height: 16px;
+        background: #1664ff;
+        border-radius: 0 4px 4px 0;
+        margin-right: 12px;
+      }
+
+      .text {
+        font-size: 16px;
+        font-weight: 700;
+        color: #0c0d0e;
+      }
+    }
+
+    .form__container {
+      margin: 12px 0;
+    }
+  }
+
+  :deep(.el-row) {
+    align-items: end;
+    
+    .el-input {
+        --el-input-width: 170px;
+    }
+
+    .el-select {
+        --el-select-width: 170px;
+    }
+
+    .el-cascader {
+    --el-form-inline-content-width: 170px;
+    }
+    }
+}
+</style>
diff --git a/src/views/flow/nodes/function/switch.vue b/src/views/flow/nodes/function/switch.vue
index 05b538b..45aebf7 100644
--- a/src/views/flow/nodes/function/switch.vue
+++ b/src/views/flow/nodes/function/switch.vue
@@ -1,440 +1,558 @@
-<template>
-    <div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
-        <NodeState :state="nodeOperatingStatus">
-          <template #input>
-            <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
-          </template>
-          <template #output>
-            <JsonViewer :value="outputJsonData" copyable boxed sort theme="light" />
-          </template>
-        </NodeState>
-        <NodeTitle :icon="switchSvg" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '分支'" nodeDesc="连接多个下游分支，根据设定的条件按照顺序查找的方式来匹配运行的分支，如果匹配到某条件则只运行该条件对应的分支，否则继续匹配下一条件直至结束" />
-        <div class="condition_title_container">
-          <div class="left">
-            <div class="space"></div>
-            <div class="title">所有条件</div>
-          </div>
-          <div class="right">
-            <el-button :disabled="flowStore.disableForm" @click="addFormItem" class="addFormItem">
-              <el-icon :size="20" ><Plus /></el-icon>
-            </el-button>
-          </div>
-        </div>
-        <div>
-            <el-form :inline="true" :model="formData" :rules="rules" ref="dynamicForm" label-position="top" label-width="auto" :disabled="flowStore.disableForm">
-              <div class="condition" v-for="(params, index) in formData.nodeParams" :id="params.id">
-                <div class="title__container">
-                  <div class="left">
-                    <div class="space"></div>
-                    <div class="title">{{ index ===0 ? 'If' : 'Else If' }}</div>
-                  </div>
-                  <div class="right">
-                    <el-button :disabled="flowStore.disableForm" circle size="small" @click="deleteFormItem(params.id, index)">
-                      <el-icon :size="16" ><Minus /></el-icon>
-                    </el-button>
-                  </div>
-                </div>
-                <div class="withOr">
-                  <div class="title">条件</div>
-                  <div>
-                    <el-select v-model="params.withOr" placeholder="Select" style="width: 240px">
-                      <el-option key="and" label="AND" value="and" />
-                      <el-option key="or" label="OR" value="or" />
-                    </el-select>
-                  </div>
-                </div>
-                <div class="form__container">
-                  <el-row v-for="(property, pIndex) in params.list">
-                  <!--  :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" -->
-                    <el-form-item :label="pIndex === 0 ? '引用变量' : ''" :prop="`nodeParams.${index}.list.${pIndex}.nameType`">
-                      <!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
-                      <el-select v-model="property.nameType" @change="handleTypeChange(index, pIndex)">
-                        <el-option label="引用" value="quote" />
-                        <el-option label="输入" value="input" />
-                      </el-select>
-                      <el-form-item v-if="property.nameType === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.name`">
-                          <el-input v-model="property.name" placeholder="请输入" clearable />
-                      </el-form-item>
-                      <el-form-item v-if="property.nameType === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.nameQuote`">
-                        <el-cascader v-model="property.nameQuote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" />
-                      </el-form-item>
-                    </el-form-item>
-                    <el-form-item :label="pIndex === 0 ? '选择条件' : ''" :prop="`nodeParams.${index}.list.${pIndex}.condition`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]">
-                      <el-select v-model="property.condition">
-                        <el-option label="等于" value="equal" />
-                        <el-option label="不等于" value="notEqualTo" />
-                        <el-option label="为空" value="null" />
-                        <el-option label="不为空" value="notNull" />
-                        <el-option label="包含" value="include" />
-                        <el-option label="不包含" value="notInclude" />
-                        <el-option label="大于" value="greaterThan" />
-                        <el-option label="大于等于" value="greaterThanOrEqual" />
-                        <el-option label="小于" value="lessThan" />
-                        <el-option label="小于等于" value="lessThanOrEqual" />
-                      </el-select>
-                    </el-form-item>
-                    <el-form-item :label="pIndex === 0 ? '比较值' : ''" :prop="`nodeParams.${index}.list.${pIndex}.type`" >
-                      <el-select v-model="property.type" @change="handleTypeChange(index, pIndex)">
-                        <el-option label="引用" value="quote" />
-                        <el-option label="输入" value="input" />
-                      </el-select>
-                      <el-form-item v-if="property.type === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.input`">
-                          <el-input v-model="property.input" placeholder="请输入" clearable />
-                      </el-form-item>
-                      <el-form-item v-if="property.type === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.quote`">
-                          <el-cascader v-model="property.quote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" />
-                      </el-form-item>
-                    </el-form-item>
-                    <el-form-item :label="pIndex === 0 ? '操作' : ''">
-                      <el-button :disabled="flowStore.disableForm" circle size="small" @click="addListItem(index)">
-                      <el-icon :size="12" ><Plus /></el-icon>
-                    </el-button>
-                    <el-button :disabled="flowStore.disableForm" circle size="small" @click="removeListItem(index, pIndex)">
-                      <el-icon :size="12" ><Minus /></el-icon>
-                    </el-button>
-                    </el-form-item>
-                    
-                  </el-row>
-                </div>
-              </div>
-              </el-form>
-        </div>
-        <div class="else" :id="''.concat(props.model.id, '_else')">
-          <div class="space"></div>
-          <div class="title">Else</div>
-        </div>
-    </div>
-</template>
-<script setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
-import NodeTitle from '../../components/NodeTitle.vue'
-import NodeState from "../../components/NodeState.vue";
-import switchSvg from '../../icon/switch.svg'
-import { v4 as randomUUID } from 'uuid'
-import { useFlowStore } from '@/store/modules/flow'
-import { Plus, Minus } from '@element-plus/icons-vue'
-import { getInput, addNewEdge, removeSwitchEdge } from '@/utils/flow'
-import { emitter } from "@/utils/eventBus";
-
-const props = defineProps({
-  model: Object,
-  graphModel: Object,
-  properties: Object,
-  nowTime: Number,
-});
-
-const emits = defineEmits(['addAnchor', 'removeAnchor', 'bindRef', 'changeAnchor'])
-
-const switchRef = ref()
-const dynamicForm = ref()
-const flowStore = useFlowStore()
-
-const formData = reactive({
-  nodeParams: props.properties?.conditions || []
-})
-
-const addFormItem = () => {
-  const rect = switchRef.value.getBoundingClientRect();
-  addCondition(rect.height - 60)
-}
-
-const deleteFormItem = (id, index) => {
-  if (index === 0) {
-    return
-  }
-  formData.nodeParams.splice(index, 1)
-  emits('removeAnchor', id)
-  removeSwitchEdge(props.model.id, id)
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const quoteOptions = ref([])
-const handleTypeChange = (pIndex, index) => {
-  if (formData.nodeParams[pIndex].list[index].type === 'input') {
-    formData.nodeParams[pIndex].list[index].quote = ""
-  } else {
-    formData.nodeParams[pIndex].list[index].input = ""
-    const option = getInput(props.model.id, false)
-    if (option) {
-      quoteOptions.value = option
-    }
-  }
-}
-
-const addCondition = (height) => {
-  const id = randomUUID().replace(/-/g, '')
-  formData.nodeParams.push({
-    id,
-    withOr: 'and',
-    list: [{
-      name: '',
-      nameQuote: '',
-      nameType: 'input',
-      type: 'input',
-      input: '',
-      quote: ''
-    }]
-  })
-  emits('addAnchor', height, id)
-
-  setTimeout(() => {
-    addNewEdge(props.model.id)
-  }, 50)
-
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const addListItem = (pIndex, cIndex) => {
-  formData.nodeParams[pIndex].list.push({
-    name: '',
-    nameQuote: '',
-    nameType: 'input',
-    type: 'input',
-    input: '',
-    quote: ''
-  })
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const removeListItem = (pIndex, cIndex) => {
-  if (cIndex === 0) {
-    return
-  }
-  formData.nodeParams[pIndex].list.splice(cIndex, 1)
-  nextTick(() => {
-    changeFormItemHeight()
-  })
-}
-
-const changeFormItemHeight = () => {
-  formData.nodeParams.forEach(item => {
-    const node = document.getElementById(item.id)
-    emits('changeAnchor', node.offsetTop, item.id)
-  });
-
-  const node = document.getElementById("".concat(props.model.id, "_else"))
-  emits('changeAnchor', node.offsetTop, "".concat(props.model.id, "_else"))
-}
-
-const setNodeProperties = async () => {
-  try {
-    const valid = await dynamicForm.value.validate()
-    if (valid) {
-      const data = toRaw(formData)
-      const properties = lf.getProperties(props.model.id)
-      lf.setProperties(props.model.id, {
-        ...properties,
-        ...data
-      })
-      emits('contentChange')
-    }
- } catch (error) {
-    dynamicForm.value.clearValidate()
- }
-}
-
-const visibleChange = (value) => {
-  if (value) {
-    const option = getInput(props.model.id)
-    if (option) {
-        quoteOptions.value = option
-    }
-  }
-}
-
-const nodeOperatingStatus = ref("NORMAL");
-const inputJsonData = ref({});
-const outputJsonData = ref({});
-
-watch(
-  () => props.properties,
-  () => {
-    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
-      formData.nodeParams = props.properties.nodeParams
-    } else {
-        if (formData.nodeParams.length === 0) {
-          addCondition(100)
-        }
-    }
-  }, {
-    immediate: true,
-    deep: true
-  }
-);
-
-onMounted(() => {
-  emits('addAnchor', 280, "".concat(props.model.id, "_else"))
-
-  emits('bindRef', dynamicForm.value)
-
-  emitter.on("changeNodeState", (data) => {
-    if (data.nodeId === props.model.id) {
-      nodeOperatingStatus.value = data.status;
-      let inputData = {};
-      let output = {};
-      try {
-        inputData = JSON.parse(data.paramsIn) || {};
-        output = JSON.parse(data.paramsOut) || {};
-      } catch (error) {
-        inputData = data.paramsIn || {};
-        output = data.paramsOut || {};
-      }
-      inputJsonData.value = inputData;
-      outputJsonData.value = output;
-
-      emits("contentChange");
-    }
-  });
-
-  emitter.on("contentChange", (data) => {
-    if (data.id === props.model.id) {
-      nodeOperatingStatus.value = "NORMAL";
-      inputJsonData.value = {};
-      outputJsonData.value = {};
-
-      emits("contentChange");
-    }
-  });
-
-})
-
-onUnmounted(() => {
-  emitter.off("changeNodeState");
-  emitter.off("contentChange");
-});
-
-
-</script>
-<style lang="scss" scoped>
-.node__container {
-  width: 720px;
-  height: auto;
-  background: #fff;
-  padding: 12px;
-  cursor: default;
-  border-radius: 12px;
-  border: 2px solid white;
-  box-shadow: 0 5px 15px 0#00000008;
-  position: relative;
-
-  .condition_title_container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .space {
-        width: 4px;
-        height: 14px;
-        background: rgb(22, 100, 255);
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      .title {
-        margin-left: 8px;
-        font-size: 14px;
-        font-weight: 500;
-      }
-    }
-
-    
-
-    .el-button {
-      border: none;
-    }
-  }
-
-  .condition {
-    width: 100%;
-    height: auto;
-    margin-bottom: 10px;
-    background-color: #fafbfc;
-    padding: 8px 16px;
-    border-radius: 8px;
-    box-sizing: border-box;
-
-    .title__container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .space {
-          width: 4px;
-          height: 14px;
-          background: rgb(22, 100, 255);
-          border-radius: 0px 4px 4px 0px;
-        }
-
-        .title {
-          margin-left: 8px;
-          font-size: 14px;
-          font-weight: bold;
-        }
-      }
-    }
-
-    .withOr {
-      margin-bottom: 12px;
-
-      .title {
-        font-size: 14px;
-        color: #737a87;
-        margin-bottom: 4px;
-      }
-    }
-
-    :deep(.form__container) {
-
-      .el-form-item {
-        margin-right: 20px;
-      }
-
-      .el-input {
-        width: 92px;
-      }
-
-      .el-select {
-        width: 92px;
-      }
-
-      .el-cascader {
-        width: 92px;
-      }
-    }
-  }
-
-  .else {
-    display: flex;
-    align-items: center;
-    background-color: #fafbfc;
-    padding: 8px 16px;
-
-    .space {
-        width: 4px;
-        height: 14px;
-        background: rgb(22, 100, 255);
-        border-radius: 0px 4px 4px 0px;
-      }
-
-      .title {
-        margin-left: 8px;
-        font-size: 14px;
-        font-weight: 500;
-        font-weight: bold;
-      }
-  }
-}
-</style>
\ No newline at end of file
+<template>
+  <div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
+    <NodeState :state="nodeOperatingStatus">
+      <template #input>
+        <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
+      </template>
+      <template #output>
+        <JsonViewer :value="outputJsonData" copyable boxed sort theme="light" />
+      </template>
+    </NodeState>
+    <NodeTitle
+      :icon="switchSvg"
+      :nodeId="props.model.id"
+      :nodeProperties="props.properties"
+      :nodeName="props.properties?.name || '分支'"
+      nodeDesc="连接多个下游分支，根据设定的条件按照顺序查找的方式来匹配运行的分支，如果匹配到某条件则只运行该条件对应的分支，否则继续匹配下一条件直至结束"
+    />
+    <div class="condition_title_container">
+      <div class="left">
+        <div class="space"></div>
+        <div class="title">所有条件</div>
+      </div>
+      <div class="right">
+        <el-button
+          :disabled="flowStore.disableForm"
+          @click="addFormItem"
+          class="addFormItem"
+        >
+          <el-icon :size="20"><Plus /></el-icon>
+        </el-button>
+      </div>
+    </div>
+    <div>
+      <el-form
+        :inline="true"
+        :model="formData"
+        :rules="rules"
+        ref="dynamicForm"
+        label-position="top"
+        label-width="auto"
+        :disabled="flowStore.disableForm"
+      >
+        <div
+          class="condition"
+          v-for="(params, index) in formData.nodeParams"
+          :id="params.id"
+        >
+          <div class="title__container">
+            <div class="left">
+              <div class="space"></div>
+              <div class="title">{{ index === 0 ? "If" : "Else If" }}</div>
+            </div>
+            <div class="right">
+              <el-button
+                :disabled="flowStore.disableForm"
+                circle
+                size="small"
+                @click="deleteFormItem(params.id, index)"
+              >
+                <el-icon :size="16"><Minus /></el-icon>
+              </el-button>
+            </div>
+          </div>
+          <div class="withOr">
+            <div class="title">条件</div>
+            <div>
+              <el-select
+                v-model="params.withOr"
+                placeholder="Select"
+                style="width: 240px"
+              >
+                <el-option key="and" label="AND" value="and" />
+                <el-option key="or" label="OR" value="or" />
+              </el-select>
+            </div>
+          </div>
+          <div class="form__container">
+            <el-row v-for="(property, pIndex) in params.list">
+              <!--  :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" -->
+              <el-form-item
+                :label="pIndex === 0 ? '引用变量' : ''"
+                :prop="`nodeParams.${index}.list.${pIndex}.nameType`"
+              >
+                <!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
+                <el-select
+                  v-model="property.nameType"
+                  @change="handleTypeChange(index, pIndex)"
+                >
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item
+                  v-if="property.nameType === 'input'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.name`"
+                >
+                  <el-input
+                    v-model="property.name"
+                    placeholder="请输入"
+                    clearable
+                  />
+                </el-form-item>
+                <el-form-item
+                  v-if="property.nameType === 'quote'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.nameQuote`"
+                >
+                  <el-cascader
+                    v-model="property.nameQuote"
+                    :options="quoteOptions"
+                    placeholder="请选择"
+                    @visible-change="visibleChange"
+                  />
+                </el-form-item>
+              </el-form-item>
+              <el-form-item
+                :label="pIndex === 0 ? '选择条件' : ''"
+                :prop="`nodeParams.${index}.list.${pIndex}.condition`"
+                :rules="[
+                  { required: true, message: '请输入变量名', trigger: 'blur' },
+                ]"
+              >
+                <el-select v-model="property.condition">
+                  <el-option label="等于" value="equal" />
+                  <el-option label="不等于" value="notEqualTo" />
+                  <el-option label="为空" value="null" />
+                  <el-option label="不为空" value="notNull" />
+                  <el-option label="包含" value="include" />
+                  <el-option label="不包含" value="notInclude" />
+                  <el-option label="大于" value="greaterThan" />
+                  <el-option label="大于等于" value="greaterThanOrEqual" />
+                  <el-option label="小于" value="lessThan" />
+                  <el-option label="小于等于" value="lessThanOrEqual" />
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                :label="pIndex === 0 ? '比较值' : ''"
+                :prop="`nodeParams.${index}.list.${pIndex}.type`"
+              >
+                <el-select
+                  v-model="property.type"
+                  @change="handleTypeChange(index, pIndex)"
+                >
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item
+                  v-if="property.type === 'input'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.input`"
+                >
+                  <el-input
+                    v-model="property.input"
+                    placeholder="请输入"
+                    clearable
+                  />
+                </el-form-item>
+                <el-form-item
+                  v-if="property.type === 'quote'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.list.${pIndex}.quote`"
+                >
+                  <el-cascader
+                    v-model="property.quote"
+                    :options="quoteOptions"
+                    placeholder="请选择"
+                    @visible-change="visibleChange"
+                  />
+                </el-form-item>
+              </el-form-item>
+              <el-form-item :label="pIndex === 0 ? '操作' : ''">
+                <el-button
+                  :disabled="flowStore.disableForm"
+                  circle
+                  size="small"
+                  @click="addListItem(index)"
+                >
+                  <el-icon :size="12"><Plus /></el-icon>
+                </el-button>
+                <el-button
+                  :disabled="flowStore.disableForm"
+                  circle
+                  size="small"
+                  @click="removeListItem(index, pIndex)"
+                >
+                  <el-icon :size="12"><Minus /></el-icon>
+                </el-button>
+              </el-form-item>
+            </el-row>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="else" :id="''.concat(props.model.id, '_else')">
+      <div class="space"></div>
+      <div class="title">Else</div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import NodeTitle from "../../components/NodeTitle.vue";
+import NodeState from "../../components/NodeState.vue";
+import switchSvg from "../../icon/switch.svg";
+import { v4 as randomUUID } from "uuid";
+import { useFlowStore } from "@/store/modules/flow";
+import { Plus, Minus } from "@element-plus/icons-vue";
+import { getInput, addNewEdge, removeSwitchEdge } from "@/utils/flow";
+import { emitter } from "@/utils/eventBus";
+
+const props = defineProps({
+  model: Object,
+  graphModel: Object,
+  properties: Object,
+  nowTime: Number,
+});
+
+const emits = defineEmits([
+  "addAnchor",
+  "removeAnchor",
+  "bindRef",
+  "changeAnchor",
+]);
+
+const switchRef = ref();
+const dynamicForm = ref();
+const flowStore = useFlowStore();
+
+const formData = reactive({
+  nodeParams: props.properties?.conditions || [],
+});
+
+const addFormItem = () => {
+  const rect = switchRef.value.getBoundingClientRect();
+  addCondition(rect.height - 60);
+};
+
+const deleteFormItem = (id, index) => {
+  if (index === 0) {
+    return;
+  }
+  formData.nodeParams.splice(index, 1);
+  emits("removeAnchor", id);
+  removeSwitchEdge(props.model.id, id);
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const quoteOptions = ref([]);
+const handleTypeChange = (pIndex, index) => {
+  if (formData.nodeParams[pIndex].list[index].type === "input") {
+    formData.nodeParams[pIndex].list[index].quote = "";
+  } else {
+    formData.nodeParams[pIndex].list[index].input = "";
+    const option = getInput(props.model.id, false);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const addCondition = (height) => {
+  const id = randomUUID().replace(/-/g, "");
+  formData.nodeParams.push({
+    id,
+    withOr: "and",
+    list: [
+      {
+        name: "",
+        nameQuote: "",
+        nameType: "input",
+        type: "input",
+        input: "",
+        quote: "",
+      },
+    ],
+  });
+  emits("addAnchor", height, id);
+
+  setTimeout(() => {
+    addNewEdge(props.model.id);
+  }, 50);
+
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const addListItem = (pIndex, cIndex) => {
+  formData.nodeParams[pIndex].list.push({
+    name: "",
+    nameQuote: "",
+    nameType: "input",
+    type: "input",
+    input: "",
+    quote: "",
+  });
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const removeListItem = (pIndex, cIndex) => {
+  if (cIndex === 0) {
+    return;
+  }
+  formData.nodeParams[pIndex].list.splice(cIndex, 1);
+  nextTick(() => {
+    changeFormItemHeight();
+  });
+};
+
+const changeFormItemHeight = () => {
+  formData.nodeParams.forEach((item) => {
+    const node = document.getElementById(item.id);
+    emits("changeAnchor", node.offsetTop, item.id);
+  });
+
+  const node = document.getElementById("".concat(props.model.id, "_else"));
+  emits("changeAnchor", node.offsetTop, "".concat(props.model.id, "_else"));
+};
+
+const setNodeProperties = async () => {
+  try {
+    const valid = await dynamicForm.value.validate();
+    if (valid) {
+      const data = toRaw(formData);
+      const properties = lf.getProperties(props.model.id);
+      lf.setProperties(props.model.id, {
+        ...properties,
+        ...data,
+      });
+      emits("contentChange");
+    }
+  } catch (error) {
+    dynamicForm.value.clearValidate();
+  }
+};
+
+const visibleChange = (value) => {
+  if (value) {
+    const option = getInput(props.model.id);
+    if (option) {
+      quoteOptions.value = option;
+    }
+  }
+};
+
+const nodeOperatingStatus = ref("NORMAL");
+const inputJsonData = ref({});
+const outputJsonData = ref({});
+
+watch(
+  () => props.properties,
+  () => {
+    if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
+      formData.nodeParams = props.properties.nodeParams;
+    } else {
+      if (formData.nodeParams.length === 0) {
+        addCondition(100);
+      }
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
+onMounted(() => {
+  emits("addAnchor", 280, "".concat(props.model.id, "_else"));
+
+  emits("bindRef", dynamicForm.value);
+
+  emitter.on("changeNodeState", (data) => {
+    if (data.nodeId === props.model.id) {
+      nodeOperatingStatus.value = data.status;
+      let inputData = {};
+      let output = {};
+      try {
+        inputData = JSON.parse(data.paramsIn) || {};
+        output = JSON.parse(data.paramsOut) || {};
+      } catch (error) {
+        inputData = data.paramsIn || {};
+        output = data.paramsOut || {};
+      }
+      inputJsonData.value = inputData;
+      outputJsonData.value = output;
+
+      emits("contentChange");
+    }
+  });
+
+  emitter.on("contentChange", (data) => {
+    if (data.id === props.model.id) {
+      nodeOperatingStatus.value = "NORMAL";
+      inputJsonData.value = {};
+      outputJsonData.value = {};
+
+      emits("contentChange");
+    }
+  });
+});
+
+onUnmounted(() => {
+  emitter.off("changeNodeState");
+  emitter.off("contentChange");
+});
+</script>
+<style lang="scss" scoped>
+.node__container {
+  width: 720px;
+  height: auto;
+  background: #fff;
+  padding: 12px;
+  cursor: default;
+  border-radius: 12px;
+  border: 2px solid white;
+  box-shadow: 0 5px 15px 0#00000008;
+  position: relative;
+
+  .condition_title_container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .space {
+        width: 4px;
+        height: 14px;
+        background: rgb(22, 100, 255);
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      .title {
+        margin-left: 8px;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+
+    .el-button {
+      border: none;
+    }
+  }
+
+  .condition {
+    width: 100%;
+    height: auto;
+    margin-bottom: 10px;
+    background-color: #fafbfc;
+    padding: 8px 16px;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .title__container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .space {
+          width: 4px;
+          height: 14px;
+          background: rgb(22, 100, 255);
+          border-radius: 0px 4px 4px 0px;
+        }
+
+        .title {
+          margin-left: 8px;
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .withOr {
+      margin-bottom: 12px;
+
+      .title {
+        font-size: 14px;
+        color: #737a87;
+        margin-bottom: 4px;
+      }
+    }
+
+    :deep(.form__container) {
+      .el-form-item {
+        margin-right: 20px;
+      }
+
+      .el-input {
+        width: 92px;
+      }
+
+      .el-select {
+        width: 92px;
+      }
+
+      .el-cascader {
+        width: 92px;
+      }
+    }
+  }
+
+  .else {
+    display: flex;
+    align-items: center;
+    background-color: #fafbfc;
+    padding: 8px 16px;
+
+    .space {
+      width: 4px;
+      height: 14px;
+      background: rgb(22, 100, 255);
+      border-radius: 0px 4px 4px 0px;
+    }
+
+    .title {
+      margin-left: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 20460d5..9c1c2ce 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -35,8 +35,8 @@ export default defineConfig(({mode, command}) => {
                     //杨 http://192.168.0.10:13080
                     //赵 http://10.148.108.58:13080
                     // dev http://10.148.20.34:13080
-                    // target: VITE_API_URL,
-                    target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
+                    target: VITE_API_URL,
+                    // target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
                     changeOrigin: true,
                     rewrite: (p) => p.replace(/^\/dev-api/, '')
                 }

From f00aefb5861411f6d4e17c4e6396187d2d68d726 Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Mon, 17 Nov 2025 15:24:45 +0800
Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=E8=8A=82=E7=82=B9=E7=BC=A9?=
 =?UTF-8?q?=E5=B0=8F=E5=92=8C=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/flow.js                           | 16 ++++++++++++++
 src/views/flow/index.vue                    |  1 +
 src/views/flow/nodes/common/serviceNode.vue | 23 ++++++++-------------
 src/views/flow/nodes/common/startNode.vue   | 22 +++++++-------------
 src/views/flow/nodes/function/sleep.vue     | 22 +++++++-------------
 5 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/utils/flow.js b/src/utils/flow.js
index 10187e6..ff5f46b 100644
--- a/src/utils/flow.js
+++ b/src/utils/flow.js
@@ -172,6 +172,22 @@ export const newEdge = (nodeId) => {
   })
 }
 
+export const initNodeZoom = (modelId, nodeZoom, className, init=false) => {
+  const nodes = document.getElementsByClassName(modelId)
+  if (nodes.length > 0) {
+    const node = nodes[0]
+    const parent = node.closest(className);
+    if (nodeZoom) {
+      parent.style.width = '680px'
+    } else {
+      parent.style.width = '300px'
+    }
+    if (!init) {
+      addNewEdge(modelId)
+    }
+  }
+}
+
 export const getInputNumber = (nodeId) => {
     const data = lf.getGraphData();
     let flag = false
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index df850c9..7c44aa6 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -572,6 +572,7 @@ const handleTreeNodeClick = (node) => {
   lf.focusOn({
     id: node.id
   })
+  lf.selectElementById(node.id)
 }
 
 const fitView = () => {
diff --git a/src/views/flow/nodes/common/serviceNode.vue b/src/views/flow/nodes/common/serviceNode.vue
index b92ac7c..d907976 100644
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/src/views/flow/nodes/common/serviceNode.vue
@@ -210,8 +210,8 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput, addNewEdge } from "@/utils/flow";
+import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
+import { getInput, initNodeZoom } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -283,6 +283,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -363,20 +364,10 @@ const deleteTopLevelItem = (fullPath) => {
   emits("contentChange");
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = (flag) => {
   nodeZoom.value = flag
-  const nodes = document.getElementsByClassName(props.model.id)
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
 }
 
 watch(
@@ -388,6 +379,10 @@ watch(
       if (option) {
         quoteOptions.value = option;
       }
+
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
     if (
       props.properties.outputParams &&
diff --git a/src/views/flow/nodes/common/startNode.vue b/src/views/flow/nodes/common/startNode.vue
index 1ada400..23debd8 100644
--- a/src/views/flow/nodes/common/startNode.vue
+++ b/src/views/flow/nodes/common/startNode.vue
@@ -77,10 +77,10 @@
 </template>
 
 <script setup>
-import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
+import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
 import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
 import { useFlowStore } from "@/store/modules/flow";
-import { addNewEdge } from "@/utils/flow";
+import { initNodeZoom } from "@/utils/flow";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
@@ -130,6 +130,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...props.properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -147,6 +148,9 @@ watch(
   () => {
     if (props.properties.inputParams && props.properties.inputParams.length > 0) {
       formData.inputParams = props.properties.inputParams;
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
   },
   {
@@ -218,20 +222,10 @@ const validateForm = async () => {
   }
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = () => {
   nodeZoom.value = !nodeZoom.value
-  const nodes = document.getElementsByClassName(props.model.id)
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
 }
 
 onUnmounted(() => {
diff --git a/src/views/flow/nodes/function/sleep.vue b/src/views/flow/nodes/function/sleep.vue
index 54fb464..66e0888 100644
--- a/src/views/flow/nodes/function/sleep.vue
+++ b/src/views/flow/nodes/function/sleep.vue
@@ -136,8 +136,8 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
-import { getInput, addNewEdge } from "@/utils/flow";
+import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
+import { getInput, initNodeZoom } from "@/utils/flow";
 import { useFlowStore } from "@/store/modules/flow";
 import { Plus } from "@element-plus/icons-vue";
 import NodeTitle from "../../components/NodeTitle.vue";
@@ -185,6 +185,7 @@ const setNodeProperties = async () => {
       lf.setProperties(props.model.id, {
         ...properties,
         ...data,
+        zoom: nodeZoom.value
       });
       emits("contentChange");
     }
@@ -230,20 +231,10 @@ const addFormItem = () => {
   emits("contentChange");
 };
 
-const nodeZoom = ref(true)
+const nodeZoom = ref(props?.properties?.zoom ?? true)
 const zoom = (flag) => {
   nodeZoom.value = flag
-  const nodes = document.getElementsByClassName(props.model.id)
-  if (nodes.length > 0) {
-    const node = nodes[0]
-    const parent = node.closest('.node__box');
-    if (nodeZoom.value) {
-      parent.style.width = '680px'
-    } else {
-      parent.style.width = '300px'
-    }
-    addNewEdge(props.model.id)
-  }
+  initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
 }
 
 watch(
@@ -255,6 +246,9 @@ watch(
       if (option) {
         quoteOptions.value = option;
       }
+      nextTick(() => {
+        initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
+      })
     }
   },
   {

From f59998d520303678745f3241731a71944cd21fcf Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Mon, 17 Nov 2025 15:27:08 +0800
Subject: [PATCH 09/10] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/flow.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/flow.js b/src/utils/flow.js
index ff5f46b..44a9db8 100644
--- a/src/utils/flow.js
+++ b/src/utils/flow.js
@@ -180,7 +180,7 @@ export const initNodeZoom = (modelId, nodeZoom, className, init=false) => {
     if (nodeZoom) {
       parent.style.width = '680px'
     } else {
-      parent.style.width = '300px'
+      parent.style.width = '380px'
     }
     if (!init) {
       addNewEdge(modelId)

From 67fa6342a20755b5ef1cc6ba4f08acf1cc1a643f Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Mon, 17 Nov 2025 17:32:33 +0800
Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=E5=8D=95=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/flow.js                      | 116 +--
 src/views/flow/components/NodeTitle.vue     |  28 +-
 src/views/flow/config.js                    |  18 +
 src/views/flow/index.vue                    | 792 ++++++++++++--------
 src/views/flow/nodes/common/serviceNode.vue |   1 +
 src/views/flow/nodes/common/startNode.vue   |   9 +-
 6 files changed, 607 insertions(+), 357 deletions(-)

diff --git a/src/api/device/flow.js b/src/api/device/flow.js
index b3e3b76..e1ad731 100644
--- a/src/api/device/flow.js
+++ b/src/api/device/flow.js
@@ -1,55 +1,63 @@
-import request from '@/utils/request'
-
-// 发布流程
-export function flowDeploy(data) {
-    return request({
-        url: '/flow/publish',
-        method: 'post',
-        data: data
-    })
-}
-
-export function flowExecute(data) {
-    return request({
-        url: '/flow/execute',
-        method: 'post',
-        data: data
-    })
-}
-
-export function flowExecuteTrial(data) {
-    return request({
-        url: '/flow/executeTrial',
-        method: 'post',
-        data: data
-    })
-}
-
-export function flowView(data) {
-    return request({
-        url: '/flow/view',
-        method: 'post',
-        data: data
-    })
-}
-
-export function flowPause(instId) {
-    return request({
-        url: `/flow/pause/${instId}`,
-        method: 'post'
-    })
-}
-
-export function flowResume(instId) {
-    return request({
-        url: `/flow/resume/${instId}`,
-        method: 'post'
-    })
-}
-
-export function flowStop(instId) {
-    return request({
-        url: `/flow/stop/${instId}`,
-        method: 'post'
-    })
+import request from '@/utils/request'
+
+// 发布流程
+export function flowDeploy(data) {
+    return request({
+        url: '/flow/publish',
+        method: 'post',
+        data: data
+    })
+}
+
+export function flowExecute(data) {
+    return request({
+        url: '/flow/execute',
+        method: 'post',
+        data: data
+    })
+}
+
+export function flowAction(data) {
+    return request({
+        url: '/flow/action',
+        method: 'post',
+        data: data
+    })
+}
+
+export function flowExecuteTrial(data) {
+    return request({
+        url: '/flow/executeTrial',
+        method: 'post',
+        data: data
+    })
+}
+
+export function flowView(data) {
+    return request({
+        url: '/flow/view',
+        method: 'post',
+        data: data
+    })
+}
+
+export function flowPause(instId) {
+    return request({
+        url: `/flow/pause/${instId}`,
+        method: 'post'
+    })
+}
+
+export function flowResume(instId) {
+    return request({
+        url: `/flow/resume/${instId}`,
+        method: 'post'
+    })
+}
+
+export function flowStop(instId) {
+    return request({
+        url: `/flow/stop/${instId}`,
+        method: 'post'
+    })
 }
\ No newline at end of file
diff --git a/src/views/flow/components/NodeTitle.vue b/src/views/flow/components/NodeTitle.vue
index 1a66002..b60b2dd 100644
--- a/src/views/flow/components/NodeTitle.vue
+++ b/src/views/flow/components/NodeTitle.vue
@@ -32,13 +32,25 @@
         </div>
       </div>
       <div class="right">
+      <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="执行"
+          placement="top"
+        >
+          <el-button v-if="nodeType && nodeType !=='NONE'" circle @click="execute">
+            <el-icon>
+              <VideoPlay />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
         <el-tooltip
           class="box-item"
           effect="dark"
           :content="zoomState ? '缩小' : '放大'"
           placement="top"
         >
-          <el-button v-if="showZoom" circle size="small" @click="zoom">
+          <el-button v-if="showZoom" circle @click="zoom">
             <el-icon>
               <ZoomOut v-if="zoomState" />
               <ZoomIn v-else />
@@ -51,7 +63,7 @@
           content="删除"
           placement="top"
         >
-          <el-button circle size="small" @click="deleteNode">
+          <el-button circle @click="deleteNode">
             <el-icon><Delete /></el-icon>
           </el-button>
         </el-tooltip>
@@ -62,7 +74,7 @@
 </template>
 <script setup lang="js">
 import { ref } from 'vue'
-import { EditPen, Select, CloseBold, Delete, ZoomOut, ZoomIn } from '@element-plus/icons-vue'
+import { EditPen, Select, CloseBold, Delete, ZoomOut, ZoomIn, VideoPlay } from '@element-plus/icons-vue'
 import { ElMessageBox } from 'element-plus'
 
 const props = defineProps({
@@ -144,6 +156,15 @@ const deleteNode = () => {
 const zoom = () => {
   emits('zoom', !props.zoomState)
 }
+
+const execute = () => {
+  const myEvent = new CustomEvent('singleNodeExecution', {
+    bubbles: false,        // 是否冒泡（默认 false）
+    cancelable: false,     // 是否可被 preventDefault() 取消（默认 false）
+    detail: { ...props.nodeProperties  } // 自定义数据（任意类型，通过 event.detail 读取）
+  });
+  document.dispatchEvent(myEvent);
+}
 </script>
 <style lang="scss" scoped>
 .title__container {
@@ -204,6 +225,7 @@ const zoom = () => {
 
       .el-button {
         border: none;
+        font-size: 24px;
       }
     }
   }
diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index 9584e80..d75dd78 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -125,6 +125,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "在获取相机照片时，需要先启动相机",
         action: 'CAMERA_START',
+        nodeType: 'EDGE',
         nodeParams: [
           { name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
         ],
@@ -136,6 +137,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "获取相机拍摄的照片",
         action: 'CAMERA_GETRGBIMAGE',
+        nodeType: 'EDGE',
         nodeParams: [
           { name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
         ],
@@ -148,6 +150,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "获取相机照片后，关闭该相机",
         action: 'CAMERA_STOP',
+        nodeType: 'EDGE',
         nodeParams: [
           { name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
         ],
@@ -164,6 +167,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "开启摄像头，并开始录像",
         action: 'CAMERA_RECORDING_START',
+        nodeType: 'EDGE',
         nodeParams: [
           { name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
         ],
@@ -175,6 +179,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "停止录像，并关闭摄像头",
         action: 'CAMERA_RECORDING_STOP',
+        nodeType: 'EDGE',
         nodeParams: [
           { name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
         ],
@@ -259,6 +264,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "用于启动麦克风的节点",
         action: 'MICROPHONE_START',
+        nodeType: 'EDGE',
         nodeParams: [
           { name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
         ],
@@ -270,6 +276,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "用于停止麦克风的节点",
         action: 'MICROPHONE_START',
+        nodeType: 'EDGE',
         nodeParams: [
           { name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
         ],
@@ -297,6 +304,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "用于获取触控坐标的节点",
         action: 'TOUCH_COORDINATES',
+        nodeType: "LLM",
         nodeParams: [
           { name: "targetFeature", type: "input", input: "运动模式",  disabled: true },
           { name: "manufacturer", type: "input", input: "xiaomi",  disabled: true },
@@ -310,6 +318,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "将指令文本(text)处理合成语音，输出语音路径(audioPath)",
         action: 'GENERATE_ADVANCED_AUDIO',
+        nodeType: "LLM",
         outputType: 'json',
         nodeParams: [{ name: 'text', type: "input", input: "",  disabled: true }],
         outputParams: [{ name: 'audioPath', type: 'string', desc: '语音路径', disabled: true}]
@@ -319,6 +328,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "意图识别，输出类型(type) 1: 语音交互  2: 触控交互 3: 闲聊 4: 知识问答",
         action: 'INTENT_RECOGNITION',
+        nodeType: "LLM",
         outputType: 'json',
         nodeParams: [{ name: 'text', type: "input", input: "",  disabled: true }],
         outputParams: [{ name: 'type', type: 'string', desc: '1：语音交互  2：触控交互 3: 闲聊 4:知识问答', disabled: true}]
@@ -347,6 +357,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "唤醒语料处理,输入唤醒语料(wakeCorpus)，输出语音路径(audioPath)",
         action: 'VI_CORPUS_WAKE',
+        nodeType: "EDGE",
         outputType: 'json',
         nodeParams: [{ name: 'wakeCorpus', type: "input", input: "",  disabled: true }],
         outputParams: [{ name: 'audioPath', type: 'string', desc: '语音路径', disabled: true}]
@@ -357,6 +368,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "测试语料-单次对话语料处理,输入单次对话语料(testCorpus)，输出语音路径(audioPath)",
         action: 'VI_CORPUS_SINGLE',
+        nodeType: "EDGE",
         outputType: 'json',
         nodeParams: [{ name: 'testCorpus', type: "input", input: "",  disabled: true }],
         outputParams: [{ name: 'audioPath', type: 'string', desc: '语音路径', disabled: true}]
@@ -367,6 +379,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "测试语料-连续对话语料处理,输入连续对话语料(testCorpus)，输出语音路径(audioPath)",
         action: 'VI_CORPUS_CONTINUOUS',
+        nodeType: "EDGE",
         outputType: 'json',
         nodeParams: [{ name: 'testCorpus', type: "input", input: "",  disabled: true }],
         outputParams: [{ name: 'audioPath', type: 'string', desc: '语音路径', disabled: true}]
@@ -377,6 +390,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "用于播放语料的节点，需要输入语音路径(audioPath)和播放语音的设备id(deviceId)",
         action: 'VI_PLAY_CORPUS',
+        nodeType: "EDGE",
         outputType: 'json',
         nodeParams: [
           { name: 'audioPath', type: "input", input: "",  disabled: true },
@@ -394,6 +408,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "去触控坐标的点位",
         action: 'TOUCH',
+        nodeType: "EDGE",
         nodeParams: [
           { name: "deviceId", type: "input", input: "", disabled: true },
           { name: "touchParams", type: "input", input: "", disabled: true }
@@ -406,6 +421,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "控制机器人说话",
         action: 'BIO_HEAD_SPEAK_START',
+        nodeType: "EDGE",
         nodeParams: [
           { name: "deviceId", type: "input", input: "", disabled: true }
         ],
@@ -417,6 +433,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "停止机器人说话",
         action: 'BIO_HEAD_SPEAK_STOP',
+        nodeType: "EDGE",
         nodeParams: [
           { name: "deviceId", type: "input", input: "", disabled: true }
         ],
@@ -428,6 +445,7 @@ export const collapseList = [
         type: "serviceNode",
         desc: "控制机器人的面部表情",
         action: 'BIO_HEAD_SPECIAL_EXPRESSION',
+        nodeType: "EDGE",
         nodeParams: [
           { name: "deviceId", type: "input", input: "", disabled: true },
           { name: "expressKey", type: "input",componentType: 'select', selectOptions: expressOptions(), disabled: true },
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index 7c44aa6..612c036 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <el-container class="page__container">
-      <el-header v-if="!flowInfoData.isLog" >
+      <el-header v-if="!flowInfoData.isLog">
         <div>
           <div>{{ flowInfoData.name }}</div>
           <div>{{ stateMap[flowState] }}</div>
@@ -9,10 +9,20 @@
         <div class="btn__container">
           <div class="btn">
             <el-button @click="group">分组</el-button>
-            <el-button v-if="flowState !== 'testRunning'" @click="testRun">试运行</el-button>
-            <el-button v-if="flowState === 'testRunning'" @click="flowPauseFn">暂停</el-button>
-            <el-button v-if="flowState === 'pause'" @click="flowResumeFn">恢复</el-button>
-            <el-button v-if="['testRunning', 'pause'].includes(flowState)" @click="flowStopFn">终止</el-button>
+            <el-button v-if="flowState !== 'testRunning'" @click="testRun"
+              >试运行</el-button
+            >
+            <el-button v-if="flowState === 'testRunning'" @click="flowPauseFn"
+              >暂停</el-button
+            >
+            <el-button v-if="flowState === 'pause'" @click="flowResumeFn"
+              >恢复</el-button
+            >
+            <el-button
+              v-if="['testRunning', 'pause'].includes(flowState)"
+              @click="flowStopFn"
+              >终止</el-button
+            >
           </div>
           <div class="btn">
             <el-tooltip
@@ -22,25 +32,35 @@
               placement="top"
               v-if="flowState !== 'testRunFinish'"
             >
-              <el-button  type="primary" :disabled="true">发布</el-button>
+              <el-button type="primary" :disabled="true">发布</el-button>
             </el-tooltip>
-            <el-button v-else @click="deployFlow" type="primary">发布</el-button>
+            <el-button v-else @click="deployFlow" type="primary"
+              >发布</el-button
+            >
 
-            <el-popover :width="260" @show="showNodeRelationship" popper-class="node-relationship-network-popover">
+            <el-popover
+              :width="260"
+              @show="showNodeRelationship"
+              popper-class="node-relationship-network-popover"
+            >
               <template #reference>
-                <el-button style="margin-right: 16px"><el-icon><Location /></el-icon></el-button>
+                <el-button style="margin-right: 16px"
+                  ><el-icon><Location /></el-icon
+                ></el-button>
               </template>
               <div>
                 <div class="title">节点关系网</div>
                 <div class="fit">
-                <el-tooltip
-                  class="box-item"
-                  effect="dark"
-                  content="适应屏幕"
-                  placement="bottom"
-                >
-                  <el-button size="small" circle @click="fitView"><el-icon><Location /></el-icon></el-button>
-                </el-tooltip>
+                  <el-tooltip
+                    class="box-item"
+                    effect="dark"
+                    content="适应屏幕"
+                    placement="bottom"
+                  >
+                    <el-button size="small" circle @click="fitView"
+                      ><el-icon><Location /></el-icon
+                    ></el-button>
+                  </el-tooltip>
                 </div>
                 <el-tree
                   style="max-width: 600px"
@@ -59,104 +79,201 @@
           <Aside />
         </el-aside>
         <el-main>
-          <div class="flow__container" ref="flowContainerRef" @dragover="dragover" @drop="drop"></div>
+          <div
+            class="flow__container"
+            ref="flowContainerRef"
+            @dragover="dragover"
+            @drop="drop"
+          ></div>
         </el-main>
       </el-container>
     </el-container>
 
-    <TestRun :drawer="isOpen" @close="isOpen = false" @changeState="changeState" :flowId="flowInfoData.itemId" />
+    <TestRun
+      :drawer="isOpen"
+      @close="isOpen = false"
+      @changeState="changeState"
+      :flowId="flowInfoData.itemId"
+    />
   </div>
+
+  <el-dialog v-model="visible" width="500" append-to-body>
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header">
+        <h4 :id="titleId" :class="titleClass">执行{{ nodeName }}节点</h4>
+      </div>
+    </template>
+    <el-form
+      :inline="true"
+      :model="formData"
+      :rules="rules"
+      ref="executeForm"
+      label-position="top"
+      label-width="auto"
+      :disabled="flowStore.disableForm"
+    >
+      <div v-for="(property, index) in formData.nodeParams" :key="index">
+        <el-row>
+          <el-form-item
+            :label="index === 0 ? '参数名' : ''"
+            :prop="`nodeParams.${index}.name`"
+            :rules="[
+              { required: true, message: '请输入参数名', trigger: 'blur' },
+            ]"
+          >
+            <el-input
+              :disabled="property?.disabled || false"
+              v-model="property.name"
+              placeholder="请输入"
+              clearable
+            />
+          </el-form-item>
+          <el-form-item
+            :label="index === 0 ? '参数值' : ''"
+            :prop="`nodeParams.${index}.input`"
+            :rules="[
+              { required: true, message: '请输入参数值', trigger: 'blur' },
+            ]"
+          >
+            <el-input-number
+              v-if="property.componentType === 'number'"
+              v-model="property.input"
+              :min="0"
+              :controls="false"
+              :step-strictly="true"
+              placeholder="请输入"
+              clearable
+            />
+            <el-select
+              v-model="property.input"
+              v-else-if="property.componentType === 'select'"
+            >
+              <el-option
+                v-for="item in property.selectOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+            <el-input
+              v-else
+              v-model="property.input"
+              autosize
+              type="textarea"
+              placeholder="请输入"
+              clearable
+            />
+          </el-form-item>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="execute">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import LogicFlow, { action } from "@logicflow/core";
 import "@logicflow/core/es/index.css";
 import "@logicflow/core/lib/style/index.css";
-import '@logicflow/extension/lib/style/index.css'
-import { lfConfig, registerCustomizeNode } from './config'
+import "@logicflow/extension/lib/style/index.css";
+import { lfConfig, registerCustomizeNode } from "./config";
 import TestRun from "./components/TestRun.vue";
 import Aside from "./components/Aside.vue";
-import { ElMessage } from 'element-plus'
-import { useFlowStore } from '@/store/modules/flow'
-import { emitter } from '@/utils/eventBus';
-import { recursiveFilter, newEdge, convertToTree } from '@/utils/flow'
-import { flowDeploy, flowView, flowPause, flowResume, flowStop } from '@/api/device/flow'
-import { getDetect } from '@/api/test/detect'
+import { ElMessage } from "element-plus";
+import { useFlowStore } from "@/store/modules/flow";
+import { emitter } from "@/utils/eventBus";
+import { recursiveFilter, newEdge, convertToTree } from "@/utils/flow";
+import {
+  flowDeploy,
+  flowView,
+  flowPause,
+  flowResume,
+  flowStop,
+  flowAction
+} from "@/api/device/flow";
+import { getDetect } from "@/api/test/detect";
 import { Location } from "@element-plus/icons-vue";
 
 const flowContainerRef = ref(null);
 const lfRef = ref(null);
 
 const dragover = (e) => {
-  e.preventDefault()
-}
+  e.preventDefault();
+};
 
 const drop = (e) => {
-  let node = e.dataTransfer.getData('flowNode');
-  node = JSON.parse(node)
-  if (['stopLoop', 'subEnd', 'subStart'].includes(node.type)) {
-    ElMessage.warning('此节点只能拖拽到循环节点的循环体中')
-    return
+  let node = e.dataTransfer.getData("flowNode");
+  node = JSON.parse(node);
+  if (["stopLoop", "subEnd", "subStart"].includes(node.type)) {
+    ElMessage.warning("此节点只能拖拽到循环节点的循环体中");
+    return;
   }
-  const point = lf.getPointByClient(e.clientX, e.clientY)
-  const { type, ...other } = node
+  const point = lf.getPointByClient(e.clientX, e.clientY);
+  const { type, ...other } = node;
   lf.addNode({
-      type,
-      x: point.canvasOverlayPosition.x,
-      y: point.canvasOverlayPosition.y,
-      properties: {
-        ...other
-      }
-  })
-}
+    type,
+    x: point.canvasOverlayPosition.x,
+    y: point.canvasOverlayPosition.y,
+    properties: {
+      ...other,
+    },
+  });
+};
 
-const flowStore = useFlowStore()
-flowStore.getDeviceList()
+const flowStore = useFlowStore();
+flowStore.getDeviceList();
 
-const isOpen = ref(false)
+const isOpen = ref(false);
 const stateMap = {
-  unpublished: '未发布',
-  testRunning: '试运行中',
-  testRunFinish: '试运行成功',
-  testRunError: '试运行失败',
-  release: '已发布',
-  updateData: '修改中',
-  pause: '已暂停',
-  stop: '已终止'
-}
-const flowState = ref('unpublished')
+  unpublished: "未发布",
+  testRunning: "试运行中",
+  testRunFinish: "试运行成功",
+  testRunError: "试运行失败",
+  release: "已发布",
+  updateData: "修改中",
+  pause: "已暂停",
+  stop: "已终止",
+};
+const flowState = ref("unpublished");
 const flowInfoData = ref({
-  itemId: '',
-  instId: '',
-  taskId: '',
+  itemId: "",
+  instId: "",
+  taskId: "",
   isLog: false,
-  name: '流程'
-})
+  name: "流程",
+});
 
 /**
  * 试运行
  */
 const testRun = async () => {
   // 1、验证画布内所有的表单通过验证
-  const { nodes, edges } = lf.getGraphData()
+  const { nodes, edges } = lf.getGraphData();
 
-  const isolatedNodes = nodes.filter(node => {
+  const isolatedNodes = nodes.filter((node) => {
     const nodeId = node.id;
     // 检查是否存在关联边
-    return !edges.some(edge => 
-      edge.sourceNodeId === nodeId || edge.targetNodeId === nodeId
+    return !edges.some(
+      (edge) => edge.sourceNodeId === nodeId || edge.targetNodeId === nodeId
     );
   });
-  
-  const gl = isolatedNodes.filter(item => {
-    return !item.properties?.parentId && item.type !== 'selectArea'
-  })
+
+  const gl = isolatedNodes.filter((item) => {
+    return !item.properties?.parentId && item.type !== "selectArea";
+  });
 
   if (gl && gl.length > 0) {
-    ElMessage.warning('存在孤立的节点，请检查！')
-    return
+    ElMessage.warning("存在孤立的节点，请检查！");
+    return;
   }
-  
+
   let allValid = true;
   for (const node of nodes) {
     const nodeModel = lf.getNodeModelById(node.id);
@@ -167,40 +284,40 @@ const testRun = async () => {
       }
     }
   }
-    
+
   if (allValid) {
-    isOpen.value = true
+    isOpen.value = true;
   } else {
-    ElMessage.error('部分节点验证失败，请查看详情');
+    ElMessage.error("部分节点验证失败，请查看详情");
   }
-}
+};
 
 // 流程暂停
 const flowPauseFn = async () => {
-  const res = await flowPause(instId.value)
+  const res = await flowPause(instId.value);
   if (res.code === 200) {
-    flowState.value = 'pause'
+    flowState.value = "pause";
     ElMessage.success(res.msg);
   }
-}
+};
 
 const flowResumeFn = async () => {
-  const res = await flowResume(instId.value)
+  const res = await flowResume(instId.value);
   if (res.code === 200) {
-    flowState.value = 'testRunning'
-    loopFlowView(instId.value)
+    flowState.value = "testRunning";
+    loopFlowView(instId.value);
     ElMessage.success(res.msg);
   }
-}
+};
 
 const flowStopFn = async () => {
-  const res = await flowStop(instId.value)
+  const res = await flowStop(instId.value);
   if (res.code === 200) {
-    flowState.value = 'stop'
-    flowStore.updateDisableForm(false)
+    flowState.value = "stop";
+    flowStore.updateDisableForm(false);
     ElMessage.success(res.msg);
   }
-}
+};
 
 const initFlowData = {
   nodes: [
@@ -209,199 +326,211 @@ const initFlowData = {
       x: 300,
       y: 100,
       properties: {
-        name: 'Start',
-        action: 'start'
-      }
+        name: "Start",
+        action: "start",
+      },
     },
     {
       type: "end",
       x: 1300,
       y: 700,
       properties: {
-        name: 'End',
-        action: 'end'
-      }
-    }
+        name: "End",
+        action: "end",
+      },
+    },
   ],
   // 边
   edges: [],
 };
 
 const validEdge = (data) => {
-  const sourceAnchorArr = lf.getNodeModelById(data.sourceNodeId).anchors
-  const [sourceName] = sourceAnchorArr.filter(item => {
-    return item.id === data.sourceAnchorId
-  }).map(item=> {
-    return item.name
-  })
+  const sourceAnchorArr = lf.getNodeModelById(data.sourceNodeId).anchors;
+  const [sourceName] = sourceAnchorArr
+    .filter((item) => {
+      return item.id === data.sourceAnchorId;
+    })
+    .map((item) => {
+      return item.name;
+    });
 
-  const targetAnchorArr = lf.getNodeModelById(data.targetNodeId).anchors
-  const [targetName] = targetAnchorArr.filter(item => {
-    return item.id === data.targetAnchorId
-  }).map(item=> {
-    return item.name
-  })
+  const targetAnchorArr = lf.getNodeModelById(data.targetNodeId).anchors;
+  const [targetName] = targetAnchorArr
+    .filter((item) => {
+      return item.id === data.targetAnchorId;
+    })
+    .map((item) => {
+      return item.name;
+    });
 
-  if (sourceName === 'right' && targetName === 'left') {
-    return
-  } else if ((sourceName === 'right' && targetName === 'right') || (sourceName === 'left' && targetName === 'left')) {
+  if (sourceName === "right" && targetName === "left") {
+    return;
+  } else if (
+    (sourceName === "right" && targetName === "right") ||
+    (sourceName === "left" && targetName === "left")
+  ) {
     lf.deleteEdge(data.id);
-  } else if (sourceName === 'left' && targetName === 'right') {
-    const sourceNodeId = data.targetNodeId
-    const sourceAnchorId = data.targetAnchorId
-    const targetNodeId = data.sourceNodeId
-    const targetAnchorId = data.sourceAnchorId
+  } else if (sourceName === "left" && targetName === "right") {
+    const sourceNodeId = data.targetNodeId;
+    const sourceAnchorId = data.targetAnchorId;
+    const targetNodeId = data.sourceNodeId;
+    const targetAnchorId = data.sourceAnchorId;
     lf.deleteEdge(data.id);
     lf.addEdge({
-      type: 'bezier',
+      type: "bezier",
       sourceNodeId,
       targetNodeId,
       sourceAnchorId,
-      targetAnchorId
+      targetAnchorId,
     });
   }
-}
+};
 
-const instId = ref(null)
+const instId = ref(null);
 const changeState = (value) => {
-  const flowData = JSON.parse(JSON.stringify(lf.getGraphData()))
-  oldFlowData = flowData
-  isOpen.value = false
-  flowStore.updateDisableForm(true)
-  flowState.value = value.type
+  const flowData = JSON.parse(JSON.stringify(lf.getGraphData()));
+  oldFlowData = flowData;
+  isOpen.value = false;
+  flowStore.updateDisableForm(true);
+  flowState.value = value.type;
 
-  instId.value = value.instId
-  loopFlowView(value.instId)
-}
+  instId.value = value.instId;
+  loopFlowView(value.instId);
+};
 
 const loopFlowView = async (instId, taskId = null) => {
   const params = {
     itemId: flowInfoData.value.itemId,
     instId,
-  }
+  };
   if (taskId) {
-    params.taskId = taskId
+    params.taskId = taskId;
   }
-  const res = await flowView(params)
+  const res = await flowView(params);
   if (res.code === 200) {
-    const arr = res.data || []
-    arr.forEach(item => {
-      emitter.emit('changeNodeState', item)
-    })
-    oldFlowData = JSON.parse(JSON.stringify(lf.getGraphData()))
-    if (arr[arr.length - 1]?.nodeType !== 'END' && !['FAILED', 'STOPPED'].includes(arr[arr.length - 1]?.status)) {
+    const arr = res.data || [];
+    arr.forEach((item) => {
+      emitter.emit("changeNodeState", item);
+    });
+    oldFlowData = JSON.parse(JSON.stringify(lf.getGraphData()));
+    if (
+      arr[arr.length - 1]?.nodeType !== "END" &&
+      !["FAILED", "STOPPED"].includes(arr[arr.length - 1]?.status)
+    ) {
       setTimeout(() => {
-        loopFlowView(instId)
-      }, 2000)
-      } else if (arr[arr.length - 1]?.nodeType === 'END' && arr[arr.length - 1]?.status === 'SUCCESS') {
-        if (!flowInfoData.value.isLog) {
-          flowStore.updateDisableForm(false)
-          flowState.value = 'testRunFinish'
-        }
+        loopFlowView(instId);
+      }, 2000);
+    } else if (
+      arr[arr.length - 1]?.nodeType === "END" &&
+      arr[arr.length - 1]?.status === "SUCCESS"
+    ) {
+      if (!flowInfoData.value.isLog) {
+        flowStore.updateDisableForm(false);
+        flowState.value = "testRunFinish";
+      }
     } else {
       if (!flowInfoData.value.isLog) {
-        if (['PAUSED', 'STOPPED'].includes(arr[arr.length - 1]?.status)) {
-          flowState.value = arr[arr.length - 1]?.status === 'PAUSED' ? 'pause' : 'stop'
+        if (["PAUSED", "STOPPED"].includes(arr[arr.length - 1]?.status)) {
+          flowState.value =
+            arr[arr.length - 1]?.status === "PAUSED" ? "pause" : "stop";
         } else {
-          flowState.value = 'testRunError'
-          flowStore.updateDisableForm(false)
-        } 
+          flowState.value = "testRunError";
+          flowStore.updateDisableForm(false);
+        }
       }
     }
-  } 
-}
+  }
+};
 
-let oldFlowData = {}
+let oldFlowData = {};
 /**
  * 发布
  */
 const deployFlow = async () => {
-  if (flowState.value !== 'testRunFinish') {
-    ElMessage.warning('试运行成功后才可以发布')
-    return
+  if (flowState.value !== "testRunFinish") {
+    ElMessage.warning("试运行成功后才可以发布");
+    return;
   }
-  
+
   try {
-    const res = await flowDeploy({ id: flowInfoData.value.itemId })
+    const res = await flowDeploy({ id: flowInfoData.value.itemId });
 
     if (res.code === 200) {
-      ElMessage.success(res.msg)
-      flowState.value = 'release'
+      ElMessage.success(res.msg);
+      flowState.value = "release";
     } else {
-      ElMessage.error(res.msg)
+      ElMessage.error(res.msg);
     }
   } catch (error) {
-    ElMessage.error('部署操作产生异常')
+    ElMessage.error("部署操作产生异常");
   }
-}
-
+};
 
 const loadFlowData = async (id, lf) => {
   try {
-    const res = await getDetect(id)
+    const res = await getDetect(id);
     if (res.data && res.data.flowData) {
-      const flowData = JSON.parse(res.data.flowData)
-      const selectArea = []
-      flowData.nodes.forEach(item => {
-        if(item.type === 'selectArea') {
-          selectArea.push(...item.children)
+      const flowData = JSON.parse(res.data.flowData);
+      const selectArea = [];
+      flowData.nodes.forEach((item) => {
+        if (item.type === "selectArea") {
+          selectArea.push(...item.children);
         }
-      })
+      });
 
       lf.render(flowData);
-      
-      nextTick(() =>  {
-        selectArea.forEach(item => {
-          lf.getNodeModelById(item).draggable = false
-        })
-        oldFlowData = JSON.parse(JSON.stringify(lf.getGraphData()))
-        lf.fitView()
-      })
+
+      nextTick(() => {
+        selectArea.forEach((item) => {
+          lf.getNodeModelById(item).draggable = false;
+        });
+        oldFlowData = JSON.parse(JSON.stringify(lf.getGraphData()));
+        lf.fitView();
+      });
     } else {
       // 渲染数据 data
       lf.render(initFlowData);
-      oldFlowData = initFlowData
-      nextTick(() => lf.zoom(0.8, [850, 450]) )
+      oldFlowData = initFlowData;
+      nextTick(() => lf.zoom(0.8, [850, 450]));
     }
-  }
-  catch(err) {
+  } catch (err) {
     lf.render(initFlowData);
-    oldFlowData = initFlowData
-    nextTick(() => lf.zoom(0.8, [850, 450]) )
+    oldFlowData = initFlowData;
+    nextTick(() => lf.zoom(0.8, [850, 450]));
   }
-}
+};
 
 const registerBeforeUnload = () => {
-  window.addEventListener('beforeunload', handleBeforeUnload)
-}
+  window.addEventListener("beforeunload", handleBeforeUnload);
+};
 
 const handleBeforeUnload = (event) => {
-  if (flowState.value === 'pause' && !flowInfoData.value.isLog) {
-    flowStopFn()
+  if (flowState.value === "pause" && !flowInfoData.value.isLog) {
+    flowStopFn();
   }
-}
+};
 
 const justLoadFlow = () => {
   const url = new URL(window.location.href);
-  const locationParams = Object.fromEntries(url.searchParams.entries())
+  const locationParams = Object.fromEntries(url.searchParams.entries());
   if (locationParams?.itemId) {
-    flowState.value = locationParams.state === '0' ? 'release' : 'unpublished'
+    flowState.value = locationParams.state === "0" ? "release" : "unpublished";
     flowInfoData.value = {
       itemId: locationParams.itemId,
-      instId: locationParams?.instId || '',
-      taskId: locationParams?.taskId || '',
+      instId: locationParams?.instId || "",
+      taskId: locationParams?.taskId || "",
       isLog: locationParams?.isLog || false,
-      name: decodeURIComponent(locationParams.name)
-    }
+      name: decodeURIComponent(locationParams.name),
+    };
 
     if (flowInfoData.value.isLog) {
-      flowStore.updateDisableForm(true)
+      flowStore.updateDisableForm(true);
       setTimeout(() => {
-        loopFlowView(flowInfoData.value.instId, flowInfoData.value.taskId)
-      }, 1000)
+        loopFlowView(flowInfoData.value.instId, flowInfoData.value.taskId);
+      }, 1000);
     }
   }
-}
+};
 
 const initFlow = () => {
   if (flowContainerRef.value) {
@@ -409,9 +538,9 @@ const initFlow = () => {
       container: flowContainerRef.value,
       ...lfConfig,
       zoomOptions: {
-        initScale: 0.5,  // 初始缩放 50%
-        minScale: 0.1,   // 最小缩放 10%
-        maxScale: 3      // 最大缩放 300%
+        initScale: 0.5, // 初始缩放 50%
+        minScale: 0.1, // 最小缩放 10%
+        maxScale: 3, // 最大缩放 300%
       },
       keyboard: {
         enabled: true,
@@ -420,182 +549,232 @@ const initFlow = () => {
             keys: ["backspace", "delete"], // 覆盖删除键
             callback: () => {
               const activeElem = document.activeElement;
-              if (activeElem.tagName === 'INPUT' || 
-                  activeElem.tagName === 'TEXTAREA') {
-                  return; // 不处理输入框内的删除
+              if (
+                activeElem.tagName === "INPUT" ||
+                activeElem.tagName === "TEXTAREA"
+              ) {
+                return; // 不处理输入框内的删除
               }
 
               const { nodes, edges } = lf.getSelectElements();
               if (nodes.length > 0) {
                 // 检查是否存在受保护节点
-                const hasProtectedNode = nodes.some(node => 
-                  ['start', 'end'].includes(node.type)
-                )
+                const hasProtectedNode = nodes.some((node) =>
+                  ["start", "end"].includes(node.type)
+                );
 
                 if (hasProtectedNode) {
                   lf.selectElementById(null); // 取消选中
                   return; // 阻断删除
                 }
-                
+
                 // 默认删除逻辑
-                nodes.forEach(node => {
-                  if (node.type === 'selectArea') {
-                    lf.getNodeModelById(node.id).children = []
-                    node.children.forEach(item => {
-                      lf.getNodeModelById(item).draggable = true
-                    })
+                nodes.forEach((node) => {
+                  if (node.type === "selectArea") {
+                    lf.getNodeModelById(node.id).children = [];
+                    node.children.forEach((item) => {
+                      lf.getNodeModelById(item).draggable = true;
+                    });
                   }
 
-                  lf.deleteNode(node.id)
+                  lf.deleteNode(node.id);
                   // 删除节点所有的边
                   lf.deleteEdgeByNodeId(node.id);
                 });
-                return
+                return;
               }
-              if (nodes.length ===0 && edges.length > 0) {
-                edges.forEach(node => {
+              if (nodes.length === 0 && edges.length > 0) {
+                edges.forEach((node) => {
                   // 删除边
                   lf.deleteEdge(node.id);
-                })
+                });
               }
-            }
+            },
           },
           {
-            keys: ["ctrl+z"],  // 自定义快捷键
+            keys: ["ctrl+z"], // 自定义快捷键
             callback: () => {
-              return false
-            }
+              return false;
+            },
           },
           {
             keys: ["ctrl+shift+z"],
-            callback: () => false
-          }
-        ]
+            callback: () => false,
+          },
+        ],
       },
-    })
+    });
 
-    registerCustomizeNode(lf)
+    registerCustomizeNode(lf);
 
-    loadFlowData(flowInfoData.value.itemId, lf)
+    loadFlowData(flowInfoData.value.itemId, lf);
 
-    lf.on('edge:add', ({ data }) => {
-      validEdge(data)
+    lf.on("edge:add", ({ data }) => {
+      validEdge(data);
     });
 
     // 监听历史记录变化
     lf.on("history:change", ({ data }) => {
       if (flowStore.disableForm) {
-        return
+        return;
       }
-      const flowData =  lf.getGraphData()
+      const flowData = lf.getGraphData();
       if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
-        return
+        return;
       }
-      flowState.value = 'updateData'
+      flowState.value = "updateData";
     });
 
     // 监听子节点拖动事件
     lf.on("node:mousemove", ({ data, e }) => {
       const { nodes } = lf.getGraphData();
-      const arr = recursiveFilter(nodes, data.id, 'loop')
-      arr.forEach(item => {
-        const node = lf.getNodeModelById(item.id)
-        node.updateSize()
-      })
-      operationEdge(arr)
+      const arr = recursiveFilter(nodes, data.id, "loop");
+      arr.forEach((item) => {
+        const node = lf.getNodeModelById(item.id);
+        node.updateSize();
+      });
+      operationEdge(arr);
     });
 
     lf.on("node:mouseleave", ({ data }) => {
-      const node = lf.getNodeModelById(data.id)
-      node.setCustomProperties && node.setCustomProperties()
-    })
+      const node = lf.getNodeModelById(data.id);
+      node.setCustomProperties && node.setCustomProperties();
+    });
 
     lfRef.value = lf;
-    window.lf = lf
+    window.lf = lf;
   }
-}
+};
 
 const group = () => {
-  const PADDING = 200
+  const PADDING = 200;
   lf.extension.selectionSelect.openSelectionSelect();
-  lf.once('selection:selected', (data) => {
-   
-    let minX = Infinity
-    let minY = Infinity
-    let maxX = -Infinity
-    let maxY = -Infinity
+  lf.once("selection:selected", (data) => {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
 
-    let children = [] 
-    data.elements.forEach(item => {
-      if (item.BaseType === 'node') {
-        minX = Math.min(minX, item.x - item.width / 2)
-        minY = Math.min(minY, item.y - item.height / 2)
-        maxX = Math.max(maxX, item.x + item.width / 2)
-        maxY = Math.max(maxY, item.y + item.height / 2)
-        children.push(item.id)
-        lf.getNodeModelById(item.id).draggable = false
+    let children = [];
+    data.elements.forEach((item) => {
+      if (item.BaseType === "node") {
+        minX = Math.min(minX, item.x - item.width / 2);
+        minY = Math.min(minY, item.y - item.height / 2);
+        maxX = Math.max(maxX, item.x + item.width / 2);
+        maxY = Math.max(maxY, item.y + item.height / 2);
+        children.push(item.id);
+        lf.getNodeModelById(item.id).draggable = false;
       }
-    })
+    });
     if (children.length === 0) {
-      return
+      return;
     }
-    let width = maxX - minX + PADDING
-    let height = maxY - minY + PADDING
-    
+    let width = maxX - minX + PADDING;
+    let height = maxY - minY + PADDING;
+
     lf.addNode({
-      type: 'selectArea',
+      type: "selectArea",
       x: minX + (maxX - minX) / 2,
       y: minY + (maxY - minY) / 2,
       properties: {
         width,
         height,
       },
-      children
-    })
-    lf.clearSelectElements()
+      children,
+    });
+    lf.clearSelectElements();
     lf.extension.selectionSelect.closeSelectionSelect();
   });
-}
+};
 
-const treeData = ref(null)
+const treeData = ref(null);
 const defaultProps = {
-  children: 'children',
-  label: 'name',
-}
+  children: "children",
+  label: "name",
+};
 const showNodeRelationship = () => {
-  const { nodes } = lf.getGraphData()
+  const { nodes } = lf.getGraphData();
   const outputData = convertToTree(nodes);
-  treeData.value = outputData
-}
+  treeData.value = outputData;
+};
 
 const handleTreeNodeClick = (node) => {
   lf.focusOn({
-    id: node.id
-  })
-  lf.selectElementById(node.id)
-}
+    id: node.id,
+  });
+  lf.selectElementById(node.id);
+};
 
 const fitView = () => {
-  lf.fitView()
+  lf.fitView();
+};
+
+const nodeName = ref("");
+const visible = ref(false)
+const formData = reactive({
+  nodeParams: [],
+})
+const rules = reactive({})
+const executeForm = ref()
+const nodeAction = ref('')
+
+const singleNodeExecution = (e) => {
+  const { name, nodeType, nodeParams, action } = e.detail;
+  nodeName.value = name;
+  visible.value = true;
+  nodeAction.value = action
+  if (nodeType === 'EDGE') {
+    formData.nodeParams = [
+      {
+        disabled: true,
+        input: "",
+        name: "terminalId",
+        type: "input"
+      },
+      ...nodeParams
+    ]
+  } else {
+    formData.nodeParams = nodeParams
+  }
+};
+
+const execute = async () => {
+  const result = await executeForm.value.validate();
+  if (result) {
+    const obj = {}
+    formData.nodeParams.forEach(item => {
+      obj[item.name] = item.input
+    })
+    const res = await flowAction({
+      action: nodeAction.value,
+      payload: obj
+    })
+    if (res.code === 200) {
+      ElMessage.success('执行成功')
+    } else {
+      ElMessage.error(res.msg)
+    }
+  }
 }
 
 onMounted(() => {
-  justLoadFlow()
-  initFlow()
-  
-  registerBeforeUnload()
+  justLoadFlow();
+  initFlow();
+  document.addEventListener("singleNodeExecution", singleNodeExecution);
+  registerBeforeUnload();
 });
 
 const operationEdge = (arr) => {
-  arr.forEach(item => {
-    newEdge(item.id)
-  })
-}
+  arr.forEach((item) => {
+    newEdge(item.id);
+  });
+};
 
 onUnmounted(() => {
-  emitter.off('changeNodeState');
-  window.removeEventListener('beforeunload', handleBeforeUnload)
-})
+  emitter.off("changeNodeState");
+  window.removeEventListener("beforeunload", handleBeforeUnload);
+  document.removeEventListener("singleNodeExecution", singleNodeExecution);
+});
 </script>
 <style lang="scss" scoped>
 .page {
@@ -606,7 +785,7 @@ onUnmounted(() => {
   .page__container {
     width: 100%;
     height: 100%;
-    position: relative; 
+    position: relative;
 
     .el-header {
       display: flex;
@@ -647,10 +826,9 @@ onUnmounted(() => {
         }
 
         .lf-node-content {
-
           .lf-node-anchor {
             display: block !important; /* 强制显示 */
-            opacity: 1 !important;     /* 取消透明度 */
+            opacity: 1 !important; /* 取消透明度 */
           }
         }
 
@@ -671,6 +849,8 @@ onUnmounted(() => {
     }
   }
 }
+
+
 </style>
 <style lang="scss">
 .node-relationship-network-popover {
@@ -694,4 +874,18 @@ onUnmounted(() => {
     overflow-y: auto;
   }
 }
+
+.el-dialog {
+    .el-input {
+      width: 200px;
+    }
+
+    .el-select {
+      width: 200px;
+    }
+
+    .el-textarea {
+      width: 200px
+    }
+}
 </style>
diff --git a/src/views/flow/nodes/common/serviceNode.vue b/src/views/flow/nodes/common/serviceNode.vue
index d907976..3fa852d 100644
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/src/views/flow/nodes/common/serviceNode.vue
@@ -34,6 +34,7 @@
       :icon="props.properties.icon"
       :nodeId="props.model.id"
       :nodeProperties="props.properties"
+      :nodeType="props.properties.nodeType || 'NONE'"
       :nodeName="props.properties.name"
       :nodeDesc="props.properties.desc"
       :zoom-state="nodeZoom"
diff --git a/src/views/flow/nodes/common/startNode.vue b/src/views/flow/nodes/common/startNode.vue
index 23debd8..e593359 100644
--- a/src/views/flow/nodes/common/startNode.vue
+++ b/src/views/flow/nodes/common/startNode.vue
@@ -23,7 +23,7 @@
             :content="nodeZoom ? '缩小' : '放大'"
             placement="top"
           >
-            <el-button circle size="small" @click="zoom">
+            <el-button circle @click="zoom">
               <el-icon>
                 <ZoomOut v-if="nodeZoom" />
                 <ZoomIn v-else />
@@ -262,6 +262,13 @@ defineExpose({
           margin-left: 12px;
         }
       }
+
+      .right {
+        .el-button {
+          border: none;
+          font-size: 24px;
+        }
+      }
     }
 
     .subTitle {