张翔
6d92024b63
- 修复API测试认证问题：创建全局认证设置，更新Playwright配置 - 优化回归测试稳定性：增加超时时间到15秒，修复定位器 - 创建Woodpecker CI工作流：CI、部署和质量门禁配置 - 添加Jest配置和测试脚本 - 移除登录页面的默认账号密码显示（安全问题修复）
325 lines
12 KiB
TypeScript
325 lines
12 KiB
TypeScript
'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>
|
||
);
|
||
}
|