fix(chat): show browser hint in development

This commit is contained in:
2026-06-17 18:02:43 +08:00
parent 56b2c39ca5
commit bded7497d2
4 changed files with 7 additions and 16 deletions
+2 -1
View File
@@ -24,6 +24,7 @@ import { useAuthState } from "@/stores/auth/auth-context";
import type { LoginStatus } from "@/data/dto/auth";
import { AuthStorage } from "@/data/storage/auth/auth_storage";
import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
import { AppEnvUtil } from "@/utils/app-env";
import { MobileShell } from "@/app/_components/core";
@@ -155,7 +156,7 @@ export function ChatScreen() {
</div>
{/* 浏览器提示(应用内浏览器检测) */}
<BrowserHintOverlay />
<BrowserHintOverlay forceShow={AppEnvUtil.isDevelopment()} />
{/* PWA 安装提示触发器(无可见 UI3.5s 后弹 dialog */}
<PwaInstallOverlay />
@@ -24,6 +24,7 @@
font-size: var(--font-size-sm, 12px);
font-weight: 500;
color: #fff;
white-space: pre-line;
backdrop-filter: blur(10px);
max-width: 200px;
}
@@ -14,6 +14,8 @@
*/
import { useState } from "react";
import { BrowserDetector } from "@/utils/browser-detect";
import styles from "./browser-hint-overlay.module.css";
export interface BrowserHintOverlayProps {
@@ -23,21 +25,14 @@ export interface BrowserHintOverlayProps {
forceShow?: boolean;
}
const DEFAULT_TEXT = "Tap ⋮ menu, then 'Open in browser'";
function detectInAppBrowser(): boolean {
if (typeof navigator === "undefined") return false;
const ua = navigator.userAgent;
// 常见应用内浏览器 UA 特征
return /MicroMessenger|Weibo|QQ\//.test(ua);
}
const DEFAULT_TEXT = "Tap ⋮ , open in browser\nfor better chat";
export function BrowserHintOverlay({
text = DEFAULT_TEXT,
forceShow = false,
}: BrowserHintOverlayProps) {
// lazy initializer:首次渲染即计算(避免 useEffect 中调 setState 的 lint 错)
const [isInAppBrowser] = useState(detectInAppBrowser);
const [isInAppBrowser] = useState(BrowserDetector.isInAppBrowser);
// 开发模式或应用内浏览器才显示
const shouldShow = forceShow || isInAppBrowser;