80 lines
2.0 KiB
TypeScript
Executable File
80 lines
2.0 KiB
TypeScript
Executable File
'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>
|
||
);
|
||
}
|