feat: 愈心魔方原生 cover 顶栏 logo 与本地 H5 联调

WebView 全屏 + cover-image 网络 logo；开发模式自动指向本机 Vite，同步 H5 品牌 logo。

Co-authored-by: Cursor <cursoragent@cursor.com>

pages.json

@@ -12,10 +12,12 @@
 				"navigationBarTitleText": "",
 				"navigationStyle": "custom",
 				"navigationBarTextStyle": "black",
+				"navigationBarBackgroundColor": "#ffd1c7",
 				"backgroundColor": "#ffd1c7",
 				"backgroundColorTop": "#ffd1c7",
 				"mp-weixin": {
 					"navigationStyle": "custom",
+					"navigationBarBackgroundColor": "#ffd1c7",
 					"backgroundColorTop": "#ffd1c7"
 				}
 			}
@@ -183,6 +185,7 @@
 		// "backgroundColor": "#F8F8F8",
 		"navigationStyle": "custom",
 		"navigationBarTextStyle": "black",
+		"navigationBarBackgroundColor": "#ffd1c7",
 		"backgroundColor": "#ffd1c7",
 		"backgroundColorTop": "#ffd1c7"
 

pages/yxg-magic/index.vue

@@ -1,29 +1,69 @@
 <template>
-	<web-view class="yxg-webview" :src="h5Url"></web-view>
+	<view class="yxg-page">
+		<web-view class="yxg-webview" :src="h5Url" />
+		<cover-view class="yxg-cover" :style="coverStyle">
+			<cover-image class="yxg-cover-logo" :src="logoSrc" :style="logoStyle" />
+		</cover-view>
+	</view>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { YXG_H5_BASE, YXG_H5_VERSION } from '@/util/yxgConfig.js'
+import { computed, onMounted, ref } from 'vue'
+import { YXG_H5_BASE, YXG_H5_VERSION, YXG_H5_LOGO_URL } from '@/util/yxgConfig.js'
 
-/** H5 顶栏安全区：状态栏 + 胶囊行，避免 logo 与内容重叠 */
-function topInsetPx() {
 const sys = uni.getSystemInfoSync()
-	const statusBar = sys.statusBarHeight || 0
+const statusBarH = sys.statusBarHeight || 0
+const screenW = sys.windowWidth || 375
+let navBarH = 44
+
 // #ifdef MP-WEIXIN
 try {
 	const menu = uni.getMenuButtonBoundingClientRect()
-		if (menu && menu.bottom > statusBar) {
-			return Math.ceil(menu.bottom + 6)
+	if (menu?.height) {
+		navBarH = (menu.top - statusBarH) * 2 + menu.height
 	}
 } catch (_) {}
 // #endif
-	return statusBar + 44
+
+const headH = statusBarH + navBarH
+const logoW = Math.min(148, Math.floor(screenW * 0.48))
+const logoH = 36
+const logoLeft = Math.floor((screenW - logoW) / 2)
+const logoTop = statusBarH + Math.floor((navBarH - logoH) / 2)
+
+const logoSrc = ref(YXG_H5_LOGO_URL)
+
+onMounted(() => {
+	uni.downloadFile({
+		url: YXG_H5_LOGO_URL,
+		success(res) {
+			if (res.statusCode === 200 && res.tempFilePath) {
+				logoSrc.value = res.tempFilePath
+			}
+		},
+	})
+})
+
+const coverStyle = {
+	position: 'fixed',
+	top: '0',
+	left: '0',
+	width: '100%',
+	height: `${headH}px`,
+	backgroundColor: '#ffd1c7',
+	zIndex: '9999',
+}
+
+const logoStyle = {
+	position: 'absolute',
+	left: `${logoLeft}px`,
+	top: `${logoTop}px`,
+	width: `${logoW}px`,
+	height: `${logoH}px`,
 }
 
-const topInset = topInsetPx()
 const h5Url = computed(
-	() => `${YXG_H5_BASE}?mp=1&v=${YXG_H5_VERSION}&sbh=${topInset}`,
+	() => `${YXG_H5_BASE}?mp=1&nh=1&v=${YXG_H5_VERSION}`,
 )
 </script>
 
@@ -35,6 +75,11 @@ page {
 </style>
 
 <style scoped>
+.yxg-page {
+	width: 100%;
+	height: 100%;
+	background-color: #ffd1c7;
+}
 .yxg-webview {
 	width: 100%;
 	height: 100%;

util/yxgConfig.js

@@ -1,4 +1,15 @@
 /** 愈心魔方 H5（digital-psychology user-h5） */
-export const YXG_H5_VERSION = '202608253'
-export const YXG_H5_BASE = 'https://h5.yuxingu.com.cn/psy/'
+import { LOCAL_H5_HOST } from './yxgConfig.local.js'
+
+const PROD_BASE = 'https://h5.yuxingu.com.cn/psy/'
+const PROD_VERSION = '202608256'
+
+const isDev = import.meta.env.DEV
+
+export const YXG_H5_VERSION = isDev ? 'local' : PROD_VERSION
+export const YXG_H5_BASE = isDev ? `http://${LOCAL_H5_HOST}/psy/` : PROD_BASE
+/** cover-image 仅支持网络图/临时路径，不能用 /static */
+export const YXG_H5_LOGO_URL = isDev
+	? `http://${LOCAL_H5_HOST}/psy/logo.png`
+	: `${PROD_BASE}logo.png`
 export const YXG_H5_HOME_URL = `${YXG_H5_BASE}?mp=1&v=${YXG_H5_VERSION}`

util/yxgConfig.local.js

@@ -0,0 +1,5 @@
+/**
+ * 本地联调 H5（仅开发编译生效，发行仍走线上域名）
+ * 改成你电脑局域网 IP — 运行 digital-psychology 的 `npm run dev:mp` 会打印
+ */
+export const LOCAL_H5_HOST = '192.168.100.16:5173'