81 lines
2.8 KiB
TypeScript
Executable File
81 lines
2.8 KiB
TypeScript
Executable File
import { Badge } from '@nice/ui/components/badge';
|
|
import { Button } from '@nice/ui/components/button';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nice/ui/components/select';
|
|
import { Tabs, TabsList, TabsTrigger } from '@nice/ui/components/tabs';
|
|
import { BATCH_ACTIONS } from '@/lib/articles/constants';
|
|
import { useArticlesContext } from './context';
|
|
|
|
export function ArticleStatusTabs() {
|
|
const { selectedArticles, batchAction, stats, setBatchAction, handleBatchAction, resetSelection } =
|
|
useArticlesContext();
|
|
|
|
return (
|
|
<div className="px-6 pt-2 pb-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<TabsList className="grid w-auto grid-cols-5">
|
|
<TabsTrigger value="all" className="px-4">
|
|
全部{' '}
|
|
<Badge variant="secondary" className="ml-2 text-xs">
|
|
{stats.all}
|
|
</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="published" className="px-4">
|
|
已发布{' '}
|
|
<Badge variant="secondary" className="ml-2 text-xs">
|
|
{stats.published}
|
|
</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="draft" className="px-4">
|
|
草稿{' '}
|
|
<Badge variant="secondary" className="ml-2 text-xs">
|
|
{stats.draft}
|
|
</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="archived" className="px-4">
|
|
已归档{' '}
|
|
<Badge variant="secondary" className="ml-2 text-xs">
|
|
{stats.archived}
|
|
</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="trash" className="px-4">
|
|
已删除{' '}
|
|
<Badge variant="secondary" className="ml-2 text-xs">
|
|
{stats.deleted}
|
|
</Badge>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 批量操作 */}
|
|
{selectedArticles.length > 0 && (
|
|
<div className="flex items-center gap-3 p-3 bg-primary/5 border border-primary/20 rounded-lg dark:bg-primary/10 dark:border-primary/30">
|
|
<span className="text-sm font-medium text-primary dark:text-primary-foreground whitespace-nowrap">
|
|
已选择 {selectedArticles.length} 篇
|
|
</span>
|
|
<Select value={batchAction} onValueChange={setBatchAction}>
|
|
<SelectTrigger className="w-36 h-8">
|
|
<SelectValue placeholder="批量操作" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{BATCH_ACTIONS.map((action) => (
|
|
<SelectItem key={action.value} value={action.value}>
|
|
<div className="flex items-center gap-2">
|
|
<action.icon className="h-3 w-3" />
|
|
{action.label}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Button size="sm" onClick={handleBatchAction} disabled={!batchAction} className="h-8">
|
|
执行
|
|
</Button>
|
|
<Button size="sm" variant="outline" onClick={resetSelection} className="h-8">
|
|
取消
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|