first commit
This commit is contained in:
JohnsonRan
@@ -0,0 +1,2110 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any, no-console, @typescript-eslint/no-non-null-assertion */
|
||||
|
||||
'use client';
|
||||
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
PointerSensor,
|
||||
TouchSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
restrictToParentElement,
|
||||
restrictToVerticalAxis,
|
||||
} from '@dnd-kit/modifiers';
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import {
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
ExternalLink,
|
||||
FolderOpen,
|
||||
Settings,
|
||||
Users,
|
||||
Video,
|
||||
} from 'lucide-react';
|
||||
import { GripVertical } from 'lucide-react';
|
||||
import { Suspense, useCallback, useEffect, useState } from 'react';
|
||||
import Swal from 'sweetalert2';
|
||||
|
||||
import { AdminConfig, AdminConfigResult } from '@/lib/admin.types';
|
||||
import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
|
||||
|
||||
import PageLayout from '@/components/PageLayout';
|
||||
|
||||
// 统一弹窗方法（必须在首次使用前定义）
|
||||
const showError = (message: string) =>
|
||||
Swal.fire({ icon: 'error', title: '错误', text: message });
|
||||
|
||||
const showSuccess = (message: string) =>
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: '成功',
|
||||
text: message,
|
||||
timer: 2000,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
|
||||
// 新增站点配置类型
|
||||
interface SiteConfig {
|
||||
SiteName: string;
|
||||
Announcement: string;
|
||||
SearchDownstreamMaxPage: number;
|
||||
SiteInterfaceCacheTime: number;
|
||||
DoubanProxyType: string;
|
||||
DoubanProxy: string;
|
||||
DoubanImageProxyType: string;
|
||||
DoubanImageProxy: string;
|
||||
DisableYellowFilter: boolean;
|
||||
}
|
||||
|
||||
// 视频源数据类型
|
||||
interface DataSource {
|
||||
name: string;
|
||||
key: string;
|
||||
api: string;
|
||||
detail?: string;
|
||||
disabled?: boolean;
|
||||
from: 'config' | 'custom';
|
||||
}
|
||||
|
||||
// 自定义分类数据类型
|
||||
interface CustomCategory {
|
||||
name?: string;
|
||||
type: 'movie' | 'tv';
|
||||
query: string;
|
||||
disabled?: boolean;
|
||||
from: 'config' | 'custom';
|
||||
}
|
||||
|
||||
// 可折叠标签组件
|
||||
interface CollapsibleTabProps {
|
||||
title: string;
|
||||
icon?: React.ReactNode;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const CollapsibleTab = ({
|
||||
title,
|
||||
icon,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
children,
|
||||
}: CollapsibleTabProps) => {
|
||||
return (
|
||||
<div className='rounded-xl shadow-sm mb-4 overflow-hidden bg-white/80 backdrop-blur-md dark:bg-gray-800/50 dark:ring-1 dark:ring-gray-700'>
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className='w-full px-6 py-4 flex items-center justify-between bg-gray-50/70 dark:bg-gray-800/60 hover:bg-gray-100/80 dark:hover:bg-gray-700/60 transition-colors'
|
||||
>
|
||||
<div className='flex items-center gap-3'>
|
||||
{icon}
|
||||
<h3 className='text-lg font-medium text-gray-900 dark:text-gray-100'>
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className='text-gray-500 dark:text-gray-400'>
|
||||
{isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isExpanded && <div className='px-6 py-4'>{children}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 用户配置组件
|
||||
interface UserConfigProps {
|
||||
config: AdminConfig | null;
|
||||
role: 'owner' | 'admin' | null;
|
||||
refreshConfig: () => Promise<void>;
|
||||
}
|
||||
|
||||
const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
|
||||
const [userSettings, setUserSettings] = useState({
|
||||
enableRegistration: false,
|
||||
});
|
||||
const [showAddUserForm, setShowAddUserForm] = useState(false);
|
||||
const [showChangePasswordForm, setShowChangePasswordForm] = useState(false);
|
||||
const [newUser, setNewUser] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
const [changePasswordUser, setChangePasswordUser] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
// 当前登录用户名
|
||||
const currentUsername = getAuthInfoFromBrowserCookie()?.username || null;
|
||||
|
||||
// 检测存储类型是否为 upstash
|
||||
const isUpstashStorage =
|
||||
typeof window !== 'undefined' &&
|
||||
(window as any).RUNTIME_CONFIG?.STORAGE_TYPE === 'upstash';
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.UserConfig) {
|
||||
setUserSettings({
|
||||
enableRegistration: config.UserConfig.AllowRegister,
|
||||
});
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
// 切换允许注册设置
|
||||
const toggleAllowRegister = async (value: boolean) => {
|
||||
try {
|
||||
// 先更新本地 UI
|
||||
setUserSettings((prev) => ({ ...prev, enableRegistration: value }));
|
||||
|
||||
const res = await fetch('/api/admin/user', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
action: 'setAllowRegister',
|
||||
allowRegister: value,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `操作失败: ${res.status}`);
|
||||
}
|
||||
|
||||
await refreshConfig();
|
||||
} catch (err) {
|
||||
showError(err instanceof Error ? err.message : '操作失败');
|
||||
// revert toggle UI
|
||||
setUserSettings((prev) => ({ ...prev, enableRegistration: !value }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleBanUser = async (uname: string) => {
|
||||
await handleUserAction('ban', uname);
|
||||
};
|
||||
|
||||
const handleUnbanUser = async (uname: string) => {
|
||||
await handleUserAction('unban', uname);
|
||||
};
|
||||
|
||||
const handleSetAdmin = async (uname: string) => {
|
||||
await handleUserAction('setAdmin', uname);
|
||||
};
|
||||
|
||||
const handleRemoveAdmin = async (uname: string) => {
|
||||
await handleUserAction('cancelAdmin', uname);
|
||||
};
|
||||
|
||||
const handleAddUser = async () => {
|
||||
if (!newUser.username || !newUser.password) return;
|
||||
await handleUserAction('add', newUser.username, newUser.password);
|
||||
setNewUser({ username: '', password: '' });
|
||||
setShowAddUserForm(false);
|
||||
};
|
||||
|
||||
const handleChangePassword = async () => {
|
||||
if (!changePasswordUser.username || !changePasswordUser.password) return;
|
||||
await handleUserAction(
|
||||
'changePassword',
|
||||
changePasswordUser.username,
|
||||
changePasswordUser.password
|
||||
);
|
||||
setChangePasswordUser({ username: '', password: '' });
|
||||
setShowChangePasswordForm(false);
|
||||
};
|
||||
|
||||
const handleShowChangePasswordForm = (username: string) => {
|
||||
setChangePasswordUser({ username, password: '' });
|
||||
setShowChangePasswordForm(true);
|
||||
setShowAddUserForm(false); // 关闭添加用户表单
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (username: string) => {
|
||||
const { isConfirmed } = await Swal.fire({
|
||||
title: '确认删除用户',
|
||||
text: `删除用户 ${username} 将同时删除其搜索历史、播放记录和收藏夹，此操作不可恢复！`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确认删除',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonColor: '#dc2626',
|
||||
});
|
||||
|
||||
if (!isConfirmed) return;
|
||||
|
||||
await handleUserAction('deleteUser', username);
|
||||
};
|
||||
|
||||
// 通用请求函数
|
||||
const handleUserAction = async (
|
||||
action:
|
||||
| 'add'
|
||||
| 'ban'
|
||||
| 'unban'
|
||||
| 'setAdmin'
|
||||
| 'cancelAdmin'
|
||||
| 'changePassword'
|
||||
| 'deleteUser',
|
||||
targetUsername: string,
|
||||
targetPassword?: string
|
||||
) => {
|
||||
try {
|
||||
const res = await fetch('/api/admin/user', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
targetUsername,
|
||||
...(targetPassword ? { targetPassword } : {}),
|
||||
action,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `操作失败: ${res.status}`);
|
||||
}
|
||||
|
||||
// 成功后刷新配置（无需整页刷新）
|
||||
await refreshConfig();
|
||||
} catch (err) {
|
||||
showError(err instanceof Error ? err.message : '操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className='text-center text-gray-500 dark:text-gray-400'>
|
||||
加载中...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
{/* 用户统计 */}
|
||||
<div>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-3'>
|
||||
用户统计
|
||||
</h4>
|
||||
<div className='p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800'>
|
||||
<div className='text-2xl font-bold text-green-800 dark:text-green-300'>
|
||||
{config.UserConfig.Users.length}
|
||||
</div>
|
||||
<div className='text-sm text-green-600 dark:text-green-400'>
|
||||
总用户数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 注册设置 */}
|
||||
<div>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-3'>
|
||||
注册设置
|
||||
</h4>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label
|
||||
className={`text-gray-700 dark:text-gray-300 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
允许新用户注册
|
||||
{isUpstashStorage && (
|
||||
<span className='ml-2 text-xs text-gray-500 dark:text-gray-400'>
|
||||
(Upstash 环境下请通过环境变量修改)
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<button
|
||||
onClick={() =>
|
||||
!isUpstashStorage &&
|
||||
toggleAllowRegister(!userSettings.enableRegistration)
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
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 ${
|
||||
userSettings.enableRegistration
|
||||
? 'bg-green-600'
|
||||
: 'bg-gray-200 dark:bg-gray-700'
|
||||
} ${isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
userSettings.enableRegistration
|
||||
? 'translate-x-6'
|
||||
: 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用户列表 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between mb-3'>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
用户列表
|
||||
</h4>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowAddUserForm(!showAddUserForm);
|
||||
if (showChangePasswordForm) {
|
||||
setShowChangePasswordForm(false);
|
||||
setChangePasswordUser({ username: '', password: '' });
|
||||
}
|
||||
}}
|
||||
className='px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors'
|
||||
>
|
||||
{showAddUserForm ? '取消' : '添加用户'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 添加用户表单 */}
|
||||
{showAddUserForm && (
|
||||
<div className='mb-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700'>
|
||||
<div className='flex flex-col sm:flex-row gap-4 sm:gap-3'>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='用户名'
|
||||
value={newUser.username}
|
||||
onChange={(e) =>
|
||||
setNewUser((prev) => ({ ...prev, username: e.target.value }))
|
||||
}
|
||||
className='flex-1 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'
|
||||
/>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='密码'
|
||||
value={newUser.password}
|
||||
onChange={(e) =>
|
||||
setNewUser((prev) => ({ ...prev, password: e.target.value }))
|
||||
}
|
||||
className='flex-1 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'
|
||||
/>
|
||||
<button
|
||||
onClick={handleAddUser}
|
||||
disabled={!newUser.username || !newUser.password}
|
||||
className='w-full sm:w-auto px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded-lg transition-colors'
|
||||
>
|
||||
添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 修改密码表单 */}
|
||||
{showChangePasswordForm && (
|
||||
<div className='mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700'>
|
||||
<h5 className='text-sm font-medium text-blue-800 dark:text-blue-300 mb-3'>
|
||||
修改用户密码
|
||||
</h5>
|
||||
<div className='flex flex-col sm:flex-row gap-4 sm:gap-3'>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='用户名'
|
||||
value={changePasswordUser.username}
|
||||
disabled
|
||||
className='flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 cursor-not-allowed'
|
||||
/>
|
||||
<input
|
||||
type='password'
|
||||
placeholder='新密码'
|
||||
value={changePasswordUser.password}
|
||||
onChange={(e) =>
|
||||
setChangePasswordUser((prev) => ({
|
||||
...prev,
|
||||
password: e.target.value,
|
||||
}))
|
||||
}
|
||||
className='flex-1 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'
|
||||
/>
|
||||
<button
|
||||
onClick={handleChangePassword}
|
||||
disabled={!changePasswordUser.password}
|
||||
className='w-full sm:w-auto px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white rounded-lg transition-colors'
|
||||
>
|
||||
修改密码
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowChangePasswordForm(false);
|
||||
setChangePasswordUser({ username: '', password: '' });
|
||||
}}
|
||||
className='w-full sm:w-auto px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors'
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 用户列表 */}
|
||||
<div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto'>
|
||||
<table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
<thead className='bg-gray-50 dark:bg-gray-900'>
|
||||
<tr>
|
||||
<th
|
||||
scope='col'
|
||||
className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
|
||||
>
|
||||
用户名
|
||||
</th>
|
||||
<th
|
||||
scope='col'
|
||||
className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
|
||||
>
|
||||
角色
|
||||
</th>
|
||||
<th
|
||||
scope='col'
|
||||
className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
|
||||
>
|
||||
状态
|
||||
</th>
|
||||
<th
|
||||
scope='col'
|
||||
className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
|
||||
>
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{/* 按规则排序用户：自己 -> 站长(若非自己) -> 管理员 -> 其他 */}
|
||||
{(() => {
|
||||
const sortedUsers = [...config.UserConfig.Users].sort((a, b) => {
|
||||
type UserInfo = (typeof config.UserConfig.Users)[number];
|
||||
const priority = (u: UserInfo) => {
|
||||
if (u.username === currentUsername) return 0;
|
||||
if (u.role === 'owner') return 1;
|
||||
if (u.role === 'admin') return 2;
|
||||
return 3;
|
||||
};
|
||||
return priority(a) - priority(b);
|
||||
});
|
||||
return (
|
||||
<tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
{sortedUsers.map((user) => {
|
||||
// 修改密码权限：站长可修改管理员和普通用户密码，管理员可修改普通用户和自己的密码，但任何人都不能修改站长密码
|
||||
const canChangePassword =
|
||||
user.role !== 'owner' && // 不能修改站长密码
|
||||
(role === 'owner' || // 站长可以修改管理员和普通用户密码
|
||||
(role === 'admin' &&
|
||||
(user.role === 'user' ||
|
||||
user.username === currentUsername))); // 管理员可以修改普通用户和自己的密码
|
||||
|
||||
// 删除用户权限：站长可删除除自己外的所有用户，管理员仅可删除普通用户
|
||||
const canDeleteUser =
|
||||
user.username !== currentUsername &&
|
||||
(role === 'owner' || // 站长可以删除除自己外的所有用户
|
||||
(role === 'admin' && user.role === 'user')); // 管理员仅可删除普通用户
|
||||
|
||||
// 其他操作权限：不能操作自己，站长可操作所有用户，管理员可操作普通用户
|
||||
const canOperate =
|
||||
user.username !== currentUsername &&
|
||||
(role === 'owner' ||
|
||||
(role === 'admin' && user.role === 'user'));
|
||||
return (
|
||||
<tr
|
||||
key={user.username}
|
||||
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'>
|
||||
{user.username}
|
||||
</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'
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
{!user.banned ? '正常' : '已封禁'}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
|
||||
{/* 修改密码按钮 */}
|
||||
{canChangePassword && (
|
||||
<button
|
||||
onClick={() =>
|
||||
handleShowChangePasswordForm(user.username)
|
||||
}
|
||||
className='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'
|
||||
>
|
||||
修改密码
|
||||
</button>
|
||||
)}
|
||||
{canOperate && (
|
||||
<>
|
||||
{/* 其他操作按钮 */}
|
||||
{user.role === 'user' && (
|
||||
<button
|
||||
onClick={() => handleSetAdmin(user.username)}
|
||||
className='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'
|
||||
>
|
||||
设为管理
|
||||
</button>
|
||||
)}
|
||||
{user.role === 'admin' && (
|
||||
<button
|
||||
onClick={() =>
|
||||
handleRemoveAdmin(user.username)
|
||||
}
|
||||
className='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'
|
||||
>
|
||||
取消管理
|
||||
</button>
|
||||
)}
|
||||
{user.role !== 'owner' &&
|
||||
(!user.banned ? (
|
||||
<button
|
||||
onClick={() => handleBanUser(user.username)}
|
||||
className='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-300 transition-colors'
|
||||
>
|
||||
封禁
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() =>
|
||||
handleUnbanUser(user.username)
|
||||
}
|
||||
className='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-300 transition-colors'
|
||||
>
|
||||
解封
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{/* 删除用户按钮 - 放在最后，使用更明显的红色样式 */}
|
||||
{canDeleteUser && (
|
||||
<button
|
||||
onClick={() => handleDeleteUser(user.username)}
|
||||
className='inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 transition-colors'
|
||||
>
|
||||
删除用户
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
);
|
||||
})()}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 视频源配置组件
|
||||
const VideoSourceConfig = ({
|
||||
config,
|
||||
refreshConfig,
|
||||
}: {
|
||||
config: AdminConfig | null;
|
||||
refreshConfig: () => Promise<void>;
|
||||
}) => {
|
||||
const [sources, setSources] = useState<DataSource[]>([]);
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [orderChanged, setOrderChanged] = useState(false);
|
||||
const [newSource, setNewSource] = useState<DataSource>({
|
||||
name: '',
|
||||
key: '',
|
||||
api: '',
|
||||
detail: '',
|
||||
disabled: false,
|
||||
from: 'config',
|
||||
});
|
||||
|
||||
// dnd-kit 传感器
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 5, // 轻微位移即可触发
|
||||
},
|
||||
}),
|
||||
useSensor(TouchSensor, {
|
||||
activationConstraint: {
|
||||
delay: 150, // 长按 150ms 后触发，避免与滚动冲突
|
||||
tolerance: 5,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
if (config?.SourceConfig) {
|
||||
setSources(config.SourceConfig);
|
||||
// 进入时重置 orderChanged
|
||||
setOrderChanged(false);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
// 通用 API 请求
|
||||
const callSourceApi = async (body: Record<string, any>) => {
|
||||
try {
|
||||
const resp = await fetch('/api/admin/source', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ...body }),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
throw new Error(data.error || `操作失败: ${resp.status}`);
|
||||
}
|
||||
|
||||
// 成功后刷新配置
|
||||
await refreshConfig();
|
||||
} catch (err) {
|
||||
showError(err instanceof Error ? err.message : '操作失败');
|
||||
throw err; // 向上抛出方便调用处判断
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleEnable = (key: string) => {
|
||||
const target = sources.find((s) => s.key === key);
|
||||
if (!target) return;
|
||||
const action = target.disabled ? 'enable' : 'disable';
|
||||
callSourceApi({ action, key }).catch(() => {
|
||||
console.error('操作失败', action, key);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (key: string) => {
|
||||
callSourceApi({ action: 'delete', key }).catch(() => {
|
||||
console.error('操作失败', 'delete', key);
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddSource = () => {
|
||||
if (!newSource.name || !newSource.key || !newSource.api) return;
|
||||
callSourceApi({
|
||||
action: 'add',
|
||||
key: newSource.key,
|
||||
name: newSource.name,
|
||||
api: newSource.api,
|
||||
detail: newSource.detail,
|
||||
})
|
||||
.then(() => {
|
||||
setNewSource({
|
||||
name: '',
|
||||
key: '',
|
||||
api: '',
|
||||
detail: '',
|
||||
disabled: false,
|
||||
from: 'custom',
|
||||
});
|
||||
setShowAddForm(false);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error('操作失败', 'add', newSource);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: any) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const oldIndex = sources.findIndex((s) => s.key === active.id);
|
||||
const newIndex = sources.findIndex((s) => s.key === over.id);
|
||||
setSources((prev) => arrayMove(prev, oldIndex, newIndex));
|
||||
setOrderChanged(true);
|
||||
};
|
||||
|
||||
const handleSaveOrder = () => {
|
||||
const order = sources.map((s) => s.key);
|
||||
callSourceApi({ action: 'sort', order })
|
||||
.then(() => {
|
||||
setOrderChanged(false);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error('操作失败', 'sort', order);
|
||||
});
|
||||
};
|
||||
|
||||
// 可拖拽行封装 (dnd-kit)
|
||||
const DraggableRow = ({ source }: { source: DataSource }) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition } =
|
||||
useSortable({ id: source.key });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
} as React.CSSProperties;
|
||||
|
||||
return (
|
||||
<tr
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
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'
|
||||
style={{ touchAction: 'none' }}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<GripVertical size={16} />
|
||||
</td>
|
||||
<td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
|
||||
{source.name}
|
||||
</td>
|
||||
<td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
|
||||
{source.key}
|
||||
</td>
|
||||
<td
|
||||
className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[12rem] truncate'
|
||||
title={source.api}
|
||||
>
|
||||
{source.api}
|
||||
</td>
|
||||
<td
|
||||
className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[8rem] truncate'
|
||||
title={source.detail || '-'}
|
||||
>
|
||||
{source.detail || '-'}
|
||||
</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'
|
||||
}`}
|
||||
>
|
||||
{!source.disabled ? '启用中' : '已禁用'}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
|
||||
<button
|
||||
onClick={() => handleToggleEnable(source.key)}
|
||||
className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${
|
||||
!source.disabled
|
||||
? 'bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-900/60'
|
||||
: 'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-900/60'
|
||||
} transition-colors`}
|
||||
>
|
||||
{!source.disabled ? '禁用' : '启用'}
|
||||
</button>
|
||||
{source.from !== 'config' && (
|
||||
<button
|
||||
onClick={() => handleDelete(source.key)}
|
||||
className='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'
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className='text-center text-gray-500 dark:text-gray-400'>
|
||||
加载中...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
{/* 添加视频源表单 */}
|
||||
<div className='flex items-center justify-between'>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
视频源列表
|
||||
</h4>
|
||||
<button
|
||||
onClick={() => setShowAddForm(!showAddForm)}
|
||||
className='px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors'
|
||||
>
|
||||
{showAddForm ? '取消' : '添加视频源'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showAddForm && (
|
||||
<div className='p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 space-y-4'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='名称'
|
||||
value={newSource.name}
|
||||
onChange={(e) =>
|
||||
setNewSource((prev) => ({ ...prev, name: 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'
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='Key'
|
||||
value={newSource.key}
|
||||
onChange={(e) =>
|
||||
setNewSource((prev) => ({ ...prev, key: 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'
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='API 地址'
|
||||
value={newSource.api}
|
||||
onChange={(e) =>
|
||||
setNewSource((prev) => ({ ...prev, api: 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'
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='Detail 地址（选填）'
|
||||
value={newSource.detail}
|
||||
onChange={(e) =>
|
||||
setNewSource((prev) => ({ ...prev, detail: 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'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-end'>
|
||||
<button
|
||||
onClick={handleAddSource}
|
||||
disabled={!newSource.name || !newSource.key || !newSource.api}
|
||||
className='w-full sm:w-auto px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded-lg transition-colors'
|
||||
>
|
||||
添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 视频源表格 */}
|
||||
<div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto'>
|
||||
<table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
<thead className='bg-gray-50 dark:bg-gray-900'>
|
||||
<tr>
|
||||
<th className='w-8' />
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
名称
|
||||
</th>
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
Key
|
||||
</th>
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
API 地址
|
||||
</th>
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
Detail 地址
|
||||
</th>
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
状态
|
||||
</th>
|
||||
<th className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
autoScroll={false}
|
||||
modifiers={[restrictToVerticalAxis, restrictToParentElement]}
|
||||
>
|
||||
<SortableContext
|
||||
items={sources.map((s) => s.key)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
{sources.map((source) => (
|
||||
<DraggableRow key={source.key} source={source} />
|
||||
))}
|
||||
</tbody>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 保存排序按钮 */}
|
||||
{orderChanged && (
|
||||
<div className='flex justify-end'>
|
||||
<button
|
||||
onClick={handleSaveOrder}
|
||||
className='px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors'
|
||||
>
|
||||
保存排序
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 分类配置组件
|
||||
const CategoryConfig = ({
|
||||
config,
|
||||
refreshConfig,
|
||||
}: {
|
||||
config: AdminConfig | null;
|
||||
refreshConfig: () => Promise<void>;
|
||||
}) => {
|
||||
const [categories, setCategories] = useState<CustomCategory[]>([]);
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [orderChanged, setOrderChanged] = useState(false);
|
||||
const [newCategory, setNewCategory] = useState<CustomCategory>({
|
||||
name: '',
|
||||
type: 'movie',
|
||||
query: '',
|
||||
disabled: false,
|
||||
from: 'config',
|
||||
});
|
||||
|
||||
// 检测存储类型是否为 upstash
|
||||
const isUpstashStorage =
|
||||
typeof window !== 'undefined' &&
|
||||
(window as any).RUNTIME_CONFIG?.STORAGE_TYPE === 'upstash';
|
||||
|
||||
// dnd-kit 传感器
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 5, // 轻微位移即可触发
|
||||
},
|
||||
}),
|
||||
useSensor(TouchSensor, {
|
||||
activationConstraint: {
|
||||
delay: 150, // 长按 150ms 后触发，避免与滚动冲突
|
||||
tolerance: 5,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
if (config?.CustomCategories) {
|
||||
setCategories(config.CustomCategories);
|
||||
// 进入时重置 orderChanged
|
||||
setOrderChanged(false);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
// 通用 API 请求
|
||||
const callCategoryApi = async (body: Record<string, any>) => {
|
||||
try {
|
||||
const resp = await fetch('/api/admin/category', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ...body }),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
throw new Error(data.error || `操作失败: ${resp.status}`);
|
||||
}
|
||||
|
||||
// 成功后刷新配置
|
||||
await refreshConfig();
|
||||
} catch (err) {
|
||||
showError(err instanceof Error ? err.message : '操作失败');
|
||||
throw err; // 向上抛出方便调用处判断
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleEnable = (query: string, type: 'movie' | 'tv') => {
|
||||
const target = categories.find((c) => c.query === query && c.type === type);
|
||||
if (!target) return;
|
||||
const action = target.disabled ? 'enable' : 'disable';
|
||||
callCategoryApi({ action, query, type }).catch(() => {
|
||||
console.error('操作失败', action, query, type);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (query: string, type: 'movie' | 'tv') => {
|
||||
callCategoryApi({ action: 'delete', query, type }).catch(() => {
|
||||
console.error('操作失败', 'delete', query, type);
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddCategory = () => {
|
||||
if (!newCategory.name || !newCategory.query) return;
|
||||
callCategoryApi({
|
||||
action: 'add',
|
||||
name: newCategory.name,
|
||||
type: newCategory.type,
|
||||
query: newCategory.query,
|
||||
})
|
||||
.then(() => {
|
||||
setNewCategory({
|
||||
name: '',
|
||||
type: 'movie',
|
||||
query: '',
|
||||
disabled: false,
|
||||
from: 'custom',
|
||||
});
|
||||
setShowAddForm(false);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error('操作失败', 'add', newCategory);
|
||||
});
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: any) => {
|
||||
if (isUpstashStorage) return;
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const oldIndex = categories.findIndex(
|
||||
(c) => `${c.query}:${c.type}` === active.id
|
||||
);
|
||||
const newIndex = categories.findIndex(
|
||||
(c) => `${c.query}:${c.type}` === over.id
|
||||
);
|
||||
setCategories((prev) => arrayMove(prev, oldIndex, newIndex));
|
||||
setOrderChanged(true);
|
||||
};
|
||||
|
||||
const handleSaveOrder = () => {
|
||||
const order = categories.map((c) => `${c.query}:${c.type}`);
|
||||
callCategoryApi({ action: 'sort', order })
|
||||
.then(() => {
|
||||
setOrderChanged(false);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error('操作失败', 'sort', order);
|
||||
});
|
||||
};
|
||||
|
||||
// 可拖拽行封装 (dnd-kit)
|
||||
const DraggableRow = ({ category }: { category: CustomCategory }) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition } =
|
||||
useSortable({ id: `${category.query}:${category.type}` });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
} as React.CSSProperties;
|
||||
|
||||
return (
|
||||
<tr
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors select-none'
|
||||
>
|
||||
<td
|
||||
className={`px-2 py-4 ${
|
||||
isUpstashStorage ? 'text-gray-200' : 'cursor-grab text-gray-400'
|
||||
}`}
|
||||
style={{ touchAction: 'none' }}
|
||||
{...(isUpstashStorage ? {} : { ...attributes, ...listeners })}
|
||||
>
|
||||
<GripVertical size={16} />
|
||||
</td>
|
||||
<td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
|
||||
{category.name || '-'}
|
||||
</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'
|
||||
}`}
|
||||
>
|
||||
{category.type === 'movie' ? '电影' : '电视剧'}
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[12rem] truncate'
|
||||
title={category.query}
|
||||
>
|
||||
{category.query}
|
||||
</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'
|
||||
}`}
|
||||
>
|
||||
{!category.disabled ? '启用中' : '已禁用'}
|
||||
</span>
|
||||
</td>
|
||||
<td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
|
||||
<button
|
||||
onClick={() =>
|
||||
!isUpstashStorage &&
|
||||
handleToggleEnable(category.query, category.type)
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${
|
||||
isUpstashStorage
|
||||
? 'bg-gray-400 cursor-not-allowed text-white'
|
||||
: !category.disabled
|
||||
? 'bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-900/60'
|
||||
: 'bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-900/60'
|
||||
} transition-colors`}
|
||||
>
|
||||
{!category.disabled ? '禁用' : '启用'}
|
||||
</button>
|
||||
{category.from !== 'config' && !isUpstashStorage && (
|
||||
<button
|
||||
onClick={() => handleDelete(category.query, category.type)}
|
||||
className='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'
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className='text-center text-gray-500 dark:text-gray-400'>
|
||||
加载中...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
{/* 添加分类表单 */}
|
||||
<div className='flex items-center justify-between'>
|
||||
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||||
自定义分类列表
|
||||
{isUpstashStorage && (
|
||||
<span className='ml-2 text-xs text-gray-500 dark:text-gray-400'>
|
||||
(Upstash 环境下请通过配置文件修改)
|
||||
</span>
|
||||
)}
|
||||
</h4>
|
||||
<button
|
||||
onClick={() => !isUpstashStorage && setShowAddForm(!showAddForm)}
|
||||
disabled={isUpstashStorage}
|
||||
className={`px-3 py-1 text-sm rounded-lg transition-colors ${
|
||||
isUpstashStorage
|
||||
? 'bg-gray-400 cursor-not-allowed text-white'
|
||||
: 'bg-green-600 hover:bg-green-700 text-white'
|
||||
}`}
|
||||
>
|
||||
{showAddForm ? '取消' : '添加分类'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showAddForm && !isUpstashStorage && (
|
||||
<div className='p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 space-y-4'>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='分类名称'
|
||||
value={newCategory.name}
|
||||
onChange={(e) =>
|
||||
setNewCategory((prev) => ({ ...prev, name: 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'
|
||||
/>
|
||||
<select
|
||||
value={newCategory.type}
|
||||
onChange={(e) =>
|
||||
setNewCategory((prev) => ({
|
||||
...prev,
|
||||
type: e.target.value as 'movie' | 'tv',
|
||||
}))
|
||||
}
|
||||
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'
|
||||
>
|
||||
<option value='movie'>电影</option>
|
||||
<option value='tv'>电视剧</option>
|
||||
</select>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='搜索关键词'
|
||||
value={newCategory.query}
|
||||
onChange={(e) =>
|
||||
setNewCategory((prev) => ({ ...prev, query: 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'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex justify-end'>
|
||||
<button
|
||||
onClick={handleAddCategory}
|
||||
disabled={!newCategory.name || !newCategory.query}
|
||||
className='w-full sm:w-auto px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white rounded-lg transition-colors'
|
||||
>
|
||||
添加
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分类表格 */}
|
||||
<div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto'>
|
||||
<table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
<thead className='bg-gray-50 dark:bg-gray-900'>
|
||||
<tr>
|
||||
<th className='w-8' />
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
分类名称
|
||||
</th>
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
类型
|
||||
</th>
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
搜索关键词
|
||||
</th>
|
||||
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
状态
|
||||
</th>
|
||||
<th className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<DndContext
|
||||
sensors={isUpstashStorage ? [] : sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
autoScroll={false}
|
||||
modifiers={[restrictToVerticalAxis, restrictToParentElement]}
|
||||
>
|
||||
<SortableContext
|
||||
items={categories.map((c) => `${c.query}:${c.type}`)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
{categories.map((category) => (
|
||||
<DraggableRow
|
||||
key={`${category.query}:${category.type}`}
|
||||
category={category}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 保存排序按钮 */}
|
||||
{orderChanged && !isUpstashStorage && (
|
||||
<div className='flex justify-end'>
|
||||
<button
|
||||
onClick={handleSaveOrder}
|
||||
className='px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors'
|
||||
>
|
||||
保存排序
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 新增站点配置组件
|
||||
const SiteConfigComponent = ({ config }: { config: AdminConfig | null }) => {
|
||||
const [siteSettings, setSiteSettings] = useState<SiteConfig>({
|
||||
SiteName: '',
|
||||
Announcement: '',
|
||||
SearchDownstreamMaxPage: 1,
|
||||
SiteInterfaceCacheTime: 7200,
|
||||
DoubanProxyType: 'direct',
|
||||
DoubanProxy: '',
|
||||
DoubanImageProxyType: 'direct',
|
||||
DoubanImageProxy: '',
|
||||
DisableYellowFilter: false,
|
||||
});
|
||||
// 保存状态
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// 豆瓣数据源相关状态
|
||||
const [isDoubanDropdownOpen, setIsDoubanDropdownOpen] = useState(false);
|
||||
const [isDoubanImageProxyDropdownOpen, setIsDoubanImageProxyDropdownOpen] =
|
||||
useState(false);
|
||||
|
||||
// 豆瓣数据源选项
|
||||
const doubanDataSourceOptions = [
|
||||
{ value: 'direct', label: '直连（服务器直接请求豆瓣）' },
|
||||
{ value: 'cors-proxy-zwei', label: 'Cors Proxy By Zwei' },
|
||||
{
|
||||
value: 'cmliussss-cdn-tencent',
|
||||
label: '豆瓣 CDN By CMLiussss（腾讯云）',
|
||||
},
|
||||
{ value: 'cmliussss-cdn-ali', label: '豆瓣 CDN By CMLiussss（阿里云）' },
|
||||
{ value: 'cors-anywhere', label: 'Cors Anywhere（20 qpm）' },
|
||||
{ value: 'custom', label: '自定义代理' },
|
||||
];
|
||||
|
||||
// 豆瓣图片代理选项
|
||||
const doubanImageProxyTypeOptions = [
|
||||
{ value: 'direct', label: '直连（浏览器直接请求豆瓣）' },
|
||||
{ value: 'server', label: '服务器代理（由服务器代理请求豆瓣）' },
|
||||
{ value: 'img3', label: '豆瓣精品 CDN（阿里云）' },
|
||||
{
|
||||
value: 'cmliussss-cdn-tencent',
|
||||
label: '豆瓣 CDN By CMLiussss（腾讯云）',
|
||||
},
|
||||
{ value: 'cmliussss-cdn-ali', label: '豆瓣 CDN By CMLiussss（阿里云）' },
|
||||
{ value: 'custom', label: '自定义代理' },
|
||||
];
|
||||
|
||||
// 获取感谢信息
|
||||
const getThanksInfo = (dataSource: string) => {
|
||||
switch (dataSource) {
|
||||
case 'cors-proxy-zwei':
|
||||
return {
|
||||
text: 'Thanks to @Zwei',
|
||||
url: 'https://github.com/bestzwei',
|
||||
};
|
||||
case 'cmliussss-cdn-tencent':
|
||||
case 'cmliussss-cdn-ali':
|
||||
return {
|
||||
text: 'Thanks to @CMLiussss',
|
||||
url: 'https://github.com/cmliu',
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// 检测存储类型是否为 upstash
|
||||
const isUpstashStorage =
|
||||
typeof window !== 'undefined' &&
|
||||
(window as any).RUNTIME_CONFIG?.STORAGE_TYPE === 'upstash';
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.SiteConfig) {
|
||||
setSiteSettings({
|
||||
...config.SiteConfig,
|
||||
DoubanProxyType: config.SiteConfig.DoubanProxyType || 'direct',
|
||||
DoubanProxy: config.SiteConfig.DoubanProxy || '',
|
||||
DoubanImageProxyType:
|
||||
config.SiteConfig.DoubanImageProxyType || 'direct',
|
||||
DoubanImageProxy: config.SiteConfig.DoubanImageProxy || '',
|
||||
DisableYellowFilter: config.SiteConfig.DisableYellowFilter || false,
|
||||
});
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
// 点击外部区域关闭下拉框
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (isDoubanDropdownOpen) {
|
||||
const target = event.target as Element;
|
||||
if (!target.closest('[data-dropdown="douban-datasource"]')) {
|
||||
setIsDoubanDropdownOpen(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isDoubanDropdownOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () =>
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
}, [isDoubanDropdownOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (isDoubanImageProxyDropdownOpen) {
|
||||
const target = event.target as Element;
|
||||
if (!target.closest('[data-dropdown="douban-image-proxy"]')) {
|
||||
setIsDoubanImageProxyDropdownOpen(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isDoubanImageProxyDropdownOpen) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () =>
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
}, [isDoubanImageProxyDropdownOpen]);
|
||||
|
||||
// 处理豆瓣数据源变化
|
||||
const handleDoubanDataSourceChange = (value: string) => {
|
||||
if (!isUpstashStorage) {
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
DoubanProxyType: value,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// 处理豆瓣图片代理变化
|
||||
const handleDoubanImageProxyChange = (value: string) => {
|
||||
if (!isUpstashStorage) {
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
DoubanImageProxyType: value,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// 保存站点配置
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
const resp = await fetch('/api/admin/site', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ...siteSettings }),
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
throw new Error(data.error || `保存失败: ${resp.status}`);
|
||||
}
|
||||
|
||||
showSuccess('保存成功, 请刷新页面');
|
||||
} catch (err) {
|
||||
showError(err instanceof Error ? err.message : '保存失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!config) {
|
||||
return (
|
||||
<div className='text-center text-gray-500 dark:text-gray-400'>
|
||||
加载中...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
{/* 站点名称 */}
|
||||
<div>
|
||||
<label
|
||||
className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
站点名称
|
||||
{isUpstashStorage && (
|
||||
<span className='ml-2 text-xs text-gray-500 dark:text-gray-400'>
|
||||
(Upstash 环境下请通过环境变量修改)
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
value={siteSettings.SiteName}
|
||||
onChange={(e) =>
|
||||
!isUpstashStorage &&
|
||||
setSiteSettings((prev) => ({ ...prev, SiteName: e.target.value }))
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
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 ${
|
||||
isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 站点公告 */}
|
||||
<div>
|
||||
<label
|
||||
className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
站点公告
|
||||
{isUpstashStorage && (
|
||||
<span className='ml-2 text-xs text-gray-500 dark:text-gray-400'>
|
||||
(Upstash 环境下请通过环境变量修改)
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<textarea
|
||||
value={siteSettings.Announcement}
|
||||
onChange={(e) =>
|
||||
!isUpstashStorage &&
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
Announcement: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
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 ${
|
||||
isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 豆瓣数据源设置 */}
|
||||
<div className='space-y-3'>
|
||||
<div>
|
||||
<label
|
||||
className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
豆瓣数据代理
|
||||
{isUpstashStorage && (
|
||||
<span className='ml-2 text-xs text-gray-500 dark:text-gray-400'>
|
||||
(Upstash 环境下请通过环境变量修改)
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<div className='relative' data-dropdown='douban-datasource'>
|
||||
{/* 自定义下拉选择框 */}
|
||||
<button
|
||||
type='button'
|
||||
onClick={() => setIsDoubanDropdownOpen(!isDoubanDropdownOpen)}
|
||||
disabled={isUpstashStorage}
|
||||
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 ${
|
||||
isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
{
|
||||
doubanDataSourceOptions.find(
|
||||
(option) => option.value === siteSettings.DoubanProxyType
|
||||
)?.label
|
||||
}
|
||||
</button>
|
||||
|
||||
{/* 下拉箭头 */}
|
||||
<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' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下拉选项列表 */}
|
||||
{isDoubanDropdownOpen && !isUpstashStorage && (
|
||||
<div className='absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto'>
|
||||
{doubanDataSourceOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type='button'
|
||||
onClick={() => {
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<span className='truncate'>{option.label}</span>
|
||||
{siteSettings.DoubanProxyType === option.value && (
|
||||
<Check className='w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0 ml-2' />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
选择获取豆瓣数据的方式
|
||||
</p>
|
||||
|
||||
{/* 感谢信息 */}
|
||||
{getThanksInfo(siteSettings.DoubanProxyType) && (
|
||||
<div className='mt-3'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
window.open(
|
||||
getThanksInfo(siteSettings.DoubanProxyType)!.url,
|
||||
'_blank'
|
||||
)
|
||||
}
|
||||
className='flex items-center justify-center gap-1.5 w-full px-3 text-xs text-gray-500 dark:text-gray-400 cursor-pointer'
|
||||
>
|
||||
<span className='font-medium'>
|
||||
{getThanksInfo(siteSettings.DoubanProxyType)!.text}
|
||||
</span>
|
||||
<ExternalLink className='w-3.5 opacity-70' />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 豆瓣代理地址设置 - 仅在选择自定义代理时显示 */}
|
||||
{siteSettings.DoubanProxyType === 'custom' && (
|
||||
<div>
|
||||
<label
|
||||
className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
豆瓣代理地址
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='例如: https://proxy.example.com/fetch?url='
|
||||
value={siteSettings.DoubanProxy}
|
||||
onChange={(e) =>
|
||||
!isUpstashStorage &&
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
DoubanProxy: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
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 ${
|
||||
isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
自定义代理服务器地址
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 豆瓣图片代理设置 */}
|
||||
<div className='space-y-3'>
|
||||
<div>
|
||||
<label
|
||||
className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
豆瓣图片代理
|
||||
{isUpstashStorage && (
|
||||
<span className='ml-2 text-xs text-gray-500 dark:text-gray-400'>
|
||||
(Upstash 环境下请通过环境变量修改)
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<div className='relative' data-dropdown='douban-image-proxy'>
|
||||
{/* 自定义下拉选择框 */}
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
setIsDoubanImageProxyDropdownOpen(
|
||||
!isDoubanImageProxyDropdownOpen
|
||||
)
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
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 ${
|
||||
isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
>
|
||||
{
|
||||
doubanImageProxyTypeOptions.find(
|
||||
(option) => option.value === siteSettings.DoubanImageProxyType
|
||||
)?.label
|
||||
}
|
||||
</button>
|
||||
|
||||
{/* 下拉箭头 */}
|
||||
<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' : ''
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 下拉选项列表 */}
|
||||
{isDoubanImageProxyDropdownOpen && !isUpstashStorage && (
|
||||
<div className='absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto'>
|
||||
{doubanImageProxyTypeOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type='button'
|
||||
onClick={() => {
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<span className='truncate'>{option.label}</span>
|
||||
{siteSettings.DoubanImageProxyType === option.value && (
|
||||
<Check className='w-4 h-4 text-green-600 dark:text-green-400 flex-shrink-0 ml-2' />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
选择获取豆瓣图片的方式
|
||||
</p>
|
||||
|
||||
{/* 感谢信息 */}
|
||||
{getThanksInfo(siteSettings.DoubanImageProxyType) && (
|
||||
<div className='mt-3'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
window.open(
|
||||
getThanksInfo(siteSettings.DoubanImageProxyType)!.url,
|
||||
'_blank'
|
||||
)
|
||||
}
|
||||
className='flex items-center justify-center gap-1.5 w-full px-3 text-xs text-gray-500 dark:text-gray-400 cursor-pointer'
|
||||
>
|
||||
<span className='font-medium'>
|
||||
{getThanksInfo(siteSettings.DoubanImageProxyType)!.text}
|
||||
</span>
|
||||
<ExternalLink className='w-3.5 opacity-70' />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 豆瓣代理地址设置 - 仅在选择自定义代理时显示 */}
|
||||
{siteSettings.DoubanImageProxyType === 'custom' && (
|
||||
<div>
|
||||
<label
|
||||
className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
豆瓣图片代理地址
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='例如: https://proxy.example.com/fetch?url='
|
||||
value={siteSettings.DoubanImageProxy}
|
||||
onChange={(e) =>
|
||||
!isUpstashStorage &&
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
DoubanImageProxy: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
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 ${
|
||||
isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''
|
||||
}`}
|
||||
/>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
自定义图片代理服务器地址
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 搜索接口可拉取最大页数 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
搜索接口可拉取最大页数
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
min={1}
|
||||
value={siteSettings.SearchDownstreamMaxPage}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
SearchDownstreamMaxPage: Number(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'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 站点接口缓存时间 */}
|
||||
<div>
|
||||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
|
||||
站点接口缓存时间（秒）
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
min={1}
|
||||
value={siteSettings.SiteInterfaceCacheTime}
|
||||
onChange={(e) =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
SiteInterfaceCacheTime: Number(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'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 禁用黄色过滤器 */}
|
||||
<div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<label
|
||||
className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 ${
|
||||
isUpstashStorage ? 'opacity-50' : ''
|
||||
}`}
|
||||
>
|
||||
禁用黄色过滤器
|
||||
{isUpstashStorage && (
|
||||
<span className='ml-2 text-xs text-gray-500 dark:text-gray-400'>
|
||||
(Upstash 环境下请通过环境变量修改)
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<button
|
||||
type='button'
|
||||
onClick={() =>
|
||||
!isUpstashStorage &&
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
DisableYellowFilter: !prev.DisableYellowFilter,
|
||||
}))
|
||||
}
|
||||
disabled={isUpstashStorage}
|
||||
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
|
||||
? 'bg-green-600'
|
||||
: 'bg-gray-200 dark:bg-gray-700'
|
||||
} ${isUpstashStorage ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
siteSettings.DisableYellowFilter
|
||||
? 'translate-x-6'
|
||||
: 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
|
||||
禁用黄色内容的过滤功能，允许显示所有内容。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className='flex justify-end'>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className={`px-4 py-2 ${
|
||||
saving
|
||||
? 'bg-gray-400 cursor-not-allowed'
|
||||
: 'bg-green-600 hover:bg-green-700'
|
||||
} text-white rounded-lg transition-colors`}
|
||||
>
|
||||
{saving ? '保存中…' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function AdminPageClient() {
|
||||
const [config, setConfig] = useState<AdminConfig | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [role, setRole] = useState<'owner' | 'admin' | null>(null);
|
||||
const [expandedTabs, setExpandedTabs] = useState<{ [key: string]: boolean }>({
|
||||
userConfig: false,
|
||||
videoSource: false,
|
||||
siteConfig: false,
|
||||
categoryConfig: false,
|
||||
});
|
||||
|
||||
// 获取管理员配置
|
||||
// showLoading 用于控制是否在请求期间显示整体加载骨架。
|
||||
const fetchConfig = useCallback(async (showLoading = false) => {
|
||||
try {
|
||||
if (showLoading) {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/admin/config`);
|
||||
|
||||
if (!response.ok) {
|
||||
const data = (await response.json()) as any;
|
||||
throw new Error(`获取配置失败: ${data.error}`);
|
||||
}
|
||||
|
||||
const data = (await response.json()) as AdminConfigResult;
|
||||
setConfig(data.Config);
|
||||
setRole(data.Role);
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : '获取配置失败';
|
||||
showError(msg);
|
||||
setError(msg);
|
||||
} finally {
|
||||
if (showLoading) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// 首次加载时显示骨架
|
||||
fetchConfig(true);
|
||||
}, [fetchConfig]);
|
||||
|
||||
// 切换标签展开状态
|
||||
const toggleTab = (tabKey: string) => {
|
||||
setExpandedTabs((prev) => ({
|
||||
...prev,
|
||||
[tabKey]: !prev[tabKey],
|
||||
}));
|
||||
};
|
||||
|
||||
// 新增: 重置配置处理函数
|
||||
const handleResetConfig = async () => {
|
||||
const { isConfirmed } = await Swal.fire({
|
||||
title: '确认重置配置',
|
||||
text: '此操作将重置用户封禁和管理员设置、自定义视频源，站点配置将重置为默认值，是否继续？',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
});
|
||||
if (!isConfirmed) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/reset`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`重置失败: ${response.status}`);
|
||||
}
|
||||
showSuccess('重置成功，请刷新页面！');
|
||||
} catch (err) {
|
||||
showError(err instanceof Error ? err.message : '重置失败');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<PageLayout activePath='/admin'>
|
||||
<div className='px-2 sm:px-10 py-4 sm:py-8'>
|
||||
<div className='max-w-[95%] mx-auto'>
|
||||
<h1 className='text-2xl font-bold text-gray-900 dark:text-gray-100 mb-8'>
|
||||
管理员设置
|
||||
</h1>
|
||||
<div className='space-y-4'>
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className='h-20 bg-gray-200 dark:bg-gray-700 rounded-lg animate-pulse'
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
// 错误已通过 SweetAlert2 展示，此处直接返回空
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageLayout activePath='/admin'>
|
||||
<div className='px-2 sm:px-10 py-4 sm:py-8'>
|
||||
<div className='max-w-[95%] mx-auto'>
|
||||
{/* 标题 + 重置配置按钮 */}
|
||||
<div className='flex items-center gap-2 mb-8'>
|
||||
<h1 className='text-2xl font-bold text-gray-900 dark:text-gray-100'>
|
||||
管理员设置
|
||||
</h1>
|
||||
{config && role === 'owner' && (
|
||||
<button
|
||||
onClick={handleResetConfig}
|
||||
className='px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-xs rounded-md transition-colors'
|
||||
>
|
||||
重置配置
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 站点配置标签 */}
|
||||
<CollapsibleTab
|
||||
title='站点配置'
|
||||
icon={
|
||||
<Settings
|
||||
size={20}
|
||||
className='text-gray-600 dark:text-gray-400'
|
||||
/>
|
||||
}
|
||||
isExpanded={expandedTabs.siteConfig}
|
||||
onToggle={() => toggleTab('siteConfig')}
|
||||
>
|
||||
<SiteConfigComponent config={config} />
|
||||
</CollapsibleTab>
|
||||
|
||||
<div className='space-y-4'>
|
||||
{/* 用户配置标签 */}
|
||||
<CollapsibleTab
|
||||
title='用户配置'
|
||||
icon={
|
||||
<Users size={20} className='text-gray-600 dark:text-gray-400' />
|
||||
}
|
||||
isExpanded={expandedTabs.userConfig}
|
||||
onToggle={() => toggleTab('userConfig')}
|
||||
>
|
||||
<UserConfig
|
||||
config={config}
|
||||
role={role}
|
||||
refreshConfig={fetchConfig}
|
||||
/>
|
||||
</CollapsibleTab>
|
||||
|
||||
{/* 视频源配置标签 */}
|
||||
<CollapsibleTab
|
||||
title='视频源配置'
|
||||
icon={
|
||||
<Video size={20} className='text-gray-600 dark:text-gray-400' />
|
||||
}
|
||||
isExpanded={expandedTabs.videoSource}
|
||||
onToggle={() => toggleTab('videoSource')}
|
||||
>
|
||||
<VideoSourceConfig config={config} refreshConfig={fetchConfig} />
|
||||
</CollapsibleTab>
|
||||
|
||||
{/* 分类配置标签 */}
|
||||
<CollapsibleTab
|
||||
title='分类配置'
|
||||
icon={
|
||||
<FolderOpen
|
||||
size={20}
|
||||
className='text-gray-600 dark:text-gray-400'
|
||||
/>
|
||||
}
|
||||
isExpanded={expandedTabs.categoryConfig}
|
||||
onToggle={() => toggleTab('categoryConfig')}
|
||||
>
|
||||
<CategoryConfig config={config} refreshConfig={fetchConfig} />
|
||||
</CollapsibleTab>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<AdminPageClient />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user