feat: 矩阵按钮渲染

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

@@ -1,5 +1,21 @@
 <template>
-  <div v-bind="getProps">{{ props.text }}</div>
+  <div :style="getProps.rootStyle">
+    <div
+      v-for="(row, index) in group || []"
+      :key="index"
+      class="flex-1 w-full flex items-center"
+      :style="getProps.columnStyle"
+    >
+      <div
+        class="flex-1 h-full flex items-center justify-center"
+        :style="getProps.itemStyle"
+        v-for="(item, index) in row || []"
+        :key="`${index}-${index}`"
+      >
+        {{ item }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -9,53 +25,85 @@ import defaultStyle from './style.json'
 const props = defineProps<{
   width: number
   height: number
-  text?: string
+  group?: string[][]
   styles: any
   state?: string
 }>()
 
 const getProps = computed(() => {
   const styles = props.styles
-  let stateStyles = styles.find((item) => item.state === props.state)
+  let mainStyle = styles.find((item) => item.state === props.state && item.part.name === 'main')
+  let itemsStyle = styles.find((item) => item.state === props.state && item.part.name === 'items')
 
   // 从默认样式获取样式
-  if (!stateStyles && props.state) {
-    stateStyles = defaultStyle.part[0].state.find((item) => item.state === props.state)?.style
+  if (!mainStyle && props.state) {
+    mainStyle = defaultStyle.part
+      ?.find((item) => item.partName === 'main')
+      ?.state.find((item) => item.state === props.state)?.style
   }
 
+  if (!itemsStyle && props.state) {
+    itemsStyle = defaultStyle.part
+      ?.find((item) => item.partName === 'items')
+      ?.state.find((item) => item.state === props.state)?.style
+  }
+  console.log(mainStyle, itemsStyle)
   return {
-    class: 'button',
-    style: {
+    rootStyle: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
       width: `${props.width}px`,
       height: `${props.height}px`,
-
-      backgroundColor: stateStyles?.background.color,
-
-      fontSize: `${stateStyles?.text.size}px`,
-      color: stateStyles?.text?.color,
-      display: 'flex',
-      justifyContent: stateStyles?.text?.align || 'center',
-      alignItems: 'center',
-
-      borderRadius: `${stateStyles?.border.radius}px`,
+      backgroundColor: mainStyle?.background.color,
+      borderRadius: `${mainStyle?.border.radius}px`,
+      borderColor: 'transparent',
+      borderWidth: `${mainStyle?.border.width}px`,
+      borderTopColor: ['all', 'top'].includes(mainStyle?.border?.side)
+        ? mainStyle?.border?.color
+        : 'transparent',
+      borderRightColor: ['all', 'right'].includes(mainStyle?.border?.side)
+        ? mainStyle?.border?.color
+        : 'transparent',
+      borderBottomColor: ['all', 'bottom'].includes(mainStyle?.border?.side)
+        ? mainStyle?.border?.color
+        : 'transparent',
+      borderLeftColor: ['all', 'left'].includes(mainStyle?.border?.side)
+        ? mainStyle?.border?.color
+        : 'transparent',
+      gap: `${mainStyle?.gap?.row}px`,
+      // 内边距
+      padding: `${mainStyle?.padding.top}px ${mainStyle?.padding.right}px ${mainStyle?.padding.bottom}px ${mainStyle?.padding.left}px`
+    },
+    itemStyle: {
+      backgroundColor: itemsStyle?.background.color,
+      borderRadius: `${itemsStyle?.border.radius}px`,
       borderColor: 'transparent',
-      borderWidth: `${stateStyles?.border.width}px`,
-      borderTopColor: ['all', 'top'].includes(stateStyles?.border?.side)
-        ? stateStyles?.border?.color
+      borderWidth: `${itemsStyle?.border.width}px`,
+      borderTopColor: ['all', 'top'].includes(itemsStyle?.border?.side)
+        ? itemsStyle?.border?.color
         : 'transparent',
-      borderRightColor: ['all', 'right'].includes(stateStyles?.border?.side)
-        ? stateStyles?.border?.color
+      borderRightColor: ['all', 'right'].includes(itemsStyle?.border?.side)
+        ? itemsStyle?.border?.color
         : 'transparent',
-      borderBottomColor: ['all', 'bottom'].includes(stateStyles?.border?.side)
-        ? stateStyles?.border?.color
+      borderBottomColor: ['all', 'bottom'].includes(itemsStyle?.border?.side)
+        ? itemsStyle?.border?.color
         : 'transparent',
-      borderLeftColor: ['all', 'left'].includes(stateStyles?.border?.side)
-        ? stateStyles?.border?.color
+      borderLeftColor: ['all', 'left'].includes(itemsStyle?.border?.side)
+        ? itemsStyle?.border?.color
         : 'transparent',
+      color: itemsStyle?.text?.color,
+      fontSize: `${itemsStyle?.text.size}px`,
+      fontWeight: itemsStyle?.text?.weight === 'bold' ? 'bold' : 'normal',
+      textAlign: itemsStyle?.text?.align,
+      textDecoration: itemsStyle?.text?.strike ? 'line-through' : itemsStyle?.text?.underline,
       /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
-      boxShodow: stateStyles?.boxShadow
-        ? `${stateStyles?.boxShadow?.offsetX}px ${stateStyles?.boxShadow?.offsetY}px ${stateStyles?.boxShadow?.width}px ${stateStyles?.boxShadow?.spread}px ${stateStyles?.boxShadow?.color}`
+      boxShodow: itemsStyle?.box
+        ? `${itemsStyle.shadow?.offsetX}px ${itemsStyle.shadow?.offsetY}px ${itemsStyle.shadow?.width}px ${itemsStyle.shadow?.spread}px ${itemsStyle.shadow?.color}`
         : 'none'
+    },
+    columnStyle: {
+      gap: `${mainStyle?.gap.column}px`
     }
   }
 })

src/renderer/src/lvgl-widgets/button/Button.vue

@@ -53,8 +53,8 @@ const getProps = computed(() => {
         ? stateStyles?.border?.color
         : 'transparent',
       /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
-      boxShodow: stateStyles?.boxShadow
-        ? `${stateStyles?.boxShadow?.offsetX}px ${stateStyles?.boxShadow?.offsetY}px ${stateStyles?.boxShadow?.width}px ${stateStyles?.boxShadow?.spread}px ${stateStyles?.boxShadow?.color}`
+      boxShodow: stateStyles?.shadow
+        ? `${stateStyles?.shadow?.offsetX}px ${stateStyles?.shadow?.offsetY}px ${stateStyles?.shadow?.width}px ${stateStyles?.shadow?.spread}px ${stateStyles?.shadow?.color}`
         : 'none'
     }
   }

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

@@ -177,8 +177,8 @@ export default {
       },
       {
         label: '阴影',
-        field: 'boxShadow',
-        valueType: 'boxShadow'
+        field: 'shadow',
+        valueType: 'shadow'
       }
     ]
   }

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

@@ -43,8 +43,8 @@ const getStyle = computed(() => {
       ? stateStyles?.border?.color
       : 'transparent',
     /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
-    boxShodow: stateStyles?.boxShadow
-      ? `${stateStyles?.boxShadow?.offsetX}px ${stateStyles?.boxShadow?.offsetY}px ${stateStyles?.boxShadow?.width}px ${stateStyles?.boxShadow?.spread}px ${stateStyles?.boxShadow?.color}`
+    boxShodow: stateStyles?.shadow
+      ? `${stateStyles?.shadow?.offsetX}px ${stateStyles?.shadow?.offsetY}px ${stateStyles?.shadow?.width}px ${stateStyles?.shadow?.spread}px ${stateStyles?.shadow?.color}`
       : 'none'
   }
 })

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

@@ -36,8 +36,8 @@ const getProps = computed(() => {
       alignItems: 'center',
 
       /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
-      boxShodow: stateStyles?.boxShadow
-        ? `${stateStyles?.boxShadow?.offsetX}px ${stateStyles?.boxShadow?.offsetY}px ${stateStyles?.boxShadow?.width}px ${stateStyles?.boxShadow?.spread}px ${stateStyles?.boxShadow?.color}`
+      boxShodow: stateStyles?.shadow
+        ? `${stateStyles?.shadow?.offsetX}px ${stateStyles?.shadow?.offsetY}px ${stateStyles?.shadow?.width}px ${stateStyles?.shadow?.spread}px ${stateStyles?.shadow?.color}`
         : 'none'
     }
   }

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

@@ -168,8 +168,8 @@ export default {
       },
       {
         label: '阴影',
-        field: 'boxShadow',
-        valueType: 'boxShadow'
+        field: 'shadow',
+        valueType: 'shadow'
       }
     ]
   }

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

@@ -46,8 +46,8 @@ const getProps = computed(() => {
         ? stateStyles?.border?.color
         : 'transparent',
       /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
-      boxShodow: stateStyles?.boxShadow
-        ? `${stateStyles?.boxShadow?.offsetX}px ${stateStyles?.boxShadow?.offsetY}px ${stateStyles?.boxShadow?.width}px ${stateStyles?.boxShadow?.spread}px ${stateStyles?.boxShadow?.color}`
+      boxShodow: stateStyles?.shadow
+        ? `${stateStyles?.shadow?.offsetX}px ${stateStyles?.shadow?.offsetY}px ${stateStyles?.shadow?.width}px ${stateStyles?.shadow?.spread}px ${stateStyles?.shadow?.color}`
         : 'none'
     }
   }

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

@@ -197,8 +197,8 @@ export default {
       },
       {
         label: '阴影',
-        field: 'boxShadow',
-        valueType: 'boxShadow'
+        field: 'shadow',
+        valueType: 'shadow'
       }
     ]
   }