feat: 修改滚动条为el-scrollbar，属性修改/添加变量页面

src/renderer/src/constants/index.ts

@@ -58,3 +58,22 @@ export const stateOptions = [
   { label: 'User4', value: 'LV_STATE_USER_4' },
   { label: 'Any', value: 'LV_STATE_ANY' }
 ]
+
+/**
+ * 变量数据类型
+ */
+
+export const variableType = [
+  { label: 'String', value: 'LV_STRING' },
+  { label: 'INT', value: 'LV_INT' },
+  { label: 'FLOAT', value: 'LV_FLOAT' },
+  { label: 'DOUBLE', value: 'LV_DOUBLE' },
+  { label: 'DECIMAL', value: 'LV_DECIMAL' },
+  { label: 'DATE', value: 'LV_DATE' },
+  { label: 'TIME', value: 'LV_TIME' },
+  { label: 'DATETIME', value: 'LV_DATETIME' },
+  { label: 'BOOLEAN', value: 'LV_BOOLEAN' },
+  { label: 'LIST<T>', value: 'LV_LIST<T>' },
+  { label: 'OBJECT', value: 'LV_OBJECT' },
+  { label: 'BYTE_ARRAY', value: 'LV_BYTE_ARRAY' }
+]

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

@@ -1,22 +1,25 @@
 <template>
-  <div class="config pr-20px pl-20px h-[calc(100vh-198px)] overflow-auto">
+  <el-scrollbar :height="'calc(100vh - 198px)'" class="config pr-10px pl-10px">
     <el-form label-position="top">
+      <el-form-item label="名称">
+        <el-input v-model="data.name" />
+      </el-form-item>
       <el-collapse v-model="activeNames">
         <el-collapse-item title="Transform" name="transform">
           <div class="flex gap-10px">
             <el-form-item v-if="hasKey('x')" label="X" class="flex-1">
-              <el-input v-model="data.x" />
+              <el-input-number v-model="data.x" style="width: 100%" />
             </el-form-item>
             <el-form-item v-if="hasKey('y')" label="Y" class="flex-1">
-              <el-input v-model="data.y" />
+              <el-input-number v-model="data.y" style="width: 100%" />
             </el-form-item>
           </div>
           <div class="flex gap-10px">
             <el-form-item v-if="hasKey('width')" label="宽度" class="flex-1">
-              <el-input v-model="data.width" />
+              <el-input-number v-model="data.width" style="width: 100%" />
             </el-form-item>
             <el-form-item v-if="hasKey('height')" label="高度" class="flex-1">
-              <el-input v-model="data.height" />
+              <el-input-number v-model="data.height" style="width: 100%" />
             </el-form-item>
           </div>
 
@@ -274,40 +277,9 @@
             123
           </el-collapse-item>
         </el-collapse-item>
-
-        <!-- 事件 -->
-        <el-collapse-item v-if="hasKey('events')" title="事件" name="events">
-          <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>
-  </div>
+  </el-scrollbar>
 </template>
 
 <script setup lang="ts">
@@ -393,16 +365,7 @@ const hasPadding = computed(() => {
 :deep(.el-form-item) {
   margin-bottom: 5px;
 }
-// :deep(.el-input__wrapper) {
-//   box-shadow: none !important;
-//   border-radius: 0 !important;
-//   border: none !important;
-//   border-bottom: 1px solid #dcdfe6 !important;
-//   box-sizing: border-box !important;
-// }
-
-// :deep(.el-input__wrapper.is-focus) {
-//   box-shadow: none !important;
-//   border-bottom: 1px solid #409eff !important;
-// }
+:deep(.el-collapse-item__header) {
+  padding-right: 0px;
+}
 </style>

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

@@ -0,0 +1,25 @@
+<template>
+  <el-scrollbar :height="'calc(100vh - 198px)'" class="config pr-10px pl-10px">
+    <el-form label-position="top"> </el-form>
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineEmits, computed } from 'vue'
+import type { VariableGroup } from '@/types/variables'
+interface Emits {
+  (e: 'update:variables', val: VariableGroup[]): void
+}
+const props = defineProps<{
+  variables?: VariableGroup[]
+}>()
+</script>
+
+<style lang="less" scoped>
+:deep(.el-form-item) {
+  margin-bottom: 5px;
+}
+:deep(.el-collapse-item__header) {
+  padding-right: 0px;
+}
+</style>

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

@@ -4,7 +4,9 @@
       <el-tab-pane label="属性">
         <property-config v-model:selected="data" />
       </el-tab-pane>
-      <el-tab-pane label="变量"></el-tab-pane>
+      <el-tab-pane label="变量">
+        <variable-config v-model:variables="data.variables" />
+      </el-tab-pane>
       <el-tab-pane label="动画"></el-tab-pane>
       <el-tab-pane label="多语言"></el-tab-pane>
       <el-tab-pane label="历史"></el-tab-pane>
@@ -15,8 +17,10 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import PropertyConfig from './PropertyConfig.vue'
+import VariableConfig from './VariableConfig.vue'
 
 const data = ref({
+  name: '对象1',
   type: 'lv_obj',
   id: 'component-1',
   x: 0,
@@ -51,7 +55,17 @@ const data = ref({
     outline_width: 0,
     outline_style: 'solid',
     box_shadow_x: 0,
-    box_shadow_y: 0
+    box_shadow_y: 0,
+    boxShadow_color: '',
+    boxShadow_opa: 0,
+    boxShadow_x: 0,
+    boxShadow_y: 0,
+    boxShadow_blur: 0,
+    boxShadow_spread: 0,
+    padding_top: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    padding_right: 0
   },
   styleItems: {},
   events: [
@@ -61,6 +75,33 @@ const data = ref({
       actions: [],
       type: ''
     }
+  ],
+  variables: [
+    // 全局变量组
+    {
+      id: 'page_group_1',
+      name: '全局变量',
+      variables: [
+        {
+          id: '1',
+          name: 'pageName',
+          value: '',
+          type: ''
+        }
+      ]
+    },
+    {
+      id: 'page_local_1',
+      name: '局部变量',
+      variables: [
+        {
+          id: '1',
+          name: 'pageName',
+          value: '',
+          type: ''
+        }
+      ]
+    }
   ]
 })