Fix image upload button

app/globals.css

@@ -47,11 +47,11 @@ button { color: inherit; }
 
 .upload-card { width: 100%; min-height: 100px; max-height: 260px; display: block; position: relative; overflow: hidden; border: 1px dashed #a5a59e; background: #ebe7dd; }
 .upload-card canvas { width: 100%; height: 100%; display: block; pointer-events: none; }
-.upload-card input { position: absolute; opacity: 0; pointer-events: none; }
+.upload-card .file-input { display: none; }
 .crop-preview { cursor: grab; touch-action: none; }
 .crop-preview:active { cursor: grabbing; }
 .crop-frame { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(20,30,25,.22); pointer-events: none; }
-.upload-overlay { position: absolute; right: 10px; bottom: 10px; padding: 7px 10px; color: white; background: rgba(22, 75, 57, .86); font-size: 12px; }
+.upload-overlay { position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 7px 10px; border: 0; color: white; background: rgba(22, 75, 57, .9); cursor: pointer; font-size: 12px; }
 .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 9px 0 24px; color: var(--muted); font-size: 11px; }
 .crop-zoom { margin-top: 0; }
 .reset-crop { width: 100%; margin: 7px 0 20px; padding: 7px; border: 1px solid var(--line); background: white; cursor: pointer; color: var(--muted); font-size: 11px; }

app/page.tsx

@@ -153,6 +153,7 @@ export default function Home() {
   const [historyQuery, setHistoryQuery] = useState("");
   const [status, setStatus] = useState("示例图已准备好，可以直接转换");
   const sourceImageRef = useRef<HTMLImageElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
   const cropCanvasRef = useRef<HTMLCanvasElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const cropPreviewRef = useRef<HTMLDivElement | null>(null);
@@ -462,7 +463,13 @@ export default function Home() {
           <div className="upload-card crop-preview" style={{ aspectRatio: `${Math.max(8, requestedWidth || 8)} / ${Math.max(8, requestedHeight || 8)}` }} ref={cropPreviewRef} onPointerDown={handleCropPointerDown} onPointerMove={handleCropPointerMove} onPointerUp={handleCropPointerUp} onPointerCancel={handleCropPointerUp}>
             <canvas ref={cropCanvasRef} aria-label="转换区域预览，可拖动调整取景" />
             <span className="crop-frame" aria-hidden="true" />
-            <label className="upload-overlay">更换图片<input type="file" accept="image/png,image/jpeg,image/webp" onChange={handleUpload} /></label>
+            <button
+              type="button"
+              className="upload-overlay"
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={(event) => { event.stopPropagation(); fileInputRef.current?.click(); }}
+            >更换图片</button>
+            <input ref={fileInputRef} className="file-input" type="file" accept="image/png,image/jpeg,image/webp" onChange={handleUpload} />
           </div>
           <p className="file-name" title={sourceName}>{sourceName}</p>