@mpxjs/webpack-plugin 2.10.18-beta.10 → 2.10.18-beta.11

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

@@ -1,5 +1,11 @@
 <script>
 import mpx from '@mpxjs/core'
+
+const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
+const innerHeight = (isIOS ? 44 : 48) + 'px'
+
+const safeStyle = { paddingTop: 'var(--safe-area-inset-top)' }
+
 export default {
   name: 'mpx-titlebar',
   props: {
@@ -16,32 +22,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
@@ -49,52 +55,42 @@ export default {
         return false
       }
     },
-    // safe area 顶部 padding，使用 env(safe-area-inset-top)
-    safeStyle () {
-      // 多数浏览器支持 env(), 为兼容也使用 constant() 备选（旧 iOS Safari）
-      return {
-        paddingTop: 'env(safe-area-inset-top, 0px)'
+    // 安卓安全高度
+    safeAreaInsetTop() {
+      if (typeof mpx.config.webConfig.safeAreaInsetTop === 'number' && mpx.config.webConfig.safeAreaInsetTop >= 0) {
+        return mpx.config.webConfig.safeAreaInsetTop
       }
+      return 24
     },
-    // 内部标题栏高度（遵循小程序常见平台差异）
-    innerHeight () {
-      const isIOS = /iP(hone|od|ad)/.test(navigator.userAgent)
-      return (isIOS ? 44 : 48) + 'px'
+    warpStyle() {
+      return {
+        '--titlebar-height': innerHeight,
+        '--safe-area-inset-top': `${isIOS ? 'env(safe-area-inset-top, constant(safe-area-inset-top), 0px)' : this.safeAreaInsetTop + 'px'}`,
+        paddingTop: 'calc(var(--safe-area-inset-top) + var(--titlebar-height))',
+      }
     },
-    rootStyle () {
+    rootStyle() {
       return {
         background: this.backgroundColor,
         color: this.textColor
       }
     },
-    innerStyle () {
-      return {
-        height: this.innerHeight
-      }
-    }
-    ,
-    // content wrapper style: padding-top to avoid being covered by fixed titlebar
-    contentStyle () {
-      // use calc to combine innerHeight and safe-area inset
+    innerStyle() {
       return {
-        paddingTop: this.hidden ? '0px' : `calc(${this.innerHeight} + env(safe-area-inset-top, 0px))`,
-        // create its own layer to avoid overlapping issues
-        transform: 'translateZ(0)',
-        willChange: 'transform'
+        height: innerHeight
       }
     }
   },
   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) {
-    console.log('render mpx-titlebar', this.cfg, 'windowConfig', this.windowConfig, 'pageConfig', this.pageConfig)
+  render(h) {
     const leftChildren = []
 
     // default back button (SVG) — no left slot support
@@ -134,43 +130,42 @@ 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', { class: 'mpx-titlebar-wrapper' }, [
-      // fixed titlebar
-      h('div', {
-        class: ['mpx-titlebar', { 'mpx-titlebar--hidden': this.hidden }],
+    // top-level wrapper: contains fixed titlebar and page content wrapper
+    return h('div', { class: 'mpx-page-warp', style: this.hidden ? {} : this.warpStyle }, [
+      this.hidden ? null : h('div', {
+        class: ['mpx-titlebar'],
         style: this.rootStyle
       }, [
-        h('div', { class: 'mpx-titlebar__safe', style: this.safeStyle }, [
+        h('div', { class: 'mpx-titlebar__safe', style: 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', style: this.contentStyle }, this.$slots.default || [])
+      h('page', { style: { position: 'relative'} }, [this.$slots.default])
     ])
   }
 }
 </script>
 
 <style scoped>
-.mpx-titlebar {
+.mpx-page-warp {
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
 }
+
+
 .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);
+  padding-top: var(--safe-area-inset-top);
 }
+
 .mpx-titlebar__inner {
   display: flex;
   align-items: center;
@@ -178,6 +173,7 @@ export default {
   padding: 0 12px;
   box-sizing: border-box;
 }
+
 .mpx-titlebar__left,
 .mpx-titlebar__right {
   flex: 0 0 auto;
@@ -185,6 +181,7 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .mpx-titlebar__center {
   flex: 1 1 auto;
   display: flex;
@@ -193,6 +190,7 @@ export default {
   overflow: hidden;
   padding: 0 8px;
 }
+
 .mpx-titlebar__title {
   font-size: 17px;
   white-space: nowrap;
@@ -200,6 +198,7 @@ export default {
   overflow: hidden;
   font-weight: 500;
 }
+
 .mpx-titlebar__back {
   background: none;
   border: none;
@@ -209,27 +208,31 @@ export default {
   cursor: pointer;
 }
 
-/* wrapper and content layout */
-.mpx-titlebar-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
 .mpx-titlebar {
+  /* flex-shrink: 0; */
+  height: calc(var(--safe-area-inset-top) + var(--titlebar-height));
+  width: 100%;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  z-index: 1000; /* ensure above page content */
+  z-index: 99999;
+  /* 脱离上下文，单独渲染加速，修复安卓低端机型在页面滚动时titlebar闪烁问题 */
+  transform: translateZ(0);
 }
 
 .mpx-titlebar__content {
-  position: relative;
+  flex: 1;
+  overflow: hidden;
+  transform: translateZ(0);
+}
+
+.mpx-titlebar__scroll {
   width: 100%;
-  min-height: 100%;
-  box-sizing: border-box;
-  background: transparent;
+  height: 100%;
+  overflow: auto;
 }
 
 /* SVG icon sizing and inherit color */
@@ -238,6 +241,7 @@ export default {
   width: 20px;
   height: 20px;
 }
+
 .mpx-titlebar__back path {
   stroke: currentColor;
 }

package/lib/template-compiler/compiler.js

@@ -2616,78 +2616,6 @@ function postProcessAliComponentRootView (el, options, meta) {
   }
 }
 
-function getWebTitleBarContainer(root, options, meta) {
-  // titlebar 容器（替代 .wx-titlebar）
-  const titlebarStyle = 'position:fixed;top:0;left:0;right:0;width:100%;box-sizing:border-box;z-index:99999;background-color:#ffffff;height:calc(44px + env(safe-area-inset-top, 0px));padding-top:env(safe-area-inset-top, 0px);display:flex;align-items:center;justify-content:center;user-select:none;'
-  const titlebar = createASTElement('view', [
-    { name: 'style', value: titlebarStyle },
-    { name: 'wx:if', value: '{{($options?.__mpxPageConfig?.navigationStyle || global?.__mpxPageConfig?.navigationStyle) !== "custom"}}' }
-  ])
-
-  // 左侧返回按钮容器（替代 .wx-titlebar__left）
-  const leftStyle = 'position:absolute;left:12px;top:env(safe-area-inset-top, 0px);height:44px;display:flex;align-items:center;cursor:pointer;opacity:0.9;transition:opacity 0.15s;'
-  const left = createASTElement('view', [
-    { name: 'style', value: leftStyle },
-    { name: '@tap', value: '() => this.$router.back()' }
-  ])
-
-  // svg 图标（替代 .wx-titlebar__back-icon）
-  const svg = createASTElement('svg', [
-    { name: 'style', value: 'width:18px;height:18px;fill:#000;' },
-    { name: 'viewBox', value: '0 0 1024 1024' }
-  ])
-
-  const path = createASTElement('path', [
-    { name: 'd', value: 'M621.6 170.4L408.8 384l212.8 213.6-59.2 59.2L290.4 384 562.4 111.2z' }
-  ])
-
-  // 标题（替代 .wx-titlebar__title）
-  const titleStyle = 'font-size:17px;font-weight:500;color:#111;line-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;text-align:center;'
-  const title = createASTElement('view', [
-    { name: 'style', value: titleStyle }
-  ])
-
-  const text = {
-    type: 3,
-    // 支付宝小程序模板解析中未对Mustache进行特殊处理，无论是否decode都会解析失败，无解，只能支付宝侧进行修复
-    text: '{{$options.__mpxPageConfig.navigationBarTitleText}}'
-  }
-
-  // 页面内容容器（替代 .page-content），并保留原始内部 transform
-  const contentStyle = 'transform: translateX(0);margin-top:calc(44px + env(safe-area-inset-top, 0px));padding:16px;'
-  const content = createASTElement('view', [
-    { name: 'style', value: contentStyle }
-  ])
-
-  // 组装节点树
-  addChild(svg, path)
-  addChild(left, svg)
-
-  addChild(title, text)
-
-  addChild(titlebar, left)
-  addChild(titlebar, title)
-
-  addChild(root, titlebar)
-  addChild(root, content)
-
-  // processElement(root, root, options, meta)
-  processElement(titlebar, root, options, meta)
-  closeElement(titlebar, options, meta)
-  processElement(left, root, options, meta)
-  // closeElement(left, options, meta)
-  processElement(svg, root, options, meta)
-  processElement(path, root, options, meta)
-  processElement(title, root, options, meta)
-  processElement(content, root, options, meta)
-  processText(text, options, meta)
-
-  return {
-    content,
-    titlebar
-  }
-}
-
 // 有virtualHost情况wx组件注入virtualHost。无virtualHost阿里组件注入root-view。其他跳过。
 function getVirtualHostRoot (options, meta) {
   if (srcMode === 'wx') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.18-beta.10",
+  "version": "2.10.18-beta.11",
   "description": "mpx compile core",
   "keywords": [
     "mpx"