From 5a26841d3a0919f3340faa5ceaecf769d101ce21 Mon Sep 17 00:00:00 2001
From: jacy <18049821889@163.com>
Date: Thu, 16 Jul 2026 08:05:44 +0800
Subject: [PATCH] fix(h5): hide in-page nav titles that duplicate WeChat chrome

Keep back buttons and header layout. mini-user only hides titles on H5; partner/shop hide .app-page-title and legal titles; shared PageHeader defaults showTitle=false.
---
 apps/h5-partner/src/styles.css                 |  8 ++++++++
 apps/h5-partner/src/styles/legal.css           |  7 +++++--
 apps/h5-shop/src/styles.css                    |  8 ++++++++
 apps/h5-shop/src/styles/legal.css              |  7 +++++--
 apps/mini-user/src/components/PageNavBar.tsx   |  8 ++++++--
 .../mini-user/src/components/SubPageHeader.tsx |  6 ++++--
 .../mini-user/src/components/TabMainHeader.tsx |  8 +++++---
 apps/mini-user/src/pages/benefit/index.tsx     |  6 ++++--
 packages/shared-ui/src/PageHeader.tsx          | 18 +++++++++++++++---
 packages/shared-ui/src/base.css                |  6 ++++++
 10 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/apps/h5-partner/src/styles.css b/apps/h5-partner/src/styles.css
index 5d7ac46..63e6ddf 100644
--- a/apps/h5-partner/src/styles.css
+++ b/apps/h5-partner/src/styles.css
@@ -3065,3 +3065,11 @@ body {
   padding-top: 12px;
   border-top: 1px dashed rgba(166, 29, 36, 0.15);
 }
+
+/* 微信 H5 系统标题已展示：隐藏页内重复标题，保留返回键与顶栏布局 */
+.app-page-title {
+  visibility: hidden;
+  font-size: 0 !important;
+  line-height: 0 !important;
+  color: transparent !important;
+}
diff --git a/apps/h5-partner/src/styles/legal.css b/apps/h5-partner/src/styles/legal.css
index 800aac1..e730c01 100644
--- a/apps/h5-partner/src/styles/legal.css
+++ b/apps/h5-partner/src/styles/legal.css
@@ -35,8 +35,11 @@
 
 .legal-h5-title {
   margin: 0;
-  font-size: 17px;
-  font-weight: 600;
+  /* 与微信系统标题重复，仅保留顶栏高度与返回 */
+  visibility: hidden;
+  font-size: 0;
+  line-height: 0;
+  color: transparent;
 }
 
 .legal-h5-body {
diff --git a/apps/h5-shop/src/styles.css b/apps/h5-shop/src/styles.css
index 25c4e19..205302a 100644
--- a/apps/h5-shop/src/styles.css
+++ b/apps/h5-shop/src/styles.css
@@ -2702,3 +2702,11 @@
   cursor: pointer;
 }
 
+/* 微信 H5 系统标题已展示：隐藏页内重复标题，保留返回键与顶栏布局 */
+.app-page-title {
+  visibility: hidden;
+  font-size: 0 !important;
+  line-height: 0 !important;
+  color: transparent !important;
+}
+
diff --git a/apps/h5-shop/src/styles/legal.css b/apps/h5-shop/src/styles/legal.css
index 800aac1..e730c01 100644
--- a/apps/h5-shop/src/styles/legal.css
+++ b/apps/h5-shop/src/styles/legal.css
@@ -35,8 +35,11 @@
 
 .legal-h5-title {
   margin: 0;
-  font-size: 17px;
-  font-weight: 600;
+  /* 与微信系统标题重复，仅保留顶栏高度与返回 */
+  visibility: hidden;
+  font-size: 0;
+  line-height: 0;
+  color: transparent;
 }
 
 .legal-h5-body {
diff --git a/apps/mini-user/src/components/PageNavBar.tsx b/apps/mini-user/src/components/PageNavBar.tsx
index 40397ff..7920d66 100644
--- a/apps/mini-user/src/components/PageNavBar.tsx
+++ b/apps/mini-user/src/components/PageNavBar.tsx
@@ -10,6 +10,8 @@ type PageNavBarProps = {
   right?: ReactNode;
 };
 
+const isH5 = process.env.TARO_ENV === 'h5';
+
 /** 内页自定义导航栏（返回 + 标题 + 右侧操作），适配刘海屏 */
 export default function PageNavBar({
   title,
@@ -19,16 +21,18 @@ export default function PageNavBar({
   right,
 }: PageNavBarProps) {
   const metrics = useNavBarMetrics();
+  const showTitle = !isH5 && titleVisible;
 
   return (
     <View
       className={`page-nav-bar${solid ? ' page-nav-bar--solid' : ''}`}
       style={subPageNavBarStyle(metrics)}
+      aria-label={title}
     >
       <Text
-        className={`page-nav-bar__title${titleVisible ? ' page-nav-bar__title--visible' : ''}`}
+        className={`page-nav-bar__title${showTitle ? ' page-nav-bar__title--visible' : ''}`}
       >
-        {title}
+        {showTitle ? title : ''}
       </Text>
       <View
         className="page-nav-bar__content"
diff --git a/apps/mini-user/src/components/SubPageHeader.tsx b/apps/mini-user/src/components/SubPageHeader.tsx
index cf78328..2ba7426 100644
--- a/apps/mini-user/src/components/SubPageHeader.tsx
+++ b/apps/mini-user/src/components/SubPageHeader.tsx
@@ -9,6 +9,8 @@ type SubPageHeaderProps = {
   right?: ReactNode;
 };
 
+const isH5 = process.env.TARO_ENV === 'h5';
+
 /** 子页面固定实底顶栏（确认订单 / 地址 / 支付 / 订单列表等） */
 export default function SubPageHeader({ title, onBack, right }: SubPageHeaderProps) {
   const metrics = useNavBarMetrics();
@@ -27,8 +29,8 @@ export default function SubPageHeader({ title, onBack, right }: SubPageHeaderPro
   }
 
   return (
-    <View className="sub-page-header" style={subPageNavBarStyle(metrics)}>
-      <Text className="sub-page-header__title">{title}</Text>
+    <View className="sub-page-header" style={subPageNavBarStyle(metrics)} aria-label={title}>
+      {!isH5 ? <Text className="sub-page-header__title">{title}</Text> : null}
       <View
         className="sub-page-header__content"
         style={subPageNavContentStyle(metrics)}
diff --git a/apps/mini-user/src/components/TabMainHeader.tsx b/apps/mini-user/src/components/TabMainHeader.tsx
index 25ae63d..b561dfb 100644
--- a/apps/mini-user/src/components/TabMainHeader.tsx
+++ b/apps/mini-user/src/components/TabMainHeader.tsx
@@ -7,13 +7,15 @@ type TabMainHeaderProps = {
   extra?: ReactNode;
 };
 
-/** Tab 页顶栏：适配刘海屏 + 微信胶囊避让 */
+const isH5 = process.env.TARO_ENV === 'h5';
+
+/** Tab 页顶栏：适配刘海屏 + 微信胶囊避让；H5 不展示标题（与微信系统标题重复） */
 export default function TabMainHeader({ title, extra }: TabMainHeaderProps) {
   const metrics = useNavBarMetrics();
 
   return (
-    <View className="tab-main-header" style={navBarStyle(metrics)}>
-      <Text className="tab-main-header__title">{title}</Text>
+    <View className="tab-main-header" style={navBarStyle(metrics)} aria-label={title}>
+      {!isH5 ? <Text className="tab-main-header__title">{title}</Text> : null}
       <View
         className="tab-main-header__content"
         style={tabNavContentStyle(metrics)}
diff --git a/apps/mini-user/src/pages/benefit/index.tsx b/apps/mini-user/src/pages/benefit/index.tsx
index 1e46e1b..3b9e2e5 100644
--- a/apps/mini-user/src/pages/benefit/index.tsx
+++ b/apps/mini-user/src/pages/benefit/index.tsx
@@ -63,8 +63,10 @@ export default function BenefitPage() {
 
   return (
     <PageShell variant="tab" className="benefit-page">
-      <View className="benefit-header" style={navBarStyle(metrics)}>
-        <Text className="benefit-header-title">好客权益</Text>
+      <View className="benefit-header" style={navBarStyle(metrics)} aria-label="好客权益">
+        {process.env.TARO_ENV !== 'h5' ? (
+          <Text className="benefit-header-title">好客权益</Text>
+        ) : null}
         <View
           className="benefit-header__content"
           style={tabNavContentStyle(metrics)}
diff --git a/packages/shared-ui/src/PageHeader.tsx b/packages/shared-ui/src/PageHeader.tsx
index 70458a4..e5365f7 100644
--- a/packages/shared-ui/src/PageHeader.tsx
+++ b/packages/shared-ui/src/PageHeader.tsx
@@ -3,11 +3,19 @@ type PageHeaderProps = {
   onBack?: () => void;
   backLabel?: string;
   right?: React.ReactNode;
+  /** 是否展示居中标题；H5 微信内默认隐藏，避免与系统标题栏重复 */
+  showTitle?: boolean;
 };
 
-export default function PageHeader({ title, onBack, backLabel = '←', right }: PageHeaderProps) {
+export default function PageHeader({
+  title,
+  onBack,
+  backLabel = '←',
+  right,
+  showTitle = false,
+}: PageHeaderProps) {
   return (
-    <header className="page-header">
+    <header className="page-header" aria-label={title}>
       <div className="page-header-side">
         {onBack ? (
           <button type="button" className="back-btn" onClick={onBack} aria-label="返回">
@@ -17,7 +25,11 @@ export default function PageHeader({ title, onBack, backLabel = '←', right }:
           <span className="page-header-spacer" />
         )}
       </div>
-      <div className="app-page-title page-header-title">{title}</div>
+      {showTitle ? (
+        <div className="app-page-title page-header-title">{title}</div>
+      ) : (
+        <div className="page-header-title page-header-title--spacer" aria-hidden="true" />
+      )}
       <div className="page-header-side page-header-side--right">{right ?? <span className="page-header-spacer" />}</div>
     </header>
   );
diff --git a/packages/shared-ui/src/base.css b/packages/shared-ui/src/base.css
index 9b8618c..301b779 100644
--- a/packages/shared-ui/src/base.css
+++ b/packages/shared-ui/src/base.css
@@ -531,6 +531,12 @@ button, input, select, textarea { font: inherit; }
   flex: 1;
 }
 
+.page-header-title--spacer {
+  font-size: 0;
+  line-height: 0;
+  min-height: 26px;
+}
+
 /* Coupon badge (ticket notch) */
 .coupon-badge {
   position: relative;