feat: 添加图标按钮 图片导入配置

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

@@ -46,7 +46,7 @@ export default {
           color: '#ffffffff',
           family: 'xx',
           size: 16,
-          weight: 500,
+          weight: 'normal',
           align: 'center'
         },
         border: {
@@ -165,6 +165,11 @@ export default {
         field: 'background',
         valueType: 'background'
       },
+      {
+        label: '字体',
+        field: 'text',
+        valueType: 'text'
+      },
       {
         label: '边框',
         field: 'border',

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

@@ -1,9 +1,14 @@
 <template>
-  <div v-bind="getProps">{{ props.text }}</div>
+  <div v-bind="getProps">
+    <img width="100%" height="100%" :src="defaultImg" />
+    <div>{{ props.text }}</div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import defaultImg from './image.svg'
+
 const props = defineProps<{
   width: number
   height: number
@@ -17,7 +22,7 @@ const getProps = computed(() => {
   const stateStyles = styles.find((item) => item.state === props.state)
 
   return {
-    class: 'button',
+    class: 'image-button',
     style: {
       width: `${props.width}px`,
       height: `${props.height}px`,
@@ -30,21 +35,6 @@ const getProps = computed(() => {
       justifyContent: stateStyles?.text?.align || 'center',
       alignItems: 'center',
 
-      borderRadius: `${stateStyles?.border.radius}px`,
-      borderColor: 'transparent',
-      borderWidth: `${stateStyles?.border.width}px`,
-      borderTopColor: ['all', 'top'].includes(stateStyles?.border?.side)
-        ? stateStyles?.border?.color
-        : 'transparent',
-      borderRightColor: ['all', 'right'].includes(stateStyles?.border?.side)
-        ? stateStyles?.border?.color
-        : 'transparent',
-      borderBottomColor: ['all', 'bottom'].includes(stateStyles?.border?.side)
-        ? stateStyles?.border?.color
-        : 'transparent',
-      borderLeftColor: ['all', 'left'].includes(stateStyles?.border?.side)
-        ? 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}`

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

@@ -25,7 +25,10 @@ export default {
       width: 90,
       height: 45,
       text: '',
-      mode: 'Wrap'
+      image: '',
+      pressedImage: '',
+      selectedImage: '',
+      selectedPressedImage: ''
     },
     styles: [
       {
@@ -34,25 +37,19 @@ export default {
           state: 'default'
         },
         background: {
-          color: '#2195f6',
+          color: '#00000000',
           image: {
             imgId: '',
             color: ''
           }
         },
         text: {
-          color: '#ffffff',
+          color: '#ff00ffff',
           family: '',
-          size: 16,
-          weight: 400,
+          size: 12,
+          weight: 'normal',
           align: 'center'
         },
-        border: {
-          color: '#000000ff',
-          width: 1,
-          radius: 5,
-          side: ['all']
-        },
         shadow: {
           color: '#2092f5ff',
           x: 0,
@@ -77,14 +74,6 @@ export default {
             componentProps: {
               placeholder: '请输入名称'
             }
-          },
-          {
-            label: '类型',
-            field: 'type',
-            valueType: 'text',
-            componentProps: {
-              readOnly: true
-            }
           }
         ]
       },
@@ -127,8 +116,8 @@ export default {
         ]
       },
       {
-        label: '标识',
-        field: 'flags',
+        label: '添加标识',
+        field: 'addFlags',
         valueType: 'select',
         componentProps: {
           options: flagOptions,
@@ -137,19 +126,39 @@ export default {
         }
       },
       {
-        label: '可见',
-        field: 'visible',
-        valueType: 'checkbox'
-      },
-      {
-        label: '启/禁用',
-        field: 'enabled',
-        valueType: 'checkbox'
+        label: '删除标识',
+        field: 'addFlags',
+        valueType: 'select',
+        componentProps: {
+          options: flagOptions,
+          multiple: true,
+          clearable: true
+        }
       },
       {
         label: '文本',
         field: 'text',
         valueType: 'text'
+      },
+      {
+        label: '释放后图片',
+        field: 'image',
+        valueType: 'image'
+      },
+      {
+        label: '按下时图片',
+        field: 'pressedImage',
+        valueType: 'image'
+      },
+      {
+        label: '选中释放后图片',
+        field: 'selectedImage',
+        valueType: 'image'
+      },
+      {
+        label: '选中按下时图片',
+        field: 'selectedPressedImage',
+        valueType: 'image'
       }
     ],
     // 组件样式
@@ -165,29 +174,14 @@ export default {
         valueType: 'background'
       },
       {
-        label: '边框',
-        field: 'border',
-        valueType: 'border'
-      },
-      {
-        label: '内边距',
-        field: 'padding',
-        valueType: 'padding'
-      },
-      {
-        label: '外边距',
-        field: 'margin',
-        valueType: 'margin'
+        label: '字体',
+        field: 'text',
+        valueType: 'text'
       },
       {
         label: '阴影',
         field: 'boxShadow',
         valueType: 'boxShadow'
-      },
-      {
-        label: '对齐',
-        field: 'align',
-        valueType: 'align'
       }
     ]
   }

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

@@ -46,7 +46,7 @@ export default {
           color: '#000000ff',
           family: 'xx',
           size: 16,
-          weight: 500,
+          weight: 'normal',
           align: 'center'
         },
         border: {

src/renderer/src/lvgl-widgets/type.d.ts

@@ -158,8 +158,14 @@ export interface IStyleConfig {
     size: number
     // 对齐方式 left center right
     align: string
-    // 字重
-    weight?: number
+    // 字重 正常/粗
+    weight?: 'normal' | 'bold'
+    // 斜体
+    italic?: boolean
+    // 删除线
+    strike?: boolean
+    // 下划线
+    underline?: boolean
   }
   // 边框样式
   border?: {

src/renderer/src/utils/index.ts

@@ -57,7 +57,6 @@ export function getUUID(randomLength = 6, type: 'number' | 'string' = 'string'):
 export function getAddWidgetIndex(page: Page, type: string) {
   let count = 0
   bfsWalk(page, (node) => {
-    console.log(node)
     if (node.type === type) {
       count++
     }

src/renderer/src/views/designer/config/PropertyConfig.vue

@@ -283,7 +283,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineEmits, computed } from 'vue'
+import { ref, watch, computed } from 'vue'
 import type { Page } from '@/types/page'
 interface Emits {
   (e: 'update:selected', val: Page['props']): void

src/renderer/src/views/designer/sidebar/Resource.vue

@@ -117,7 +117,7 @@ const handleAddImage = async () => {
     filters: [
       {
         name: 'Images',
-        extensions: ['png', 'jpg', 'jpeg', 'gif']
+        extensions: ['png', 'jpg', 'bmp']
       }
     ]
   })

src/renderer/src/views/designer/workspace/index.vue

@@ -114,7 +114,7 @@ const handleTabRemove = (tabName: TabPaneName) => {
 .el-tabs {
   background: var(--bg-primary);
 }
-::v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
+/* ::v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
   background: var(--bg-primary);
-}
+} */
 </style>