新增分享

2025-02-20 20:23:08 +08:00
parent 77546aeffb
commit 10ba23415a
4 changed files with 151 additions and 109 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,8 @@
        "@radix-ui/react-tooltip": "^1.1.8",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "dom-to-image": "^2.6.0",
+        "dom-to-image-more": "^3.5.0",
        "html2canvas": "^1.4.1",
        "katex": "^0.16.21",
        "lucide-react": "^0.263.1",
@@ -26,6 +28,7 @@
        "rehype-katex": "^7.0.1",
        "remark-gfm": "^4.0.1",
        "remark-math": "^6.0.0",
+        "sonner": "^2.0.0",
        "tailwind-merge": "^2.6.0",
        "tailwind-scrollbar-hide": "^2.0.0",
        "tailwindcss-animate": "^1.0.7"
@@ -2615,6 +2618,16 @@
      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
    },
+    "node_modules/dom-to-image": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/dom-to-image/-/dom-to-image-2.6.0.tgz",
+      "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
+    },
+    "node_modules/dom-to-image-more": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmmirror.com/dom-to-image-more/-/dom-to-image-more-3.5.0.tgz",
+      "integrity": "sha512-VF/vwfHsPNMHJb5W/5sAmco3UIlEWSEFLppInQwqwN4joUvBULDwE3CqVcUDkUWleke/nZ5KwIVSrrFlGw7WPA=="
+    },
    "node_modules/eastasianwidth": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -5617,6 +5630,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/sonner": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/sonner/-/sonner-2.0.0.tgz",
+      "integrity": "sha512-3WeSl3WrEdhmdiTniT8JsCiVRVDOdn7k+4MG2drqzSMOeqrExm03HIwDBPKuq52JBqL7wRLG17QBIiSleUbljw==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
    "@radix-ui/react-tooltip": "^1.1.8",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "dom-to-image": "^2.6.0",
+    "dom-to-image-more": "^3.5.0",
    "html2canvas": "^1.4.1",
    "katex": "^0.16.21",
    "lucide-react": "^0.263.1",
@@ -26,6 +28,7 @@
    "rehype-katex": "^7.0.1",
    "remark-gfm": "^4.0.1",
    "remark-math": "^6.0.0",
+    "sonner": "^2.0.0",
    "tailwind-merge": "^2.6.0",
    "tailwind-scrollbar-hide": "^2.0.0",
    "tailwindcss-animate": "^1.0.7"
--- a/src/components/ChatUI.tsx
+++ b/src/components/ChatUI.tsx
@@ -448,8 +448,8 @@ const ChatUI = () => {

        {/* Main Chat Area */}
        <div className="flex-1 overflow-hidden">
-          <ScrollArea className="h-full p-4">
-            <div className="space-y-4" ref={chatAreaRef}>
+          <ScrollArea className="h-full p-4" ref={chatAreaRef}>
+            <div className="space-y-4">
              {messages.map((message) => (
                <div key={message.id} 
                  className={`flex items-start gap-2 ${message.sender.name === "我" ? "justify-end" : ""}`}>
--- a/src/components/SharePoster.tsx
+++ b/src/components/SharePoster.tsx
@@ -1,8 +1,9 @@
 import React, { useRef, useEffect } from 'react';
-import html2canvas from 'html2canvas';
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import domtoimage from 'dom-to-image';
+import { Dialog, DialogContent, DialogClose } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Share2, Download } from 'lucide-react';
+import { toast } from 'sonner';

 interface SharePosterProps {
  isOpen: boolean;
@@ -22,132 +23,148 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps)

  const generatePoster = async () => {
    if (!chatAreaRef.current) return;
-    
+    await document.fonts.ready;
+
    try {
-      // 克隆原始聊天区域以保持样式
-      const clonedChat = chatAreaRef.current.cloneNode(true) as HTMLElement;
-      
-      // 创建临时容器并设置与原始容器相同的样式
-      const tempContainer = document.createElement('div');
-      tempContainer.style.position = 'absolute';
-      tempContainer.style.left = '-9999px';
-      tempContainer.style.width = chatAreaRef.current.offsetWidth + 'px';
-      document.body.appendChild(tempContainer);
-      tempContainer.appendChild(clonedChat);
+      const messageContainer = chatAreaRef.current.querySelector('.space-y-4');
+      if (!messageContainer) return;

-      // 确保所有图片都已加载
-      const images = Array.from(clonedChat.getElementsByTagName('img'));
-      await Promise.all(images.map(img => {
-        if (img.complete) return Promise.resolve();
-        return new Promise((resolve) => {
-          img.onload = resolve;
-          img.onerror = resolve;
-        });
-      }));
+      // 预处理所有图片
+      const preloadImages = async () => {
+        const images = Array.from(messageContainer.getElementsByTagName('img'));
+        await Promise.all(images.map(async (img) => {
+          try {
+            const response = await fetch(img.src, {
+              mode: 'cors',
+              credentials: 'omit'
+            });
+            const blob = await response.blob();
+            const base64 = await new Promise((resolve) => {
+              const reader = new FileReader();
+              reader.onloadend = () => resolve(reader.result);
+              reader.readAsDataURL(blob);
+            });
+            img.src = base64 as string;
+          } catch (error) {
+            console.error('图片预处理失败:', error);
+          }
+        }));
+      };

-      const canvas = await html2canvas(clonedChat, {
-        backgroundColor: '#f3f4f6',
-        scale: 2,
-        useCORS: true, // 允许跨域图片
-        logging: false,
-        onclone: (document) => {
-          // 确保所有样式都被正确应用
-          const styles = Array.from(document.styleSheets);
-          styles.forEach(styleSheet => {
-            try {
-              if (styleSheet.cssRules) {
-                Array.from(styleSheet.cssRules).forEach(rule => {
-                  clonedChat.style.cssText += rule.cssText;
-                });
-              }
-            } catch (e) {
-              console.warn('无法访问样式表:', e);
-            }
-          });
-        }
+      await preloadImages();
+
+      const originalScroll = chatAreaRef.current.scrollTop;
+      chatAreaRef.current.scrollTop = 0;
+
+      const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
+      const extraSpace = 20;
+      const targetWidth = viewportWidth * 0.95 - (extraSpace * 2);
+
+      const currentWidth = messageContainer.getBoundingClientRect().width;
+      const scale = targetWidth / currentWidth;
+
+      const currentHeight = messageContainer.scrollHeight;
+      const adjustedHeight = currentHeight * scale;
+
+      const dataUrl = await domtoimage.toSvg(messageContainer as HTMLElement, {
+        bgcolor: '#f3f4f6',
+        scale: 1,  // 回到较安全的值
+        width: targetWidth + (extraSpace * 2),
+        height: adjustedHeight + (extraSpace * 2),
+        style: {
+          padding: `${extraSpace}px`,
+          margin: '0',
+          width: '110%',
+          height: '110%',
+          transform: `scale(${scale})`,
+          transformOrigin: 'top left',
+          background: '#f3f4f6',
+          boxSizing: 'border-box'
+        },
+        quality: 1.0
      });
-      
-      // 清理临时元素
-      document.body.removeChild(tempContainer);
-      
-      setPosterImage(canvas.toDataURL('image/png'));
+
+      chatAreaRef.current.scrollTop = originalScroll;
+      setPosterImage(dataUrl);
    } catch (error) {
      console.error('生成海报失败:', error);
    }
  };

-  const handleShare = async () => {
-    if (!posterImage) return;

-    try {
-      const blob = await fetch(posterImage).then(r => r.blob());
-      const filesArray = [
-        new File([blob], 'chat-history.png', { type: 'image/png' })
-      ];
-
-      if (navigator.share && navigator.canShare({ files: filesArray })) {
-        await navigator.share({
-          files: filesArray,
-          title: '聊天记录',
-        });
-      } else {
-        throw new Error('不支持系统分享');
-      }
-    } catch (error) {
-      console.error('分享失败:', error);
-      alert('分享失败，请尝试保存图片');
-    }
-  };
-
-  const handleDownload = () => {
+  const handleDownload = async () => {
    if (!posterImage) return;
    
-    const a = document.createElement('a');
-    a.href = posterImage;
-    a.download = 'chat-history.png';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
+    try {
+      // 创建一个新的图片对象
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      
+      // 等待图片加载完成
+      await new Promise((resolve, reject) => {
+        img.onload = resolve;
+        img.onerror = reject;
+        img.src = posterImage;
+      });
+
+      // 创建高分辨率canvas
+      const scale = 2; // 将分辨率提高2倍
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width * scale;
+      canvas.height = img.height * scale;
+      
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        throw new Error('无法创建canvas上下文');
+      }
+
+      // 设置更好的图像渲染质量
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+      
+      // 按比例缩放绘制
+      ctx.scale(scale, scale);
+      ctx.drawImage(img, 0, 0);
+      
+      // 使用更高质量的PNG导出
+      const pngUrl = canvas.toDataURL('image/png', 1.0);
+      const a = document.createElement('a');
+      a.href = pngUrl;
+      a.download = 'chat-history.png';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('转换图片失败:', error);
+      toast.error('保存图片失败，请重试');
+    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[90vw] max-h-[90vh] overflow-auto">
-        <div className="space-y-4">
-          <div 
-            ref={posterRef}
-            className="bg-white rounded-lg p-4 max-w-full"
-          >
-            {posterImage && (
+      <DialogContent className="max-w-[95vw] w-full sm:max-w-[90vw] max-h-[90vh] flex flex-col p-0">
+        {/* 图片容器 */}
+        <div className="flex-1 overflow-auto p-1">
+          {posterImage && (
+            <div className="flex items-center justify-center min-h-full">
              <img 
                src={posterImage} 
-                alt="聊天记录" 
-                className="w-full h-auto rounded-lg"
+                alt="Share Poster" 
+                className="max-w-full w-auto h-auto" 
                style={{
-                  maxWidth: '100%',
-                  objectFit: 'contain'
+                  objectFit: 'contain',
+                  imageRendering: 'crisp-edges',
+                  WebkitFontSmoothing: 'antialiased'
                }}
              />
-            )}
-          </div>
-          
-          <div className="flex justify-center gap-4 mt-4">
-            <Button
-              onClick={handleShare}
-              className="flex items-center gap-2"
-            >
-              <Share2 className="w-4 h-4" />
-              分享
-            </Button>
-            <Button
-              onClick={handleDownload}
-              variant="outline"
-              className="flex items-center gap-2"
-            >
-              <Download className="w-4 h-4" />
-              保存图片
-            </Button>
-          </div>
+            </div>
+          )}
+        </div>
+        
+        <div className="flex items-center justify-center gap-2 p-2 sm:p-4 border-t">
+          <Button onClick={handleDownload}>
+            保存聊天海报
+          </Button>
        </div>
      </DialogContent>
    </Dialog>