feat: add copy small image button and improve icon

- Add copyChartSmallImage function for clipboard copy with compression
- Change icon from Minimize2 to ImageMinus for better clarity
- Add copy small image button next to copy image button
- Both export and copy small image operations target <50KB file size
- Add translations for copySmallImage in zh and en locales

Author: claude

public/locales/en/translation.json

@@ -43,6 +43,7 @@
   "exportPNG": "Export PNG",
   "exportSmallImage": "Export small image (<50KB)",
   "copyImage": "Copy image",
+  "copySmallImage": "Copy small image (<50KB)",
   "exportCSV": "Export CSV",
   "copyImageError": "Failed to copy image",
   "language.en": "English",

public/locales/zh/translation.json

@@ -43,6 +43,7 @@
   "exportPNG": "导出 PNG",
   "exportSmallImage": "导出小图 (<50KB)",
   "copyImage": "复制图片",
+  "copySmallImage": "复制小图 (<50KB)",
   "exportCSV": "导出 CSV",
   "copyImageError": "复制图片失败",
   "language.en": "English",

src/components/ChartContainer.jsx

@@ -13,7 +13,7 @@ import {
   Legend,
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
-import { ImageDown, Copy, FileDown, Minimize2 } from 'lucide-react';
+import { ImageDown, Copy, FileDown, ImageMinus } from 'lucide-react';
 import { getMinSteps } from "../utils/getMinSteps.js";
 import { useTranslation } from 'react-i18next';
 
@@ -194,6 +194,65 @@ export default function ChartContainer({
     }
   }, [t]);
 
+  const copyChartSmallImage = useCallback(async (id) => {
+    const chart = chartRefs.current.get(id);
+    if (!chart || !navigator?.clipboard) return;
+
+    const maxSize = 50 * 1024; // 50KB
+    const canvas = chart.canvas;
+
+    const tempCanvas = document.createElement('canvas');
+    const ctx = tempCanvas.getContext('2d');
+
+    let scale = 1;
+    let quality = 0.8;
+    let dataUrl;
+    let attempts = 0;
+    const maxAttempts = 20;
+
+    while (attempts < maxAttempts) {
+      const width = Math.floor(canvas.width * scale);
+      const height = Math.floor(canvas.height * scale);
+
+      tempCanvas.width = width;
+      tempCanvas.height = height;
+
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, width, height);
+      ctx.drawImage(canvas, 0, 0, width, height);
+
+      dataUrl = tempCanvas.toDataURL('image/jpeg', quality);
+
+      const base64Length = dataUrl.length - 'data:image/jpeg;base64,'.length;
+      const fileSize = Math.ceil(base64Length * 0.75);
+
+      if (fileSize <= maxSize) {
+        break;
+      }
+
+      if (quality > 0.3) {
+        quality -= 0.1;
+      } else if (scale > 0.3) {
+        scale -= 0.1;
+        quality = 0.7;
+      } else {
+        break;
+      }
+
+      attempts++;
+    }
+
+    try {
+      const res = await fetch(dataUrl);
+      const blob = await res.blob();
+      await navigator.clipboard.write([
+        new ClipboardItem({ 'image/jpeg': blob })
+      ]);
+    } catch (e) {
+      console.error(t('copyImageError'), e);
+    }
+  }, [t]);
+
   const exportChartCSV = useCallback((id) => {
     const chart = chartRefs.current.get(id);
     if (!chart) return;
@@ -832,7 +891,7 @@ export default function ChartContainer({
             aria-label={t('exportSmallImage')}
             title={t('exportSmallImage')}
           >
-            <Minimize2 size={16} />
+            <ImageMinus size={16} />
           </button>
           <button
             type="button"
@@ -843,6 +902,15 @@ export default function ChartContainer({
           >
             <Copy size={16} />
           </button>
+          <button
+            type="button"
+            className="p-1 rounded-md text-gray-600 hover:text-green-600 hover:bg-gray-100"
+            onClick={() => copyChartSmallImage(`metric-comp-${idx}`)}
+            aria-label={t('copySmallImage')}
+            title={t('copySmallImage')}
+          >
+            <ImageMinus size={16} />
+          </button>
           <button
             type="button"
             className="p-1 rounded-md text-gray-600 hover:text-blue-600 hover:bg-gray-100"
@@ -891,7 +959,7 @@ export default function ChartContainer({
                 aria-label={t('exportSmallImage')}
                 title={t('exportSmallImage')}
               >
-                <Minimize2 size={16} />
+                <ImageMinus size={16} />
               </button>
               <button
                 type="button"
@@ -902,6 +970,15 @@ export default function ChartContainer({
               >
                 <Copy size={16} />
               </button>
+              <button
+                type="button"
+                className="p-1 rounded-md text-gray-600 hover:text-green-600 hover:bg-gray-100"
+                onClick={() => copyChartSmallImage(`metric-${idx}`)}
+                aria-label={t('copySmallImage')}
+                title={t('copySmallImage')}
+              >
+                <ImageMinus size={16} />
+              </button>
               <button
                 type="button"
                 className="p-1 rounded-md text-gray-600 hover:text-blue-600 hover:bg-gray-100"