fix: 修复组态变量图片绑定默认图片显示

 <script setup lang="ts">
 import { ref, unref } from 'vue'
 import type { ComponentExposeType } from '../../..'
+import { usePublicFormContext } from '../../../usePublicFormContext'
 import ImageSettingTable from './ImageSettingTable.vue'
 import { formSchemas } from './config'
 import { BasicForm, useForm } from '@/components/Form'
 import { FormLayoutEnum } from '@/components/Form/src/enum'
 import type { RangeItemType, VariableImageActDataType } from '@/api/node/model'
+import { NodeUtils } from '@/hooks/business/useNodeUtils'
+import type { ImageSelectorDataType } from '@/core/Library/components/ImageSelector'
+import { CellAttributeKeyEnum } from '@/enums/cellAttributeEnum'
 
 const imageSettingTableElRef = ref<InstanceType<typeof ImageSettingTable>>()
 
+const { getCellInfo } = usePublicFormContext()
+
+const nodeUtils = new NodeUtils()
+
 const [register, formActionType] = useForm({
   schemas: formSchemas,
   showActionButtonGroup: false,
@@ -16,6 +24,17 @@ const [register, formActionType] = useForm({
   baseColProps: { span: 12 },
 })
 
+function savaDefaultImageToNodeAttribute(defaultImages: ImageSelectorDataType) {
+  const node = nodeUtils.getCellById(unref(getCellInfo).id)
+
+  if (!node)
+    return
+
+  node.setAttribute(CellAttributeKeyEnum.DEFAULT_IMAGE, JSON.stringify(defaultImages))
+
+  nodeUtils.refreshCell(node)
+}
+
 const validate = async () => {
   await formActionType.validate()
   await unref(imageSettingTableElRef)?.validate()
@@ -24,6 +43,8 @@ const validate = async () => {
 const getFieldsValue = (): VariableImageActDataType => {
   const value = formActionType.getFieldsValue() as VariableImageActDataType
   const tableValue = unref(imageSettingTableElRef)?.getFieldsValue() as RangeItemType[]
+
+  savaDefaultImageToNodeAttribute(value.defaultImage)
   return {
     ...value,
     rangeList: tableValue,
@@ -51,11 +72,11 @@ defineExpose<ComponentExposeType>({
 </template>
 
 <style lang="less" scoped>
-  .variable-image-form {
-    >:deep(.ant-row) {
-      >.ant-col {
-        @apply px-4;
-      }
+.variable-image-form {
+  >:deep(.ant-row) {
+    >.ant-col {
+      @apply px-4;
     }
   }
+}
 </style>

@@ -7,9 +7,10 @@ import type { ModalProps } from '@/components/Modal'
 import { BasicModal, useModalInner } from '@/components/Modal'
 import type { ActTypeEnum, EventTypeEnum } from '@/enums/datasource'
 import { DataSourceTypeEnum } from '@/enums/datasource'
-import type { NodeDataActJsonType, NodeDataEventJsonType, SingleClickEventDataType } from '@/api/node/model'
+import type { NodeDataActJsonType, NodeDataEventJsonType } from '@/api/node/model'
 import { useContentDataStoreWithOut } from '@/store/modules/contentData'
 import { useTranslation } from '@/hooks/useTranslation'
+import { BasicComponentEnum } from '@/core/Library/packages/Basic'
 
 defineEmits(['register'])
 
@@ -17,7 +18,7 @@ const { t } = useTranslation()
 
 const contentDataStore = useContentDataStoreWithOut()
 
-const { getNodeData, getNodeAllData, saveNodeAllData } = usePublicFormContext()
+const { getNodeData, getNodeAllData, saveNodeAllData, getCellInfo } = usePublicFormContext()
 
 const contentComponent = shallowRef()
 
@@ -63,6 +64,10 @@ const handleOk = async () => {
       await handleDoSaveEventData()
 
     await getNodeAllData()
+
+    if (unref(getCellInfo).componentKey === BasicComponentEnum.VARIABLE_IMAGE)
+      window.DrawApp?.saveButton.click()
+
     closeModal()
     contentComponent.value = null
   }
@@ -93,7 +98,10 @@ const handleCancel = () => {
 <template>
   <BasicModal destroy-on-close v-bind="modalProps" @register="register" @ok="handleOk" @cancel="handleCancel">
     <!-- <Spin :spinning="spinning"> -->
-    <component :is="contentComponent" v-bind="componentProps" ref="componentInstance" @vue:mounted="handleComponentMounted" />
+    <component
+      :is="contentComponent" v-bind="componentProps" ref="componentInstance"
+      @vue:mounted="handleComponentMounted"
+    />
     <!-- </Spin> -->
     <!--  -->
   </BasicModal>

@@ -219,10 +219,13 @@ createPublicFormContext(nodeDataActinType)
       <Divider orientation="left">
         {{ t('dataInteraction') }}
       </Divider>
-      <DataEvents ref="dataEventsElRef" :before-click="handleBeforeOpenEventOrActModal" :form-setting="getFormSetting" />
+      <DataEvents
+        ref="dataEventsElRef" :before-click="handleBeforeOpenEventOrActModal"
+        :form-setting="getFormSetting"
+      />
       <div
-        v-if="getCellInfo.category === PackageCategoryEnum.CONTROL" class="flex flex-col justify-center passwordInput"
-        :class="getFormSetting?.actSetting === false && 'mb-4'"
+        v-if="getCellInfo.category === PackageCategoryEnum.CONTROL"
+        class="flex flex-col justify-center passwordInput" :class="getFormSetting?.actSetting === false && 'mb-4'"
       >
         <Checkbox v-model:checked="operationPassword.checked" :disabled="getSetPasswordStatus">
           <div class="flex">
@@ -254,10 +257,10 @@ createPublicFormContext(nodeDataActinType)
 
 <style lang="less" scoped>
 .form-container {
-@apply text-sm;
+  @apply text-sm;
 
   :deep(.ant-divider) {
-  @apply text-sm;
+    @apply text-sm;
   }
 }
 

@@ -68,6 +68,7 @@ export function useNodeData({ cell, immediate = true }: UseNodeDataParamsType) {
     return {
       [CellAttributeKeyEnum.CATEGORY]: cell.getAttribute(CellAttributeKeyEnum.CATEGORY),
       [CellAttributeKeyEnum.COMPONENT_KEY]: cell.getAttribute(CellAttributeKeyEnum.COMPONENT_KEY),
+      id: cell.getId(),
     }
   })
 

 <script setup lang="ts">
 import { ref } from 'vue'
-import type { RenderComponentExposeType } from '@/core/Library/types'
+import type { RenderComponentExposeType, RenderComponentProps } from '@/core/Library/types'
 import type { CommandSource } from '@/core/websocket/processor'
 import { NodeUtils } from '@/hooks/business/useNodeUtils'
 import { getMeetTheConditionsRange } from '@/core/Library/utils'
@@ -9,8 +9,29 @@ import type { VariableImageActDataType } from '@/api/node/model'
 import { useLatestMessageValue } from '@/core/Library/hook/useLatestMessageValue'
 import { useOnMessage } from '@/core/Library/hook/useOnMessage'
 import type { SubscriptionUpdateMsg } from '@/core/websocket/type/message'
+import { CellAttributeKeyEnum } from '@/enums/cellAttributeEnum'
+import { useJsonParse } from '@/hooks/business/useJSONParse'
+import type { ImageSelectorDataType } from '@/core/Library/components/ImageSelector'
 
-const imgSrc = ref('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cpath fill="%238CBCD6" d="M31 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v17c0 7.2-5.8 13-13 13z"%2F%3E%3Ccircle cx="35" cy="16" r="3" fill="%23B3DDF5"%2F%3E%3Cpath fill="%239AC9E3" d="M20 16L9 32h22z"%2F%3E%3Cpath fill="%23B3DDF5" d="m31 22l-8 10h16z"%2F%3E%3Cpath fill="%23E57373" d="m47.7 29.1l-2.8-2.8c-.4-.4-1.1-.4-1.6 0L42 27.6l4.4 4.4l1.3-1.3c.4-.4.4-1.1 0-1.6z"%2F%3E%3Cpath fill="%23FF9800" d="M27.467 42.167L39.77 29.865l4.384 4.384L31.85 46.55z"%2F%3E%3Cpath fill="%23B0BEC5" d="m46.4 32.038l-2.192 2.192l-4.383-4.384l2.192-2.191z"%2F%3E%3Cpath fill="%23FFC107" d="M27.5 42.2L26 48l5.8-1.5z"%2F%3E%3Cpath fill="%2337474F" d="m26.7 45l-.7 3l3-.7z"%2F%3E%3C%2Fsvg%3E')
+const props = defineProps<RenderComponentProps>()
+const nodeUtils = new NodeUtils()
+
+const imgSrc = ref(getDefaultImage() || 'data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cpath fill="%238CBCD6" d="M31 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v17c0 7.2-5.8 13-13 13z"%2F%3E%3Ccircle cx="35" cy="16" r="3" fill="%23B3DDF5"%2F%3E%3Cpath fill="%239AC9E3" d="M20 16L9 32h22z"%2F%3E%3Cpath fill="%23B3DDF5" d="m31 22l-8 10h16z"%2F%3E%3Cpath fill="%23E57373" d="m47.7 29.1l-2.8-2.8c-.4-.4-1.1-.4-1.6 0L42 27.6l4.4 4.4l1.3-1.3c.4-.4.4-1.1 0-1.6z"%2F%3E%3Cpath fill="%23FF9800" d="M27.467 42.167L39.77 29.865l4.384 4.384L31.85 46.55z"%2F%3E%3Cpath fill="%23B0BEC5" d="m46.4 32.038l-2.192 2.192l-4.383-4.384l2.192-2.191z"%2F%3E%3Cpath fill="%23FFC107" d="M27.5 42.2L26 48l5.8-1.5z"%2F%3E%3Cpath fill="%2337474F" d="m26.7 45l-.7 3l3-.7z"%2F%3E%3C%2Fsvg%3E')
+
+function getDefaultImage() {
+  const cell = nodeUtils.getCellById(props.config.cellInfo!.id)
+
+  if (!cell) return
+
+  const defaultImage = cell.getAttribute(CellAttributeKeyEnum.DEFAULT_IMAGE)
+
+  if (!defaultImage)
+    return
+
+  const { imageSource, libPath, path } = useJsonParse(defaultImage).value as ImageSelectorDataType
+
+  return imageSource === VariableImageSourceEnum.GALLERY ? libPath : path
+}
 
 const onReceiveActMessage = (commandSource: CommandSource, message: SubscriptionUpdateMsg) => {
   const { node, data, type } = commandSource
@@ -50,6 +71,6 @@ defineExpose<RenderComponentExposeType>({
 
 <template>
   <div class="w-full h-full flex justify-center items-center">
-    <img class="w-full" :src="imgSrc">
+    <img class="w-full h-full object-contain" :src="imgSrc">
   </div>
 </template>

 export enum BasicComponentEnum {
   TITLE = 'Title',
   VARIABLE = 'Variable',
+  VARIABLE_IMAGE = 'VariableImage',
 }
 
 export enum BasicComponentNameEnum {
   TITLE = '标题',
   VARIABLE = '变量',
+  VARIABLE_IMAGE = '变量图片',
+
 }

@@ -3,4 +3,5 @@ export enum CellAttributeKeyEnum {
   CATEGORY = 'category',
   SHAPE_KEY = 'shapeKey',
   COPY_SOURCE = 'copySource',
+  DEFAULT_IMAGE = 'defaultImage',
 }

@@ -54,6 +54,10 @@ export class NodeUtils {
     model.setVisible(cell, value)
   }
 
+  refreshCell(cell: MxCell) {
+    this.graph.refresh(cell)
+  }
+
   getNodeComponentKey(node: string | MxCell): Nullable<ComponentKey> {
     const cell = isString(node) ? this.getCellById(node) : node
     const cellValue = cell.getValue() as Element