fix: 修改容器控件、节点等

src/renderer/src/components/MonacoEditor/index.vue

@@ -106,7 +106,6 @@ onMounted(() => {
   })
 
   function handleToggleTheme() {
-    console.log('theme', theme)
     if (theme === 'dark') {
       monaco.editor.setTheme('vs-dark')
     } else {

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

@@ -1,15 +1,53 @@
 <template>
-  <div></div>
+  <div :style="getStyle"></div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+import defaultStyle from './style.json'
+
+const props = defineProps<{
   width: number
   height: number
-  text: string
   styles: any
   state: string
 }>()
+
+const getStyle = computed(() => {
+  const { width, height, styles } = props
+
+  let stateStyles = styles.find((item) => item.state === props.state)
+
+  // 从默认样式获取样式
+  if (!stateStyles && props.state) {
+    stateStyles = defaultStyle.part[0].state.find((item) => item.state === props.state)?.style
+  }
+
+  return {
+    width: `${width}px`,
+    height: `${height}px`,
+
+    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}`
+      : 'none'
+  }
+})
 </script>
 
 <style scoped></style>

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

@@ -25,11 +25,8 @@ export default {
       y: 0,
       width: 300,
       height: 200,
-      hidden: false,
-      locked: false,
-      flags: [],
-      scrolling: [],
-      states: [],
+      addFlags: [],
+      removeFlags: [],
       scrollbar: 'on'
     },
     styles: [
@@ -39,29 +36,17 @@ export default {
           state: 'default'
         },
         background: {
-          color: '#ffffff',
-          alpha: 255,
+          color: '#ffffffff',
           image: {
-            src: '',
-            alpha: 255,
-            colorFormat: '',
-            colorDepth: '',
+            imgId: '',
             color: ''
           }
         },
-        text: {
-          color: '#ffffff',
-          family: '',
-          size: 14,
-          weight: 400,
-          align: 'center'
-        },
         border: {
-          color: '#2195f6',
+          color: '#2092f5ff',
           width: 2,
           radius: 0,
-          style: 'solid',
-          side: 'all'
+          side: ['all']
         },
         padding: {
           top: 0,
@@ -69,22 +54,12 @@ export default {
           bottom: 0,
           left: 0
         },
-        margin: {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0
-        },
-        align: {
-          horizontal: 'center',
-          vertical: 'center'
-        },
         shadow: {
-          color: '',
-          opacity: 127,
+          color: '#2092f5ff',
           x: 0,
           y: 0,
-          blur: 0
+          spread: 0,
+          width: 0
         }
       }
     ]
@@ -153,24 +128,20 @@ export default {
         ]
       },
       {
-        label: '标识',
-        field: 'flags',
-        valueType: 'select',
+        label: '添加标识',
+        field: 'addFlags',
+        valueType: 'checkbox',
         componentProps: {
-          options: flagOptions,
-          multiple: true,
-          clearable: true
+          options: flagOptions
         }
       },
       {
-        label: '可见',
-        field: 'visible',
-        valueType: 'checkbox'
-      },
-      {
-        label: '启/禁用',
-        field: 'enabled',
-        valueType: 'checkbox'
+        label: '删除标识',
+        field: 'removeFlags',
+        valueType: 'checkbox',
+        componentProps: {
+          options: flagOptions
+        }
       },
       {
         label: '滚动条',
@@ -208,20 +179,10 @@ export default {
         field: 'padding',
         valueType: 'padding'
       },
-      {
-        label: '外边距',
-        field: 'margin',
-        valueType: 'margin'
-      },
       {
         label: '阴影',
-        field: 'boxShadow',
-        valueType: 'boxShadow'
-      },
-      {
-        label: '对齐',
-        field: 'align',
-        valueType: 'align'
+        field: 'shadow',
+        valueType: 'shadow'
       }
     ]
   }

src/renderer/src/lvgl-widgets/container/style.json

@@ -0,0 +1,36 @@
+{
+  "widget": "container",
+  "styleName": "defualt",
+  "part": [
+    {
+      "partName": "main",
+      "state": [
+        {
+          "state": "default",
+          "style": {
+            "background": {
+              "color": "#ffffffff",
+              "image": {
+                "imgId": "",
+                "color": ""
+              }
+            },
+            "border": {
+              "color": "#2092f5ff",
+              "width": 2,
+              "radius": 0,
+              "side": ["all"]
+            },
+            "shadow": {
+              "color": "#2092f5ff",
+              "x": 0,
+              "y": 0,
+              "spread": 0,
+              "width": 0
+            }
+          }
+        }
+      ]
+    }
+  ]
+}

src/renderer/src/types/baseWidget.d.ts

@@ -19,5 +19,10 @@ export type BaseWidget = {
   events: WidgetEvent[]
   // 子控件
   children?: BaseWidget[]
+  // 隐藏
+  hidden?: boolean
+  // 锁定
+  locked?: boolean
+  // 其他
   [key: string]: any
 }

src/renderer/src/views/designer/sidebar/components/PageTreeItem.vue

@@ -27,8 +27,8 @@
         </span>
       </el-tooltip>
       <el-tooltip content="锁定/解锁">
-        <span @click.capture.stop="data.lock = !data.lock">
-          <LuLock size="14px" v-if="!data.lock" />
+        <span @click.capture.stop="data.locked = !data.locked">
+          <LuLock size="14px" v-if="!data.locked" />
           <LuUnlock size="14px" v-else />
         </span>
       </el-tooltip>
@@ -38,6 +38,8 @@
 
 <script setup lang="ts">
 import type { RenderContentContext } from 'element-plus'
+import type { BaseWidget } from '@/types/baseWidget'
+
 import {
   LuTrash2,
   LuLock,
@@ -51,13 +53,13 @@ import { useProjectStore } from '@/store/modules/project'
 
 const props = defineProps<{
   node: RenderContentContext['node']
-  data: any
+  data: BaseWidget
 }>()
 
 const projectStore = useProjectStore()
 
 // 删除控件
-const deleteWidget = (data: any) => {
+const deleteWidget = (data: BaseWidget) => {
   projectStore.deleteWidget(data.id)
 }
 </script>

src/renderer/src/views/designer/tools/Custom.vue

@@ -19,12 +19,12 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, inject } from 'vue'
+import { inject } from 'vue'
 import { LuBoomBox, LuBookOpen } from 'vue-icons-plus/lu'
 
 const onMenuClick = inject<(menuKey: string) => void>('onMenuClick', () => {})
 
-const projectMenu = reactive([
+const projectMenu = [
   {
     key: 'custom1',
     label: '自定义1',
@@ -35,7 +35,7 @@ const projectMenu = reactive([
     label: '自定义2',
     img: LuBookOpen
   }
-])
+]
 
 const handleClick = (menuKey: string) => {
   onMenuClick?.(menuKey)

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

@@ -58,7 +58,7 @@
 <script setup lang="ts">
 import type { TabPaneName } from 'element-plus'
 
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, shallowRef } from 'vue'
 import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
 import { useProjectStore } from '@/store/modules/project'
 import { useAppStore } from '@/store/modules/app'
@@ -73,7 +73,7 @@ const appStore = useAppStore()
 const content = ref('')
 const activeTab = ref<TabPaneName>('design')
 // tab pane列表
-const tabPaneList = ref([
+const tabPaneList = shallowRef([
   {
     label: '项目预览',
     name: '111',

src/renderer/src/views/designer/workspace/stage/Node.vue

@@ -4,6 +4,7 @@
     ref="nodeRef"
     :class="schema.type === 'page' ? '' : 'ignore-click widget-wrapper'"
     @click.stop="handleSelect"
+    v-if="!schema.hidden"
   >
     <!-- 控件 -->
     <component :is="widget" v-bind="schema.props" :styles="schema.style" />
@@ -20,8 +21,8 @@
   <div v-show="schema.type !== 'page' && selected">
     <Moveable
       :target="nodeRef"
-      :draggable="selected"
-      :resizable="selected"
+      :draggable="selected && !schema.locked"
+      :resizable="selected && !schema.locked"
       :padding="2"
       :container="rootContainer"
       :snappable="true"
@@ -46,6 +47,8 @@
       :maxSnapElementGuidelineDistance="50"
       :elementGuidelines="elementGridelines"
       :controlPadding="4"
+      :verticalGuidelines="verticalGuidelines"
+      :horizontalGuidelines="horizontalGuidelines"
       @render="onRender"
       @drag="onDrag"
       @resize="onResize"
@@ -90,6 +93,17 @@ const nodeRef = ref<HTMLDivElement>()
 const selected = computed(() =>
   projectStore.activeWidgets.map((item) => item.id).includes(props.schema.id)
 )
+// 辅助线
+const verticalGuidelines = computed(() => {
+  return projectStore.activePage?.referenceLine
+    .filter((item) => item.type === 'vertical')
+    .map((item) => item.value)
+})
+const horizontalGuidelines = computed(() => {
+  return projectStore.activePage?.referenceLine
+    .filter((item) => item.type === 'horizontal')
+    .map((item) => item.value)
+})
 
 // 组件样式
 const getStyle = computed((): CSSProperties => {