fix: 商城装修，第一个组件设置高度后，会把页面背景图直接抵下来；

fix: sheepjs 中导航栏样式默认类型是 default，不是 normal;
fix: 商城装修，导航栏设置为沉浸式的预览样式优化；

src/components/DiyEditor/components/mobile/NavigationBar/config.ts

@@ -9,7 +9,7 @@ export interface NavigationBarProperty {
   // 图片链接
   bgImg: string
   // 样式类型：默认 | 沉浸式
-  styleType: 'normal' | 'inner'
+  styleType: 'default' | 'inner'
   // 常驻显示
   alwaysShow: boolean
   // 小程序单元格列表
@@ -60,7 +60,7 @@ export const component = {
     bgType: 'color',
     bgColor: '#fff',
     bgImg: '',
-    styleType: 'normal',
+    styleType: 'default',
     alwaysShow: true,
     mpCells: [
       {

src/components/DiyEditor/components/mobile/NavigationBar/index.vue

@@ -28,10 +28,13 @@ const props = defineProps<{ property: NavigationBarProperty }>()
 
 // 背景
 const bgStyle = computed(() => {
-  const background =
+  let background =
     props.property.bgType === 'img' && props.property.bgImg
       ? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
       : props.property.bgColor
+  if (!background && props.property.styleType === 'inner') {
+    background = 'transparent'
+  }
   return { background }
 })
 // 单元格列表

src/components/DiyEditor/index.vue

@@ -34,20 +34,6 @@
       <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
       <!-- 中心：设计区域（ComponentContainer） -->
       <div class="editor-center page-prop-area" @click="handlePageSelected">
-        <!-- 手机顶部 -->
-        <div class="editor-design-top">
-          <!-- 手机顶部状态栏 -->
-          <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
-          <!-- 手机顶部导航栏 -->
-          <ComponentContainer
-            v-if="showNavigationBar"
-            :component="navigationBarComponent"
-            :show-toolbar="false"
-            :active="selectedComponent?.id === navigationBarComponent.id"
-            @click="handleNavigationBarSelected"
-            class="cursor-pointer!"
-          />
-        </div>
         <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
         <div
           v-for="(component, index) in pageComponents"
@@ -60,7 +46,6 @@
             :property="component.property"
           />
         </div>
-        <!-- 手机页面编辑区域 -->
         <el-scrollbar
           height="100%"
           wrap-class="editor-design-center page-prop-area"
@@ -70,6 +55,21 @@
             backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
           }"
         >
+          <!--手机顶部-->
+          <div class="editor-design-top" :class="showNavigationBar && navigationBarComponent.property.styleType === 'inner' ? 'editor-design-top-inner' : ''">
+            <!-- 手机顶部状态栏 -->
+            <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
+            <!-- 手机顶部导航栏 -->
+            <ComponentContainer
+              v-if="showNavigationBar"
+              :component="navigationBarComponent"
+              :show-toolbar="false"
+              :active="selectedComponent?.id === navigationBarComponent.id"
+              @click="handleNavigationBarSelected"
+              class="cursor-pointer!"
+            />
+          </div>
+          <!-- 手机页面编辑区域 -->
           <draggable
             class="page-prop-area drag-area"
             v-model="pageComponents"
@@ -493,7 +493,9 @@ $toolbar-height: 42px;
       flex: 1 1 0;
       flex-direction: column;
       justify-content: center;
-
+      /* 如果父级元素设置了transform属性，position:relative/absolute/fixed会基于此定位 */
+      transform: translate(0, 0);
+      
       /* 手机顶部 */
       .editor-design-top {
         display: flex;
@@ -508,7 +510,15 @@ $toolbar-height: 42px;
           background-color: #fff;
         }
       }
-
+      
+      .editor-design-top-inner {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+      }
+      
       /* 手机底部导航 */
       .editor-design-bottom {
         width: $phone-width;
@@ -531,6 +541,8 @@ $toolbar-height: 42px;
           .drag-area {
             width: 100%;
             height: 100%;
+            /* fix：子元素添加margin-top影响父元素 */
+            display: inline-block;
           }
         }
       }