feat: 修改属性字段

src/renderer/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']

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

@@ -57,22 +57,22 @@
         >
           <el-collapse-item v-if="hasKey('styleMain')" class="p-5px bg-#00000080" title="主体样式">
             <el-collapse-item v-if="hasBackground" title="背景" class="p-5px">
-              <el-form-item v-if="hasKey('styleMain.borderRadius')" label="圆角">
-                <el-input-number v-model="data.styleMain.borderRadius" :min="0" />
+              <el-form-item v-if="hasKey('styleMain.border_radius')" label="圆角">
+                <el-input-number v-model="data.styleMain.border_radius" :min="0" />
               </el-form-item>
               <div class="flex gap-10px">
-                <el-form-item v-if="hasKey('styleMain.bgColor')" label="背景色" class="flex-1">
-                  <el-input v-model="data.styleMain.bgColor" />
+                <el-form-item v-if="hasKey('styleMain.bg_color')" label="背景色" class="flex-1">
+                  <el-input v-model="data.styleMain.bg_color" />
                 </el-form-item>
-                <el-form-item v-if="hasKey('styleMain.bgAlpha')" label="透明度" class="flex-1">
+                <el-form-item v-if="hasKey('styleMain.bg_opa')" label="透明度" class="flex-1">
                   <el-input-number
-                    v-model="data.styleMain.bgAlpha"
+                    v-model="data.styleMain.bg_opa"
                     :min="0"
                     :max="1"
                     :step="0.01"
                     class="flex-1 mr-5px"
                   />
-                  <el-color-picker v-model="data.styleMain.bgColor" class="w-40px" />
+                  <el-color-picker v-model="data.styleMain.bg_color" class="w-40px" />
                 </el-form-item>
               </div>
               <el-form-item
@@ -97,43 +97,43 @@
                   <el-input-number v-model="data.styleMain.tint" :min="0" style="width: 100%" />
                 </el-form-item>
               </div>
-              <el-form-item v-if="hasKey('styleMain.gradientDirection')" label="渐变方向">
-                <el-select v-model="data.styleMain.gradientDirection">
+              <el-form-item v-if="hasKey('styleMain.gradient_direction')" label="渐变方向">
+                <el-select v-model="data.styleMain.gradient_direction">
                   <el-option label="无" value="none" />
                   <el-option label="横向" value="horizontal" />
                   <el-option label="纵向" value="vertical" />
                 </el-select>
               </el-form-item>
-              <el-form-item v-if="hasKey('styleMain.bgImage')" label="背景图片">
-                <el-input v-model="data.styleMain.bgImage" />
+              <el-form-item v-if="hasKey('styleMain.LV_PART_Image')" label="背景图片">
+                <el-input v-model="data.styleMain.LV_PART_Image" />
               </el-form-item>
             </el-collapse-item>
             <el-collapse-item v-if="hasBorder" title="边框" class="p-5px">
               <div class="flex flex-1 gap-10px">
-                <el-form-item v-if="hasKey('styleMain.borderColor')" label="颜色" class="flex-1">
-                  <el-input v-model="data.styleMain.borderColor" />
+                <el-form-item v-if="hasKey('styleMain.border_color')" label="颜色" class="flex-1">
+                  <el-input v-model="data.styleMain.border_color" />
                 </el-form-item>
-                <el-form-item v-if="hasKey('styleMain.borderAlpha')" label="透明度" class="flex-1">
+                <el-form-item v-if="hasKey('styleMain.border_opa')" label="透明度" class="flex-1">
                   <el-input-number
-                    v-model="data.styleMain.borderAlpha"
+                    v-model="data.styleMain.border_opa"
                     :max="255"
                     :min="0"
                     class="flex-1"
                   />
-                  <el-color-picker v-model="data.styleMain.borderColor" class="ml-10px w-40px" />
+                  <el-color-picker v-model="data.styleMain.border_color" class="ml-10px w-40px" />
                 </el-form-item>
               </div>
               <el-select
-                v-if="hasKey('styleMain.borderColor')"
+                v-if="hasKey('styleMain.border_color')"
                 v-model="data.theme"
                 placeholder="可选主题色"
                 class="mt-10px mb-10px"
               />
-              <el-form-item v-if="hasKey('styleMain.borderWidth')" label="宽度">
-                <el-input-number v-model="data.styleMain.borderWidth" :min="0" />
+              <el-form-item v-if="hasKey('styleMain.border_width')" label="宽度">
+                <el-input-number v-model="data.styleMain.border_width" :min="0" />
               </el-form-item>
-              <el-form-item v-if="hasKey('styleMain.borderStyle')" label="样式">
-                <el-select v-model="data.styleMain.borderStyle">
+              <el-form-item v-if="hasKey('styleMain.border_style')" label="样式">
+                <el-select v-model="data.styleMain.border_style">
                   <el-option label="无" value="none" />
                   <el-option label="实线" value="solid" />
                   <el-option label="虚线" value="dashed" />
@@ -143,21 +143,21 @@
             </el-collapse-item>
             <el-collapse-item v-if="hasOutline" title="元素外框线" class="p-5px">
               <div class="flex flex-1 gap-10px">
-                <el-form-item v-if="hasKey('styleMain.outlineColor')" label="颜色" class="flex-1">
-                  <el-input v-model="data.styleMain.outlineColor" />
+                <el-form-item v-if="hasKey('styleMain.outline_color')" label="颜色" class="flex-1">
+                  <el-input v-model="data.styleMain.outline_color" />
                 </el-form-item>
-                <el-form-item v-if="hasKey('styleMain.outlineAlpha')" label="透明度" class="flex-1">
+                <el-form-item v-if="hasKey('styleMain.outline_opa')" label="透明度" class="flex-1">
                   <el-input-number
-                    v-model="data.styleMain.outlineAlpha"
+                    v-model="data.styleMain.outline_opa"
                     :max="255"
                     :min="0"
                     class="flex-1"
                   />
-                  <el-color-picker v-model="data.styleMain.outlineColor" class="ml-10px w-40px" />
+                  <el-color-picker v-model="data.styleMain.outline_color" class="ml-10px w-40px" />
                 </el-form-item>
               </div>
               <el-select
-                v-if="hasKey('styleMain.outlineColor')"
+                v-if="hasKey('styleMain.outline_color')"
                 v-model="data.theme"
                 placeholder="可选主题色"
                 class="mt-10px mb-10px"
@@ -165,34 +165,45 @@
             </el-collapse-item>
             <el-collapse-item v-if="hasBoxShadow" title="阴影效果" class="p-5px">
               <div class="flex flex-1 gap-10px">
-                <el-form-item v-if="hasKey('styleMain.boxShadowColor')" label="颜色">
-                  <el-input v-model="data.styleMain.boxShadowColor" />
+                <el-form-item v-if="hasKey('styleMain.boxShadow_color')" label="颜色">
+                  <el-input v-model="data.styleMain.boxShadow_color" />
                 </el-form-item>
                 <el-form-item
-                  v-if="hasKey('styleMain.boxShadowAlpha')"
+                  v-if="hasKey('styleMain.boxShadow_opa')"
                   label="透明度"
                   class="flex-1"
                 >
                   <el-input-number
-                    v-model="data.styleMain.boxShadowAlpha"
+                    v-model="data.styleMain.boxShadow_opa"
                     :max="255"
                     :min="0"
                     class="flex-1"
                   />
-                  <el-color-picker v-model="data.styleMain.boxShadowColor" class="ml-10px w-40px" />
+                  <el-color-picker
+                    v-model="data.styleMain.boxShadow_color"
+                    class="ml-10px w-40px"
+                  />
                 </el-form-item>
               </div>
               <div class="flex gap-10px">
-                <el-form-item v-if="hasKey('styleMain.boxShadowX')" label="水平偏移" class="flex-1">
+                <el-form-item
+                  v-if="hasKey('styleMain.boxShadow_x')"
+                  label="水平偏移"
+                  class="flex-1"
+                >
                   <el-input-number
-                    v-model="data.styleMain.boxShadowX"
+                    v-model="data.styleMain.boxShadow_x"
                     :min="0"
                     style="width: 100%"
                   />
                 </el-form-item>
-                <el-form-item v-if="hasKey('styleMain.boxShadowY')" label="垂直偏移" class="flex-1">
+                <el-form-item
+                  v-if="hasKey('styleMain.boxShadow_y')"
+                  label="垂直偏移"
+                  class="flex-1"
+                >
                   <el-input-number
-                    v-model="data.styleMain.boxShadowY"
+                    v-model="data.styleMain.boxShadow_y"
                     :min="0"
                     style="width: 100%"
                   />
@@ -200,23 +211,23 @@
               </div>
               <div class="flex gap-10px">
                 <el-form-item
-                  v-if="hasKey('styleMain.boxShadowBlur')"
+                  v-if="hasKey('styleMain.boxShadow_blur')"
                   label="模糊距离"
                   class="flex-1"
                 >
                   <el-input-number
-                    v-model="data.styleMain.boxShadowBlur"
+                    v-model="data.styleMain.boxShadow_blur"
                     :min="0"
                     style="width: 100%"
                   />
                 </el-form-item>
                 <el-form-item
-                  v-if="hasKey('styleMain.boxShadowSpread')"
+                  v-if="hasKey('styleMain.boxShadow_spread')"
                   label="扩散距离"
                   class="flex-1"
                 >
                   <el-input-number
-                    v-model="data.styleMain.boxShadowSpread"
+                    v-model="data.styleMain.boxShadow_spread"
                     :min="0"
                     style="width: 100%"
                   />
@@ -225,32 +236,32 @@
             </el-collapse-item>
             <el-collapse-item v-if="hasPadding" title="内边距" class="p-5px">
               <div class="flex gap-10px">
-                <el-form-item v-if="hasKey('styleMain.paddingTop')" label="上" class="flex-1">
+                <el-form-item v-if="hasKey('styleMain.padding_top')" label="上" class="flex-1">
                   <el-input-number
-                    v-model="data.styleMain.paddingTop"
+                    v-model="data.styleMain.padding_top"
                     :min="0"
                     style="width: 100%"
                   />
                 </el-form-item>
-                <el-form-item v-if="hasKey('styleMain.paddingBottom')" label="下" class="flex-1">
+                <el-form-item v-if="hasKey('styleMain.padding_bottom')" label="下" class="flex-1">
                   <el-input-number
-                    v-model="data.styleMain.paddingBottom"
+                    v-model="data.styleMain.padding_bottom"
                     :min="0"
                     style="width: 100%"
                   />
                 </el-form-item>
               </div>
               <div class="flex gap-10px">
-                <el-form-item v-if="hasKey('styleMain.paddingLeft')" label="左" class="flex-1">
+                <el-form-item v-if="hasKey('styleMain.padding_left')" label="左" class="flex-1">
                   <el-input-number
-                    v-model="data.styleMain.paddingLeft"
+                    v-model="data.styleMain.padding_left"
                     :min="0"
                     style="width: 100%"
                   />
                 </el-form-item>
-                <el-form-item v-if="hasKey('styleMain.paddingRight')" label="右" class="flex-1">
+                <el-form-item v-if="hasKey('styleMain.padding_right')" label="右" class="flex-1">
                   <el-input-number
-                    v-model="data.styleMain.paddingRight"
+                    v-model="data.styleMain.padding_right"
                     :min="0"
                     style="width: 100%"
                   />
@@ -269,6 +280,30 @@
           <div class="flex justify-center items-center">
             <el-button type="primary">添加事件</el-button>
           </div>
+
+          <el-collapse-item
+            v-for="(item, index) in data.events"
+            :key="index"
+            :title="`事件(${item.name})`"
+            class="p-5px bg-#00000080"
+          >
+            <div class="flex gap-10px">
+              <el-form-item label="名称">
+                <el-input v-model="item.name" />
+              </el-form-item>
+              <el-form-item label="触发方式">
+                <el-select v-model="item.trigger">
+                  <el-option label="点击" value="LV_EVENT_CLICKED" />
+                  <el-option label="按下" value="LV_EVENT_PRESSED" />
+                  <el-option label="聚焦" value="LV_EVENT_FOCUSED" />
+                  <el-option label="失焦" value="LV_EVENT_DEFOCUSED" />
+                  <el-option label="释放" value="LV_EVENT_RELEASED" />
+                  <el-option label="值改变" value="LV_EVENT_VALUECHANGED" />
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="flex gap-10px"></div>
+          </el-collapse-item>
         </el-collapse-item>
       </el-collapse>
     </el-form>
@@ -305,51 +340,51 @@ const activeNames = ref<string[]>(['transform', 'style'])
 const hasBackground = computed(() => {
   const sm = data.value.styleMain || {}
   return (
-    sm.borderRadius !== undefined ||
-    sm.bgColor !== undefined ||
-    sm.bgAlpha !== undefined ||
+    sm.border_radius !== undefined ||
+    sm.bg_color !== undefined ||
+    sm.bg_opa !== undefined ||
     sm.gradient !== undefined ||
     sm.shade !== undefined ||
     sm.tint !== undefined ||
-    sm.gradientDirection !== undefined ||
-    sm.bgImage !== undefined
+    sm.gradient_direction !== undefined ||
+    sm.LV_PART_Image !== undefined
   )
 })
 
 const hasBorder = computed(() => {
   const sm = data.value.styleMain || {}
   return (
-    sm.borderColor !== undefined ||
-    sm.borderAlpha !== undefined ||
-    sm.borderWidth !== undefined ||
-    sm.borderStyle !== undefined
+    sm.border_color !== undefined ||
+    sm.border_opa !== undefined ||
+    sm.border_width !== undefined ||
+    sm.border_style !== undefined
   )
 })
 
 const hasOutline = computed(() => {
   const sm = data.value.styleMain || {}
-  return sm.outlineColor !== undefined || sm.outlineAlpha !== undefined
+  return sm.outline_color !== undefined || sm.outline_opa !== undefined
 })
 
 const hasBoxShadow = computed(() => {
   const sm = data.value.styleMain || {}
   return (
-    sm.boxShadowColor !== undefined ||
-    sm.boxShadowAlpha !== undefined ||
-    sm.boxShadowX !== undefined ||
-    sm.boxShadowY !== undefined ||
-    sm.boxShadowBlur !== undefined ||
-    sm.boxShadowSpread !== undefined
+    sm.box_shadow_color !== undefined ||
+    sm.box_shadow_alpha !== undefined ||
+    sm.box_shadow_x !== undefined ||
+    sm.box_shadow_y !== undefined ||
+    sm.box_shadow_blur !== undefined ||
+    sm.box_shadow_spread !== undefined
   )
 })
 
 const hasPadding = computed(() => {
   const sm = data.value.styleMain || {}
   return (
-    sm.paddingTop !== undefined ||
-    sm.paddingBottom !== undefined ||
-    sm.paddingLeft !== undefined ||
-    sm.paddingRight !== undefined
+    sm.padding_top !== undefined ||
+    sm.padding_bottom !== undefined ||
+    sm.padding_left !== undefined ||
+    sm.padding_right !== undefined
   )
 })
 </script>

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

@@ -29,32 +29,39 @@ const data = ref({
   state: [],
   theme: '',
   styleMain: {
-    borderRadius: 0,
-    bgColor: '#ffffff',
-    bgAlpha: 255,
+    border_radius: 0,
+    bg_color: '#ffffff',
+    bg_opa: 255,
     gradient: '',
     shade: 0,
     tint: 0,
-    gradientDirection: 'none',
-    bgImage: '',
-    borderColor: '#000000',
-    borderAlpha: 1,
-    borderWidth: 0,
-    borderStyle: 'solid',
-    boxShadowSpread: 0,
-    boxShadow: '',
-    boxShadowBlur: 0,
-    boxShadowColor: '#000000',
-    boxShadowAlpha: 1,
-    outlineColor: '#ff0000',
-    outlineAlpha: 1,
-    outlineWidth: 0,
-    outlineStyle: 'solid',
-    boxShadowX: 0,
-    boxShadowY: 0
+    gradient_direction: 'none',
+    LV_PART_Image: '',
+    border_color: '#000000',
+    border_opa: 1,
+    border_width: 0,
+    border_style: 'solid',
+    box_shadow_spread: 0,
+    box_shadow: '',
+    box_shadow_blur: 0,
+    box_shadow_color: '#000000',
+    box_shadow_alpha: 1,
+    outline_color: '#ff0000',
+    outline_opa: 1,
+    outline_width: 0,
+    outline_style: 'solid',
+    box_shadow_x: 0,
+    box_shadow_y: 0
   },
   styleItems: {},
-  events: []
+  events: [
+    {
+      name: '点击',
+      trigger: 'LV_EVENT_CLICKED',
+      actions: [],
+      type: ''
+    }
+  ]
 })
 
 watch(