增加自定义去广告功能

2025-12-04 22:21:27 +08:00
parent eaab95e5b0
commit 179fc73c8f
5 changed files with 2477 additions and 1236 deletions
@@ -50,35 +50,53 @@ import PageLayout from '@/components/PageLayout';
 // 统一按钮样式系统
 const buttonStyles = {
  // 主要操作按钮（蓝色）- 用于配置、设置、确认等
-  primary: 'px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-lg transition-colors',
+  primary:
+    'px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-lg transition-colors',
  // 成功操作按钮（绿色）- 用于添加、启用、保存等
-  success: 'px-3 py-1.5 text-sm font-medium bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white rounded-lg transition-colors',
+  success:
+    'px-3 py-1.5 text-sm font-medium bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white rounded-lg transition-colors',
  // 危险操作按钮（红色）- 用于删除、禁用、重置等
-  danger: 'px-3 py-1.5 text-sm font-medium bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 text-white rounded-lg transition-colors',
+  danger:
+    'px-3 py-1.5 text-sm font-medium bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 text-white rounded-lg transition-colors',
  // 次要操作按钮（灰色）- 用于取消、关闭等
-  secondary: 'px-3 py-1.5 text-sm font-medium bg-gray-600 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-colors',
+  secondary:
+    'px-3 py-1.5 text-sm font-medium bg-gray-600 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-lg transition-colors',
  // 警告操作按钮（黄色）- 用于批量禁用等
-  warning: 'px-3 py-1.5 text-sm font-medium bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-white rounded-lg transition-colors',
+  warning:
+    'px-3 py-1.5 text-sm font-medium bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-white rounded-lg transition-colors',
  // 小尺寸主要按钮
-  primarySmall: 'px-2 py-1 text-xs font-medium bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-md transition-colors',
+  primarySmall:
+    'px-2 py-1 text-xs font-medium bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-md transition-colors',
  // 小尺寸成功按钮
-  successSmall: 'px-2 py-1 text-xs font-medium bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white rounded-md transition-colors',
+  successSmall:
+    'px-2 py-1 text-xs font-medium bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 text-white rounded-md transition-colors',
  // 小尺寸危险按钮
-  dangerSmall: 'px-2 py-1 text-xs font-medium bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 text-white rounded-md transition-colors',
+  dangerSmall:
+    'px-2 py-1 text-xs font-medium bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 text-white rounded-md transition-colors',
  // 小尺寸次要按钮
-  secondarySmall: 'px-2 py-1 text-xs font-medium bg-gray-600 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-md transition-colors',
+  secondarySmall:
+    'px-2 py-1 text-xs font-medium bg-gray-600 hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-700 text-white rounded-md transition-colors',
  // 小尺寸警告按钮
-  warningSmall: 'px-2 py-1 text-xs font-medium bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-white rounded-md transition-colors',
+  warningSmall:
+    'px-2 py-1 text-xs font-medium bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-white rounded-md transition-colors',
  // 圆角小按钮（用于表格操作）
-  roundedPrimary: 'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900/40 dark:hover:bg-blue-900/60 dark:text-blue-200 transition-colors',
-  roundedSuccess: 'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/40 dark:hover:bg-green-900/60 dark:text-green-200 transition-colors',
-  roundedDanger: 'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900/40 dark:hover:bg-red-900/60 dark:text-red-200 transition-colors',
-  roundedSecondary: 'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-700/40 dark:hover:bg-gray-700/60 dark:text-gray-200 transition-colors',
-  roundedWarning: 'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-900/40 dark:hover:bg-yellow-900/60 dark:text-yellow-200 transition-colors',
-  roundedPurple: 'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900/40 dark:hover:bg-purple-900/60 dark:text-purple-200 transition-colors',
+  roundedPrimary:
+    'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900/40 dark:hover:bg-blue-900/60 dark:text-blue-200 transition-colors',
+  roundedSuccess:
+    'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900/40 dark:hover:bg-green-900/60 dark:text-green-200 transition-colors',
+  roundedDanger:
+    'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900/40 dark:hover:bg-red-900/60 dark:text-red-200 transition-colors',
+  roundedSecondary:
+    'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 hover:bg-gray-200 dark:bg-gray-700/40 dark:hover:bg-gray-700/60 dark:text-gray-200 transition-colors',
+  roundedWarning:
+    'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-900/40 dark:hover:bg-yellow-900/60 dark:text-yellow-200 transition-colors',
+  roundedPurple:
+    'inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900/40 dark:hover:bg-purple-900/60 dark:text-purple-200 transition-colors',
  // 禁用状态
-  disabled: 'px-3 py-1.5 text-sm font-medium bg-gray-400 dark:bg-gray-600 cursor-not-allowed text-white rounded-lg transition-colors',
-  disabledSmall: 'px-2 py-1 text-xs font-medium bg-gray-400 dark:bg-gray-600 cursor-not-allowed text-white rounded-md transition-colors',
+  disabled:
+    'px-3 py-1.5 text-sm font-medium bg-gray-400 dark:bg-gray-600 cursor-not-allowed text-white rounded-lg transition-colors',
+  disabledSmall:
+    'px-2 py-1 text-xs font-medium bg-gray-400 dark:bg-gray-600 cursor-not-allowed text-white rounded-md transition-colors',
  // 开关按钮样式
  toggleOn: 'bg-green-600 dark:bg-green-600',
  toggleOff: 'bg-gray-200 dark:bg-gray-700',
@@ -86,7 +104,8 @@ const buttonStyles = {
  toggleThumbOn: 'translate-x-6',
  toggleThumbOff: 'translate-x-1',
  // 快速操作按钮样式
-  quickAction: 'px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors',
+  quickAction:
+    'px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md transition-colors',
 };

 // 通用弹窗组件
@@ -107,7 +126,7 @@ const AlertModal = ({
  title,
  message,
  timer,
-  showConfirm = false
+  showConfirm = false,
 }: AlertModalProps) => {
  const [isVisible, setIsVisible] = useState(false);

@@ -129,11 +148,11 @@ const AlertModal = ({
  const getIcon = () => {
    switch (type) {
      case 'success':
-        return <CheckCircle className="w-8 h-8 text-green-500" />;
+        return <CheckCircle className='w-8 h-8 text-green-500' />;
      case 'error':
-        return <AlertCircle className="w-8 h-8 text-red-500" />;
+        return <AlertCircle className='w-8 h-8 text-red-500' />;
      case 'warning':
-        return <AlertTriangle className="w-8 h-8 text-yellow-500" />;
+        return <AlertTriangle className='w-8 h-8 text-yellow-500' />;
      default:
        return null;
    }
@@ -153,21 +172,25 @@ const AlertModal = ({
  };

  return createPortal(
-    <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 transition-opacity duration-200 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
-      <div className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-sm w-full border ${getBgColor()} transition-all duration-200 ${isVisible ? 'scale-100' : 'scale-95'}`}>
-        <div className="p-6 text-center">
-          <div className="flex justify-center mb-4">
-            {getIcon()}
-          </div>
+    <div
+      className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 transition-opacity duration-200 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+    >
+      <div
+        className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-sm w-full border ${getBgColor()} transition-all duration-200 ${
+          isVisible ? 'scale-100' : 'scale-95'
+        }`}
+      >
+        <div className='p-6 text-center'>
+          <div className='flex justify-center mb-4'>{getIcon()}</div>

-          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+          <h3 className='text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2'>
            {title}
          </h3>

          {message && (
-            <p className="text-gray-600 dark:text-gray-400 mb-4">
-              {message}
-            </p>
+            <p className='text-gray-600 dark:text-gray-400 mb-4'>{message}</p>
          )}

          {showConfirm && (
@@ -205,7 +228,7 @@ const useAlertModal = () => {
  };

  const hideAlert = () => {
-    setAlertModal(prev => ({ ...prev, isOpen: false }));
+    setAlertModal((prev) => ({ ...prev, isOpen: false }));
  };

  return { alertModal, showAlert, hideAlert };
@@ -237,12 +260,15 @@ const useLoadingState = () => {
  const [loadingStates, setLoadingStates] = useState<LoadingState>({});

  const setLoading = (key: string, loading: boolean) => {
-    setLoadingStates(prev => ({ ...prev, [key]: loading }));
+    setLoadingStates((prev) => ({ ...prev, [key]: loading }));
  };

  const isLoading = (key: string) => loadingStates[key] || false;

-  const withLoading = async (key: string, operation: () => Promise<any>): Promise<any> => {
+  const withLoading = async (
+    key: string,
+    operation: () => Promise<any>
+  ): Promise<any> => {
    setLoading(key, true);
    try {
      const result = await operation();
@@ -380,7 +406,8 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
    tags?: string[];
  } | null>(null);
  const [selectedApis, setSelectedApis] = useState<string[]>([]);
-  const [showConfigureUserGroupModal, setShowConfigureUserGroupModal] = useState(false);
+  const [showConfigureUserGroupModal, setShowConfigureUserGroupModal] =
+    useState(false);
  const [selectedUserForGroup, setSelectedUserForGroup] = useState<{
    username: string;
    role: 'user' | 'admin' | 'owner';
@@ -390,10 +417,14 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
  const [selectedUsers, setSelectedUsers] = useState<Set<string>>(new Set());
  const [showBatchUserGroupModal, setShowBatchUserGroupModal] = useState(false);
  const [selectedUserGroup, setSelectedUserGroup] = useState<string>('');
-  const [showDeleteUserGroupModal, setShowDeleteUserGroupModal] = useState(false);
+  const [showDeleteUserGroupModal, setShowDeleteUserGroupModal] =
+    useState(false);
  const [deletingUserGroup, setDeletingUserGroup] = useState<{
    name: string;
-    affectedUsers: Array<{ username: string; role: 'user' | 'admin' | 'owner' }>;
+    affectedUsers: Array<{
+      username: string;
+      role: 'user' | 'admin' | 'owner';
+    }>;
  } | null>(null);
  const [showDeleteUserModal, setShowDeleteUserModal] = useState(false);
  const [deletingUser, setDeletingUser] = useState<string | null>(null);
@@ -403,12 +434,13 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {

  // 使用 useMemo 计算全选状态，避免每次渲染都重新计算
  const selectAllUsers = useMemo(() => {
-    const selectableUserCount = config?.UserConfig?.Users?.filter(user =>
-    (role === 'owner' ||
-      (role === 'admin' &&
-        (user.role === 'user' ||
-          user.username === currentUsername)))
-    ).length || 0;
+    const selectableUserCount =
+      config?.UserConfig?.Users?.filter(
+        (user) =>
+          role === 'owner' ||
+          (role === 'admin' &&
+            (user.role === 'user' || user.username === currentUsername))
+      ).length || 0;
    return selectedUsers.size === selectableUserCount && selectedUsers.size > 0;
  }, [selectedUsers.size, config?.UserConfig?.Users, role, currentUsername]);

@@ -449,7 +481,14 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
          setShowEditUserGroupForm(false);
        }

-        showSuccess(action === 'add' ? '用户组添加成功' : action === 'edit' ? '用户组更新成功' : '用户组删除成功', showAlert);
+        showSuccess(
+          action === 'add'
+            ? '用户组添加成功'
+            : action === 'edit'
+            ? '用户组更新成功'
+            : '用户组删除成功',
+          showAlert
+        );
      } catch (err) {
        showError(err instanceof Error ? err.message : '操作失败', showAlert);
        throw err;
@@ -464,18 +503,26 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {

  const handleEditUserGroup = () => {
    if (!editingUserGroup?.name.trim()) return;
-    handleUserGroupAction('edit', editingUserGroup.name, editingUserGroup.enabledApis);
+    handleUserGroupAction(
+      'edit',
+      editingUserGroup.name,
+      editingUserGroup.enabledApis
+    );
  };

  const handleDeleteUserGroup = (groupName: string) => {
    // 计算会受影响的用户数量
-    const affectedUsers = config?.UserConfig?.Users?.filter(user =>
-      user.tags && user.tags.includes(groupName)
-    ) || [];
+    const affectedUsers =
+      config?.UserConfig?.Users?.filter(
+        (user) => user.tags && user.tags.includes(groupName)
+      ) || [];

    setDeletingUserGroup({
      name: groupName,
-      affectedUsers: affectedUsers.map(u => ({ username: u.username, role: u.role }))
+      affectedUsers: affectedUsers.map((u) => ({
+        username: u.username,
+        role: u.role,
+      })),
    });
    setShowDeleteUserGroupModal(true);
  };
@@ -492,14 +539,20 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
    }
  };

-  const handleStartEditUserGroup = (group: { name: string; enabledApis: string[] }) => {
+  const handleStartEditUserGroup = (group: {
+    name: string;
+    enabledApis: string[];
+  }) => {
    setEditingUserGroup({ ...group });
    setShowEditUserGroupForm(true);
    setShowAddUserGroupForm(false);
  };

  // 为用户分配用户组
-  const handleAssignUserGroup = async (username: string, userGroups: string[]) => {
+  const handleAssignUserGroup = async (
+    username: string,
+    userGroups: string[]
+  ) => {
    return withLoading(`assignUserGroup_${username}`, async () => {
      try {
        const res = await fetch('/api/admin/user', {
@@ -531,21 +584,32 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
  };

  const handleUnbanUser = async (uname: string) => {
-    await withLoading(`unbanUser_${uname}`, () => handleUserAction('unban', uname));
+    await withLoading(`unbanUser_${uname}`, () =>
+      handleUserAction('unban', uname)
+    );
  };

  const handleSetAdmin = async (uname: string) => {
-    await withLoading(`setAdmin_${uname}`, () => handleUserAction('setAdmin', uname));
+    await withLoading(`setAdmin_${uname}`, () =>
+      handleUserAction('setAdmin', uname)
+    );
  };

  const handleRemoveAdmin = async (uname: string) => {
-    await withLoading(`removeAdmin_${uname}`, () => handleUserAction('cancelAdmin', uname));
+    await withLoading(`removeAdmin_${uname}`, () =>
+      handleUserAction('cancelAdmin', uname)
+    );
  };

  const handleAddUser = async () => {
    if (!newUser.username || !newUser.password) return;
    await withLoading('addUser', async () => {
-      await handleUserAction('add', newUser.username, newUser.password, newUser.userGroup);
+      await handleUserAction(
+        'add',
+        newUser.username,
+        newUser.password,
+        newUser.userGroup
+      );
      setNewUser({ username: '', password: '', userGroup: '' });
      setShowAddUserForm(false);
    });
@@ -553,15 +617,18 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {

  const handleChangePassword = async () => {
    if (!changePasswordUser.username || !changePasswordUser.password) return;
-    await withLoading(`changePassword_${changePasswordUser.username}`, async () => {
-      await handleUserAction(
-        'changePassword',
-        changePasswordUser.username,
-        changePasswordUser.password
-      );
-      setChangePasswordUser({ username: '', password: '' });
-      setShowChangePasswordForm(false);
-    });
+    await withLoading(
+      `changePassword_${changePasswordUser.username}`,
+      async () => {
+        await handleUserAction(
+          'changePassword',
+          changePasswordUser.username,
+          changePasswordUser.password
+        );
+        setChangePasswordUser({ username: '', password: '' });
+        setShowChangePasswordForm(false);
+      }
+    );
  };

  const handleShowChangePasswordForm = (username: string) => {
@@ -598,21 +665,27 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
  const handleSaveUserGroups = async () => {
    if (!selectedUserForGroup) return;

-    await withLoading(`saveUserGroups_${selectedUserForGroup.username}`, async () => {
-      try {
-        await handleAssignUserGroup(selectedUserForGroup.username, selectedUserGroups);
-        setShowConfigureUserGroupModal(false);
-        setSelectedUserForGroup(null);
-        setSelectedUserGroups([]);
-      } catch (err) {
-        // 错误处理已在 handleAssignUserGroup 中处理
+    await withLoading(
+      `saveUserGroups_${selectedUserForGroup.username}`,
+      async () => {
+        try {
+          await handleAssignUserGroup(
+            selectedUserForGroup.username,
+            selectedUserGroups
+          );
+          setShowConfigureUserGroupModal(false);
+          setSelectedUserForGroup(null);
+          setSelectedUserGroups([]);
+        } catch (err) {
+          // 错误处理已在 handleAssignUserGroup 中处理
+        }
      }
-    });
+    );
  };

  // 处理用户选择
  const handleSelectUser = useCallback((username: string, checked: boolean) => {
-    setSelectedUsers(prev => {
+    setSelectedUsers((prev) => {
      const newSelectedUsers = new Set(prev);
      if (checked) {
        newSelectedUsers.add(username);
@@ -623,20 +696,24 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
    });
  }, []);

-  const handleSelectAllUsers = useCallback((checked: boolean) => {
-    if (checked) {
-      // 只选择自己有权限操作的用户
-      const selectableUsernames = config?.UserConfig?.Users?.filter(user =>
-      (role === 'owner' ||
-        (role === 'admin' &&
-          (user.role === 'user' ||
-            user.username === currentUsername)))
-      ).map(u => u.username) || [];
-      setSelectedUsers(new Set(selectableUsernames));
-    } else {
-      setSelectedUsers(new Set());
-    }
-  }, [config?.UserConfig?.Users, role, currentUsername]);
+  const handleSelectAllUsers = useCallback(
+    (checked: boolean) => {
+      if (checked) {
+        // 只选择自己有权限操作的用户
+        const selectableUsernames =
+          config?.UserConfig?.Users?.filter(
+            (user) =>
+              role === 'owner' ||
+              (role === 'admin' &&
+                (user.role === 'user' || user.username === currentUsername))
+          ).map((u) => u.username) || [];
+        setSelectedUsers(new Set(selectableUsernames));
+      } else {
+        setSelectedUsers(new Set());
+      }
+    },
+    [config?.UserConfig?.Users, role, currentUsername]
+  );

  // 批量设置用户组
  const handleBatchSetUserGroup = async (userGroup: string) => {
@@ -663,7 +740,10 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
        setSelectedUsers(new Set());
        setShowBatchUserGroupModal(false);
        setSelectedUserGroup('');
-        showSuccess(`已为 ${userCount} 个用户设置用户组: ${userGroup}`, showAlert);
+        showSuccess(
+          `已为 ${userCount} 个用户设置用户组: ${userGroup}`,
+          showAlert
+        );

        // 刷新配置
        await refreshConfig();
@@ -674,8 +754,6 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
    });
  };

-
-
  // 提取URL域名的辅助函数
  const extractDomain = (url: string): string => {
    try {
@@ -796,8 +874,6 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
        </div>
      </div>

-
-
      {/* 用户组管理 */}
      <div>
        <div className='flex items-center justify-between mb-3'>
@@ -812,7 +888,11 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                setEditingUserGroup(null);
              }
            }}
-            className={showAddUserGroupForm ? buttonStyles.secondary : buttonStyles.primary}
+            className={
+              showAddUserGroupForm
+                ? buttonStyles.secondary
+                : buttonStyles.primary
+            }
          >
            {showAddUserGroupForm ? '取消' : '添加用户组'}
          </button>
@@ -836,7 +916,10 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
            </thead>
            <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
              {userGroups.map((group) => (
-                <tr key={group.name} className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors'>
+                <tr
+                  key={group.name}
+                  className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors'
+                >
                  <td className='px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100'>
                    {group.name}
                  </td>
@@ -853,7 +936,11 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                    <button
                      onClick={() => handleStartEditUserGroup(group)}
                      disabled={isLoading(`userGroup_edit_${group.name}`)}
-                      className={`${buttonStyles.roundedPrimary} ${isLoading(`userGroup_edit_${group.name}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                      className={`${buttonStyles.roundedPrimary} ${
+                        isLoading(`userGroup_edit_${group.name}`)
+                          ? 'opacity-50 cursor-not-allowed'
+                          : ''
+                      }`}
                    >
                      编辑
                    </button>
@@ -868,7 +955,10 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
              ))}
              {userGroups.length === 0 && (
                <tr>
-                  <td colSpan={3} className='px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400'>
+                  <td
+                    colSpan={3}
+                    className='px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400'
+                  >
                    暂无用户组，请添加用户组来管理用户权限
                  </td>
                </tr>
@@ -910,7 +1000,9 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                  setChangePasswordUser({ username: '', password: '' });
                }
              }}
-              className={showAddUserForm ? buttonStyles.secondary : buttonStyles.success}
+              className={
+                showAddUserForm ? buttonStyles.secondary : buttonStyles.success
+              }
            >
              {showAddUserForm ? '取消' : '添加用户'}
            </button>
@@ -927,7 +1019,10 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                  placeholder='用户名'
                  value={newUser.username}
                  onChange={(e) =>
-                    setNewUser((prev) => ({ ...prev, username: e.target.value }))
+                    setNewUser((prev) => ({
+                      ...prev,
+                      username: e.target.value,
+                    }))
                  }
                  className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
                />
@@ -936,7 +1031,10 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                  placeholder='密码'
                  value={newUser.password}
                  onChange={(e) =>
-                    setNewUser((prev) => ({ ...prev, password: e.target.value }))
+                    setNewUser((prev) => ({
+                      ...prev,
+                      password: e.target.value,
+                    }))
                  }
                  className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
                />
@@ -948,14 +1046,21 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                <select
                  value={newUser.userGroup}
                  onChange={(e) =>
-                    setNewUser((prev) => ({ ...prev, userGroup: e.target.value }))
+                    setNewUser((prev) => ({
+                      ...prev,
+                      userGroup: e.target.value,
+                    }))
                  }
                  className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
                >
                  <option value=''>无用户组（无限制）</option>
                  {userGroups.map((group) => (
                    <option key={group.name} value={group.name}>
-                      {group.name} ({group.enabledApis && group.enabledApis.length > 0 ? `${group.enabledApis.length} 个源` : '无限制'})
+                      {group.name} (
+                      {group.enabledApis && group.enabledApis.length > 0
+                        ? `${group.enabledApis.length} 个源`
+                        : '无限制'}
+                      )
                    </option>
                  ))}
                </select>
@@ -963,8 +1068,18 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
              <div className='flex justify-end'>
                <button
                  onClick={handleAddUser}
-                  disabled={!newUser.username || !newUser.password || isLoading('addUser')}
-                  className={!newUser.username || !newUser.password || isLoading('addUser') ? buttonStyles.disabled : buttonStyles.success}
+                  disabled={
+                    !newUser.username ||
+                    !newUser.password ||
+                    isLoading('addUser')
+                  }
+                  className={
+                    !newUser.username ||
+                    !newUser.password ||
+                    isLoading('addUser')
+                      ? buttonStyles.disabled
+                      : buttonStyles.success
+                  }
                >
                  {isLoading('addUser') ? '添加中...' : '添加'}
                </button>
@@ -1001,10 +1116,20 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
              />
              <button
                onClick={handleChangePassword}
-                disabled={!changePasswordUser.password || isLoading(`changePassword_${changePasswordUser.username}`)}
-                className={`w-full sm:w-auto ${!changePasswordUser.password || isLoading(`changePassword_${changePasswordUser.username}`) ? buttonStyles.disabled : buttonStyles.primary}`}
+                disabled={
+                  !changePasswordUser.password ||
+                  isLoading(`changePassword_${changePasswordUser.username}`)
+                }
+                className={`w-full sm:w-auto ${
+                  !changePasswordUser.password ||
+                  isLoading(`changePassword_${changePasswordUser.username}`)
+                    ? buttonStyles.disabled
+                    : buttonStyles.primary
+                }`}
              >
-                {isLoading(`changePassword_${changePasswordUser.username}`) ? '修改中...' : '修改密码'}
+                {isLoading(`changePassword_${changePasswordUser.username}`)
+                  ? '修改中...'
+                  : '修改密码'}
              </button>
              <button
                onClick={() => {
@@ -1020,7 +1145,10 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
        )}

        {/* 用户列表 */}
-        <div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative' data-table="user-list">
+        <div
+          className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative'
+          data-table='user-list'
+        >
          <table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
            <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
              <tr>
@@ -1028,11 +1156,12 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                <th className='w-10 px-1 py-3 text-center'>
                  {(() => {
                    // 检查是否有权限操作任何用户
-                    const hasAnyPermission = config?.UserConfig?.Users?.some(user =>
-                    (role === 'owner' ||
-                      (role === 'admin' &&
-                        (user.role === 'user' ||
-                          user.username === currentUsername)))
+                    const hasAnyPermission = config?.UserConfig?.Users?.some(
+                      (user) =>
+                        role === 'owner' ||
+                        (role === 'admin' &&
+                          (user.role === 'user' ||
+                            user.username === currentUsername))
                    );

                    return hasAnyPermission ? (
@@ -1126,14 +1255,19 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                      >
                        <td className='w-4' />
                        <td className='w-10 px-1 py-3 text-center'>
-                          {(role === 'owner' ||
-                            (role === 'admin' &&
-                              (user.role === 'user' ||
-                                user.username === currentUsername))) ? (
+                          {role === 'owner' ||
+                          (role === 'admin' &&
+                            (user.role === 'user' ||
+                              user.username === currentUsername)) ? (
                            <input
                              type='checkbox'
                              checked={selectedUsers.has(user.username)}
-                              onChange={(e) => handleSelectUser(user.username, e.target.checked)}
+                              onChange={(e) =>
+                                handleSelectUser(
+                                  user.username,
+                                  e.target.checked
+                                )
+                              }
                              className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
                            />
                          ) : (
@@ -1145,26 +1279,28 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                        </td>
                        <td className='px-6 py-4 whitespace-nowrap'>
                          <span
-                            className={`px-2 py-1 text-xs rounded-full ${user.role === 'owner'
-                              ? 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300'
-                              : user.role === 'admin'
+                            className={`px-2 py-1 text-xs rounded-full ${
+                              user.role === 'owner'
+                                ? 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300'
+                                : user.role === 'admin'
                                ? 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300'
                                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
+                            }`}
                          >
                            {user.role === 'owner'
                              ? '站长'
                              : user.role === 'admin'
-                                ? '管理员'
-                                : '普通用户'}
+                              ? '管理员'
+                              : '普通用户'}
                          </span>
                        </td>
                        <td className='px-6 py-4 whitespace-nowrap'>
                          <span
-                            className={`px-2 py-1 text-xs rounded-full ${!user.banned
-                              ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
-                              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-                              }`}
+                            className={`px-2 py-1 text-xs rounded-full ${
+                              !user.banned
+                                ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
+                                : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
+                            }`}
                          >
                            {!user.banned ? '正常' : '已封禁'}
                          </span>
@@ -1181,13 +1317,13 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                              (role === 'admin' &&
                                (user.role === 'user' ||
                                  user.username === currentUsername))) && (
-                                <button
-                                  onClick={() => handleConfigureUserGroup(user)}
-                                  className={buttonStyles.roundedPrimary}
-                                >
-                                  配置
-                                </button>
-                              )}
+                              <button
+                                onClick={() => handleConfigureUserGroup(user)}
+                                className={buttonStyles.roundedPrimary}
+                              >
+                                配置
+                              </button>
+                            )}
                          </div>
                        </td>
                        <td className='px-6 py-4 whitespace-nowrap'>
@@ -1202,13 +1338,13 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                              (role === 'admin' &&
                                (user.role === 'user' ||
                                  user.username === currentUsername))) && (
-                                <button
-                                  onClick={() => handleConfigureUserApis(user)}
-                                  className={buttonStyles.roundedPrimary}
-                                >
-                                  配置
-                                </button>
-                              )}
+                              <button
+                                onClick={() => handleConfigureUserApis(user)}
+                                className={buttonStyles.roundedPrimary}
+                              >
+                                配置
+                              </button>
+                            )}
                          </div>
                        </td>
                        <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
@@ -1229,8 +1365,14 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                              {user.role === 'user' && (
                                <button
                                  onClick={() => handleSetAdmin(user.username)}
-                                  disabled={isLoading(`setAdmin_${user.username}`)}
-                                  className={`${buttonStyles.roundedPurple} ${isLoading(`setAdmin_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                  disabled={isLoading(
+                                    `setAdmin_${user.username}`
+                                  )}
+                                  className={`${buttonStyles.roundedPurple} ${
+                                    isLoading(`setAdmin_${user.username}`)
+                                      ? 'opacity-50 cursor-not-allowed'
+                                      : ''
+                                  }`}
                                >
                                  设为管理
                                </button>
@@ -1240,8 +1382,16 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                                  onClick={() =>
                                    handleRemoveAdmin(user.username)
                                  }
-                                  disabled={isLoading(`removeAdmin_${user.username}`)}
-                                  className={`${buttonStyles.roundedSecondary} ${isLoading(`removeAdmin_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                  disabled={isLoading(
+                                    `removeAdmin_${user.username}`
+                                  )}
+                                  className={`${
+                                    buttonStyles.roundedSecondary
+                                  } ${
+                                    isLoading(`removeAdmin_${user.username}`)
+                                      ? 'opacity-50 cursor-not-allowed'
+                                      : ''
+                                  }`}
                                >
                                  取消管理
                                </button>
@@ -1250,8 +1400,14 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                                (!user.banned ? (
                                  <button
                                    onClick={() => handleBanUser(user.username)}
-                                    disabled={isLoading(`banUser_${user.username}`)}
-                                    className={`${buttonStyles.roundedDanger} ${isLoading(`banUser_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                    disabled={isLoading(
+                                      `banUser_${user.username}`
+                                    )}
+                                    className={`${buttonStyles.roundedDanger} ${
+                                      isLoading(`banUser_${user.username}`)
+                                        ? 'opacity-50 cursor-not-allowed'
+                                        : ''
+                                    }`}
                                  >
                                    封禁
                                  </button>
@@ -1260,8 +1416,16 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                                    onClick={() =>
                                      handleUnbanUser(user.username)
                                    }
-                                    disabled={isLoading(`unbanUser_${user.username}`)}
-                                    className={`${buttonStyles.roundedSuccess} ${isLoading(`unbanUser_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                    disabled={isLoading(
+                                      `unbanUser_${user.username}`
+                                    )}
+                                    className={`${
+                                      buttonStyles.roundedSuccess
+                                    } ${
+                                      isLoading(`unbanUser_${user.username}`)
+                                        ? 'opacity-50 cursor-not-allowed'
+                                        : ''
+                                    }`}
                                  >
                                    解封
                                  </button>
@@ -1289,199 +1453,97 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
      </div>

      {/* 配置用户采集源权限弹窗 */}
-      {showConfigureApisModal && selectedUser && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowConfigureApisModal(false);
-          setSelectedUser(null);
-          setSelectedApis([]);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  配置用户采集源权限 - {selectedUser.username}
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowConfigureApisModal(false);
-                    setSelectedUser(null);
-                    setSelectedApis([]);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                    </svg>
-                    <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
-                      配置说明
-                    </span>
-                  </div>
-                  <p className='text-sm text-blue-700 dark:text-blue-400 mt-1'>
-                    提示：全不选为无限制，选中的采集源将限制用户只能访问这些源
-                  </p>
-                </div>
-              </div>
-
-              {/* 采集源选择 - 多列布局 */}
-              <div className='mb-6'>
-                <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
-                  选择可用的采集源：
-                </h4>
-                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
-                  {config?.SourceConfig?.map((source) => (
-                    <label key={source.key} className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'>
-                      <input
-                        type='checkbox'
-                        checked={selectedApis.includes(source.key)}
-                        onChange={(e) => {
-                          if (e.target.checked) {
-                            setSelectedApis([...selectedApis, source.key]);
-                          } else {
-                            setSelectedApis(selectedApis.filter(api => api !== source.key));
-                          }
-                        }}
-                        className='rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700'
-                      />
-                      <div className='flex-1 min-w-0'>
-                        <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
-                          {source.name}
-                        </div>
-                        {source.api && (
-                          <div className='text-xs text-gray-500 dark:text-gray-400 truncate'>
-                            {extractDomain(source.api)}
-                          </div>
-                        )}
-                      </div>
-                    </label>
-                  ))}
-                </div>
-              </div>
-
-              {/* 快速操作按钮 */}
-              <div className='flex flex-wrap items-center justify-between mb-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg'>
-                <div className='flex space-x-2'>
-                  <button
-                    onClick={() => setSelectedApis([])}
-                    className={buttonStyles.quickAction}
-                  >
-                    全不选（无限制）
-                  </button>
+      {showConfigureApisModal &&
+        selectedUser &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => {
+              setShowConfigureApisModal(false);
+              setSelectedUser(null);
+              setSelectedApis([]);
+            }}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    配置用户采集源权限 - {selectedUser.username}
+                  </h3>
                  <button
                    onClick={() => {
-                      const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
-                      setSelectedApis(allApis);
+                      setShowConfigureApisModal(false);
+                      setSelectedUser(null);
+                      setSelectedApis([]);
                    }}
-                    className={buttonStyles.quickAction}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
                  >
-                    全选
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
                  </button>
                </div>
-                <div className='text-sm text-gray-600 dark:text-gray-400'>
-                  已选择：<span className='font-medium text-blue-600 dark:text-blue-400'>
-                    {selectedApis.length > 0 ? `${selectedApis.length} 个源` : '无限制'}
-                  </span>
-                </div>
-              </div>

-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowConfigureApisModal(false);
-                    setSelectedUser(null);
-                    setSelectedApis([]);
-                  }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleSaveUserApis}
-                  disabled={isLoading(`saveUserApis_${selectedUser?.username}`)}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading(`saveUserApis_${selectedUser?.username}`) ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading(`saveUserApis_${selectedUser?.username}`) ? '配置中...' : '确认配置'}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-
-      {/* 添加用户组弹窗 */}
-      {showAddUserGroupForm && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowAddUserGroupForm(false);
-          setNewUserGroup({ name: '', enabledApis: [] });
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  添加新用户组
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowAddUserGroupForm(false);
-                    setNewUserGroup({ name: '', enabledApis: [] });
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='space-y-6'>
-                {/* 用户组名称 */}
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-                    用户组名称
-                  </label>
-                  <input
-                    type='text'
-                    placeholder='请输入用户组名称'
-                    value={newUserGroup.name}
-                    onChange={(e) =>
-                      setNewUserGroup((prev) => ({ ...prev, name: e.target.value }))
-                    }
-                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
-                  />
+                <div className='mb-6'>
+                  <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
+                    <div className='flex items-center space-x-2 mb-2'>
+                      <svg
+                        className='w-5 h-5 text-blue-600 dark:text-blue-400'
+                        fill='none'
+                        stroke='currentColor'
+                        viewBox='0 0 24 24'
+                      >
+                        <path
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                          strokeWidth={2}
+                          d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+                        />
+                      </svg>
+                      <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
+                        配置说明
+                      </span>
+                    </div>
+                    <p className='text-sm text-blue-700 dark:text-blue-400 mt-1'>
+                      提示：全不选为无限制，选中的采集源将限制用户只能访问这些源
+                    </p>
+                  </div>
                </div>

-                {/* 可用视频源 */}
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
-                    可用视频源
-                  </label>
-                  <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
+                {/* 采集源选择 - 多列布局 */}
+                <div className='mb-6'>
+                  <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
+                    选择可用的采集源：
+                  </h4>
+                  <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
                    {config?.SourceConfig?.map((source) => (
-                      <label key={source.key} className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'>
+                      <label
+                        key={source.key}
+                        className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'
+                      >
                        <input
                          type='checkbox'
-                          checked={newUserGroup.enabledApis.includes(source.key)}
+                          checked={selectedApis.includes(source.key)}
                          onChange={(e) => {
                            if (e.target.checked) {
-                              setNewUserGroup(prev => ({
-                                ...prev,
-                                enabledApis: [...prev.enabledApis, source.key]
-                              }));
+                              setSelectedApis([...selectedApis, source.key]);
                            } else {
-                              setNewUserGroup(prev => ({
-                                ...prev,
-                                enabledApis: prev.enabledApis.filter(api => api !== source.key)
-                              }));
+                              setSelectedApis(
+                                selectedApis.filter((api) => api !== source.key)
+                              );
                            }
                          }}
                          className='rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700'
@@ -1499,479 +1561,511 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                      </label>
                    ))}
                  </div>
+                </div>

-                  {/* 快速操作按钮 */}
-                  <div className='mt-4 flex space-x-2'>
+                {/* 快速操作按钮 */}
+                <div className='flex flex-wrap items-center justify-between mb-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg'>
+                  <div className='flex space-x-2'>
                    <button
-                      onClick={() => setNewUserGroup(prev => ({ ...prev, enabledApis: [] }))}
+                      onClick={() => setSelectedApis([])}
                      className={buttonStyles.quickAction}
                    >
                      全不选（无限制）
                    </button>
                    <button
                      onClick={() => {
-                        const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
-                        setNewUserGroup(prev => ({ ...prev, enabledApis: allApis }));
+                        const allApis =
+                          config?.SourceConfig?.filter(
+                            (source) => !source.disabled
+                          ).map((s) => s.key) || [];
+                        setSelectedApis(allApis);
                      }}
                      className={buttonStyles.quickAction}
                    >
                      全选
                    </button>
                  </div>
-                </div>
-
-                {/* 操作按钮 */}
-                <div className='flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700'>
-                  <button
-                    onClick={() => {
-                      setShowAddUserGroupForm(false);
-                      setNewUserGroup({ name: '', enabledApis: [] });
-                    }}
-                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                  >
-                    取消
-                  </button>
-                  <button
-                    onClick={handleAddUserGroup}
-                    disabled={!newUserGroup.name.trim() || isLoading('userGroup_add_new')}
-                    className={`px-6 py-2.5 text-sm font-medium ${!newUserGroup.name.trim() || isLoading('userGroup_add_new') ? buttonStyles.disabled : buttonStyles.primary}`}
-                  >
-                    {isLoading('userGroup_add_new') ? '添加中...' : '添加用户组'}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-
-      {/* 编辑用户组弹窗 */}
-      {showEditUserGroupForm && editingUserGroup && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowEditUserGroupForm(false);
-          setEditingUserGroup(null);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  编辑用户组 - {editingUserGroup.name}
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowEditUserGroupForm(false);
-                    setEditingUserGroup(null);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='space-y-6'>
-                {/* 可用视频源 */}
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
-                    可用视频源
-                  </label>
-                  <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
-                    {config?.SourceConfig?.map((source) => (
-                      <label key={source.key} className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'>
-                        <input
-                          type='checkbox'
-                          checked={editingUserGroup.enabledApis.includes(source.key)}
-                          onChange={(e) => {
-                            if (e.target.checked) {
-                              setEditingUserGroup(prev => prev ? {
-                                ...prev,
-                                enabledApis: [...prev.enabledApis, source.key]
-                              } : null);
-                            } else {
-                              setEditingUserGroup(prev => prev ? {
-                                ...prev,
-                                enabledApis: prev.enabledApis.filter(api => api !== source.key)
-                              } : null);
-                            }
-                          }}
-                          className='rounded border-gray-300 text-purple-600 focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700'
-                        />
-                        <div className='flex-1 min-w-0'>
-                          <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
-                            {source.name}
-                          </div>
-                          {source.api && (
-                            <div className='text-xs text-gray-500 dark:text-gray-400 truncate'>
-                              {extractDomain(source.api)}
-                            </div>
-                          )}
-                        </div>
-                      </label>
-                    ))}
-                  </div>
-
-                  {/* 快速操作按钮 */}
-                  <div className='mt-4 flex space-x-2'>
-                    <button
-                      onClick={() => setEditingUserGroup(prev => prev ? { ...prev, enabledApis: [] } : null)}
-                      className={buttonStyles.quickAction}
-                    >
-                      全不选（无限制）
-                    </button>
-                    <button
-                      onClick={() => {
-                        const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
-                        setEditingUserGroup(prev => prev ? { ...prev, enabledApis: allApis } : null);
-                      }}
-                      className={buttonStyles.quickAction}
-                    >
-                      全选
-                    </button>
-                  </div>
-                </div>
-
-                {/* 操作按钮 */}
-                <div className='flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700'>
-                  <button
-                    onClick={() => {
-                      setShowEditUserGroupForm(false);
-                      setEditingUserGroup(null);
-                    }}
-                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                  >
-                    取消
-                  </button>
-                  <button
-                    onClick={handleEditUserGroup}
-                    disabled={isLoading(`userGroup_edit_${editingUserGroup?.name}`)}
-                    className={`px-6 py-2.5 text-sm font-medium ${isLoading(`userGroup_edit_${editingUserGroup?.name}`) ? buttonStyles.disabled : buttonStyles.primary}`}
-                  >
-                    {isLoading(`userGroup_edit_${editingUserGroup?.name}`) ? '保存中...' : '保存修改'}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-
-      {/* 配置用户组弹窗 */}
-      {showConfigureUserGroupModal && selectedUserForGroup && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowConfigureUserGroupModal(false);
-          setSelectedUserForGroup(null);
-          setSelectedUserGroups([]);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  配置用户组 - {selectedUserForGroup.username}
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowConfigureUserGroupModal(false);
-                    setSelectedUserForGroup(null);
-                    setSelectedUserGroups([]);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                    </svg>
-                    <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
-                      配置说明
+                  <div className='text-sm text-gray-600 dark:text-gray-400'>
+                    已选择：
+                    <span className='font-medium text-blue-600 dark:text-blue-400'>
+                      {selectedApis.length > 0
+                        ? `${selectedApis.length} 个源`
+                        : '无限制'}
                    </span>
                  </div>
-                  <p className='text-sm text-blue-700 dark:text-blue-400 mt-1'>
-                    提示：选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
-                  </p>
-                </div>
-              </div>
-
-              {/* 用户组选择 - 下拉选择器 */}
-              <div className='mb-6'>
-                <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-                  选择用户组：
-                </label>
-                <select
-                  value={selectedUserGroups.length > 0 ? selectedUserGroups[0] : ''}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    setSelectedUserGroups(value ? [value] : []);
-                  }}
-                  className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors'
-                >
-                  <option value=''>无用户组（无限制）</option>
-                  {userGroups.map((group) => (
-                    <option key={group.name} value={group.name}>
-                      {group.name} {group.enabledApis && group.enabledApis.length > 0 ? `(${group.enabledApis.length} 个源)` : ''}
-                    </option>
-                  ))}
-                </select>
-                <p className='mt-2 text-xs text-gray-500 dark:text-gray-400'>
-                  选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
-                </p>
-              </div>
-
-
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowConfigureUserGroupModal(false);
-                    setSelectedUserForGroup(null);
-                    setSelectedUserGroups([]);
-                  }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleSaveUserGroups}
-                  disabled={isLoading(`saveUserGroups_${selectedUserForGroup?.username}`)}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading(`saveUserGroups_${selectedUserForGroup?.username}`) ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading(`saveUserGroups_${selectedUserForGroup?.username}`) ? '配置中...' : '确认配置'}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-
-      {/* 删除用户组确认弹窗 */}
-      {showDeleteUserGroupModal && deletingUserGroup && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowDeleteUserGroupModal(false);
-          setDeletingUserGroup(null);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  确认删除用户组
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowDeleteUserGroupModal(false);
-                    setDeletingUserGroup(null);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-red-600 dark:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' />
-                    </svg>
-                    <span className='text-sm font-medium text-red-800 dark:text-red-300'>
-                      危险操作警告
-                    </span>
-                  </div>
-                  <p className='text-sm text-red-700 dark:text-red-400'>
-                    删除用户组 <strong>{deletingUserGroup.name}</strong> 将影响所有使用该组的用户，此操作不可恢复！
-                  </p>
-                </div>
-
-                {deletingUserGroup.affectedUsers.length > 0 ? (
-                  <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
-                    <div className='flex items-center space-x-2 mb-2'>
-                      <svg className='w-5 h-5 text-yellow-600 dark:text-yellow-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                      </svg>
-                      <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
-                        ⚠️ 将影响 {deletingUserGroup.affectedUsers.length} 个用户：
-                      </span>
-                    </div>
-                    <div className='space-y-1'>
-                      {deletingUserGroup.affectedUsers.map((user, index) => (
-                        <div key={index} className='text-sm text-yellow-700 dark:text-yellow-300'>
-                          • {user.username} ({user.role})
-                        </div>
-                      ))}
-                    </div>
-                    <p className='text-xs text-yellow-600 dark:text-yellow-400 mt-2'>
-                      这些用户的用户组将被自动移除
-                    </p>
-                  </div>
-                ) : (
-                  <div className='bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4'>
-                    <div className='flex items-center space-x-2'>
-                      <svg className='w-5 h-5 text-green-600 dark:text-green-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
-                      </svg>
-                      <span className='text-sm font-medium text-green-800 dark:text-green-300'>
-                        ✅ 当前没有用户使用此用户组
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowDeleteUserGroupModal(false);
-                    setDeletingUserGroup(null);
-                  }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleConfirmDeleteUserGroup}
-                  disabled={isLoading(`userGroup_delete_${deletingUserGroup?.name}`)}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading(`userGroup_delete_${deletingUserGroup?.name}`) ? buttonStyles.disabled : buttonStyles.danger}`}
-                >
-                  {isLoading(`userGroup_delete_${deletingUserGroup?.name}`) ? '删除中...' : '确认删除'}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
-
-      {/* 删除用户确认弹窗 */}
-      {showDeleteUserModal && deletingUser && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowDeleteUserModal(false);
-          setDeletingUser(null);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  确认删除用户
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowDeleteUserModal(false);
-                    setDeletingUser(null);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-red-600 dark:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' />
-                    </svg>
-                    <span className='text-sm font-medium text-red-800 dark:text-red-300'>
-                      危险操作警告
-                    </span>
-                  </div>
-                  <p className='text-sm text-red-700 dark:text-red-400'>
-                    删除用户 <strong>{deletingUser}</strong> 将同时删除其搜索历史、播放记录和收藏夹，此操作不可恢复！
-                  </p>
                </div>

                {/* 操作按钮 */}
                <div className='flex justify-end space-x-3'>
                  <button
                    onClick={() => {
-                      setShowDeleteUserModal(false);
-                      setDeletingUser(null);
+                      setShowConfigureApisModal(false);
+                      setSelectedUser(null);
+                      setSelectedApis([]);
                    }}
                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
                  >
                    取消
                  </button>
                  <button
-                    onClick={handleConfirmDeleteUser}
-                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.danger}`}
+                    onClick={handleSaveUserApis}
+                    disabled={isLoading(
+                      `saveUserApis_${selectedUser?.username}`
+                    )}
+                    className={`px-6 py-2.5 text-sm font-medium ${
+                      isLoading(`saveUserApis_${selectedUser?.username}`)
+                        ? buttonStyles.disabled
+                        : buttonStyles.primary
+                    }`}
                  >
-                    确认删除
+                    {isLoading(`saveUserApis_${selectedUser?.username}`)
+                      ? '配置中...'
+                      : '确认配置'}
                  </button>
                </div>
              </div>
            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          </div>,
+          document.body
+        )}

-      {/* 批量设置用户组弹窗 */}
-      {showBatchUserGroupModal && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowBatchUserGroupModal(false);
-          setSelectedUserGroup('');
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  批量设置用户组
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowBatchUserGroupModal(false);
-                    setSelectedUserGroup('');
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
+      {/* 添加用户组弹窗 */}
+      {showAddUserGroupForm &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => {
+              setShowAddUserGroupForm(false);
+              setNewUserGroup({ name: '', enabledApis: [] });
+            }}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    添加新用户组
+                  </h3>
+                  <button
+                    onClick={() => {
+                      setShowAddUserGroupForm(false);
+                      setNewUserGroup({ name: '', enabledApis: [] });
+                    }}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
                    </svg>
-                    <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
-                      批量操作说明
-                    </span>
-                  </div>
-                  <p className='text-sm text-blue-700 dark:text-blue-400'>
-                    将为选中的 <strong>{selectedUsers.size} 个用户</strong> 设置用户组，选择"无用户组"为无限制
-                  </p>
+                  </button>
                </div>

-                <div>
+                <div className='space-y-6'>
+                  {/* 用户组名称 */}
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+                      用户组名称
+                    </label>
+                    <input
+                      type='text'
+                      placeholder='请输入用户组名称'
+                      value={newUserGroup.name}
+                      onChange={(e) =>
+                        setNewUserGroup((prev) => ({
+                          ...prev,
+                          name: e.target.value,
+                        }))
+                      }
+                      className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+                    />
+                  </div>
+
+                  {/* 可用视频源 */}
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
+                      可用视频源
+                    </label>
+                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
+                      {config?.SourceConfig?.map((source) => (
+                        <label
+                          key={source.key}
+                          className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'
+                        >
+                          <input
+                            type='checkbox'
+                            checked={newUserGroup.enabledApis.includes(
+                              source.key
+                            )}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setNewUserGroup((prev) => ({
+                                  ...prev,
+                                  enabledApis: [
+                                    ...prev.enabledApis,
+                                    source.key,
+                                  ],
+                                }));
+                              } else {
+                                setNewUserGroup((prev) => ({
+                                  ...prev,
+                                  enabledApis: prev.enabledApis.filter(
+                                    (api) => api !== source.key
+                                  ),
+                                }));
+                              }
+                            }}
+                            className='rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700'
+                          />
+                          <div className='flex-1 min-w-0'>
+                            <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
+                              {source.name}
+                            </div>
+                            {source.api && (
+                              <div className='text-xs text-gray-500 dark:text-gray-400 truncate'>
+                                {extractDomain(source.api)}
+                              </div>
+                            )}
+                          </div>
+                        </label>
+                      ))}
+                    </div>
+
+                    {/* 快速操作按钮 */}
+                    <div className='mt-4 flex space-x-2'>
+                      <button
+                        onClick={() =>
+                          setNewUserGroup((prev) => ({
+                            ...prev,
+                            enabledApis: [],
+                          }))
+                        }
+                        className={buttonStyles.quickAction}
+                      >
+                        全不选（无限制）
+                      </button>
+                      <button
+                        onClick={() => {
+                          const allApis =
+                            config?.SourceConfig?.filter(
+                              (source) => !source.disabled
+                            ).map((s) => s.key) || [];
+                          setNewUserGroup((prev) => ({
+                            ...prev,
+                            enabledApis: allApis,
+                          }));
+                        }}
+                        className={buttonStyles.quickAction}
+                      >
+                        全选
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* 操作按钮 */}
+                  <div className='flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700'>
+                    <button
+                      onClick={() => {
+                        setShowAddUserGroupForm(false);
+                        setNewUserGroup({ name: '', enabledApis: [] });
+                      }}
+                      className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                    >
+                      取消
+                    </button>
+                    <button
+                      onClick={handleAddUserGroup}
+                      disabled={
+                        !newUserGroup.name.trim() ||
+                        isLoading('userGroup_add_new')
+                      }
+                      className={`px-6 py-2.5 text-sm font-medium ${
+                        !newUserGroup.name.trim() ||
+                        isLoading('userGroup_add_new')
+                          ? buttonStyles.disabled
+                          : buttonStyles.primary
+                      }`}
+                    >
+                      {isLoading('userGroup_add_new')
+                        ? '添加中...'
+                        : '添加用户组'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}
+
+      {/* 编辑用户组弹窗 */}
+      {showEditUserGroupForm &&
+        editingUserGroup &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => {
+              setShowEditUserGroupForm(false);
+              setEditingUserGroup(null);
+            }}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    编辑用户组 - {editingUserGroup.name}
+                  </h3>
+                  <button
+                    onClick={() => {
+                      setShowEditUserGroupForm(false);
+                      setEditingUserGroup(null);
+                    }}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
+                  </button>
+                </div>
+
+                <div className='space-y-6'>
+                  {/* 可用视频源 */}
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
+                      可用视频源
+                    </label>
+                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
+                      {config?.SourceConfig?.map((source) => (
+                        <label
+                          key={source.key}
+                          className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'
+                        >
+                          <input
+                            type='checkbox'
+                            checked={editingUserGroup.enabledApis.includes(
+                              source.key
+                            )}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setEditingUserGroup((prev) =>
+                                  prev
+                                    ? {
+                                        ...prev,
+                                        enabledApis: [
+                                          ...prev.enabledApis,
+                                          source.key,
+                                        ],
+                                      }
+                                    : null
+                                );
+                              } else {
+                                setEditingUserGroup((prev) =>
+                                  prev
+                                    ? {
+                                        ...prev,
+                                        enabledApis: prev.enabledApis.filter(
+                                          (api) => api !== source.key
+                                        ),
+                                      }
+                                    : null
+                                );
+                              }
+                            }}
+                            className='rounded border-gray-300 text-purple-600 focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700'
+                          />
+                          <div className='flex-1 min-w-0'>
+                            <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
+                              {source.name}
+                            </div>
+                            {source.api && (
+                              <div className='text-xs text-gray-500 dark:text-gray-400 truncate'>
+                                {extractDomain(source.api)}
+                              </div>
+                            )}
+                          </div>
+                        </label>
+                      ))}
+                    </div>
+
+                    {/* 快速操作按钮 */}
+                    <div className='mt-4 flex space-x-2'>
+                      <button
+                        onClick={() =>
+                          setEditingUserGroup((prev) =>
+                            prev ? { ...prev, enabledApis: [] } : null
+                          )
+                        }
+                        className={buttonStyles.quickAction}
+                      >
+                        全不选（无限制）
+                      </button>
+                      <button
+                        onClick={() => {
+                          const allApis =
+                            config?.SourceConfig?.filter(
+                              (source) => !source.disabled
+                            ).map((s) => s.key) || [];
+                          setEditingUserGroup((prev) =>
+                            prev ? { ...prev, enabledApis: allApis } : null
+                          );
+                        }}
+                        className={buttonStyles.quickAction}
+                      >
+                        全选
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* 操作按钮 */}
+                  <div className='flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700'>
+                    <button
+                      onClick={() => {
+                        setShowEditUserGroupForm(false);
+                        setEditingUserGroup(null);
+                      }}
+                      className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                    >
+                      取消
+                    </button>
+                    <button
+                      onClick={handleEditUserGroup}
+                      disabled={isLoading(
+                        `userGroup_edit_${editingUserGroup?.name}`
+                      )}
+                      className={`px-6 py-2.5 text-sm font-medium ${
+                        isLoading(`userGroup_edit_${editingUserGroup?.name}`)
+                          ? buttonStyles.disabled
+                          : buttonStyles.primary
+                      }`}
+                    >
+                      {isLoading(`userGroup_edit_${editingUserGroup?.name}`)
+                        ? '保存中...'
+                        : '保存修改'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}
+
+      {/* 配置用户组弹窗 */}
+      {showConfigureUserGroupModal &&
+        selectedUserForGroup &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => {
+              setShowConfigureUserGroupModal(false);
+              setSelectedUserForGroup(null);
+              setSelectedUserGroups([]);
+            }}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    配置用户组 - {selectedUserForGroup.username}
+                  </h3>
+                  <button
+                    onClick={() => {
+                      setShowConfigureUserGroupModal(false);
+                      setSelectedUserForGroup(null);
+                      setSelectedUserGroups([]);
+                    }}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
+                  </button>
+                </div>
+
+                <div className='mb-6'>
+                  <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
+                    <div className='flex items-center space-x-2 mb-2'>
+                      <svg
+                        className='w-5 h-5 text-blue-600 dark:text-blue-400'
+                        fill='none'
+                        stroke='currentColor'
+                        viewBox='0 0 24 24'
+                      >
+                        <path
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                          strokeWidth={2}
+                          d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+                        />
+                      </svg>
+                      <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
+                        配置说明
+                      </span>
+                    </div>
+                    <p className='text-sm text-blue-700 dark:text-blue-400 mt-1'>
+                      提示：选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
+                    </p>
+                  </div>
+                </div>
+
+                {/* 用户组选择 - 下拉选择器 */}
+                <div className='mb-6'>
                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
                    选择用户组：
                  </label>
                  <select
-                    onChange={(e) => setSelectedUserGroup(e.target.value)}
+                    value={
+                      selectedUserGroups.length > 0 ? selectedUserGroups[0] : ''
+                    }
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      setSelectedUserGroups(value ? [value] : []);
+                    }}
                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors'
-                    value={selectedUserGroup}
                  >
                    <option value=''>无用户组（无限制）</option>
                    {userGroups.map((group) => (
                      <option key={group.name} value={group.name}>
-                        {group.name} {group.enabledApis && group.enabledApis.length > 0 ? `(${group.enabledApis.length} 个源)` : ''}
+                        {group.name}{' '}
+                        {group.enabledApis && group.enabledApis.length > 0
+                          ? `(${group.enabledApis.length} 个源)`
+                          : ''}
                      </option>
                    ))}
                  </select>
@@ -1979,32 +2073,421 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
                    选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
                  </p>
                </div>
-              </div>

-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowBatchUserGroupModal(false);
-                    setSelectedUserGroup('');
-                  }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={() => handleBatchSetUserGroup(selectedUserGroup)}
-                  disabled={isLoading('batchSetUserGroup')}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading('batchSetUserGroup') ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading('batchSetUserGroup') ? '设置中...' : '确认设置'}
-                </button>
+                {/* 操作按钮 */}
+                <div className='flex justify-end space-x-3'>
+                  <button
+                    onClick={() => {
+                      setShowConfigureUserGroupModal(false);
+                      setSelectedUserForGroup(null);
+                      setSelectedUserGroups([]);
+                    }}
+                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={handleSaveUserGroups}
+                    disabled={isLoading(
+                      `saveUserGroups_${selectedUserForGroup?.username}`
+                    )}
+                    className={`px-6 py-2.5 text-sm font-medium ${
+                      isLoading(
+                        `saveUserGroups_${selectedUserForGroup?.username}`
+                      )
+                        ? buttonStyles.disabled
+                        : buttonStyles.primary
+                    }`}
+                  >
+                    {isLoading(
+                      `saveUserGroups_${selectedUserForGroup?.username}`
+                    )
+                      ? '配置中...'
+                      : '确认配置'}
+                  </button>
+                </div>
              </div>
            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          </div>,
+          document.body
+        )}
+
+      {/* 删除用户组确认弹窗 */}
+      {showDeleteUserGroupModal &&
+        deletingUserGroup &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => {
+              setShowDeleteUserGroupModal(false);
+              setDeletingUserGroup(null);
+            }}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    确认删除用户组
+                  </h3>
+                  <button
+                    onClick={() => {
+                      setShowDeleteUserGroupModal(false);
+                      setDeletingUserGroup(null);
+                    }}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
+                  </button>
+                </div>
+
+                <div className='mb-6'>
+                  <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
+                    <div className='flex items-center space-x-2 mb-2'>
+                      <svg
+                        className='w-5 h-5 text-red-600 dark:text-red-400'
+                        fill='none'
+                        stroke='currentColor'
+                        viewBox='0 0 24 24'
+                      >
+                        <path
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                          strokeWidth={2}
+                          d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z'
+                        />
+                      </svg>
+                      <span className='text-sm font-medium text-red-800 dark:text-red-300'>
+                        危险操作警告
+                      </span>
+                    </div>
+                    <p className='text-sm text-red-700 dark:text-red-400'>
+                      删除用户组 <strong>{deletingUserGroup.name}</strong>{' '}
+                      将影响所有使用该组的用户，此操作不可恢复！
+                    </p>
+                  </div>
+
+                  {deletingUserGroup.affectedUsers.length > 0 ? (
+                    <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
+                      <div className='flex items-center space-x-2 mb-2'>
+                        <svg
+                          className='w-5 h-5 text-yellow-600 dark:text-yellow-400'
+                          fill='none'
+                          stroke='currentColor'
+                          viewBox='0 0 24 24'
+                        >
+                          <path
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth={2}
+                            d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+                          />
+                        </svg>
+                        <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
+                          ⚠️ 将影响 {deletingUserGroup.affectedUsers.length}{' '}
+                          个用户：
+                        </span>
+                      </div>
+                      <div className='space-y-1'>
+                        {deletingUserGroup.affectedUsers.map((user, index) => (
+                          <div
+                            key={index}
+                            className='text-sm text-yellow-700 dark:text-yellow-300'
+                          >
+                            • {user.username} ({user.role})
+                          </div>
+                        ))}
+                      </div>
+                      <p className='text-xs text-yellow-600 dark:text-yellow-400 mt-2'>
+                        这些用户的用户组将被自动移除
+                      </p>
+                    </div>
+                  ) : (
+                    <div className='bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4'>
+                      <div className='flex items-center space-x-2'>
+                        <svg
+                          className='w-5 h-5 text-green-600 dark:text-green-400'
+                          fill='none'
+                          stroke='currentColor'
+                          viewBox='0 0 24 24'
+                        >
+                          <path
+                            strokeLinecap='round'
+                            strokeLinejoin='round'
+                            strokeWidth={2}
+                            d='M5 13l4 4L19 7'
+                          />
+                        </svg>
+                        <span className='text-sm font-medium text-green-800 dark:text-green-300'>
+                          ✅ 当前没有用户使用此用户组
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* 操作按钮 */}
+                <div className='flex justify-end space-x-3'>
+                  <button
+                    onClick={() => {
+                      setShowDeleteUserGroupModal(false);
+                      setDeletingUserGroup(null);
+                    }}
+                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={handleConfirmDeleteUserGroup}
+                    disabled={isLoading(
+                      `userGroup_delete_${deletingUserGroup?.name}`
+                    )}
+                    className={`px-6 py-2.5 text-sm font-medium ${
+                      isLoading(`userGroup_delete_${deletingUserGroup?.name}`)
+                        ? buttonStyles.disabled
+                        : buttonStyles.danger
+                    }`}
+                  >
+                    {isLoading(`userGroup_delete_${deletingUserGroup?.name}`)
+                      ? '删除中...'
+                      : '确认删除'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}
+
+      {/* 删除用户确认弹窗 */}
+      {showDeleteUserModal &&
+        deletingUser &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => {
+              setShowDeleteUserModal(false);
+              setDeletingUser(null);
+            }}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    确认删除用户
+                  </h3>
+                  <button
+                    onClick={() => {
+                      setShowDeleteUserModal(false);
+                      setDeletingUser(null);
+                    }}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
+                  </button>
+                </div>
+
+                <div className='mb-6'>
+                  <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
+                    <div className='flex items-center space-x-2 mb-2'>
+                      <svg
+                        className='w-5 h-5 text-red-600 dark:text-red-400'
+                        fill='none'
+                        stroke='currentColor'
+                        viewBox='0 0 24 24'
+                      >
+                        <path
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                          strokeWidth={2}
+                          d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z'
+                        />
+                      </svg>
+                      <span className='text-sm font-medium text-red-800 dark:text-red-300'>
+                        危险操作警告
+                      </span>
+                    </div>
+                    <p className='text-sm text-red-700 dark:text-red-400'>
+                      删除用户 <strong>{deletingUser}</strong>{' '}
+                      将同时删除其搜索历史、播放记录和收藏夹，此操作不可恢复！
+                    </p>
+                  </div>
+
+                  {/* 操作按钮 */}
+                  <div className='flex justify-end space-x-3'>
+                    <button
+                      onClick={() => {
+                        setShowDeleteUserModal(false);
+                        setDeletingUser(null);
+                      }}
+                      className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                    >
+                      取消
+                    </button>
+                    <button
+                      onClick={handleConfirmDeleteUser}
+                      className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.danger}`}
+                    >
+                      确认删除
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}
+
+      {/* 批量设置用户组弹窗 */}
+      {showBatchUserGroupModal &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => {
+              setShowBatchUserGroupModal(false);
+              setSelectedUserGroup('');
+            }}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    批量设置用户组
+                  </h3>
+                  <button
+                    onClick={() => {
+                      setShowBatchUserGroupModal(false);
+                      setSelectedUserGroup('');
+                    }}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
+                  </button>
+                </div>
+
+                <div className='mb-6'>
+                  <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4'>
+                    <div className='flex items-center space-x-2 mb-2'>
+                      <svg
+                        className='w-5 h-5 text-blue-600 dark:text-blue-400'
+                        fill='none'
+                        stroke='currentColor'
+                        viewBox='0 0 24 24'
+                      >
+                        <path
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                          strokeWidth={2}
+                          d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+                        />
+                      </svg>
+                      <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
+                        批量操作说明
+                      </span>
+                    </div>
+                    <p className='text-sm text-blue-700 dark:text-blue-400'>
+                      将为选中的 <strong>{selectedUsers.size} 个用户</strong>{' '}
+                      设置用户组，选择"无用户组"为无限制
+                    </p>
+                  </div>
+
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+                      选择用户组：
+                    </label>
+                    <select
+                      onChange={(e) => setSelectedUserGroup(e.target.value)}
+                      className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors'
+                      value={selectedUserGroup}
+                    >
+                      <option value=''>无用户组（无限制）</option>
+                      {userGroups.map((group) => (
+                        <option key={group.name} value={group.name}>
+                          {group.name}{' '}
+                          {group.enabledApis && group.enabledApis.length > 0
+                            ? `(${group.enabledApis.length} 个源)`
+                            : ''}
+                        </option>
+                      ))}
+                    </select>
+                    <p className='mt-2 text-xs text-gray-500 dark:text-gray-400'>
+                      选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
+                    </p>
+                  </div>
+                </div>
+
+                {/* 操作按钮 */}
+                <div className='flex justify-end space-x-3'>
+                  <button
+                    onClick={() => {
+                      setShowBatchUserGroupModal(false);
+                      setSelectedUserGroup('');
+                    }}
+                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={() => handleBatchSetUserGroup(selectedUserGroup)}
+                    disabled={isLoading('batchSetUserGroup')}
+                    className={`px-6 py-2.5 text-sm font-medium ${
+                      isLoading('batchSetUserGroup')
+                        ? buttonStyles.disabled
+                        : buttonStyles.primary
+                    }`}
+                  >
+                    {isLoading('batchSetUserGroup') ? '设置中...' : '确认设置'}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}

      {/* 通用弹窗组件 */}
      <AlertModal
@@ -2016,11 +2499,9 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
        timer={alertModal.timer}
        showConfirm={alertModal.showConfirm}
      />
-
-
    </div>
  );
-}
+};

 // 视频源配置组件
 const VideoSourceConfig = ({
@@ -2045,7 +2526,9 @@ const VideoSourceConfig = ({
  });

  // 批量操作相关状态
-  const [selectedSources, setSelectedSources] = useState<Set<string>>(new Set());
+  const [selectedSources, setSelectedSources] = useState<Set<string>>(
+    new Set()
+  );

  // 使用 useMemo 计算全选状态，避免每次渲染都重新计算
  const selectAll = useMemo(() => {
@@ -2063,21 +2546,23 @@ const VideoSourceConfig = ({
    isOpen: false,
    title: '',
    message: '',
-    onConfirm: () => { },
-    onCancel: () => { }
+    onConfirm: () => {},
+    onCancel: () => {},
  });

  // 有效性检测相关状态
  const [showValidationModal, setShowValidationModal] = useState(false);
  const [searchKeyword, setSearchKeyword] = useState('');
  const [isValidating, setIsValidating] = useState(false);
-  const [validationResults, setValidationResults] = useState<Array<{
-    key: string;
-    name: string;
-    status: 'valid' | 'no_results' | 'invalid' | 'validating';
-    message: string;
-    resultCount: number;
-  }>>([]);
+  const [validationResults, setValidationResults] = useState<
+    Array<{
+      key: string;
+      name: string;
+      status: 'valid' | 'no_results' | 'invalid' | 'validating';
+      message: string;
+      resultCount: number;
+    }>
+  >([]);

  // dnd-kit 传感器
  const sensors = useSensors(
@@ -2131,13 +2616,17 @@ const VideoSourceConfig = ({
    const target = sources.find((s) => s.key === key);
    if (!target) return;
    const action = target.disabled ? 'enable' : 'disable';
-    withLoading(`toggleSource_${key}`, () => callSourceApi({ action, key })).catch(() => {
+    withLoading(`toggleSource_${key}`, () =>
+      callSourceApi({ action, key })
+    ).catch(() => {
      console.error('操作失败', action, key);
    });
  };

  const handleDelete = (key: string) => {
-    withLoading(`deleteSource_${key}`, () => callSourceApi({ action: 'delete', key })).catch(() => {
+    withLoading(`deleteSource_${key}`, () =>
+      callSourceApi({ action: 'delete', key })
+    ).catch(() => {
      console.error('操作失败', 'delete', key);
    });
  };
@@ -2177,7 +2666,9 @@ const VideoSourceConfig = ({

  const handleSaveOrder = () => {
    const order = sources.map((s) => s.key);
-    withLoading('saveSourceOrder', () => callSourceApi({ action: 'sort', order }))
+    withLoading('saveSourceOrder', () =>
+      callSourceApi({ action: 'sort', order })
+    )
      .then(() => {
        setOrderChanged(false);
      })
@@ -2189,7 +2680,11 @@ const VideoSourceConfig = ({
  // 有效性检测函数
  const handleValidateSources = async () => {
    if (!searchKeyword.trim()) {
-      showAlert({ type: 'warning', title: '请输入搜索关键词', message: '搜索关键词不能为空' });
+      showAlert({
+        type: 'warning',
+        title: '请输入搜索关键词',
+        message: '搜索关键词不能为空',
+      });
      return;
    }

@@ -2199,18 +2694,22 @@ const VideoSourceConfig = ({
      setShowValidationModal(false); // 立即关闭弹窗

      // 初始化所有视频源为检测中状态
-      const initialResults = sources.map(source => ({
+      const initialResults = sources.map((source) => ({
        key: source.key,
        name: source.name,
        status: 'validating' as const,
        message: '检测中...',
-        resultCount: 0
+        resultCount: 0,
      }));
      setValidationResults(initialResults);

      try {
        // 使用EventSource接收流式数据
-        const eventSource = new EventSource(`/api/admin/source/validate?q=${encodeURIComponent(searchKeyword.trim())}`);
+        const eventSource = new EventSource(
+          `/api/admin/source/validate?q=${encodeURIComponent(
+            searchKeyword.trim()
+          )}`
+        );

        eventSource.onmessage = (event) => {
          try {
@@ -2224,32 +2723,53 @@ const VideoSourceConfig = ({
              case 'source_result':
              case 'source_error':
                // 更新验证结果
-                setValidationResults(prev => {
-                  const existing = prev.find(r => r.key === data.source);
+                setValidationResults((prev) => {
+                  const existing = prev.find((r) => r.key === data.source);
                  if (existing) {
-                    return prev.map(r => r.key === data.source ? {
-                      key: data.source,
-                      name: sources.find(s => s.key === data.source)?.name || data.source,
-                      status: data.status,
-                      message: data.status === 'valid' ? '搜索正常' :
-                        data.status === 'no_results' ? '无法搜索到结果' : '连接失败',
-                      resultCount: data.status === 'valid' ? 1 : 0
-                    } : r);
+                    return prev.map((r) =>
+                      r.key === data.source
+                        ? {
+                            key: data.source,
+                            name:
+                              sources.find((s) => s.key === data.source)
+                                ?.name || data.source,
+                            status: data.status,
+                            message:
+                              data.status === 'valid'
+                                ? '搜索正常'
+                                : data.status === 'no_results'
+                                ? '无法搜索到结果'
+                                : '连接失败',
+                            resultCount: data.status === 'valid' ? 1 : 0,
+                          }
+                        : r
+                    );
                  } else {
-                    return [...prev, {
-                      key: data.source,
-                      name: sources.find(s => s.key === data.source)?.name || data.source,
-                      status: data.status,
-                      message: data.status === 'valid' ? '搜索正常' :
-                        data.status === 'no_results' ? '无法搜索到结果' : '连接失败',
-                      resultCount: data.status === 'valid' ? 1 : 0
-                    }];
+                    return [
+                      ...prev,
+                      {
+                        key: data.source,
+                        name:
+                          sources.find((s) => s.key === data.source)?.name ||
+                          data.source,
+                        status: data.status,
+                        message:
+                          data.status === 'valid'
+                            ? '搜索正常'
+                            : data.status === 'no_results'
+                            ? '无法搜索到结果'
+                            : '连接失败',
+                        resultCount: data.status === 'valid' ? 1 : 0,
+                      },
+                    ];
                  }
                });
                break;

              case 'complete':
-                console.log(`检测完成，共检测 ${data.completedSources} 个视频源`);
+                console.log(
+                  `检测完成，共检测 ${data.completedSources} 个视频源`
+                );
                eventSource.close();
                setIsValidating(false);
                break;
@@ -2263,7 +2783,11 @@ const VideoSourceConfig = ({
          console.error('EventSource错误:', error);
          eventSource.close();
          setIsValidating(false);
-          showAlert({ type: 'error', title: '验证失败', message: '连接错误，请重试' });
+          showAlert({
+            type: 'error',
+            title: '验证失败',
+            message: '连接错误，请重试',
+          });
        };

        // 设置超时，防止长时间等待
@@ -2271,13 +2795,20 @@ const VideoSourceConfig = ({
          if (eventSource.readyState === EventSource.OPEN) {
            eventSource.close();
            setIsValidating(false);
-            showAlert({ type: 'warning', title: '验证超时', message: '检测超时，请重试' });
+            showAlert({
+              type: 'warning',
+              title: '验证超时',
+              message: '检测超时，请重试',
+            });
          }
        }, 60000); // 60秒超时
-
      } catch (error) {
        setIsValidating(false);
-        showAlert({ type: 'error', title: '验证失败', message: error instanceof Error ? error.message : '未知错误' });
+        showAlert({
+          type: 'error',
+          title: '验证失败',
+          message: error instanceof Error ? error.message : '未知错误',
+        });
        throw error;
      }
    });
@@ -2285,37 +2816,41 @@ const VideoSourceConfig = ({

  // 获取有效性状态显示
  const getValidationStatus = (sourceKey: string) => {
-    const result = validationResults.find(r => r.key === sourceKey);
+    const result = validationResults.find((r) => r.key === sourceKey);
    if (!result) return null;

    switch (result.status) {
      case 'validating':
        return {
          text: '检测中',
-          className: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300',
+          className:
+            'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300',
          icon: '⟳',
-          message: result.message
+          message: result.message,
        };
      case 'valid':
        return {
          text: '有效',
-          className: 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300',
+          className:
+            'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300',
          icon: '✓',
-          message: result.message
+          message: result.message,
        };
      case 'no_results':
        return {
          text: '无法搜索',
-          className: 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300',
+          className:
+            'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300',
          icon: '⚠',
-          message: result.message
+          message: result.message,
        };
      case 'invalid':
        return {
          text: '无效',
-          className: 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300',
+          className:
+            'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300',
          icon: '✗',
-          message: result.message
+          message: result.message,
        };
      default:
        return null;
@@ -2374,10 +2909,11 @@ const VideoSourceConfig = ({
        </td>
        <td className='px-6 py-4 whitespace-nowrap max-w-[1rem]'>
          <span
-            className={`px-2 py-1 text-xs rounded-full ${!source.disabled
-              ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
-              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-              }`}
+            className={`px-2 py-1 text-xs rounded-full ${
+              !source.disabled
+                ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
+                : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
+            }`}
          >
            {!source.disabled ? '启用中' : '已禁用'}
          </span>
@@ -2393,7 +2929,10 @@ const VideoSourceConfig = ({
              );
            }
            return (
-              <span className={`px-2 py-1 text-xs rounded-full ${status.className}`} title={status.message}>
+              <span
+                className={`px-2 py-1 text-xs rounded-full ${status.className}`}
+                title={status.message}
+              >
                {status.icon} {status.text}
              </span>
            );
@@ -2403,10 +2942,15 @@ const VideoSourceConfig = ({
          <button
            onClick={() => handleToggleEnable(source.key)}
            disabled={isLoading(`toggleSource_${source.key}`)}
-            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!source.disabled
-              ? buttonStyles.roundedDanger
-              : buttonStyles.roundedSuccess
-              } transition-colors ${isLoading(`toggleSource_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${
+              !source.disabled
+                ? buttonStyles.roundedDanger
+                : buttonStyles.roundedSuccess
+            } transition-colors ${
+              isLoading(`toggleSource_${source.key}`)
+                ? 'opacity-50 cursor-not-allowed'
+                : ''
+            }`}
          >
            {!source.disabled ? '禁用' : '启用'}
          </button>
@@ -2414,7 +2958,11 @@ const VideoSourceConfig = ({
            <button
              onClick={() => handleDelete(source.key)}
              disabled={isLoading(`deleteSource_${source.key}`)}
-              className={`${buttonStyles.roundedSecondary} ${isLoading(`deleteSource_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+              className={`${buttonStyles.roundedSecondary} ${
+                isLoading(`deleteSource_${source.key}`)
+                  ? 'opacity-50 cursor-not-allowed'
+                  : ''
+              }`}
            >
              删除
            </button>
@@ -2425,18 +2973,21 @@ const VideoSourceConfig = ({
  };

  // 全选/取消全选
-  const handleSelectAll = useCallback((checked: boolean) => {
-    if (checked) {
-      const allKeys = sources.map(s => s.key);
-      setSelectedSources(new Set(allKeys));
-    } else {
-      setSelectedSources(new Set());
-    }
-  }, [sources]);
+  const handleSelectAll = useCallback(
+    (checked: boolean) => {
+      if (checked) {
+        const allKeys = sources.map((s) => s.key);
+        setSelectedSources(new Set(allKeys));
+      } else {
+        setSelectedSources(new Set());
+      }
+    },
+    [sources]
+  );

  // 单个选择
  const handleSelectSource = useCallback((key: string, checked: boolean) => {
-    setSelectedSources(prev => {
+    setSelectedSources((prev) => {
      const newSelected = new Set(prev);
      if (checked) {
        newSelected.add(key);
@@ -2448,9 +2999,15 @@ const VideoSourceConfig = ({
  }, []);

  // 批量操作
-  const handleBatchOperation = async (action: 'batch_enable' | 'batch_disable' | 'batch_delete') => {
+  const handleBatchOperation = async (
+    action: 'batch_enable' | 'batch_disable' | 'batch_delete'
+  ) => {
    if (selectedSources.size === 0) {
-      showAlert({ type: 'warning', title: '请先选择要操作的视频源', message: '请选择至少一个视频源' });
+      showAlert({
+        type: 'warning',
+        title: '请先选择要操作的视频源',
+        message: '请选择至少一个视频源',
+      });
      return;
    }

@@ -2480,18 +3037,41 @@ const VideoSourceConfig = ({
      message: confirmMessage,
      onConfirm: async () => {
        try {
-          await withLoading(`batchSource_${action}`, () => callSourceApi({ action, keys }));
-          showAlert({ type: 'success', title: `${actionName}成功`, message: `${actionName}了 ${keys.length} 个视频源`, timer: 2000 });
+          await withLoading(`batchSource_${action}`, () =>
+            callSourceApi({ action, keys })
+          );
+          showAlert({
+            type: 'success',
+            title: `${actionName}成功`,
+            message: `${actionName}了 ${keys.length} 个视频源`,
+            timer: 2000,
+          });
          // 重置选择状态
          setSelectedSources(new Set());
        } catch (err) {
-          showAlert({ type: 'error', title: `${actionName}失败`, message: err instanceof Error ? err.message : '操作失败' });
+          showAlert({
+            type: 'error',
+            title: `${actionName}失败`,
+            message: err instanceof Error ? err.message : '操作失败',
+          });
        }
-        setConfirmModal({ isOpen: false, title: '', message: '', onConfirm: () => { }, onCancel: () => { } });
+        setConfirmModal({
+          isOpen: false,
+          title: '',
+          message: '',
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
      },
      onCancel: () => {
-        setConfirmModal({ isOpen: false, title: '', message: '', onConfirm: () => { }, onCancel: () => { } });
-      }
+        setConfirmModal({
+          isOpen: false,
+          title: '',
+          message: '',
+          onConfirm: () => {},
+          onCancel: () => {},
+        });
+      },
    });
  };

@@ -2517,28 +3097,48 @@ const VideoSourceConfig = ({
              <div className='flex flex-wrap items-center gap-3 order-2 sm:order-1'>
                <span className='text-sm text-gray-600 dark:text-gray-400'>
                  <span className='sm:hidden'>已选 {selectedSources.size}</span>
-                  <span className='hidden sm:inline'>已选择 {selectedSources.size} 个视频源</span>
+                  <span className='hidden sm:inline'>
+                    已选择 {selectedSources.size} 个视频源
+                  </span>
                </span>
                <button
                  onClick={() => handleBatchOperation('batch_enable')}
                  disabled={isLoading('batchSource_batch_enable')}
-                  className={`px-3 py-1 text-sm ${isLoading('batchSource_batch_enable') ? buttonStyles.disabled : buttonStyles.success}`}
+                  className={`px-3 py-1 text-sm ${
+                    isLoading('batchSource_batch_enable')
+                      ? buttonStyles.disabled
+                      : buttonStyles.success
+                  }`}
                >
-                  {isLoading('batchSource_batch_enable') ? '启用中...' : '批量启用'}
+                  {isLoading('batchSource_batch_enable')
+                    ? '启用中...'
+                    : '批量启用'}
                </button>
                <button
                  onClick={() => handleBatchOperation('batch_disable')}
                  disabled={isLoading('batchSource_batch_disable')}
-                  className={`px-3 py-1 text-sm ${isLoading('batchSource_batch_disable') ? buttonStyles.disabled : buttonStyles.warning}`}
+                  className={`px-3 py-1 text-sm ${
+                    isLoading('batchSource_batch_disable')
+                      ? buttonStyles.disabled
+                      : buttonStyles.warning
+                  }`}
                >
-                  {isLoading('batchSource_batch_disable') ? '禁用中...' : '批量禁用'}
+                  {isLoading('batchSource_batch_disable')
+                    ? '禁用中...'
+                    : '批量禁用'}
                </button>
                <button
                  onClick={() => handleBatchOperation('batch_delete')}
                  disabled={isLoading('batchSource_batch_delete')}
-                  className={`px-3 py-1 text-sm ${isLoading('batchSource_batch_delete') ? buttonStyles.disabled : buttonStyles.danger}`}
+                  className={`px-3 py-1 text-sm ${
+                    isLoading('batchSource_batch_delete')
+                      ? buttonStyles.disabled
+                      : buttonStyles.danger
+                  }`}
                >
-                  {isLoading('batchSource_batch_delete') ? '删除中...' : '批量删除'}
+                  {isLoading('batchSource_batch_delete')
+                    ? '删除中...'
+                    : '批量删除'}
                </button>
              </div>
              <div className='hidden sm:block w-px h-6 bg-gray-300 dark:bg-gray-600 order-2'></div>
@@ -2548,10 +3148,9 @@ const VideoSourceConfig = ({
            <button
              onClick={() => setShowValidationModal(true)}
              disabled={isValidating}
-              className={`px-3 py-1 text-sm rounded-lg transition-colors flex items-center space-x-1 ${isValidating
-                ? buttonStyles.disabled
-                : buttonStyles.primary
-                }`}
+              className={`px-3 py-1 text-sm rounded-lg transition-colors flex items-center space-x-1 ${
+                isValidating ? buttonStyles.disabled : buttonStyles.primary
+              }`}
            >
              {isValidating ? (
                <>
@@ -2564,7 +3163,9 @@ const VideoSourceConfig = ({
            </button>
            <button
              onClick={() => setShowAddForm(!showAddForm)}
-              className={showAddForm ? buttonStyles.secondary : buttonStyles.success}
+              className={
+                showAddForm ? buttonStyles.secondary : buttonStyles.success
+              }
            >
              {showAddForm ? '取消' : '添加视频源'}
            </button>
@@ -2615,8 +3216,20 @@ const VideoSourceConfig = ({
          <div className='flex justify-end'>
            <button
              onClick={handleAddSource}
-              disabled={!newSource.name || !newSource.key || !newSource.api || isLoading('addSource')}
-              className={`w-full sm:w-auto px-4 py-2 ${!newSource.name || !newSource.key || !newSource.api || isLoading('addSource') ? buttonStyles.disabled : buttonStyles.success}`}
+              disabled={
+                !newSource.name ||
+                !newSource.key ||
+                !newSource.api ||
+                isLoading('addSource')
+              }
+              className={`w-full sm:w-auto px-4 py-2 ${
+                !newSource.name ||
+                !newSource.key ||
+                !newSource.api ||
+                isLoading('addSource')
+                  ? buttonStyles.disabled
+                  : buttonStyles.success
+              }`}
            >
              {isLoading('addSource') ? '添加中...' : '添加'}
            </button>
@@ -2624,10 +3237,11 @@ const VideoSourceConfig = ({
        </div>
      )}

-
-
      {/* 视频源表格 */}
-      <div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative' data-table="source-list">
+      <div
+        className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative'
+        data-table='source-list'
+      >
        <table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
          <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
            <tr>
@@ -2690,7 +3304,11 @@ const VideoSourceConfig = ({
          <button
            onClick={handleSaveOrder}
            disabled={isLoading('saveSourceOrder')}
-            className={`px-3 py-1.5 text-sm ${isLoading('saveSourceOrder') ? buttonStyles.disabled : buttonStyles.primary}`}
+            className={`px-3 py-1.5 text-sm ${
+              isLoading('saveSourceOrder')
+                ? buttonStyles.disabled
+                : buttonStyles.primary
+            }`}
          >
            {isLoading('saveSourceOrder') ? '保存中...' : '保存排序'}
          </button>
@@ -2698,44 +3316,57 @@ const VideoSourceConfig = ({
      )}

      {/* 有效性检测弹窗 */}
-      {showValidationModal && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50' onClick={() => setShowValidationModal(false)}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4' onClick={(e) => e.stopPropagation()}>
-            <h3 className='text-lg font-medium text-gray-900 dark:text-gray-100 mb-4'>
-              视频源有效性检测
-            </h3>
-            <p className='text-sm text-gray-600 dark:text-gray-400 mb-4'>
-              请输入检测用的搜索关键词
-            </p>
-            <div className='space-y-4'>
-              <input
-                type='text'
-                placeholder='请输入搜索关键词'
-                value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
-                className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
-                onKeyPress={(e) => e.key === 'Enter' && handleValidateSources()}
-              />
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => setShowValidationModal(false)}
-                  className='px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors'
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleValidateSources}
-                  disabled={!searchKeyword.trim()}
-                  className={`px-4 py-2 ${!searchKeyword.trim() ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  开始检测
-                </button>
+      {showValidationModal &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'
+            onClick={() => setShowValidationModal(false)}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <h3 className='text-lg font-medium text-gray-900 dark:text-gray-100 mb-4'>
+                视频源有效性检测
+              </h3>
+              <p className='text-sm text-gray-600 dark:text-gray-400 mb-4'>
+                请输入检测用的搜索关键词
+              </p>
+              <div className='space-y-4'>
+                <input
+                  type='text'
+                  placeholder='请输入搜索关键词'
+                  value={searchKeyword}
+                  onChange={(e) => setSearchKeyword(e.target.value)}
+                  className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
+                  onKeyPress={(e) =>
+                    e.key === 'Enter' && handleValidateSources()
+                  }
+                />
+                <div className='flex justify-end space-x-3'>
+                  <button
+                    onClick={() => setShowValidationModal(false)}
+                    className='px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors'
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={handleValidateSources}
+                    disabled={!searchKeyword.trim()}
+                    className={`px-4 py-2 ${
+                      !searchKeyword.trim()
+                        ? buttonStyles.disabled
+                        : buttonStyles.primary
+                    }`}
+                  >
+                    开始检测
+                  </button>
+                </div>
              </div>
            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          </div>,
+          document.body
+        )}

      {/* 通用弹窗组件 */}
      <AlertModal
@@ -2749,51 +3380,82 @@ const VideoSourceConfig = ({
      />

      {/* 批量操作确认弹窗 */}
-      {confirmModal.isOpen && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={confirmModal.onCancel}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-4'>
-                <h3 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
-                  {confirmModal.title}
-                </h3>
-                <button
-                  onClick={confirmModal.onCancel}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
+      {confirmModal.isOpen &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={confirmModal.onCancel}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-4'>
+                  <h3 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
+                    {confirmModal.title}
+                  </h3>
+                  <button
+                    onClick={confirmModal.onCancel}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-5 h-5'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
+                  </button>
+                </div>

-              <div className='mb-6'>
-                <p className='text-sm text-gray-600 dark:text-gray-400'>
-                  {confirmModal.message}
-                </p>
-              </div>
+                <div className='mb-6'>
+                  <p className='text-sm text-gray-600 dark:text-gray-400'>
+                    {confirmModal.message}
+                  </p>
+                </div>

-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={confirmModal.onCancel}
-                  className={`px-4 py-2 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={confirmModal.onConfirm}
-                  disabled={isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete')}
-                  className={`px-4 py-2 text-sm font-medium ${isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete') ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete') ? '操作中...' : '确认'}
-                </button>
+                {/* 操作按钮 */}
+                <div className='flex justify-end space-x-3'>
+                  <button
+                    onClick={confirmModal.onCancel}
+                    className={`px-4 py-2 text-sm font-medium ${buttonStyles.secondary}`}
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={confirmModal.onConfirm}
+                    disabled={
+                      isLoading('batchSource_batch_enable') ||
+                      isLoading('batchSource_batch_disable') ||
+                      isLoading('batchSource_batch_delete')
+                    }
+                    className={`px-4 py-2 text-sm font-medium ${
+                      isLoading('batchSource_batch_enable') ||
+                      isLoading('batchSource_batch_disable') ||
+                      isLoading('batchSource_batch_delete')
+                        ? buttonStyles.disabled
+                        : buttonStyles.primary
+                    }`}
+                  >
+                    {isLoading('batchSource_batch_enable') ||
+                    isLoading('batchSource_batch_disable') ||
+                    isLoading('batchSource_batch_delete')
+                      ? '操作中...'
+                      : '确认'}
+                  </button>
+                </div>
              </div>
            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          </div>,
+          document.body
+        )}
    </div>
  );
 };
@@ -2869,13 +3531,17 @@ const CategoryConfig = ({
    const target = categories.find((c) => c.query === query && c.type === type);
    if (!target) return;
    const action = target.disabled ? 'enable' : 'disable';
-    withLoading(`toggleCategory_${query}_${type}`, () => callCategoryApi({ action, query, type })).catch(() => {
+    withLoading(`toggleCategory_${query}_${type}`, () =>
+      callCategoryApi({ action, query, type })
+    ).catch(() => {
      console.error('操作失败', action, query, type);
    });
  };

  const handleDelete = (query: string, type: 'movie' | 'tv') => {
-    withLoading(`deleteCategory_${query}_${type}`, () => callCategoryApi({ action: 'delete', query, type })).catch(() => {
+    withLoading(`deleteCategory_${query}_${type}`, () =>
+      callCategoryApi({ action: 'delete', query, type })
+    ).catch(() => {
      console.error('操作失败', 'delete', query, type);
    });
  };
@@ -2917,7 +3583,9 @@ const CategoryConfig = ({

  const handleSaveOrder = () => {
    const order = categories.map((c) => `${c.query}:${c.type}`);
-    withLoading('saveCategoryOrder', () => callCategoryApi({ action: 'sort', order }))
+    withLoading('saveCategoryOrder', () =>
+      callCategoryApi({ action: 'sort', order })
+    )
      .then(() => {
        setOrderChanged(false);
      })
@@ -2943,7 +3611,7 @@ const CategoryConfig = ({
        className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors select-none'
      >
        <td
-          className="px-2 py-4 cursor-grab text-gray-400"
+          className='px-2 py-4 cursor-grab text-gray-400'
          style={{ touchAction: 'none' }}
          {...{ ...attributes, ...listeners }}
        >
@@ -2954,10 +3622,11 @@ const CategoryConfig = ({
        </td>
        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
          <span
-            className={`px-2 py-1 text-xs rounded-full ${category.type === 'movie'
-              ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
-              : 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300'
-              }`}
+            className={`px-2 py-1 text-xs rounded-full ${
+              category.type === 'movie'
+                ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
+                : 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300'
+            }`}
          >
            {category.type === 'movie' ? '电影' : '电视剧'}
          </span>
@@ -2970,32 +3639,44 @@ const CategoryConfig = ({
        </td>
        <td className='px-6 py-4 whitespace-nowrap max-w-[1rem]'>
          <span
-            className={`px-2 py-1 text-xs rounded-full ${!category.disabled
-              ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
-              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-              }`}
+            className={`px-2 py-1 text-xs rounded-full ${
+              !category.disabled
+                ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
+                : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
+            }`}
          >
            {!category.disabled ? '启用中' : '已禁用'}
          </span>
        </td>
        <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
          <button
-            onClick={() =>
-              handleToggleEnable(category.query, category.type)
-            }
-            disabled={isLoading(`toggleCategory_${category.query}_${category.type}`)}
-            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!category.disabled
-              ? buttonStyles.roundedDanger
-              : buttonStyles.roundedSuccess
-              } transition-colors ${isLoading(`toggleCategory_${category.query}_${category.type}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+            onClick={() => handleToggleEnable(category.query, category.type)}
+            disabled={isLoading(
+              `toggleCategory_${category.query}_${category.type}`
+            )}
+            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${
+              !category.disabled
+                ? buttonStyles.roundedDanger
+                : buttonStyles.roundedSuccess
+            } transition-colors ${
+              isLoading(`toggleCategory_${category.query}_${category.type}`)
+                ? 'opacity-50 cursor-not-allowed'
+                : ''
+            }`}
          >
            {!category.disabled ? '禁用' : '启用'}
          </button>
          {category.from !== 'config' && (
            <button
              onClick={() => handleDelete(category.query, category.type)}
-              disabled={isLoading(`deleteCategory_${category.query}_${category.type}`)}
-              className={`${buttonStyles.roundedSecondary} ${isLoading(`deleteCategory_${category.query}_${category.type}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+              disabled={isLoading(
+                `deleteCategory_${category.query}_${category.type}`
+              )}
+              className={`${buttonStyles.roundedSecondary} ${
+                isLoading(`deleteCategory_${category.query}_${category.type}`)
+                  ? 'opacity-50 cursor-not-allowed'
+                  : ''
+              }`}
            >
              删除
            </button>
@@ -3022,7 +3703,9 @@ const CategoryConfig = ({
        </h4>
        <button
          onClick={() => setShowAddForm(!showAddForm)}
-          className={`px-3 py-1 text-sm rounded-lg transition-colors ${showAddForm ? buttonStyles.secondary : buttonStyles.success}`}
+          className={`px-3 py-1 text-sm rounded-lg transition-colors ${
+            showAddForm ? buttonStyles.secondary : buttonStyles.success
+          }`}
        >
          {showAddForm ? '取消' : '添加分类'}
        </button>
@@ -3066,8 +3749,18 @@ const CategoryConfig = ({
          <div className='flex justify-end'>
            <button
              onClick={handleAddCategory}
-              disabled={!newCategory.name || !newCategory.query || isLoading('addCategory')}
-              className={`w-full sm:w-auto px-4 py-2 ${!newCategory.name || !newCategory.query || isLoading('addCategory') ? buttonStyles.disabled : buttonStyles.success}`}
+              disabled={
+                !newCategory.name ||
+                !newCategory.query ||
+                isLoading('addCategory')
+              }
+              className={`w-full sm:w-auto px-4 py-2 ${
+                !newCategory.name ||
+                !newCategory.query ||
+                isLoading('addCategory')
+                  ? buttonStyles.disabled
+                  : buttonStyles.success
+              }`}
            >
              {isLoading('addCategory') ? '添加中...' : '添加'}
            </button>
@@ -3128,7 +3821,11 @@ const CategoryConfig = ({
          <button
            onClick={handleSaveOrder}
            disabled={isLoading('saveCategoryOrder')}
-            className={`px-3 py-1.5 text-sm ${isLoading('saveCategoryOrder') ? buttonStyles.disabled : buttonStyles.primary}`}
+            className={`px-3 py-1.5 text-sm ${
+              isLoading('saveCategoryOrder')
+                ? buttonStyles.disabled
+                : buttonStyles.primary
+            }`}
          >
            {isLoading('saveCategoryOrder') ? '保存中...' : '保存排序'}
          </button>
@@ -3150,7 +3847,13 @@ const CategoryConfig = ({
 };

 // 新增配置文件组件
-const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig | null; refreshConfig: () => Promise<void> }) => {
+const ConfigFileComponent = ({
+  config,
+  refreshConfig,
+}: {
+  config: AdminConfig | null;
+  refreshConfig: () => Promise<void>;
+}) => {
  const { alertModal, showAlert, hideAlert } = useAlertModal();
  const { isLoading, withLoading } = useLoadingState();
  const [configContent, setConfigContent] = useState('');
@@ -3158,8 +3861,6 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
  const [autoUpdate, setAutoUpdate] = useState(false);
  const [lastCheckTime, setLastCheckTime] = useState<string>('');

-
-
  useEffect(() => {
    if (config?.ConfigFile) {
      setConfigContent(config.ConfigFile);
@@ -3171,8 +3872,6 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
    }
  }, [config]);

-
-
  // 拉取订阅配置
  const handleFetchConfig = async () => {
    if (!subscriptionUrl.trim()) {
@@ -3211,7 +3910,9 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
  };

  // 处理文件上传
-  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
    const file = event.target.files?.[0];
    if (!file) return;

@@ -3224,7 +3925,7 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
    await withLoading('uploadConfig', async () => {
      try {
        const fileContent = await file.text();
-        
+
        // 验证JSON格式
        let parsedConfig;
        try {
@@ -3241,9 +3942,11 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
        }

        // 根据api字段进行去重
-        const existingConfig = configContent ? JSON.parse(configContent) : { api_site: {} };
+        const existingConfig = configContent
+          ? JSON.parse(configContent)
+          : { api_site: {} };
        const existingApis = new Set();
-        
+
        // 收集现有配置中的所有api
        Object.values(existingConfig.api_site || {}).forEach((site: any) => {
          if (site.api) {
@@ -3254,31 +3957,36 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
        // 合并新配置，去重处理
        const mergedApiSite = { ...existingConfig.api_site };
        let duplicateCount = 0;
-        
-        Object.entries(parsedConfig.api_site || {}).forEach(([key, site]: [string, any]) => {
-          if (site.api && existingApis.has(site.api)) {
-            duplicateCount++;
-            // 跳过重复的api
-            return;
+
+        Object.entries(parsedConfig.api_site || {}).forEach(
+          ([key, site]: [string, any]) => {
+            if (site.api && existingApis.has(site.api)) {
+              duplicateCount++;
+              // 跳过重复的api
+              return;
+            }
+            mergedApiSite[key] = site;
          }
-          mergedApiSite[key] = site;
-        });
+        );

        const mergedConfig = {
          ...parsedConfig,
-          api_site: mergedApiSite
+          api_site: mergedApiSite,
        };

        // 更新配置内容
        setConfigContent(JSON.stringify(mergedConfig, null, 2));
-        
-        const message = duplicateCount > 0 
-          ? `配置上传成功，跳过了 ${duplicateCount} 个重复的API`
-          : '配置上传成功';
-        showSuccess(message, showAlert);

+        const message =
+          duplicateCount > 0
+            ? `配置上传成功，跳过了 ${duplicateCount} 个重复的API`
+            : '配置上传成功';
+        showSuccess(message, showAlert);
      } catch (err) {
-        showError(err instanceof Error ? err.message : '文件上传失败', showAlert);
+        showError(
+          err instanceof Error ? err.message : '文件上传失败',
+          showAlert
+        );
        throw err;
      }
    });
@@ -3298,7 +4006,7 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
            configFile: configContent,
            subscriptionUrl,
            autoUpdate,
-            lastCheckTime: lastCheckTime || new Date().toISOString()
+            lastCheckTime: lastCheckTime || new Date().toISOString(),
          }),
        });

@@ -3316,8 +4024,6 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
    });
  };

-
-
  if (!config) {
    return (
      <div className='text-center text-gray-500 dark:text-gray-400'>
@@ -3335,7 +4041,10 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
            配置订阅
          </h3>
          <div className='text-sm text-gray-500 dark:text-gray-400 px-3 py-1.5 rounded-full'>
-            最后更新: {lastCheckTime ? new Date(lastCheckTime).toLocaleString('zh-CN') : '从未更新'}
+            最后更新:{' '}
+            {lastCheckTime
+              ? new Date(lastCheckTime).toLocaleString('zh-CN')
+              : '从未更新'}
          </div>
        </div>

@@ -3363,10 +4072,11 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
            <button
              onClick={handleFetchConfig}
              disabled={isLoading('fetchConfig') || !subscriptionUrl.trim()}
-              className={`w-full px-6 py-3 rounded-lg font-medium transition-all duration-200 ${isLoading('fetchConfig') || !subscriptionUrl.trim()
-                ? buttonStyles.disabled
-                : buttonStyles.success
-                }`}
+              className={`w-full px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+                isLoading('fetchConfig') || !subscriptionUrl.trim()
+                  ? buttonStyles.disabled
+                  : buttonStyles.success
+              }`}
            >
              {isLoading('fetchConfig') ? (
                <div className='flex items-center justify-center gap-2'>
@@ -3393,16 +4103,18 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
              type='button'
              onClick={() => setAutoUpdate(!autoUpdate)}
              disabled={false}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${autoUpdate
-                ? buttonStyles.toggleOn
-                : buttonStyles.toggleOff
-                }`}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
+                autoUpdate ? buttonStyles.toggleOn : buttonStyles.toggleOff
+              }`}
            >
              <span
-                className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${autoUpdate
-                  ? buttonStyles.toggleThumbOn
-                  : buttonStyles.toggleThumbOff
-                  }`}
+                className={`inline-block h-4 w-4 transform rounded-full ${
+                  buttonStyles.toggleThumb
+                } transition-transform ${
+                  autoUpdate
+                    ? buttonStyles.toggleThumbOn
+                    : buttonStyles.toggleThumbOff
+                }`}
              />
            </button>
          </div>
@@ -3420,7 +4132,8 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
            disabled={false}
            className='w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm leading-relaxed resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400 dark:hover:border-gray-500'
            style={{
-              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
+              fontFamily:
+                'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
            }}
            spellCheck={false}
            data-gramm={false}
@@ -3458,12 +4171,24 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
                {isLoading('uploadConfig') ? (
                  <>
                    <div className='w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin'></div>
-                    <span className='text-sm text-gray-600 dark:text-gray-400'>上传中...</span>
+                    <span className='text-sm text-gray-600 dark:text-gray-400'>
+                      上传中...
+                    </span>
                  </>
                ) : (
                  <>
-                    <svg className='w-5 h-5 text-gray-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12' />
+                    <svg
+                      className='w-5 h-5 text-gray-400'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12'
+                      />
                    </svg>
                    <span className='text-sm text-gray-600 dark:text-gray-400'>
                      点击选择JSON文件或拖拽到此处
@@ -3485,10 +4210,11 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
          <button
            onClick={handleSave}
            disabled={isLoading('saveConfig')}
-            className={`px-4 py-2 rounded-lg transition-colors ${isLoading('saveConfig')
-              ? buttonStyles.disabled
-              : buttonStyles.success
-              }`}
+            className={`px-4 py-2 rounded-lg transition-colors ${
+              isLoading('saveConfig')
+                ? buttonStyles.disabled
+                : buttonStyles.success
+            }`}
          >
            {isLoading('saveConfig') ? '保存中…' : '保存'}
          </button>
@@ -3510,7 +4236,13 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
 };

 // 新增站点配置组件
-const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig | null; refreshConfig: () => Promise<void> }) => {
+const SiteConfigComponent = ({
+  config,
+  refreshConfig,
+}: {
+  config: AdminConfig | null;
+  refreshConfig: () => Promise<void>;
+}) => {
  const { alertModal, showAlert, hideAlert } = useAlertModal();
  const { isLoading, withLoading } = useLoadingState();
  const [showEnableCommentsModal, setShowEnableCommentsModal] = useState(false);
@@ -3583,14 +4315,16 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
    if (config?.SiteConfig) {
      setSiteSettings({
        ...config.SiteConfig,
-        DoubanProxyType: config.SiteConfig.DoubanProxyType || 'cmliussss-cdn-tencent',
+        DoubanProxyType:
+          config.SiteConfig.DoubanProxyType || 'cmliussss-cdn-tencent',
        DoubanProxy: config.SiteConfig.DoubanProxy || '',
        DoubanImageProxyType:
          config.SiteConfig.DoubanImageProxyType || 'cmliussss-cdn-tencent',
        DoubanImageProxy: config.SiteConfig.DoubanImageProxy || '',
        DisableYellowFilter: config.SiteConfig.DisableYellowFilter || false,
        FluidSearch: config.SiteConfig.FluidSearch || true,
-        DanmakuApiBase: config.SiteConfig.DanmakuApiBase || 'http://localhost:9321',
+        DanmakuApiBase:
+          config.SiteConfig.DanmakuApiBase || 'http://localhost:9321',
        DanmakuApiToken: config.SiteConfig.DanmakuApiToken || '87654321',
        EnableComments: config.SiteConfig.EnableComments || false,
      });
@@ -3707,9 +4441,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
    <div className='space-y-6'>
      {/* 站点名称 */}
      <div>
-        <label
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-        >
+        <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
          站点名称
        </label>
        <input
@@ -3718,15 +4450,13 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
          onChange={(e) =>
            setSiteSettings((prev) => ({ ...prev, SiteName: e.target.value }))
          }
-          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent"
+          className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
        />
      </div>

      {/* 站点公告 */}
      <div>
-        <label
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-        >
+        <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
          站点公告
        </label>
        <textarea
@@ -3738,16 +4468,14 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
            }))
          }
          rows={3}
-          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent"
+          className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent'
        />
      </div>

      {/* 豆瓣数据源设置 */}
      <div className='space-y-3'>
        <div>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
+          <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
            豆瓣数据代理
          </label>
          <div className='relative' data-dropdown='douban-datasource'>
@@ -3755,7 +4483,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
            <button
              type='button'
              onClick={() => setIsDoubanDropdownOpen(!isDoubanDropdownOpen)}
-              className="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left"
+              className='w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left'
            >
              {
                doubanDataSourceOptions.find(
@@ -3767,8 +4495,9 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
            {/* 下拉箭头 */}
            <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
              <ChevronDown
-                className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${isDoubanDropdownOpen ? 'rotate-180' : ''
-                  }`}
+                className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${
+                  isDoubanDropdownOpen ? 'rotate-180' : ''
+                }`}
              />
            </div>

@@ -3783,10 +4512,11 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                      handleDoubanDataSourceChange(option.value);
                      setIsDoubanDropdownOpen(false);
                    }}
-                    className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${siteSettings.DoubanProxyType === option.value
-                      ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400'
-                      : 'text-gray-900 dark:text-gray-100'
-                      }`}
+                    className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${
+                      siteSettings.DoubanProxyType === option.value
+                        ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400'
+                        : 'text-gray-900 dark:text-gray-100'
+                    }`}
                  >
                    <span className='truncate'>{option.label}</span>
                    {siteSettings.DoubanProxyType === option.value && (
@@ -3826,9 +4556,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
        {/* 豆瓣代理地址设置 - 仅在选择自定义代理时显示 */}
        {siteSettings.DoubanProxyType === 'custom' && (
          <div>
-            <label
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            >
+            <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
              豆瓣代理地址
            </label>
            <input
@@ -3841,7 +4569,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                  DoubanProxy: e.target.value,
                }))
              }
-              className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500"
+              className='w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500'
            />
            <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
              自定义代理服务器地址
@@ -3853,9 +4581,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
      {/* 豆瓣图片代理设置 */}
      <div className='space-y-3'>
        <div>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
+          <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
            豆瓣图片代理
          </label>
          <div className='relative' data-dropdown='douban-image-proxy'>
@@ -3867,7 +4593,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                  !isDoubanImageProxyDropdownOpen
                )
              }
-              className="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left"
+              className='w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left'
            >
              {
                doubanImageProxyTypeOptions.find(
@@ -3879,8 +4605,9 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
            {/* 下拉箭头 */}
            <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
              <ChevronDown
-                className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${isDoubanImageProxyDropdownOpen ? 'rotate-180' : ''
-                  }`}
+                className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${
+                  isDoubanImageProxyDropdownOpen ? 'rotate-180' : ''
+                }`}
              />
            </div>

@@ -3895,10 +4622,11 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                      handleDoubanImageProxyChange(option.value);
                      setIsDoubanImageProxyDropdownOpen(false);
                    }}
-                    className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${siteSettings.DoubanImageProxyType === option.value
-                      ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400'
-                      : 'text-gray-900 dark:text-gray-100'
-                      }`}
+                    className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${
+                      siteSettings.DoubanImageProxyType === option.value
+                        ? 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400'
+                        : 'text-gray-900 dark:text-gray-100'
+                    }`}
                  >
                    <span className='truncate'>{option.label}</span>
                    {siteSettings.DoubanImageProxyType === option.value && (
@@ -3938,9 +4666,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
        {/* 豆瓣代理地址设置 - 仅在选择自定义代理时显示 */}
        {siteSettings.DoubanImageProxyType === 'custom' && (
          <div>
-            <label
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            >
+            <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
              豆瓣图片代理地址
            </label>
            <input
@@ -3953,7 +4679,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                  DoubanImageProxy: e.target.value,
                }))
              }
-              className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500"
+              className='w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500'
            />
            <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
              自定义图片代理服务器地址
@@ -4003,9 +4729,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
      {/* 禁用黄色过滤器 */}
      <div>
        <div className='flex items-center justify-between'>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
+          <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
            禁用黄色过滤器
          </label>
          <button
@@ -4016,16 +4740,20 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                DisableYellowFilter: !prev.DisableYellowFilter,
              }))
            }
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${siteSettings.DisableYellowFilter
-              ? buttonStyles.toggleOn
-              : buttonStyles.toggleOff
-              }`}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
+              siteSettings.DisableYellowFilter
+                ? buttonStyles.toggleOn
+                : buttonStyles.toggleOff
+            }`}
          >
            <span
-              className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${siteSettings.DisableYellowFilter
-                ? buttonStyles.toggleThumbOn
-                : buttonStyles.toggleThumbOff
-                }`}
+              className={`inline-block h-4 w-4 transform rounded-full ${
+                buttonStyles.toggleThumb
+              } transition-transform ${
+                siteSettings.DisableYellowFilter
+                  ? buttonStyles.toggleThumbOn
+                  : buttonStyles.toggleThumbOff
+              }`}
            />
          </button>
        </div>
@@ -4037,9 +4765,7 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
      {/* 流式搜索 */}
      <div>
        <div className='flex items-center justify-between'>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
+          <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
            启用流式搜索
          </label>
          <button
@@ -4050,16 +4776,20 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                FluidSearch: !prev.FluidSearch,
              }))
            }
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${siteSettings.FluidSearch
-              ? buttonStyles.toggleOn
-              : buttonStyles.toggleOff
-              }`}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
+              siteSettings.FluidSearch
+                ? buttonStyles.toggleOn
+                : buttonStyles.toggleOff
+            }`}
          >
            <span
-              className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${siteSettings.FluidSearch
-                ? buttonStyles.toggleThumbOn
-                : buttonStyles.toggleThumbOff
-                }`}
+              className={`inline-block h-4 w-4 transform rounded-full ${
+                buttonStyles.toggleThumb
+              } transition-transform ${
+                siteSettings.FluidSearch
+                  ? buttonStyles.toggleThumbOn
+                  : buttonStyles.toggleThumbOff
+              }`}
            />
          </button>
        </div>
@@ -4128,22 +4858,26 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
        {/* 开启评论 */}
        <div>
          <div className='flex items-center justify-between'>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
              开启评论
            </label>
            <button
              type='button'
              onClick={() => handleCommentsToggle(!siteSettings.EnableComments)}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${siteSettings.EnableComments
-                ? buttonStyles.toggleOn
-                : buttonStyles.toggleOff
-                }`}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
+                siteSettings.EnableComments
+                  ? buttonStyles.toggleOn
+                  : buttonStyles.toggleOff
+              }`}
            >
              <span
-                className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${siteSettings.EnableComments
-                  ? buttonStyles.toggleThumbOn
-                  : buttonStyles.toggleThumbOff
-                  }`}
+                className={`inline-block h-4 w-4 transform rounded-full ${
+                  buttonStyles.toggleThumb
+                } transition-transform ${
+                  siteSettings.EnableComments
+                    ? buttonStyles.toggleThumbOn
+                    : buttonStyles.toggleThumbOff
+                }`}
              />
            </button>
          </div>
@@ -4158,10 +4892,11 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
        <button
          onClick={handleSave}
          disabled={isLoading('saveSiteConfig')}
-          className={`px-4 py-2 ${isLoading('saveSiteConfig')
-            ? buttonStyles.disabled
-            : buttonStyles.success
-            } rounded-lg transition-colors`}
+          className={`px-4 py-2 ${
+            isLoading('saveSiteConfig')
+              ? buttonStyles.disabled
+              : buttonStyles.success
+          } rounded-lg transition-colors`}
        >
          {isLoading('saveSiteConfig') ? '保存中…' : '保存'}
        </button>
@@ -4179,58 +4914,317 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
      />

      {/* 开启评论确认弹窗 */}
-      {showEnableCommentsModal && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => setShowEnableCommentsModal(false)}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  开启评论功能
-                </h3>
-                <button
-                  onClick={() => setShowEnableCommentsModal(false)}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
+      {showEnableCommentsModal &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => setShowEnableCommentsModal(false)}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    开启评论功能
+                  </h3>
+                  <button
+                    onClick={() => setShowEnableCommentsModal(false)}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
+                    </svg>
+                  </button>
+                </div>

-              <div className='mb-6'>
-                <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <AlertTriangle className='w-5 h-5 text-yellow-600 dark:text-yellow-400' />
-                    <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
-                      重要提示
-                    </span>
+                <div className='mb-6'>
+                  <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
+                    <div className='flex items-center space-x-2 mb-2'>
+                      <AlertTriangle className='w-5 h-5 text-yellow-600 dark:text-yellow-400' />
+                      <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
+                        重要提示
+                      </span>
+                    </div>
+                    <p className='text-sm text-yellow-700 dark:text-yellow-400'>
+                      评论功能为逆向抓取豆瓣评论数据，此功能仅供学习，开启后请自行承担相关责任和风险。
+                    </p>
                  </div>
-                  <p className='text-sm text-yellow-700 dark:text-yellow-400'>
-                    评论功能为逆向抓取豆瓣评论数据，此功能仅供学习，开启后请自行承担相关责任和风险。
-                  </p>
+                </div>
+
+                {/* 操作按钮 */}
+                <div className='flex justify-end space-x-3'>
+                  <button
+                    onClick={() => setShowEnableCommentsModal(false)}
+                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={handleConfirmEnableComments}
+                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.primary}`}
+                  >
+                    我已知晓，确认开启
+                  </button>
                </div>
              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => setShowEnableCommentsModal(false)}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleConfirmEnableComments}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.primary}`}
-                >
-                  我已知晓，确认开启
-                </button>
-              </div>
            </div>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+// 自定义去广告配置组件
+const CustomAdFilterConfig = ({
+  config,
+  refreshConfig,
+}: {
+  config: AdminConfig | null;
+  refreshConfig: () => Promise<void>;
+}) => {
+  const { alertModal, showAlert, hideAlert } = useAlertModal();
+  const { isLoading, withLoading } = useLoadingState();
+  const [adFilterCode, setAdFilterCode] = useState('');
+
+  // 默认去广告代码
+  const defaultAdFilterCode = `function filterAdsFromM3U8(type: string, m3u8Content: string): string {
+  if (!m3u8Content) return '';
+
+  // 按行分割M3U8内容
+  const lines = m3u8Content.split('\\n');
+  const filteredLines = [];
+
+  let nextdelete = false;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // 只过滤#EXT-X-DISCONTINUITY标识
+    if (!line.includes('#EXT-X-DISCONTINUITY')) {
+      filteredLines.push(line);
+    }
+  }
+
+  return filteredLines.join('\\n');
+}`;
+
+  useEffect(() => {
+    // 从数据库配置读取自定义去广告代码
+    if (config?.SiteConfig?.CustomAdFilterCode) {
+      setAdFilterCode(config.SiteConfig.CustomAdFilterCode);
+    } else {
+      // 如果数据库没有保存的代码，使用默认代码
+      setAdFilterCode(defaultAdFilterCode);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
+  // 移除 TypeScript 类型注解，转换为纯 JavaScript
+  const removeTypeAnnotations = (code: string): string => {
+    return (
+      code
+        // 移除函数参数的类型注解：name: type
+        .replace(
+          /(\w+)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*([,)])/g,
+          '$1$3'
+        )
+        // 移除函数返回值类型注解：): type {
+        .replace(
+          /\)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*\{/g,
+          ') {'
+        )
+        // 移除变量声明的类型注解：const name: type =
+        .replace(
+          /(const|let|var)\s+(\w+)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*=/g,
+          '$1 $2 ='
+        )
+    );
+  };
+
+  // 保存自定义去广告代码
+  const handleSave = async () => {
+    await withLoading('saveAdFilterCode', async () => {
+      try {
+        // 验证代码语法
+        try {
+          // 移除类型注解后验证
+          const jsCode = removeTypeAnnotations(adFilterCode);
+          // 使用 Function 构造器验证代码是否可以解析
+          new Function(
+            'type',
+            'm3u8Content',
+            jsCode + '\nreturn filterAdsFromM3U8(type, m3u8Content);'
+          );
+        } catch (parseError) {
+          console.error('代码验证失败:', parseError);
+          showError(
+            '代码语法错误：' +
+              (parseError instanceof Error
+                ? parseError.message
+                : '请检查代码格式'),
+            showAlert
+          );
+          return;
+        }
+
+        // 更新配置到数据库
+        if (!config) {
+          showError('配置未加载', showAlert);
+          return;
+        }
+
+        // 准备更新的站点配置，包含自定义去广告代码
+        const updatedSiteConfig = {
+          ...config.SiteConfig,
+          CustomAdFilterCode: adFilterCode,
+          CustomAdFilterVersion: Date.now(), // 使用时间戳作为版本号
+        };
+
+        const response = await fetch('/api/admin/site', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(updatedSiteConfig),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || '保存配置失败');
+        }
+
+        // 刷新配置
+        await refreshConfig();
+
+        showSuccess('去广告代码保存成功，刷新后生效', showAlert);
+      } catch (err) {
+        showError(err instanceof Error ? err.message : '保存失败', showAlert);
+        throw err;
+      }
+    });
+  };
+
+  // 重置为默认代码
+  const handleReset = () => {
+    setAdFilterCode(defaultAdFilterCode);
+    showSuccess('已重置为默认代码', showAlert);
+  };
+
+  if (!config) {
+    return (
+      <div className='text-center text-gray-500 dark:text-gray-400'>
+        加载中...
+      </div>
+    );
+  }
+
+  return (
+    <div className='space-y-4'>
+      {/* 说明区域 */}
+      <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
+        <div className='flex items-center space-x-2 mb-2'>
+          <svg
+            className='w-5 h-5 text-blue-600 dark:text-blue-400'
+            fill='none'
+            stroke='currentColor'
+            viewBox='0 0 24 24'
+          >
+            <path
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth={2}
+              d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+            />
+          </svg>
+          <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
+            使用说明
+          </span>
+        </div>
+        <div className='text-sm text-blue-700 dark:text-blue-400 space-y-1'>
+          <p>• 此功能用于自定义 M3U8 播放列表的去广告逻辑</p>
+          <p>• 配置保存到数据库，对全平台所有用户生效</p>
+          <p>
+            • 客户端会自动缓存代码，只在版本更新时重新获取，不会频繁请求服务器
+          </p>
+          <p>
+            • 函数签名必须为:{' '}
+            <code className='bg-blue-100 dark:bg-blue-900/40 px-1 rounded'>
+              filterAdsFromM3U8(type, m3u8Content)
+            </code>
+          </p>
+          <p>• type 参数为视频源类型，m3u8Content 为播放列表内容</p>
+          <p>• 函数需要返回处理后的 M3U8 内容</p>
+          <p>• 支持 TypeScript 类型注解，保存时会自动转换为 JavaScript</p>
+        </div>
+      </div>
+
+      {/* 代码编辑区域 */}
+      <div className='space-y-3'>
+        <div className='flex items-center justify-between'>
+          <label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
+            自定义去广告代码
+          </label>
+          <button
+            onClick={handleReset}
+            className={`${buttonStyles.secondarySmall}`}
+          >
+            重置为默认
+          </button>
+        </div>
+        <div className='relative'>
+          <textarea
+            value={adFilterCode}
+            onChange={(e) => setAdFilterCode(e.target.value)}
+            rows={25}
+            placeholder='请输入自定义去广告代码...'
+            className='w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm leading-relaxed resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400 dark:hover:border-gray-500'
+            style={{
+              fontFamily:
+                'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+            }}
+            spellCheck={false}
+            data-gramm={false}
+          />
+        </div>
+
+        <div className='flex items-center justify-between'>
+          <div className='text-xs text-gray-500 dark:text-gray-400'>
+            修改后需保存才能生效，保存前会进行语法验证
          </div>
-        </div>,
-        document.body
-      )}
+          <button
+            onClick={handleSave}
+            disabled={isLoading('saveAdFilterCode')}
+            className={`px-4 py-2 rounded-lg transition-colors ${
+              isLoading('saveAdFilterCode')
+                ? buttonStyles.disabled
+                : buttonStyles.success
+            }`}
+          >
+            {isLoading('saveAdFilterCode') ? '保存中…' : '保存'}
+          </button>
+        </div>
+      </div>
+
+      {/* 通用弹窗组件 */}
+      <AlertModal
+        isOpen={alertModal.isOpen}
+        onClose={hideAlert}
+        type={alertModal.type}
+        title={alertModal.title}
+        message={alertModal.message}
+        timer={alertModal.timer}
+        showConfirm={alertModal.showConfirm}
+      />
    </div>
  );
 };
@@ -4247,7 +5241,8 @@ const LiveSourceConfig = ({
  const { isLoading, withLoading } = useLoadingState();
  const [liveSources, setLiveSources] = useState<LiveDataSource[]>([]);
  const [showAddForm, setShowAddForm] = useState(false);
-  const [editingLiveSource, setEditingLiveSource] = useState<LiveDataSource | null>(null);
+  const [editingLiveSource, setEditingLiveSource] =
+    useState<LiveDataSource | null>(null);
  const [orderChanged, setOrderChanged] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [newLiveSource, setNewLiveSource] = useState<LiveDataSource>({
@@ -4310,13 +5305,17 @@ const LiveSourceConfig = ({
    const target = liveSources.find((s) => s.key === key);
    if (!target) return;
    const action = target.disabled ? 'enable' : 'disable';
-    withLoading(`toggleLiveSource_${key}`, () => callLiveSourceApi({ action, key })).catch(() => {
+    withLoading(`toggleLiveSource_${key}`, () =>
+      callLiveSourceApi({ action, key })
+    ).catch(() => {
      console.error('操作失败', action, key);
    });
  };

  const handleDelete = (key: string) => {
-    withLoading(`deleteLiveSource_${key}`, () => callLiveSourceApi({ action: 'delete', key })).catch(() => {
+    withLoading(`deleteLiveSource_${key}`, () =>
+      callLiveSourceApi({ action: 'delete', key })
+    ).catch(() => {
      console.error('操作失败', 'delete', key);
    });
  };
@@ -4340,7 +5339,12 @@ const LiveSourceConfig = ({

        // 刷新成功后重新获取配置
        await refreshConfig();
-        showAlert({ type: 'success', title: '刷新成功', message: '直播源已刷新', timer: 2000 });
+        showAlert({
+          type: 'success',
+          title: '刷新成功',
+          message: '直播源已刷新',
+          timer: 2000,
+        });
      } catch (err) {
        showError(err instanceof Error ? err.message : '刷新失败', showAlert);
        throw err;
@@ -4377,7 +5381,8 @@ const LiveSourceConfig = ({
  };

  const handleEditLiveSource = () => {
-    if (!editingLiveSource || !editingLiveSource.name || !editingLiveSource.url) return;
+    if (!editingLiveSource || !editingLiveSource.name || !editingLiveSource.url)
+      return;
    withLoading('editLiveSource', async () => {
      await callLiveSourceApi({
        action: 'edit',
@@ -4408,7 +5413,9 @@ const LiveSourceConfig = ({

  const handleSaveOrder = () => {
    const order = liveSources.map((s) => s.key);
-    withLoading('saveLiveSourceOrder', () => callLiveSourceApi({ action: 'sort', order }))
+    withLoading('saveLiveSourceOrder', () =>
+      callLiveSourceApi({ action: 'sort', order })
+    )
      .then(() => {
        setOrderChanged(false);
      })
@@ -4466,14 +5473,17 @@ const LiveSourceConfig = ({
          {liveSource.ua || '-'}
        </td>
        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-center'>
-          {liveSource.channelNumber && liveSource.channelNumber > 0 ? liveSource.channelNumber : '-'}
+          {liveSource.channelNumber && liveSource.channelNumber > 0
+            ? liveSource.channelNumber
+            : '-'}
        </td>
        <td className='px-6 py-4 whitespace-nowrap max-w-[1rem]'>
          <span
-            className={`px-2 py-1 text-xs rounded-full ${!liveSource.disabled
-              ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
-              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-              }`}
+            className={`px-2 py-1 text-xs rounded-full ${
+              !liveSource.disabled
+                ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
+                : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
+            }`}
          >
            {!liveSource.disabled ? '启用中' : '已禁用'}
          </span>
@@ -4482,10 +5492,15 @@ const LiveSourceConfig = ({
          <button
            onClick={() => handleToggleEnable(liveSource.key)}
            disabled={isLoading(`toggleLiveSource_${liveSource.key}`)}
-            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!liveSource.disabled
-              ? buttonStyles.roundedDanger
-              : buttonStyles.roundedSuccess
-              } transition-colors ${isLoading(`toggleLiveSource_${liveSource.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${
+              !liveSource.disabled
+                ? buttonStyles.roundedDanger
+                : buttonStyles.roundedSuccess
+            } transition-colors ${
+              isLoading(`toggleLiveSource_${liveSource.key}`)
+                ? 'opacity-50 cursor-not-allowed'
+                : ''
+            }`}
          >
            {!liveSource.disabled ? '禁用' : '启用'}
          </button>
@@ -4494,14 +5509,22 @@ const LiveSourceConfig = ({
              <button
                onClick={() => setEditingLiveSource(liveSource)}
                disabled={isLoading(`editLiveSource_${liveSource.key}`)}
-                className={`${buttonStyles.roundedPrimary} ${isLoading(`editLiveSource_${liveSource.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                className={`${buttonStyles.roundedPrimary} ${
+                  isLoading(`editLiveSource_${liveSource.key}`)
+                    ? 'opacity-50 cursor-not-allowed'
+                    : ''
+                }`}
              >
                编辑
              </button>
              <button
                onClick={() => handleDelete(liveSource.key)}
                disabled={isLoading(`deleteLiveSource_${liveSource.key}`)}
-                className={`${buttonStyles.roundedSecondary} ${isLoading(`deleteLiveSource_${liveSource.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                className={`${buttonStyles.roundedSecondary} ${
+                  isLoading(`deleteLiveSource_${liveSource.key}`)
+                    ? 'opacity-50 cursor-not-allowed'
+                    : ''
+                }`}
              >
                删除
              </button>
@@ -4531,16 +5554,23 @@ const LiveSourceConfig = ({
          <button
            onClick={handleRefreshLiveSources}
            disabled={isRefreshing || isLoading('refreshLiveSources')}
-            className={`px-3 py-1.5 text-sm font-medium flex items-center space-x-2 ${isRefreshing || isLoading('refreshLiveSources')
-              ? 'bg-gray-400 dark:bg-gray-600 cursor-not-allowed text-white rounded-lg'
-              : 'bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-lg transition-colors'
-              }`}
+            className={`px-3 py-1.5 text-sm font-medium flex items-center space-x-2 ${
+              isRefreshing || isLoading('refreshLiveSources')
+                ? 'bg-gray-400 dark:bg-gray-600 cursor-not-allowed text-white rounded-lg'
+                : 'bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-lg transition-colors'
+            }`}
          >
-            <span>{isRefreshing || isLoading('refreshLiveSources') ? '刷新中...' : '刷新直播源'}</span>
+            <span>
+              {isRefreshing || isLoading('refreshLiveSources')
+                ? '刷新中...'
+                : '刷新直播源'}
+            </span>
          </button>
          <button
            onClick={() => setShowAddForm(!showAddForm)}
-            className={showAddForm ? buttonStyles.secondary : buttonStyles.success}
+            className={
+              showAddForm ? buttonStyles.secondary : buttonStyles.success
+            }
          >
            {showAddForm ? '取消' : '添加直播源'}
          </button>
@@ -4595,13 +5625,24 @@ const LiveSourceConfig = ({
              }
              className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
            />
-
          </div>
          <div className='flex justify-end'>
            <button
              onClick={handleAddLiveSource}
-              disabled={!newLiveSource.name || !newLiveSource.key || !newLiveSource.url || isLoading('addLiveSource')}
-              className={`w-full sm:w-auto px-4 py-2 ${!newLiveSource.name || !newLiveSource.key || !newLiveSource.url || isLoading('addLiveSource') ? buttonStyles.disabled : buttonStyles.success}`}
+              disabled={
+                !newLiveSource.name ||
+                !newLiveSource.key ||
+                !newLiveSource.url ||
+                isLoading('addLiveSource')
+              }
+              className={`w-full sm:w-auto px-4 py-2 ${
+                !newLiveSource.name ||
+                !newLiveSource.key ||
+                !newLiveSource.url ||
+                isLoading('addLiveSource')
+                  ? buttonStyles.disabled
+                  : buttonStyles.success
+              }`}
            >
              {isLoading('addLiveSource') ? '添加中...' : '添加'}
            </button>
@@ -4632,7 +5673,9 @@ const LiveSourceConfig = ({
                type='text'
                value={editingLiveSource.name}
                onChange={(e) =>
-                  setEditingLiveSource((prev) => prev ? ({ ...prev, name: e.target.value }) : null)
+                  setEditingLiveSource((prev) =>
+                    prev ? { ...prev, name: e.target.value } : null
+                  )
                }
                className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
              />
@@ -4656,7 +5699,9 @@ const LiveSourceConfig = ({
                type='text'
                value={editingLiveSource.url}
                onChange={(e) =>
-                  setEditingLiveSource((prev) => prev ? ({ ...prev, url: e.target.value }) : null)
+                  setEditingLiveSource((prev) =>
+                    prev ? { ...prev, url: e.target.value } : null
+                  )
                }
                className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
              />
@@ -4669,7 +5714,9 @@ const LiveSourceConfig = ({
                type='text'
                value={editingLiveSource.epg}
                onChange={(e) =>
-                  setEditingLiveSource((prev) => prev ? ({ ...prev, epg: e.target.value }) : null)
+                  setEditingLiveSource((prev) =>
+                    prev ? { ...prev, epg: e.target.value } : null
+                  )
                }
                className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
              />
@@ -4682,7 +5729,9 @@ const LiveSourceConfig = ({
                type='text'
                value={editingLiveSource.ua}
                onChange={(e) =>
-                  setEditingLiveSource((prev) => prev ? ({ ...prev, ua: e.target.value }) : null)
+                  setEditingLiveSource((prev) =>
+                    prev ? { ...prev, ua: e.target.value } : null
+                  )
                }
                className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
              />
@@ -4697,8 +5746,18 @@ const LiveSourceConfig = ({
            </button>
            <button
              onClick={handleEditLiveSource}
-              disabled={!editingLiveSource.name || !editingLiveSource.url || isLoading('editLiveSource')}
-              className={`${!editingLiveSource.name || !editingLiveSource.url || isLoading('editLiveSource') ? buttonStyles.disabled : buttonStyles.success}`}
+              disabled={
+                !editingLiveSource.name ||
+                !editingLiveSource.url ||
+                isLoading('editLiveSource')
+              }
+              className={`${
+                !editingLiveSource.name ||
+                !editingLiveSource.url ||
+                isLoading('editLiveSource')
+                  ? buttonStyles.disabled
+                  : buttonStyles.success
+              }`}
            >
              {isLoading('editLiveSource') ? '保存中...' : '保存'}
            </button>
@@ -4707,7 +5766,10 @@ const LiveSourceConfig = ({
      )}

      {/* 直播源表格 */}
-      <div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative' data-table="live-source-list">
+      <div
+        className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative'
+        data-table='live-source-list'
+      >
        <table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
          <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
            <tr>
@@ -4765,7 +5827,11 @@ const LiveSourceConfig = ({
          <button
            onClick={handleSaveOrder}
            disabled={isLoading('saveLiveSourceOrder')}
-            className={`px-3 py-1.5 text-sm ${isLoading('saveLiveSourceOrder') ? buttonStyles.disabled : buttonStyles.primary}`}
+            className={`px-3 py-1.5 text-sm ${
+              isLoading('saveLiveSourceOrder')
+                ? buttonStyles.disabled
+                : buttonStyles.primary
+            }`}
          >
            {isLoading('saveLiveSourceOrder') ? '保存中...' : '保存排序'}
          </button>
@@ -4782,8 +5848,6 @@ const LiveSourceConfig = ({
        timer={alertModal.timer}
        showConfirm={alertModal.showConfirm}
      />
-
-
    </div>
  );
 };
@@ -4804,6 +5868,7 @@ function AdminPageClient() {
    categoryConfig: false,
    configFile: false,
    dataMigration: false,
+    customAdFilter: false,
  });

  // 获取管理员配置
@@ -4929,7 +5994,10 @@ function AdminPageClient() {
              isExpanded={expandedTabs.configFile}
              onToggle={() => toggleTab('configFile')}
            >
-              <ConfigFileComponent config={config} refreshConfig={fetchConfig} />
+              <ConfigFileComponent
+                config={config}
+                refreshConfig={fetchConfig}
+              />
            </CollapsibleTab>
          )}

@@ -5004,6 +6072,34 @@ function AdminPageClient() {
              <CategoryConfig config={config} refreshConfig={fetchConfig} />
            </CollapsibleTab>

+            {/* 自定义去广告标签 */}
+            <CollapsibleTab
+              title='自定义去广告'
+              icon={
+                <svg
+                  width='20'
+                  height='20'
+                  viewBox='0 0 24 24'
+                  fill='none'
+                  stroke='currentColor'
+                  strokeWidth='2'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  className='text-gray-600 dark:text-gray-400'
+                >
+                  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z' />
+                  <path d='M8 12h8' />
+                </svg>
+              }
+              isExpanded={expandedTabs.customAdFilter}
+              onToggle={() => toggleTab('customAdFilter')}
+            >
+              <CustomAdFilterConfig
+                config={config}
+                refreshConfig={fetchConfig}
+              />
+            </CollapsibleTab>
+
            {/* 数据迁移标签 - 仅站长可见 */}
            {role === 'owner' && (
              <CollapsibleTab
@@ -5036,61 +6132,92 @@ function AdminPageClient() {
      />

      {/* 重置配置确认弹窗 */}
-      {showResetConfigModal && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => setShowResetConfigModal(false)}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  确认重置配置
-                </h3>
-                <button
-                  onClick={() => setShowResetConfigModal(false)}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-yellow-600 dark:text-yellow-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
+      {showResetConfigModal &&
+        createPortal(
+          <div
+            className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
+            onClick={() => setShowResetConfigModal(false)}
+          >
+            <div
+              className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className='p-6'>
+                <div className='flex items-center justify-between mb-6'>
+                  <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
+                    确认重置配置
+                  </h3>
+                  <button
+                    onClick={() => setShowResetConfigModal(false)}
+                    className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
+                  >
+                    <svg
+                      className='w-6 h-6'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth={2}
+                        d='M6 18L18 6M6 6l12 12'
+                      />
                    </svg>
-                    <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
-                      ⚠️ 危险操作警告
-                    </span>
+                  </button>
+                </div>
+
+                <div className='mb-6'>
+                  <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4'>
+                    <div className='flex items-center space-x-2 mb-2'>
+                      <svg
+                        className='w-5 h-5 text-yellow-600 dark:text-yellow-400'
+                        fill='none'
+                        stroke='currentColor'
+                        viewBox='0 0 24 24'
+                      >
+                        <path
+                          strokeLinecap='round'
+                          strokeLinejoin='round'
+                          strokeWidth={2}
+                          d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+                        />
+                      </svg>
+                      <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
+                        ⚠️ 危险操作警告
+                      </span>
+                    </div>
+                    <p className='text-sm text-yellow-700 dark:text-yellow-400'>
+                      此操作将重置用户封禁和管理员设置、自定义视频源，站点配置将重置为默认值，是否继续？
+                    </p>
                  </div>
-                  <p className='text-sm text-yellow-700 dark:text-yellow-400'>
-                    此操作将重置用户封禁和管理员设置、自定义视频源，站点配置将重置为默认值，是否继续？
-                  </p>
+                </div>
+
+                {/* 操作按钮 */}
+                <div className='flex justify-end space-x-3'>
+                  <button
+                    onClick={() => setShowResetConfigModal(false)}
+                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={handleConfirmResetConfig}
+                    disabled={isLoading('resetConfig')}
+                    className={`px-6 py-2.5 text-sm font-medium ${
+                      isLoading('resetConfig')
+                        ? buttonStyles.disabled
+                        : buttonStyles.danger
+                    }`}
+                  >
+                    {isLoading('resetConfig') ? '重置中...' : '确认重置'}
+                  </button>
                </div>
              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => setShowResetConfigModal(false)}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleConfirmResetConfig}
-                  disabled={isLoading('resetConfig')}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading('resetConfig') ? buttonStyles.disabled : buttonStyles.danger}`}
-                >
-                  {isLoading('resetConfig') ? '重置中...' : '确认重置'}
-                </button>
-              </div>
            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          </div>,
+          document.body
+        )}
    </PageLayout>
  );
 }
@@ -0,0 +1,28 @@
+import { NextResponse } from 'next/server';
+
+import { getConfig } from '@/lib/config';
+
+export const runtime = 'nodejs';
+
+/**
+ * GET /api/ad-filter
+ * 获取自定义去广告代码配置（公开接口，无需认证）
+ * 返回代码内容和版本号，客户端通过版本号判断是否需要更新缓存
+ */
+export async function GET() {
+  try {
+    const config = await getConfig();
+
+    // 返回自定义去广告代码和版本号
+    return NextResponse.json({
+      code: config.SiteConfig?.CustomAdFilterCode || '',
+      version: config.SiteConfig?.CustomAdFilterVersion || 0,
+    });
+  } catch (error) {
+    console.error('获取去广告代码配置失败:', error);
+    return NextResponse.json(
+      { error: '获取配置失败', details: (error as Error).message },
+      { status: 500 }
+    );
+  }
+}
@@ -42,6 +42,8 @@ export async function POST(request: NextRequest) {
      DanmakuApiBase,
      DanmakuApiToken,
      EnableComments,
+      CustomAdFilterCode,
+      CustomAdFilterVersion,
    } = body as {
      SiteName: string;
      Announcement: string;
@@ -56,6 +58,8 @@ export async function POST(request: NextRequest) {
      DanmakuApiBase: string;
      DanmakuApiToken: string;
      EnableComments: boolean;
+      CustomAdFilterCode?: string;
+      CustomAdFilterVersion?: number;
    };

    // 参数校验
@@ -72,7 +76,9 @@ export async function POST(request: NextRequest) {
      typeof FluidSearch !== 'boolean' ||
      typeof DanmakuApiBase !== 'string' ||
      typeof DanmakuApiToken !== 'string' ||
-      typeof EnableComments !== 'boolean'
+      typeof EnableComments !== 'boolean' ||
+      (CustomAdFilterCode !== undefined && typeof CustomAdFilterCode !== 'string') ||
+      (CustomAdFilterVersion !== undefined && typeof CustomAdFilterVersion !== 'number')
    ) {
      return NextResponse.json({ error: '参数格式错误' }, { status: 400 });
    }
@@ -105,6 +111,8 @@ export async function POST(request: NextRequest) {
      DanmakuApiBase,
      DanmakuApiToken,
      EnableComments,
+      CustomAdFilterCode,
+      CustomAdFilterVersion,
    };

    // 写入数据库
@@ -112,6 +112,57 @@ function PlayPageClient() {
    blockAdEnabledRef.current = blockAdEnabled;
  }, [blockAdEnabled]);

+  // 自定义去广告代码（从服务器获取并缓存）
+  const customAdFilterCodeRef = useRef<string>('');
+
+  // 初始化时获取自定义去广告代码
+  useEffect(() => {
+    const fetchAdFilterCode = async () => {
+      if (typeof window === 'undefined') return;
+
+      try {
+        // 先从 localStorage 获取缓存的代码，立即可用
+        const cachedCode = localStorage.getItem('custom_ad_filter_code_cache');
+        const cachedVersion = localStorage.getItem('custom_ad_filter_version_cache');
+
+        if (cachedCode) {
+          customAdFilterCodeRef.current = cachedCode;
+          console.log('使用缓存的去广告代码');
+        }
+
+        // 异步从服务器获取最新版本号，检查是否需要更新
+        const response = await fetch('/api/ad-filter');
+        if (!response.ok) {
+          console.warn('获取去广告代码配置失败，使用缓存');
+          return;
+        }
+
+        const { code, version } = await response.json();
+
+        // 如果版本号不一致或没有缓存，更新缓存
+        if (!cachedVersion || parseInt(cachedVersion) !== version) {
+          console.log('检测到去广告代码更新，更新本地缓存');
+          if (code) {
+            localStorage.setItem('custom_ad_filter_code_cache', code);
+            localStorage.setItem('custom_ad_filter_version_cache', version.toString());
+            customAdFilterCodeRef.current = code;
+          } else if (!cachedCode) {
+            // 如果服务器没有代码且本地也没有缓存，清空缓存
+            localStorage.removeItem('custom_ad_filter_code_cache');
+            localStorage.removeItem('custom_ad_filter_version_cache');
+          }
+        } else {
+          console.log('去广告代码已是最新版本');
+        }
+      } catch (error) {
+        console.error('获取去广告代码配置失败:', error);
+        // 失败时已经使用了缓存，无需额外处理
+      }
+    };
+
+    fetchAdFilterCode();
+  }, []);
+
  // Anime4K超分相关状态
  const [webGPUSupported, setWebGPUSupported] = useState<boolean>(false);
  const [anime4kEnabled, setAnime4kEnabled] = useState<boolean>(false);
@@ -1067,6 +1118,30 @@ function PlayPageClient() {
  };

  function filterAdsFromM3U8(type: string, m3u8Content: string): string {
+    // 尝试使用缓存的自定义去广告代码
+    if (customAdFilterCodeRef.current && customAdFilterCodeRef.current.trim()) {
+      try {
+        // 移除 TypeScript 类型注解，转换为纯 JavaScript
+        const jsCode = customAdFilterCodeRef.current
+          // 移除函数参数的类型注解：name: type
+          .replace(/(\w+)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*([,)])/g, '$1$3')
+          // 移除函数返回值类型注解：): type {
+          .replace(/\)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*\{/g, ') {')
+          // 移除变量声明的类型注解：const name: type =
+          .replace(/(const|let|var)\s+(\w+)\s*:\s*(string|number|boolean|any|void|never|unknown|object)\s*=/g, '$1 $2 =');
+
+        // 创建并执行自定义函数
+        const customFunction = new Function('type', 'm3u8Content',
+          jsCode + '\nreturn filterAdsFromM3U8(type, m3u8Content);'
+        );
+        return customFunction(type, m3u8Content);
+      } catch (err) {
+        console.error('执行自定义去广告代码失败，使用默认规则:', err);
+        // 如果自定义代码执行失败，继续使用默认规则
+      }
+    }
+
+    // 默认去广告规则
    if (!m3u8Content) return '';

    // 按行分割M3U8内容
@@ -21,6 +21,9 @@ export interface AdminConfig {
    DanmakuApiToken: string;
    // 评论功能开关
    EnableComments: boolean;
+    // 自定义去广告代码
+    CustomAdFilterCode?: string;
+    CustomAdFilterVersion?: number; // 代码版本号（时间戳）
  };
  UserConfig: {
    Users: {