@mpxjs/webpack-plugin 2.10.3-beta.13 → 2.10.3-beta.15

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,48 +128,49 @@ 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('page', { }, [
-    h('div', { class: 'mpx-titlebar-wrapper' }, [
-      // fixed titlebar
+    // top-level wrapper: contains fixed titlebar and page content wrapper
+    return h('div', { class: 'mpx-page-warp', style: this.warpStyle }, [
       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('div', { class: 'mpx-titlebar__left', on: { click: this.onLeftClick } }, leftChildren),
+            h('div', { class: 'mpx-titlebar__center' }, centerChildren),
+            h('div', { class: 'mpx-titlebar__right' }, [])
           ])
         ])
       ]),
-
-      // page content wrapper: default slot is page content
-      h('div', { class: 'mpx-titlebar__content' }, [
-        h('div', { class: 'mpx-titlebar__scroll' }, this.$slots.default || [])
-      ])
+      h('page', {}, [this.$slots.default])
     ])
-  ])
-   
   }
 }
 </script>
 
 <style scoped>
-.mpx-titlebar {
-  width: 100%;
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
+.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;
@@ -171,6 +178,7 @@ export default {
   padding: 0 12px;
   box-sizing: border-box;
 }
+
 .mpx-titlebar__left,
 .mpx-titlebar__right {
   flex: 0 0 auto;
@@ -178,6 +186,7 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .mpx-titlebar__center {
   flex: 1 1 auto;
   display: flex;
@@ -186,6 +195,7 @@ export default {
   overflow: hidden;
   padding: 0 8px;
 }
+
 .mpx-titlebar__title {
   font-size: 17px;
   white-space: nowrap;
@@ -193,6 +203,7 @@ export default {
   overflow: hidden;
   font-weight: 500;
 }
+
 .mpx-titlebar__back {
   background: none;
   border: none;
@@ -202,17 +213,17 @@ export default {
   cursor: pointer;
 }
 
-/* wrapper and content layout */
-.mpx-titlebar-wrapper {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
 .mpx-titlebar {
-  flex-shrink: 0;
+  /* flex-shrink: 0; */
+  height: calc(env(safe-area-inset-top, 0px) + 44px);
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
 }
 
 .mpx-titlebar__content {
@@ -233,6 +244,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.13",
+  "version": "2.10.3-beta.15",
   "description": "mpx compile core",
   "keywords": [
     "mpx"