@mpxjs/webpack-plugin 2.10.3-beta.14 → 2.10.3-beta.16

package/lib/runtime/components/web/mpx-titlebar.vue

@@ -16,32 +16,32 @@ export default {
   },
   computed: {
     // 合并全局 window 配置与页面配置（页面配置覆盖全局配置）
-    cfg () {
+    cfg() {
       return Object.assign({}, this.windowConfig || {}, this.pageConfig || {})
     },
     // 标题文本（兼容常见字段名）
-    titleText () {
+    titleText() {
       return this.cfg.navigationBarTitleText || this.cfg.title || ''
     },
     // 背景色（兼容常见字段）
-    backgroundColor () {
+    backgroundColor() {
       return this.cfg.navigationBarBackgroundColor || '#ffffff'
     },
     // 文本颜色，微信小程序中 navigationBarTextStyle 为 white 或 black
-    textColor () {
+    textColor() {
       const style = this.cfg.navigationBarTextStyle || 'black'
       return style === 'white' ? '#ffffff' : '#000000'
     },
     // navigationStyle: 'default' | 'custom'，custom 表示需要自定义绘制
-    navigationStyle () {
+    navigationStyle() {
       return this.cfg.navigationStyle || 'default'
     },
     // 是否隐藏（navigationStyle 为 'custom' 时也应隐藏）
-    hidden () {
+    hidden() {
       return mpx.config?.webConfig?.enableTitleBar !== true || this.navigationStyle === 'custom'
     },
     // 是否展示返回按钮：根据浏览器历史判断（不依赖额外 page 配置）
-    showBack () {
+    showBack() {
       console.log('showBack', this.$router.stack.length)
       try {
         return this.$router.stack.length > 1
@@ -50,24 +50,30 @@ export default {
       }
     },
     // safe area 顶部 padding，使用 env(safe-area-inset-top)
-    safeStyle () {
+    safeStyle() {
       // 多数浏览器支持 env(), 为兼容也使用 constant() 备选（旧 iOS Safari）
       return {
         paddingTop: 'env(safe-area-inset-top, 0px)'
       }
     },
+    warpStyle() {
+      return {
+        // marginTop: this.hidden ? '0' : 'calc(env(safe-area-inset-top, 0px) + 44px)',
+        height: this.hidden ? '100%' : 'calc(100% - env(safe-area-inset-top, 0px) - 44px)'
+      }
+    },
     // 内部标题栏高度（遵循小程序常见平台差异）
-    innerHeight () {
+    innerHeight() {
       const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
       return (isIOS ? 44 : 48) + 'px'
     },
-    rootStyle () {
+    rootStyle() {
       return {
         background: this.backgroundColor,
         color: this.textColor
       }
     },
-    innerStyle () {
+    innerStyle() {
       return {
         height: this.innerHeight
       }
@@ -75,14 +81,14 @@ export default {
   },
   methods: {
     // 左侧点击：派发事件并在可回退时回退
-    onLeftClick (e) {
+    onLeftClick(e) {
       this.$emit('click-left', e)
       if (this.showBack) {
-        try { window.history.back() } catch (err) {}
+        try { window.history.back() } catch (err) { }
       }
     }
   },
-  render (h) {
+  render(h) {
     const leftChildren = []
 
     // default back button (SVG) — no left slot support
@@ -122,38 +128,50 @@ export default {
       h('div', { class: 'mpx-titlebar__title', style: { color: this.textColor } }, [this.titleText])
     ]
 
-  // top-level wrapper: contains fixed titlebar and page content wrapper
-  return h('div', { class: 'page-wrapper' }, [
-    h('div', {
-      class: ['mpx-titlebar', { 'mpx-titlebar--hidden': this.hidden }],
-      style: this.rootStyle
-    }, [
-      h('div', { class: 'mpx-titlebar__safe', style: this.safeStyle }, [
-        h('div', { class: 'mpx-titlebar__inner', style: this.innerStyle }, [
+    // top-level wrapper: contains fixed titlebar and page content wrapper
+    return h('div', { class: 'mpx-page-warp', style: this.warpStyle }, [
+      h('div', { style: { width: '100%', height: this.hidden ? '0' : 'calc(env(safe-area-inset-top, 0px) + 44px)' } }),
+      h('div', {
+        class: ['mpx-titlebar', { 'mpx-titlebar--hidden': this.hidden }],
+        style: this.rootStyle
+      }, [
+        h('div', { class: 'mpx-titlebar__safe', style: this.safeStyle }, [
+          h('div', { class: 'mpx-titlebar__inner', style: this.innerStyle }, [
             h('div', { class: 'mpx-titlebar__left', on: { click: this.onLeftClick } }, leftChildren),
             h('div', { class: 'mpx-titlebar__center' }, centerChildren),
             h('div', { class: 'mpx-titlebar__right' }, [])
+          ])
         ])
-      ])
-    ]),
-    h('page', {}, [ this.$slots.default ])
-  ])
+      ]),
+      h('page', {}, [this.$slots.default])
+    ])
   }
 }
 </script>
 
 <style scoped>
-.page-wrapper {
-  padding-top: calc(env(safe-area-inset-top, 0px) + 44px);
+.mpx-page-warp {
+  width: 100%;
+  box-sizing: border-box;
+  position: relative
+}
+
+/* 防止margin溢出合并 */
+.mpx-page-warp::before {
+  content: '';
+  display: table
 }
+
 .mpx-titlebar--hidden {
   display: none;
 }
+
 .mpx-titlebar__safe {
   /* safe area handled by padding-top; include both env and constant for broader iOS support */
   padding-top: env(safe-area-inset-top, 0px);
   padding-top: constant(safe-area-inset-top, 0px);
 }
+
 .mpx-titlebar__inner {
   display: flex;
   align-items: center;
@@ -161,6 +179,7 @@ export default {
   padding: 0 12px;
   box-sizing: border-box;
 }
+
 .mpx-titlebar__left,
 .mpx-titlebar__right {
   flex: 0 0 auto;
@@ -168,6 +187,7 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .mpx-titlebar__center {
   flex: 1 1 auto;
   display: flex;
@@ -176,6 +196,7 @@ export default {
   overflow: hidden;
   padding: 0 8px;
 }
+
 .mpx-titlebar__title {
   font-size: 17px;
   white-space: nowrap;
@@ -183,6 +204,7 @@ export default {
   overflow: hidden;
   font-weight: 500;
 }
+
 .mpx-titlebar__back {
   background: none;
   border: none;
@@ -223,6 +245,7 @@ export default {
   width: 20px;
   height: 20px;
 }
+
 .mpx-titlebar__back path {
   stroke: currentColor;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.3-beta.14",
+  "version": "2.10.3-beta.16",
   "description": "mpx compile core",
   "keywords": [
     "mpx"