Add library exception move action

frontend/src/pages/LibraryPage.jsx

@@ -1,4 +1,5 @@
 import { startTransition, useDeferredValue, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 import {
   AlertTriangle,
   Disc3,
@@ -7,10 +8,11 @@ import {
   Music4,
   RefreshCw,
   Search,
+  SendToBack,
   X
 } from 'lucide-react';
 import Pagination from '../components/Pagination';
-import { fetchLibrarySummary, fetchLibraryTracks } from '../api/library';
+import { fetchLibrarySummary, fetchLibraryTracks, moveLibraryTrackToException } from '../api/library';
 
 const PAGE_SIZE = 20;
 const EMPTY_SUMMARY = {
@@ -44,6 +46,7 @@ export default function LibraryPage() {
   const [isLoadingTracks, setIsLoadingTracks] = useState(true);
   const [summaryError, setSummaryError] = useState('');
   const [tracksError, setTracksError] = useState('');
+  const [moveSuccess, setMoveSuccess] = useState(null);
   const [refreshToken, setRefreshToken] = useState(0);
 
   useEffect(() => {
@@ -145,6 +148,7 @@ export default function LibraryPage() {
     setIsRefreshing(true);
     setSummaryError('');
     setTracksError('');
+    setMoveSuccess(null);
     setSelectedTrack(null);
     startTransition(() => {
       setRefreshToken((value) => value + 1);
@@ -155,6 +159,7 @@ export default function LibraryPage() {
     startTransition(() => {
       setCurrentPage(1);
       setSelectedTrack(null);
+      setMoveSuccess(null);
       setFilters((current) => ({ ...current, [field]: value }));
     });
   }
@@ -165,6 +170,7 @@ export default function LibraryPage() {
     startTransition(() => {
       setCurrentPage(1);
       setSelectedTrack(null);
+      setMoveSuccess(null);
     });
   }
 
@@ -317,7 +323,10 @@ export default function LibraryPage() {
                 tracksPage.items.map((track) => (
                   <tr
                     key={track.track_id}
-                    onClick={() => setSelectedTrack(track)}
+                    onClick={() => {
+                      setMoveSuccess(null);
+                      setSelectedTrack(track);
+                    }}
                     className={`cursor-pointer transition-colors hover:bg-slate-800/40 ${
                       selectedTrack?.track_id === track.track_id ? 'bg-slate-800/50' : ''
                     }`}
@@ -383,10 +392,26 @@ export default function LibraryPage() {
         />
       </div>
 
+      {moveSuccess ? (
+        <div className="fixed bottom-6 right-6 z-30 max-w-sm rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-100 shadow-2xl">
+          <div>{moveSuccess.message}</div>
+          <Link to="/exceptions" className="mt-2 inline-flex font-medium text-emerald-200 hover:text-white">
+            前往异常中心
+          </Link>
+        </div>
+      ) : null}
+
       {selectedTrack ? (
         <TrackDetailsDrawer
           track={selectedTrack}
           onClose={() => setSelectedTrack(null)}
+          onMoved={(payload) => {
+            setMoveSuccess(payload);
+            setSelectedTrack(null);
+            startTransition(() => {
+              setRefreshToken((value) => value + 1);
+            });
+          }}
         />
       ) : null}
     </div>
@@ -425,7 +450,29 @@ function FilterInput({ label, value, onChange, placeholder }) {
   );
 }
 
-function TrackDetailsDrawer({ track, onClose }) {
+function TrackDetailsDrawer({ track, onClose, onMoved }) {
+  const [isMoving, setIsMoving] = useState(false);
+  const [moveError, setMoveError] = useState('');
+
+  async function handleMoveToException() {
+    const confirmed = window.confirm(
+      '确认将这首歌移入异常中心？文件会从音乐库移出，但不会永久删除，可在异常中心重新匹配后加入音乐库。'
+    );
+    if (!confirmed) {
+      return;
+    }
+
+    setIsMoving(true);
+    setMoveError('');
+    try {
+      const payload = await moveLibraryTrackToException(track.track_id);
+      onMoved(payload);
+    } catch (error) {
+      setMoveError(error.message || '移入异常中心失败');
+      setIsMoving(false);
+    }
+  }
+
   return (
     <div className="absolute inset-0 z-20 flex justify-end bg-slate-950/55 backdrop-blur-sm">
       <button
@@ -514,6 +561,23 @@ function TrackDetailsDrawer({ track, onClose }) {
             />
           </DetailSection>
         </div>
+
+        <div className="border-t border-slate-800 px-5 py-4">
+          {moveError ? (
+            <div className="mb-3 rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-2 text-xs text-rose-200">
+              {moveError}
+            </div>
+          ) : null}
+          <button
+            type="button"
+            onClick={handleMoveToException}
+            disabled={isMoving}
+            className="flex w-full items-center justify-center rounded-lg border border-amber-500/30 bg-amber-500/10 px-4 py-2.5 text-sm font-medium text-amber-100 transition hover:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            <SendToBack className={`mr-2 h-4 w-4 ${isMoving ? 'animate-pulse' : ''}`} />
+            {isMoving ? '正在移入异常中心...' : '移入异常中心'}
+          </button>
+        </div>
       </aside>
     </div>
   );