liaojiaxing недель назад: 3
Родитель
Сommit
c45c30f523
27 измененных файлов с 264 добавлено и 186 удалено
  1. 2 2
      src/renderer/src/constants/index.ts
  2. 1 1
      src/renderer/src/lvgl-widgets/animimg/index.ts
  3. 69 76
      src/renderer/src/lvgl-widgets/bar/index.ts
  4. 2 2
      src/renderer/src/lvgl-widgets/base-meter/index.ts
  5. 11 10
      src/renderer/src/lvgl-widgets/bezier/Bezier.vue
  6. 1 1
      src/renderer/src/lvgl-widgets/button-matrix/index.tsx
  7. 1 1
      src/renderer/src/lvgl-widgets/canvas/index.tsx
  8. 1 1
      src/renderer/src/lvgl-widgets/chart/index.tsx
  9. 32 15
      src/renderer/src/lvgl-widgets/dropdown/Dropdown.vue
  10. 18 10
      src/renderer/src/lvgl-widgets/dropdown/index.tsx
  11. 9 6
      src/renderer/src/lvgl-widgets/image-button/ImageButton.vue
  12. 8 8
      src/renderer/src/lvgl-widgets/image-button/index.ts
  13. 12 3
      src/renderer/src/lvgl-widgets/image/index.ts
  14. 1 1
      src/renderer/src/lvgl-widgets/keyboard/index.ts
  15. 1 1
      src/renderer/src/lvgl-widgets/line/index.tsx
  16. 1 1
      src/renderer/src/lvgl-widgets/list/index.tsx
  17. 1 1
      src/renderer/src/lvgl-widgets/menu/index.tsx
  18. 1 1
      src/renderer/src/lvgl-widgets/message/index.tsx
  19. 1 1
      src/renderer/src/lvgl-widgets/roller/index.tsx
  20. 1 1
      src/renderer/src/lvgl-widgets/scale/index.tsx
  21. 84 38
      src/renderer/src/lvgl-widgets/slider/index.ts
  22. 1 1
      src/renderer/src/lvgl-widgets/span-group/index.tsx
  23. 1 1
      src/renderer/src/lvgl-widgets/table/index.tsx
  24. 1 1
      src/renderer/src/lvgl-widgets/tabview/index.tsx
  25. 1 1
      src/renderer/src/lvgl-widgets/tileview/index.tsx
  26. 1 1
      src/renderer/src/lvgl-widgets/window/index.tsx
  27. 1 0
      src/renderer/src/views/designer/config/property/index.vue

+ 2 - 2
src/renderer/src/constants/index.ts

@@ -172,6 +172,7 @@ export const scrollbarModes = [
  * Symbol符号
  */
 export const symbols = [
+  { label: 'LV_SYMBOL_DUMMY', value: '' },
   { label: 'LV_SYMBOL_AUDIO', value: '' },
   { label: 'LV_SYMBOL_VIDEO', value: '' },
   { label: 'LV_SYMBOL_LIST', value: '' },
@@ -231,8 +232,7 @@ export const symbols = [
   { label: 'LV_SYMBOL_EDIT', value: '' },
   { label: 'LV_SYMBOL_BACKSPACE', value: '' },
   { label: 'LV_SYMBOL_SD_CARD', value: '' },
-  { label: 'LV_SYMBOL_NEW_LINE', value: '' },
-  { label: 'LV_SYMBOL_DUMMY', value: '' }
+  { label: 'LV_SYMBOL_NEW_LINE', value: '' }
 ]
 
 /**

+ 1 - 1
src/renderer/src/lvgl-widgets/animimg/index.ts

@@ -266,7 +266,7 @@ export default {
         label: '图片',
         field: '',
         valueType: '',
-        render: (value) => h(Config, { values: value })
+        render: (value) => h(Config, { values: value as any })
       }
     ],
     styles: [

+ 69 - 76
src/renderer/src/lvgl-widgets/bar/index.ts

@@ -46,11 +46,12 @@ export default {
       states: [],
       min: 0,
       max: 100,
-      value: 50,
       animationTime: 1000,
-      animation: false,
-      mode: 'normal',
-      startValue: 20
+      value: 50,
+      animation: true,
+      mode: 'range',
+      startValue: 20,
+      startanimation: true
       // direction: 'left'
     },
     styles: [
@@ -193,14 +194,6 @@ export default {
               span: 12,
               min: -10000,
               max: 10000
-              // onValueChange: (val, formData) => {
-              //   if (val >= formData.props.max) {
-              //     formData.props.min = formData.props.max - 1
-              //   }
-              //   if (formData.props.mode === 'symmetrical' && val >= 0) {
-              //     formData.props.min = -1
-              //   }
-              // }
             },
             slots: { prefix: 'S' }
           },
@@ -211,71 +204,55 @@ export default {
               span: 12,
               min: -10000,
               max: 10000
-              // onValueChange: (val, formData) => {
-              //   if (val <= formData.props.min) {
-              //     formData.props.max = formData.props.min + 1
-              //   }
-              //   if (formData.props.mode === 'symmetrical' && val <= 0) {
-              //     formData.props.min = 1
-              //   }
-              // }
             },
             slots: { prefix: 'E' } as any
           }
         ]
       },
       {
-        valueType: 'dependency',
-        name: ['props.min', 'props.max'],
-        canUseEventSet: true,
-        dependency: (dependency) => {
-          const min = dependency['props.min']
-          const max = dependency['props.max']
-          return [
-            {
-              label: '当前值',
-              field: 'props.value',
-              valueType: 'number',
-              componentProps: {
-                min: Math.min(min, max),
-                max: Math.max(min, max)
-              }
-            }
-          ]
-        }
+        label: '动画时间',
+        field: 'props.animationTime',
+        valueType: 'number',
+        labelWidth: '100px',
+        componentProps: {
+          min: 0,
+          max: 100000
+        },
+        slots: { suffix: 'ms' }
       },
       {
-        label: '动画',
+        label: '',
         valueType: 'group',
         canUseEventSet: true,
         children: [
-          {
-            label: '',
-            field: 'props.animation',
-            valueType: 'switch',
-            componentProps: {
-              span: 6
-            }
-          },
           {
             valueType: 'dependency',
-            name: ['props.animation'],
+            name: ['props.min', 'props.max'],
+            canUseEventSet: true,
             dependency: (dependency) => {
+              const min = dependency['props.min']
+              const max = dependency['props.max']
               return [
                 {
-                  label: '',
-                  field: 'props.animationTime',
+                  label: '当前值',
+                  field: 'props.value',
                   valueType: 'number',
                   componentProps: {
-                    span: 18,
-                    min: 0,
-                    max: 100000,
-                    disabled: !dependency['props.animation']
-                  },
-                  slots: { prefix: 'Time' }
+                    min: Math.min(min, max),
+                    max: Math.max(min, max),
+                    span: 18
+                  }
                 }
               ]
             }
+          },
+          {
+            label: '',
+            field: 'props.animation',
+            valueType: 'switch',
+            componentProps: {
+              span: 6
+            }
           }
         ]
       },
@@ -293,26 +270,42 @@ export default {
         canUseEventSet: true
       },
       {
-        valueType: 'dependency',
-        name: ['props.mode', 'props.min', 'props.max'],
-        dependency: (dependency) => {
-          const min = dependency['props.min']
-          const max = dependency['props.max']
-          return dependency['props.mode'] === 'range'
-            ? [
-                {
-                  label: '开始值',
-                  field: 'props.startValue',
-                  valueType: 'number',
-                  componentProps: {
-                    min: Math.min(min, max),
-                    max: Math.max(min, max)
-                  },
-                  canUseEventSet: true
-                }
-              ]
-            : []
-        }
+        label: '',
+        valueType: 'group',
+        children: [
+          {
+            valueType: 'dependency',
+            name: ['props.mode', 'props.min', 'props.max'],
+            dependency: (dependency) => {
+              const min = dependency['props.min']
+              const max = dependency['props.max']
+              return dependency['props.mode'] === 'range'
+                ? [
+                    {
+                      label: '开始值',
+                      field: 'props.startValue',
+                      valueType: 'number',
+                      componentProps: {
+                        min: Math.min(min, max),
+                        max: Math.max(min, max),
+                        span: 18
+                      },
+                      canUseEventSet: true
+                    }
+                  ]
+                : []
+            }
+          },
+          {
+            label: '',
+            field: 'props.startanimation',
+            valueType: 'switch',
+            componentProps: {
+              span: 6
+            },
+            canUseEventSet: true
+          }
+        ]
       }
     ],
     // 组件样式

+ 2 - 2
src/renderer/src/lvgl-widgets/base-meter/index.ts

@@ -317,13 +317,13 @@ export default {
         label: '指针',
         field: 'props.needles',
         valueType: '',
-        render: (value) => h(NeedlesConfig, { values: value })
+        render: (value) => h(NeedlesConfig, { values: value as any })
       },
       {
         label: '区域',
         field: 'props.sections',
         valueType: '',
-        render: (value) => h(SectionsConfig, { values: value })
+        render: (value) => h(SectionsConfig, { values: value as any })
       }
     ],
     styles: [

+ 11 - 10
src/renderer/src/lvgl-widgets/bezier/Bezier.vue

@@ -6,7 +6,11 @@
       :imageStyle="styleMap?.mainStyle?.imageStyle"
     />
 
-    <svg class="absolute inset-0 w-full h-full block" :viewBox="viewBox" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      class="absolute inset-0 w-full h-full block"
+      :viewBox="viewBox"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         v-if="shapeMode && fillPath"
         :d="fillPath"
@@ -21,7 +25,6 @@
         :stroke-width="strokeWidth"
         :stroke-linecap="styleMap?.mainStyle?.line?.radius ? 'round' : 'butt'"
         stroke-linejoin="round"
-        :stroke-dasharray="dashArray"
       />
     </svg>
   </div>
@@ -60,19 +63,15 @@ const projectStore = useProjectStore()
 
 const viewBox = computed(() => `0 0 ${props.width} ${props.height}`)
 const strokeWidth = computed(() => styleMap.value?.mainStyle?.line?.width ?? 5)
-const dashArray = computed(() => {
-  const line = styleMap.value?.mainStyle?.line
-  const dashWidth = Number(line?.dashWidth || 0)
-  const dashGap = Number(line?.dashGap || 0)
-  return dashWidth > 0 ? `${dashWidth} ${dashGap || dashWidth}` : undefined
-})
 
 const segments = computed(() => {
   if (props.path?.source === 'resource') {
     return (
       projectStore.project?.resources.bezierAnimations.find(
         (item) => item.id === props.path.resourceId
-      )?.segments || props.path?.segments || []
+      )?.segments ||
+      props.path?.segments ||
+      []
     )
   }
   return props.path?.segments || []
@@ -103,7 +102,9 @@ const fillPath = computed(() => {
   const first = segments.value[0]
   const parts = [`M ${first.start.x} ${first.start.y}`]
   segments.value.forEach((segment) => {
-    parts.push(`C ${segment.control1.x} ${segment.control1.y}, ${segment.control2.x} ${segment.control2.y}, ${segment.end.x} ${segment.end.y}`)
+    parts.push(
+      `C ${segment.control1.x} ${segment.control1.y}, ${segment.control2.x} ${segment.control2.y}, ${segment.end.x} ${segment.end.y}`
+    )
   })
   for (let i = 0; i < segments.value.length - 1; i += 1) {
     parts.push(`L ${segments.value[i + 1].start.x} ${segments.value[i + 1].start.y}`)

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

@@ -310,7 +310,7 @@ export default {
         field: '',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/canvas/index.tsx

@@ -188,7 +188,7 @@ export default {
         field: 'props.elements',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/chart/index.tsx

@@ -356,7 +356,7 @@ export default {
         field: 'props.chart_data',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 32 - 15
src/renderer/src/lvgl-widgets/dropdown/Dropdown.vue

@@ -5,16 +5,26 @@
       :src="styleMap?.mainStyle?.imageSrc"
       :imageStyle="styleMap?.mainStyle?.imageStyle"
     />
-    <div class="relative w-full overflow-hidden" :class="direction === 'left' ? 'text-right' : ''">
+    <div
+      class="relative w-full overflow-hidden"
+      :class="direction === 'LV_DIR_LEFT' ? 'text-right' : ''"
+    >
       <span :style="selectedTextStyle">{{ resolvedOptions?.[0]?.text || '' }}</span>
-      <div class="absolute right-0 top-0" :class="direction === 'left' ? 'left-0 right-auto' : ''">
-        <i class="lvgl-icon not-italic" v-html="icon ? getSymbol(icon) : ''" :style="iconStyle"></i>
+      <div
+        class="absolute right-0 top-0"
+        :class="direction === 'LV_DIR_LEFT' ? 'left-0 right-auto' : ''"
+      >
+        <i
+          class="lvgl-icon not-italic"
+          v-html="symbol ? getSymbol(symbol) : ''"
+          :style="iconStyle"
+        ></i>
       </div>
     </div>
     <div
       v-if="showList"
-      :style="{ ...styleMap?.listStyle, ...popStyle }"
-      style="padding: 0; width: 100%; height: auto"
+      :style="{ ...styleMap?.listStyle, ...popStyle, height: props.listheight + 'px' }"
+      style="padding: 0; width: 100%"
       class="absolute bg-white max-h-[120px] overflow-y-auto dropdown-pop"
     >
       <ImageBg
@@ -26,12 +36,12 @@
         class="truncate h-24px leading-24px px-10px box-border"
         v-for="(item, index) in resolvedOptions"
         :key="`${item.raw}-${index}`"
-        :style="index === 0 ? styleMap?.listSelectedStyle : ''"
+        :style="index === 0 ? styleMap?.SelectedStyle : ''"
       >
         <ImageBg
-          v-if="styleMap?.listSelectedStyle?.imageSrc && index === 0"
-          :src="styleMap?.listSelectedStyle?.imageSrc"
-          :imageStyle="styleMap?.listSelectedStyle?.imageStyle"
+          v-if="styleMap?.SelectedStyle?.imageSrc && index === 0"
+          :src="styleMap?.SelectedStyle?.imageSrc"
+          :imageStyle="styleMap?.SelectedStyle?.imageStyle"
         />
         <span class="z-1" :style="item.style">{{ item.text }}</span>
       </div>
@@ -50,12 +60,13 @@ import { useLanguage } from '../hooks/useLanguage'
 const props = defineProps<{
   width: number
   height: number
-  icon?: string
+  symbol?: string
+  listheight?: number
   styles: any
   state?: string
   part?: string
   options: string[]
-  direction?: 'top' | 'bottom' | 'left' | 'right'
+  direction?: 'LV_DIR_TOP' | 'LV_DIR_BOTTOM' | 'LV_DIR_LEFT' | 'LV_DIR_RIGHT'
 }>()
 const { resolveText, getResolvedFontStyle } = useLanguage()
 
@@ -83,17 +94,17 @@ const popStyle = computed((): CSSProperties => {
     ? (styleMap.value?.mainStyle?.borderWidth as string)?.replace('px', '')
     : '0'
 
-  return props.direction === 'left'
+  return props.direction === 'LV_DIR_LEFT'
     ? {
         top: `-${Number(border || 0)}px`,
         left: `calc(-100% - ${Number(border || 0) * 3}px)`
       }
-    : props.direction === 'right'
+    : props.direction === 'LV_DIR_RIGHT'
       ? {
           right: `calc(-100% - ${Number(border || 0) * 3}px)`,
           top: `-${Number(border || 0)}px`
         }
-      : props.direction === 'top'
+      : props.direction === 'LV_DIR_TOP'
         ? {
             top: 'auto',
             bottom: `calc(100% + ${Number(border || 0)}px)`,
@@ -121,7 +132,13 @@ const scrollbarStyle = computed(() => {
 const iconStyle = computed(() => {
   const direction = props.direction
   const rotate =
-    direction === 'top' ? 180 : direction === 'left' ? 90 : direction === 'right' ? -90 : 0
+    direction === 'LV_DIR_TOP'
+      ? 180
+      : direction === 'LV_DIR_LEFT'
+        ? 90
+        : direction === 'LV_DIR_RIGHT'
+          ? -90
+          : 0
   return {
     display: 'flex',
     alignItems: 'center',

+ 18 - 10
src/renderer/src/lvgl-widgets/dropdown/index.tsx

@@ -24,7 +24,7 @@ export default {
       stateList
     },
     {
-      name: 'listSelected',
+      name: 'Selected',
       stateList
     },
     {
@@ -55,9 +55,10 @@ export default {
         'LV_OBJ_FLAG_GESTURE_BUBBLE'
       ],
       states: [],
-      icon: 'LV_SYMBOL_DOWN',
+      symbol: 'LV_SYMBOL_DOWN',
+      listheight: 120,
       options: ['option1', 'option2', 'option3'],
-      direction: 'bottom',
+      direction: 'LV_DIR_BOTOM',
       isStaticText: false
     },
     styles: [
@@ -229,26 +230,33 @@ export default {
         labelWidth: '80px',
         componentProps: {
           options: [
-            { label: 'BOTTOM', value: 'bottom' },
-            { label: 'TOP', value: 'top' },
-            { label: 'LEFT', value: 'left' },
-            { label: 'RIGHT', value: 'right' }
+            { label: 'BOTTOM', value: 'LV_DIR_BOTTOM' },
+            { label: 'TOP', value: 'LV_DIR_TOP' },
+            { label: 'LEFT', value: 'LV_DIR_LEFT' },
+            { label: 'RIGHT', value: 'LV_DIR_RIGHT' }
           ]
         },
         canUseEventSet: true
       },
       {
         label: '图标',
-        field: 'props.icon',
+        field: 'props.symbol',
         valueType: 'symbol',
         labelWidth: '80px',
         canUseEventSet: true
       },
+      {
+        label: '高度',
+        field: 'props.listheight',
+        valueType: 'number',
+        labelWidth: '80px',
+        canUseEventSet: true
+      },
       {
         label: '属性',
         field: 'props.options',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],
@@ -344,7 +352,7 @@ export default {
                     valueType: 'shadow'
                   }
                 ]
-              : part?.name === 'listSelected'
+              : part?.name === 'Selected'
                 ? [
                     {
                       label: '背景',

+ 9 - 6
src/renderer/src/lvgl-widgets/image-button/ImageButton.vue

@@ -33,10 +33,10 @@ const props = defineProps<{
   text?: string
   styles: any
   state?: string
-  image: string
-  pressedImage: string
-  selectedImage: string
-  selectedPressedImage: string
+  ReleasedImage: string
+  PressedImage: string
+  CheckedReleasedImage: string
+  CheckedPressedImage: string
   scale?: number
   antiAliasing?: boolean
 }>()
@@ -45,7 +45,10 @@ const src = ref('')
 const projectStore = useProjectStore()
 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_imagebutton',
@@ -53,7 +56,7 @@ const styleMap = useWidgetStyle({
 })
 
 watch(
-  () => props.image,
+  () => props.ReleasedImage,
   async (val) => {
     if (val && projectStore.project) {
       // 加载图片

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

@@ -42,10 +42,10 @@ export default {
         'LV_OBJ_FLAG_GESTURE_BUBBLE'
       ],
       states: [],
-      image: '',
-      pressedImage: '',
-      selectedImage: '',
-      selectedPressedImage: ''
+      ReleasedImage: '',
+      PressedImage: '',
+      CheckedReleasedImage: '',
+      CheckedPressedImage: ''
       // scale: 256,
       // // 抗锯齿
       // antiAliasing: false
@@ -270,25 +270,25 @@ export default {
       },
       {
         label: '释放后',
-        field: 'props.image',
+        field: 'props.ReleasedImage',
         valueType: 'image',
         labelWidth: '80px'
       },
       {
         label: '按下时',
-        field: 'props.pressedImage',
+        field: 'props.PressedImage',
         valueType: 'image',
         labelWidth: '80px'
       },
       {
         label: '选中释放后',
-        field: 'props.selectedImage',
+        field: 'props.CheckedReleasedImage',
         valueType: 'image',
         labelWidth: '80px'
       },
       {
         label: '选中按下时',
-        field: 'props.selectedPressedImage',
+        field: 'props.CheckedPressedImage',
         valueType: 'image',
         labelWidth: '80px'
       }

+ 12 - 3
src/renderer/src/lvgl-widgets/image/index.ts

@@ -5,6 +5,7 @@ import type { IComponentModelConfig } from '../type'
 import i18n from '@/locales'
 import { getImageByPath } from '@/utils'
 import { useProjectStore } from '@/store/modules/project'
+import defaultStyle from './style.json'
 
 export default {
   label: i18n.global.t('image'),
@@ -14,6 +15,7 @@ export default {
   group: i18n.global.t('basic'),
   sort: 1,
   hasChildren: false,
+  defaultStyle,
   parts: [
     {
       name: 'main',
@@ -246,8 +248,10 @@ export default {
         labelWidth: '60px',
         valueType: 'number',
         componentProps: {
-          min: -360,
-          max: 360
+          min: -3600,
+          max: 3600,
+          step: 0.1,
+          allowDecimal: true
         },
         canUseEventSet: true
       },
@@ -256,7 +260,12 @@ export default {
         field: 'props.openScale',
         labelWidth: '60px',
         valueType: 'switch',
-        canUseEventSet: true
+        canUseEventSet: true,
+        componentProps: {
+          onValueChange: (_val, formData) => {
+            formData.props.scale = 256
+          }
+        }
       },
       {
         valueType: 'dependency',

+ 1 - 1
src/renderer/src/lvgl-widgets/keyboard/index.ts

@@ -207,7 +207,7 @@ export default {
         label: '输入框',
         field: 'props.textareaIds',
         valueType: '',
-        render: (value) => h(Config, { values: value })
+        render: (value) => h(Config, { values: value as any })
       }
     ],
     styles: [

+ 1 - 1
src/renderer/src/lvgl-widgets/line/index.tsx

@@ -180,7 +180,7 @@ export default {
         field: 'props.points',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/list/index.tsx

@@ -253,7 +253,7 @@ export default {
         field: 'props.items',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/menu/index.tsx

@@ -389,7 +389,7 @@ export default {
         label: '属性',
         field: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/message/index.tsx

@@ -250,7 +250,7 @@ export default {
         label: '按钮组',
         field: 'props.btns',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/roller/index.tsx

@@ -226,7 +226,7 @@ export default {
         field: '',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/scale/index.tsx

@@ -320,7 +320,7 @@ export default {
         label: '区域',
         field: 'props.area',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 84 - 38
src/renderer/src/lvgl-widgets/slider/index.ts

@@ -50,9 +50,12 @@ export default {
       states: [],
       min: 0,
       max: 100,
+      animationTime: 1000,
       value: 50,
-      mode: 'normal',
+      animation: true,
+      mode: 'range',
       startValue: 20,
+      startanimation: true,
       direction: 'left'
     },
     styles: [
@@ -211,24 +214,51 @@ export default {
         ]
       },
       {
-        valueType: 'dependency',
-        name: ['props.min', 'props.max'],
-        dependency: (dependency) => {
-          const min = dependency['props.min']
-          const max = dependency['props.max']
-          return [
-            {
-              label: '当前值',
-              field: 'props.value',
-              valueType: 'number',
-              componentProps: {
-                min: Math.min(min, max),
-                max: Math.max(min, max)
-              },
-              canUseEventSet: true
+        label: '动画时间',
+        field: 'props.animationTime',
+        valueType: 'number',
+        labelWidth: '100px',
+        componentProps: {
+          min: 0,
+          max: 100000
+        },
+        slots: { suffix: 'ms' }
+      },
+      {
+        label: '',
+        valueType: 'group',
+        canUseEventSet: true,
+        children: [
+          {
+            valueType: 'dependency',
+            name: ['props.min', 'props.max'],
+            canUseEventSet: true,
+            dependency: (dependency) => {
+              const min = dependency['props.min']
+              const max = dependency['props.max']
+              return [
+                {
+                  label: '当前值',
+                  field: 'props.value',
+                  valueType: 'number',
+                  componentProps: {
+                    min: Math.min(min, max),
+                    max: Math.max(min, max),
+                    span: 18
+                  }
+                }
+              ]
             }
-          ]
-        }
+          },
+          {
+            label: '',
+            field: 'props.animation',
+            valueType: 'switch',
+            componentProps: {
+              span: 6
+            }
+          }
+        ]
       },
       {
         label: '模式',
@@ -244,26 +274,42 @@ export default {
         canUseEventSet: true
       },
       {
-        valueType: 'dependency',
-        name: ['props.mode', 'props.min', 'props.max'],
-        dependency: (dependency) => {
-          const min = dependency['props.min']
-          const max = dependency['props.max']
-          return dependency['props.mode'] === 'range'
-            ? [
-                {
-                  label: '左边值',
-                  field: 'props.startValue',
-                  valueType: 'number',
-                  componentProps: {
-                    min: Math.min(min, max),
-                    max: Math.max(min, max)
-                  },
-                  canUseEventSet: true
-                }
-              ]
-            : []
-        }
+        label: '',
+        valueType: 'group',
+        children: [
+          {
+            valueType: 'dependency',
+            name: ['props.mode', 'props.min', 'props.max'],
+            dependency: (dependency) => {
+              const min = dependency['props.min']
+              const max = dependency['props.max']
+              return dependency['props.mode'] === 'range'
+                ? [
+                    {
+                      label: '开始值',
+                      field: 'props.startValue',
+                      valueType: 'number',
+                      componentProps: {
+                        min: Math.min(min, max),
+                        max: Math.max(min, max),
+                        span: 18
+                      },
+                      canUseEventSet: true
+                    }
+                  ]
+                : []
+            }
+          },
+          {
+            label: '',
+            field: 'props.startanimation',
+            valueType: 'switch',
+            componentProps: {
+              span: 6
+            },
+            canUseEventSet: true
+          }
+        ]
       }
     ],
     // 组件样式

+ 1 - 1
src/renderer/src/lvgl-widgets/span-group/index.tsx

@@ -216,7 +216,7 @@ export default {
         label: '内容列表',
         field: 'props.items',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/table/index.tsx

@@ -254,7 +254,7 @@ export default {
         field: '',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/tabview/index.tsx

@@ -265,7 +265,7 @@ export default {
         label: '属性',
         field: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/tileview/index.tsx

@@ -220,7 +220,7 @@ export default {
         field: '',
         valueType: '',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 1
src/renderer/src/lvgl-widgets/window/index.tsx

@@ -246,7 +246,7 @@ export default {
         label: '按钮组',
         field: 'props.btns',
         render: (val) => {
-          return <Config values={val} />
+          return <Config values={val as any} />
         }
       }
     ],

+ 1 - 0
src/renderer/src/views/designer/config/property/index.vue

@@ -364,6 +364,7 @@ const onChangeStyleByState = (type: 'select' | 'cancel') => {
   if (type === 'select') {
     const { defaultStyle, stateStyle } = getWidgetDefaultStyle()
     const mergedStyle = assign({}, defaultStyle, stateStyle)
+    console.log(defaultStyle, stateStyle, mergedStyle, projectStore.globalStyle)
     if (styleFormData.value) {
       const fields = getStyleFields(formConfig.value.styles || []).flat(Infinity)
       fields.forEach((field) => {