fix: 问题修复

src/renderer/src/lvgl-widgets/button-matrix/index.tsx

@@ -131,7 +131,7 @@ export default {
           color: '#ffffffff',
           image: {
             imgId: '',
-            color: '',
+            recolor: '#ffffff00',
             alpha: 255
           }
         },

src/renderer/src/lvgl-widgets/checkbox/index.ts

@@ -196,7 +196,10 @@ export default {
                 {
                   label: '背景',
                   field: 'background',
-                  valueType: 'background'
+                  valueType: 'background',
+                  componentProps: {
+                    useType: 'both'
+                  }
                 },
                 {
                   label: '字体',

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

@@ -274,11 +274,11 @@ export const useWidgetStyle = (param: StyleParam) => {
       )
 
       // 排除不需要用预设样式样式选项，[border、outline、shadow]
-      const excludeKeys = ['border', 'outline', 'shadow']
-      excludeKeys.forEach((key) => {
-        delete presetStyle?.[key]
-        delete defaultStyle?.[key]
-      })
+      // const excludeKeys = ['border', 'outline', 'shadow']
+      // excludeKeys.forEach((key) => {
+      //   delete presetStyle?.[key]
+      //   delete defaultStyle?.[key]
+      // })
 
       // 合并到预设样式
       style = assign({}, presetStyle || {}, defaultStyle || {}, style || {})

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

@@ -82,9 +82,9 @@ const highlight = (html: string, start: number, end: number): string => {
       }
     }
   }
-
+  console.log('高亮结果', result, styleMap)
   // 第二部分：高亮内容
-  result += '<span class="highlight">'
+  result += `<span style="color: ${styleMap.value?.selectedStyle.color};background-color: ${styleMap.value?.selectedStyle.backgroundColor};">` // 这里可以根据需要设置高亮的样式
 
   while (i < html.length && charIndex < end) {
     if (html.substring(i, i + 3) === '<i ') {
@@ -156,7 +156,4 @@ useLongMode(txtRef, boxRef, props, { preserveLineBreaks: true })
 .lv_label_txt::-webkit-scrollbar {
   display: none;
 }
-:deep(.highlight) {
-  background: white;
-}
 </style>

src/renderer/src/lvgl-widgets/label/index.ts

@@ -17,6 +17,10 @@ export default {
     {
       name: 'main',
       stateList
+    },
+    {
+      name: 'selected',
+      stateList
     }
   ],
   defaultSchema: {
@@ -42,8 +46,8 @@ export default {
       states: [],
       text: 'Label',
       longMode: 'wrap',
-      lightStart: -1,
-      lightEnd: -1,
+      lightStart: 0,
+      lightEnd: 0,
       isStaticText: false
     },
     styles: [
@@ -268,46 +272,74 @@ export default {
         valueType: 'part'
       },
       {
-        label: '背景',
-        field: 'background',
-        valueType: 'background'
-      },
-      {
-        label: '字体',
-        field: 'text',
-        valueType: 'font'
-      },
-      {
-        label: '间距',
-        field: 'spacer',
-        valueType: 'spacer'
-      },
-      {
-        label: '边框',
-        field: 'border',
-        valueType: 'border'
-      },
-      {
-        label: '轮廓',
-        field: 'outline',
-        valueType: 'outline'
-      },
-      {
-        label: '内边距',
-        field: 'padding',
-        valueType: 'padding'
-      },
-      {
-        label: '阴影',
-        field: 'shadow',
-        valueType: 'shadow'
-      },
-      {
-        label: '变换',
-        field: 'transform',
-        valueType: 'transform',
-        componentProps: {
-          showWH: true
+        valueType: 'dependency',
+        name: ['part'],
+        dependency: ({ part }) => {
+          if (part?.name === 'main') {
+            return [
+              {
+                label: '背景',
+                field: 'background',
+                valueType: 'background'
+              },
+              {
+                label: '字体',
+                field: 'text',
+                valueType: 'font'
+              },
+              {
+                label: '间距',
+                field: 'spacer',
+                valueType: 'spacer'
+              },
+              {
+                label: '边框',
+                field: 'border',
+                valueType: 'border'
+              },
+              {
+                label: '轮廓',
+                field: 'outline',
+                valueType: 'outline'
+              },
+              {
+                label: '内边距',
+                field: 'padding',
+                valueType: 'padding'
+              },
+              {
+                label: '阴影',
+                field: 'shadow',
+                valueType: 'shadow'
+              },
+              {
+                label: '变换',
+                field: 'transform',
+                valueType: 'transform',
+                componentProps: {
+                  showWH: true
+                }
+              }
+            ]
+          }
+          return [
+            {
+              label: '背景',
+              field: 'background',
+              valueType: 'background',
+              componentProps: {
+                onlyColor: true
+              }
+            },
+            {
+              label: '字体',
+              field: 'text',
+              valueType: 'font',
+              componentProps: {
+                onlyColor: true
+              }
+            }
+          ]
         }
       }
     ]

src/renderer/src/lvgl-widgets/label/style.json

@@ -60,6 +60,18 @@
         }
       },
       "state": []
+    },
+    {
+      "partName": "selected",
+      "defaultStyle": {
+        "background": {
+          "color": "#ffffffff"
+        },
+        "text": {
+          "color": "#000000ff"
+        }
+      },
+      "state": []
     }
   ]
 }

src/renderer/src/views/designer/config/property/components/StyleBorder.vue

@@ -154,6 +154,10 @@ const max = computed(() => {
   if (!activeWidget) return
   const width = activeWidget.props.width || 0
   const height = activeWidget.props.height || 0
+
+  if (!width || !height) {
+    return
+  }
   return Math.min(width, height) / 2
 })
 

src/renderer/src/views/designer/config/property/components/StyleFont.vue

@@ -8,7 +8,7 @@
       </ColorPicker>
       <span class="text-text-active">{{ modelValue?.color }}</span>
     </el-form-item>
-    <el-form-item label="大小" label-position="left" label-width="60px">
+    <el-form-item v-if="!onlyColor" label="大小" label-position="left" label-width="60px">
       <input-number
         v-model="size"
         controls-position="right"
@@ -17,7 +17,7 @@
         :max="1000"
       />
     </el-form-item>
-    <el-form-item label="样式" label-position="left" label-width="60px">
+    <el-form-item v-if="!onlyColor" label="样式" label-position="left" label-width="60px">
       <el-select v-model="family">
         <template #label="{ label }">
           <div :style="{ fontFamily: `'${label}'` }">{{ label }}</div>
@@ -34,10 +34,20 @@
         </el-option>
       </el-select>
     </el-form-item>
-    <el-form-item v-if="!hideAlign" label="对齐" label-position="left" label-width="60px">
+    <el-form-item
+      v-if="!hideAlign && !onlyColor"
+      label="对齐"
+      label-position="left"
+      label-width="60px"
+    >
       <el-select-v2 v-model="align" :options="alignOptions" />
     </el-form-item>
-    <el-form-item v-if="!hideDecoration" label="装饰" label-position="left" label-width="60px">
+    <el-form-item
+      v-if="!hideDecoration && !onlyColor"
+      label="装饰"
+      label-position="left"
+      label-width="60px"
+    >
       <el-select-v2
         v-model="decoration"
         :options="[
@@ -60,6 +70,7 @@ import { useProjectStore } from '@/store/modules/project'
 defineProps<{
   hideAlign?: boolean
   hideDecoration?: boolean
+  onlyColor?: boolean
 }>()
 const projectStore = useProjectStore()
 // 字体选项