feat: 添加@zumer/snapdom库以支持图像下载功能，并在RoteShareCard组件中更新下载逻辑

Author: Rabithua

web/package.json

@@ -31,12 +31,12 @@
     "@types/file-saver": "^2.0.7",
     "@types/lodash": "^4.17.17",
     "@types/react-avatar-editor": "^13.0.4",
+    "@zumer/snapdom": "^1.7.1",
     "axios": "^1.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "file-saver": "^2.0.5",
-    "html-to-image": "^1.11.13",
     "i18next": "^25.2.0",
     "isbot": "^5.1.27",
     "jotai": "^2.12.4",

web/src/components/rote/AttachmentsGrid.tsx

@@ -4,13 +4,14 @@ import 'react-photo-view/dist/react-photo-view.css';
 
 interface AttachmentsGridProps {
   attachments: (Attachment | File)[];
+  withTimeStamp?: boolean;
 }
 
 /**
  * AttachmentsGrid 组件 - 用于显示附件网格
  * 支持1-9张图片的自适应布局
  */
-export default function AttachmentsGrid({ attachments }: AttachmentsGridProps) {
+export default function AttachmentsGrid({ attachments, withTimeStamp }: AttachmentsGridProps) {
   return (
     attachments.length > 0 && (
       <div className="my-2 flex w-fit flex-wrap gap-1 overflow-hidden rounded-2xl">
@@ -27,8 +28,9 @@ export default function AttachmentsGrid({ attachments }: AttachmentsGridProps) {
                         ? 'w-full max-w-[500px] rounded-2xl border-[0.5px]'
                         : 'aspect-square w-[calc(1/3*100%-3px)]'
                 } bg-foreground/3 grow object-cover`}
-                src={file.compressUrl || file.url}
+                src={`${file.compressUrl || file.url}?${withTimeStamp ? new Date().getTime() : ''}`}
                 loading="lazy"
+                crossOrigin={withTimeStamp ? 'anonymous' : undefined}
                 alt=""
               />
             </PhotoView>

web/src/components/rote/roteShareCard.tsx

@@ -1,12 +1,12 @@
 import { SoftBottom } from '@/components/others/SoftBottom';
 import { Button } from '@/components/ui/button';
-import { saveAs } from 'file-saver';
-import { toPng } from 'html-to-image';
+import { snapdom } from '@zumer/snapdom';
 import { Link, Save } from 'lucide-react';
 import moment from 'moment';
-import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import QRCode from 'react-qr-code';
+
 import { toast } from 'sonner';
 import AttachmentsGrid from './AttachmentsGrid';
 
@@ -51,33 +51,19 @@ function RoteShareCard({ rote }: any) {
     setIsGenerating(true);
     const element: any = document.querySelector('#shareCanva');
     if (element) {
-      // 获取元素的宽度和高度
-      const width = element.clientWidth;
-      const height = element.clientHeight;
-
-      // 配置 html2canvas 选项
-      const options: any = {
-        width: width,
-        height: height,
-        canvasWidth: (width * 720) / width,
-        canvasHeight: (height * 720) / width,
-        backgroundColor: null,
-        cacheBust: true,
-      };
-
-      const dataUrl = await toPng(element, options);
-
-      if (!dataUrl) {
-        toast.error(t('imageGenerationFailed'));
-        setIsGenerating(false);
-        return;
-      }
-
-      if (window.saveAs) {
-        window.saveAs(dataUrl, `${rote.id}.png`);
-      } else {
-        saveAs(dataUrl, `${rote.id}.png`);
-      }
+      await snapdom.download(element, {
+        scale: 3,
+        format: 'png',
+        filename: `rote-${rote.id}.png`,
+        crossOrigin: (url) => {
+          // Use credentials for same-origin images
+          if (url.startsWith(window.location.origin)) {
+            return 'use-credentials';
+          }
+          // Use anonymous for cross-origin images
+          return 'anonymous';
+        },
+      });
 
       toast.success(t('imageSaved'));
       setIsGenerating(false);
@@ -123,11 +109,11 @@ function RoteShareCard({ rote }: any) {
         <div className="font-sm opacity-60">
           {moment().utc(rote.createdAt).format('YYYY/MM/DD HH:mm:ss')}
         </div>
-        <div className="font-serif leading-7 font-light tracking-wide break-words whitespace-pre-line md:text-lg">
+        <div className="leading-7 font-light tracking-wide break-words whitespace-pre-line md:text-lg">
           {rote.content}
         </div>
-        <AttachmentsGrid attachments={rote.attachments} />
-        <div className="md:text-md flex flex-wrap items-center gap-2 font-serif text-xs">
+        <AttachmentsGrid attachments={rote.attachments} withTimeStamp={true} />
+        <div className="md:text-md flex flex-wrap items-center gap-2 text-sm">
           {rote.tags.map((tag: any) => (
             <span
               className={`rounded-md px-2 py-1 md:px-3 ${themes[themeIndex].tagClass}`}