83 lines
2.7 KiB
TypeScript
Executable File
83 lines
2.7 KiB
TypeScript
Executable File
import { useState } from 'react';
|
|
import { Button } from '@nice/ui/components/button';
|
|
import { Checkbox } from '@nice/ui/components/checkbox';
|
|
import { Input } from '@nice/ui/components/input';
|
|
import { Label } from '@nice/ui/components/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@nice/ui/components/select';
|
|
import { TableCell, TableRow } from '@nice/ui/components/table';
|
|
import { IconCheck, IconX } from '@tabler/icons-react';
|
|
import { useArticlesContext } from './context';
|
|
import type { Article } from '@fenghuo/common';
|
|
|
|
interface ArticleQuickEditProps {
|
|
article: Article;
|
|
}
|
|
|
|
export function ArticleQuickEdit({ article }: ArticleQuickEditProps) {
|
|
const { handleQuickEditSave, setQuickEditId } = useArticlesContext();
|
|
|
|
const [title, setTitle] = useState(article.title);
|
|
const [status, setStatus] = useState(article.status);
|
|
|
|
const handleSave = () => {
|
|
handleQuickEditSave(article.id, { title, status });
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setQuickEditId(null);
|
|
};
|
|
|
|
return (
|
|
<TableRow className="bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30">
|
|
<TableCell className="py-4">
|
|
<Checkbox disabled className="opacity-50" />
|
|
</TableCell>
|
|
<TableCell colSpan={4} className="py-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label htmlFor="edit-title" className="text-xs font-medium text-muted-foreground">
|
|
标题
|
|
</Label>
|
|
<Input
|
|
id="edit-title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="文章标题"
|
|
className="mt-1 font-medium"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
<div className="flex-1">
|
|
<Label htmlFor="edit-status" className="text-xs font-medium text-muted-foreground">
|
|
状态
|
|
</Label>
|
|
<Select value={status} onValueChange={(value) => setStatus(value as Article['status'])}>
|
|
<SelectTrigger id="edit-status" className="mt-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="draft">草稿</SelectItem>
|
|
<SelectItem value="published">已发布</SelectItem>
|
|
<SelectItem value="archived">已归档</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell colSpan={3} className="py-4">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button size="sm" onClick={handleSave} className="h-8">
|
|
<IconCheck className="h-3 w-3 mr-1" />
|
|
保存
|
|
</Button>
|
|
<Button size="sm" variant="outline" onClick={handleCancel} className="h-8">
|
|
<IconX className="h-3 w-3 mr-1" />
|
|
取消
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|