feat: add replace button in editor; cancel button stops upload queue

frontend/src/components/DocumentEditor.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { markdown } from '@codemirror/lang-markdown';
 import { html } from '@codemirror/lang-html';
-import { deleteDocument, getDocument, saveDocument } from '../api/client';
+import { deleteDocument, getDocument, saveDocument, uploadDocument } from '../api/client';
 import MarkdownPreview from './MarkdownPreview';
 
 interface DocumentEditorProps {
@@ -18,9 +18,11 @@ export default function DocumentEditor({ documentKey, onDirtyChange, onDeleted }
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [deleting, setDeleting] = useState(false);
+  const [replacing, setReplacing] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [saveError, setSaveError] = useState<string | null>(null);
   const [deleteError, setDeleteError] = useState<string | null>(null);
+  const replaceInputRef = useRef<HTMLInputElement>(null);
 
   const [isPreview, setIsPreview] = useState(true);
 
@@ -71,8 +73,25 @@ export default function DocumentEditor({ documentKey, onDirtyChange, onDeleted }
       });
   }
 
-  function handleDelete() {
-    if (!window.confirm('确定要删除这篇文档吗？此操作无法撤销。')) {
+  async function handleReplaceFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    setReplacing(true);
+    try {
+      await uploadDocument(file, '', documentKey);
+      const doc = await getDocument(documentKey);
+      setContent(doc.content);
+      setOriginalContent(doc.content);
+      setContentType(doc.contentType);
+    } catch {
+      setSaveError('替换失败，请重试');
+    } finally {
+      setReplacing(false);
+    }
+  }
+
+  function handleDelete() {    if (!window.confirm('确定要删除这篇文档吗？此操作无法撤销。')) {
       return;
     }
     setDeleting(true);
@@ -126,6 +145,10 @@ export default function DocumentEditor({ documentKey, onDirtyChange, onDeleted }
           <button className="btn-secondary" onClick={handleDelete} disabled={deleting}>
             {deleting ? '删除中…' : '删除'}
           </button>
+          <button className="btn-secondary" onClick={() => replaceInputRef.current?.click()} disabled={replacing}>
+            {replacing ? '替换中…' : '替换'}
+          </button>
+          <input ref={replaceInputRef} type="file" style={{ display: 'none' }} onChange={handleReplaceFile} />
           {!isImage && !isHtml && (
             <>
               <button className="btn-secondary" onClick={() => setIsPreview((prev) => !prev)}>

frontend/src/components/UploadButton.tsx

@@ -14,10 +14,11 @@ async function uploadQueue(
   path: string,
   onDone: (result: UploadDocumentResponse) => void,
   onError: (msg: string) => void,
+  cancelled: { current: boolean },
 ) {
   let i = 0;
   async function next() {
-    if (i >= entries.length) return;
+    if (cancelled.current || i >= entries.length) return;
     const entry = entries[i++];
     const name = entry.relativePath ?? entry.file.name;
     try {
@@ -44,18 +45,20 @@ export default function UploadButton({ path, onUploaded }: UploadButtonProps) {
   const [uploadError, setUploadError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const folderInputRef = useRef<HTMLInputElement | null>(null);
+  const cancelledRef = useRef(false);
 
   function setFolderInputRef(node: HTMLInputElement | null) {
     folderInputRef.current = node;
     if (node) node.setAttribute('webkitdirectory', '');
   }
 
-  function openModal() { setIsOpen(true); }
+  function openModal() { cancelledRef.current = false; setIsOpen(true); }
   function closeModal() { setIsOpen(false); setIsDragOver(false); setUploadError(null); }
+  function cancelAndClose() { cancelledRef.current = true; closeModal(); }
 
   function runQueue(entries: FileWithRelativePath[]) {
     setUploadError(null);
-    uploadQueue(entries, path, onUploaded, setUploadError);
+    uploadQueue(entries, path, onUploaded, setUploadError, cancelledRef);
   }
 
   function handleFileInputChange(event: React.ChangeEvent<HTMLInputElement>) {
@@ -156,7 +159,7 @@ export default function UploadButton({ path, onUploaded }: UploadButtonProps) {
               <button className="btn-secondary" onClick={() => folderInputRef.current?.click()}>
                 选择文件夹
               </button>
-              <button className="btn-secondary" onClick={closeModal}>
+              <button className="btn-secondary" onClick={cancelAndClose}>
                 取消
               </button>
             </div>