davidl/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use univeral panel

Browse Source
This commit is contained in:
shinya
2025-08-21 13:48:02 +08:00
parent 24713e0eb0
commit a66d83a6a1
5 changed files with 964 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -44,7 +44,6 @@
"react-dom": "^18.2.0",
"react-icons": "^5.4.0",
"redis": "^4.6.7",
"sweetalert2": "^11.11.0",
"swiper": "^11.2.8",
"tailwind-merge": "^2.6.0",
"vidstack": "^0.6.15",

8
pnpm-lock.yaml generated
View File

@@ -83,9 +83,6 @@ importers:
redis:
specifier: ^4.6.7
version: 4.7.1
sweetalert2:
specifier: ^11.11.0
version: 11.22.2
swiper:
specifier: ^11.2.8
version: 11.2.8
@@ -4639,9 +4636,6 @@ packages:
engines: {node: '>=14.0.0'}
hasBin: true
sweetalert2@11.22.2:
resolution: {integrity: sha512-GFQGzw8ZXF23PO79WMAYXLl4zYmLiaKqYJwcp5eBF07wiI5BYPbZtKi2pcvVmfUQK+FqL1risJAMxugcPbGIyg==}
swiper@11.2.8:
resolution: {integrity: sha512-S5FVf6zWynPWooi7pJ7lZhSUe2snTzqLuUzbd5h5PHUOhzgvW0bLKBd2wv0ixn6/5o9vwc/IkQT74CRcLJQzeg==}
engines: {node: '>= 4.7.0'}
@@ -10404,8 +10398,6 @@ snapshots:
csso: 5.0.5
picocolors: 1.1.1
sweetalert2@11.22.2: {}
swiper@11.2.8: {}
symbol-tree@3.2.4: {}

733
src/app/admin/page.tsx
View File

@@ -1,4 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any, no-console, @typescript-eslint/no-non-null-assertion */
/* eslint-disable @typescript-eslint/no-explicit-any, no-console, @typescript-eslint/no-non-null-assertion,react-hooks/exhaustive-deps */
'use client';
@@ -22,7 +22,10 @@ import {
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import {
AlertCircle,
AlertTriangle,
Check,
CheckCircle,
ChevronDown,
ChevronUp,
Database,
@@ -36,7 +39,6 @@ import {
import { GripVertical } from 'lucide-react';
import { Suspense, useCallback, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import Swal from 'sweetalert2';
import { AdminConfig, AdminConfigResult } from '@/lib/admin.types';
import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
@@ -44,19 +46,145 @@ 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 });
// 通用弹窗组件
interface AlertModalProps {
isOpen: boolean;
onClose: () => void;
type: 'success' | 'error' | 'warning';
title: string;
message?: string;
timer?: number;
showConfirm?: boolean;
}
const showSuccess = (message: string) =>
Swal.fire({
icon: 'success',
title: '成功',
text: message,
timer: 2000,
showConfirmButton: false,
const AlertModal = ({
isOpen,
onClose,
type,
title,
message,
timer,
showConfirm = false
}: AlertModalProps) => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
if (isOpen) {
setIsVisible(true);
if (timer) {
setTimeout(() => {
onClose();
}, timer);
}
} else {
setIsVisible(false);
}
}, [isOpen, timer, onClose]);
if (!isOpen) return null;
const getIcon = () => {
switch (type) {
case 'success':
return <CheckCircle className="w-8 h-8 text-green-500" />;
case 'error':
return <AlertCircle className="w-8 h-8 text-red-500" />;
case 'warning':
return <AlertTriangle className="w-8 h-8 text-yellow-500" />;
default:
return null;
}
};
const getBgColor = () => {
switch (type) {
case 'success':
return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
case 'error':
return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
case 'warning':
return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800';
default:
return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800';
}
};
return createPortal(
<div className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 transition-opacity duration-200 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
<div className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-sm w-full border ${getBgColor()} transition-all duration-200 ${isVisible ? 'scale-100' : 'scale-95'}`}>
<div className="p-6 text-center">
<div className="flex justify-center mb-4">
{getIcon()}
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
{title}
</h3>
{message && (
<p className="text-gray-600 dark:text-gray-400 mb-4">
{message}
</p>
)}
{showConfirm && (
<button
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
>
确定
</button>
)}
</div>
</div>
</div>,
document.body
);
};
// 弹窗状态管理
const useAlertModal = () => {
const [alertModal, setAlertModal] = useState<{
isOpen: boolean;
type: 'success' | 'error' | 'warning';
title: string;
message?: string;
timer?: number;
showConfirm?: boolean;
}>({
isOpen: false,
type: 'success',
title: '',
});
const showAlert = (config: Omit<typeof alertModal, 'isOpen'>) => {
setAlertModal({ ...config, isOpen: true });
};
const hideAlert = () => {
setAlertModal(prev => ({ ...prev, isOpen: false }));
};
return { alertModal, showAlert, hideAlert };
};
// 统一弹窗方法（必须在首次使用前定义）
const showError = (message: string, showAlert?: (config: any) => void) => {
if (showAlert) {
showAlert({ type: 'error', title: '错误', message, showConfirm: true });
} else {
console.error(message);
}
};
const showSuccess = (message: string, showAlert?: (config: any) => void) => {
if (showAlert) {
showAlert({ type: 'success', title: '成功', message, timer: 2000 });
} else {
console.log(message);
}
};
// 新增站点配置类型
interface SiteConfig {
SiteName: string;
@@ -136,6 +264,7 @@ interface UserConfigProps {
}
const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
const { alertModal, showAlert, hideAlert } = useAlertModal();
const [showAddUserForm, setShowAddUserForm] = useState(false);
const [showChangePasswordForm, setShowChangePasswordForm] = useState(false);
const [showAddUserGroupForm, setShowAddUserGroupForm] = useState(false);
@@ -165,6 +294,20 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
tags?: string[];
} | null>(null);
const [selectedApis, setSelectedApis] = useState<string[]>([]);
const [showConfigureUserGroupModal, setShowConfigureUserGroupModal] = useState(false);
const [selectedUserForGroup, setSelectedUserForGroup] = useState<{
username: string;
role: 'user' | 'admin' | 'owner';
tags?: string[];
} | null>(null);
const [selectedUserGroups, setSelectedUserGroups] = useState<string[]>([]);
const [showDeleteUserGroupModal, setShowDeleteUserGroupModal] = useState(false);
const [deletingUserGroup, setDeletingUserGroup] = useState<{
name: string;
affectedUsers: Array<{ username: string; role: 'user' | 'admin' | 'owner' }>;
} | null>(null);
const [showDeleteUserModal, setShowDeleteUserModal] = useState(false);
const [deletingUser, setDeletingUser] = useState<string | null>(null);
// 当前登录用户名
const currentUsername = getAuthInfoFromBrowserCookie()?.username || null;
@@ -205,9 +348,9 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
setShowEditUserGroupForm(false);
}
showSuccess(action === 'add' ? '用户组添加成功' : action === 'edit' ? '用户组更新成功' : '用户组删除成功');
showSuccess(action === 'add' ? '用户组添加成功' : action === 'edit' ? '用户组更新成功' : '用户组删除成功', showAlert);
} catch (err) {
showError(err instanceof Error ? err.message : '操作失败');
showError(err instanceof Error ? err.message : '操作失败', showAlert);
}
};
@@ -221,51 +364,29 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
handleUserGroupAction('edit', editingUserGroup.name, editingUserGroup.enabledApis);
};
const handleDeleteUserGroup = async (groupName: string) => {
const handleDeleteUserGroup = (groupName: string) => {
// 计算会受影响的用户数量
const affectedUsers = config?.UserConfig?.Users?.filter(user =>
user.tags && user.tags.includes(groupName)
) || [];
const affectedCount = affectedUsers.length;
const affectedUserNames = affectedUsers.map(u => u.username).join(', ');
const { isConfirmed } = await Swal.fire({
title: '确认删除用户组',
html: `
<div class="text-left">
<p class="mb-3">删除用户组 <strong>${groupName}</strong> 将影响所有使用该组的用户，此操作不可恢复！</p>
${affectedCount > 0 ? `
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-3">
<p class="text-sm text-yellow-800 dark:text-yellow-200 font-medium mb-1">
⚠️ 将影响 ${affectedCount} 个用户：
</p>
<p class="text-sm text-yellow-700 dark:text-yellow-300">
${affectedUserNames}
</p>
<p class="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
这些用户的用户组将被自动移除
</p>
</div>
` : `
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3 mb-3">
<p class="text-sm text-green-800 dark:text-green-200">
✅ 当前没有用户使用此用户组
</p>
</div>
`}
</div>
`,
icon: 'warning',
showCancelButton: true,
confirmButtonText: '确认删除',
cancelButtonText: '取消',
confirmButtonColor: '#dc2626',
setDeletingUserGroup({
name: groupName,
affectedUsers: affectedUsers.map(u => ({ username: u.username, role: u.role }))
});
setShowDeleteUserGroupModal(true);
};
if (!isConfirmed) return;
const handleConfirmDeleteUserGroup = async () => {
if (!deletingUserGroup) return;
await handleUserGroupAction('delete', groupName);
try {
await handleUserGroupAction('delete', deletingUserGroup.name);
setShowDeleteUserGroupModal(false);
setDeletingUserGroup(null);
} catch (err) {
// 错误处理已在 handleUserGroupAction 中处理
}
};
const handleStartEditUserGroup = (group: { name: string; enabledApis: string[] }) => {
@@ -293,9 +414,9 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
}
await refreshConfig();
showSuccess('用户组分配成功');
showSuccess('用户组分配成功', showAlert);
} catch (err) {
showError(err instanceof Error ? err.message : '操作失败');
showError(err instanceof Error ? err.message : '操作失败', showAlert);
}
};
@@ -339,20 +460,9 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
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 handleDeleteUser = (username: string) => {
setDeletingUser(username);
setShowDeleteUserModal(true);
};
const handleConfigureUserApis = (user: {
@@ -365,6 +475,29 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
setShowConfigureApisModal(true);
};
const handleConfigureUserGroup = (user: {
username: string;
role: 'user' | 'admin' | 'owner';
tags?: string[];
}) => {
setSelectedUserForGroup(user);
setSelectedUserGroups(user.tags || []);
setShowConfigureUserGroupModal(true);
};
const handleSaveUserGroups = async () => {
if (!selectedUserForGroup) return;
try {
await handleAssignUserGroup(selectedUserForGroup.username, selectedUserGroups);
setShowConfigureUserGroupModal(false);
setSelectedUserForGroup(null);
setSelectedUserGroups([]);
} catch (err) {
// 错误处理已在 handleAssignUserGroup 中处理
}
};
// 提取URL域名的辅助函数
const extractDomain = (url: string): string => {
try {
@@ -401,7 +534,7 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
setSelectedUser(null);
setSelectedApis([]);
} catch (err) {
showError(err instanceof Error ? err.message : '操作失败');
showError(err instanceof Error ? err.message : '操作失败', showAlert);
}
};
@@ -439,7 +572,19 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
// 成功后刷新配置（无需整页刷新）
await refreshConfig();
} catch (err) {
showError(err instanceof Error ? err.message : '操作失败');
showError(err instanceof Error ? err.message : '操作失败', showAlert);
}
};
const handleConfirmDeleteUser = async () => {
if (!deletingUser) return;
try {
await handleUserAction('deleteUser', deletingUser);
setShowDeleteUserModal(false);
setDeletingUser(null);
} catch (err) {
// 错误处理已在 handleUserAction 中处理
}
};
@@ -795,31 +940,7 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
(user.role === 'user' ||
user.username === currentUsername))) && (
<button
onClick={async () => {
const currentGroups = user.tags || [];
const result = await Swal.fire({
title: '配置用户组',
input: 'select',
inputOptions: Object.fromEntries([
['', '无用户组（无限制）'],
...userGroups.map(group => [group.name, `${group.name} (${group.enabledApis && group.enabledApis.length > 0 ? `${group.enabledApis.length} 个源` : '无限制'})`])
]),
inputValue: currentGroups.length > 0 ? currentGroups[0] : '',
inputPlaceholder: '选择用户组',
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
inputValidator: (value) => {
if (value === undefined) {
return '请选择用户组';
}
}
});
if (result.isConfirmed && result.value !== undefined) {
const groups = result.value ? [result.value] : [];
handleAssignUserGroup(user.username, groups);
}
}}
onClick={() => handleConfigureUserGroup(user)}
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'
>
配置
@@ -1278,9 +1399,271 @@ const UserConfig = ({ config, role, refreshConfig }: UserConfigProps) => {
</div>,
document.body
)}
{/* 配置用户组弹窗 */}
{showConfigureUserGroupModal && selectedUserForGroup && createPortal(
<div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'>
<div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto'>
<div className='p-6'>
<div className='flex items-center justify-between mb-6'>
<h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
配置用户组 - {selectedUserForGroup.username}
</h3>
<button
onClick={() => {
setShowConfigureUserGroupModal(false);
setSelectedUserForGroup(null);
setSelectedUserGroups([]);
}}
className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
>
<svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
<div className='mb-6'>
<div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
<div className='flex items-center space-x-2 mb-2'>
<svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
</svg>
<span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
配置说明
</span>
</div>
<p className='text-sm text-blue-700 dark:text-blue-400 mt-1'>
提示：选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
</p>
</div>
</div>
{/* 用户组选择 - 下拉选择器 */}
<div className='mb-6'>
<label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
选择用户组：
</label>
<select
value={selectedUserGroups.length > 0 ? selectedUserGroups[0] : ''}
onChange={(e) => {
const value = e.target.value;
setSelectedUserGroups(value ? [value] : []);
}}
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors'
>
<option value=''>无用户组（无限制）</option>
{userGroups.map((group) => (
<option key={group.name} value={group.name}>
{group.name} {group.enabledApis && group.enabledApis.length > 0 ? `(${group.enabledApis.length} 个源)` : ''}
</option>
))}
</select>
<p className='mt-2 text-xs text-gray-500 dark:text-gray-400'>
选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
</p>
</div>
{/* 操作按钮 */}
<div className='flex justify-end space-x-3'>
<button
onClick={() => {
setShowConfigureUserGroupModal(false);
setSelectedUserForGroup(null);
setSelectedUserGroups([]);
}}
className='px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors'
>
取消
</button>
<button
onClick={handleSaveUserGroups}
className='px-6 py-2.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors'
>
确认配置
</button>
</div>
</div>
</div>
</div>,
document.body
)}
{/* 删除用户组确认弹窗 */}
{showDeleteUserGroupModal && deletingUserGroup && createPortal(
<div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'>
<div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full'>
<div className='p-6'>
<div className='flex items-center justify-between mb-6'>
<h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
确认删除用户组
</h3>
<button
onClick={() => {
setShowDeleteUserGroupModal(false);
setDeletingUserGroup(null);
}}
className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
>
<svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
<div className='mb-6'>
<div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
<div className='flex items-center space-x-2 mb-2'>
<svg className='w-5 h-5 text-red-600 dark:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' />
</svg>
<span className='text-sm font-medium text-red-800 dark:text-red-300'>
危险操作警告
</span>
</div>
<p className='text-sm text-red-700 dark:text-red-400'>
删除用户组 <strong>{deletingUserGroup.name}</strong> 将影响所有使用该组的用户，此操作不可恢复！
</p>
</div>
{deletingUserGroup.affectedUsers.length > 0 ? (
<div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
<div className='flex items-center space-x-2 mb-2'>
<svg className='w-5 h-5 text-yellow-600 dark:text-yellow-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
</svg>
<span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
⚠️ 将影响 {deletingUserGroup.affectedUsers.length} 个用户：
</span>
</div>
<div className='space-y-1'>
{deletingUserGroup.affectedUsers.map((user, index) => (
<div key={index} className='text-sm text-yellow-700 dark:text-yellow-300'>
• {user.username} ({user.role})
</div>
))}
</div>
<p className='text-xs text-yellow-600 dark:text-yellow-400 mt-2'>
这些用户的用户组将被自动移除
</p>
</div>
) : (
<div className='bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4'>
<div className='flex items-center space-x-2'>
<svg className='w-5 h-5 text-green-600 dark:text-green-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
</svg>
<span className='text-sm font-medium text-green-800 dark:text-green-300'>
✅ 当前没有用户使用此用户组
</span>
</div>
</div>
)}
</div>
{/* 操作按钮 */}
<div className='flex justify-end space-x-3'>
<button
onClick={() => {
setShowDeleteUserGroupModal(false);
setDeletingUserGroup(null);
}}
className='px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors'
>
取消
</button>
<button
onClick={handleConfirmDeleteUserGroup}
className='px-6 py-2.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors'
>
确认删除
</button>
</div>
</div>
</div>
</div>,
document.body
)}
{/* 删除用户确认弹窗 */}
{showDeleteUserModal && deletingUser && createPortal(
<div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'>
<div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full'>
<div className='p-6'>
<div className='flex items-center justify-between mb-6'>
<h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
确认删除用户
</h3>
<button
onClick={() => {
setShowDeleteUserModal(false);
setDeletingUser(null);
}}
className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
>
<svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
<div className='mb-6'>
<div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
<div className='flex items-center space-x-2 mb-2'>
<svg className='w-5 h-5 text-red-600 dark:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' />
</svg>
<span className='text-sm font-medium text-red-800 dark:text-red-300'>
危险操作警告
</span>
</div>
<p className='text-sm text-red-700 dark:text-red-400'>
删除用户 <strong>{deletingUser}</strong> 将同时删除其搜索历史、播放记录和收藏夹，此操作不可恢复！
</p>
</div>
{/* 操作按钮 */}
<div className='flex justify-end space-x-3'>
<button
onClick={() => {
setShowDeleteUserModal(false);
setDeletingUser(null);
}}
className='px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors'
>
取消
</button>
<button
onClick={handleConfirmDeleteUser}
className='px-6 py-2.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors'
>
确认删除
</button>
</div>
</div>
</div>
</div>
</div>,
document.body
)}
{/* 通用弹窗组件 */}
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
timer={alertModal.timer}
showConfirm={alertModal.showConfirm}
/>
</div>
);
};
}
// 视频源配置组件
const VideoSourceConfig = ({
@@ -1290,6 +1673,7 @@ const VideoSourceConfig = ({
config: AdminConfig | null;
refreshConfig: () => Promise<void>;
}) => {
const { alertModal, showAlert, hideAlert } = useAlertModal();
const [sources, setSources] = useState<DataSource[]>([]);
const [showAddForm, setShowAddForm] = useState(false);
const [orderChanged, setOrderChanged] = useState(false);
@@ -1343,7 +1727,7 @@ const VideoSourceConfig = ({
// 成功后刷新配置
await refreshConfig();
} catch (err) {
showError(err instanceof Error ? err.message : '操作失败');
showError(err instanceof Error ? err.message : '操作失败', showAlert);
throw err; // 向上抛出方便调用处判断
}
};
@@ -1616,6 +2000,17 @@ const VideoSourceConfig = ({
</button>
</div>
)}
{/* 通用弹窗组件 */}
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
timer={alertModal.timer}
showConfirm={alertModal.showConfirm}
/>
</div>
);
};
@@ -1628,6 +2023,7 @@ const CategoryConfig = ({
config: AdminConfig | null;
refreshConfig: () => Promise<void>;
}) => {
const { alertModal, showAlert, hideAlert } = useAlertModal();
const [categories, setCategories] = useState<CustomCategory[]>([]);
const [showAddForm, setShowAddForm] = useState(false);
const [orderChanged, setOrderChanged] = useState(false);
@@ -1680,7 +2076,7 @@ const CategoryConfig = ({
// 成功后刷新配置
await refreshConfig();
} catch (err) {
showError(err instanceof Error ? err.message : '操作失败');
showError(err instanceof Error ? err.message : '操作失败', showAlert);
throw err; // 向上抛出方便调用处判断
}
};
@@ -1952,12 +2348,24 @@ const CategoryConfig = ({
</button>
</div>
)}
{/* 通用弹窗组件 */}
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
timer={alertModal.timer}
showConfirm={alertModal.showConfirm}
/>
</div>
);
};
// 新增配置文件组件
const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig | null; refreshConfig: () => Promise<void> }) => {
const { alertModal, showAlert, hideAlert } = useAlertModal();
const [configContent, setConfigContent] = useState('');
const [saving, setSaving] = useState(false);
const [subscriptionUrl, setSubscriptionUrl] = useState('');
@@ -1983,7 +2391,7 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
// 拉取订阅配置
const handleFetchConfig = async () => {
if (!subscriptionUrl.trim()) {
showError('请输入订阅URL');
showError('请输入订阅URL', showAlert);
return;
}
@@ -2006,12 +2414,12 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
// 更新本地配置的最后检查时间
const currentTime = new Date().toISOString();
setLastCheckTime(currentTime);
showSuccess('配置拉取成功');
showSuccess('配置拉取成功', showAlert);
} else {
showError('拉取失败：未获取到配置内容');
showError('拉取失败：未获取到配置内容', showAlert);
}
} catch (err) {
showError(err instanceof Error ? err.message : '拉取失败');
showError(err instanceof Error ? err.message : '拉取失败', showAlert);
} finally {
setFetching(false);
}
@@ -2037,10 +2445,10 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
throw new Error(data.error || `保存失败: ${resp.status}`);
}
showSuccess('配置文件保存成功');
showSuccess('配置文件保存成功', showAlert);
await refreshConfig();
} catch (err) {
showError(err instanceof Error ? err.message : '保存失败');
showError(err instanceof Error ? err.message : '保存失败', showAlert);
} finally {
setSaving(false);
}
@@ -2173,12 +2581,24 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
</button>
</div>
</div>
{/* 通用弹窗组件 */}
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
timer={alertModal.timer}
showConfirm={alertModal.showConfirm}
/>
</div>
);
};
// 新增站点配置组件
const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig | null; refreshConfig: () => Promise<void> }) => {
const { alertModal, showAlert, hideAlert } = useAlertModal();
const [siteSettings, setSiteSettings] = useState<SiteConfig>({
SiteName: '',
Announcement: '',
@@ -2331,10 +2751,10 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
throw new Error(data.error || `保存失败: ${resp.status}`);
}
showSuccess('保存成功, 请刷新页面');
showSuccess('保存成功, 请刷新页面', showAlert);
await refreshConfig();
} catch (err) {
showError(err instanceof Error ? err.message : '保存失败');
showError(err instanceof Error ? err.message : '保存失败', showAlert);
} finally {
setSaving(false);
}
@@ -2727,15 +3147,28 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
{saving ? '保存中…' : '保存'}
</button>
</div>
{/* 通用弹窗组件 */}
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
timer={alertModal.timer}
showConfirm={alertModal.showConfirm}
/>
</div>
);
};
function AdminPageClient() {
const { alertModal, showAlert, hideAlert } = useAlertModal();
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 [showResetConfigModal, setShowResetConfigModal] = useState(false);
const [expandedTabs, setExpandedTabs] = useState<{ [key: string]: boolean }>({
userConfig: false,
videoSource: false,
@@ -2765,7 +3198,7 @@ function AdminPageClient() {
setRole(data.Role);
} catch (err) {
const msg = err instanceof Error ? err.message : '获取配置失败';
showError(msg);
showError(msg, showAlert);
setError(msg);
} finally {
if (showLoading) {
@@ -2788,26 +3221,21 @@ function AdminPageClient() {
};
// 新增: 重置配置处理函数
const handleResetConfig = async () => {
const { isConfirmed } = await Swal.fire({
title: '确认重置配置',
text: '此操作将重置用户封禁和管理员设置、自定义视频源，站点配置将重置为默认值，是否继续？',
icon: 'warning',
showCancelButton: true,
confirmButtonText: '确认',
cancelButtonText: '取消',
});
if (!isConfirmed) return;
const handleResetConfig = () => {
setShowResetConfigModal(true);
};
const handleConfirmResetConfig = async () => {
try {
const response = await fetch(`/api/admin/reset`);
if (!response.ok) {
throw new Error(`重置失败: ${response.status}`);
}
showSuccess('重置成功，请刷新页面！');
showSuccess('重置成功，请刷新页面！', showAlert);
await fetchConfig();
setShowResetConfigModal(false);
} catch (err) {
showError(err instanceof Error ? err.message : '重置失败');
showError(err instanceof Error ? err.message : '重置失败', showAlert);
}
};
@@ -2834,7 +3262,7 @@ function AdminPageClient() {
}
if (error) {
// 错误已通过 SweetAlert2 展示，此处直接返回空
// 错误已通过弹窗展示，此处直接返回空
return null;
}
@@ -2952,6 +3380,73 @@ function AdminPageClient() {
</div>
</div>
</div>
{/* 通用弹窗组件 */}
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
timer={alertModal.timer}
showConfirm={alertModal.showConfirm}
/>
{/* 重置配置确认弹窗 */}
{showResetConfigModal && createPortal(
<div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'>
<div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full'>
<div className='p-6'>
<div className='flex items-center justify-between mb-6'>
<h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
确认重置配置
</h3>
<button
onClick={() => setShowResetConfigModal(false)}
className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
>
<svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
</svg>
</button>
</div>
<div className='mb-6'>
<div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4'>
<div className='flex items-center space-x-2 mb-2'>
<svg className='w-5 h-5 text-yellow-600 dark:text-yellow-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
</svg>
<span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
⚠️ 危险操作警告
</span>
</div>
<p className='text-sm text-yellow-700 dark:text-yellow-400'>
此操作将重置用户封禁和管理员设置、自定义视频源，站点配置将重置为默认值，是否继续？
</p>
</div>
</div>
{/* 操作按钮 */}
<div className='flex justify-end space-x-3'>
<button
onClick={() => setShowResetConfigModal(false)}
className='px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors'
>
取消
</button>
<button
onClick={handleConfirmResetConfig}
className='px-6 py-2.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors'
>
确认重置
</button>
</div>
</div>
</div>
</div>,
document.body
)}
</PageLayout>
);
}

1
src/app/layout.tsx
View File

@@ -4,7 +4,6 @@ import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import 'sweetalert2/dist/sweetalert2.min.css';
import { getConfig } from '@/lib/config';

538
src/components/DataMigration.tsx
View File

@@ -1,30 +1,181 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';
import { AlertTriangle, Download, FileCheck, Lock, Upload } from 'lucide-react';
import { useRef, useState } from 'react';
import Swal from 'sweetalert2';
import { AlertCircle,AlertTriangle, CheckCircle, Download, FileCheck, Lock, Upload } from 'lucide-react';
import { useEffect,useRef, useState } from 'react';
import { createPortal } from 'react-dom';
interface DataMigrationProps {
onRefreshConfig?: () => Promise<void>;
}
interface AlertModalProps {
isOpen: boolean;
onClose: () => void;
type: 'success' | 'error' | 'warning';
title: string;
message?: string;
html?: string;
confirmText?: string;
onConfirm?: () => void;
showConfirm?: boolean;
timer?: number;
}
const AlertModal = ({
isOpen,
onClose,
type,
title,
message,
html,
confirmText = '确定',
onConfirm,
showConfirm = false,
timer
}: AlertModalProps) => {
const [isVisible, setIsVisible] = useState(false);
// 控制动画状态
useEffect(() => {
if (isOpen) {
setIsVisible(true);
if (timer) {
setTimeout(() => {
onClose();
}, timer);
}
} else {
setIsVisible(false);
}
}, [isOpen, timer, onClose]);
if (!isOpen) return null;
const getIcon = () => {
switch (type) {
case 'success':
return <CheckCircle className="w-12 h-12 text-green-500" />;
case 'error':
return <AlertCircle className="w-12 h-12 text-red-500" />;
case 'warning':
return <AlertTriangle className="w-12 h-12 text-yellow-500" />;
default:
return null;
}
};
const getBgColor = () => {
switch (type) {
case 'success':
return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
case 'error':
return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
case 'warning':
return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800';
default:
return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800';
}
};
return createPortal(
<div className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 transition-opacity duration-200 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
<div className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full border ${getBgColor()} transition-all duration-200 ${isVisible ? 'scale-100' : 'scale-95'}`}>
<div className="p-6 text-center">
<div className="flex justify-center mb-4">
{getIcon()}
</div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
{title}
</h3>
{message && (
<p className="text-gray-600 dark:text-gray-400 mb-4">
{message}
</p>
)}
{html && (
<div
className="text-left text-gray-600 dark:text-gray-400 mb-4"
dangerouslySetInnerHTML={{ __html: html }}
/>
)}
<div className="flex justify-center space-x-3">
{showConfirm && onConfirm ? (
<>
<button
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
>
取消
</button>
<button
onClick={() => {
onConfirm();
onClose();
}}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
>
{confirmText}
</button>
</>
) : (
<button
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
>
确定
</button>
)}
</div>
</div>
</div>
</div>,
document.body
);
};
const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
const [exportPassword, setExportPassword] = useState('');
const [importPassword, setImportPassword] = useState('');
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [isExporting, setIsExporting] = useState(false);
const [isImporting, setIsImporting] = useState(false);
const [alertModal, setAlertModal] = useState<{
isOpen: boolean;
type: 'success' | 'error' | 'warning';
title: string;
message?: string;
html?: string;
confirmText?: string;
onConfirm?: () => void;
showConfirm?: boolean;
timer?: number;
}>({
isOpen: false,
type: 'success',
title: '',
});
const fileInputRef = useRef<HTMLInputElement>(null);
const showAlert = (config: Omit<typeof alertModal, 'isOpen'>) => {
setAlertModal({ ...config, isOpen: true });
};
const hideAlert = () => {
setAlertModal(prev => ({ ...prev, isOpen: false }));
};
// 导出数据
const handleExport = async () => {
if (!exportPassword.trim()) {
Swal.fire({
icon: 'error',
showAlert({
type: 'error',
title: '错误',
text: '请输入加密密码',
returnFocus: false,
message: '请输入加密密码',
});
return;
}
@@ -67,22 +218,19 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
Swal.fire({
icon: 'success',
showAlert({
type: 'success',
title: '导出成功',
text: '数据已成功导出，请妥善保管备份文件和密码',
message: '数据已成功导出，请妥善保管备份文件和密码',
timer: 3000,
showConfirmButton: false,
returnFocus: false,
});
setExportPassword('');
} catch (error) {
Swal.fire({
icon: 'error',
showAlert({
type: 'error',
title: '导出失败',
text: error instanceof Error ? error.message : '导出过程中发生错误',
returnFocus: false,
message: error instanceof Error ? error.message : '导出过程中发生错误',
});
} finally {
setIsExporting(false);
@@ -100,21 +248,19 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
// 导入数据
const handleImport = async () => {
if (!selectedFile) {
Swal.fire({
icon: 'error',
showAlert({
type: 'error',
title: '错误',
text: '请选择备份文件',
returnFocus: false,
message: '请选择备份文件',
});
return;
}
if (!importPassword.trim()) {
Swal.fire({
icon: 'error',
showAlert({
type: 'error',
title: '错误',
text: '请输入解密密码',
returnFocus: false,
message: '请输入解密密码',
});
return;
}
@@ -137,8 +283,8 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
throw new Error(result.error || `导入失败: ${response.status}`);
}
await Swal.fire({
icon: 'success',
showAlert({
type: 'success',
title: '导入成功',
html: `
<div class="text-left">
@@ -149,30 +295,30 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
<p class="mt-3 text-orange-600">请刷新页面以查看最新数据。</p>
</div>
`,
confirmButtonText: '刷新页面',
returnFocus: false,
confirmText: '刷新页面',
showConfirm: true,
onConfirm: async () => {
// 清理状态
setSelectedFile(null);
setImportPassword('');
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
// 刷新配置
if (onRefreshConfig) {
await onRefreshConfig();
}
// 刷新页面
window.location.reload();
},
});
// 清理状态
setSelectedFile(null);
setImportPassword('');
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
// 刷新配置
if (onRefreshConfig) {
await onRefreshConfig();
}
// 刷新页面
window.location.reload();
} catch (error) {
Swal.fire({
icon: 'error',
showAlert({
type: 'error',
title: '导入失败',
text: error instanceof Error ? error.message : '导入过程中发生错误',
returnFocus: false,
message: error instanceof Error ? error.message : '导入过程中发生错误',
});
} finally {
setIsImporting(false);
@@ -180,163 +326,179 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
};
return (
<div className="max-w-6xl mx-auto space-y-6">
{/* 简洁警告提示 */}
<div className="flex items-center gap-3 p-4 border border-amber-200 dark:border-amber-700 rounded-lg bg-amber-50/30 dark:bg-amber-900/5">
<AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
<p className="text-sm text-amber-800 dark:text-amber-200">
数据迁移操作请谨慎，确保已备份重要数据
</p>
</div>
{/* 主要操作区域 - 响应式布局 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* 数据导出 */}
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow flex flex-col">
<div className="flex items-center gap-3 mb-6">
<div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
<Download className="w-4 h-4 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-gray-100">数据导出</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">创建加密备份文件</p>
</div>
</div>
<div className="flex-1 flex flex-col">
<div className="space-y-4">
{/* 密码输入 */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<Lock className="w-4 h-4" />
加密密码
</label>
<input
type="password"
value={exportPassword}
onChange={(e) => setExportPassword(e.target.value)}
placeholder="设置强密码保护备份文件"
className="w-full px-3 py-2.5 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-blue-500 focus:border-blue-500 transition-colors"
disabled={isExporting}
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
导入时需要使用相同密码
</p>
</div>
{/* 备份内容列表 */}
<div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
<p className="font-medium text-gray-700 dark:text-gray-300 mb-2">备份内容：</p>
<div className="grid grid-cols-2 gap-1">
<div>• 管理配置</div>
<div>• 用户数据</div>
<div>• 播放记录</div>
<div>• 收藏夹</div>
</div>
</div>
</div>
{/* 导出按钮 */}
<button
onClick={handleExport}
disabled={isExporting || !exportPassword.trim()}
className={`w-full px-4 py-2.5 rounded-lg font-medium transition-colors mt-10 ${isExporting || !exportPassword.trim()
? 'bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-500 dark:text-gray-400'
: 'bg-blue-600 hover:bg-blue-700 text-white'
}`}
>
{isExporting ? (
<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>
) : (
<div className="flex items-center justify-center gap-2">
<Download className="w-4 h-4" />
导出数据
</div>
)}
</button>
</div>
<>
<div className="max-w-6xl mx-auto space-y-6">
{/* 简洁警告提示 */}
<div className="flex items-center gap-3 p-4 border border-amber-200 dark:border-amber-700 rounded-lg bg-amber-50/30 dark:bg-amber-900/5">
<AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
<p className="text-sm text-amber-800 dark:text-amber-200">
数据迁移操作请谨慎，确保已备份重要数据
</p>
</div>
{/* 数据导入 */}
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow flex flex-col">
<div className="flex items-center gap-3 mb-6">
<div className="w-8 h-8 rounded-lg bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
<Upload className="w-4 h-4 text-red-600 dark:text-red-400" />
{/* 主要操作区域 - 响应式布局 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* 数据导出 */}
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow flex flex-col">
<div className="flex items-center gap-3 mb-6">
<div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
<Download className="w-4 h-4 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-gray-100">数据导出</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">创建加密备份文件</p>
</div>
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-gray-100">数据导入</h3>
<p className="text-sm text-red-600 dark:text-red-400">⚠️ 将清空现有数据</p>
<div className="flex-1 flex flex-col">
<div className="space-y-4">
{/* 密码输入 */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<Lock className="w-4 h-4" />
加密密码
</label>
<input
type="password"
value={exportPassword}
onChange={(e) => setExportPassword(e.target.value)}
placeholder="设置强密码保护备份文件"
className="w-full px-3 py-2.5 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-blue-500 focus:border-blue-500 transition-colors"
disabled={isExporting}
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
导入时需要使用相同密码
</p>
</div>
{/* 备份内容列表 */}
<div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
<p className="font-medium text-gray-700 dark:text-gray-300 mb-2">备份内容：</p>
<div className="grid grid-cols-2 gap-1">
<div>• 管理配置</div>
<div>• 用户数据</div>
<div>• 播放记录</div>
<div>• 收藏夹</div>
</div>
</div>
</div>
{/* 导出按钮 */}
<button
onClick={handleExport}
disabled={isExporting || !exportPassword.trim()}
className={`w-full px-4 py-2.5 rounded-lg font-medium transition-colors mt-10 ${isExporting || !exportPassword.trim()
? 'bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-500 dark:text-gray-400'
: 'bg-blue-600 hover:bg-blue-700 text-white'
}`}
>
{isExporting ? (
<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>
) : (
<div className="flex items-center justify-center gap-2">
<Download className="w-4 h-4" />
导出数据
</div>
)}
</button>
</div>
</div>
<div className="flex-1 flex flex-col">
<div className="space-y-4">
{/* 文件选择 */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<FileCheck className="w-4 h-4" />
备份文件
{selectedFile && (
<span className="ml-auto text-xs text-green-600 dark:text-green-400 font-normal">
{selectedFile.name} ({(selectedFile.size / 1024).toFixed(1)} KB)
</span>
)}
</label>
<input
ref={fileInputRef}
type="file"
accept=".dat"
onChange={handleFileSelect}
className="w-full px-3 py-2.5 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-red-500 focus:border-red-500 file:mr-3 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-sm file:font-medium file:bg-gray-50 dark:file:bg-gray-600 file:text-gray-700 dark:file:text-gray-300 hover:file:bg-gray-100 dark:hover:file:bg-gray-500 transition-colors"
disabled={isImporting}
/>
{/* 数据导入 */}
<div className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow flex flex-col">
<div className="flex items-center gap-3 mb-6">
<div className="w-8 h-8 rounded-lg bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
<Upload className="w-4 h-4 text-red-600 dark:text-red-400" />
</div>
{/* 密码输入 */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<Lock className="w-4 h-4" />
解密密码
</label>
<input
type="password"
value={importPassword}
onChange={(e) => setImportPassword(e.target.value)}
placeholder="输入导出时的加密密码"
className="w-full px-3 py-2.5 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-red-500 focus:border-red-500 transition-colors"
disabled={isImporting}
/>
<h3 className="font-semibold text-gray-900 dark:text-gray-100">数据导入</h3>
<p className="text-sm text-red-600 dark:text-red-400">⚠️ 将清空现有数据</p>
</div>
</div>
{/* 导入按钮 */}
<button
onClick={handleImport}
disabled={isImporting || !selectedFile || !importPassword.trim()}
className={`w-full px-4 py-2.5 rounded-lg font-medium transition-colors mt-10 ${isImporting || !selectedFile || !importPassword.trim()
? 'bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-500 dark:text-gray-400'
: 'bg-red-600 hover:bg-red-700 text-white'
}`}
>
{isImporting ? (
<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 className="flex-1 flex flex-col">
<div className="space-y-4">
{/* 文件选择 */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<FileCheck className="w-4 h-4" />
备份文件
{selectedFile && (
<span className="ml-auto text-xs text-green-600 dark:text-green-400 font-normal">
{selectedFile.name} ({(selectedFile.size / 1024).toFixed(1)} KB)
</span>
)}
</label>
<input
ref={fileInputRef}
type="file"
accept=".dat"
onChange={handleFileSelect}
className="w-full px-3 py-2.5 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-red-500 focus:border-red-500 file:mr-3 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-sm file:font-medium file:bg-gray-50 dark:file:bg-gray-600 file:text-gray-700 dark:file:text-gray-300 hover:file:bg-gray-100 dark:hover:file:bg-gray-500 transition-colors"
disabled={isImporting}
/>
</div>
) : (
<div className="flex items-center justify-center gap-2">
<Upload className="w-4 h-4" />
导入数据
{/* 密码输入 */}
<div>
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<Lock className="w-4 h-4" />
解密密码
</label>
<input
type="password"
value={importPassword}
onChange={(e) => setImportPassword(e.target.value)}
placeholder="输入导出时的加密密码"
className="w-full px-3 py-2.5 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-red-500 focus:border-red-500 transition-colors"
disabled={isImporting}
/>
</div>
)}
</button>
</div>
{/* 导入按钮 */}
<button
onClick={handleImport}
disabled={isImporting || !selectedFile || !importPassword.trim()}
className={`w-full px-4 py-2.5 rounded-lg font-medium transition-colors mt-10 ${isImporting || !selectedFile || !importPassword.trim()
? 'bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-500 dark:text-gray-400'
: 'bg-red-600 hover:bg-red-700 text-white'
}`}
>
{isImporting ? (
<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>
) : (
<div className="flex items-center justify-center gap-2">
<Upload className="w-4 h-4" />
导入数据
</div>
)}
</button>
</div>
</div>
</div>
</div>
</div>
{/* 弹窗组件 */}
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
html={alertModal.html}
confirmText={alertModal.confirmText}
onConfirm={alertModal.onConfirm}
showConfirm={alertModal.showConfirm}
timer={alertModal.timer}
/>
</>
);
};