fix: 调整属性

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

@@ -93,6 +93,19 @@ function insertText(text: string) {
   monacoEditor?.focus()
 }
 
+let h = 0
+const onChangeFullScreen = () => {
+  if (!isFullScreen.value) {
+    h = monacoEditor?.getLayoutInfo().height || 0
+  } else {
+    monacoEditor?.layout({
+      width: editContainer.value?.clientWidth || 0,
+      height: h
+    })
+  }
+  isFullScreen.value = !isFullScreen.value
+}
+
 onMounted(() => {
   monacoEditor = monaco.editor.create(editContainer.value as HTMLElement, {
     value: getValue(),
@@ -163,7 +176,7 @@ defineExpose({
   >
     <div
       class="z-999 text-$epic-text-helper absolute right-4 top-2 cursor-pointer text-xl"
-      @click="isFullScreen = !isFullScreen"
+      @click="onChangeFullScreen"
       v-if="props.allowFullscreen"
     >
       <LuFullscreen v-if="!isFullScreen" :size="16" />

src/renderer/src/constants/index.ts

@@ -25,12 +25,12 @@ export const flagOptions = [
   { label: 'Ignore Layout', value: 'LV_OBJ_FLAG_IGNORE_LAYOUT' },
   { label: 'Floating', value: 'LV_OBJ_FLAG_FLOATING' },
   // { label: 'Send Draw Task Events', value: 'LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS' },
-  { label: 'Overflow Visible', value: 'LV_OBJ_FLAG_OVERFLOW_VISIBLE' }
+  { label: 'Overflow Visible', value: 'LV_OBJ_FLAG_OVERFLOW_VISIBLE' },
   // { label: 'Event Trickle', value: 'LV_OBJ_FLAG_EVENT_TRICKLE' },
   // { label: 'State Trickle', value: 'LV_OBJ_FLAG_STATE_TRICKLE' },
   // { label: 'Layout1', value: 'LV_OBJ_FLAG_LAYOUT_1' },
   // { label: 'Layout2', value: 'LV_OBJ_FLAG_LAYOUT_2' },
-  // { label: 'Flex In New Track', value: 'LV_OBJ_FLAG_FLEX_IN_NEW_TRACK' },
+  { label: 'Flex In New Track', value: 'LV_OBJ_FLAG_FLEX_IN_NEW_TRACK' }
   // { label: 'Widget1', value: 'LV_OBJ_FLAG_WIDGET_1' },
   // { label: 'Widget2', value: 'LV_OBJ_FLAG_WIDGET_2' },
   // { label: 'User1', value: 'LV_OBJ_FLAG_USER_1' },

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

@@ -207,7 +207,12 @@ export default {
             componentProps: {
               span: 12,
               min: -100000,
-              max: 100000
+              max: 100000,
+              onValueChange: (value: number, formData) => {
+                if (value >= formData.props.rangeEnd) {
+                  formData.props.rangeStart = formData.props.rangeEnd - 1
+                }
+              }
             },
             slots: {
               prefix: 'S'
@@ -219,7 +224,12 @@ export default {
             componentProps: {
               span: 12,
               min: -100000,
-              max: 100000
+              max: 100000,
+              onValueChange: (value: number, formData) => {
+                if (value <= formData.props.rangeStart) {
+                  formData.props.rangeEnd = formData.props.rangeStart + 1
+                }
+              }
             },
             slots: {
               prefix: 'E'

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

@@ -200,7 +200,7 @@ export default {
         }
       },
       {
-        label: '高亮',
+        label: '选中',
         valueType: 'group',
         children: [
           {

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

@@ -2,6 +2,7 @@ import Page from './Page.vue'
 import type { IComponentModelConfig } from '../type'
 import i18n from '@/locales'
 import { scrollbarModes } from '@/constants'
+import { flagOptions } from '@/constants'
 
 export default {
   label: i18n.global.t('page'),
@@ -19,7 +20,10 @@ export default {
   defaultSchema: {
     name: 'page',
     props: {
-      scrollbarMode: 'off'
+      scrollbarMode: 'off',
+      flags: [],
+      head_code: '',
+      feature_code: ''
     },
     styles: [
       {
@@ -57,6 +61,37 @@ export default {
         componentProps: {
           options: scrollbarModes
         }
+      },
+      {
+        label: '标识',
+        field: 'props.flags',
+        valueType: 'checkbox',
+        componentProps: {
+          options: flagOptions,
+          defaultCollapsed: true
+        }
+      }
+    ],
+    coreProps: [
+      {
+        label: '#include和变量代码',
+        field: 'props.head_code',
+        labelPosition: 'top',
+        valueType: 'code',
+        componentProps: {
+          language: 'c'
+          // allowFullscreen: false
+        }
+      },
+      {
+        label: '功能实现代码',
+        field: 'props.feature_code',
+        labelPosition: 'top',
+        valueType: 'code',
+        componentProps: {
+          language: 'c'
+          // allowFullscreen: false
+        }
       }
     ],
     // 组件样式

src/renderer/src/model/index.ts

@@ -58,9 +58,7 @@ export const createPage = (): Page => {
     // 参考线
     referenceLine: [],
     // 属性
-    props: {
-      scrollbarMode: 'off'
-    },
+    props: klona(LvglWidgets['page'].defaultSchema.props || {}),
     // 样式
     style: klona(LvglWidgets['page'].defaultSchema.styles || []),
     // 事件

src/renderer/src/views/designer/config/property/CusFormItem.vue

@@ -98,6 +98,14 @@
         />
         <span class="text-text-active">{{ value }}</span>
       </div>
+
+      <!-- 代码 -->
+      <div
+        v-if="schema.valueType === 'code'"
+        class="w-full relative border border-solid border-border rounded-4px overflow-hidden"
+      >
+        <MonacoEditor v-model="value" v-bind="schema?.componentProps" />
+      </div>
     </el-form-item>
 
     <!-- 分组 -->
@@ -251,7 +259,7 @@ import CusCheckbox from './components/CusCheckbox.vue'
 import CusTextarea from './components/CusTextarea.vue'
 import ImageSelect from './components/ImageSelect.vue'
 import SymbolSelect from './components/SymbolSelect.vue'
-import { ColorPicker } from '@/components'
+import { ColorPicker, MonacoEditor } from '@/components'
 
 import StyleBackground from './components/StyleBackground.vue'
 import StyleBorder from './components/StyleBorder.vue'

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

@@ -9,6 +9,7 @@
     :widget-type="schema.type"
     @click="handleSelect"
     @contextmenu.stop="handleContextmenu"
+    :ignore-drag="ignoreDrag && !schema.props?.flags?.includes('LV_OBJ_FLAG_IGNORE_LAYOUT')"
   >
     <!-- 控件 -->
     <component
@@ -77,6 +78,8 @@ const props = defineProps<{
   style?: CSSProperties
   // 层级
   zIndex?: number
+  // 是否可拖拽
+  ignoreDrag?: boolean
 }>()
 
 const projectStore = useProjectStore()
@@ -129,7 +132,7 @@ const getStyle = computed((): CSSProperties => {
 
   const other: CSSProperties = {}
   // 显示所有控件边框
-  if (pageState?.showBorder && props.schema.type !== 'page') {
+  if (pageState?.showBorder && schema.type !== 'page') {
     other.border = '1px dashed #000'
     other.transform = `translate(${schema.props.x - 1}px, ${schema.props.y - 1}px)`
   }
@@ -151,6 +154,14 @@ const getStyle = computed((): CSSProperties => {
     scale = (schema.props?.scale ?? 256) / 256
   }
 
+  let parentStyle = klona(style)
+
+  // 忽略父级布局
+  if (schema.props.flags?.includes('LV_OBJ_FLAG_IGNORE_LAYOUT')) {
+    delete parentStyle.position
+    delete parentStyle.transform
+  }
+
   return {
     position: 'absolute',
     left: 0,
@@ -159,7 +170,7 @@ const getStyle = computed((): CSSProperties => {
     width: schema.props?.width * scale + 'px',
     height: schema.props?.height * scale + 'px',
     zIndex: zIndex.value,
-    ...style,
+    ...parentStyle,
     ...other
     // ...dropStyle.value
   }