mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-03-17 04:07:29 +08:00
feat: roughly admin info struct and interface
This commit is contained in:
shinya
910
src/app/admin/page.tsx
Normal file
910
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,910 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any, no-console */
|
||||
|
||||
'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 { ChevronDown, ChevronUp, Settings, Users, Video } from 'lucide-react';
|
||||
import { GripVertical } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { AdminConfig, AdminConfigResult } from '@/lib/admin.types';
|
||||
|
||||
import PageLayout from '@/components/PageLayout';
|
||||
|
||||
// 新增站点配置类型
|
||||
interface SiteConfig {
|
||||
SiteName: string;
|
||||
Announcement: string;
|
||||
SearchDownstreamMaxPage: number;
|
||||
SiteInterfaceCacheTime: number;
|
||||
SearchResultDefaultAggregate: boolean;
|
||||
}
|
||||
|
||||
// 视频源数据类型
|
||||
interface DataSource {
|
||||
name: string;
|
||||
key: string;
|
||||
api: string;
|
||||
detail?: 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>
|
||||
);
|
||||
};
|
||||
|
||||
// 用户配置组件
|
||||
const UserConfig = ({ config }: { config: AdminConfig | null }) => {
|
||||
const [userSettings, setUserSettings] = useState({
|
||||
enableRegistration: false,
|
||||
});
|
||||
const [showAddUserForm, setShowAddUserForm] = useState(false);
|
||||
const [newUser, setNewUser] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.UserConfig) {
|
||||
setUserSettings({
|
||||
enableRegistration: config.UserConfig.AllowRegister,
|
||||
});
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
const handleBanUser = (username: string) => {
|
||||
// 这里应该调用API来封禁用户
|
||||
console.log('封禁用户:', username);
|
||||
};
|
||||
|
||||
const handleUnbanUser = (username: string) => {
|
||||
// 这里应该调用API来解封用户
|
||||
console.log('解封用户:', username);
|
||||
};
|
||||
|
||||
const handleSetAdmin = (username: string) => {
|
||||
// 这里应该调用API来设为管理员
|
||||
console.log('设为管理员:', username);
|
||||
};
|
||||
|
||||
const handleRemoveAdmin = (username: string) => {
|
||||
// 这里应该调用API来取消管理员
|
||||
console.log('取消管理员:', username);
|
||||
};
|
||||
|
||||
const handleAddUser = () => {
|
||||
// 这里应该调用API来添加用户，默认角色为 user
|
||||
console.log('添加用户:', { ...newUser, role: 'user' });
|
||||
setNewUser({ username: '', password: '' });
|
||||
setShowAddUserForm(false);
|
||||
};
|
||||
|
||||
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={() =>
|
||||
setUserSettings((prev) => ({
|
||||
...prev,
|
||||
enableRegistration: !prev.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)}
|
||||
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>
|
||||
)}
|
||||
|
||||
{/* 用户列表 */}
|
||||
<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>
|
||||
<tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
|
||||
{config.UserConfig.Users.map((user) => (
|
||||
<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'>
|
||||
{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>
|
||||
) : null}
|
||||
{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>
|
||||
))}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 视频源配置组件
|
||||
const VideoSourceConfig = ({ config }: { config: AdminConfig | null }) => {
|
||||
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);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
const handleToggleEnable = (key: string) => {
|
||||
setSources((prev) =>
|
||||
prev.map((source) =>
|
||||
source.key === key ? { ...source, disabled: !source.disabled } : source
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleDelete = (key: string) => {
|
||||
setSources((prev) => prev.filter((source) => source.key !== key));
|
||||
};
|
||||
|
||||
const handleAddSource = () => {
|
||||
if (!newSource.name || !newSource.key || !newSource.api) return;
|
||||
setSources((prev) => [...prev, newSource]);
|
||||
setNewSource({
|
||||
name: '',
|
||||
key: '',
|
||||
api: '',
|
||||
detail: '',
|
||||
disabled: false,
|
||||
from: 'custom',
|
||||
});
|
||||
setShowAddForm(false);
|
||||
setOrderChanged(true);
|
||||
};
|
||||
|
||||
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 = () => {
|
||||
console.log('保存排序:', sources);
|
||||
// TODO: 调用 API 保存排序
|
||||
setOrderChanged(false);
|
||||
};
|
||||
|
||||
// 可拖拽行封装 (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 SiteConfigComponent = ({ config }: { config: AdminConfig | null }) => {
|
||||
const [siteSettings, setSiteSettings] = useState<SiteConfig>({
|
||||
SiteName: '',
|
||||
Announcement: '',
|
||||
SearchDownstreamMaxPage: 1,
|
||||
SiteInterfaceCacheTime: 7200,
|
||||
SearchResultDefaultAggregate: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.SiteConfig) {
|
||||
setSiteSettings(config.SiteConfig);
|
||||
}
|
||||
}, [config]);
|
||||
|
||||
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>
|
||||
<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 className='flex items-center justify-between'>
|
||||
<label className='text-gray-700 dark:text-gray-300'>
|
||||
搜索结果默认按标题和年份聚合
|
||||
</label>
|
||||
<button
|
||||
onClick={() =>
|
||||
setSiteSettings((prev) => ({
|
||||
...prev,
|
||||
SearchResultDefaultAggregate: !prev.SearchResultDefaultAggregate,
|
||||
}))
|
||||
}
|
||||
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.SearchResultDefaultAggregate
|
||||
? '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.SearchResultDefaultAggregate
|
||||
? 'translate-x-6'
|
||||
: 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className='flex justify-end'>
|
||||
<button className='px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors'>
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function AdminPage() {
|
||||
const [config, setConfig] = useState<AdminConfig | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [expandedTabs, setExpandedTabs] = useState<{ [key: string]: boolean }>({
|
||||
userConfig: false,
|
||||
videoSource: false,
|
||||
siteConfig: false,
|
||||
});
|
||||
|
||||
// 获取管理员配置
|
||||
useEffect(() => {
|
||||
const fetchConfig = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch('/api/admin/config');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`获取配置失败: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = (await response.json()) as AdminConfigResult;
|
||||
setConfig(data.Config);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '获取配置失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchConfig();
|
||||
}, []);
|
||||
|
||||
// 切换标签展开状态
|
||||
const toggleTab = (tabKey: string) => {
|
||||
setExpandedTabs((prev) => ({
|
||||
...prev,
|
||||
[tabKey]: !prev[tabKey],
|
||||
}));
|
||||
};
|
||||
|
||||
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) {
|
||||
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='p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg'>
|
||||
<p className='text-red-700 dark:text-red-300'>{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
{/* 站点配置标签 */}
|
||||
<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} />
|
||||
</CollapsibleTab>
|
||||
|
||||
{/* 视频源配置标签 */}
|
||||
<CollapsibleTab
|
||||
title='视频源配置'
|
||||
icon={
|
||||
<Video size={20} className='text-gray-600 dark:text-gray-400' />
|
||||
}
|
||||
isExpanded={expandedTabs.videoSource}
|
||||
onToggle={() => toggleTab('videoSource')}
|
||||
>
|
||||
<VideoSourceConfig config={config} />
|
||||
</CollapsibleTab>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user