fix: preserve UTF-8 filenames for exports

修复截图拖动时的原生拖拽重影

server/server.go

@@ -2332,7 +2332,10 @@ func (s *Server) findingsExport(w http.ResponseWriter, r *http.Request) {
 	stamp := now.Format("20060102-150405")
 	setDownload := func(contentType, filename string) {
 		w.Header().Set("Content-Type", contentType)
-		w.Header().Set("Content-Disposition", fmt.Sprintf(`attachment; filename="%s"`, filename))
+		// Keep an ASCII fallback for older clients and provide the real UTF-8
+		// name through RFC 5987. Browsers otherwise commonly decode Chinese
+		// names using the platform legacy code page.
+		w.Header().Set("Content-Disposition", fmt.Sprintf(`attachment; filename="%s"; filename*=UTF-8''%s`, sanitizeFilename(filename), url.PathEscape(filename)))
 	}
 
 	switch format {

web/src/components/markdown.tsx

@@ -18,6 +18,8 @@ function AuthenticatedImage({
   const [captureTimestamp, setCaptureTimestamp] = React.useState<string | null>(null);
   const [zoomed, setZoomed] = React.useState(false);
   const [zoomScale, setZoomScale] = React.useState(1);
+  const [pan, setPan] = React.useState({ x: 0, y: 0 });
+  const dragRef = React.useRef<{ x: number; y: number; panX: number; panY: number } | null>(null);
   const imageSrc = typeof src === "string" ? src : undefined;
 
   React.useEffect(() => {
@@ -29,6 +31,7 @@ function AuthenticatedImage({
       setCaptureTimestamp(null);
       setZoomed(false);
       setZoomScale(1);
+      setPan({ x: 0, y: 0 });
       return () => {
         cancelled = true;
       };
@@ -75,31 +78,55 @@ function AuthenticatedImage({
         onClick={() => renderedSrc && setZoomed(true)}
         aria-label="放大查看报告截图"
       >
-        <img {...props} src={renderedSrc} alt={alt || "报告截图，点击放大"} />
+        <img {...props} src={renderedSrc} alt={alt || "报告截图，点击放大"} draggable={false} onDragStart={(event) => event.preventDefault()} />
         {timestamp}
       </button>
       <Dialog
         open={zoomed}
         onOpenChange={(next) => {
           setZoomed(next);
-          if (!next) setZoomScale(1);
+          if (!next) {
+            setZoomScale(1);
+            setPan({ x: 0, y: 0 });
+          }
         }}
       >
         <DialogContent
           showCloseButton
           className="flex max-h-[96dvh] max-w-[96vw] items-center justify-center overflow-hidden bg-black/85 p-3 backdrop-blur-sm sm:max-w-[96vw]"
         >
-          <div className="relative flex max-h-[90dvh] max-w-full items-center justify-center overflow-auto">
-            <div className="relative inline-block origin-center transition-transform duration-150" style={{ transform: `scale(${zoomScale})` }}>
+          <div
+            className="relative flex h-[90dvh] w-[90vw] max-w-full items-center justify-center overflow-hidden"
+            onPointerDown={(event) => {
+              if (zoomScale <= 1 || event.button !== 0) return;
+              event.currentTarget.setPointerCapture(event.pointerId);
+              dragRef.current = { x: event.clientX, y: event.clientY, panX: pan.x, panY: pan.y };
+            }}
+            onPointerMove={(event) => {
+              const drag = dragRef.current;
+              if (!drag) return;
+              setPan({ x: drag.panX + event.clientX - drag.x, y: drag.panY + event.clientY - drag.y });
+            }}
+            onPointerUp={(event) => {
+              dragRef.current = null;
+              event.currentTarget.releasePointerCapture?.(event.pointerId);
+            }}
+            onPointerCancel={() => { dragRef.current = null; }}
+            style={{ cursor: zoomScale > 1 ? (dragRef.current ? "grabbing" : "grab") : "default" }}
+          >
+            <div className="relative inline-block origin-center" style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoomScale})` }}>
               <img
                 src={renderedSrc}
                 alt={alt || "报告截图"}
+                draggable={false}
+                onDragStart={(event) => event.preventDefault()}
                 className="max-h-[90dvh] max-w-[90vw] rounded-md object-contain"
               />
               {timestamp}
             </div>
           </div>
           <div className="absolute top-3 left-3 z-10 flex items-center gap-1 rounded-lg bg-black/60 p-1 backdrop-blur-sm">
+            <span className="px-2 text-xs font-medium text-white tabular-nums">{Math.round(zoomScale * 100)}%</span>
             <Button
               variant="ghost"
               size="icon-sm"

web/src/lib/api.ts

@@ -119,6 +119,24 @@ import type {
   SystemMetrics,
 } from "@/lib/types";
 
+/**
+ * Read a download name from Content-Disposition. RFC 5987's filename* is
+ * preferred because it preserves UTF-8 names; older filename remains the
+ * fallback for clients that do not understand it.
+ */
+export function downloadFilename(contentDisposition: string, fallback: string): string {
+  const encoded = contentDisposition.match(/(?:^|;)\s*filename\*\s*=\s*UTF-8''([^;]+)/i)?.[1];
+  if (encoded) {
+    try {
+      return decodeURIComponent(encoded.replace(/^"|"$/g, ""));
+    } catch {
+      // Fall through to the legacy token when a malformed header is received.
+    }
+  }
+  const legacy = contentDisposition.match(/(?:^|;)\s*filename\s*=\s*(?:"([^"]*)"|([^;\s]+))/i);
+  return (legacy?.[1] ?? legacy?.[2] ?? fallback).trim() || fallback;
+}
+
 function getToken(): string | null {
   if (typeof window === "undefined") return null;
   return localStorage.getItem("artex_token");
@@ -534,6 +552,7 @@ export const api = {
   },
   workspaceDownload: async (path: string) => {
     let blob: Blob;
+    let contentDisposition = "";
     if (MOCK) {
       blob = new Blob([`（demo）${path} 的下载内容示例。`], { type: "text/plain" });
     } else {
@@ -542,12 +561,13 @@ export const api = {
         headers: { ...(token ? { Authorization: `Bearer ${token}` } : {}) },
       });
       if (!r.ok) throw new Error(`下载失败: ${r.status}`);
+      contentDisposition = r.headers.get("Content-Disposition") ?? "";
       blob = await r.blob();
     }
     const objUrl = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = objUrl;
-    a.download = path.split("/").pop() || "download";
+    a.download = downloadFilename(contentDisposition, path.split("/").pop() || "download");
     document.body.appendChild(a);
     a.click();
     a.remove();
@@ -703,8 +723,7 @@ export const api = {
     const blob = await r.blob();
     // 文件名优先取后端 Content-Disposition,取不到则用默认名。
     const disp = r.headers.get("Content-Disposition") ?? "";
-    const m = disp.match(/filename="?([^"]+)"?/);
-    const filename = m?.[1] ?? `findings-export`;
+    const filename = downloadFilename(disp, `findings-export`);
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;