refactor: 完成静态网站转换，移除所有 CMS 和动态功能
- 删除数据库相关代码 (src/db/) - 删除 API 路由 (src/app/api/) - 删除认证相关代码 (src/lib/auth/, src/providers/) - 删除监控和安全中间件 (src/lib/security/, src/lib/monitoring/) - 删除 hooks (use-news, use-products, use-services) - 更新组件为静态数据源 - 添加 nginx 静态配置和部署脚本 - 添加 static-link 组件
This commit is contained in:
张翔
@@ -1,83 +0,0 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import ContentEditPage from './page';
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
back: jest.fn(),
|
||||
}),
|
||||
useParams: () => ({
|
||||
id: 'new',
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href }: { children: React.ReactNode; href: string }) => {
|
||||
return <a href={href}>{children}</a>;
|
||||
};
|
||||
});
|
||||
|
||||
jest.mock('next/dynamic', () => () => {
|
||||
return function MockEditor() {
|
||||
return <div data-testid="rich-text-editor">Editor</div>;
|
||||
};
|
||||
});
|
||||
|
||||
global.fetch = jest.fn();
|
||||
|
||||
describe('ContentEditPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(global.fetch as jest.Mock).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
type: 'news',
|
||||
title: 'Test Content',
|
||||
slug: 'test-content',
|
||||
excerpt: 'Test excerpt',
|
||||
content: '<p>Test content</p>',
|
||||
coverImage: '',
|
||||
category: '',
|
||||
tags: [],
|
||||
status: 'draft',
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render content edit page', () => {
|
||||
render(<ContentEditPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render form', () => {
|
||||
render(<ContentEditPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render back button', () => {
|
||||
render(<ContentEditPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Functionality', () => {
|
||||
it('should initialize with default values for new content', () => {
|
||||
render(<ContentEditPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have form labels', () => {
|
||||
render(<ContentEditPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,396 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Save,
|
||||
Loader2,
|
||||
Eye,
|
||||
Upload
|
||||
} from 'lucide-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const RichTextEditor = dynamic(
|
||||
() => import('@/components/admin/RichTextEditor'),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-64 border border-gray-300 rounded-lg flex items-center justify-center bg-gray-50">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-gray-400" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
|
||||
const typeOptions = [
|
||||
{ value: 'news', label: '新闻' },
|
||||
{ value: 'product', label: '产品' },
|
||||
{ value: 'service', label: '服务' },
|
||||
{ value: 'case', label: '案例' },
|
||||
];
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 'draft', label: '草稿' },
|
||||
{ value: 'published', label: '发布' },
|
||||
{ value: 'archived', label: '归档' },
|
||||
];
|
||||
|
||||
export default function ContentEditPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const isNew = params.id === 'new';
|
||||
const contentId = isNew ? null : (params.id as string);
|
||||
|
||||
const [loading, setLoading] = useState(!isNew);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
type: 'news',
|
||||
title: '',
|
||||
slug: '',
|
||||
excerpt: '',
|
||||
content: '',
|
||||
coverImage: '',
|
||||
category: '',
|
||||
tags: [] as string[],
|
||||
status: 'draft',
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isNew && contentId) {
|
||||
fetchContent();
|
||||
}
|
||||
}, [isNew, contentId]);
|
||||
|
||||
const fetchContent = async () => {
|
||||
try {
|
||||
const res = await fetch(`/api/admin/content/${contentId}`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
setFormData({
|
||||
type: data.type,
|
||||
title: data.title,
|
||||
slug: data.slug,
|
||||
excerpt: data.excerpt || '',
|
||||
content: data.content || '',
|
||||
coverImage: data.coverImage || '',
|
||||
category: data.category || '',
|
||||
tags: data.tags || [],
|
||||
status: data.status,
|
||||
});
|
||||
} else {
|
||||
router.push('/admin/content');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取内容失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const generateSlug = (title: string) => {
|
||||
return title
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-')
|
||||
.replace(/^-|-$/g, '');
|
||||
};
|
||||
|
||||
const handleTitleChange = (title: string) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
title,
|
||||
slug: prev.slug || generateSlug(title),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
const uploadFormData = new FormData();
|
||||
uploadFormData.append('file', file);
|
||||
uploadFormData.append('type', 'image');
|
||||
|
||||
const res = await fetch('/api/admin/upload', {
|
||||
method: 'POST',
|
||||
body: uploadFormData,
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setFormData(prev => ({ ...prev, coverImage: data.file.url }));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const validate = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.title.trim()) {
|
||||
newErrors.title = '请输入标题';
|
||||
}
|
||||
if (!formData.slug.trim()) {
|
||||
newErrors.slug = '请输入 Slug';
|
||||
}
|
||||
if (!formData.type) {
|
||||
newErrors.type = '请选择类型';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSave = async (publish: boolean = false) => {
|
||||
if (!validate()) return;
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const url = isNew
|
||||
? '/api/admin/content'
|
||||
: `/api/admin/content/${contentId}`;
|
||||
|
||||
const body = {
|
||||
...formData,
|
||||
status: publish ? 'published' : formData.status,
|
||||
contentBody: formData.content,
|
||||
};
|
||||
|
||||
const res = await fetch(url, {
|
||||
method: isNew ? 'POST' : 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
if (isNew) {
|
||||
router.push(`/admin/content/${data.id}`);
|
||||
}
|
||||
alert('保存成功');
|
||||
} else {
|
||||
alert(data.error || '保存失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
alert('保存失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[#C41E3A]" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
href="/admin/content"
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
{isNew ? '新建内容' : '编辑内容'}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => handleSave(false)}
|
||||
disabled={saving}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 transition-colors flex items-center gap-2"
|
||||
>
|
||||
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||
保存草稿
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSave(true)}
|
||||
disabled={saving}
|
||||
className="px-4 py-2 bg-[#C41E3A] text-white rounded-lg hover:bg-[#a01830] disabled:opacity-50 transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
发布
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
标题 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.title}
|
||||
onChange={(e) => handleTitleChange(e.target.value)}
|
||||
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none ${
|
||||
errors.title ? 'border-red-500' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="请输入标题"
|
||||
/>
|
||||
{errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Slug <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.slug}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, slug: e.target.value }))}
|
||||
className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none ${
|
||||
errors.slug ? 'border-red-500' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="url-slug"
|
||||
/>
|
||||
{errors.slug && <p className="text-red-500 text-sm mt-1">{errors.slug}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
摘要
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.excerpt}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, excerpt: e.target.value }))}
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none resize-none"
|
||||
placeholder="请输入摘要（可选）"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
内容
|
||||
</label>
|
||||
<RichTextEditor
|
||||
content={formData.content}
|
||||
onChange={(content: string) => setFormData(prev => ({ ...prev, content }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h3 className="font-medium text-gray-900 mb-4">基本信息</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
类型 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
value={formData.type}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, type: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none"
|
||||
>
|
||||
{typeOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
状态
|
||||
</label>
|
||||
<select
|
||||
value={formData.status}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, status: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none"
|
||||
>
|
||||
{statusOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
分类
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.category}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, category: e.target.value }))}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none"
|
||||
placeholder="分类名称"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h3 className="font-medium text-gray-900 mb-4">封面图片</h3>
|
||||
|
||||
{formData.coverImage ? (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={formData.coverImage}
|
||||
alt="封面"
|
||||
className="w-full h-40 object-cover rounded-lg"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setFormData(prev => ({ ...prev, coverImage: '' }))}
|
||||
className="absolute top-2 right-2 p-1 bg-white rounded-full shadow hover:bg-gray-100"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<label className="block">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageUpload}
|
||||
className="hidden"
|
||||
disabled={uploading}
|
||||
/>
|
||||
<div className="w-full h-40 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-[#C41E3A] hover:bg-red-50 transition-colors">
|
||||
{uploading ? (
|
||||
<Loader2 className="h-6 w-6 animate-spin text-gray-400" />
|
||||
) : (
|
||||
<>
|
||||
<Upload className="h-6 w-6 text-gray-400 mb-2" />
|
||||
<span className="text-sm text-gray-500">点击上传</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import ContentListPage from './page';
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useSearchParams: () => ({
|
||||
get: jest.fn(() => null),
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href }: { children: React.ReactNode; href: string }) => {
|
||||
return <a href={href}>{children}</a>;
|
||||
};
|
||||
});
|
||||
|
||||
global.fetch = jest.fn();
|
||||
|
||||
describe('ContentListPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(global.fetch as jest.Mock).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
items: [
|
||||
{
|
||||
id: 'test-content',
|
||||
type: 'news',
|
||||
title: 'Test Content',
|
||||
slug: 'test-content',
|
||||
excerpt: 'Test excerpt',
|
||||
status: 'published',
|
||||
category: 'test',
|
||||
createdAt: '2024-01-01',
|
||||
publishedAt: '2024-01-01',
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 1,
|
||||
totalPages: 1,
|
||||
},
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render content list page', () => {
|
||||
render(<ContentListPage />);
|
||||
const container = screen.getByText(/内容管理/i).closest('div');
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render page title', () => {
|
||||
render(<ContentListPage />);
|
||||
const title = screen.getByRole('heading', { level: 1 });
|
||||
expect(title).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render search input', () => {
|
||||
render(<ContentListPage />);
|
||||
const searchInput = screen.getByPlaceholderText(/搜索/i);
|
||||
expect(searchInput).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render add content button', () => {
|
||||
render(<ContentListPage />);
|
||||
const buttons = screen.getAllByRole('button');
|
||||
expect(buttons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Functionality', () => {
|
||||
it('should fetch content on mount', async () => {
|
||||
render(<ContentListPage />);
|
||||
|
||||
expect(global.fetch).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper heading hierarchy', () => {
|
||||
render(<ContentListPage />);
|
||||
|
||||
const h1 = screen.getByRole('heading', { level: 1 });
|
||||
expect(h1).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,324 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import {
|
||||
Plus,
|
||||
Search,
|
||||
Edit,
|
||||
Trash2,
|
||||
FileText,
|
||||
Loader2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ContentItem {
|
||||
id: string;
|
||||
type: 'news' | 'product' | 'service' | 'case';
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string | null;
|
||||
status: 'draft' | 'published' | 'archived';
|
||||
category: string | null;
|
||||
createdAt: string;
|
||||
publishedAt: string | null;
|
||||
}
|
||||
|
||||
interface Pagination {
|
||||
page: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
}
|
||||
|
||||
const typeLabels: Record<string, string> = {
|
||||
news: '新闻',
|
||||
product: '产品',
|
||||
service: '服务',
|
||||
case: '案例',
|
||||
};
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
draft: '草稿',
|
||||
published: '已发布',
|
||||
archived: '已归档',
|
||||
};
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
draft: 'bg-yellow-100 text-yellow-800',
|
||||
published: 'bg-green-100 text-green-800',
|
||||
archived: 'bg-gray-100 text-gray-800',
|
||||
};
|
||||
|
||||
export default function ContentListPage() {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [items, setItems] = useState<ContentItem[]>([]);
|
||||
const [pagination, setPagination] = useState<Pagination>({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 0,
|
||||
totalPages: 0,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [search, setSearch] = useState(searchParams.get('search') || '');
|
||||
const [typeFilter, setTypeFilter] = useState(searchParams.get('type') || '');
|
||||
const [statusFilter, setStatusFilter] = useState(searchParams.get('status') || '');
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const fetchContent = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
params.set('page', pagination.page.toString());
|
||||
params.set('limit', pagination.limit.toString());
|
||||
if (search) params.set('search', search);
|
||||
if (typeFilter) params.set('type', typeFilter);
|
||||
if (statusFilter) params.set('status', statusFilter);
|
||||
|
||||
const res = await fetch(`/api/admin/content?${params}`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
setItems(data.items);
|
||||
setPagination(data.pagination);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取内容列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [pagination.page, pagination.limit, search, typeFilter, statusFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchContent();
|
||||
}, [fetchContent]);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
fetchContent();
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteId) return;
|
||||
|
||||
setDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/admin/content/${deleteId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setItems(items.filter(item => item.id !== deleteId));
|
||||
setDeleteId(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<h1 className="text-2xl font-bold text-gray-900">内容管理</h1>
|
||||
<Link
|
||||
href="/admin/content/new"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-[#C41E3A] text-white rounded-lg hover:bg-[#a01830] transition-colors"
|
||||
>
|
||||
<Plus className="h-5 w-5" />
|
||||
新建内容
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<form onSubmit={handleSearch} className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
<div className="flex-1 relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="搜索标题..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={typeFilter}
|
||||
onChange={(e) => {
|
||||
setTypeFilter(e.target.value);
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none"
|
||||
>
|
||||
<option value="">全部类型</option>
|
||||
{Object.entries(typeLabels).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => {
|
||||
setStatusFilter(e.target.value);
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none"
|
||||
>
|
||||
<option value="">全部状态</option>
|
||||
{Object.entries(statusLabels).map(([value, label]) => (
|
||||
<option key={value} value={value}>{label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
搜索
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-[#C41E3A]" />
|
||||
</div>
|
||||
) : items.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<FileText className="h-12 w-12 text-gray-300 mx-auto mb-4" />
|
||||
<p className="text-gray-500">暂无内容</p>
|
||||
<Link
|
||||
href="/admin/content/new"
|
||||
className="inline-block mt-4 text-[#C41E3A] hover:underline"
|
||||
>
|
||||
创建第一个内容
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200">
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-600">标题</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-600">类型</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-600">状态</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-600">分类</th>
|
||||
<th className="text-left py-3 px-4 text-sm font-medium text-gray-600">创建时间</th>
|
||||
<th className="text-right py-3 px-4 text-sm font-medium text-gray-600">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50">
|
||||
<td className="py-4 px-4">
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{item.title}</p>
|
||||
<p className="text-sm text-gray-500">{item.slug}</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded">
|
||||
{typeLabels[item.type]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded ${statusColors[item.status]}`}>
|
||||
{statusLabels[item.status]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-gray-600">
|
||||
{item.category || '-'}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-gray-600">
|
||||
{formatDate(item.createdAt)}
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Link
|
||||
href={`/admin/content/${item.id}`}
|
||||
className="p-2 text-gray-400 hover:text-[#C41E3A] hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="编辑"
|
||||
>
|
||||
<Edit className="h-5 w-5" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setDeleteId(item.id)}
|
||||
className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{pagination.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-6 pt-6 border-t border-gray-200">
|
||||
<p className="text-sm text-gray-600">
|
||||
共 {pagination.total} 条记录
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setPagination(prev => ({ ...prev, page: prev.page - 1 }))}
|
||||
disabled={pagination.page === 1}
|
||||
className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPagination(prev => ({ ...prev, page: prev.page + 1 }))}
|
||||
disabled={pagination.page === pagination.totalPages}
|
||||
className="px-4 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{deleteId && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="bg-white rounded-xl p-6 max-w-md w-full mx-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">确认删除</h3>
|
||||
<p className="text-gray-600 mb-6">确定要删除此内容吗？此操作不可撤销。</p>
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
onClick={() => setDeleteId(null)}
|
||||
className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{deleting ? '删除中...' : '确认删除'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useSession, signOut } from 'next-auth/react';
|
||||
import Link from 'next/link';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import {
|
||||
FileText,
|
||||
Settings,
|
||||
Users,
|
||||
LayoutDashboard,
|
||||
LogOut,
|
||||
Menu,
|
||||
X,
|
||||
Activity
|
||||
} from 'lucide-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
const navigation = [
|
||||
{ name: '仪表盘', href: '/admin', icon: LayoutDashboard },
|
||||
{ name: '内容管理', href: '/admin/content', icon: FileText },
|
||||
{ name: '配置中心', href: '/admin/settings', icon: Settings },
|
||||
{ name: '用户管理', href: '/admin/users', icon: Users },
|
||||
{ name: '审计日志', href: '/admin/logs', icon: Activity },
|
||||
];
|
||||
|
||||
export default function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const { data: session, status } = useSession();
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const isLoginPage = pathname === '/admin/login';
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (mounted && status === 'unauthenticated' && !isLoginPage) {
|
||||
router.push('/admin/login');
|
||||
}
|
||||
}, [mounted, status, isLoginPage, router]);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (isLoginPage) {
|
||||
return <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">{children}</div>;
|
||||
}
|
||||
|
||||
if (status === 'loading') {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (status === 'unauthenticated') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="lg:hidden fixed top-0 left-0 right-0 z-40 bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
|
||||
<Link href="/admin" className="text-xl font-bold text-[#C41E3A]">
|
||||
睿新致遠 后台管理
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="p-2 rounded-md text-gray-600 hover:bg-gray-100"
|
||||
>
|
||||
{sidebarOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{sidebarOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 z-30 bg-black/50"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<aside className={`
|
||||
fixed top-0 left-0 z-30 h-full w-64 bg-white border-r border-gray-200 transform transition-transform duration-300 ease-in-out
|
||||
lg:translate-x-0
|
||||
${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
|
||||
`}>
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="h-16 flex items-center px-6 border-b border-gray-200">
|
||||
<Link href="/admin" className="text-xl font-bold text-[#C41E3A]">
|
||||
睿新致遠 后台管理
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto">
|
||||
{navigation.map((item) => {
|
||||
const isActive = pathname === item.href ||
|
||||
(item.href !== '/admin' && pathname.startsWith(item.href));
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
className={`
|
||||
flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors
|
||||
${isActive
|
||||
? 'bg-[#C41E3A] text-white'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<item.icon className="h-5 w-5" />
|
||||
{item.name}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-gray-200">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-medium">
|
||||
{session?.user?.name?.[0] || 'U'}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{session?.user?.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
{session?.user?.isAdmin ? '管理员' : '用户'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => signOut({ callbackUrl: '/admin/login' })}
|
||||
className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg"
|
||||
title="退出登录"
|
||||
>
|
||||
<LogOut className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="lg:ml-64 min-h-screen">
|
||||
<div className="p-6 lg:p-8 pt-20 lg:pt-8">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import LoginPage from './page';
|
||||
|
||||
jest.mock('next-auth/react', () => ({
|
||||
signIn: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('next/navigation', () => ({
|
||||
useRouter: () => ({
|
||||
push: jest.fn(),
|
||||
}),
|
||||
useSearchParams: () => ({
|
||||
get: jest.fn(() => null),
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href }: { children: React.ReactNode; href: string }) => {
|
||||
return <a href={href}>{children}</a>;
|
||||
};
|
||||
});
|
||||
|
||||
describe('LoginPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render login page', () => {
|
||||
render(<LoginPage />);
|
||||
const container = screen.getByText('管理后台登录').closest('div');
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render email input', () => {
|
||||
render(<LoginPage />);
|
||||
const emailInput = screen.getByLabelText(/邮箱地址/i);
|
||||
expect(emailInput).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render password input', () => {
|
||||
render(<LoginPage />);
|
||||
const passwordInput = screen.getByLabelText(/密码/i);
|
||||
expect(passwordInput).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render login button', () => {
|
||||
render(<LoginPage />);
|
||||
const loginButton = screen.getByRole('button', { name: /登录/i });
|
||||
expect(loginButton).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Functionality', () => {
|
||||
it('should update email value on change', () => {
|
||||
render(<LoginPage />);
|
||||
const emailInput = screen.getByLabelText(/邮箱地址/i) as HTMLInputElement;
|
||||
|
||||
fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
|
||||
|
||||
expect(emailInput.value).toBe('test@example.com');
|
||||
});
|
||||
|
||||
it('should update password value on change', () => {
|
||||
render(<LoginPage />);
|
||||
const passwordInput = screen.getByLabelText(/密码/i) as HTMLInputElement;
|
||||
|
||||
fireEvent.change(passwordInput, { target: { value: 'password123' } });
|
||||
|
||||
expect(passwordInput.value).toBe('password123');
|
||||
});
|
||||
|
||||
it('should toggle password visibility', () => {
|
||||
render(<LoginPage />);
|
||||
const passwordInput = screen.getByLabelText(/密码/i) as HTMLInputElement;
|
||||
|
||||
expect(passwordInput.type).toBe('password');
|
||||
|
||||
const toggleButtons = screen.getAllByRole('button');
|
||||
const toggleButton = toggleButtons.find(btn =>
|
||||
btn.querySelector('svg') && btn !== screen.getByRole('button', { name: /登录/i })
|
||||
);
|
||||
|
||||
if (toggleButton) {
|
||||
fireEvent.click(toggleButton);
|
||||
expect(passwordInput.type).toBe('text');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have form labels', () => {
|
||||
render(<LoginPage />);
|
||||
|
||||
expect(screen.getByLabelText(/邮箱地址/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/密码/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,123 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Eye, EyeOff, Mail, Lock, AlertCircle } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const [email, setEmail] = useState('admin@novalon.cn');
|
||||
const [password, setPassword] = useState('admin123456');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const result = await signIn('credentials', {
|
||||
email,
|
||||
password,
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
if (result?.error) {
|
||||
setError('邮箱或密码错误');
|
||||
} else {
|
||||
router.push('/admin');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('登录失败，请稍后重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="bg-white rounded-2xl shadow-xl border border-gray-200 p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-[#C41E3A]">睿新致遠</h1>
|
||||
<p className="text-gray-600 mt-2">管理后台登录</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3 text-red-700">
|
||||
<AlertCircle className="h-5 w-5 flex-shrink-0" />
|
||||
<p className="text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
邮箱地址
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
placeholder="请输入邮箱"
|
||||
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
密码
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
<input
|
||||
id="password"
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
placeholder="请输入密码"
|
||||
className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent outline-none transition-all"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-3 px-4 bg-[#C41E3A] text-white font-medium rounded-lg hover:bg-[#a01830] focus:ring-2 focus:ring-offset-2 focus:ring-[#C41E3A] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<a href="/" className="text-sm text-gray-600 hover:text-[#C41E3A] transition-colors">
|
||||
← 返回首页
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-xs text-gray-500 mt-6">
|
||||
© {new Date().getFullYear()} 四川睿新致远科技有限公司 版权所有
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import AdminDashboard from './page';
|
||||
|
||||
jest.mock('@/lib/auth', () => ({
|
||||
auth: jest.fn().mockResolvedValue({
|
||||
user: { name: '测试用户' },
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('@/db', () => ({
|
||||
db: {
|
||||
select: jest.fn().mockReturnValue({
|
||||
from: jest.fn().mockReturnValue({
|
||||
where: jest.fn().mockReturnValue({
|
||||
orderBy: jest.fn().mockReturnValue({
|
||||
limit: jest.fn().mockResolvedValue([]),
|
||||
}),
|
||||
}),
|
||||
orderBy: jest.fn().mockReturnValue({
|
||||
limit: jest.fn().mockResolvedValue([]),
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock('next/link', () => {
|
||||
return ({ children, href }: { children: React.ReactNode; href: string }) => {
|
||||
return <a href={href}>{children}</a>;
|
||||
};
|
||||
});
|
||||
|
||||
describe('AdminDashboard', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render dashboard', async () => {
|
||||
const dashboard = await AdminDashboard();
|
||||
render(dashboard);
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
expect(heading).toBeInTheDocument();
|
||||
expect(heading).toHaveTextContent('仪表盘');
|
||||
});
|
||||
|
||||
it('should render welcome message', async () => {
|
||||
const dashboard = await AdminDashboard();
|
||||
render(dashboard);
|
||||
|
||||
const welcome = screen.getByText(/欢迎回来/i);
|
||||
expect(welcome).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render stat cards', async () => {
|
||||
const dashboard = await AdminDashboard();
|
||||
render(dashboard);
|
||||
|
||||
const totalContent = screen.getByText('总内容数');
|
||||
const published = screen.getByText('已发布');
|
||||
const draft = screen.getByText('草稿');
|
||||
const users = screen.getByText('用户数');
|
||||
|
||||
expect(totalContent).toBeInTheDocument();
|
||||
expect(published).toBeInTheDocument();
|
||||
expect(draft).toBeInTheDocument();
|
||||
expect(users).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render recent content section', async () => {
|
||||
const dashboard = await AdminDashboard();
|
||||
render(dashboard);
|
||||
|
||||
const recentContent = screen.getByText('最近内容');
|
||||
expect(recentContent).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render quick actions section', async () => {
|
||||
const dashboard = await AdminDashboard();
|
||||
render(dashboard);
|
||||
|
||||
const quickActions = screen.getByText('快捷操作');
|
||||
expect(quickActions).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation', () => {
|
||||
it('should have content management link', async () => {
|
||||
const dashboard = await AdminDashboard();
|
||||
render(dashboard);
|
||||
|
||||
const contentLink = screen.getByRole('link', { name: /总内容数/i });
|
||||
expect(contentLink).toBeInTheDocument();
|
||||
expect(contentLink).toHaveAttribute('href', '/admin/content');
|
||||
});
|
||||
|
||||
it('should have users link', async () => {
|
||||
const dashboard = await AdminDashboard();
|
||||
render(dashboard);
|
||||
|
||||
const usersLink = screen.getByRole('link', { name: /用户数/i });
|
||||
expect(usersLink).toBeInTheDocument();
|
||||
expect(usersLink).toHaveAttribute('href', '/admin/users');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,161 +0,0 @@
|
||||
import { auth } from '@/lib/auth';
|
||||
import { db } from '@/db';
|
||||
import { content, users } from '@/db/schema';
|
||||
import { desc, eq, sql } from 'drizzle-orm';
|
||||
import Link from 'next/link';
|
||||
import { FileText, Settings, Users, TrendingUp } from 'lucide-react';
|
||||
|
||||
async function getStats() {
|
||||
const [
|
||||
contentCount,
|
||||
publishedCount,
|
||||
draftCount,
|
||||
userCount,
|
||||
recentContent,
|
||||
] = await Promise.all([
|
||||
db.select({ count: sql<number>`count(*)` }).from(content),
|
||||
db.select({ count: sql<number>`count(*)` }).from(content).where(eq(content.status, 'published')),
|
||||
db.select({ count: sql<number>`count(*)` }).from(content).where(eq(content.status, 'draft')),
|
||||
db.select({ count: sql<number>`count(*)` }).from(users),
|
||||
db.select().from(content).orderBy(desc(content.createdAt)).limit(5),
|
||||
]);
|
||||
|
||||
return {
|
||||
contentCount: contentCount[0]?.count || 0,
|
||||
publishedCount: publishedCount[0]?.count || 0,
|
||||
draftCount: draftCount[0]?.count || 0,
|
||||
userCount: userCount[0]?.count || 0,
|
||||
recentContent,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function AdminDashboard() {
|
||||
const session = await auth();
|
||||
const stats = await getStats();
|
||||
|
||||
const statCards = [
|
||||
{
|
||||
name: '总内容数',
|
||||
value: stats.contentCount,
|
||||
icon: FileText,
|
||||
color: 'bg-blue-500',
|
||||
href: '/admin/content'
|
||||
},
|
||||
{
|
||||
name: '已发布',
|
||||
value: stats.publishedCount,
|
||||
icon: TrendingUp,
|
||||
color: 'bg-green-500',
|
||||
href: '/admin/content?status=published'
|
||||
},
|
||||
{
|
||||
name: '草稿',
|
||||
value: stats.draftCount,
|
||||
icon: FileText,
|
||||
color: 'bg-yellow-500',
|
||||
href: '/admin/content?status=draft'
|
||||
},
|
||||
{
|
||||
name: '用户数',
|
||||
value: stats.userCount,
|
||||
icon: Users,
|
||||
color: 'bg-purple-500',
|
||||
href: '/admin/users'
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">仪表盘</h1>
|
||||
<p className="text-gray-600 mt-1">欢迎回来，{session?.user?.name}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{statCards.map((stat) => (
|
||||
<Link
|
||||
key={stat.name}
|
||||
href={stat.href}
|
||||
className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">{stat.name}</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">{stat.value}</p>
|
||||
</div>
|
||||
<div className={`${stat.color} p-3 rounded-lg`}>
|
||||
<stat.icon className="h-6 w-6 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900">最近内容</h2>
|
||||
<Link
|
||||
href="/admin/content"
|
||||
className="text-sm text-[#C41E3A] hover:underline"
|
||||
>
|
||||
查看全部
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{stats.recentContent.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-8">暂无内容</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{stats.recentContent.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{item.title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{item.type} · {item.status === 'published' ? '已发布' : '草稿'}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
href={`/admin/content/${item.id}`}
|
||||
className="text-sm text-[#C41E3A] hover:underline ml-4"
|
||||
>
|
||||
编辑
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900">快捷操作</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Link
|
||||
href="/admin/content/new"
|
||||
className="flex flex-col items-center justify-center p-6 rounded-lg border-2 border-dashed border-gray-300 hover:border-[#C41E3A] hover:bg-red-50 transition-colors"
|
||||
>
|
||||
<FileText className="h-8 w-8 text-gray-400 mb-2" />
|
||||
<span className="text-sm font-medium text-gray-600">新建内容</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/admin/config"
|
||||
className="flex flex-col items-center justify-center p-6 rounded-lg border-2 border-dashed border-gray-300 hover:border-[#C41E3A] hover:bg-red-50 transition-colors"
|
||||
>
|
||||
<Settings className="h-8 w-8 text-gray-400 mb-2" />
|
||||
<span className="text-sm font-medium text-gray-600">配置中心</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
import { describe, it, expect, jest, beforeAll, afterEach } from '@jest/globals';
|
||||
import React from 'react';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import SecurityDashboard from './page';
|
||||
|
||||
jest.mock('lucide-react', () => ({
|
||||
Shield: () => <span data-testid="shield-icon" />,
|
||||
AlertTriangle: () => <span data-testid="alert-icon" />,
|
||||
Activity: () => <span data-testid="activity-icon" />,
|
||||
Lock: () => <span data-testid="lock-icon" />,
|
||||
RefreshCw: () => <span data-testid="refresh-cw-icon" />,
|
||||
TrendingUp: () => <span data-testid="trending-up-icon" />,
|
||||
TrendingDown: () => <span data-testid="trending-down-icon" />,
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/button', () => ({
|
||||
Button: ({ children, disabled, ...props }: any) => (
|
||||
<button disabled={disabled} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock('@/components/ui/card', () => ({
|
||||
Card: ({ children }: any) => <div data-testid="card">{children}</div>,
|
||||
CardHeader: ({ children }: any) => <div data-testid="card-header">{children}</div>,
|
||||
CardTitle: ({ children }: any) => <h3 data-testid="card-title">{children}</h3>,
|
||||
CardContent: ({ children }: any) => <div data-testid="card-content">{children}</div>,
|
||||
}));
|
||||
|
||||
global.fetch = jest.fn(() =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
json: () => Promise.resolve({
|
||||
success: true,
|
||||
logs: [
|
||||
{
|
||||
id: '1',
|
||||
timestamp: Date.now(),
|
||||
type: 'captcha',
|
||||
severity: 'high',
|
||||
message: '验证码验证失败',
|
||||
ip: '192.168.1.1',
|
||||
},
|
||||
],
|
||||
stats: {
|
||||
totalRequests: 100,
|
||||
blockedRequests: 5,
|
||||
captchaAttempts: 10,
|
||||
rateLimitHits: 3,
|
||||
maliciousContentDetected: 2,
|
||||
successRate: 95,
|
||||
},
|
||||
}),
|
||||
} as Response)
|
||||
);
|
||||
|
||||
describe('SecurityDashboard', () => {
|
||||
beforeAll(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render security dashboard', () => {
|
||||
render(<SecurityDashboard />);
|
||||
expect(screen.getByText('安全监控仪表板')).toBeInTheDocument();
|
||||
expect(screen.getByText('实时监控网站安全状态和威胁检测')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render all stat cards', () => {
|
||||
render(<SecurityDashboard />);
|
||||
expect(screen.getByText('总请求数')).toBeInTheDocument();
|
||||
expect(screen.getByText('已拦截请求')).toBeInTheDocument();
|
||||
expect(screen.getByText('验证码尝试')).toBeInTheDocument();
|
||||
expect(screen.getByText('频率限制命中')).toBeInTheDocument();
|
||||
expect(screen.getByText('恶意内容检测')).toBeInTheDocument();
|
||||
expect(screen.getByText('成功率')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display stats values', async () => {
|
||||
render(<SecurityDashboard />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('100')).toBeInTheDocument();
|
||||
expect(screen.getByText('5')).toBeInTheDocument();
|
||||
expect(screen.getByText('10')).toBeInTheDocument();
|
||||
expect(screen.getByText('3')).toBeInTheDocument();
|
||||
expect(screen.getByText('2')).toBeInTheDocument();
|
||||
expect(screen.getByText('95%')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Security Logs', () => {
|
||||
it('should render security logs section', async () => {
|
||||
render(<SecurityDashboard />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('安全日志')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display log entries', async () => {
|
||||
render(<SecurityDashboard />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('验证码验证失败')).toBeInTheDocument();
|
||||
expect(screen.getByText('IP: 192.168.1.1')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have filter buttons', () => {
|
||||
render(<SecurityDashboard />);
|
||||
expect(screen.getByText('全部')).toBeInTheDocument();
|
||||
expect(screen.getByText('高危')).toBeInTheDocument();
|
||||
expect(screen.getByText('中危')).toBeInTheDocument();
|
||||
expect(screen.getByText('低危')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Refresh Functionality', () => {
|
||||
it('should have refresh button', async () => {
|
||||
render(<SecurityDashboard />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('refresh-cw-icon')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should call fetch when refresh is clicked', async () => {
|
||||
render(<SecurityDashboard />);
|
||||
|
||||
await waitFor(() => {
|
||||
const refreshButton = screen.getAllByRole('button')[0];
|
||||
expect(refreshButton).not.toBeDisabled();
|
||||
|
||||
refreshButton.click();
|
||||
|
||||
expect(global.fetch).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,271 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Shield, AlertTriangle, Activity, Lock, RefreshCw, TrendingUp, TrendingDown } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
interface SecurityLog {
|
||||
id: string;
|
||||
timestamp: number;
|
||||
type: 'captcha' | 'rate_limit' | 'sanitization' | 'malicious_content';
|
||||
severity: 'low' | 'medium' | 'high';
|
||||
message: string;
|
||||
ip?: string;
|
||||
email?: string;
|
||||
}
|
||||
|
||||
interface SecurityStats {
|
||||
totalRequests: number;
|
||||
blockedRequests: number;
|
||||
captchaAttempts: number;
|
||||
rateLimitHits: number;
|
||||
maliciousContentDetected: number;
|
||||
successRate: number;
|
||||
}
|
||||
|
||||
export default function SecurityDashboard() {
|
||||
const [logs, setLogs] = useState<SecurityLog[]>([]);
|
||||
const [stats, setStats] = useState<SecurityStats>({
|
||||
totalRequests: 0,
|
||||
blockedRequests: 0,
|
||||
captchaAttempts: 0,
|
||||
rateLimitHits: 0,
|
||||
maliciousContentDetected: 0,
|
||||
successRate: 100,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<'all' | 'high' | 'medium' | 'low'>('all');
|
||||
|
||||
useEffect(() => {
|
||||
fetchSecurityData();
|
||||
}, []);
|
||||
|
||||
const fetchSecurityData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch('/api/admin/security');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setLogs(data.logs || []);
|
||||
setStats(data.stats || {
|
||||
totalRequests: 0,
|
||||
blockedRequests: 0,
|
||||
captchaAttempts: 0,
|
||||
rateLimitHits: 0,
|
||||
maliciousContentDetected: 0,
|
||||
successRate: 100,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch security data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getSeverityColor = (severity: string) => {
|
||||
switch (severity) {
|
||||
case 'high':
|
||||
return 'text-red-600 bg-red-50';
|
||||
case 'medium':
|
||||
return 'text-yellow-600 bg-yellow-50';
|
||||
case 'low':
|
||||
return 'text-blue-600 bg-blue-50';
|
||||
default:
|
||||
return 'text-gray-600 bg-gray-50';
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'captcha':
|
||||
return <Lock className="w-4 h-4" />;
|
||||
case 'rate_limit':
|
||||
return <Activity className="w-4 h-4" />;
|
||||
case 'sanitization':
|
||||
return <Shield className="w-4 h-4" />;
|
||||
case 'malicious_content':
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const filteredLogs = filter === 'all'
|
||||
? logs
|
||||
: logs.filter(log => log.severity === filter);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-6">
|
||||
<div className="max-w-7xl mx-auto space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">安全监控仪表板</h1>
|
||||
<p className="text-gray-600 mt-1">实时监控网站安全状态和威胁检测</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={fetchSecurityData}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
size="icon"
|
||||
>
|
||||
<RefreshCw className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-600">总请求数</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-gray-900">{stats.totalRequests}</div>
|
||||
<div className="flex items-center text-sm text-green-600 mt-2">
|
||||
<TrendingUp className="w-4 h-4 mr-1" />
|
||||
<span>实时统计</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-600">已拦截请求</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-red-600">{stats.blockedRequests}</div>
|
||||
<div className="flex items-center text-sm text-gray-600 mt-2">
|
||||
<span>安全防护生效</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-600">验证码尝试</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-blue-600">{stats.captchaAttempts}</div>
|
||||
<div className="flex items-center text-sm text-gray-600 mt-2">
|
||||
<span>人机验证</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-600">频率限制命中</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-yellow-600">{stats.rateLimitHits}</div>
|
||||
<div className="flex items-center text-sm text-gray-600 mt-2">
|
||||
<span>防刷机制</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-600">恶意内容检测</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-purple-600">{stats.maliciousContentDetected}</div>
|
||||
<div className="flex items-center text-sm text-gray-600 mt-2">
|
||||
<span>内容过滤</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm font-medium text-gray-600">成功率</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold text-green-600">{stats.successRate}%</div>
|
||||
<div className="flex items-center text-sm text-gray-600 mt-2">
|
||||
<TrendingDown className="w-4 h-4 mr-1" />
|
||||
<span>正常请求比例</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>安全日志</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={filter === 'all' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('all')}
|
||||
>
|
||||
全部
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'high' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('high')}
|
||||
>
|
||||
高危
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'medium' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('medium')}
|
||||
>
|
||||
中危
|
||||
</Button>
|
||||
<Button
|
||||
variant={filter === 'low' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setFilter('low')}
|
||||
>
|
||||
低危
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-gray-400" />
|
||||
</div>
|
||||
) : filteredLogs.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<Shield className="w-12 h-12 mx-auto mb-4 text-gray-300" />
|
||||
<p>暂无安全日志</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{filteredLogs.map((log) => (
|
||||
<div
|
||||
key={log.id}
|
||||
className="flex items-start gap-3 p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className={`flex-shrink-0 p-2 rounded-full ${getSeverityColor(log.severity)}`}>
|
||||
{getTypeIcon(log.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="font-medium text-gray-900">{log.message}</span>
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full ${getSeverityColor(log.severity)}`}>
|
||||
{log.severity === 'high' ? '高危' : log.severity === 'medium' ? '中危' : '低危'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-600">
|
||||
<span>{new Date(log.timestamp).toLocaleString('zh-CN')}</span>
|
||||
{log.ip && <span>IP: {log.ip}</span>}
|
||||
{log.email && <span>邮箱: {log.email}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import SettingsPage from './page';
|
||||
|
||||
global.fetch = jest.fn();
|
||||
|
||||
describe('SettingsPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(global.fetch as jest.Mock).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
configs: [
|
||||
{
|
||||
id: 'test-config',
|
||||
key: 'test.key',
|
||||
value: { enabled: true },
|
||||
category: 'feature',
|
||||
description: 'Test config',
|
||||
updatedAt: '2024-01-01',
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render settings page', () => {
|
||||
render(<SettingsPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render page content', () => {
|
||||
render(<SettingsPage />);
|
||||
const content = document.querySelector('main') || document.body.firstChild;
|
||||
expect(content).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Functionality', () => {
|
||||
it('should fetch configs on mount', async () => {
|
||||
render(<SettingsPage />);
|
||||
|
||||
expect(global.fetch).toHaveBeenCalledWith('/api/admin/config');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have accessible content', () => {
|
||||
render(<SettingsPage />);
|
||||
|
||||
const content = document.body;
|
||||
expect(content).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,278 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Save,
|
||||
RefreshCw,
|
||||
Loader2,
|
||||
ChevronDown,
|
||||
ChevronUp
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ConfigItem {
|
||||
id: string;
|
||||
key: string;
|
||||
value: Record<string, any>;
|
||||
category: 'feature' | 'style' | 'seo' | 'general';
|
||||
description: string | null;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
const categoryLabels = {
|
||||
feature: '功能配置',
|
||||
style: '样式配置',
|
||||
seo: 'SEO 配置',
|
||||
general: '常规配置'
|
||||
};
|
||||
|
||||
const categoryColors = {
|
||||
feature: 'bg-blue-100 text-blue-800',
|
||||
style: 'bg-purple-100 text-purple-800',
|
||||
seo: 'bg-green-100 text-green-800',
|
||||
general: 'bg-gray-100 text-gray-800'
|
||||
};
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [configs, setConfigs] = useState<ConfigItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState<string | null>(null);
|
||||
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['feature', 'seo']));
|
||||
const [editedValues, setEditedValues] = useState<Record<string, Record<string, any>>>({});
|
||||
|
||||
useEffect(() => {
|
||||
fetchConfigs();
|
||||
}, []);
|
||||
|
||||
const fetchConfigs = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await fetch('/api/admin/config');
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setConfigs(data.configs || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取配置失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async (configId: string) => {
|
||||
const editedValue = editedValues[configId];
|
||||
if (!editedValue) return;
|
||||
|
||||
try {
|
||||
setSaving(configId);
|
||||
const res = await fetch('/api/admin/config', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
id: configId,
|
||||
value: editedValue
|
||||
})
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setEditedValues(prev => {
|
||||
const updated = { ...prev };
|
||||
delete updated[configId];
|
||||
return updated;
|
||||
});
|
||||
await fetchConfigs();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存配置失败:', error);
|
||||
} finally {
|
||||
setSaving(null);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleCategory = (category: string) => {
|
||||
setExpandedCategories(prev => {
|
||||
const updated = new Set(prev);
|
||||
if (updated.has(category)) {
|
||||
updated.delete(category);
|
||||
} else {
|
||||
updated.add(category);
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const handleValueChange = (configId: string, field: string, value: any) => {
|
||||
setEditedValues(prev => ({
|
||||
...prev,
|
||||
[configId]: {
|
||||
...prev[configId],
|
||||
[field]: value
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const getConfigValue = (config: ConfigItem, field: string) => {
|
||||
if (editedValues[config.id]?.[field] !== undefined) {
|
||||
return editedValues[config.id]![field];
|
||||
}
|
||||
return config.value[field];
|
||||
};
|
||||
|
||||
const hasChanges = (configId: string) => {
|
||||
return editedValues[configId] && Object.keys(editedValues[configId]).length > 0;
|
||||
};
|
||||
|
||||
const groupedConfigs = configs.reduce((acc, config) => {
|
||||
if (!acc[config.category]) {
|
||||
acc[config.category] = [];
|
||||
}
|
||||
acc[config.category]!.push(config);
|
||||
return acc;
|
||||
}, {} as Record<string, ConfigItem[]>);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">配置中心</h1>
|
||||
<p className="text-gray-600 mt-1">管理网站功能和样式配置</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={fetchConfigs}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{Object.entries(groupedConfigs).map(([category, categoryConfigs]) => (
|
||||
<div key={category} className="bg-white rounded-lg border overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleCategory(category)}
|
||||
className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${categoryColors[category as keyof typeof categoryColors]}`}>
|
||||
{categoryLabels[category as keyof typeof categoryLabels]}
|
||||
</span>
|
||||
<span className="text-gray-600 text-sm">
|
||||
{categoryConfigs.length} 项配置
|
||||
</span>
|
||||
</div>
|
||||
{expandedCategories.has(category) ? (
|
||||
<ChevronUp className="h-5 w-5 text-gray-400" />
|
||||
) : (
|
||||
<ChevronDown className="h-5 w-5 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{expandedCategories.has(category) && (
|
||||
<div className="border-t divide-y">
|
||||
{categoryConfigs.map(config => (
|
||||
<div key={config.id} className="p-4">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">{config.key}</h3>
|
||||
{config.description && (
|
||||
<p className="text-sm text-gray-600 mt-1">{config.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{hasChanges(config.id) && (
|
||||
<button
|
||||
onClick={() => handleSave(config.id)}
|
||||
disabled={saving === config.id}
|
||||
className="flex items-center gap-2 px-3 py-1.5 bg-[#C41E3A] text-white rounded-lg hover:bg-[#A01830] transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving === config.id ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="h-4 w-4" />
|
||||
)}
|
||||
保存
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{Object.entries(config.value).map(([field, value]) => {
|
||||
const currentValue = getConfigValue(config, field);
|
||||
|
||||
return (
|
||||
<div key={field} className="flex items-start gap-4">
|
||||
<label className="w-32 text-sm font-medium text-gray-700 pt-2">
|
||||
{field}
|
||||
</label>
|
||||
<div className="flex-1">
|
||||
{typeof value === 'boolean' ? (
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={currentValue}
|
||||
onChange={(e) => handleValueChange(config.id, field, e.target.checked)}
|
||||
className="w-4 h-4 text-[#C41E3A] border-gray-300 rounded focus:ring-[#C41E3A]"
|
||||
/>
|
||||
<span className="text-sm text-gray-600">
|
||||
{currentValue ? '已启用' : '已禁用'}
|
||||
</span>
|
||||
</label>
|
||||
) : typeof value === 'string' ? (
|
||||
<input
|
||||
type="text"
|
||||
value={currentValue}
|
||||
onChange={(e) => handleValueChange(config.id, field, e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent"
|
||||
/>
|
||||
) : typeof value === 'number' ? (
|
||||
<input
|
||||
type="number"
|
||||
value={currentValue}
|
||||
onChange={(e) => handleValueChange(config.id, field, Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent"
|
||||
/>
|
||||
) : Array.isArray(value) ? (
|
||||
<textarea
|
||||
value={Array.isArray(currentValue) ? currentValue.join('\n') : currentValue}
|
||||
onChange={(e) => handleValueChange(config.id, field, e.target.value.split('\n').filter(Boolean))}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent font-mono text-sm"
|
||||
placeholder="每行一个值"
|
||||
/>
|
||||
) : (
|
||||
<textarea
|
||||
value={JSON.stringify(currentValue, null, 2)}
|
||||
onChange={(e) => {
|
||||
try {
|
||||
const parsed = JSON.parse(e.target.value);
|
||||
handleValueChange(config.id, field, parsed);
|
||||
} catch (err) {
|
||||
// Invalid JSON, ignore
|
||||
}
|
||||
}}
|
||||
rows={5}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent font-mono text-sm"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import UsersPage from './page';
|
||||
|
||||
global.fetch = jest.fn();
|
||||
|
||||
describe('UsersPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(global.fetch as jest.Mock).mockResolvedValue({
|
||||
ok: true,
|
||||
json: async () => ({
|
||||
users: [
|
||||
{
|
||||
id: 'test-user',
|
||||
email: 'test@example.com',
|
||||
name: 'Test User',
|
||||
role: 'admin',
|
||||
createdAt: '2024-01-01',
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render users page', () => {
|
||||
render(<UsersPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render page content', () => {
|
||||
render(<UsersPage />);
|
||||
const content = document.querySelector('main') || document.body.firstChild;
|
||||
expect(content).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render add user button', () => {
|
||||
render(<UsersPage />);
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Functionality', () => {
|
||||
it('should fetch users on mount', async () => {
|
||||
render(<UsersPage />);
|
||||
|
||||
expect(global.fetch).toHaveBeenCalledWith('/api/admin/users');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper heading hierarchy', () => {
|
||||
render(<UsersPage />);
|
||||
|
||||
const container = document.body;
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,422 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Users as UsersIcon,
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
Loader2,
|
||||
Search
|
||||
} from 'lucide-react';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
role: 'admin' | 'editor' | 'viewer';
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
const roleLabels = {
|
||||
admin: '管理员',
|
||||
editor: '编辑',
|
||||
viewer: '查看者'
|
||||
};
|
||||
|
||||
const roleColors = {
|
||||
admin: 'bg-red-100 text-red-800',
|
||||
editor: 'bg-blue-100 text-blue-800',
|
||||
viewer: 'bg-gray-100 text-gray-800'
|
||||
};
|
||||
|
||||
export default function UsersPage() {
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
name: '',
|
||||
password: '',
|
||||
role: 'viewer' as 'admin' | 'editor' | 'viewer'
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await fetch('/api/admin/users');
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setUsers(data.users || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!formData.email || !formData.name || !formData.password || !formData.role) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
const res = await fetch('/api/admin/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setShowCreateModal(false);
|
||||
setFormData({ email: '', name: '', password: '', role: 'viewer' });
|
||||
await fetchUsers();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.error || '创建失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建用户失败:', error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (userId: string) => {
|
||||
if (deletingUserId) {
|
||||
console.log('删除操作正在进行中，请勿重复点击');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm('确定要删除此用户吗？此操作不可恢复。')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setDeletingUserId(userId);
|
||||
const res = await fetch(`/api/admin/users/${userId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
await fetchUsers();
|
||||
} else {
|
||||
const data = await res.json();
|
||||
alert(data.error || '删除失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除用户失败:', error);
|
||||
alert('删除失败，请稍后重试');
|
||||
} finally {
|
||||
setDeletingUserId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredUsers = users.filter(user =>
|
||||
user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
user.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">用户管理</h1>
|
||||
<p className="text-gray-600 mt-1">管理系统用户和权限</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-[#C41E3A] text-white rounded-lg hover:bg-[#A01830] transition-colors"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
添加用户
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border">
|
||||
<div className="p-4 border-b">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="搜索用户..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A] focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
用户信息
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
角色
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
创建时间
|
||||
</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
操作
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredUsers.map(user => (
|
||||
<tr key={user.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
|
||||
<UsersIcon className="h-5 w-5 text-gray-600" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-gray-900">{user.name}</div>
|
||||
<div className="text-sm text-gray-500">{user.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${roleColors[user.role]}`}>
|
||||
{roleLabels[user.role]}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{new Date(user.createdAt).toLocaleDateString('zh-CN')}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedUser(user);
|
||||
setFormData({
|
||||
email: user.email,
|
||||
name: user.name,
|
||||
password: '',
|
||||
role: user.role
|
||||
});
|
||||
setShowEditModal(true);
|
||||
}}
|
||||
className="text-[#C41E3A] hover:text-[#A01830] mr-4"
|
||||
>
|
||||
<Edit className="h-4 w-4 inline" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete(user.id);
|
||||
}}
|
||||
disabled={deletingUserId === user.id}
|
||||
className="text-red-600 hover:text-red-800 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{deletingUserId === user.id ? (
|
||||
<Loader2 className="h-4 w-4 inline animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-4 w-4 inline" />
|
||||
)}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{filteredUsers.length === 0 && (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
暂无用户数据
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||
<h2 className="text-xl font-bold mb-4">添加用户</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">角色</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={(e) => setFormData({ ...formData, role: e.target.value as any })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
>
|
||||
<option value="viewer">查看者</option>
|
||||
<option value="editor">编辑</option>
|
||||
<option value="admin">管理员</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowCreateModal(false);
|
||||
setFormData({ email: '', name: '', password: '', role: 'viewer' });
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCreate}
|
||||
disabled={saving}
|
||||
className="px-4 py-2 bg-[#C41E3A] text-white rounded-lg hover:bg-[#A01830] disabled:opacity-50"
|
||||
>
|
||||
{saving ? '创建中...' : '创建'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Modal */}
|
||||
{showEditModal && selectedUser && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-full max-w-md">
|
||||
<h2 className="text-xl font-bold mb-4">编辑用户</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">新密码（留空则不修改）</label>
|
||||
<input
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">角色</label>
|
||||
<select
|
||||
value={formData.role}
|
||||
onChange={(e) => setFormData({ ...formData, role: e.target.value as any })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#C41E3A]"
|
||||
>
|
||||
<option value="viewer">查看者</option>
|
||||
<option value="editor">编辑</option>
|
||||
<option value="admin">管理员</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowEditModal(false);
|
||||
setSelectedUser(null);
|
||||
setFormData({ email: '', name: '', password: '', role: 'viewer' });
|
||||
}}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
const updateData: any = {
|
||||
email: formData.email,
|
||||
name: formData.name,
|
||||
role: formData.role
|
||||
};
|
||||
if (formData.password) {
|
||||
updateData.password = formData.password;
|
||||
}
|
||||
|
||||
const res = await fetch(`/api/admin/users/${selectedUser.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(updateData)
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setShowEditModal(false);
|
||||
setSelectedUser(null);
|
||||
setFormData({ email: '', name: '', password: '', role: 'viewer' });
|
||||
await fetchUsers();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新用户失败:', error);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}}
|
||||
disabled={saving}
|
||||
className="px-4 py-2 bg-[#C41E3A] text-white rounded-lg hover:bg-[#A01830] disabled:opacity-50"
|
||||
>
|
||||
{saving ? '保存中...' : '保存'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user