fix: 调整控件默认样式

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

@@ -127,43 +127,7 @@ export default {
           state: 'default'
         },
         theme: DEFAULT_THEME_KEY,
-        background: {
-          color: '#ffffffff',
-          image: {
-            imgId: '',
-            recolor: '#ffffff00',
-            alpha: 255
-          }
-        },
-        border: {
-          color: '#c8c8c8ff',
-          width: 1,
-          radius: 4,
-          side: ['all']
-        },
-        outline: {
-          color: '#000000ff',
-          width: 0,
-          pad: 0
-        },
-        padding: {
-          top: 12,
-          right: 12,
-          bottom: 12,
-          left: 12,
-          row: 8,
-          column: 8
-        },
-        transform: {
-          width: 0,
-          height: 0,
-          translateX: 0,
-          translateY: 0,
-          originX: 0,
-          originY: 0,
-          rotate: 0,
-          scale: 256
-        }
+        ...defaultStyle.part.find((item) => item.partName === 'main')?.defaultStyle
       },
       {
         part: {
@@ -171,34 +135,7 @@ export default {
           state: 'default'
         },
         theme: DEFAULT_THEME_KEY,
-        background: {
-          color: '#2092f5ff',
-          image: {
-            imgId: '',
-            recolor: '#00000000',
-            alpha: 255
-          }
-        },
-        text: {
-          color: '#ffffffff',
-          family: 'montserratMedium',
-          size: 16,
-          align: 'center',
-          decoration: 'none'
-        },
-        border: {
-          color: '#c8c8c8ff',
-          width: 1,
-          radius: 4,
-          side: ['all']
-        },
-        shadow: {
-          color: '#2092f5ff',
-          offsetX: 0,
-          offsetY: 0,
-          spread: 0,
-          width: 0
-        }
+        ...defaultStyle.part.find((item) => item.partName === 'items')?.defaultStyle
       }
     ]
   },

src/renderer/src/lvgl-widgets/button-matrix/style.json

@@ -9,14 +9,14 @@
           "color": "#ffffffff",
           "image": {
             "imgId": "",
-            "recolor": "#ffffff00",
+            "recolor": "#00000000",
             "alpha": 255
           }
         },
         "border": {
-          "color": "#c8c8c8ff",
-          "width": 1,
-          "radius": 4,
+          "color": "#e0e0e0ff",
+          "width": 2,
+          "radius": 10,
           "side": ["all"]
         },
         "outline": {
@@ -25,12 +25,12 @@
           "pad": 0
         },
         "padding": {
-          "top": 12,
-          "right": 12,
-          "bottom": 12,
-          "left": 12,
-          "row": 8,
-          "column": 8
+          "top": 20,
+          "right": 20,
+          "bottom": 20,
+          "left": 20,
+          "row": 11,
+          "column": 11
         },
         "transform": {
           "width": 0,
@@ -43,13 +43,98 @@
           "scale": 256
         }
       },
-      "state": []
+      "state": [
+        {
+          "state": "focus key",
+          "style": {
+            "background": {
+              "color": "#ffffffff",
+              "image": {
+                "imgId": "",
+                "recolor": "#00000000",
+                "alpha": 255
+              }
+            },
+            "border": {
+              "color": "#e0e0e0ff",
+              "width": 2,
+              "radius": 10,
+              "side": ["all"]
+            },
+            "outline": {
+              "color": "#2196f37f",
+              "width": 2,
+              "pad": 2
+            },
+            "padding": {
+              "top": 20,
+              "right": 20,
+              "bottom": 20,
+              "left": 20,
+              "row": 11,
+              "column": 11
+            },
+            "transform": {
+              "width": 0,
+              "height": 0,
+              "translateX": 0,
+              "translateY": 0,
+              "originX": 0,
+              "originY": 0,
+              "rotate": 0,
+              "scale": 256
+            }
+          }
+        },
+        {
+          "state": "focus key",
+          "style": {
+            "background": {
+              "color": "#ffffffff",
+              "image": {
+                "imgId": "",
+                "recolor": "#00000000",
+                "alpha": 255
+              }
+            },
+            "border": {
+              "color": "#e0e0e0ff",
+              "width": 2,
+              "radius": 10,
+              "side": ["all"]
+            },
+            "outline": {
+              "color": "#f443367f",
+              "width": 2,
+              "pad": 0
+            },
+            "padding": {
+              "top": 20,
+              "right": 20,
+              "bottom": 20,
+              "left": 20,
+              "row": 11,
+              "column": 11
+            },
+            "transform": {
+              "width": 0,
+              "height": 0,
+              "translateX": 0,
+              "translateY": 0,
+              "originX": 0,
+              "originY": 0,
+              "rotate": 0,
+              "scale": 256
+            }
+          }
+        }
+      ]
     },
     {
       "partName": "items",
       "defaultStyle": {
         "background": {
-          "color": "#2092f5ff",
+          "color": "#e0e0e0ff",
           "image": {
             "imgId": "",
             "recolor": "#00000000",
@@ -57,27 +142,61 @@
           }
         },
         "text": {
-          "color": "#ffffffff",
+          "color": "#212121ff",
           "family": "montserratMedium",
-          "size": 16,
+          "size": 14,
           "align": "center",
           "decoration": "none"
         },
         "border": {
-          "color": "#c8c8c8ff",
-          "width": 1,
-          "radius": 4,
+          "color": "#000000ff",
+          "width": 0,
+          "radius": 13,
           "side": ["all"]
         },
         "shadow": {
-          "color": "#2092f5ff",
+          "color": "#9e9e9e7f",
           "offsetX": 0,
           "offsetY": 0,
           "spread": 0,
           "width": 0
         }
       },
-      "state": []
+      "state": [
+        {
+          "state": "checked",
+          "style": {
+            "background": {
+              "color": "#2196f3ff",
+              "image": {
+                "imgId": "",
+                "recolor": "#00000000",
+                "alpha": 255
+              }
+            },
+            "text": {
+              "color": "#ffffffff",
+              "family": "montserratMedium",
+              "size": 14,
+              "align": "center",
+              "decoration": "none"
+            },
+            "border": {
+              "color": "#000000ff",
+              "width": 0,
+              "radius": 13,
+              "side": ["all"]
+            },
+            "shadow": {
+              "color": "#9e9e9e7f",
+              "offsetX": 0,
+              "offsetY": 0,
+              "spread": 0,
+              "width": 0
+            }
+          }
+        }
+      ]
     }
   ]
 }

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

@@ -88,59 +88,7 @@ export default {
           state: 'default'
         },
         theme: DEFAULT_THEME_KEY,
-        background: {
-          color: '#2195f6ff',
-          image: {
-            imgId: '',
-            recolor: '#ffffff00',
-            alpha: 255
-          }
-        },
-        text: {
-          color: '#ffffffff',
-          family: 'montserratMedium',
-          size: 16,
-          align: 'center',
-          decoration: 'none'
-        },
-        spacer: {
-          lineHeight: 0,
-          letterSpacing: 0
-        },
-        border: {
-          color: '#000000ff',
-          width: 0,
-          radius: 5,
-          side: ['all']
-        },
-        outline: {
-          color: '#000000ff',
-          width: 0,
-          pad: 0
-        },
-        padding: {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0
-        },
-        shadow: {
-          color: '#9E9E9E7F',
-          offsetX: 0,
-          offsetY: 0,
-          spread: 0,
-          width: 0
-        },
-        transform: {
-          width: 0,
-          height: 0,
-          translateX: 0,
-          translateY: 0,
-          originX: 0,
-          originY: 0,
-          rotate: 0,
-          scale: 256
-        }
+        ...defaultStyle.part.find((item) => item.partName === 'main')?.defaultStyle
       }
     ]
   },

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

@@ -6,17 +6,17 @@
       "partName": "main",
       "defaultStyle": {
         "background": {
-          "color": "#2195f6ff",
+          "color": "#2196f3ff",
           "image": {
             "imgId": "",
-            "recolor": "#ffffff00",
+            "recolor": "#00000000",
             "alpha": 255
           }
         },
         "text": {
-          "color": "#000000ff",
+          "color": "#ffffffff",
           "family": "montserratMedium",
-          "size": 16,
+          "size": 14,
           "align": "center",
           "decoration": "none"
         },
@@ -27,7 +27,7 @@
         "border": {
           "color": "#000000ff",
           "width": 0,
-          "radius": 5,
+          "radius": 13,
           "side": ["all"]
         },
         "outline": {
@@ -36,17 +36,17 @@
           "pad": 0
         },
         "padding": {
-          "top": 0,
-          "right": 0,
-          "bottom": 0,
-          "left": 0
+          "top": 11,
+          "right": 20,
+          "bottom": 11,
+          "left": 20
         },
         "shadow": {
           "color": "#9E9E9E7F",
           "offsetX": 0,
-          "offsetY": 0,
+          "offsetY": 2,
           "spread": 0,
-          "width": 0
+          "width": 2
         },
         "transform": {
           "width": 0,
@@ -61,14 +61,176 @@
       },
       "state": [
         {
-          "state": "default",
+          "state": "checked",
+          "style": {
+            "background": {
+              "color": "#f44336ff",
+              "image": {
+                "imgId": "",
+                "recolor": "#00000000",
+                "alpha": 255
+              }
+            },
+            "text": {
+              "color": "#ffffffff",
+              "family": "montserratMedium",
+              "size": 14,
+              "align": "center",
+              "decoration": "none"
+            },
+            "spacer": {
+              "lineHeight": 0,
+              "letterSpacing": 0
+            },
+            "border": {
+              "color": "#000000ff",
+              "width": 0,
+              "radius": 13,
+              "side": ["all"]
+            },
+            "outline": {
+              "color": "#000000ff",
+              "width": 0,
+              "pad": 0
+            },
+            "padding": {
+              "top": 11,
+              "right": 20,
+              "bottom": 11,
+              "left": 20
+            },
+            "shadow": {
+              "color": "#9E9E9E7F",
+              "offsetX": 0,
+              "offsetY": 2,
+              "spread": 0,
+              "width": 2
+            },
+            "transform": {
+              "width": 0,
+              "height": 0,
+              "translateX": 0,
+              "translateY": 0,
+              "originX": 0,
+              "originY": 0,
+              "rotate": 0,
+              "scale": 256
+            }
+          }
+        },
+        {
+          "state": "focus key",
+          "style": {
+            "background": {
+              "color": "#2196f3ff",
+              "image": {
+                "imgId": "",
+                "recolor": "#00000000",
+                "alpha": 255
+              }
+            },
+            "text": {
+              "color": "#ffffffff",
+              "family": "montserratMedium",
+              "size": 14,
+              "align": "center",
+              "decoration": "none"
+            },
+            "spacer": {
+              "lineHeight": 0,
+              "letterSpacing": 0
+            },
+            "border": {
+              "color": "#000000ff",
+              "width": 0,
+              "radius": 13,
+              "side": ["all"]
+            },
+            "outline": {
+              "color": "#2196f37f",
+              "width": 2,
+              "pad": 2
+            },
+            "padding": {
+              "top": 11,
+              "right": 20,
+              "bottom": 11,
+              "left": 20
+            },
+            "shadow": {
+              "color": "#9E9E9E7F",
+              "offsetX": 0,
+              "offsetY": 2,
+              "spread": 0,
+              "width": 2
+            },
+            "transform": {
+              "width": 0,
+              "height": 0,
+              "translateX": 0,
+              "translateY": 0,
+              "originX": 0,
+              "originY": 0,
+              "rotate": 0,
+              "scale": 256
+            }
+          }
+        },
+        {
+          "state": "pressed",
           "style": {
+            "background": {
+              "color": "#2196f3ff",
+              "image": {
+                "imgId": "",
+                "recolor": "#00000000",
+                "alpha": 255
+              }
+            },
             "text": {
               "color": "#ffffffff",
               "family": "montserratMedium",
-              "size": 16,
+              "size": 14,
               "align": "center",
               "decoration": "none"
+            },
+            "spacer": {
+              "lineHeight": 0,
+              "letterSpacing": 0
+            },
+            "border": {
+              "color": "#000000ff",
+              "width": 0,
+              "radius": 13,
+              "side": ["all"]
+            },
+            "outline": {
+              "color": "#000000ff",
+              "width": 0,
+              "pad": 0
+            },
+            "padding": {
+              "top": 11,
+              "right": 20,
+              "bottom": 11,
+              "left": 20
+            },
+            "shadow": {
+              "color": "#9E9E9E7F",
+              "offsetX": 0,
+              "offsetY": 2,
+              "spread": 0,
+              "width": 2
+            },
+            "transform": {
+              "width": 2,
+              "height": 2,
+              "translateX": 0,
+              "translateY": 0,
+              "originX": 0,
+              "originY": 0,
+              "rotate": 0,
+              "scale": 256
             }
           }
         }

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

@@ -9,7 +9,7 @@
         :style="{ ...img.left.style, zIndex: 2 }"
       />
       <ImageBg
-        :src="img.center.src"
+        :src="img.center.src || defaultImg"
         :image-style="styleMap?.mainStyle?.image"
         :style="{ ...img.center.style, zIndex: 1, left: '50%', transform: 'translateX(-50%)' }"
       />
@@ -33,7 +33,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-// import defaultImg from '@/assets/default.png'
+import defaultImg from './image.svg'
 import { useProjectStore } from '@/store/modules/project'
 import { useWidgetStyle } from '../hooks/useWidgetStyle'
 import ImageBg from '../ImageBg.vue'

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

@@ -26,7 +26,7 @@ export default {
       y: 0,
       width: 90,
       height: 45,
-      text: '',
+      text: 'imgbtn',
       flags: [
         'LV_OBJ_FLAG_CLICKABLE',
         'LV_OBJ_FLAG_CLICK_FOCUSABLE',
@@ -83,57 +83,7 @@ export default {
           state: 'default'
         },
         theme: DEFAULT_THEME_KEY,
-        background: {
-          color: '#ffffffff',
-          image: {
-            imgId: '',
-            recolor: '#ffffff00',
-            alpha: 255
-          }
-        },
-        imageStyle: {
-          recolor: '#ffffff00',
-          alpha: 255
-        },
-        text: {
-          color: '#000000ff',
-          family: 'montserratMedium',
-          size: 16,
-          align: 'center',
-          decoration: 'none'
-        },
-        spacer: {
-          lineHeight: 0,
-          letterSpacing: 0
-        },
-        border: {
-          color: '#000000ff',
-          width: 0,
-          radius: 0,
-          side: ['all']
-        },
-        outline: {
-          color: '#000000ff',
-          width: 0,
-          pad: 0
-        },
-        shadow: {
-          color: '#2092f5ff',
-          offsetX: 0,
-          offsetY: 0,
-          spread: 0,
-          width: 0
-        },
-        transform: {
-          width: 0,
-          height: 0,
-          translateX: 0,
-          translateY: 0,
-          originX: 0,
-          originY: 0,
-          rotate: 0,
-          scale: 256
-        }
+        ...defaultStyle.part.find((item) => item.partName === 'main')?.defaultStyle
       },
       {
         part: {

src/renderer/src/lvgl-widgets/image-button/style.json

@@ -6,21 +6,21 @@
       "partName": "main",
       "defaultStyle": {
         "background": {
-          "color": "#ffffffff",
+          "color": "#ffffff00",
           "image": {
             "imgId": "",
-            "recolor": "#ffffff00",
+            "recolor": "#00000000",
             "alpha": 255
           }
         },
         "imageStyle": {
-          "recolor": "#ffffff00",
+          "recolor": "#00000000",
           "alpha": 255
         },
         "text": {
-          "color": "#000000ff",
+          "color": "#21221ff",
           "family": "montserratMedium",
-          "size": 16,
+          "size": 14,
           "align": "center",
           "decoration": "none"
         },
@@ -40,7 +40,7 @@
           "pad": 0
         },
         "shadow": {
-          "color": "#2092f5ff",
+          "color": "#000000ff",
           "offsetX": 0,
           "offsetY": 0,
           "spread": 0,