fix(chat): show browser hint in development
This commit is contained in:
@@ -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 安装提示触发器(无可见 UI,3.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;
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
/**
|
||||
* 浏览器 / WebView 检测
|
||||
*
|
||||
* 原始 Dart: `lib/utils/browser_detector.dart`
|
||||
*
|
||||
* 主要用例:
|
||||
* - 嵌入 Facebook / 微信 / 微博内嵌浏览器时,给用户提示「在外部浏览器打开」。
|
||||
* - 判断 PWA 模式(standalone)。
|
||||
*/
|
||||
export const BrowserDetector = {
|
||||
/** 当前是否在 Facebook 内嵌浏览器 */
|
||||
|
||||
Reference in New Issue
Block a user