feat: 新增图像背景组件、修改进度条、滑动条

src/renderer/src/lvgl-widgets/ImageBg.vue

@@ -0,0 +1,15 @@
+<template>
+  <div v-if="src" class="w-full h-full absolute left-0 top-0 z-0">
+    <img width="100%" height="100%" class="absolute z-0" :src="src" />
+    <div v-if="imageColorStyle" class="absolute w-full h-full z-1" :style="imageColorStyle"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CSSProperties } from 'vue'
+
+defineProps<{
+  src?: string
+  imageColorStyle?: CSSProperties
+}>()
+</script>

src/renderer/src/lvgl-widgets/bar/Bar.vue

@@ -1,15 +1,25 @@
 <template>
   <div :style="styleMap?.mainStyle" class="box-border relative">
+    <ImageBg
+      :src="styleMap?.mainStyle?.imageSrc"
+      :image-color-style="styleMap?.mainStyle?.imageColorStyle"
+    />
     <div
       class="absolute left-0 h-full top-0"
       :style="{ ...(styleMap?.indicatorStyle || {}), ...otherStyle }"
-    ></div>
+    >
+      <ImageBg
+        :src="styleMap?.indicatorStyle?.imageSrc"
+        :image-color-style="styleMap?.indicatorStyle?.imageColorStyle"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useWidgetStyle } from '../hooks/useWidgetStyle'
+import ImageBg from '../ImageBg.vue'
 
 const props = defineProps<{
   width?: number

src/renderer/src/lvgl-widgets/container/Container.vue

@@ -1,10 +1,9 @@
 <template>
-  <div :style="getStyle"></div>
+  <div :style="styleMap?.mainStyle"></div>
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties } from 'vue'
-import defaultStyle from './style.json'
+import { useWidgetStyle } from '../hooks/useWidgetStyle'
 
 const props = defineProps<{
   width: number
@@ -13,49 +12,9 @@ const props = defineProps<{
   state: string
 }>()
 
-const getStyle = computed((): CSSProperties => {
-  const { width, height, styles } = props
-
-  let stateStyles = styles.find((item) => item.part.state === props.state)
-
-  // 从默认样式获取样式
-  if (!stateStyles && props.state) {
-    stateStyles = defaultStyle.part[0].state.find((item) => item.state === props.state)?.style
-  }
-
-  return {
-    width: `${width}px`,
-    height: `${height}px`,
-
-    backgroundColor: stateStyles?.background.color,
-
-    boxSizing: 'border-box',
-    borderRadius: `${stateStyles?.border.radius}px`,
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    borderWidth: `${stateStyles?.border.width}px`,
-    borderTopColor:
-      stateStyles?.border?.side?.includes('all') || stateStyles?.border?.side?.includes('top')
-        ? stateStyles?.border?.color
-        : 'transparent',
-    borderRightColor:
-      stateStyles?.border?.side?.includes('all') || stateStyles?.border?.side?.includes('right')
-        ? stateStyles?.border?.color
-        : 'transparent',
-    borderBottomColor:
-      stateStyles?.border?.side?.includes('all') || stateStyles?.border?.side?.includes('bottom')
-        ? stateStyles?.border?.color
-        : 'transparent',
-    borderLeftColor:
-      stateStyles?.border?.side?.includes('all') || stateStyles?.border?.side?.includes('left')
-        ? stateStyles?.border?.color
-        : 'transparent',
-    padding: `${stateStyles?.padding.top}px ${stateStyles?.padding.right}px ${stateStyles?.padding.bottom}px ${stateStyles?.padding.left}px`,
-    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
-    boxShadow: stateStyles?.shadow
-      ? `${stateStyles?.shadow?.x}px ${stateStyles?.shadow?.y}px ${stateStyles?.shadow?.width}px ${stateStyles?.shadow?.spread}px ${stateStyles?.shadow?.color}`
-      : 'none'
-  }
+const styleMap = useWidgetStyle({
+  widget: 'lv_obj',
+  props
 })
 </script>
 

src/renderer/src/lvgl-widgets/slider/Slider.vue

@@ -1,14 +1,27 @@
 <template>
   <div :style="styleMap?.mainStyle" class="box-border relative">
+    <ImageBg
+      :src="styleMap?.mainStyle?.imageSrc"
+      :image-color-style="styleMap?.mainStyle?.imageColorStyle"
+    />
     <div
       class="absolute left-0 h-full top-0"
       :style="{ ...(styleMap?.indicatorStyle || {}), ...otherStyle }"
     >
+      <ImageBg
+        :src="styleMap?.indicatorStyle?.imageSrc"
+        :image-color-style="styleMap?.indicatorStyle?.imageColorStyle"
+      />
       <div
         :style="styleMap?.knobStyle"
         style="height: calc(100% + 8px)"
         class="absolute right-0 top--4px aspect-square"
-      ></div>
+      >
+        <ImageBg
+          :src="styleMap?.knobStyle?.imageSrc"
+          :image-color-style="styleMap?.knobStyle?.imageColorStyle"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -16,6 +29,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useWidgetStyle } from '../hooks/useWidgetStyle'
+import ImageBg from '../ImageBg.vue'
 
 const props = defineProps<{
   width?: number