feat: OCR识别支持拖拽导入

app/components/ScanPickModal.jsx

@@ -1,8 +1,54 @@
 'use client';
 
+import { useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 
-export default function ScanPickModal({ onClose, onPick, isScanning }) {
+const IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp'];
+
+function getDroppedImageFiles(dataTransfer) {
+  if (!dataTransfer?.files?.length) return [];
+  return Array.from(dataTransfer.files).filter((f) =>
+    IMAGE_TYPES.includes(f.type)
+  );
+}
+
+export default function ScanPickModal({ onClose, onPick, onFilesDrop, isScanning }) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!isScanning) setIsDragging(true);
+  }, [isScanning]);
+
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.currentTarget.contains(e.relatedTarget)) setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    if (isScanning || !onFilesDrop) return;
+    const files = getDroppedImageFiles(e.dataTransfer);
+    if (files.length) onFilesDrop(files);
+  }, [isScanning, onFilesDrop]);
+
+  const dropZoneStyle = {
+    marginBottom: 12,
+    padding: '20px 16px',
+    borderRadius: 12,
+    border: `2px dashed ${isDragging ? 'var(--primary)' : 'var(--border)'}`,
+    background: isDragging
+      ? 'rgba(34, 211, 238, 0.08)'
+      : 'rgba(255, 255, 255, 0.02)',
+    transition: 'border-color 0.2s ease, background 0.2s ease',
+    cursor: isScanning ? 'not-allowed' : 'pointer',
+    pointerEvents: isScanning ? 'none' : 'auto',
+  };
+
   return (
     <motion.div
       className="modal-overlay"
@@ -26,7 +72,28 @@ export default function ScanPickModal({ onClose, onPick, isScanning }) {
           <span>选择持仓截图</span>
         </div>
         <div className="muted" style={{ fontSize: 13, lineHeight: 1.6, marginBottom: 12 }}>
-          从相册选择一张或多张持仓截图，系统将自动识别其中的基金代码（6位数字），并支持批量导入。
+          从相册选择一张或多张持仓截图，系统将自动识别其中的<span style={{ color: 'var(--primary)' }}>基金代码（6位数字）</span>，并支持批量导入。
+        </div>
+        <div
+          className="muted"
+          style={dropZoneStyle}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={!isScanning ? onPick : undefined}
+          role="button"
+          tabIndex={0}
+          aria-label="拖拽图片到此处或点击选择"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              if (!isScanning) onPick?.();
+            }
+          }}
+        >
+          <div style={{ fontSize: 13, lineHeight: 1.5, color: isDragging ? 'var(--primary)' : 'var(--muted)', textAlign: 'center' }}>
+            {isDragging ? '松开即可导入' : '拖拽图片到此处，或点击选择'}
+          </div>
         </div>
         <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
           <button className="button secondary" onClick={onClose}>取消</button>

app/globals.css

@@ -22,8 +22,33 @@ body {
 body {
   margin: 0;
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
-  background: radial-gradient(1200px 600px at 10% -10%, rgba(96, 165, 250, 0.15), transparent 40%), radial-gradient(1000px 500px at 90% 0%, rgba(34, 211, 238, 0.12), transparent 45%), var(--bg);
+  background: var(--bg);
   color: var(--text);
+  position: relative;
+}
+
+/* 渐变层固定为视口大小，随宽高变化自动重绘，保证任意尺寸下都连贯 */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      ellipse 140% 140% at 10% -10%,
+      rgba(96, 165, 250, 0.14) 0%,
+      rgba(96, 165, 250, 0.06) 35%,
+      rgba(96, 165, 250, 0.02) 55%,
+      transparent 72%
+    ),
+    radial-gradient(
+      ellipse 140% 140% at 90% 0%,
+      rgba(34, 211, 238, 0.12) 0%,
+      rgba(34, 211, 238, 0.05) 38%,
+      rgba(34, 211, 238, 0.01) 58%,
+      transparent 75%
+    );
 }
 
 .container {

app/page.jsx

@@ -984,9 +984,8 @@ export default function HomePage() {
     if (fileInputRef.current) fileInputRef.current.value = '';
   };
 
-  const handleFilesUpload = async (event) => {
+  const processFiles = async (files) => {
-    const files = Array.from(event.target.files || []);
+    if (!files?.length) return;
-    if (!files.length) return;
 
     setIsScanning(true);
     setScanModalOpen(false); // 关闭选择弹窗
@@ -1129,6 +1128,14 @@ export default function HomePage() {
     }
   };
 
+  const handleFilesUpload = (event) => {
+    processFiles(Array.from(event.target.files || []));
+  };
+
+  const handleFilesDrop = (files) => {
+    processFiles(files);
+  };
+
   const toggleScannedCode = (code) => {
     setSelectedScannedCodes(prev => {
       const next = new Set(prev);
@@ -4089,6 +4096,7 @@ export default function HomePage() {
           <ScanPickModal
             onClose={() => setScanModalOpen(false)}
             onPick={handleScanPick}
+            onFilesDrop={handleFilesDrop}
             isScanning={isScanning}
           />
         )}