From 60b412b29c2b159a247d7f7cc3ef5c6fd7e954e0 Mon Sep 17 00:00:00 2001
From: PonyHu <3697820@qq.com>
Date: Tue, 3 Sep 2024 15:14:45 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE?=
 =?UTF-8?q?=EF=BC=8C=E7=AC=AC=E4=B8=80=E4=B8=AA=E7=BB=84=E4=BB=B6=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=AB=98=E5=BA=A6=E5=90=8E=EF=BC=8C=E4=BC=9A=E6=8A=8A?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=83=8C=E6=99=AF=E5=9B=BE=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E6=8A=B5=E4=B8=8B=E6=9D=A5=EF=BC=9B=20fix:=20sheepjs=20?=
 =?UTF-8?q?=E4=B8=AD=E5=AF=BC=E8=88=AA=E6=A0=8F=E6=A0=B7=E5=BC=8F=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E7=B1=BB=E5=9E=8B=E6=98=AF=20default=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8D=E6=98=AF=20normal;=20fix:=20=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E8=A3=85=E4=BF=AE=EF=BC=8C=E5=AF=BC=E8=88=AA=E6=A0=8F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=BA=E6=B2=89=E6=B5=B8=E5=BC=8F=E7=9A=84=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/NavigationBar/config.ts |  4 +-
 .../components/mobile/NavigationBar/index.vue |  5 +-
 src/components/DiyEditor/index.vue            | 46 ++++++++++++-------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
index 36612a3f3..440071a6f 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
+++ b/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: [
       {
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
index c684aee71..54ad820a2 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
+++ b/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 }
 })
 // 单元格列表
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index 700d32bd5..6bf64a7a3 100644
--- a/src/components/DiyEditor/index.vue
+++ b/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;
           }
         }
       }
-- 
Gitee


From 04c4739b84e5bba02d81229336db542f089b6dce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=B1=E7=8B=90?= <3697820@qq.com>
Date: Tue, 3 Sep 2024 15:43:46 +0000
Subject: [PATCH 2/2] =?UTF-8?q?update=20src/components/DiyEditor/component?=
 =?UTF-8?q?s/mobile/NavigationBar/config.ts.=20=E6=8A=B1=E6=AD=89=EF=BC=8C?=
 =?UTF-8?q?=E8=B7=9F=20shopro=20=E8=BF=94=E5=9B=9E=E7=9A=84=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=BB=93=E6=9E=84=E7=9C=8B=E6=B7=B7=E6=B7=86=E4=BA=86?=
 =?UTF-8?q?=EF=BC=8C=E8=BF=99=E9=87=8C=E6=98=AF=E4=B8=8D=E7=94=A8=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E7=9A=84=EF=BC=8C=E8=BF=98=E5=8E=9F=E5=9B=9E=E5=8E=BB?=
 =?UTF-8?q?=E4=BA=86=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 英狐 <3697820@qq.com>
---
 .../DiyEditor/components/mobile/NavigationBar/config.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
index 440071a6f..36612a3f3 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -9,7 +9,7 @@ export interface NavigationBarProperty {
   // 图片链接
   bgImg: string
   // 样式类型：默认 | 沉浸式
-  styleType: 'default' | 'inner'
+  styleType: 'normal' | 'inner'
   // 常驻显示
   alwaysShow: boolean
   // 小程序单元格列表
@@ -60,7 +60,7 @@ export const component = {
     bgType: 'color',
     bgColor: '#fff',
     bgImg: '',
-    styleType: 'default',
+    styleType: 'normal',
     alwaysShow: true,
     mpCells: [
       {
-- 
Gitee