From 567d6a121ca747c65afd75b2b5df817cd9bb61c7 Mon Sep 17 00:00:00 2001
From: mackwang <mackwang@didiglobal.com>
Date: Wed, 24 Jun 2026 16:10:00 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20web=E6=94=AF=E6=8C=81titlebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../template/wx/component-config/index.js     |   2 +
 .../template/wx/component-config/titlebar.js  |  12 +
 .../runtime/components/web/mpx-titlebar.vue   | 248 ++++++++++++++++++
 .../lib/template-compiler/compiler.js         |   9 +-
 .../lib/utils/dom-tag-config.js               |   4 +-
 5 files changed, 272 insertions(+), 3 deletions(-)
 create mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js
 create mode 100644 packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
index b5a65229fb..87fc21394e 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
@@ -44,6 +44,7 @@ const customBuiltInComponent = require('./custom-built-in-component')
 const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
+const titlebar = require('./titlebar')
 
 /**
  * 未命中上方任一组件 test 的标签，仍须走 normalizeComponentRules 中的通用
@@ -144,6 +145,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     rootPortal({ print }),
     stickyHeader({ print }),
     stickySection({ print }),
+    titlebar({ print }),
     defaultCatchAllComponentConfig()
   ]
 }
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js
new file mode 100644
index 0000000000..874f96666e
--- /dev/null
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js
@@ -0,0 +1,12 @@
+const TAG_NAME = 'titlebar'
+
+module.exports = function () {
+  return {
+    // 匹配标签名，可传递正则
+    test: TAG_NAME,
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-titlebar'
+    }
+  }
+}
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue
new file mode 100644
index 0000000000..3695e1259d
--- /dev/null
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue
@@ -0,0 +1,248 @@
+<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: {
+    // 来自 app.json 中 window 的 titlebar 相关配置
+    windowConfig: {
+      type: Object,
+      default: () => global.__mpxPageConfig
+    },
+    // 来自 页面 json 中的 titlebar 相关配置，会覆盖 windowConfig
+    pageConfig: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    // 合并全局 window 配置与页面配置（页面配置覆盖全局配置）
+    cfg() {
+      return Object.assign({}, this.windowConfig || {}, this.pageConfig || {})
+    },
+    // 标题文本（兼容常见字段名）
+    titleText() {
+      return this.cfg.navigationBarTitleText || this.cfg.title || ''
+    },
+    // 背景色（兼容常见字段）
+    backgroundColor() {
+      return this.cfg.navigationBarBackgroundColor || '#ffffff'
+    },
+    // 文本颜色，微信小程序中 navigationBarTextStyle 为 white 或 black
+    textColor() {
+      const style = this.cfg.navigationBarTextStyle || 'black'
+      return style === 'white' ? '#ffffff' : '#000000'
+    },
+    // navigationStyle: 'default' | 'custom'，custom 表示需要自定义绘制
+    navigationStyle() {
+      return this.cfg.navigationStyle || 'default'
+    },
+    // 是否隐藏（navigationStyle 为 'custom' 时也应隐藏）
+    hidden() {
+      return mpx.config?.webConfig?.enableTitleBar !== true || this.navigationStyle === 'custom'
+    },
+    // 是否展示返回按钮：根据浏览器历史判断（不依赖额外 page 配置）
+    showBack() {
+      console.log('showBack', this.$router.stack.length)
+      try {
+        return this.$router.stack.length > 1
+      } catch (e) {
+        return false
+      }
+    },
+    // 安卓安全高度
+    safeAreaInsetTop() {
+      if (typeof mpx.config.webConfig.safeAreaInsetTop === 'number' && mpx.config.webConfig.safeAreaInsetTop >= 0) {
+        return mpx.config.webConfig.safeAreaInsetTop
+      }
+      return 24
+    },
+    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() {
+      return {
+        background: this.backgroundColor,
+        color: this.textColor
+      }
+    },
+    innerStyle() {
+      return {
+        height: innerHeight
+      }
+    }
+  },
+  methods: {
+    // 左侧点击：派发事件并在可回退时回退
+    onLeftClick(e) {
+      this.$emit('click-left', e)
+      if (this.showBack) {
+        try { window.history.back() } catch (err) { }
+      }
+    }
+  },
+  render(h) {
+    const leftChildren = []
+
+    // default back button (SVG) — no left slot support
+    if (this.showBack) {
+      leftChildren.push(
+        h('button', {
+          class: 'mpx-titlebar__back',
+          attrs: { 'aria-label': 'back', type: 'button' }
+        }, [
+          h('svg', {
+            attrs: {
+              viewBox: '0 0 24 24',
+              width: '20',
+              height: '20',
+              fill: 'none',
+              xmlns: 'http://www.w3.org/2000/svg',
+              focusable: 'false',
+              'aria-hidden': 'true'
+            }
+          }, [
+            h('path', {
+              attrs: {
+                d: 'M15 18l-6-6 6-6',
+                stroke: 'currentColor',
+                'stroke-width': '2',
+                'stroke-linecap': 'round',
+                'stroke-linejoin': 'round'
+              }
+            })
+          ])
+        ])
+      )
+    }
+
+    // center shows title; only default slot (page content) is supported
+    const centerChildren = [
+      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: '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: 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', { style: { position: 'relative'} }, [this.$slots.default])
+    ])
+  }
+}
+</script>
+
+<style scoped>
+.mpx-page-warp {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+
+.mpx-titlebar--hidden {
+  display: none;
+}
+
+.mpx-titlebar__safe {
+  padding-top: var(--safe-area-inset-top);
+}
+
+.mpx-titlebar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  box-sizing: border-box;
+}
+
+.mpx-titlebar__left,
+.mpx-titlebar__right {
+  flex: 0 0 auto;
+  min-width: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.mpx-titlebar__center {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 0 8px;
+}
+
+.mpx-titlebar__title {
+  font-size: 17px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 500;
+}
+
+.mpx-titlebar__back {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: inherit;
+  padding: 6px;
+  cursor: pointer;
+}
+
+.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: 99999;
+  /* 脱离上下文，单独渲染加速，修复安卓低端机型在页面滚动时titlebar闪烁问题 */
+  transform: translateZ(0);
+}
+
+.mpx-titlebar__content {
+  flex: 1;
+  overflow: hidden;
+  transform: translateZ(0);
+}
+
+.mpx-titlebar__scroll {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+/* SVG icon sizing and inherit color */
+.mpx-titlebar__back svg {
+  display: block;
+  width: 20px;
+  height: 20px;
+}
+
+.mpx-titlebar__back path {
+  stroke: currentColor;
+}
+</style>
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index a077e024e4..ef3b5ea18d 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2824,7 +2824,14 @@ function getVirtualHostRoot (options, meta) {
     }
     if (ctorType === 'page') {
       if (isWeb(mode)) {
-        return createASTElement('page')
+          const rootView = createASTElement('titlebar', [
+              {
+                  name: 'pageConfig',
+                  value: '{{ this.$options.__mpxPageConfig }}'
+              }
+          ])
+          processElement(rootView, rootView, options, meta)
+          return rootView
       }
       if (isReact(mode)) {
         const rootView = createASTElement('view', [
diff --git a/packages/webpack-plugin/lib/utils/dom-tag-config.js b/packages/webpack-plugin/lib/utils/dom-tag-config.js
index a07accc10f..f7058b7893 100644
--- a/packages/webpack-plugin/lib/utils/dom-tag-config.js
+++ b/packages/webpack-plugin/lib/utils/dom-tag-config.js
@@ -65,7 +65,7 @@ const isNativeMiniTag = makeMap(
   'sticky-section,functional-page-navigator,navigator,audio,camera,' +
   'channel-live,channel-video,image,live-player,live-pusher,video,' +
   'voip-room,map,canvas,web-view,ad,ad-custom,official-account,' +
-  'open-data,native-component,aria-component,page-meta'
+  'open-data,native-component,aria-component,page-meta,titlebar'
 )
 
 /**
@@ -78,7 +78,7 @@ const isBuildInWebTag = makeMap(
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
   'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
   'mpx-form,mpx-navigator,mpx-rich-text,' +
-  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text,mpx-titlebar'
 )
 
 /**

From e518c9e1086448079bf6157a45e282afcc9cbdd0 Mon Sep 17 00:00:00 2001
From: mackwang <mackwang@didiglobal.com>
Date: Wed, 24 Jun 2026 16:13:27 +0800
Subject: [PATCH 2/4] =?UTF-8?q?docs:=20web=E6=94=AF=E6=8C=81titlebar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs-vitepress/api/app-config.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/docs-vitepress/api/app-config.md b/docs-vitepress/api/app-config.md
index 2effb37fc1..871e7d3418 100644
--- a/docs-vitepress/api/app-config.md
+++ b/docs-vitepress/api/app-config.md
@@ -178,3 +178,32 @@ mpx.config.webConfig.routeConfig = {
 mpx.config.webConfig.disablePageTransition = true
 ```
 此处的 `disablePageTransition` 后续将被废弃，请使用编译阶段的[disablePageTransition](compile.md#webconfig)进行配置
+
+### webConfig.enableTitleBar
+
+`boolean = false`
+
+是否在 Web 输出时启用内置标题栏（`mpx-titlebar`）组件。默认为 `false`，即不渲染标题栏。
+
+设为 `true` 后，Mpx 会在每个页面的根节点外层自动注入 `<mpx-titlebar>` 组件，读取 `app.json` 的 `window` 配置及当前页面 json 配置，渲染与小程序视觉一致的 fixed 标题栏（含安全区适配与返回按钮）。
+
+> **注意**：若页面 json 中将 `navigationStyle` 配置为 `'custom'`，则该页面的标题栏会自动隐藏，以支持自定义导航栏场景。
+
+```js
+import mpx from '@mpxjs/core'
+
+mpx.config.webConfig.enableTitleBar = true
+```
+
+### webConfig.safeAreaInsetTop
+
+`number = 24`
+
+在 **Android** 设备上，标题栏顶部安全区（状态栏）的高度（单位：px）。仅在 `enableTitleBar` 为 `true` 且非 iOS 设备时生效；iOS 设备会自动使用 `env(safe-area-inset-top)` 获取安全区高度，无需手动配置。
+
+```js
+import mpx from '@mpxjs/core'
+
+// 将 Android 状态栏高度设为 28px（默认 24px）
+mpx.config.webConfig.safeAreaInsetTop = 28
+```

From 5832646861cc83932f824da06ab03f9e53f10246 Mon Sep 17 00:00:00 2001
From: mackwang <mackwang@didiglobal.com>
Date: Wed, 1 Jul 2026 18:13:34 +0800
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20web=20titlebar=20=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E5=9C=A8=20processTemplate=20=E4=B8=AD=E6=8C=89?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8F=92=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除 compiler.js 中 page+web 模式下插入 titlebar AST 节点的逻辑，还原为 createASTElement('page')
- 删除 platform/template/wx/component-config/titlebar.js 及其注册
- 移除 dom-tag-config.js 中 mpx-titlebar 的 isBuildInWebTag 注册
- processTemplate.js 中对 page 类型按编译期 navigationStyle 判断插入 mpx-titlebar，注册为 builtInComponent 而非全局组件
- processJSON.js 处理 app 时写入 mpx.appJson 供编译期复用
- mpx-titlebar.vue：简化 props（移除 windowConfig，pageConfig 接收已合并配置）、移除冗余 cfg computed、navigator.userAgent 移至 computed 避免 SSR 崩溃、删除 console.log

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../template/wx/component-config/index.js     |  2 -
 .../template/wx/component-config/titlebar.js  | 12 ------
 .../runtime/components/web/mpx-titlebar.vue   | 35 +++++++----------
 .../lib/template-compiler/compiler.js         |  9 +----
 .../lib/utils/dom-tag-config.js               |  2 +-
 packages/webpack-plugin/lib/web/index.js      |  3 +-
 .../webpack-plugin/lib/web/processJSON.js     |  5 ++-
 .../webpack-plugin/lib/web/processTemplate.js | 38 ++++++++++++++++++-
 8 files changed, 59 insertions(+), 47 deletions(-)
 delete mode 100644 packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js

diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
index 87fc21394e..b5a65229fb 100644
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
+++ b/packages/webpack-plugin/lib/platform/template/wx/component-config/index.js
@@ -44,7 +44,6 @@ const customBuiltInComponent = require('./custom-built-in-component')
 const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
-const titlebar = require('./titlebar')
 
 /**
  * 未命中上方任一组件 test 的标签，仍须走 normalizeComponentRules 中的通用
@@ -145,7 +144,6 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     rootPortal({ print }),
     stickyHeader({ print }),
     stickySection({ print }),
-    titlebar({ print }),
     defaultCatchAllComponentConfig()
   ]
 }
diff --git a/packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js b/packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js
deleted file mode 100644
index 874f96666e..0000000000
--- a/packages/webpack-plugin/lib/platform/template/wx/component-config/titlebar.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const TAG_NAME = 'titlebar'
-
-module.exports = function () {
-  return {
-    // 匹配标签名，可传递正则
-    test: TAG_NAME,
-    web (tag, { el }) {
-      el.isBuiltIn = true
-      return 'mpx-titlebar'
-    }
-  }
-}
diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue
index 3695e1259d..de689ecc23 100644
--- a/packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue
+++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-titlebar.vue
@@ -1,46 +1,34 @@
 <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: {
-    // 来自 app.json 中 window 的 titlebar 相关配置
-    windowConfig: {
-      type: Object,
-      default: () => global.__mpxPageConfig
-    },
-    // 来自 页面 json 中的 titlebar 相关配置，会覆盖 windowConfig
+    // 已合并 app.json window 配置与页面 json 配置的最终配置
     pageConfig: {
       type: Object,
       default: () => ({})
     }
   },
   computed: {
-    // 合并全局 window 配置与页面配置（页面配置覆盖全局配置）
-    cfg() {
-      return Object.assign({}, this.windowConfig || {}, this.pageConfig || {})
-    },
     // 标题文本（兼容常见字段名）
     titleText() {
-      return this.cfg.navigationBarTitleText || this.cfg.title || ''
+      return this.pageConfig.navigationBarTitleText || this.pageConfig.title || ''
     },
     // 背景色（兼容常见字段）
     backgroundColor() {
-      return this.cfg.navigationBarBackgroundColor || '#ffffff'
+      return this.pageConfig.navigationBarBackgroundColor || '#ffffff'
     },
     // 文本颜色，微信小程序中 navigationBarTextStyle 为 white 或 black
     textColor() {
-      const style = this.cfg.navigationBarTextStyle || 'black'
+      const style = this.pageConfig.navigationBarTextStyle || 'black'
       return style === 'white' ? '#ffffff' : '#000000'
     },
     // navigationStyle: 'default' | 'custom'，custom 表示需要自定义绘制
     navigationStyle() {
-      return this.cfg.navigationStyle || 'default'
+      return this.pageConfig.navigationStyle || 'default'
     },
     // 是否隐藏（navigationStyle 为 'custom' 时也应隐藏）
     hidden() {
@@ -48,7 +36,6 @@ export default {
     },
     // 是否展示返回按钮：根据浏览器历史判断（不依赖额外 page 配置）
     showBack() {
-      console.log('showBack', this.$router.stack.length)
       try {
         return this.$router.stack.length > 1
       } catch (e) {
@@ -62,10 +49,16 @@ export default {
       }
       return 24
     },
+    isIOS() {
+      return /iP(hone|od|ad)/.test(navigator.userAgent)
+    },
+    innerHeight() {
+      return (this.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'}`,
+        '--titlebar-height': this.innerHeight,
+        '--safe-area-inset-top': `${this.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))',
       }
     },
@@ -77,7 +70,7 @@ export default {
     },
     innerStyle() {
       return {
-        height: innerHeight
+        height: this.innerHeight
       }
     }
   },
diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js
index ef3b5ea18d..a077e024e4 100644
--- a/packages/webpack-plugin/lib/template-compiler/compiler.js
+++ b/packages/webpack-plugin/lib/template-compiler/compiler.js
@@ -2824,14 +2824,7 @@ function getVirtualHostRoot (options, meta) {
     }
     if (ctorType === 'page') {
       if (isWeb(mode)) {
-          const rootView = createASTElement('titlebar', [
-              {
-                  name: 'pageConfig',
-                  value: '{{ this.$options.__mpxPageConfig }}'
-              }
-          ])
-          processElement(rootView, rootView, options, meta)
-          return rootView
+        return createASTElement('page')
       }
       if (isReact(mode)) {
         const rootView = createASTElement('view', [
diff --git a/packages/webpack-plugin/lib/utils/dom-tag-config.js b/packages/webpack-plugin/lib/utils/dom-tag-config.js
index f7058b7893..b12a03955d 100644
--- a/packages/webpack-plugin/lib/utils/dom-tag-config.js
+++ b/packages/webpack-plugin/lib/utils/dom-tag-config.js
@@ -78,7 +78,7 @@ const isBuildInWebTag = makeMap(
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
   'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
   'mpx-form,mpx-navigator,mpx-rich-text,' +
-  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text,mpx-titlebar'
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
 )
 
 /**
diff --git a/packages/webpack-plugin/lib/web/index.js b/packages/webpack-plugin/lib/web/index.js
index c69227511c..e76905d71d 100644
--- a/packages/webpack-plugin/lib/web/index.js
+++ b/packages/webpack-plugin/lib/web/index.js
@@ -74,7 +74,8 @@ module.exports = function ({
             usingComponentsInfo,
             originalUsingComponents,
             componentGenerics,
-            componentPlaceholder
+            componentPlaceholder,
+            jsonContent
           }, callback)
         },
         (callback) => {
diff --git a/packages/webpack-plugin/lib/web/processJSON.js b/packages/webpack-plugin/lib/web/processJSON.js
index 0c5c5cd7d4..5747ddd1e9 100644
--- a/packages/webpack-plugin/lib/web/processJSON.js
+++ b/packages/webpack-plugin/lib/web/processJSON.js
@@ -116,7 +116,10 @@ module.exports = function (jsonContent, {
       }
     }
 
-    if (ctorType !== 'app') {
+    if (ctorType === 'app') {
+      // 存储原始 app json（rulesRunner 执行前），供编译期其他模块读取基础配置
+      mpx.appJson = jsonObj
+    } else {
       rulesRunnerOptions.mainKey = ctorType
     }
 
diff --git a/packages/webpack-plugin/lib/web/processTemplate.js b/packages/webpack-plugin/lib/web/processTemplate.js
index 4d66316cd9..0eddee9389 100644
--- a/packages/webpack-plugin/lib/web/processTemplate.js
+++ b/packages/webpack-plugin/lib/web/processTemplate.js
@@ -1,10 +1,15 @@
+const JSON5 = require('json5')
 const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
+const normalize = require('../utils/normalize')
 const parseRequest = require('../utils/parse-request')
 const { matchCondition } = require('../utils/match-condition')
 const { getWxTemplateComponentName, serializeWxTemplateDefinition, buildWebTemplateImportMergeExpr } = require('./template-shared')
 
+const titleBarPath = normalize.lib('runtime/components/web/mpx-titlebar.vue')
+const validNavigationStyles = ['default', 'custom']
+
 module.exports = function (template, {
   loaderContext,
   hasScoped,
@@ -16,7 +21,8 @@ module.exports = function (template, {
   usingComponentsInfo,
   originalUsingComponents,
   componentGenerics,
-  componentPlaceholder
+  componentPlaceholder,
+  jsonContent
 }, callback) {
   const mpx = loaderContext.getMpx()
   const {
@@ -161,6 +167,36 @@ module.exports = function (template, {
           }
         }
 
+        // Page 在 web 模式下插入 titlebar 组件
+        if (ctorType === 'page') {
+          let needTitleBar = true
+          // 页面级 navigationStyle 优先，未配置时回退到 app 全局配置
+          let navigationStyle = mpx.appJson && mpx.appJson.window && mpx.appJson.window.navigationStyle
+          if (!validNavigationStyles.includes(navigationStyle)) {
+            navigationStyle = undefined
+          }
+          if (jsonContent) {
+            try {
+              const jsonObj = JSON5.parse(jsonContent)
+              if (validNavigationStyles.includes(jsonObj.navigationStyle)) {
+                navigationStyle = jsonObj.navigationStyle
+              }
+            } catch (e) {
+              // json 解析失败，保持默认行为
+            }
+          }
+          if (navigationStyle === 'custom') {
+            needTitleBar = false
+          }
+          if (needTitleBar) {
+            builtInComponentsMap['mpx-titlebar'] = {
+              resource: addQuery(titleBarPath, { isComponent: true })
+            }
+            const serialized = templateCompiler.serialize(root)
+            return `<mpx-titlebar :page-config="$options.__mpxPageConfig">${serialized}</mpx-titlebar>`
+          }
+        }
+
         return templateCompiler.serialize(root)
       }
     })

From 6d4d109d939f9d1384e521da48bf21f80b3563f2 Mon Sep 17 00:00:00 2001
From: mackwang <mackwang@didiglobal.com>
Date: Wed, 1 Jul 2026 18:37:29 +0800
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=E8=BF=98=E5=8E=9F=20dom-tag-co?=
 =?UTF-8?q?nfig=20=E4=B8=AD=20isNativeMiniTag=20=E7=9A=84=20titlebar=20?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新方案不对外暴露 titlebar 标签供用户调用，不需要在 isNativeMiniTag 中注册

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/webpack-plugin/lib/utils/dom-tag-config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webpack-plugin/lib/utils/dom-tag-config.js b/packages/webpack-plugin/lib/utils/dom-tag-config.js
index b12a03955d..a07accc10f 100644
--- a/packages/webpack-plugin/lib/utils/dom-tag-config.js
+++ b/packages/webpack-plugin/lib/utils/dom-tag-config.js
@@ -65,7 +65,7 @@ const isNativeMiniTag = makeMap(
   'sticky-section,functional-page-navigator,navigator,audio,camera,' +
   'channel-live,channel-video,image,live-player,live-pusher,video,' +
   'voip-room,map,canvas,web-view,ad,ad-custom,official-account,' +
-  'open-data,native-component,aria-component,page-meta,titlebar'
+  'open-data,native-component,aria-component,page-meta'
 )
 
 /**