debug: SharePage 添加可见调试面板,追踪分享按钮执行步骤

This commit is contained in:
2026-07-03 03:16:55 +08:00
parent 6b04e10552
commit 6980c5ee05

View File

@@ -24,6 +24,27 @@ import bridge from "../services/bridge";
type SaveStatus = "idle" | "generating" | "success" | "error"; type SaveStatus = "idle" | "generating" | "success" | "error";
/** 调试:检查小程序环境 */
function checkEnv(): string[] {
const lines: string[] = [];
lines.push('UA: ' + navigator.userAgent.substring(0, 60));
try {
const w = (window as any).wx;
lines.push('wx 对象: ' + (typeof w !== 'undefined' ? '存在' : '不存在'));
if (w) {
lines.push('wx.miniProgram: ' + (w.miniProgram ? '存在' : '不存在'));
if (w.miniProgram) {
lines.push('navigateBack: ' + (typeof w.miniProgram.navigateBack));
lines.push('postMessage: ' + (typeof w.miniProgram.postMessage));
w.miniProgram.getEnv((res: any) => {
lines.push('getEnv: ' + JSON.stringify(res));
});
}
}
} catch (e: any) { lines.push('wx 检测异常: ' + e.message); }
return lines;
}
export function SharePage() { export function SharePage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { reportId } = useParams(); const { reportId } = useParams();
@@ -32,8 +53,48 @@ export function SharePage() {
const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle"); const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
const [imageUrl, setImageUrl] = useState<string | null>(null); const [imageUrl, setImageUrl] = useState<string | null>(null);
const [linkCopied, setLinkCopied] = useState(false); const [linkCopied, setLinkCopied] = useState(false);
const [debugLog, setDebugLog] = useState<string[]>([]);
const cardRef = useRef<HTMLDivElement>(null); const cardRef = useRef<HTMLDivElement>(null);
const addLog = useCallback((msg: string) => {
console.log('[ShareDebug]', msg);
setDebugLog(prev => [...prev.slice(-15), new Date().toLocaleTimeString() + ' ' + msg]);
}, []);
// 分享按钮(带调试日志)
const handleShare = useCallback(() => {
setDebugLog([]);
const envInfo = checkEnv();
envInfo.forEach(m => addLog(m));
const w = (window as any).wx;
const mp = w?.miniProgram;
if (!mp) {
addLog('❌ wx.miniProgram 不存在,分享功能不可用');
return;
}
addLog('→ postMessage 发送 share 数据');
mp.postMessage({
data: {
action: 'share',
title: '孕育无忧 · 报告解读',
summary: shareData?.overall_summary || shareData?.emotional_summary || '',
href: window.location.href,
scene: 'WXSceneSession',
}
});
addLog('→ 调用 navigateBack({delta:1})');
mp.navigateBack({
delta: 1,
success: () => addLog('✅ navigateBack 成功'),
fail: (err: any) => addLog('❌ navigateBack 失败: ' + JSON.stringify(err)),
complete: () => addLog('→ navigateBack complete'),
});
}, [addLog, shareData]);
// 复制链接(客户端优先,bridge 降级) // 复制链接(客户端优先,bridge 降级)
const handleCopyLink = useCallback(async () => { const handleCopyLink = useCallback(async () => {
const shareUrl = `${window.location.origin}/app_03/share/${reportId}`; const shareUrl = `${window.location.origin}/app_03/share/${reportId}`;
@@ -304,6 +365,27 @@ export function SharePage() {
</div> </div>
</div> </div>
{/* 调试面板:点击分享后显示执行步骤 */}
<AnimatePresence>
{debugLog.length > 0 && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
>
<Card className="bg-yellow-50 border-yellow-300 rounded-2xl p-3">
<div className="flex items-center justify-between mb-2">
<h4 className="font-semibold text-yellow-800 text-sm">🔍 分享调试</h4>
<button onClick={() => setDebugLog([])} className="text-yellow-600 text-xs">关闭</button>
</div>
<div className="bg-black/80 text-green-400 text-xs p-2 rounded-lg font-mono" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', lineHeight: 1.6 }}>
{debugLog.map((m, i) => <div key={i}>{m}</div>)}
</div>
</Card>
</motion.div>
)}
</AnimatePresence>
{/* 操作提示 */} {/* 操作提示 */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -337,12 +419,7 @@ export function SharePage() {
<div className="max-w-md mx-auto space-y-3"> <div className="max-w-md mx-auto space-y-3">
{/* 微信分享按钮(仅在 web-view 环境下生效) */} {/* 微信分享按钮(仅在 web-view 环境下生效) */}
<Button <Button
onClick={() => bridge.share({ onClick={handleShare}
title: '孕育无忧 · 报告解读',
summary: shareData?.overall_summary || shareData?.emotional_summary || '',
href: window.location.href,
scene: 'WXSceneSession',
})}
className="w-full h-14 rounded-2xl text-base font-semibold flex items-center justify-center gap-2 bg-[#07C160] hover:bg-[#06AD56] text-white shadow-lg shadow-green-300/30" className="w-full h-14 rounded-2xl text-base font-semibold flex items-center justify-center gap-2 bg-[#07C160] hover:bg-[#06AD56] text-white shadow-lg shadow-green-300/30"
> >
<Share2 className="w-5 h-5" /> <Share2 className="w-5 h-5" />