fix: 修改图片按钮

src/renderer/src/lvgl-widgets/image-button/ImageButton.vue

@@ -1,12 +1,25 @@
 <template>
   <div :style="styleMap?.mainStyle" class="w-full h-full relative">
     <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
-    <div class="w-full h-full absolute left-0 top-0 z-0 flex items-center justify-center">
+    <div class="w-full h-full absolute left-0 top-0 z-0">
       <ImageBg
-        :src="src || defaultImg"
+        v-if="img.left.src"
+        :src="img.left.src"
         :image-style="styleMap?.mainStyle?.image"
-        :image-props="{ height: '100%', width: '100%' }"
+        :style="{ ...img.left.style, zIndex: 2 }"
       />
+      <ImageBg
+        :src="img.center.src"
+        :image-style="styleMap?.mainStyle?.image"
+        :style="{ ...img.center.style, zIndex: 1, left: '50%', transform: 'translateX(-50%)' }"
+      />
+      <ImageBg
+        v-if="img.right.src"
+        :src="img.right.src"
+        :image-style="styleMap?.mainStyle?.image"
+        :style="{ ...img.right.style, zIndex: 3, right: 0, left: 'auto' }"
+      />
+      <div v-else />
     </div>
 
     <div
@@ -20,12 +33,12 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import defaultImg from '@/assets/default.png'
-import { getImageByPath } from '@/utils'
+// import defaultImg from '@/assets/default.png'
 import { useProjectStore } from '@/store/modules/project'
 import { useWidgetStyle } from '../hooks/useWidgetStyle'
 import ImageBg from '../ImageBg.vue'
 import { useLanguage } from '../hooks/useLanguage'
+import { getImageByPath } from '@/utils'
 
 const props = defineProps<{
   width: number
@@ -33,15 +46,54 @@ const props = defineProps<{
   text?: string
   styles: any
   state?: string
-  ReleasedImage: string
-  PressedImage: string
-  CheckedReleasedImage: string
-  CheckedPressedImage: string
+  ReleasedImage: {
+    left: string
+    center: string
+    right: string
+  }
+  DisableImage: {
+    left: string
+    center: string
+    right: string
+  }
+  PessedImage: {
+    left: string
+    center: string
+    right: string
+  }
+  CheckedReleasedImage: {
+    left: string
+    center: string
+    right: string
+  }
+  CheckedPressedImage: {
+    left: string
+    center: string
+    right: string
+  }
+  CheckedDisableImage: {
+    left: string
+    center: string
+    right: string
+  }
   scale?: number
   antiAliasing?: boolean
 }>()
 
-const src = ref('')
+const img = ref({
+  left: {
+    src: '',
+    style: {}
+  },
+  center: {
+    src: '',
+    style: {}
+  },
+  right: {
+    src: '',
+    style: {}
+  }
+})
 const projectStore = useProjectStore()
 const { resolveText, getTextStyle } = useLanguage()
 const resolvedText = computed(() => resolveText(props.text))
@@ -61,15 +113,20 @@ watch(
     if (val && projectStore.project) {
       // 加载图片
       const basePath = projectStore.projectPath
-      const imagePath = projectStore.imagePathMap[val]
-      if (!imagePath) {
-        src.value = ''
-        return
-      }
-      const result = await getImageByPath(basePath + imagePath)
-      src.value = result?.src!
-    } else {
-      src.value = ''
+      Object.keys(val).forEach(async (key) => {
+        const imagePath = projectStore.imagePathMap[val[key]]
+        if (!imagePath) {
+          img.value[key].src = ''
+          return
+        }
+        const imgInfo = await getImageByPath(basePath + imagePath)
+        const { src, dimensions = { width: 0, height: 0 } } = imgInfo || {}
+        img.value[key].src = src
+        img.value[key].style = {
+          width: dimensions?.width ? `${dimensions.width}px` : 'auto',
+          height: dimensions?.height ? `${dimensions.height}px` : 'auto'
+        }
+      })
     }
   }
 )

src/renderer/src/lvgl-widgets/image-button/index.ts

@@ -42,14 +42,36 @@ export default {
         'LV_OBJ_FLAG_GESTURE_BUBBLE'
       ],
       states: [],
-      ReleasedImage: '',
-      ReleasedImageAlign: 'left',
-      PressedImage: '',
-      PressedImageAlign: 'right',
-      CheckedReleasedImage: '',
-      CheckedReleasedImageAlign: 'center',
-      CheckedPressedImage: '',
-      CheckedPressedImageAlign: 'right'
+      ReleasedImage: {
+        left: '',
+        center: '',
+        right: ''
+      },
+      PressedImage: {
+        left: '',
+        center: '',
+        right: ''
+      },
+      DisableImage: {
+        left: '',
+        center: '',
+        right: ''
+      },
+      CheckedReleasedImage: {
+        left: '',
+        center: '',
+        right: ''
+      },
+      CheckedPressedImage: {
+        left: '',
+        center: '',
+        right: ''
+      },
+      CheckedDisableImage: {
+        left: '',
+        center: '',
+        right: ''
+      }
       // scale: 256,
       // // 抗锯齿
       // antiAliasing: false
@@ -273,116 +295,153 @@ export default {
         canUseEventSet: true
       },
       {
-        label: '释放后',
-        field: 'props.ReleasedImage',
-        valueType: 'image',
-        labelWidth: '100px'
-      },
-      {
-        label: '释放后对齐',
-        field: 'props.ReleasedImageAlign',
-        valueType: 'select',
-        labelWidth: '100px',
-        componentProps: {
-          options: [
-            {
-              label: '居中',
-              value: 'center'
-            },
-            {
-              label: '左对齐',
-              value: 'left'
-            },
-            {
-              label: '右对齐',
-              value: 'right'
-            }
-          ]
-        }
-      },
-      {
-        label: '按下时',
-        field: 'props.PressedImage',
-        valueType: 'image',
-        labelWidth: '100px'
+        label: '释放',
+        valueType: 'group',
+        children: [
+          {
+            label: '左侧',
+            field: 'props.ReleasedImage.left',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '中间',
+            field: 'props.ReleasedImage.center',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '右侧',
+            field: 'props.ReleasedImage.right',
+            valueType: 'image',
+            labelWidth: '100px'
+          }
+        ]
       },
+      // --- 按下时 (Pressed) 分组 ---
       {
-        label: '按下时对齐',
-        field: 'props.PressedImageAlign',
-        valueType: 'select',
-        labelWidth: '100px',
-        componentProps: {
-          options: [
-            {
-              label: '居中',
-              value: 'center'
-            },
-            {
-              label: '左对齐',
-              value: 'left'
-            },
-            {
-              label: '右对齐',
-              value: 'right'
-            }
-          ]
-        }
+        label: '按下',
+        valueType: 'group',
+        children: [
+          {
+            label: '左侧',
+            field: 'props.PressedImage.left',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '中间',
+            field: 'props.PressedImage.center',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '右侧',
+            field: 'props.PressedImage.right',
+            valueType: 'image',
+            labelWidth: '100px'
+          }
+        ]
       },
+      // --- 禁用 (Disable) 分组 ---
       {
-        label: '选中释放后',
-        field: 'props.CheckedReleasedImage',
-        valueType: 'image',
-        labelWidth: '100px'
+        label: '禁用',
+        valueType: 'group',
+        children: [
+          {
+            label: '左侧',
+            field: 'props.DisableImage.left',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '中间',
+            field: 'props.DisableImage.center',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '右侧',
+            field: 'props.DisableImage.right',
+            valueType: 'image',
+            labelWidth: '100px'
+          }
+        ]
       },
+      // --- 选中释放后 (Checked Released) 分组 ---
       {
-        label: '选中释放后对齐',
-        field: 'props.CheckedReleasedImageAlign',
-        valueType: 'select',
-        labelWidth: '100px',
-        componentProps: {
-          options: [
-            {
-              label: '居中',
-              value: 'center'
-            },
-            {
-              label: '左对齐',
-              value: 'left'
-            },
-            {
-              label: '右对齐',
-              value: 'right'
-            }
-          ]
-        }
+        label: '选中释放',
+        valueType: 'group',
+        children: [
+          {
+            label: '左侧',
+            field: 'props.CheckedReleasedImage.left',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '中间',
+            field: 'props.CheckedReleasedImage.center',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '右侧',
+            field: 'props.CheckedReleasedImage.right',
+            valueType: 'image',
+            labelWidth: '100px'
+          }
+        ]
       },
+      // --- 选中按下时 (Checked Pressed) 分组 ---
       {
-        label: '选中按下时',
-        field: 'props.CheckedPressedImage',
-        valueType: 'image',
-        labelWidth: '100px'
+        label: '选中按下',
+        valueType: 'group',
+        children: [
+          {
+            label: '左侧',
+            field: 'props.CheckedPressedImage.left',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '中间',
+            field: 'props.CheckedPressedImage.center',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '右侧',
+            field: 'props.CheckedPressedImage.right',
+            valueType: 'image',
+            labelWidth: '100px'
+          }
+        ]
       },
+      // --- 选中禁用 (Checked Disable) 分组 ---
       {
-        label: '选中按下时对齐',
-        field: 'props.CheckedPressedImageAlign',
-        valueType: 'select',
-        labelWidth: '100px',
-        componentProps: {
-          options: [
-            {
-              label: '居中',
-              value: 'center'
-            },
-            {
-              label: '左对齐',
-              value: 'left'
-            },
-            {
-              label: '右对齐',
-              value: 'right'
-            }
-          ]
-        }
+        label: '选中禁用',
+        valueType: 'group',
+        children: [
+          {
+            label: '左侧',
+            field: 'props.CheckedDisableImage.left',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '中间',
+            field: 'props.CheckedDisableImage.center',
+            valueType: 'image',
+            labelWidth: '100px'
+          },
+          {
+            label: '右侧',
+            field: 'props.CheckedDisableImage.right',
+            valueType: 'image',
+            labelWidth: '100px'
+          }
+        ]
       }
       // {
       //   label: '缩放',