feat: 输出图像弹框初始化完成

src/renderer/src/components/Button/src/button.tsx

@@ -1,6 +1,8 @@
 // Button/index.tsx
 import { defineComponent, computed, CSSProperties } from 'vue'
 import './button.scss' // 导入样式文件
+import { config } from '@/config'
+import { TButton } from '@wocwin/t-ui-plus'
 
 //定义按钮类型
 type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
@@ -41,6 +43,8 @@ export default defineComponent({
       type: String as () => ButtonNativeType,
       default: 'button'
     },
+    time: Number, // 按钮点击后禁用时间
+    label: String,
     disabled: Boolean,
     loading: Boolean,
     plain: Boolean,
@@ -93,21 +97,23 @@ export default defineComponent({
       return (
         <span class="ds-button__content">
           {renderIcon()}
+          {props?.label}
           {slots.default?.()}
         </span>
       )
     }
 
     return () => (
-      <button
+      <t-button
         class={buttonClasses.value}
         style={props.style}
         disabled={props.disabled || props.loading}
         type={props.type}
+        time={props.time || config.buttonTimeOut}
         onClick={handleClick}
       >
         {renderContent()}
-      </button>
+      </t-button>
     )
   }
 })

src/renderer/src/components/Form/formList.tsx

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-31 10:03:44
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-08-01 17:04:27
+ * @LastEditTime: 2025-08-07 17:38:15
  * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\components\Form\formList.tsx
  * @Description: 定义 formList 组件
  */
@@ -18,6 +18,9 @@ import { Delete } from '@element-plus/icons-vue'
 // 定义组件属性类型（保留所有 ElInputNumber 属性）
 type DSFormListProps = {
   formConfig: FormTypes
+  isHasPrefix?: boolean
+  isHasSuffix?: boolean
+
   prefixRender?: (...ags: any[]) => any // 前置内容 render渲染
   suffixRender?: (...ags: any[]) => any // 后置内容 render渲染
   min?: number
@@ -31,6 +34,16 @@ export default defineComponent({
       type: Object as FormTypes,
       default: {}
     },
+    isHasPrefix: {
+      type: Boolean,
+      default: true
+    },
+    isHasSuffix: {
+      type: Boolean,
+      default: false
+    },
+    prefixRender: Function as DSFormListProps['prefixRender'],
+    suffixRender: Function as DSFormListProps['suffixRender'],
     modelValue: {
       type: Array,
       default: () => []
@@ -100,7 +113,9 @@ export default defineComponent({
     // const canRemove = list.length > props.min
     // 渲染自定义前缀内容
     const renderPrefix = (formItem, index) => {
-      // props?.suffixRender &&
+      if (!props.isHasPrefix) {
+        return null
+      }
       if (props.prefixRender) {
         return props?.prefixRender?.()
       }
@@ -112,7 +127,26 @@ export default defineComponent({
           </span>
           <div
             onClick={() => removeItem(formItem, index)}
-            class="flex items-center justify-center ds-dialog-formList-delete"
+            className="flex items-center justify-center ds-dialog-formList-delete"
+          >
+            <Delete />
+          </div>
+        </div>
+      )
+    }
+    // 渲染自定义后缀内容
+    const renderSuffix = (formItem, index) => {
+      if (!props.isHasSuffix) {
+        return null
+      }
+      if (props.suffixRender) {
+        return props?.suffixRender?.()
+      }
+      return (
+        <div className="flex items-center mb-[16px]">
+          <div
+            onClick={() => removeItem(formItem, index)}
+            className="flex items-center justify-center ds-dialog-formList-delete"
           >
             <Delete />
           </div>
@@ -120,17 +154,20 @@ export default defineComponent({
       )
     }
     return () => (
-      <div class="ds-form-list-comp">
+      <div className="ds-form-list-comp">
-        <ul class="form-list">
+        <ul className="form-list">
           {props.modelValue
             .map((item) => ({
               ...item,
               formItemsUuid: item?.id || generateId()
             }))
             .map((formItem, index) => (
-              <li class="form-item-card" key={formItem.formItemsUuid}>
+              <li className="form-item-card" key={formItem.formItemsUuid}>
                 {renderPrefix(formItem, index)}
-                <TForm className="ds-form-list-comp-form" {...tFormAttrs(index)}></TForm>
+                <div className="flex items-center">
+                  <TForm className="ds-form-list-comp-form" {...tFormAttrs(index)}></TForm>
+                  {renderSuffix(formItem, index)}
+                </div>
               </li>
             ))}
         </ul>

src/renderer/src/config/designControl.ts

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-14 13:45:30
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-23 14:31:26
+ * @LastEditTime: 2025-08-07 17:49:18
  * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\config\designControl.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -34,11 +34,11 @@ import LogicalToolsIcon from '@/assets/images/panelBar/logical_tools.png' // 逻
 import CommunicationIcon from '@/assets/images/panelBar/communication.png' // 通讯
 import DeepLearningIcon from '@/assets/images/panelBar/deep_learning.png' // 深度学习
 // 节点图标
-import imageNodeIcon from '@/assets/images/ImagesCapture/image-node.png' // 图像源
+import ImageNodeIcon from '@/assets/images/ImagesCapture/image-node.png' // 图像源
-import multiImageNodeIcon from '@/assets/images/ImagesCapture/multi-image-node.png' // 多图采集
+import MultiImageNodeIcon from '@/assets/images/ImagesCapture/multi-image-node.png' // 多图采集
-import outputImageNodeIcon from '@/assets/images/ImagesCapture/output-image-node.png' // 输出图像
+import OutputImageNodeIcon from '@/assets/images/ImagesCapture/output-image-node.png' // 输出图像
 import CashImageNodeIcon from '@/assets/images/ImagesCapture/cash-image-node.png' // 缓存图像
-import lightImageNodeIcon from '@/assets/images/ImagesCapture/light-image-node.png' // 缓存图像
+import LightImageNodeIcon from '@/assets/images/ImagesCapture/light-image-node.png' // 光源
 export interface designLFNodeType {
   type: string
   icon: string
@@ -135,17 +135,17 @@ export const panelControlsConf: ControlsItemType[] = [
       {
         type: 'image-node',
         label: '图像源',
-        icon: imageNodeIcon
+        icon: ImageNodeIcon
       },
       {
         type: 'multi-image-node',
         label: '多图采集',
-        icon: multiImageNodeIcon
+        icon: MultiImageNodeIcon
       },
       {
         type: 'output-image-node',
         label: '输出图像',
-        icon: outputImageNodeIcon
+        icon: OutputImageNodeIcon
       },
       {
         type: 'cash-image-node',
@@ -155,7 +155,7 @@ export const panelControlsConf: ControlsItemType[] = [
       {
         type: 'light-image-node',
         label: '光源',
-        icon: lightImageNodeIcon
+        icon: LightImageNodeIcon
       }
     ]
   },

src/renderer/src/styles/ds-from.scss

@@ -32,7 +32,7 @@
     }
   }
   // proFormList
-  .ds-form-list-comp-form{
+  .ds-form-list-comp-form {
     width: calc(100% + 12px);
   }
   .el-form-item--large .el-form-item__content {
@@ -51,7 +51,7 @@
     min-width: 40px;
     width: 40px;
   }
-  .ds-switch-box{
+  .ds-switch-box {
     height: var(--ds-form-item-height);
   }
   // 重置输入框样式
@@ -69,6 +69,13 @@
   color: var(--ds-des-text-1);
 }
 
+// 表单标题
+.ds-form-items-title {
+  font-weight: bold;
+  font-size: 14px;
+  margin-bottom: calc(-8px - 4px);
+}
+
 // 弹窗图标
 .ds-dialog-icon-box {
   width: 48px;

src/renderer/src/styles/element-plus.scss

@@ -58,8 +58,19 @@
 .el-switch {
   height: 20px;
 }
-
+.el-radio {
-/* tabs */
+    // --el-radio-font-size: var(--el-font-size-base);
+    --el-radio-text-color: var(--ds-color-info);
+    &.is-checked{
+      color: var(--ds-color-info);
+    }
+}
+.el-radio__input.is-checked+.el-radio__label {
+    color: var(--ds-color-info);
+}
+.el-radio.el-radio--large {
+    height: var(--ds-form-item-height);
+}/* tabs */
 .ds-tabs {
   background-color: transparent;
   &.el-tabs {

src/renderer/src/styles/t-element-plus.scss

@@ -407,7 +407,7 @@
   font-size: 14px;
   justify-content: space-between;
   padding-left: 0px;
-  padding-bottom: 14px;
+  padding-bottom: 12px;
 }
 .t_module_form
   .scroll_wrap

src/renderer/src/views/Design/FlowImagesCapture/imageNodeModel.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-03 11:12:04
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-08-01 09:19:24
+ * @LastEditTime: 2025-08-07 17:01:33
  * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\imageNodeModel.vue
  * @Description: 图像源节点
 -->

src/renderer/src/views/Design/FlowImagesCapture/index.ts

@@ -2,16 +2,17 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-23 16:19:16
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-23 16:37:17
+ * @LastEditTime: 2025-08-07 17:51:38
  * @FilePath: \Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\index.ts
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @Description: 图片节点属性设置弹窗批量注入
  */
 import imageNodeModel from './imageNodeModel.vue'
 import multiImageNodeModel from './multiImageNodeModel.vue'
+import outputImageNode from './outputImageNode.vue'
 import lightImageNodeModel from './lightNodeModel.vue'
 
 export const FlowImageNodeModel = imageNodeModel
 
 export const FlowMultiImageNodeModel = multiImageNodeModel
-
+export const FlowOutputImageNodeModel = outputImageNode
 export const FlowLightImageNodeModel = lightImageNodeModel

src/renderer/src/views/Design/FlowImagesCapture/outputImageNode.vue

@@ -0,0 +1,930 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-07-03 11:12:04
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-08-07 17:43:32
+ * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\FlowImagesCapture\outputImageNode.vue
+ * @Description: 输出图像节点
+-->
+<script setup lang="tsx">
+import { DSDialog } from '@/components/Dialog'
+import { DSButton } from '@/components/Button'
+
+defineOptions({
+  name: 'FlowImageNodeModel'
+})
+interface Props {
+  /** 弹窗显隐 */
+  value: boolean
+  // info?: Record<string, any>
+}
+interface Emits {
+  (e: 'update:value', val: boolean): void
+}
+interface FormTabItem {
+  ref: string
+  title: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  value: false
+})
+const emit = defineEmits<Emits>()
+
+// 处理对话框关闭事件
+const handleClose = () => {
+  // emits('close');
+}
+
+const show = computed({
+  get() {
+    return props.value
+  },
+  set(val: boolean) {
+    emit('update:value', val)
+  }
+})
+
+// 获取ref
+const sourceForm: any = ref<HTMLElement | null>(null)
+// 第一种：获取最终form表单数据
+const submit = (form) => {
+  console.log('最终提交数据', form)
+}
+
+const save = () => {
+  sourceForm.value.saveHandle()
+}
+const testList = [
+  {
+    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 baseFormOpts: any = reactive({
+  baseConfig: {
+    title: '图像输入',
+    name: 'baseConfig',
+    disabled: true, // 表单禁用收缩
+    ref: 'baseFormRef',
+    widthSize: 2, // 表单每行占据数量 默认为3
+    opts: {
+      labelPosition: 'top', // 标签对齐方式
+      formData: {
+        imageSource: '请选择', // *输入源--图像来源，当前尚未选择
+        saveImageEnable: false, // *存图使能--是否启用保存图像功能
+        generateDirectory: false, // *生成目录--是否生成目录，存图使能启用时显示
+        debugSave: false, // *调试保存--是否启用调试保存，存图使能启用时显示
+        debugInfo: '', // *调试信息--启用调试保存时显示
+        asyncStorageWay: 0, // *同步存储&异步存储
+        asynchronousStorageInterval: null, // *存图间隔
+        triggerSaveEnable: false, // *触发保存
+        triggerVariable: '', // *触发变量，当前为空
+        saveCondition: '全部保存', // *保存条件，当前设置为“全部保存”
+        saveRenderedImageEnable: false, // *保存渲染图
+        renderedImagePath: 'C:\\Users\\siroi\\Picture', // *渲染图路径，当前设置为“C:\Users\siroi\Picture”
+        renderedImageName: '', // *渲染图命名
+        renderedImageCache: null, // *渲染图缓存
+        saveOriginalImageEnable: false, // *保存原图
+        originalImagePath: 'C:\\Users\\siroi\\Picture', // *原图路径，当前设置为“C:\Users\siroi\Picture”
+        originalImageName: '', // *原图命名
+        originalImageCache: null, // *原图缓存
+        storageMethod: 0, // *存储方式
+        diskFreeSpace: null, // *磁盘剩余空间，当前设置为36
+        storageUnit: 'MB', // *存储单位，当前设置为“MB”
+        maxStorageDays: 30, // *最大保存天数，当前设置为30
+        imageFormat: 'BMP', // *保存格式，当前设置为“BMP”
+        ftpEnable: false, // *启用FTP
+        ftpConnectedEnable: false, // *连接--FTP是否已连接
+        localIP: '', // *IP--本地IP地址
+        serverPort: '', // *服务器端口
+        username: '', // *用户名
+        password: '', // *密码
+        encodingFormat: '', // *编码格式
+        ftpPath: '/image', // *FTP路径，当前设置为“/image”
+        outputEnable: false, // *输出使能，当前为未启用状态
+        pixelFormat: 'Mono8' // *像素格式，当前设置为“Mono8”
+        // renderedNGPath: 'C:\\Users\\siroi\\Picture', // 渲染图像NG路径，当前设置为“C:\Users\siroi\Picture”
+        // originalNGPath: 'C:\\Users\\siroi\\Picture' // 原始图像NG路径，当前设置为“C:\Users\siroi\Picture”
+      },
+      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 className="ds-form-items-title">存图设置</div>
+          },
+          // value: 'form_title',
+          isSelfCom: true,
+          widthSize: 1
+        },
+        // 存图使能
+        {
+          value: 'saveImageEnable',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '存图使能'
+          }
+        },
+        // 生成目录
+        {
+          value: 'generateDirectory',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '生成目录'
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        // 调试保存
+        {
+          value: 'debugSave',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '调试保存'
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        // 调试信息
+        {
+          label: '调试信息',
+          value: 'debugInfo',
+          type: 'input',
+          widthSize: 1,
+          width: 'calc(50% - 6px)',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.debugSave
+          }
+        },
+        // 同步存储&异步存储
+        {
+          label: '',
+          value: 'asyncStorageWay',
+          type: 'radio',
+          comp: 'el-radio-group',
+          widthSize: 4,
+          list: 'asyncStorageWayList',
+          arrLabel: 'name',
+          arrKey: 'id',
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        // 存图间隔
+        {
+          label: '',
+          value: 'captureInterval',
+          placeholder: '请输入存图间隔',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          widthSize: 4,
+
+          bind: {
+            min: 1,
+            max: 10000,
+            prefixRender: () => {
+              // TODO 这里需要调整宽度
+              return <div className="w-[200px] flex pr-[8px]">存图间隔</div>
+            },
+            isHasSuffix: false
+          },
+          eventHandle: {
+            change: (val: any) => {}
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        // 触发保存
+        {
+          value: 'triggerSaveEnable',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '触发保存'
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        //  触发变量
+        {
+          label: '触发变量',
+          value: 'triggerVariable',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.triggerSaveEnable
+          }
+        },
+        // 保存条件
+        {
+          label: '保存条件',
+          value: 'saveCondition',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'saveConditiontList',
+          arrLabel: 'name',
+          arrKey: 'id',
+          placeholder: '请选择保存条件',
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.triggerSaveEnable
+          }
+        },
+        // 保存渲染图
+        {
+          value: 'saveRenderedImageEnable',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '保存渲染图'
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        //  TODO 渲染图路径 使用inputPath自定义组件重写
+        {
+          label: '渲染图路径',
+          value: 'renderedImagePath',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveRenderedImageEnable
+          }
+        },
+        //  TODO 渲染图命名 使用inputSelect自定义组件重写
+        {
+          label: '渲染图命名',
+          value: 'renderedImageName',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveRenderedImageEnable
+          }
+        },
+        // 渲染图缓存
+        {
+          label: '渲染图缓存',
+          value: 'renderedImageCache',
+          placeholder: '请输入渲染图缓存',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 1,
+            max: 10000,
+            isHasSuffix: false
+          },
+          eventHandle: {
+            change: (val: any) => {}
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveRenderedImageEnable
+          }
+        },
+        // 保存原图
+        {
+          value: 'saveOriginalImageEnable',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '保存原图'
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        //  TODO 原图路径 使用inputPath自定义组件重写
+        {
+          label: '原图路径',
+          value: 'originalImagePath',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        //  TODO 原图命名 使用inputSelect自定义组件重写
+        {
+          label: '渲染图命名',
+          value: 'originalImageName',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        // 原图缓存
+        {
+          label: '原图缓存',
+          value: 'originalImageCache',
+          placeholder: '请输入原图缓存',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 1,
+            max: 10000,
+            isHasSuffix: false
+          },
+          eventHandle: {
+            change: (val: any) => {}
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        // 存储方式
+        {
+          label: '存储方式',
+          value: 'storageMethod',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'storageMethodList',
+          arrLabel: 'name',
+          arrKey: 'id',
+          placeholder: '请选择存储方式',
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        // 磁盘剩余空间
+        {
+          placeholder: '请输入磁盘剩余空间',
+          label: '磁盘剩余空间',
+          value: 'diskFreeSpace',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 0,
+            max: 99999999
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        // 存储单位
+        {
+          label: '存储单位',
+          value: 'storageUnit',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'storageUnitList',
+          arrLabel: 'name',
+          arrKey: 'id',
+          placeholder: '请选择存储单位',
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        // 最大保存天数
+        {
+          placeholder: '请输入最大保存天数',
+          label: '最大保存天数',
+          value: 'maxStorageDays',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 0,
+            max: 99999999
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        // 保存格式
+        {
+          label: '保存格式',
+          value: 'imageFormat',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'imageFormatList',
+          arrLabel: 'name',
+          arrKey: 'id',
+          placeholder: '请选择保存格式',
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.saveOriginalImageEnable
+          }
+        },
+        // 启用FTP
+        {
+          value: 'ftpEnable',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '启用FTP'
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable
+          }
+        },
+        // 连接
+        {
+          value: 'ftpConnectedEnable',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '连接'
+          },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.ftpEnable
+          }
+        },
+        //  TODO IP 使用t自定义组件重写
+        {
+          label: 'IP',
+          value: 'localIP',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.ftpEnable && data.ftpConnectedEnable
+          }
+        },
+        // 服务器端口
+        {
+          label: '服务器端口',
+          value: 'serverPort',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.ftpEnable && data.ftpConnectedEnable
+          }
+        },
+        // 用户名
+        {
+          label: '用户名',
+          value: 'username',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.ftpEnable && data.ftpConnectedEnable
+          }
+        },
+        // 密码
+        {
+          label: '密码',
+          value: 'password',
+          type: 'password',
+          comp: 'el-input',
+          bind: { 'show-password': true }
+        },
+        // 编码格式
+        {
+          label: '编码格式',
+          value: 'encodingFormat',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'testList',
+          arrLabel: 'label',
+          arrKey: 'value',
+          placeholder: '请选择像素格式',
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.ftpEnable && data.ftpConnectedEnable
+          }
+        },
+        //  TODO FTP路径 使用自定义组件重写
+        {
+          label: 'FTP路径',
+          value: 'ftpPath',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 },
+          isHideItem: (data) => {
+            return data.saveImageEnable && data.ftpEnable && data.ftpConnectedEnable
+          }
+        },
+        // 输出使能
+        {
+          value: 'outputEnable',
+          comp: 'DSSwitch',
+          isSelfCom: true,
+          widthSize: 1,
+          bind: {
+            label: '输出使能'
+          }
+        },
+        // 像素格式
+        {
+          label: '像素格式',
+          value: 'pixelFormat',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'testList',
+          arrLabel: 'label',
+          arrKey: 'value',
+          placeholder: '请选择像素格式'
+        }
+      ],
+      // 相关列表
+      listTypeInfo: {
+        testList,
+        imageSourceList: [
+          { key: '本地图像', value: '本地图像' },
+          { key: '相机', value: '相机' },
+          { key: 'SDK', value: 'SDK' }
+        ],
+        asyncStorageWayList: [
+          {
+            id: 0,
+            name: '同步存储'
+          },
+          {
+            id: 1,
+            name: '异步存储'
+          }
+        ],
+        saveConditiontList: [
+          {
+            id: '全部保存',
+            name: '全部保存'
+          },
+          {
+            id: 'OK时保存',
+            name: 'OK时保存'
+          },
+          {
+            id: 'NG时保存',
+            name: 'NG时保存'
+          },
+          {
+            id: '不保存',
+            name: '不保存'
+          }
+        ],
+        storageMethodList: [
+          {
+            id: 0,
+            name: '覆盖存储'
+          },
+          {
+            id: 1,
+            name: '停止存储'
+          }
+        ],
+
+        storageUnitList: [
+          {
+            id: 'MB',
+            name: 'MB'
+          },
+          {
+            id: 'GB',
+            name: 'GB'
+          }
+        ],
+        imageFormatList: [
+          {
+            id: 'jpg',
+            name: 'jpg'
+          },
+          {
+            id: 'png',
+            name: 'png'
+          },
+          {
+            id: 'bmp',
+            name: 'bmp'
+          },
+          {
+            id: 'tiff',
+            name: 'tiff'
+          }
+        ]
+      }
+    }
+  }
+})
+// 渲染参数
+const renderParamsFormOpts = reactive({
+  renderParamsConfig: {
+    title: '',
+    name: 'renderParamsConfig',
+    disabled: true, // 表单禁用收缩
+    ref: 'renderParamsFormRef',
+    widthSize: 2, // 表单每行占据数量 默认为3
+    opts: {
+      // 相关列表
+      labelPosition: 'top', // 标签对齐方式
+      formData: {
+        circle_multiplier_type: '界面尺寸', // *圆形倍率类型
+        line_width_multiplier: null, // *线宽倍率（最大不超过16）
+        char_width_multiplier: null, // *字宽倍率（最大不超过16）
+        line_connectivity: null // *线型（4连通线）
+      },
+      fieldList: [
+        //圆形倍率类型
+        {
+          label: '圆形倍率类型',
+          value: 'circle_multiplier_type',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'typeList',
+          arrLabel: 'key',
+          arrKey: 'value',
+          placeholder: '请选择圆形倍率类型',
+          eventHandle: {
+            change: (val: any) => {
+              console.log(val, 'circle_multiplier_type_change')
+            }
+          },
+          bind: { clearable: false }
+        },
+        // 线宽倍率
+        {
+          placeholder: '请输入线宽倍率',
+          labelRender: () => {
+            return (
+              <div>
+                <span>线宽倍率</span>
+                <span className="ds-form-des-text">（最大不超过16）</span>
+              </div>
+            )
+          },
+          value: 'line_width_multiplier',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 0,
+            max: 16
+          },
+          isHideItem: (data) => {
+            return data.circle_multiplier_type === '自定义尺寸'
+          }
+        },
+        // 磁盘剩余空间
+        {
+          placeholder: '请输入字宽倍率',
+          labelRender: () => {
+            return (
+              <div>
+                <span>字宽倍率</span>
+                <span className="ds-form-des-text">（最大不超过16）</span>
+              </div>
+            )
+          },
+          value: 'char_width_multiplier',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 0,
+            max: 16
+          },
+          isHideItem: (data) => {
+            return data.circle_multiplier_type === '自定义尺寸'
+          }
+        },
+        // 线型
+        {
+          label: '线型',
+          value: 'line_connectivity',
+          type: 'select-arr',
+          comp: 'el-select',
+          list: 'lineList',
+          arrLabel: 'name',
+          arrKey: 'id'
+        }
+      ],
+      listTypeInfo: {
+        testList,
+        typeList: [
+          { key: '界面尺寸', value: '界面尺寸' },
+          { key: '自定义尺寸', value: '自定义尺寸' }
+        ],
+        lineList: [
+          {
+            id: 0,
+            name: '4连通线'
+          },
+          {
+            id: 1,
+            name: '8连通线'
+          },
+          {
+            id: 2,
+            name: '抗锯齿线'
+          }
+        ]
+      }
+    }
+  }
+})
+
+// *渲染设置前项存储设置参数表单
+const activePriorStorageConfig = reactive({
+  widthSize: 1, // 表单每行占据数量 默认为3
+  title: '前项存储设置',
+  labelPosition: 'top', // 标签对齐方式
+  ref: 'activeImageRef',
+  formData: {
+    prior_storage: null // *前项存储设置
+  },
+  fieldList: [
+    {
+      placeholder: '请输入',
+      label: '',
+      value: 'prior_storage',
+      comp: 'DSInputNumber',
+      // width: 'calc(50% - 6px)',
+      isSelfCom: true,
+      bind: {
+        min: 0,
+        max: 10000
+      }
+    }
+  ]
+})
+// 渲染设置
+const renderSettingFormOpts = reactive({
+  renderSettingConfig: {
+    title: '',
+    name: 'renderSettingConfig',
+    disabled: true, // 表单禁用收缩
+    ref: 'renderSettingFormRef',
+    widthSize: 2, // 表单每行占据数量 默认为3
+    opts: {
+      labelPosition: 'top', // 标签对齐方式
+      formData: {
+        content: '', // *内容
+        font_size: 36, // *字号
+        color: null, // *颜色
+        position_x: '', // *位置X (Please Enter)
+        position_y: '', // *位置Y (Please Enter)
+        prior_storage_settings: [] // *前项存储设置
+      },
+      fieldList: [
+        // 内容
+        {
+          label: '内容',
+          value: 'content',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 }
+        },
+        // 字号
+        {
+          placeholder: '请输入字号',
+          label: '字号',
+          value: 'font_size',
+          comp: 'DSInputNumber',
+          isSelfCom: true,
+          bind: {
+            min: 0,
+            max: 100
+          }
+        },
+        //TODO 颜色 需要改成自定义控件colorPicker
+        {
+          label: '颜色',
+          value: 'color',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 }
+        },
+        // 位置X
+        {
+          label: '位置X',
+          value: 'position_x',
+          type: 'input',
+          comp: 'el-input',
+          bind: { maxlength: 100 }
+        },
+        // 位置Y
+        {
+          label: '位置Y',
+          value: 'position_y',
+          type: 'input',
+          comp: 'el-input',
+          widthSize: 1,
+          width: 'calc(50% - 6px)',
+          bind: { maxlength: 100 }
+        },
+        {
+          label: '前项存储设置',
+          widthSize: 2, // 表单每行占据数量 默认为3
+          value: 'prior_storage_settings',
+          comp: 'DSFormList',
+          isSelfCom: true,
+          bind: {
+            formConfig: activePriorStorageConfig,
+            isHasPrefix: false,
+            isHasSuffix: true
+          }
+        }
+      ]
+    }
+  }
+})
+
+const tabs = ref([
+  {
+    ref: 'baseFormRef',
+    name: '基本参数',
+    formOpts: baseFormOpts
+  },
+  {
+    ref: 'renderParamsFormRef',
+    name: '渲染参数',
+    formOpts: renderParamsFormOpts
+  },
+  {
+    ref: 'renderSettingFormRef',
+    name: '渲染设置',
+    formOpts: renderSettingFormOpts
+  }
+])
+
+const activeTabName = ref('基本参数')
+</script>
+<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">
+        <el-tabs v-model="activeTabName">
+          <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.name" :name="item.name">
+            <t-module-form :ref="item.ref" titleBold :formOpts="item.formOpts" :submit="submit">
+              <template #footer>
+                <div class="ds-dialog-form-footer">
+                  <DSButton label="连续执行" @click="save" type="info" class="mr-[8px]" />
+                  <DSButton label="执行" @click="save" type="primary" />
+                  <!-- <t-button type="primary" size="default">
+                <span class="px-[8px]" @click="save"> 确定 </span>
+              </t-button> -->
+                </div>
+              </template>
+            </t-module-form>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </template>
+  </DSDialog>
+</template>

src/renderer/src/views/Design/Workflow/logicFlowView.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-07-03 10:27:47
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-07-23 16:40:56
+ * @LastEditTime: 2025-08-07 17:52:52
  * @FilePath: \electron-project\Robot-Al\Robot-Al-Platform-Web\src\renderer\src\views\Design\Workflow\logicFlowView.vue
  * @Description: 流程设计器面板
 -->
@@ -34,6 +34,7 @@
     <div class="attr-model-box" v-if="showAttribute">
       <FlowImageNodeModel v-model:value="isOpenFlowImage" />
       <FlowMultiImageNodeModel v-model:value="isOpenFlowMultiImage" />
+      <FlowOutputImageNodeModel v-model:value="isOpenFlowOutputImage" />
       <FlowLightImageNodeModel v-model:value="isOpenFlowLightImage" />
     </div>
   </div>
@@ -53,6 +54,7 @@ import { getNodeOutputCount, getNodeInputCount } from '@/utils/forData/arr'
 import {
   FlowImageNodeModel,
   FlowMultiImageNodeModel,
+  FlowOutputImageNodeModel,
   FlowLightImageNodeModel
 } from '../FlowImagesCapture'
 
@@ -68,6 +70,7 @@ const flowDetail = reactive({})
 
 const isOpenFlowImage = ref<boolean>(false) // 是否打开图片源流程图节点
 const isOpenFlowMultiImage = ref<boolean>(false) // 是否打开多图采集流程图节点
+const isOpenFlowOutputImage = ref<boolean>(false) // 是否打开输出图片流程图节点
 const isOpenFlowLightImage = ref<boolean>(false) // 是否打开光源采集流程图节点
 // 隐藏属性面板
 const changeAttrPanelStatus = (isOpen) => {
@@ -78,6 +81,9 @@ const changeAttrPanelStatus = (isOpen) => {
     case 'multi-image-node':
       isOpenFlowMultiImage.value = true
       break
+    case 'output-image-node':
+      isOpenFlowOutputImage.value = true
+      break
     case 'light-image-node':
       isOpenFlowLightImage.value = true
       break