80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { Button } from '@nice/ui/components/button';
|
|||
|
|
import { Tabs, TabsContent } from '@nice/ui/components/tabs';
|
|||
|
|
import { IconDownload, IconPlus } from '@tabler/icons-react';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
ArticleToolbar,
|
|||
|
|
ArticleTable,
|
|||
|
|
ArticlePagination,
|
|||
|
|
ArticlesProvider,
|
|||
|
|
useArticlesContext,
|
|||
|
|
} from '@/components/articles';
|
|||
|
|
import { useRouter } from 'next/navigation';
|
|||
|
|
import React from 'react';
|
|||
|
|
import { useSetPageInfo } from '@/components/providers/dashboard-provider';
|
|||
|
|
|
|||
|
|
// 页面内容组件
|
|||
|
|
function ArticlesPageContent() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const { filters, updateFilters } = useArticlesContext();
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 检查是否有筛选条件
|
|||
|
|
const hasFilters = filters.searchTerm !== '' || filters.statusFilter !== 'all' || filters.categoryFilter !== 'all';
|
|||
|
|
|
|||
|
|
// 新建文章
|
|||
|
|
const handleCreateArticle = () => {
|
|||
|
|
router.push('/editor');
|
|||
|
|
};
|
|||
|
|
useSetPageInfo({
|
|||
|
|
title: '文章管理',
|
|||
|
|
subtitle: '创建、编辑和管理您的文章内容',
|
|||
|
|
rightContent: (
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Button variant="outline" size="sm" className="h-9 px-3">
|
|||
|
|
<IconDownload className="h-4 w-4 mr-2" />
|
|||
|
|
导出
|
|||
|
|
</Button>
|
|||
|
|
<Button size="sm" className="h-9 px-4" onClick={handleCreateArticle}>
|
|||
|
|
<IconPlus className="h-4 w-4 mr-2" />
|
|||
|
|
新建文章
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
})
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-1 flex-col">
|
|||
|
|
{/* 统一工具栏 */}
|
|||
|
|
<Tabs
|
|||
|
|
value={filters.statusFilter}
|
|||
|
|
onValueChange={(value) => updateFilters({ statusFilter: value })}
|
|||
|
|
className="flex flex-1 flex-col"
|
|||
|
|
>
|
|||
|
|
<ArticleToolbar
|
|||
|
|
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<TabsContent value={filters.statusFilter} className="flex flex-1 flex-col">
|
|||
|
|
<div className="flex flex-1 flex-col overflow-hidden">
|
|||
|
|
<ArticleTable hasFilters={hasFilters} />
|
|||
|
|
|
|||
|
|
<ArticlePagination />
|
|||
|
|
</div>
|
|||
|
|
</TabsContent>
|
|||
|
|
</Tabs>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 主页面组件，包装Provider
|
|||
|
|
export default function ArticlesPage() {
|
|||
|
|
return (
|
|||
|
|
<ArticlesProvider>
|
|||
|
|
<ArticlesPageContent />
|
|||
|
|
</ArticlesProvider>
|
|||
|
|
);
|
|||
|
|
}
|