From d4734d48f5256aab3be1c2b4f23540199221ca1b Mon Sep 17 00:00:00 2001
From: Karlcarlo <karlcarlo@163.com>
Date: Fri, 3 Jul 2026 13:39:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=B8=BF=E8=92=99=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9=20=E2=80=94=20wx.miniProgram=20=E4=B8=8D?=
 =?UTF-8?q?=E5=8F=AF=E7=94=A8=E6=97=B6=E9=9A=90=E8=97=8F=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E7=BB=99=E5=BE=AE=E4=BF=A1=E5=A5=BD=E5=8F=8B=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=BC=95=E5=AF=BC=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SharePage 首次渲染时检测 wx.miniProgram 是否可用
- 可用 → 显示绿色分享给微信好友按钮（bridge.share 流程）
- 不可用(鸿蒙等) → 显示蓝色引导卡片长按图片保存到相册，微信发送给好友
- 移除调试面板，恢复简洁 UI
---
 frontend/src/app/pages/SharePage.tsx | 121 ++++++++-------------------
 1 file changed, 36 insertions(+), 85 deletions(-)

diff --git a/frontend/src/app/pages/SharePage.tsx b/frontend/src/app/pages/SharePage.tsx
index 3a7c070..1256c35 100644
--- a/frontend/src/app/pages/SharePage.tsx
+++ b/frontend/src/app/pages/SharePage.tsx
@@ -14,6 +14,7 @@ import {
   Download,
   Check,
   Image as ImageIcon,
+  Smartphone,
 } from "lucide-react";
 import { toPng } from "html-to-image";
 import { Card } from "../components/ui/card";
@@ -24,25 +25,12 @@ import bridge from "../services/bridge";
 
 type SaveStatus = "idle" | "generating" | "success" | "error";
 
-/** 调试：检查小程序环境 */
-function checkEnv(): string[] {
-  const lines: string[] = [];
-  lines.push('UA: ' + navigator.userAgent.substring(0, 60));
+/** 检测是否支持微信小程序分享（wx.miniProgram 必须存在） */
+function supportsWxMiniProgramShare(): boolean {
   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;
+    return !!(w && w.miniProgram && typeof w.miniProgram.navigateBack === 'function');
+  } catch { return false; }
 }
 
 export function SharePage() {
@@ -53,48 +41,13 @@ export function SharePage() {
   const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
   const [imageUrl, setImageUrl] = useState<string | null>(null);
   const [linkCopied, setLinkCopied] = useState(false);
-  const [debugLog, setDebugLog] = useState<string[]>([]);
+  const [canShareToWechat, setCanShareToWechat] = useState(false);
   const cardRef = useRef<HTMLDivElement>(null);
 
-  const addLog = useCallback((msg: string) => {
-    console.log('[ShareDebug]', msg);
-    setDebugLog(prev => [...prev.slice(-15), new Date().toLocaleTimeString() + ' ' + msg]);
+  useEffect(() => {
+    setCanShareToWechat(supportsWxMiniProgramShare());
   }, []);
 
-  // 分享按钮（带调试日志）
-  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 降级）
   const handleCopyLink = useCallback(async () => {
     const shareUrl = `${window.location.origin}/app_03/share/${reportId}`;
@@ -365,27 +318,6 @@ export function SharePage() {
           </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
           initial={{ opacity: 0, y: 20 }}
@@ -417,14 +349,33 @@ export function SharePage() {
       {/* 底部固定操作栏 */}
       <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 pb-safe z-10">
         <div className="max-w-md mx-auto space-y-3">
-          {/* 微信分享按钮（仅在 web-view 环境下生效） */}
-          <Button
-            onClick={handleShare}
-            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" />
-            <span>分享给微信好友</span>
-          </Button>
+          {/* 微信分享：仅 wx.miniProgram 可用时显示 */}
+          {canShareToWechat ? (
+            <Button
+              onClick={() => bridge.share({
+                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"
+            >
+              <Share2 className="w-5 h-5" />
+              <span>分享给微信好友</span>
+            </Button>
+          ) : (
+            <Card className="bg-blue-50 border-blue-200 rounded-2xl p-4">
+              <div className="flex items-start gap-3">
+                <Smartphone className="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium text-blue-700 mb-1">📱 如何分享</p>
+                  <p className="text-xs text-blue-600 leading-relaxed">
+                    长按上方预览图片 → 保存到相册，然后通过微信发送给好友
+                  </p>
+                </div>
+              </div>
+            </Card>
+          )}
           <Button
             onClick={handleCopyLink}
             className="w-full h-12 rounded-2xl text-sm font-medium flex items-center justify-center gap-2 border-2 border-gray-200 bg-white hover:bg-gray-50 text-gray-600"
@@ -447,7 +398,7 @@ export function SharePage() {
           </Button>
           <p className="text-center text-xs text-gray-400 mt-2">
             分享到微信或保存图片到相册
-            <span className="ml-2 opacity-40">v26070202</span>
+            <span className="ml-2 opacity-40">v26070203</span>
           </p>
         </div>
       </div>