fix: 修改控件问题

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

@@ -4,6 +4,7 @@
     v-if="getImgSrc"
     class="w-full h-full absolute left-0 top-0 z-0 overflow-hidden flex items-center justify-center"
     :style="{ opacity: imageStyle?.opacity }"
+    v-bind="$attrs"
   >
     <img v-bind="imageProps" class="absolute z-0" :src="getImgSrc" />
     <img
@@ -29,6 +30,10 @@ const props = defineProps<{
   imageProps?: ImgHTMLAttributes
 }>()
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const wrapperRef = ref<HTMLDivElement>()
 const imgRef = ref<HTMLImageElement>()
 const projectStore = useProjectStore()

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

@@ -1,13 +1,13 @@
 <template>
   <div :style="styleMap?.mainStyle" class="w-full h-full box-border relative">
-    <ImageBg
-      :src="styleMap?.mainStyle?.imageSrc"
-      :image-color-style="styleMap?.mainStyle?.imageStyle"
-    />
-    <div class="absolute" :style="{ ...(styleMap?.indicatorStyle || {}), ...otherStyle }">
+    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :image-style="styleMap?.mainStyle?.imageStyle" />
+    <div
+      class="absolute overflow-hidden"
+      :style="{ ...(styleMap?.indicatorStyle || {}), ...otherStyle }"
+    >
       <ImageBg
         :src="styleMap?.indicatorStyle?.imageSrc"
-        :image-color-style="styleMap?.indicatorStyle?.imageStyle"
+        :image-style="styleMap?.indicatorStyle?.imageStyle"
       />
     </div>
   </div>

src/renderer/src/lvgl-widgets/button-matrix/ButtonMatrix.vue

@@ -6,7 +6,7 @@
     <ImageBg
       v-if="styleMap?.mainStyle?.imageSrc"
       :src="styleMap?.mainStyle?.imageSrc"
-      :image-color-style="styleMap?.mainStyle?.imageStyle"
+      :image-style="styleMap?.mainStyle?.imageStyle"
     />
     <div
       v-for="(row, index) in resolvedGroup"
@@ -29,13 +29,13 @@
         <!-- <ImageBg
           v-if="getBtnStyle(item)?.imageSrc"
           :src="getBtnStyle(item)?.imageSrc"
-          :image-color-style="getBtnStyle(item)?.imageStyle"
+          :image-style="getBtnStyle(item)?.imageStyle"
         /> -->
         <!-- 不使用自定义 -->
         <ImageBg
           v-if="styleMap?.itemsStyle?.imageSrc"
           :src="styleMap?.itemsStyle?.imageSrc"
-          :image-color-style="styleMap?.itemsStyle?.imageStyle"
+          :image-style="styleMap?.itemsStyle?.imageStyle"
         />
         <span class="z-2" :style="item.resolvedStyle" v-html="item.resolvedText.text"></span>
       </div>

src/renderer/src/lvgl-widgets/checkbox/Checkbox.vue

@@ -7,7 +7,7 @@
     />
     <div
       :style="{ ...styleMap?.indicatorStyle, backgroundColor: 'transparent' }"
-      class="h-16px w-16px shrink-0 overflow-hidden relative"
+      class="h-16px w-16px shrink-0 overflow-hidden relative z-1"
     >
       <BsCheckSquareFill
         v-if="part === 'indicator' && state !== 'default'"
@@ -16,7 +16,7 @@
         :color="styleMap?.indicatorStyle?.backgroundColor"
       />
     </div>
-    <div class="ml-8px whitespace-pre!" :style="textStyle">{{ resolvedText.text }}</div>
+    <div class="ml-8px whitespace-pre! z-1" :style="textStyle">{{ resolvedText.text }}</div>
   </div>
 </template>
 
@@ -37,7 +37,10 @@ const props = defineProps<{
 }>()
 const { resolveText, getTextStyle } = useLanguage()
 const resolvedText = computed(() => resolveText(props.text))
-const textStyle = getTextStyle(() => undefined, () => props.text)
+const textStyle = getTextStyle(
+  () => undefined,
+  () => props.text
+)
 
 const styleMap = useWidgetStyle({
   widget: 'lv_checkbox',

src/renderer/src/lvgl-widgets/hooks/useLongMode.ts

@@ -18,6 +18,9 @@ export const useLongMode = (
     height: number
     text?: string
     [key: string]: any
+  },
+  options?: {
+    preserveLineBreaks?: boolean
   }
 ) => {
   const handleLongMode = () => {
@@ -59,7 +62,7 @@ export const useLongMode = (
           break
         }
         default: {
-          el.value.style.whiteSpace = 'normal'
+          el.value.style.whiteSpace = options?.preserveLineBreaks ? 'pre-wrap' : 'normal'
           el.value.style.textOverflow = 'clip'
           el.value.style.wordBreak = 'break-all'
           break

src/renderer/src/lvgl-widgets/label/Label.vue

@@ -14,7 +14,7 @@
     <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
     <span
       ref="txtRef"
-      class="z-2 lv_label_txt break-all whitespace-pre"
+      class="z-2 lv_label_txt break-all whitespace-pre-wrap"
       :style="textStyle"
       v-html="innerText"
     ></span>
@@ -108,8 +108,10 @@ const highlight = (html: string, start: number, end: number): string => {
 }
 
 // 处理symbol图标
+const normalizeLineBreaks = (text: string) => text.replace(/\\r\\n|\\n|\\r/g, '\n')
+
 const innerText = computed(() => {
-  const text = resolveText(props.text, true).text
+  const text = normalizeLineBreaks(resolveText(props.text, true).text)
   const pattern = /\{LV[^}]*\}/g
   const matches = text.match(pattern)
   const map: Record<string, string> = {}
@@ -143,7 +145,7 @@ const styleMap = useWidgetStyle({
   props
 })
 
-useLongMode(txtRef, boxRef, props)
+useLongMode(txtRef, boxRef, props, { preserveLineBreaks: true })
 </script>
 
 <style scoped>

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

@@ -1,13 +1,10 @@
 <template>
   <div :style="styleMap?.mainStyle" class="w-full h-full box-border relative">
-    <ImageBg
-      :src="styleMap?.mainStyle?.imageSrc"
-      :image-color-style="styleMap?.mainStyle?.imageStyle"
-    />
+    <ImageBg :src="styleMap?.mainStyle?.imageSrc" :image-style="styleMap?.mainStyle?.imageStyle" />
     <div class="absolute" :style="{ ...(styleMap?.indicatorStyle || {}), ...otherStyle.barStyle }">
       <ImageBg
         :src="styleMap?.indicatorStyle?.imageSrc"
-        :image-color-style="styleMap?.indicatorStyle?.imageStyle"
+        :image-style="styleMap?.indicatorStyle?.imageStyle"
       />
       <!-- 左边值 -->
       <div
@@ -20,7 +17,7 @@
       >
         <ImageBg
           :src="styleMap?.knobStyle?.imageSrc"
-          :image-color-style="styleMap?.knobStyle?.imageStyle"
+          :image-style="styleMap?.knobStyle?.imageStyle"
         />
       </div>
       <!-- 右边值 -->
@@ -33,7 +30,7 @@
       >
         <ImageBg
           :src="styleMap?.knobStyle?.imageSrc"
-          :image-color-style="styleMap?.knobStyle?.imageStyle"
+          :image-style="styleMap?.knobStyle?.imageStyle"
         />
       </div>
     </div>

src/renderer/src/lvgl-widgets/textarea/Textarea.vue

@@ -10,7 +10,7 @@
       :src="styleMap?.mainStyle?.imageSrc"
       :imageStyle="styleMap?.mainStyle?.imageStyle"
     />
-    <span ref="txtRef" class="w-full overflow-hidden whitespace-pre!" :style="contentStyle">{{
+    <span ref="txtRef" class="w-full overflow-hidden whitespace-pre! z-1" :style="contentStyle">{{
       getContent
     }}</span>
     <div