From 6aabfd0832b729655fa87eb7d5473d4fdc33898f Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Fri, 1 Aug 2025 17:41:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8t-ui-plus=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E5=9B=BE=E5=83=8F=E6=BA=90=E5=92=8C=E5=A4=9A=E5=9B=BE?=
 =?UTF-8?q?=E9=87=87=E9=9B=86=E6=A8=A1=E5=9D=97=E5=86=85=E5=AE=B9=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/src/components/Button/index.ts   |   4 +-
 .../components/Button/src/addItemButton.tsx   | 105 +++
 src/renderer/src/components/Form/dsSwitch.tsx |  35 +-
 src/renderer/src/components/Form/formList.tsx | 141 ++++
 src/renderer/src/components/Form/index.ts     |   8 +-
 .../src/components/Form/inputNumber.tsx       |  14 +-
 src/renderer/src/styles/ds-dialog.scss        |  12 +-
 src/renderer/src/styles/ds-from.scss          |  62 +-
 src/renderer/src/styles/global.scss           |   2 +
 src/renderer/src/styles/t-element-plus.scss   |   2 +-
 .../FlowImagesCapture/imageNodeModel copy.vue | 270 --------
 .../FlowImagesCapture/imageNodeModel.scss     |   0
 .../FlowImagesCapture/imageNodeModel.vue      |  89 ++-
 .../multiImageNodeModel copy.vue              | 328 ---------
 .../multiImageNodeModel.scss                  |  40 --
 .../FlowImagesCapture/multiImageNodeModel.vue | 632 +++++++++++-------
 .../views/Design/Workflow/logicFlowView.vue   |  10 +-
 17 files changed, 760 insertions(+), 994 deletions(-)
 create mode 100644 src/renderer/src/components/Button/src/addItemButton.tsx
 create mode 100644 src/renderer/src/components/Form/formList.tsx
 delete mode 100644 src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel copy.vue
 delete mode 100644 src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.scss
 delete mode 100644 src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel copy.vue
 delete mode 100644 src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.scss

diff --git a/src/renderer/src/components/Button/index.ts b/src/renderer/src/components/Button/index.ts
index ad8d554..1d45107 100644
--- a/src/renderer/src/components/Button/index.ts
+++ b/src/renderer/src/components/Button/index.ts
@@ -2,9 +2,11 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-08 09:43:27
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-08 09:47:01
+ * @LastEditTime: 2025-07-30 17:28:42
  * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Button\index.ts
  * @Description:
  */
 import button from './src/button.tsx'
+import addItemButton from './src/addItemButton.tsx'
 export const DSButton = button
+export const DSAddItemButton = addItemButton
\ No newline at end of file
diff --git a/src/renderer/src/components/Button/src/addItemButton.tsx b/src/renderer/src/components/Button/src/addItemButton.tsx
new file mode 100644
index 0000000..b121043
--- /dev/null
+++ b/src/renderer/src/components/Button/src/addItemButton.tsx
@@ -0,0 +1,105 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-07-29 10:48:37
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-07-31 14:07:39
+ * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\Button.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { defineComponent, h, computed, normalizeClass } from 'vue'
+import addIcon from '@/assets/images/common/table_addBtn.png'
+export interface DsAddItemButtonProps {
+  /**
+   *  Button 前面的文案
+   */
+  // prefixRender?: (...ags: any[]) => any // 前缀内容 render渲染
+  /**
+   *  Button 后面的文案
+   */
+  suffixRender?: (...ags: any[]) => any // 后缀内容 render渲染
+  /**
+   *  Button 后面的文案
+   */
+  suffixText?: string
+  /**
+   *  container容器样式
+   */
+  iconClassName?: string
+
+  /**
+   * 整体容器样式
+   */
+  componentClassName?: string
+}
+
+export default defineComponent({
+  name: 'DSSwitch',
+  props: {
+    suffixRender: {
+      type: Function as DsAddItemButtonProps['suffixRender'],
+      default: null
+    },
+    suffixText: {
+      type: String,
+      default: ''
+    },
+    iconClassName: {
+      type: String,
+      default: ''
+    },
+    componentClassName: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, { emit, attrs }) {
+    const { iconClassName, componentClassName, ...restProps } = props
+    // 处理自定义类名和 Vue 的 class 属性
+    const componentClasses = computed(() => {
+      const classes = [
+        'ds-formItem-add-btn cursor-pointer px-[10px] flex items-center',
+        componentClassName
+      ]
+      // 处理 Vue 的 class 属性（支持字符串/数组/对象）
+      if (attrs.class) {
+        classes.push(normalizeClass(attrs.class))
+      }
+      return classes.filter((c) => c).join(' ')
+    })
+    // 处理自定义类名和 Vue 的 class 属性
+    const iconClasses = computed(() => {
+      const classes = ['w-[16px] h-[16px] mr-2', iconClassName]
+      // 处理 Vue 的 class 属性（支持字符串/数组/对象）
+      if (attrs.class) {
+        classes.push(normalizeClass(attrs.class))
+      }
+      return classes.filter((c) => c).join(' ')
+    })
+
+    // 渲染自定义前缀内容
+    // const renderPrefix = () => {
+    //   if (props.prefixRender) {
+    //     return props?.prefixRender?.()
+    //   }
+    //   return null
+    // }
+    // 渲染自定义后缀内容
+    const renderSuffix = () => {
+      if (props.suffixRender) {
+        return props?.suffixRender?.()
+      }
+      if (props.suffixText) {
+        return props.suffixText
+      }
+      return '添加数据'
+    }
+
+    return () => (
+      <div className={componentClasses.value}>
+        {/* {renderPrefix()} */}
+        <img src={addIcon} className={iconClasses.value} />
+        {renderSuffix()}
+      </div>
+    )
+  }
+})
diff --git a/src/renderer/src/components/Form/dsSwitch.tsx b/src/renderer/src/components/Form/dsSwitch.tsx
index fb4d8e0..a68441d 100644
--- a/src/renderer/src/components/Form/dsSwitch.tsx
+++ b/src/renderer/src/components/Form/dsSwitch.tsx
@@ -2,43 +2,24 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-29 10:48:37
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-30 14:32:45
+ * @LastEditTime: 2025-07-31 10:09:54
  * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\switch.tsx
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: Switch 组件
  */
 import { defineComponent, h, withDefaults, computed, normalizeClass } from 'vue'
 import { ElSwitch } from 'element-plus'
 import type { SwitchProps } from 'element-plus'
-import { spawn } from 'child_process'
 
 interface DsSwitchProps extends SwitchProps {
-  /**
-   *  switch 前面的文案
-   */
   label?: string
-
-  /**
-   *  switch 前面的文案
-   */
   prefixRender?: (...ags: any[]) => any // 前缀内容 render渲染
-  /**
-   *  switch 后面的文案
-   */
   suffixRender?: (...ags: any[]) => any // 后缀内容 render渲染
-
-  /**
-   *  container容器样式
-   */
-  containerClassName?: string
-
-  /**
-   * 整体容器样式
-   */
-  componentClassName?: string
+  containerClassName?: string // container容器样式
+  componentClassName?: string // 整体容器样式
 }
 
 export default defineComponent({
-  name: 'DsSwitch',
+  name: 'DSSwitch',
   props: {
     modelValue: {
       type: [Boolean, String, Number],
@@ -93,11 +74,7 @@ export default defineComponent({
       if (props.prefixRender) {
         return props?.prefixRender?.()
       }
-      return (
-        <span class="ds-switch-label">
-          {props?.label}
-        </span>
-      )
+      return <span class="ds-switch-label">{props?.label}</span>
     }
     // 渲染自定义后缀内容
     const renderSuffix = () => {
diff --git a/src/renderer/src/components/Form/formList.tsx b/src/renderer/src/components/Form/formList.tsx
new file mode 100644
index 0000000..54a3a92
--- /dev/null
+++ b/src/renderer/src/components/Form/formList.tsx
@@ -0,0 +1,141 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-07-31 10:03:44
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-08-01 17:04:27
+ * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\formList.tsx
+ * @Description: 定义 formList 组件
+ */
+//
+import { defineComponent, getCurrentInstance, ComputedRef, computed, toRaw } from 'vue'
+import type { FormTypes } from '@wocwin/t-ui-plus'
+import { TForm } from '@wocwin/t-ui-plus'
+import { ElMessage } from 'element-plus'
+import { generateId } from '@/utils/plugins/random'
+import { DSAddItemButton } from '@/components/Button'
+import { Delete } from '@element-plus/icons-vue'
+
+// 定义组件属性类型（保留所有 ElInputNumber 属性）
+type DSFormListProps = {
+  formConfig: FormTypes
+  prefixRender?: (...ags: any[]) => any // 前置内容 render渲染
+  suffixRender?: (...ags: any[]) => any // 后置内容 render渲染
+  min?: number
+  max?: number
+}
+
+export default defineComponent({
+  name: 'DSFormList',
+  props: {
+    formConfig: {
+      type: Object as FormTypes,
+      default: {}
+    },
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props: DSFormListProps, { emit, slots, attrs }) {
+    const tFormAttrs = (index) => {
+      const { formConfig, ...propsRest } = props
+      const refId = formConfig.ref + index
+      const finalOpts = {
+        ...formConfig,
+        ref: refId,
+        modelValue: refId,
+        formData: props.modelValue[index]
+      }
+      return { ...finalOpts, formOpts: finalOpts }
+    }
+
+    const addItem = () => {
+      const list = props.modelValue
+      if (list.length >= props.max) {
+        ElMessage.warning(`最多只能添加 ${props.max} 项`)
+        return
+      }
+      list.push({ formItemsUuid: generateId() })
+      emit(
+        'update:modelValue',
+        list.map(({ formItemsUuid, ...rest }) => rest)
+      )
+    }
+
+    const removeItem = (formItem, index) => {
+      const list = props.modelValue
+      if (list.length <= props.min) {
+        ElMessage.warning(`至少需要保留 ${props.min} 项`)
+        return
+      }
+      console.log('removeItem', formItem, index)
+      list.splice(index, 1)
+      emit('update:modelValue', list)
+    }
+
+    const moveItem = (index, direction) => {
+      const list = props.modelValue
+      if (
+        (direction === 'up' && index === 0) ||
+        (direction === 'down' && index === list.length - 1)
+      ) {
+        return
+      }
+
+      const newIndex = direction === 'up' ? index - 1 : index + 1
+      const item = list.splice(index, 1)[0]
+      list.splice(newIndex, 0, item)
+      emit('update:modelValue', list)
+    }
+    // const canAdd = list.length < props.max
+    // const canRemove = list.length > props.min
+    // 渲染自定义前缀内容
+    const renderPrefix = (formItem, index) => {
+      // props?.suffixRender &&
+      if (props.prefixRender) {
+        return props?.prefixRender?.()
+      }
+      return (
+        <div className="flex items-center">
+          <span>
+            {props.formConfig?.title}
+            {Number(index) + 1}
+          </span>
+          <div
+            onClick={() => removeItem(formItem, index)}
+            class="flex items-center justify-center ds-dialog-formList-delete"
+          >
+            <Delete />
+          </div>
+        </div>
+      )
+    }
+    return () => (
+      <div class="ds-form-list-comp">
+        <ul class="form-list">
+          {props.modelValue
+            .map((item) => ({
+              ...item,
+              formItemsUuid: item?.id || generateId()
+            }))
+            .map((formItem, index) => (
+              <li class="form-item-card" key={formItem.formItemsUuid}>
+                {renderPrefix(formItem, index)}
+                <TForm className="ds-form-list-comp-form" {...tFormAttrs(index)}></TForm>
+              </li>
+            ))}
+        </ul>
+        <DSAddItemButton {...tFormAttrs.value} onClick={() => addItem()}></DSAddItemButton>
+      </div>
+    )
+  }
+})
diff --git a/src/renderer/src/components/Form/index.ts b/src/renderer/src/components/Form/index.ts
index a07a003..adcb71e 100644
--- a/src/renderer/src/components/Form/index.ts
+++ b/src/renderer/src/components/Form/index.ts
@@ -2,11 +2,13 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-28 10:07:16
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-30 11:29:49
+ * @LastEditTime: 2025-07-31 13:47:27
  * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\index.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: 统一导出表单组件
  */
 import inputNumber from './inputNumber'
 import dsSwitch from './dsSwitch'
+import formList from './formList'
 export const DSInputNumber = inputNumber
-export const DsSwitch = dsSwitch
\ No newline at end of file
+export const DSSwitch = dsSwitch
+export const DSFormList = formList
diff --git a/src/renderer/src/components/Form/inputNumber.tsx b/src/renderer/src/components/Form/inputNumber.tsx
index ce58812..bdc4aeb 100644
--- a/src/renderer/src/components/Form/inputNumber.tsx
+++ b/src/renderer/src/components/Form/inputNumber.tsx
@@ -2,9 +2,9 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-28 16:45:11
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-30 14:30:36
+ * @LastEditTime: 2025-07-31 13:12:10
  * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\inputNumber.tsx
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: inputNumber
  */
 import { defineComponent, getCurrentInstance, ComputedRef, computed } from 'vue'
 import { ElInputNumber, inputNumberProps, InputNumberProps } from 'element-plus'
@@ -16,6 +16,7 @@ type DSInputNumberProps = InputNumberProps & {
   // 可在此处添加自定义属性
   prefixRender?: (...ags: any[]) => any // 前置内容 render渲染
   suffixRender?: (...ags: any[]) => any // 后置内容 render渲染
+  isHasSuffix?: boolean // 是否有后置内容
 }
 
 export default defineComponent({
@@ -27,6 +28,10 @@ export default defineComponent({
     controlsPosition: {
       type: String,
       default: 'right'
+    },
+    isHasSuffix: {
+      type: Boolean,
+      default: true
     }
   },
   emits: [
@@ -38,7 +43,7 @@ export default defineComponent({
     'input'
   ] as unknown as InputNumberEmits,
 
-  setup(props: CustomInputNumberProps, { emit, slots, attrs }) {
+  setup(props: DSInputNumberProps, { emit, slots, attrs }) {
     const instance = getCurrentInstance()!
 
     // 处理自定义逻辑
@@ -74,6 +79,9 @@ export default defineComponent({
     // 渲染自定义后缀内容
     const renderSuffix = () => {
       // props?.suffixRender &&
+      if(!props.isHasSuffix){
+        return null
+      }
       if (props.suffixRender) {
         return props?.suffixRender?.()
       }
diff --git a/src/renderer/src/styles/ds-dialog.scss b/src/renderer/src/styles/ds-dialog.scss
index c8860f3..b61e4fd 100644
--- a/src/renderer/src/styles/ds-dialog.scss
+++ b/src/renderer/src/styles/ds-dialog.scss
@@ -35,15 +35,5 @@
   .el-dialog__header {
     height: var(--ds-dialog-header-height);
   }
-  // 弹窗图标
-  .ds-dialog-icon-box {
-    width: 48px;
-    height: 32px;
-    background-color: var(--ds-dialog-icon-background-color);
-    font-size: 14px !important;
-    cursor: pointer;
-    svg {
-      width: 28px;
-    }
-  }
+
 }
diff --git a/src/renderer/src/styles/ds-from.scss b/src/renderer/src/styles/ds-from.scss
index 0a74b14..a10c0c8 100644
--- a/src/renderer/src/styles/ds-from.scss
+++ b/src/renderer/src/styles/ds-from.scss
@@ -1,5 +1,10 @@
 // 表单弹框
 .ds-dialog-form-container {
+  padding: 24px 12px 24px 24px;
+
+  .ds-dialog-form-footer {
+    margin-right: 12px;
+  }
   .el-select__wrapper {
     background: var(--ds-form-item-background-color) !important;
     .el-select__selected-item {
@@ -16,36 +21,73 @@
     }
   }
 
+  /* 适配表单间距 */
+  .t-form {
+    gap: 16px 0;
+  }
   .el-form-item--large {
-    margin-bottom: 16px;
-    //   margin-right: 12px !important;
+    margin-bottom: 0 !important;
+    .el-form-item__content {
+      width: calc(100% - 2px);
+    }
+  }
+  // proFormList
+  .ds-form-list-comp-form{
+    width: calc(100% + 12px);
   }
   .el-form-item--large .el-form-item__content {
     line-height: 32px;
-    height: 32px;
+    // height: 32px;
   }
   .el-select--large .el-select__wrapper {
-    min-height: 32px;
+    min-height: var(--ds-form-item-height);
     padding: 4px 16px;
   }
   // el-switch
   .el-switch--large .el-switch__core {
     border-radius: 16px;
     height: 20px;
-    line-height: 20;
+    line-height: 20px;
     min-width: 40px;
     width: 40px;
   }
+  .ds-switch-box{
+    height: var(--ds-form-item-height);
+  }
+  // 重置输入框样式
+  .el-input__wrapper {
+    background: var(--ds-form-item-background-color);
+  }
 }
 
-.el-input__wrapper {
-  background: var(--ds-form-item-background-color) !important;
+// 常规字体
+.ds-form-normal-text {
+  color: var(--ds-color-info);
 }
 // 描述字体
 .ds-form-des-text {
   color: var(--ds-des-text-1);
 }
-// 描述字体
-.ds-form-normal-text {
-  color: var(--ds-color-info);
+
+// 弹窗图标
+.ds-dialog-icon-box {
+  width: 48px;
+  height: 32px;
+  background-color: var(--ds-dialog-icon-background-color);
+  font-size: 14px !important;
+  cursor: pointer;
+  svg {
+    width: 28px;
+  }
+}
+// formList删除按钮
+.ds-dialog-formList-delete {
+  width: 48px;
+  height: 32px;
+  font-size: 14px !important;
+  cursor: pointer;
+  color: var(--ds-light-1);
+  svg {
+    width: 18px;
+  }
 }
diff --git a/src/renderer/src/styles/global.scss b/src/renderer/src/styles/global.scss
index 4e91b28..07ae810 100644
--- a/src/renderer/src/styles/global.scss
+++ b/src/renderer/src/styles/global.scss
@@ -29,11 +29,13 @@
   --ds-bg-color-light-5: #565656; // 背景色
   // #4E5969
   --ds-light-0: #00b429; // 浅色1
+  --ds-light-1: #F53F3E; // 浅色2
   --ds-des-text-1: #86909c; // 描述色8
   --ds-border-width: 1px; // 边框宽度
   --ds-border-color: #4e5969; // 边框色
   --ds-border-style: solid; // 边框样式
   --ds-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); // 阴影
+  --ds-form-item-height: 32px; // 边框色
 
   // --ds-light-2: #eaeaea; // 浅色2
   // --ds-light-3: #dcdcdc; // 浅色3
diff --git a/src/renderer/src/styles/t-element-plus.scss b/src/renderer/src/styles/t-element-plus.scss
index 5a9bd7b..28ddc43 100644
--- a/src/renderer/src/styles/t-element-plus.scss
+++ b/src/renderer/src/styles/t-element-plus.scss
@@ -97,7 +97,7 @@
   margin-left: 0px;
 }
 .t-form .t-margin-top-5 {
-  margin-top: 5px;
+  margin-top: 0px; // 重置此样式
 }
 .t-form .el-input-number .el-input .el-input__inner {
   text-align: left;
diff --git a/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel copy.vue b/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel copy.vue
deleted file mode 100644
index d543128..0000000
--- a/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel copy.vue	
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
-  <t-layout-page>
-    <t-layout-page-item>
-      <t-form
-        ref="TFormDemo"
-        v-model="formOpts.ref"
-        :formOpts="formOpts"
-        :widthSize="2"
-        @handleEvent="handleEvent"
-      />
-    </t-layout-page-item>
-  </t-layout-page>
-</template>
-
-<script setup lang="tsx">
-import { ref, reactive } from "vue"
-// 获取ref
-const TFormDemo = ref<HTMLElement | any>(null)
-const table = {
-  data: [
-    { id: 1, code: "1111", codeName: "供应商1", mobile: "13011111111", contact: "张三" },
-    { id: 2, code: "2222", codeName: "供应商2", mobile: "13022222222", contact: "李四" },
-    { id: 3, code: "3333", codeName: "供应商3", mobile: "13033333333", contact: "王五" },
-    { id: 4, code: "4444", codeName: "供应商4", mobile: "13044444444", contact: "赵六" },
-    { id: 5, code: "5555", codeName: "供应商5", mobile: "13055555555", contact: "钱七" },
-    { id: 6, code: "6666", codeName: "供应商6", mobile: "13066666666", contact: "孙八" },
-    { id: 7, code: "7777", codeName: "供应商7", mobile: "13077777777", contact: "周九" },
-    { id: 8, code: "8888", codeName: "供应商8", mobile: "13088888888", contact: "吴十" },
-    { id: 9, code: "9999", codeName: "供应商9", mobile: "13099999999", contact: "郑十一" }
-  ],
-  columns: [
-    { label: "供应商编号", width: "100px", prop: "code" },
-    { label: "供应商名称", width: "149px", prop: "codeName" },
-    { label: "负责人", width: "149px", prop: "contact" },
-    { label: "电话号码", width: "110px", prop: "mobile" }
-  ]
-}
-// 提交formOpts.ref 方式form表单
-const submitForm = () => {
-  formOpts.ref.validate(valid => {
-    console.log(88, valid)
-    console.log(77, formOpts.formData)
-    if (!valid) return
-    console.log("最终数据", formOpts.formData)
-  })
-}
-// 重置form表单
-const resetForm = () => {
-  TFormDemo.value.selfResetFields()
-}
-// 清除校验
-const clearValidate = () => {
-  TFormDemo.value.clearValidate()
-}
-// 邮箱校验
-const validatorEmail = (rule, value, callback) => {
-  if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) {
-    callback(new Error(rule.message))
-  }
-  callback()
-}
-const formOpts = reactive<FormTypes.FormOpts>({
-  // labelPosition: 'top',
-  ref: null,
-  formData: {
-    password: null, // *用户密码
-    name: null, // *用户昵称
-    sex: null, // *性别: 0:男 1:女
-    phone: null, // 手机号码
-    createDate: null, // 创建时间
-    valDate: null, // el日期选择范围
-    wechat: null, // 微信
-    qq: null, // qq
-    email: null, // 邮箱
-    desc: null, // 描述
-    code: null, // 物料编号',
-    codeName: null, // 物料名称',
-    mobile: null // 单位名称',
-  },
-  fieldList: [
-    {
-      label: "手机号码",
-      value: "phone",
-      type: "input",
-      comp: "el-input",
-      bind: { maxlength: 11 }
-    },
-    {
-      label: "密码",
-      value: "password",
-      type: "password",
-      comp: "el-input",
-      placeholder: "请先输入手机号码",
-      bind: formData => {
-        return {
-          disabled: formData.phone ? false : true
-        }
-      }
-    },
-    { label: "昵称", value: "name", type: "input", comp: "el-input" },
-    {
-      label: "性别",
-      value: "sex",
-      type: "select-arr",
-      comp: "el-select",
-      list: "sexList",
-      arrLabel: "key",
-      arrKey: "value",
-      placeholder: "请先输入昵称",
-      bind: formData => {
-        return {
-          disabled: formData.name ? false : true
-        }
-      }
-    },
-
-    { label: "QQ", value: "qq", type: "input", comp: "el-input" },
-    {
-      label: "邮箱",
-      value: "email",
-      type: "input",
-      comp: "el-input",
-      placeholder: "请先输入QQ",
-      bind: formData => {
-        return {
-          disabled: formData.qq ? false : true
-        }
-      }
-    },
-    {
-      label: "供应商编号",
-      value: "code",
-      placeholder: "t-select-table联动使用",
-      comp: "t-select-table",
-      isSelfCom: true,
-      bind: (formData: any) => {
-        return {
-          isKeyup: true,
-          maxHeight: 400,
-          selectWidth: 500,
-          defaultSelectVal: [formData.code],
-          keywords: { label: "code", value: "code" },
-          table: table,
-          columns: table.columns
-        }
-      },
-      eventHandle: {
-        radioChange: (val: any) => radioChange(val)
-      }
-    },
-    {
-      label: "供应商名称",
-      value: "codeName",
-      placeholder: "t-select-table联动使用",
-      comp: "t-select-table",
-      isSelfCom: true,
-      bind: (formData: any) => {
-        return {
-          isKeyup: true,
-          maxHeight: 400,
-          selectWidth: 500,
-          defaultSelectVal: [formData.codeName],
-          keywords: { label: "codeName", value: "codeName" },
-          table: table,
-          columns: table.columns
-        }
-      },
-      eventHandle: {
-        radioChange: (val: any) => radioChange1(val)
-      }
-    },
-    {
-      label: "电话号码",
-      value: "mobile",
-      placeholder: "t-select-table联动使用",
-      comp: "t-select-table",
-      isSelfCom: true,
-      bind: (formData: any) => {
-        return {
-          isKeyup: true,
-          maxHeight: 400,
-          selectWidth: 500,
-          defaultSelectVal: [formData.mobile],
-          keywords: { label: "mobile", value: "mobile" },
-          table: table,
-          columns: table.columns
-        }
-      },
-      eventHandle: {
-        radioChange: (val: any) => radioChange2(val)
-      }
-    },
-    {
-      label: "描述",
-      value: "desc",
-      type: "textarea",
-      comp: "el-input",
-      widthSize: 1
-    }
-  ],
-  rules: {
-    account: [{ required: true, message: "请输入账号", trigger: "blur" }],
-    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
-    name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
-    phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
-    sex: [{ required: true, message: "请选择性别", trigger: "change" }],
-    hobby: [
-      {
-        type: "array",
-        required: true,
-        message: "请至少选择一个爱好",
-        trigger: "change"
-      }
-    ],
-    email: [
-      {
-        validator: validatorEmail,
-        message: "自定义配置校验规则",
-        trigger: "blur"
-      }
-    ]
-  },
-  operatorList: [
-    { label: "提交", bind: { type: "danger" }, fun: submitForm },
-    { label: "重置", bind: { type: "primary" }, fun: resetForm },
-    { label: "清除校验", bind: { type: "danger" }, fun: clearValidate }
-  ],
-  // 相关列表
-  listTypeInfo: {
-    hobbyList: [
-      { label: "吉他", value: "0" },
-      { label: "看书", value: "1" },
-      { label: "美剧", value: "2" },
-      { label: "旅游", value: "3" },
-      { label: "音乐", value: "4" }
-    ],
-    sexList: [
-      { key: "女", value: 1 },
-      { key: "男", value: 0 }
-    ],
-    statusList: [
-      { key: "启用", value: 1 },
-      { key: "停用", value: 0 }
-    ]
-  }
-})
-// 触发事件
-const handleEvent = (type, val) => {
-  switch (type) {
-    case "checkbox":
-      console.log("checkbox", val, type)
-      break
-  }
-}
-const radioChange = (row: any) => {
-  formOpts.formData.code = row?.code
-  formOpts.formData.codeName = row?.codeName
-  formOpts.formData.mobile = row?.mobile
-}
-const radioChange1 = (row: any) => {
-  formOpts.formData.code = row?.code
-  formOpts.formData.codeName = row?.codeName
-  formOpts.formData.mobile = row?.mobile
-}
-const radioChange2 = (row: any) => {
-  formOpts.formData.code = row?.code
-  formOpts.formData.codeName = row?.codeName
-  formOpts.formData.mobile = row?.mobile
-}
-</script>
diff --git a/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.scss b/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.vue b/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.vue
index 4a46b16..997c423 100644
--- a/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.vue
+++ b/src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.vue
@@ -2,39 +2,17 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-03 11:12:04
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-30 15:52:28
+ * @LastEditTime: 2025-08-01 09:19:24
  * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\imageNodeModel.vue
  * @Description: 图像源节点
 -->
-<template>
-  <DSDialog
-    v-model="show"
-    width="1200"
-    @close="handleClose"
-    class="settings-dialog ds-dialog"
-    title="图像源"
-  >
-    <template #default>
-      <div
-        class="imageNodeModel-form-container ds-dialog-form-container py-[24px] pl-[24px] pr-[14px]"
-      >
-        <t-module-form ref="sourceForm" titleBold :formOpts="formOpts" :submit="submit">
-          <template #footer>
-            <t-button type="primary" size="default" :time="config.buttonTimeOut">
-              <span class="px-[8px]" @click="save"> 确定 </span>
-            </t-button>
-          </template>
-        </t-module-form>
-      </div>
-    </template>
-  </DSDialog>
-</template>
-
 <script setup lang="tsx">
-// import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
 import { DSDialog } from '@/components/Dialog'
 import { config } from '@/config'
 
+defineOptions({
+  name: 'FlowImageNodeModel'
+})
 interface Props {
   /** 弹窗显隐 */
   value: boolean
@@ -115,7 +93,7 @@ const formOpts: any = reactive({
         imageSource: '本地图像', // *图片来源
         /**基础参数-本地图像字段**/
         pixelFormat: '', // *像素格式
-        captureInterval: '', // *取图间隔
+        captureInterval: null, // *取图间隔
         displayImageName: false, // *显示图像名称
         displaySaveImage: false, // *方案存图
         snInitialValue: 10, // *SN初始值
@@ -176,7 +154,7 @@ const formOpts: any = reactive({
         {
           label: '取图间隔',
           value: 'captureInterval',
-          placeholder: '测试自定义组件1',
+          placeholder: '请输入取图间隔',
           comp: 'DSInputNumber',
           isSelfCom: true,
           bind: {
@@ -193,7 +171,7 @@ const formOpts: any = reactive({
         // 图像源为本地图像
         {
           value: 'displayImageName',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 1,
           bind: {
@@ -206,7 +184,7 @@ const formOpts: any = reactive({
         // 图像源为本地图像
         {
           value: 'displaySaveImage',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 1,
           bind: {
@@ -219,7 +197,7 @@ const formOpts: any = reactive({
             return data.imageSource === '本地图像'
           }
         },
-        // 图像源为相机、sdk
+        // 图像源为相机
         {
           labelRender: () => {
             return (
@@ -239,10 +217,10 @@ const formOpts: any = reactive({
           arrKey: 'value',
           placeholder: '请选择关联相机',
           isHideItem: (data) => {
-            return data.imageSource !== '本地图像'
+            return data.imageSource === '相机'
           }
         },
-        // 图像源为相机、sdk
+        // 图像源为相机
         {
           label: '控制曝光',
           value: 'controlExposure',
@@ -250,10 +228,10 @@ const formOpts: any = reactive({
           comp: 'el-input',
           bind: { maxlength: 100 },
           isHideItem: (data) => {
-            return data.imageSource !== '本地图像'
+            return data.imageSource === '相机'
           }
         },
-        // 图像源为相机、sdk
+        // 图像源为相机
         {
           label: '控制增益',
           value: 'controlGain',
@@ -261,7 +239,7 @@ const formOpts: any = reactive({
           comp: 'el-input',
           bind: { maxlength: 100 },
           isHideItem: (data) => {
-            return data.imageSource !== '本地图像'
+            return data.imageSource === '相机'
           }
         },
         // 通用字段
@@ -286,7 +264,7 @@ const formOpts: any = reactive({
         // 图像源为相机、sdk
         {
           value: 'outputMono8',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 1,
           bind: {
@@ -310,7 +288,7 @@ const formOpts: any = reactive({
         // 通用字段
         {
           value: 'stitchingEnabled',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 1,
           bind: {
@@ -364,7 +342,7 @@ const formOpts: any = reactive({
         // 通用字段
         {
           value: 'triggerClear',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 1,
           bind: {
@@ -425,7 +403,7 @@ const formOpts: any = reactive({
       fieldList: [
         {
           value: 'autoSwitch',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 3,
           bind: {
@@ -437,7 +415,7 @@ const formOpts: any = reactive({
         },
         {
           value: 'stopOnLast',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 3,
           bind: {
@@ -449,7 +427,7 @@ const formOpts: any = reactive({
         },
         {
           value: 'characterTriggerFilter',
-          comp: 'DsSwitch',
+          comp: 'DSSwitch',
           isSelfCom: true,
           widthSize: 1,
           bind: {
@@ -481,7 +459,26 @@ const formOpts: any = reactive({
   }
 })
 </script>
-
-<style scoped lang="scss">
-@import url('./imageNodeModel.scss');
-</style>
+<template>
+  <DSDialog
+    v-model="show"
+    width="1200"
+    @close="handleClose"
+    class="settings-dialog ds-dialog"
+    title="图像源"
+  >
+    <template #default>
+      <div class="imageNodeModel-form-container ds-dialog-form-container">
+        <t-module-form ref="sourceForm" titleBold :formOpts="formOpts" :submit="submit">
+          <template #footer>
+            <div class="ds-dialog-form-footer">
+              <t-button type="primary" size="default" :time="config.buttonTimeOut">
+                <span class="px-[8px]" @click="save"> 确定 </span>
+              </t-button>
+            </div>
+          </template>
+        </t-module-form>
+      </div>
+    </template>
+  </DSDialog>
+</template>
diff --git a/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel copy.vue b/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel copy.vue
deleted file mode 100644
index c1ca8df..0000000
--- a/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel copy.vue	
+++ /dev/null
@@ -1,328 +0,0 @@
-<script setup lang="ts">
-/**
- * @交互说明
- * 1. 开始弹出设备选择对话框
- * 2. 选择本地图像后，展示相关内容
- * 3. 选择相机后，展示相关内容
- */
-defineOptions({
-  name: 'FlowMultiImageNodeModel'
-})
-import { DSButton } from '@/components/Button'
-import { DSDialog } from '@/components/Dialog'
-import { RefreshRight } from '@element-plus/icons-vue'
-interface Props {
-  /** import DeviceDialog from './deviceDialog.vue';
-弹窗显隐 */
-  value: boolean
-}
-interface Emits {
-  (e: 'update:value', val: boolean): void
-}
-const props = withDefaults(defineProps<Props>(), {
-  value: false
-})
-const emit = defineEmits<Emits>()
-console.log(props.value)
-const show = computed({
-  get() {
-    Object.assign(deviceBars, deviceList)
-    return props.value
-  },
-  set(val: boolean) {
-    emit('update:value', val)
-  }
-})
-const isDeviceDialog = ref(false)
-// 中间tab
-const deviceTab = ref('') // device/receive/send/heartbeat/response
-const deviceBars = ref([])
-
-const imageSourceOptions = [
-  {
-    value: '本地图像',
-    label: '本地图像'
-  },
-  {
-    value: '相机',
-    label: '相机'
-  }
-]
-
-const options = [
-  {
-    value: 'DPS2',
-    label: 'DPS2'
-  },
-  {
-    value: 'MV-AP1024-2T',
-    label: 'MV-AP1024-2T'
-  },
-  {
-    value: 'MV-LEVD',
-    label: 'MV-LEVD'
-  },
-  {
-    value: 'VB2200',
-    label: 'VB2200'
-  },
-  {
-    value: 'VC3000(Light)',
-    label: 'VC3000(Light)'
-  },
-  {
-    value: 'VB3000(IO)',
-    label: 'VB3000(IO)'
-  },
-  {
-    value: 'VC4000',
-    label: 'VC4000'
-  },
-  {
-    value: 'GPIO',
-    label: 'GPIO'
-  },
-  {
-    value: 'VB2230',
-    label: 'VB2230'
-  },
-  {
-    value: 'VC2000/2100',
-    label: 'VC2000/2100'
-  },
-  {
-    value: 'VC3000H/X',
-    label: 'VC3000H/X'
-  },
-  {
-    value: 'MV-LEVD-200',
-    label: 'MV-LEVD-200'
-  },
-  {
-    value: 'LE200',
-    label: 'LE200'
-  },
-  {
-    value: 'VC5000',
-    label: 'VC5000'
-  }
-]
-// 设备列表
-const deviceList = ref([
-  {
-    name: '1 Light-1',
-    enabled: false,
-    info: {
-      imageSource: '',
-      deviceName: '',
-      serialPort: '',
-      baudRate: '',
-      dataBits: '',
-      checkBit: '',
-      stopBit: '',
-      outputType: '',
-      sendInterval: '',
-      IOPort: '',
-      delayTime: '',
-      shakeTime: '',
-      devices: '',
-      reconnect: false,
-      polling: false,
-      reversal: false,
-      state: false,
-      endInfo: '',
-      channelBrightness1: 0,
-      channelBrightness2: 0,
-      channelBrightness3: 0,
-      channelBrightness4: 0,
-      channelBrightness5: 0,
-      channelBrightness6: 0,
-      pollingInterval: 0,
-      lightChannel: 0,
-      lightChannelStatus: '',
-      tableData: []
-    }
-  },
-  { name: '2 Light-2', enabled: false }
-])
-// 设备信息表单
-const formDeviceInfo = reactive({
-  imageSource: '本地图像',
-  deviceName: '',
-  imageConfigs: [
-    {
-      distributionAngle: 90,
-      illuminationAngle: 0
-    }
-  ],
-
-  reconnect: false,
-  polling: false,
-
-  outputPolarity: '', // 输出极性
-  sendInterval: '',
-  IOPort: '',
-  delayTime: '', // IO延迟时间
-  controlDelayTime: '', // IO控制延迟时间
-  flickerDelayTime: '', // 频闪延迟时间
-
-  endInfo: '',
-  channelBrightness1: 0,
-  channelBrightness2: 0
-})
-
-// 添加图像源配置项
-const handleAddImageConfig = () => {
-  formDeviceInfo.imageConfigs.push({
-    distributionAngle: 0,
-    illuminationAngle: 0
-  })
-}
-
-const handleDelImageConfig = (index) => {
-  formDeviceInfo.imageConfigs.splice(index, 1)
-}
-// 处理对话框关闭事件
-const handleClose = () => {}
-</script>
-
-<template>
-  <!-- 控制器管理弹框 -->
-  <DSDialog
-    title="多图采集"
-    v-model="show"
-    width="1200"
-    class="controllerManagement-dialog ds-dialog"
-    @close="handleClose"
-  >
-    <div class="controllerManagement-container ds-dialog-form-container">
-      <div class="controllerManagement-content">
-        <el-form label-width="auto" size="default" :model="formDeviceInfo" style="max-width: 100%">
-          <el-row :gutter="24">
-            <el-col :span="8">
-              <el-form-item label="图像源" label-position="top">
-                <el-select
-                  v-model="formDeviceInfo.imageSource"
-                  placeholder="请选择"
-                  class="device-select"
-                >
-                  <el-option
-                    v-for="item in imageSourceOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8" v-if="formDeviceInfo.imageSource === '相机'">
-              <el-form-item label="关联相机 (请先在“相机管理”中新建相机）" label-position="top">
-                <el-select
-                  v-model="formDeviceInfo.imageSource"
-                  placeholder="请选择"
-                  class="device-select"
-                >
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="取图数量 (上限不超过8)" label-position="top">
-                <div class="flex">
-                  <el-input-number
-                    class="flex-1 w-full"
-                    v-model="formDeviceInfo.deviceName"
-                    :min="1"
-                    :max="8"
-                    controls-position="right"
-                    @change="handleChange"
-                  >
-                  </el-input-number>
-                  <span>
-                    <el-icon class="el-input__icon"><Folder /></el-icon>
-                  </span>
-                </div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8" v-if="formDeviceInfo.imageSource === '本地图像'">
-              <el-form-item label="图像路径" label-position="top">
-                <el-input v-model="formDeviceInfo.deviceName">
-                  <template #suffix>
-                    <el-icon class="el-input__icon"><Folder /></el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="24" v-if="formDeviceInfo.imageSource === '本地图像'">
-            <el-col :span="24">
-              <el-form-item
-                v-for="(domain, index) in formDeviceInfo.imageConfigs"
-                :key="domain.key"
-                label-position="top"
-                label=""
-                :prop="'imageConfigs.' + index + '.value'"
-              >
-                <template #label>
-                  <div class="flex items-center">
-                    <p>{{ '图像配置' + (index + 1) }}</p>
-                    <!-- // TODO 删除按钮 -->
-                    <DSButton
-                      class="mx-[16px]"
-                      type="text"
-                      @click.prevent="handleDelImageConfig(index)"
-                    >
-                      <el-icon class="el-input__icon"><Delete /></el-icon>
-                    </DSButton>
-                  </div>
-                </template>
-                <div class="w-full">
-                  <el-row :gutter="24">
-                    <el-col :span="8">
-                      <el-form-item label="分布角" label-position="top">
-                        <el-input-number
-                          v-model="domain.distributionAngle"
-                          :min="0"
-                          :max="360"
-                          controls-position="right"
-                          @change="handleChange"
-                        />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="照射角" label-position="top">
-                        <el-input-number
-                          v-model="domain.illuminationAngle"
-                          :min="0"
-                          :max="360"
-                          controls-position="right"
-                          @change="handleChange"
-                        />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                </div>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <div class="table-add-btn" @click="handleAddImageConfig">
-            <img
-              src="@/assets/images/common/table_addBtn.png"
-              alt=""
-              class="w-[16px] h-[16px] mr-2"
-            />添加数据
-          </div>
-        </el-form>
-      </div>
-    </div>
-  </DSDialog>
-</template>
-
-<style scoped lang="scss">
-@import url('./multiImageNodeModel.scss');
-</style>
diff --git a/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.scss b/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.scss
deleted file mode 100644
index 95aafd7..0000000
--- a/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/* 弹框整体样式 */
-.controllerManagement-container {
-  position: relative;
-  width: 100%;
-  height: 766px;
-  box-sizing: border-box;
-  display: flex;
-
-  .controllerManagement-content {
-    flex: 1;
-    height: 100%;
-    overflow: auto;
-    box-sizing: border-box;
-    padding: 16px 24px 24px;
-
-    .form-device-btn {
-      width: 80px;
-      padding: 0 12px;
-    }
-  }
-
-  .custom-table {
-    .customList-table {
-      width: 100%;
-      height: 190px;
-      background: #363940;
-    }
-  }
-
-  .table-add-btn {
-    /* 按钮样式 */
-    box-sizing: border-box;
-    width: 128px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-}
diff --git a/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.vue b/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.vue
index c1ca8df..95b0366 100644
--- a/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.vue
+++ b/src/renderer/src/views/Design/FlowImagesCapture/multiImageNodeModel.vue
@@ -1,20 +1,26 @@
-<script setup lang="ts">
-/**
- * @交互说明
- * 1. 开始弹出设备选择对话框
- * 2. 选择本地图像后，展示相关内容
- * 3. 选择相机后，展示相关内容
- */
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-07-03 11:12:04
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-08-01 17:27:00
+ * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\imageNodeModel.vue
+ * @Description: 图像源节点
+-->
+<script setup lang="tsx">
+// import ThemeSwitcher from '@/components/Theme/themeSwitcher.vue'
+import { DSDialog } from '@/components/Dialog'
+import { DSAddItemButton } from '@/components/Button'
+import { config } from '@/config'
+import { Folder } from '@element-plus/icons-vue'
+// import { DsFormList } from '@/components/Form'
 defineOptions({
   name: 'FlowMultiImageNodeModel'
 })
-import { DSButton } from '@/components/Button'
-import { DSDialog } from '@/components/Dialog'
-import { RefreshRight } from '@element-plus/icons-vue'
+
 interface Props {
-  /** import DeviceDialog from './deviceDialog.vue';
-弹窗显隐 */
+  /** 弹窗显隐 */
   value: boolean
+  // info?: Record<string, any>
 }
 interface Emits {
   (e: 'update:value', val: boolean): void
@@ -23,61 +29,33 @@ const props = withDefaults(defineProps<Props>(), {
   value: false
 })
 const emit = defineEmits<Emits>()
-console.log(props.value)
+
+// 处理对话框关闭事件
+const handleClose = () => {
+  // emits('close');
+}
+
 const show = computed({
   get() {
-    Object.assign(deviceBars, deviceList)
     return props.value
   },
   set(val: boolean) {
     emit('update:value', val)
   }
 })
-const isDeviceDialog = ref(false)
-// 中间tab
-const deviceTab = ref('') // device/receive/send/heartbeat/response
-const deviceBars = ref([])
+// 获取ref
+const sourceForm: any = ref<HTMLElement | null>(null)
 
-const imageSourceOptions = [
-  {
-    value: '本地图像',
-    label: '本地图像'
-  },
-  {
-    value: '相机',
-    label: '相机'
-  }
-]
+const formActiveList = reactive([])
+// 获取最终form表单数据
+const submit = (form) => {
+  console.log(formActiveList.cameraData, '最终提交数据', form)
+}
 
-const options = [
-  {
-    value: 'DPS2',
-    label: 'DPS2'
-  },
-  {
-    value: 'MV-AP1024-2T',
-    label: 'MV-AP1024-2T'
-  },
-  {
-    value: 'MV-LEVD',
-    label: 'MV-LEVD'
-  },
-  {
-    value: 'VB2200',
-    label: 'VB2200'
-  },
-  {
-    value: 'VC3000(Light)',
-    label: 'VC3000(Light)'
-  },
-  {
-    value: 'VB3000(IO)',
-    label: 'VB3000(IO)'
-  },
-  {
-    value: 'VC4000',
-    label: 'VC4000'
-  },
+const save = () => {
+  sourceForm.value.saveHandle()
+}
+const testList = [
   {
     value: 'GPIO',
     label: 'GPIO'
@@ -107,68 +85,329 @@ const options = [
     label: 'VC5000'
   }
 ]
-// 设备列表
-const deviceList = ref([
-  {
-    name: '1 Light-1',
-    enabled: false,
-    info: {
-      imageSource: '',
-      deviceName: '',
-      serialPort: '',
-      baudRate: '',
-      dataBits: '',
-      checkBit: '',
-      stopBit: '',
-      outputType: '',
-      sendInterval: '',
-      IOPort: '',
-      delayTime: '',
-      shakeTime: '',
-      devices: '',
-      reconnect: false,
-      polling: false,
-      reversal: false,
-      state: false,
-      endInfo: '',
-      channelBrightness1: 0,
-      channelBrightness2: 0,
-      channelBrightness3: 0,
-      channelBrightness4: 0,
-      channelBrightness5: 0,
-      channelBrightness6: 0,
-      pollingInterval: 0,
-      lightChannel: 0,
-      lightChannelStatus: '',
-      tableData: []
+
+// 图像配置参数表单
+const activeLocalImageConfig = reactive({
+  widthSize: 2, // 表单每行占据数量 默认为3
+  title: '图像配置',
+  labelPosition: 'top', // 标签对齐方式
+  ref: 'activeImageRef',
+  formData: {
+    distributionAngle: null, // *分布角
+    illuminationAngle: null // *照射角
+  },
+  fieldList: [
+    {
+      placeholder: '请输入分布角',
+      label: '分布角',
+      value: 'distributionAngle',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: -360,
+        max: 360,
+        isHasSuffix: false
+      }
+    },
+    {
+      placeholder: '请输入照射角',
+      label: '照射角',
+      value: 'illuminationAngle',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: -360,
+        max: 360,
+        isHasSuffix: false
+      }
     }
+  ]
+})
+// 相机动态参数表单
+const activeCamareConfig = reactive({
+  widthSize: 4, // 表单每行占据数量 默认为3
+  title: '图像配置',
+  labelPosition: 'top', // 标签对齐方式
+  ref: 'activeCameraRef',
+  formData: {
+    cameraExposure: null, // *相机曝光
+    cameraGain: null, // *相机增益
+    lightSource: null, // *光源设备 (请先在"控制管理器"中配置光源)
+    triggerDelay: null, // *触发时间(ms)
+    lightSourceChannel: null, // *光源通道
+    lightSourceBrightness: null, // *光源亮度
+    distributionAngle: null, // *分布角
+    illuminationAngle: null // *照射角
   },
-  { name: '2 Light-2', enabled: false }
-])
+  fieldList: [
+    {
+      placeholder: '请输入相机曝光',
+      label: '相机曝光',
+      value: 'cameraExposure',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: 0,
+        max: 100,
+        isHasSuffix: false
+      }
+    },
+    {
+      placeholder: '请输入相机增益',
+      label: '相机增益',
+      value: 'cameraGain',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: 0,
+        max: 100,
+        isHasSuffix: false
+      }
+    },
+    {
+      labelRender: () => {
+        return (
+          <div>
+            <span>光源设备</span>
+            <span className="ds-form-des-text">
+              (请先在<span className="ds-form-normal-text">“控制管理器”</span>中配置光源)
+            </span>
+          </div>
+        )
+      },
+      value: 'relatedCamera',
+      type: 'select-arr',
+      comp: 'el-select',
+      list: 'testList',
+      arrLabel: 'label',
+      arrKey: 'value',
+      placeholder: '请选择光源设备'
+    },
+    {
+      placeholder: '请输入触发时间',
+      label: '触发时间(ms)',
+      value: 'triggerDelay',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: 0,
+        max: 100000,
+        isHasSuffix: false
+      }
+    },
+    {
+      placeholder: '请输入光源通道',
+      label: '光源通道',
+      value: 'lightSourceChannel',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: 0,
+        max: 100,
+        isHasSuffix: false
+      }
+    },
+    {
+      placeholder: '请输入光源亮度',
+      label: '光源亮度',
+      value: 'lightSourceBrightness',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: 0,
+        max: 100,
+        isHasSuffix: false
+      }
+    },
+    {
+      placeholder: '请输入分布角',
+      label: '分布角',
+      value: 'distributionAngle',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: -360,
+        max: 360,
+        isHasSuffix: false
+      }
+    },
+    {
+      placeholder: '请输入照射角',
+      label: '照射角',
+      value: 'illuminationAngle',
+      comp: 'DSInputNumber',
+      isSelfCom: true,
+      bind: {
+        min: -360,
+        max: 360,
+        isHasSuffix: false
+      }
+    }
+  ],
+  // 相关列表
+  listTypeInfo: {
+    testList
+  }
+})
+
+// 主表单
+const formOpts: any = reactive({
+  inputConfig: {
+    title: '输入配置',
+    name: 'inputConfig',
+    disabled: true, // 表单禁用收缩
+    ref: null,
+    widthSize: 3, // 表单每行占据数量 默认为3
+    opts: {
+      labelPosition: 'top', // 标签对齐方式
+      formData: {
+        imageSource: '本地图像', // *图片来源
+        relatedCamera: '', // *关联相机设备
+        captureCount: 0, //  *取图数量
+        imageSavePath: '', //  *取图路径
+        localImages: [
+          {
+            distributionAngle: 90,
+            illuminationAngle: 0
+          },
+          {
+            distributionAngle: 190,
+            illuminationAngle: 20
+          },
+          {
+            distributionAngle: 100,
+            illuminationAngle: -78
+          },
+          {
+            distributionAngle: 26,
+            illuminationAngle: 33
+          }
+        ],
+        camaras: []
+      },
+      fieldList: [
+        /**基础参数-表单项**/
+        // 通用字段
+        {
+          label: '图像源',
+          value: 'imageSource',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'imageSourceList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择图像源',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'selectChange_imageSource')
+            }
+          },
+          bind: { clearable: false }
+        },
+        // 图像源为相机
+        {
+          labelRender: () => {
+            return (
+              <div>
+                <span>关联相机</span>
+                <span className="ds-form-des-text">
+                  (请先在<span className="ds-form-normal-text">“相机管理”</span>中新建相机)
+                </span>
+              </div>
+            )
+          },
+          value: 'relatedCamera',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'testList',
+          arrLabel: 'label',
+          arrKey: 'value',
+          placeholder: '请选择关联相机',
+          isHideItem: (data) => {
+            return data.imageSource === '相机'
+          }
+        },
+        // 通用字段
+        {
+          placeholder: '请输入取图数量',
+          labelRender: () => {
+            return (
+              <div>
+                <span>取图数量</span>
+                <span className="ds-form-des-text">（上限不超过8）</span>
+              </div>
+            )
+          },
+          value: 'captureCount',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 0,
+            max: 8
+          }
+        },
+        // 图像源为本地图像
+        {
+          label: '取图路径',
+          value: 'imageSavePath',
+          placeholder: '请输入取图路径',
+          comp: 't-input',
+          isSelfCom: true,
+          bind: {
+            suffixIcon: Folder
+          },
+          eventHandle: {
+            change: (val: any) => {}
+          },
+          isHideItem: (data) => {
+            return data.imageSource === '本地图像'
+          }
+        },
+        {
+          widthSize: 1, // 表单每行占据数量 默认为3
+          value: 'localImages',
+          comp: 'DSFormList',
+          isSelfCom: true,
+          bind: {
+            formConfig: activeLocalImageConfig
+          },
+          isHideItem: (data) => {
+            return data.imageSource === '本地图像'
+          }
+        },
+        {
+          widthSize: 1, // 表单每行占据数量 默认为3
+          value: 'camaras',
+          comp: 'DSFormList',
+          isSelfCom: true,
+          bind: {
+            formConfig: activeCamareConfig
+          },
+          isHideItem: (data) => {
+            return data.imageSource === '相机'
+          }
+        }
+      ],
+      // 相关列表
+      listTypeInfo: {
+        testList,
+        imageSourceList: [
+          { key: '本地图像', value: '本地图像' },
+          { key: '相机', value: '相机' }
+        ]
+      }
+    }
+  }
+})
+
 // 设备信息表单
 const formDeviceInfo = reactive({
-  imageSource: '本地图像',
-  deviceName: '',
   imageConfigs: [
     {
       distributionAngle: 90,
       illuminationAngle: 0
     }
-  ],
-
-  reconnect: false,
-  polling: false,
-
-  outputPolarity: '', // 输出极性
-  sendInterval: '',
-  IOPort: '',
-  delayTime: '', // IO延迟时间
-  controlDelayTime: '', // IO控制延迟时间
-  flickerDelayTime: '', // 频闪延迟时间
-
-  endInfo: '',
-  channelBrightness1: 0,
-  channelBrightness2: 0
+  ]
 })
 
 // 添加图像源配置项
@@ -179,150 +418,49 @@ const handleAddImageConfig = () => {
   })
 }
 
-const handleDelImageConfig = (index) => {
-  formDeviceInfo.imageConfigs.splice(index, 1)
-}
-// 处理对话框关闭事件
-const handleClose = () => {}
+onMounted(() => {
+  setTimeout(() => {
+    formActiveList.cameraData = [
+      {
+        distributionAngle: 90,
+        illuminationAngle: 0
+      },
+      {
+        distributionAngle: 190,
+        illuminationAngle: 20
+      },
+      {
+        distributionAngle: 100,
+        illuminationAngle: -78
+      },
+      {
+        distributionAngle: 26,
+        illuminationAngle: 33
+      }
+    ]
+  }, 2000)
+})
 </script>
-
 <template>
-  <!-- 控制器管理弹框 -->
   <DSDialog
-    title="多图采集"
     v-model="show"
     width="1200"
-    class="controllerManagement-dialog ds-dialog"
     @close="handleClose"
+    class="settings-dialog ds-dialog"
+    title="多图采集"
   >
-    <div class="controllerManagement-container ds-dialog-form-container">
-      <div class="controllerManagement-content">
-        <el-form label-width="auto" size="default" :model="formDeviceInfo" style="max-width: 100%">
-          <el-row :gutter="24">
-            <el-col :span="8">
-              <el-form-item label="图像源" label-position="top">
-                <el-select
-                  v-model="formDeviceInfo.imageSource"
-                  placeholder="请选择"
-                  class="device-select"
-                >
-                  <el-option
-                    v-for="item in imageSourceOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8" v-if="formDeviceInfo.imageSource === '相机'">
-              <el-form-item label="关联相机 (请先在“相机管理”中新建相机）" label-position="top">
-                <el-select
-                  v-model="formDeviceInfo.imageSource"
-                  placeholder="请选择"
-                  class="device-select"
-                >
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="取图数量 (上限不超过8)" label-position="top">
-                <div class="flex">
-                  <el-input-number
-                    class="flex-1 w-full"
-                    v-model="formDeviceInfo.deviceName"
-                    :min="1"
-                    :max="8"
-                    controls-position="right"
-                    @change="handleChange"
-                  >
-                  </el-input-number>
-                  <span>
-                    <el-icon class="el-input__icon"><Folder /></el-icon>
-                  </span>
-                </div>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8" v-if="formDeviceInfo.imageSource === '本地图像'">
-              <el-form-item label="图像路径" label-position="top">
-                <el-input v-model="formDeviceInfo.deviceName">
-                  <template #suffix>
-                    <el-icon class="el-input__icon"><Folder /></el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="24" v-if="formDeviceInfo.imageSource === '本地图像'">
-            <el-col :span="24">
-              <el-form-item
-                v-for="(domain, index) in formDeviceInfo.imageConfigs"
-                :key="domain.key"
-                label-position="top"
-                label=""
-                :prop="'imageConfigs.' + index + '.value'"
-              >
-                <template #label>
-                  <div class="flex items-center">
-                    <p>{{ '图像配置' + (index + 1) }}</p>
-                    <!-- // TODO 删除按钮 -->
-                    <DSButton
-                      class="mx-[16px]"
-                      type="text"
-                      @click.prevent="handleDelImageConfig(index)"
-                    >
-                      <el-icon class="el-input__icon"><Delete /></el-icon>
-                    </DSButton>
-                  </div>
-                </template>
-                <div class="w-full">
-                  <el-row :gutter="24">
-                    <el-col :span="8">
-                      <el-form-item label="分布角" label-position="top">
-                        <el-input-number
-                          v-model="domain.distributionAngle"
-                          :min="0"
-                          :max="360"
-                          controls-position="right"
-                          @change="handleChange"
-                        />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-form-item label="照射角" label-position="top">
-                        <el-input-number
-                          v-model="domain.illuminationAngle"
-                          :min="0"
-                          :max="360"
-                          controls-position="right"
-                          @change="handleChange"
-                        />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                </div>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <div class="table-add-btn" @click="handleAddImageConfig">
-            <img
-              src="@/assets/images/common/table_addBtn.png"
-              alt=""
-              class="w-[16px] h-[16px] mr-2"
-            />添加数据
-          </div>
-        </el-form>
+    <template #default>
+      <div class="imageNodeModel-form-container ds-dialog-form-container">
+        <t-module-form ref="sourceForm" titleBold :formOpts="formOpts" :submit="submit">
+          <template #footer>
+            <div class="ds-dialog-form-footer">
+              <t-button type="primary" size="default" :time="config.buttonTimeOut">
+                <span class="px-[8px]" @click="save"> 确定 </span>
+              </t-button>
+            </div>
+          </template>
+        </t-module-form>
       </div>
-    </div>
+    </template>
   </DSDialog>
 </template>
-
-<style scoped lang="scss">
-@import url('./multiImageNodeModel.scss');
-</style>
diff --git a/src/renderer/src/views/Design/Workflow/logicFlowView.vue b/src/renderer/src/views/Design/Workflow/logicFlowView.vue
index 5dbfef5..42ac2aa 100644
--- a/src/renderer/src/views/Design/Workflow/logicFlowView.vue
+++ b/src/renderer/src/views/Design/Workflow/logicFlowView.vue
@@ -129,15 +129,15 @@ const initEvents = () => {
     // // currNodeData.value = data
     // console.log('node:click-currNodeData', currNodeData.value)
     // // changeAttrPanelStatus(true)
+    // currNodeData.value = data
+    // console.log('node:dbclick-currNodeData', currNodeData.value)
+    // changeAttrPanelStatus(true)
+  })
+  lf.value.on('node:dbclick', ({ data }) => {
     currNodeData.value = data
     console.log('node:dbclick-currNodeData', currNodeData.value)
     changeAttrPanelStatus(true)
   })
-  // lf.value.on('node:dbclick', ({ data }) => {
-  //   currNodeData.value = data
-  //   console.log('node:dbclick-currNodeData', currNodeData.value)
-  //   changeAttrPanelStatus(true)
-  // })
   // lf.value.on('edge:dbclick', ({ data }) => {
   //   currNodeData.value = data
   // })