admin
6e51cb7d16
- Updated comments in various components, schemas, and repositories to remove references to original Dart files. - Ensured consistency in documentation while maintaining the context of the code.
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client";
|
|
/**
|
|
* BrowserHintOverlay 浏览器提示
|
|
*
|
|
*
|
|
*
|
|
* 用途：在应用内浏览器（WebView、微信内置浏览器等）中显示提示，
|
|
* 引导用户使用外部浏览器访问。
|
|
*
|
|
* 行为：
|
|
* - 开发环境始终显示（测试方便）
|
|
* - 生产环境仅在应用内浏览器中显示
|
|
* - 视觉：右上角 👆 + 模糊背景气泡
|
|
*/
|
|
import { useState } from "react";
|
|
|
|
import { BrowserDetector } from "@/utils";
|
|
|
|
import styles from "./browser-hint-overlay.module.css";
|
|
|
|
export interface BrowserHintOverlayProps {
|
|
/** 自定义提示文本 */
|
|
text?: string;
|
|
/** 强制显示（开发模式测试用） */
|
|
forceShow?: boolean;
|
|
}
|
|
|
|
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(BrowserDetector.isInAppBrowser);
|
|
|
|
// 开发模式或应用内浏览器才显示
|
|
const shouldShow = forceShow || isInAppBrowser;
|
|
if (!shouldShow) return null;
|
|
|
|
return (
|
|
<div className={styles.overlay} role="status" aria-live="polite">
|
|
<span className={styles.emoji} aria-hidden="true">
|
|
👆
|
|
</span>
|
|
<div className={styles.hintBubble}>{text}</div>
|
|
</div>
|
|
);
|
|
}
|