feat: menu添加unfixed模式

src/renderer/src/lvgl-widgets/menu/Menu.vue

@@ -4,9 +4,10 @@
     v-if="!sider && inPage"
     class="w-full h-full flex overflow-hidden box-border"
     :style="styleMap?.mainStyle"
-    :class="titleMode === 'bottom_fixed' ? 'flex-col-reverse' : 'flex-col'"
+    :class="titleMode === 'LV_MENU_HEADER_BOTTOM_FIXED' ? 'flex-col-reverse' : 'flex-col'"
   >
     <div
+      v-if="openTitle"
       class="menu-header w-full px-18px relative whitespace-pre! flex items-center box-border"
       :style="styleMap?.menuTitleStyle"
     >
@@ -22,11 +23,15 @@
       class="shrink-0 box-border relative flex flex-col"
       :class="!sider ? 'flex-1! border-r-none!' : 'basis-1/3'"
       style="border-right: solid 1px #ededed"
-      :style="titleMode === 'bottom_fixed' ? 'flex-direction: column-reverse;' : ''"
+      :style="titleMode === 'LV_MENU_HEADER_BOTTOM_FIXED' ? 'flex-direction: column-reverse;' : ''"
     >
       <ImageBg :src="styleMap?.mainStyle?.imageSrc" :imageStyle="styleMap?.mainStyle?.imageStyle" />
       <!-- 菜单标题 -->
-      <div class="menu-header relative whitespace-pre!" :style="styleMap?.menuTitleStyle">
+      <div
+        v-if="openTitle"
+        class="menu-header relative whitespace-pre!"
+        :style="styleMap?.menuTitleStyle"
+      >
         <ImageBg
           :src="styleMap?.menuTitleStyle?.imageSrc"
           :imageStyle="styleMap?.menuTitleStyle?.imageStyle"
@@ -37,7 +42,7 @@
       <div
         ref="sidebarRef"
         :style="styleMap?.sidebarStyle"
-        :class="titleMode === 'bottom_fixed' ? 'flex-1' : ''"
+        :class="titleMode === 'LV_MENU_HEADER_BOTTOM_FIXED' ? 'flex-1' : ''"
         class="menu-sidebar relative box-border overflow-hidden"
       >
         <ImageBg
@@ -100,10 +105,15 @@
         </div>
         <!-- 滚动条 -->
         <div
-          v-if="showVScroll"
+          v-if="showVScroll && titleMode !== 'LV_MENU_HEADER_TOP_UNFIXED'"
           class="v-scrollbar absolute right-6px top-6px w-4px h-20% bg-#d7d7d7"
         ></div>
       </div>
+      <!-- 滚动条 -->
+      <div
+        v-if="showVScroll && titleMode === 'LV_MENU_HEADER_TOP_UNFIXED'"
+        class="v-scrollbar absolute right-6px top-6px w-4px h-20% bg-#d7d7d7"
+      ></div>
     </div>
     <div v-if="sider" class="basis-2/3"></div>
   </div>
@@ -130,13 +140,18 @@ const props = defineProps<{
   title: string
   // 折叠展开
   sider: boolean
+  // 标题开关
+  openTitle?: boolean
   // 子标题开关
   openSection: boolean
   // 子项
   children?: any[]
   // 当前激活index
   activeIndex: string
-  titleMode?: 'top_fixed' | 'bottom_fixed'
+  titleMode?:
+    | 'LV_MENU_HEADER_TOP_FIXED'
+    | 'LV_MENU_HEADER_BOTTOM_FIXED'
+    | 'LV_MENU_HEADER_TOP_UNFIXED'
   inPage?: boolean
 }>()
 

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

@@ -103,7 +103,7 @@ export default {
       states: [],
       scrollbar: 'off',
       title: 'menu',
-      titleMode: 'top_fixed',
+      titleMode: 'LV_MENU_HEADER_TOP_UNFIXED',
       // 折叠展开
       sider: false,
       // 子标题开关
@@ -111,7 +111,9 @@ export default {
       // 当前激活index
       activeIndex: '[0].children.[0]',
       // 是否进入页面
-      inPage: false
+      inPage: false,
+      // 标题开关
+      openTitle: true
     },
     styles: [
       {
@@ -302,28 +304,21 @@ export default {
     ],
     coreProps: [
       {
-        label: '标题',
-        field: 'props.title',
-        valueType: 'text',
+        label: '标题开关',
+        field: 'props.openTitle',
+        valueType: 'switch',
         labelWidth: '80px'
       },
-      {
-        label: '标题模式',
-        field: 'props.titleMode',
-        valueType: 'select',
-        labelWidth: '80px',
-        componentProps: {
-          options: [
-            { label: 'Top Fixed', value: 'top_fixed' },
-            { label: 'Bottom Fixed', value: 'bottom_fixed' }
-          ]
-        }
-      },
       {
         label: '侧边栏',
         field: 'props.sider',
         labelWidth: '80px',
-        valueType: 'switch'
+        valueType: 'switch',
+        componentProps: {
+          onValueChange: (_value, formData) => {
+            formData.props.titleMode = 'LV_MENU_HEADER_TOP_UNFIXED'
+          }
+        }
       },
       {
         label: '子标题',
@@ -331,6 +326,38 @@ export default {
         labelWidth: '80px',
         valueType: 'switch'
       },
+      {
+        valueType: 'dependency',
+        name: ['props.openTitle', 'props.sider'],
+        dependency: (dependency) => {
+          const options = [
+            { label: 'Top Unfixed', value: 'LV_MENU_HEADER_TOP_UNFIXED' },
+            { label: 'Bottom Fixed', value: 'LV_MENU_HEADER_BOTTOM_FIXED' }
+          ]
+          if (!dependency?.['props.sider']) {
+            options.push({ label: 'Top Fixed', value: 'LV_MENU_HEADER_TOP_FIXED' })
+          }
+          return dependency?.['props.openTitle']
+            ? [
+                {
+                  label: '标题',
+                  field: 'props.title',
+                  valueType: 'text',
+                  labelWidth: '80px'
+                },
+                {
+                  label: '模式',
+                  field: 'props.titleMode',
+                  valueType: 'select',
+                  labelWidth: '80px',
+                  componentProps: {
+                    options
+                  }
+                }
+              ]
+            : []
+        }
+      },
       {
         label: '属性',
         field: '',
@@ -481,7 +508,7 @@ export default {
 
     let style: CSSProperties = {}
 
-    if (titleMode === 'top_fixed') {
+    if (titleMode === 'LV_MENU_HEADER_TOP_FIXED') {
       style = {
         top: headerH + 'px',
         height: height - headerH + 'px'