mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-02-04 03:36:22 +08:00
2266 lines
82 KiB
TypeScript
2266 lines
82 KiB
TypeScript
/* 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,
|
||
Database,
|
||
ExternalLink,
|
||
FileText,
|
||
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 DataMigration from '@/components/DataMigration';
|
||
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;
|
||
|
||
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
|
||
}`}
|
||
>
|
||
允许新用户注册
|
||
</label>
|
||
<button
|
||
onClick={() =>
|
||
toggleAllowRegister(!userSettings.enableRegistration)
|
||
}
|
||
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'
|
||
}`}
|
||
>
|
||
<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',
|
||
});
|
||
|
||
// 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) => {
|
||
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 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'>
|
||
{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={() =>
|
||
handleToggleEnable(category.query, category.type)
|
||
}
|
||
className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!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' && (
|
||
<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'>
|
||
自定义分类列表
|
||
</h4>
|
||
<button
|
||
onClick={() => setShowAddForm(!showAddForm)}
|
||
className="px-3 py-1 text-sm rounded-lg transition-colors bg-green-600 hover:bg-green-700 text-white"
|
||
>
|
||
{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={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={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 && (
|
||
<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 ConfigFileComponent = ({ config, refreshConfig, role }: { config: AdminConfig | null; refreshConfig: () => Promise<void>; role: 'owner' | 'admin' | null }) => {
|
||
const [configContent, setConfigContent] = useState('');
|
||
const [saving, setSaving] = useState(false);
|
||
const [subscriptionUrl, setSubscriptionUrl] = useState('');
|
||
const [autoUpdate, setAutoUpdate] = useState(false);
|
||
const [fetching, setFetching] = useState(false);
|
||
const [lastCheckTime, setLastCheckTime] = useState<string>('');
|
||
|
||
// 检查是否为站长
|
||
const isOwner = role === 'owner';
|
||
|
||
useEffect(() => {
|
||
if (config?.ConfigFile) {
|
||
setConfigContent(config.ConfigFile);
|
||
}
|
||
if (config?.ConfigSubscribtion) {
|
||
setSubscriptionUrl(config.ConfigSubscribtion.URL);
|
||
setAutoUpdate(config.ConfigSubscribtion.AutoUpdate);
|
||
setLastCheckTime(config.ConfigSubscribtion.LastCheck || '');
|
||
}
|
||
}, [config]);
|
||
|
||
|
||
|
||
// 拉取订阅配置
|
||
const handleFetchConfig = async () => {
|
||
if (!subscriptionUrl.trim()) {
|
||
showError('请输入订阅URL');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setFetching(true);
|
||
const resp = await fetch('/api/admin/config_subscription/fetch', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ url: subscriptionUrl }),
|
||
});
|
||
|
||
if (!resp.ok) {
|
||
const data = await resp.json().catch(() => ({}));
|
||
throw new Error(data.error || `拉取失败: ${resp.status}`);
|
||
}
|
||
|
||
const data = await resp.json();
|
||
if (data.configContent) {
|
||
setConfigContent(data.configContent);
|
||
// 更新本地配置的最后检查时间
|
||
const currentTime = new Date().toISOString();
|
||
setLastCheckTime(currentTime);
|
||
showSuccess('配置拉取成功');
|
||
} else {
|
||
showError('拉取失败：未获取到配置内容');
|
||
}
|
||
} catch (err) {
|
||
showError(err instanceof Error ? err.message : '拉取失败');
|
||
} finally {
|
||
setFetching(false);
|
||
}
|
||
};
|
||
|
||
// 保存配置文件
|
||
const handleSave = async () => {
|
||
try {
|
||
setSaving(true);
|
||
const resp = await fetch('/api/admin/config_file', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
configFile: configContent,
|
||
subscriptionUrl,
|
||
autoUpdate,
|
||
lastCheckTime: lastCheckTime || new Date().toISOString()
|
||
}),
|
||
});
|
||
|
||
if (!resp.ok) {
|
||
const data = await resp.json().catch(() => ({}));
|
||
throw new Error(data.error || `保存失败: ${resp.status}`);
|
||
}
|
||
|
||
showSuccess('配置文件保存成功');
|
||
await refreshConfig();
|
||
} 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-4'>
|
||
{/* 非站长用户权限提示 */}
|
||
{!isOwner && (
|
||
<div className='bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-4'>
|
||
<div className='flex items-center gap-2'>
|
||
<div className='w-5 h-5 rounded-full bg-amber-500 flex items-center justify-center'>
|
||
<span className='text-white text-xs font-bold'>!</span>
|
||
</div>
|
||
<p className='text-amber-800 dark:text-amber-300 text-sm font-medium'>
|
||
配置文件模块仅站长可编辑，您只能查看配置内容
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 配置订阅区域 */}
|
||
<div className={`bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm ${!isOwner ? 'opacity-60' : ''}`}>
|
||
<div className='flex items-center justify-between mb-6'>
|
||
<h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
|
||
配置订阅
|
||
</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') : '从未更新'}
|
||
</div>
|
||
</div>
|
||
|
||
<div className='space-y-6'>
|
||
{/* 订阅URL输入 */}
|
||
<div>
|
||
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3'>
|
||
订阅URL
|
||
</label>
|
||
<input
|
||
type='url'
|
||
value={subscriptionUrl}
|
||
onChange={(e) => setSubscriptionUrl(e.target.value)}
|
||
placeholder='https://example.com/config.json'
|
||
disabled={!isOwner}
|
||
className={`w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all duration-200 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 ${!isOwner ? 'cursor-not-allowed bg-gray-100 dark:bg-gray-700' : ''}`}
|
||
/>
|
||
<p className='mt-2 text-xs text-gray-500 dark:text-gray-400'>
|
||
输入配置文件的订阅地址，要求 JSON 格式，且使用 Base58 编码
|
||
</p>
|
||
</div>
|
||
|
||
{/* 拉取配置按钮 */}
|
||
<div className='pt-2'>
|
||
<button
|
||
onClick={handleFetchConfig}
|
||
disabled={!isOwner || fetching || !subscriptionUrl.trim()}
|
||
className={`w-full px-6 py-3 rounded-lg font-medium transition-all duration-200 ${!isOwner || fetching || !subscriptionUrl.trim()
|
||
? 'bg-gray-300 dark:bg-gray-600 cursor-not-allowed text-gray-500 dark:text-gray-400'
|
||
: 'bg-green-600 hover:bg-green-700 text-white shadow-sm hover:shadow-md transform hover:-translate-y-0.5'
|
||
}`}
|
||
>
|
||
{fetching ? (
|
||
<div className='flex items-center justify-center gap-2'>
|
||
<div className='w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin'></div>
|
||
拉取中…
|
||
</div>
|
||
) : (
|
||
'拉取配置'
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 自动更新开关 */}
|
||
<div className='flex items-center justify-between'>
|
||
<div>
|
||
<label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
|
||
自动更新
|
||
</label>
|
||
<p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
|
||
启用后系统将定期自动拉取最新配置
|
||
</p>
|
||
</div>
|
||
<button
|
||
type='button'
|
||
onClick={() => setAutoUpdate(!autoUpdate)}
|
||
disabled={!isOwner}
|
||
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 ${!isOwner
|
||
? 'cursor-not-allowed opacity-50'
|
||
: ''
|
||
} ${autoUpdate
|
||
? 'bg-green-600'
|
||
: 'bg-gray-200 dark:bg-gray-700'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${autoUpdate
|
||
? 'translate-x-6'
|
||
: 'translate-x-1'
|
||
}`}
|
||
/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 配置文件编辑区域 */}
|
||
<div className='space-y-4'>
|
||
<div className='relative'>
|
||
<textarea
|
||
value={configContent}
|
||
onChange={(e) => setConfigContent(e.target.value)}
|
||
rows={20}
|
||
placeholder='请输入配置文件内容（JSON 格式）...'
|
||
disabled={!isOwner}
|
||
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 ${!isOwner ? 'cursor-not-allowed bg-gray-100 dark:bg-gray-700' : ''}`}
|
||
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'>
|
||
支持 JSON 格式，用于配置视频源和自定义分类
|
||
</div>
|
||
<button
|
||
onClick={handleSave}
|
||
disabled={!isOwner || saving}
|
||
className={`px-4 py-2 rounded-lg transition-colors ${!isOwner || saving
|
||
? 'bg-gray-400 cursor-not-allowed text-white'
|
||
: 'bg-green-600 hover:bg-green-700 text-white'
|
||
}`}
|
||
>
|
||
{saving ? '保存中…' : '保存'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 新增站点配置组件
|
||
const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig | null; refreshConfig: () => Promise<void> }) => {
|
||
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;
|
||
}
|
||
};
|
||
|
||
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) => {
|
||
setSiteSettings((prev) => ({
|
||
...prev,
|
||
DoubanProxyType: value,
|
||
}));
|
||
};
|
||
|
||
// 处理豆瓣图片代理变化
|
||
const handleDoubanImageProxyChange = (value: string) => {
|
||
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('保存成功, 请刷新页面');
|
||
await refreshConfig();
|
||
} 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"
|
||
>
|
||
站点名称
|
||
</label>
|
||
<input
|
||
type='text'
|
||
value={siteSettings.SiteName}
|
||
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"
|
||
/>
|
||
</div>
|
||
|
||
{/* 站点公告 */}
|
||
<div>
|
||
<label
|
||
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
||
>
|
||
站点公告
|
||
</label>
|
||
<textarea
|
||
value={siteSettings.Announcement}
|
||
onChange={(e) =>
|
||
setSiteSettings((prev) => ({
|
||
...prev,
|
||
Announcement: e.target.value,
|
||
}))
|
||
}
|
||
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"
|
||
/>
|
||
</div>
|
||
|
||
{/* 豆瓣数据源设置 */}
|
||
<div className='space-y-3'>
|
||
<div>
|
||
<label
|
||
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
||
>
|
||
豆瓣数据代理
|
||
</label>
|
||
<div className='relative' data-dropdown='douban-datasource'>
|
||
{/* 自定义下拉选择框 */}
|
||
<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"
|
||
>
|
||
{
|
||
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 && (
|
||
<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"
|
||
>
|
||
豆瓣代理地址
|
||
</label>
|
||
<input
|
||
type='text'
|
||
placeholder='例如: https://proxy.example.com/fetch?url='
|
||
value={siteSettings.DoubanProxy}
|
||
onChange={(e) =>
|
||
setSiteSettings((prev) => ({
|
||
...prev,
|
||
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"
|
||
/>
|
||
<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"
|
||
>
|
||
豆瓣图片代理
|
||
</label>
|
||
<div className='relative' data-dropdown='douban-image-proxy'>
|
||
{/* 自定义下拉选择框 */}
|
||
<button
|
||
type='button'
|
||
onClick={() =>
|
||
setIsDoubanImageProxyDropdownOpen(
|
||
!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"
|
||
>
|
||
{
|
||
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 && (
|
||
<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"
|
||
>
|
||
豆瓣图片代理地址
|
||
</label>
|
||
<input
|
||
type='text'
|
||
placeholder='例如: https://proxy.example.com/fetch?url='
|
||
value={siteSettings.DoubanImageProxy}
|
||
onChange={(e) =>
|
||
setSiteSettings((prev) => ({
|
||
...prev,
|
||
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"
|
||
/>
|
||
<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"
|
||
>
|
||
禁用黄色过滤器
|
||
</label>
|
||
<button
|
||
type='button'
|
||
onClick={() =>
|
||
setSiteSettings((prev) => ({
|
||
...prev,
|
||
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
|
||
? 'bg-green-600'
|
||
: 'bg-gray-200 dark:bg-gray-700'
|
||
}`}
|
||
>
|
||
<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,
|
||
configFile: false,
|
||
dataMigration: 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('重置成功，请刷新页面！');
|
||
await fetchConfig();
|
||
} 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={
|
||
<FileText
|
||
size={20}
|
||
className='text-gray-600 dark:text-gray-400'
|
||
/>
|
||
}
|
||
isExpanded={expandedTabs.configFile}
|
||
onToggle={() => toggleTab('configFile')}
|
||
>
|
||
<ConfigFileComponent config={config} refreshConfig={fetchConfig} role={role} />
|
||
</CollapsibleTab>
|
||
|
||
{/* 站点配置标签 */}
|
||
<CollapsibleTab
|
||
title='站点配置'
|
||
icon={
|
||
<Settings
|
||
size={20}
|
||
className='text-gray-600 dark:text-gray-400'
|
||
/>
|
||
}
|
||
isExpanded={expandedTabs.siteConfig}
|
||
onToggle={() => toggleTab('siteConfig')}
|
||
>
|
||
<SiteConfigComponent config={config} refreshConfig={fetchConfig} />
|
||
</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>
|
||
|
||
{/* 数据迁移标签 - 仅站长可见 */}
|
||
{role === 'owner' && (
|
||
<CollapsibleTab
|
||
title='数据迁移'
|
||
icon={
|
||
<Database
|
||
size={20}
|
||
className='text-gray-600 dark:text-gray-400'
|
||
/>
|
||
}
|
||
isExpanded={expandedTabs.dataMigration}
|
||
onToggle={() => toggleTab('dataMigration')}
|
||
>
|
||
<DataMigration onRefreshConfig={fetchConfig} />
|
||
</CollapsibleTab>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</PageLayout>
|
||
);
|
||
}
|
||
|
||
export default function AdminPage() {
|
||
return (
|
||
<Suspense>
|
||
<AdminPageClient />
|
||
</Suspense>
|
||
);
|
||
}
|