N2

components/BackupModal.tsx

@@ -512,4 +512,4 @@ const BackupModal: React.FC<BackupModalProps> = ({
   );
 };
 
-export default BackupModal;
+export default BackupModal;

components/CategoryActionAuthModal.tsx

@@ -1,86 +1,73 @@
 import React, { useState } from 'react';
-import { X, Lock, AlertCircle } from 'lucide-react';
+import { Lock, ArrowRight, Loader2, X } from 'lucide-react';
+import { Category } from '../types';
+import { API_ENDPOINTS } from '../src/constants';
 
-interface CategoryActionAuthModalProps {
+interface CategoryAuthModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onVerify: (password: string) => Promise<boolean>;
-  onVerified: () => void;
-  actionType: 'edit' | 'delete';
-  categoryName: string;
+  category: Category | null;
+  onUnlock: (categoryId: string) => void;
 }
 
-const CategoryActionAuthModal: React.FC<CategoryActionAuthModalProps> = ({ 
-  isOpen, 
-  onClose, 
-  onVerify,
-  onVerified,
-  actionType,
-  categoryName
-}) => {
+const CategoryAuthModal: React.FC<CategoryAuthModalProps> = ({ isOpen, onClose, category, onUnlock }) => {
   const [password, setPassword] = useState('');
-  const [isVerifying, setIsVerifying] = useState(false);
   const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
-  if (!isOpen) return null;
+  if (!isOpen || !category) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (!password.trim()) {
-      setError('请输入密码');
-      return;
-    }
+    if (!password.trim()) return;
 
-    setIsVerifying(true);
+    setIsLoading(true);
     setError('');
-    
+
     try {
-      const success = await onVerify(password);
-      if (success) {
-        setPassword('');
-        onVerified();
-      } else {
-        setError('密码错误，请重试');
+      // 调用后端验证分类密码
+      const res = await fetch(`${API_ENDPOINTS.STORAGE}?getConfig=links&category=${encodeURIComponent(category.id)}&catPassword=${encodeURIComponent(password.trim())}`);
+
+      if (res.status === 403) {
+        setError('密码错误');
+        setIsLoading(false);
+        return;
       }
+
+      if (!res.ok) {
+        setError('验证失败，请重试');
+        setIsLoading(false);
+        return;
+      }
+
+      // 密码正确，解锁分类
+      onUnlock(category.id);
+      setPassword('');
+      setError('');
+      setIsLoading(false);
+      onClose();
     } catch (err) {
-      setError('验证失败，请重试');
-    } finally {
-      setIsVerifying(false);
+      console.error('Category auth error:', err);
+      setError('网络错误，请重试');
+      setIsLoading(false);
     }
   };
 
-  const handleClose = () => {
-    setPassword('');
-    setError('');
-    onClose();
-  };
-
-  const actionText = actionType === 'edit' ? '编辑' : '删除';
-  const colorClass = actionType === 'edit' 
-    ? 'amber' 
-    : 'red';
-
   return (
     <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
       <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-slate-200 dark:border-slate-700 p-6 relative">
-        <button onClick={handleClose} className="absolute top-4 right-4 p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full">
+        <button onClick={onClose} className="absolute top-4 right-4 p-1 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full">
             <X size={20} className="text-slate-400" />
         </button>
 
         <div className="flex flex-col items-center mb-6">
-          <div className={`w-14 h-14 bg-${colorClass}-100 dark:bg-${colorClass}-900/30 rounded-full flex items-center justify-center mb-4 text-${colorClass}-600 dark:text-${colorClass}-400`}>
+          <div className="w-14 h-14 bg-amber-100 dark:bg-amber-900/30 rounded-full flex items-center justify-center mb-4 text-amber-600 dark:text-amber-400">
             <Lock size={28} />
           </div>
-          <h2 className="text-lg font-bold dark:text-white">验证操作权限</h2>
+          <h2 className="text-lg font-bold dark:text-white">解锁 "{category.name}"</h2>
           <p className="text-sm text-slate-500 dark:text-slate-400 text-center mt-2">
-            您正在{actionText}分类 "<span className="font-medium">{categoryName}</span>"
+            该目录受密码保护，请输入密码访问
           </p>
-          <div className="flex items-center gap-2 mt-2 p-2 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
-            <AlertCircle size={16} className="text-amber-600 dark:text-amber-400" />
-            <p className="text-xs text-amber-700 dark:text-amber-300">
-              请输入部署时设置的密码进行验证
-            </p>
-          </div>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
@@ -89,41 +76,32 @@ const CategoryActionAuthModal: React.FC<CategoryActionAuthModalProps> = ({
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className={`w-full p-3 rounded-xl border border-slate-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white focus:ring-2 focus:ring-${colorClass}-500 outline-none transition-all text-center tracking-widest`}
-              placeholder="请输入密码"
+              className="w-full p-3 rounded-xl border border-slate-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white focus:ring-2 focus:ring-amber-500 outline-none transition-all text-center tracking-widest"
+              placeholder="目录密码"
               autoFocus
-              disabled={isVerifying}
+              disabled={isLoading}
             />
           </div>
-          
+
           {error && (
-            <div className={`p-2 bg-${colorClass}-50 dark:bg-${colorClass}-900/20 rounded-lg flex items-center gap-2`}>
-              <AlertCircle size={16} className={`text-${colorClass}-600 dark:text-${colorClass}-400`} />
-              <p className={`text-sm text-${colorClass}-700 dark:text-${colorClass}-300`}>{error}</p>
+            <div className="text-red-500 text-sm text-center font-medium animate-pulse">
+              {error}
             </div>
           )}
-
-          <div className="flex gap-2">
-            <button
-              type="button"
-              onClick={handleClose}
-              className="flex-1 px-4 py-2.5 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors font-medium"
-              disabled={isVerifying}
-            >
-              取消
-            </button>
-            <button
-              type="submit"
-              className={`flex-1 px-4 py-2.5 bg-${colorClass}-600 text-white rounded-xl hover:bg-${colorClass}-700 transition-colors font-medium disabled:opacity-50`}
-              disabled={isVerifying}
-            >
-              {isVerifying ? '验证中...' : `确认${actionText}`}
-            </button>
-          </div>
+
+          <button
+            type="submit"
+            disabled={!password || isLoading}
+            className="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white font-bold py-3 px-4 rounded-xl transition-colors shadow-lg shadow-amber-500/30 flex items-center justify-center gap-2"
+          >
+            {isLoading ? <Loader2 size={18} className="animate-spin" /> : <>
+              解锁 <ArrowRight size={18} />
+            </>}
+          </button>
         </form>
       </div>
     </div>
   );
 };
 
-export default CategoryActionAuthModal;
+export default CategoryAuthModal;

components/CategoryAuthModal.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Lock, ArrowRight, Loader2, X } from 'lucide-react';
 import { Category } from '../types';
+import { API_ENDPOINTS } from '../src/constants';
 
 interface CategoryAuthModalProps {
   isOpen: boolean;
@@ -12,18 +13,45 @@ interface CategoryAuthModalProps {
 const CategoryAuthModal: React.FC<CategoryAuthModalProps> = ({ isOpen, onClose, category, onUnlock }) => {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   if (!isOpen || !category) return null;
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (password === category.password) {
-        onUnlock(category.id);
-        setPassword('');
-        setError('');
-        onClose();
-    } else {
+    if (!password.trim()) return;
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      // 调用后端验证分类密码
+      const res = await fetch(
+        `${API_ENDPOINTS.STORAGE}?getConfig=links&category=${encodeURIComponent(category.id)}&catPassword=${encodeURIComponent(password.trim())}`
+      );
+
+      if (res.status === 403) {
         setError('密码错误');
+        setIsLoading(false);
+        return;
+      }
+
+      if (!res.ok) {
+        setError('验证失败，请重试');
+        setIsLoading(false);
+        return;
+      }
+
+      // 密码正确，解锁分类
+      onUnlock(category.id);
+      setPassword('');
+      setError('');
+      setIsLoading(false);
+      onClose();
+    } catch (err) {
+      console.error('Category auth error:', err);
+      setError('网络错误，请重试');
+      setIsLoading(false);
     }
   };
 
@@ -53,6 +81,7 @@ const CategoryAuthModal: React.FC<CategoryAuthModalProps> = ({ isOpen, onClose,
               className="w-full p-3 rounded-xl border border-slate-300 dark:border-slate-600 dark:bg-slate-700 dark:text-white focus:ring-2 focus:ring-amber-500 outline-none transition-all text-center tracking-widest"
               placeholder="目录密码"
               autoFocus
+              disabled={isLoading}
             />
           </div>
 
@@ -64,15 +93,17 @@ const CategoryAuthModal: React.FC<CategoryAuthModalProps> = ({ isOpen, onClose,
 
           <button
             type="submit"
-            disabled={!password}
-            className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-xl transition-colors shadow-lg shadow-amber-500/30 flex items-center justify-center gap-2"
+            disabled={!password || isLoading}
+            className="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white font-bold py-3 px-4 rounded-xl transition-colors shadow-lg shadow-amber-500/30 flex items-center justify-center gap-2"
           >
-            解锁 <ArrowRight size={18} />
+            {isLoading ? <Loader2 size={18} className="animate-spin" /> : <>
+              解锁 <ArrowRight size={18} />
+            </>}
           </button>
         </form>
       </div>
     </div>
   );
 };
 
-export default CategoryAuthModal;
+export default CategoryAuthModal;

components/CategoryManagerModal.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { X, ArrowUp, ArrowDown, Trash2, Edit2, Plus, Check, Lock, Unlock, Palette, Save } from 'lucide-react';
+import { toast } from './Toast';
 import { Category } from '../types';
 import Icon from './Icon';
 import IconSelector from './IconSelector';
@@ -9,17 +10,21 @@ interface CategoryManagerModalProps {
   isOpen: boolean;
   onClose: () => void;
   categories: Category[];
+  links: { id: string; categoryId: string; title: string }[];
   onUpdateCategories: (newCategories: Category[]) => void;
   onDeleteCategory: (id: string) => void;
+  onUpdateLinks?: (links: { id: string; categoryId: string; title: string }[]) => void;
   onVerifyPassword?: (password: string) => Promise<boolean>;
 }
 
 const CategoryManagerModal: React.FC<CategoryManagerModalProps> = ({
   isOpen,
   onClose,
   categories,
+  links,
   onUpdateCategories,
   onDeleteCategory,
+  onUpdateLinks,
   onVerifyPassword
 }) => {
   // 本地编辑状态 - 不直接修改原始数据
@@ -140,6 +145,7 @@ const CategoryManagerModal: React.FC<CategoryManagerModalProps> = ({
 
       onUpdateCategories(sorted);
       setHasChanges(false);
+      toast.success('分类更改已保存');
       onClose();
     } catch (e) {
       console.error('Save failed:', e);
@@ -172,6 +178,16 @@ const CategoryManagerModal: React.FC<CategoryManagerModalProps> = ({
     if (!onVerifyPassword || hasVerifiedPermissions) {
       if (confirm(`确定删除"${cat.name}"分类吗？该分类下的书签将移动到"常用推荐"。`)) {
         const newCats = localCategories.filter(c => c.id !== cat.id);
+        // 迁移该分类下的书签到 common
+        if (onUpdateLinks && links) {
+          const linksToMigrate = links.filter(l => l.categoryId === cat.id);
+          if (linksToMigrate.length > 0) {
+            const migratedLinks = links.map(l =>
+              l.categoryId === cat.id ? { ...l, categoryId: 'common' } : l
+            );
+            onUpdateLinks(migratedLinks);
+          }
+        }
         markChanged(newCats);
       }
       return;
@@ -189,7 +205,17 @@ const CategoryManagerModal: React.FC<CategoryManagerModalProps> = ({
       if (cat) startEdit(cat);
     } else if (pendingAction.type === 'delete') {
       const cat = localCategories.find(c => c.id === pendingAction.categoryId);
-      if (cat && confirm(`确定删除"${cat.name}"分类吗？`)) {
+      if (cat && confirm(`确定删除"${cat.name}"分类吗？该分类下的书签将移动到"常用推荐"。`)) {
+        // 迁移该分类下的书签到 common
+        if (onUpdateLinks && links) {
+          const linksToMigrate = links.filter(l => l.categoryId === cat.id);
+          if (linksToMigrate.length > 0) {
+            const migratedLinks = links.map(l =>
+              l.categoryId === cat.id ? { ...l, categoryId: 'common' } : l
+            );
+            onUpdateLinks(migratedLinks);
+          }
+        }
         markChanged(localCategories.filter(c => c.id !== cat.id));
       }
     }
@@ -227,6 +253,7 @@ const CategoryManagerModal: React.FC<CategoryManagerModalProps> = ({
       return c;
     });
     markChanged(newCats);
+    toast.success(`已更新分类「${editName.trim()}」`);
     setEditingId(null);
     setEditParentId('');
   };
@@ -244,6 +271,7 @@ const CategoryManagerModal: React.FC<CategoryManagerModalProps> = ({
       weight: maxWeight + 1,
     };
     markChanged([...localCategories, newCat]);
+    toast.success(`已添加分类「${newCat.name}」`);
     setNewCatName('');
     setNewCatPassword('');
     setNewCatIcon('Folder');

components/ImportModal.tsx

@@ -981,4 +981,4 @@ const ImportModal: React.FC<ImportModalProps> = ({
   );
 };
 
-export default ImportModal;
+export default ImportModal;