feat: Add share button to ReturnChartModal using html2canvas for image generation

frontend/src/components/TradePanel.tsx

@@ -6,10 +6,11 @@
  */
 
 import { useState, useEffect, useMemo, useRef } from 'react';
-import { TrendingUp, TrendingDown, Wallet, Package, RotateCcw, Eye, ChevronRight, Play, Pause, BarChart3, Trophy, X, TrendingUpIcon } from 'lucide-react';
+import { TrendingUp, TrendingDown, Wallet, Package, RotateCcw, Eye, ChevronRight, Play, Pause, BarChart3, Trophy, X, TrendingUpIcon, Share2 } from 'lucide-react';
 import { useGameStore, calculateReturnRate, calculateTotalAsset } from '@/store/gameStore';
 import { api } from '@/lib/api';
 import { createChart, ColorType, LineData, Time, LineStyle } from 'lightweight-charts';
+import html2canvas from 'html2canvas';
 
 export default function TradePanel() {
   const [volume, setVolume] = useState(100);
@@ -439,11 +440,55 @@ interface ReturnChartModalProps {
 
 function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIndex, initialCapital, stats }: ReturnChartModalProps) {
   const chartContainerRef = useRef<HTMLDivElement>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
   const chartRef = useRef<any>(null);
   const [hs300Data, setHS300Data] = useState<{date: string, close: number}[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isSharing, setIsSharing] = useState(false);
 
-  useEffect(() => {
+  // 分享功能
+  const handleShare = async () => {
+    if (!modalRef.current) return;
+    setIsSharing(true);
+    try {
+      // 稍微延迟确保 UI 渲染完成
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      const canvas = await html2canvas(modalRef.current, {
+        backgroundColor: '#1E212B',
+        scale: 2, // 提高清晰度
+        useCORS: true,
+        logging: false,
+        ignoreElements: (element) => {
+          // 忽略关闭和分享按钮
+          return element.tagName === 'BUTTON';
+        }
+      });
+      
+      const image = canvas.toDataURL('image/png');
+      
+      // 移动端尝试调用原生分享，否则下载
+      if (navigator.share) {
+        const blob = await (await fetch(image)).blob();
+        const file = new File([blob], 'profit_chart.png', { type: 'image/png' });
+        await navigator.share({
+          files: [file],
+          title: '我的复盘收益率',
+          text: '看看我在 StockReplay 的复盘战绩！',
+        });
+      } else {
+        const link = document.createElement('a');
+        link.href = image;
+        link.download = `StockReplay_Profit_${new Date().getTime()}.png`;
+        link.click();
+      }
+    } catch (error) {
+      console.error('Share failed:', error);
+      alert('生成分享图片失败');
+    } finally {
+      setIsSharing(false);
+    }
+  };
     const fetchHS300 = async () => {
       try {
         const visibleKlines = allKlines.slice(initialIndex, currentIndex + 1);
@@ -591,10 +636,20 @@ function ReturnChartModal({ onClose, allKlines, history, initialIndex, currentIn
 
   return (
     <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-      <div className="bg-[#1E212B] rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl border border-[#2A2D3C]">
+      <div ref={modalRef} className="bg-[#1E212B] rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl border border-[#2A2D3C]">
         <div className="px-4 py-3 border-b border-[#2A2D3C] flex items-center justify-between">
           <h3 className="text-lg font-bold text-white flex items-center gap-2"><TrendingUpIcon size={18} className="text-purple-500" />收益率曲线</h3>
-          <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg bg-[#2A2D3C] hover:bg-[#35394B] text-gray-400 hover:text-white transition-colors"><X size={18} /></button>
+          <div className="flex items-center gap-2">
+            <button 
+              onClick={handleShare}
+              disabled={isSharing}
+              className="w-8 h-8 flex items-center justify-center rounded-lg bg-[#2A2D3C] hover:bg-[#35394B] text-blue-400 hover:text-white transition-colors"
+              title="分享战绩"
+            >
+              <Share2 size={18} className={isSharing ? 'animate-pulse' : ''} />
+            </button>
+            <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-lg bg-[#2A2D3C] hover:bg-[#35394B] text-gray-400 hover:text-white transition-colors"><X size={18} /></button>
+          </div>
         </div>
         <div className="pt-3 pb-2 px-1 lg:px-2">
           {isLoading ? <div className="w-full h-[240px] bg-[#191B28] rounded-xl flex items-center justify-center text-gray-400">加载中...</div> : benchmarkData.length === 0 ? <div className="w-full h-[240px] bg-[#191B28] rounded-xl flex items-center justify-center text-gray-400">暂无沪深300数据</div> : <div ref={chartContainerRef} className="w-full h-[240px] bg-[#191B28] rounded-xl overflow-hidden" />}

package-lock.json

@@ -2,5 +2,60 @@
   "name": "Paper_Trading",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "html2canvas": "^1.4.1"
+      }
+    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    }
+  }
 }

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "html2canvas": "^1.4.1"
+  }
+}