0.0.0.4
This commit is contained in:
freedakgmail
@@ -0,0 +1,208 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||||
import { Plus, Edit, Trash, BookOpen, Calendar } from "lucide-react"
|
||||
import type { FamilyStory } from "@/types/family"
|
||||
import { v4 as uuidv4 } from "uuid"
|
||||
|
||||
interface StoryManagerProps {
|
||||
stories?: FamilyStory[]
|
||||
onChange: (stories: FamilyStory[]) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
|
||||
export function StoryManager({ stories = [], onChange, readonly = false }: StoryManagerProps) {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
const [editingStory, setEditingStory] = useState<FamilyStory | null>(null)
|
||||
const [formData, setFormData] = useState<Partial<FamilyStory>>({
|
||||
title: "",
|
||||
content: "",
|
||||
date: "",
|
||||
})
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingStory(null)
|
||||
setFormData({ title: "", content: "", date: "" })
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleEdit = (story: FamilyStory) => {
|
||||
setEditingStory(story)
|
||||
setFormData(story)
|
||||
setIsDialogOpen(true)
|
||||
}
|
||||
|
||||
const handleDelete = (storyId: string) => {
|
||||
if (confirm("确定要删除这个故事吗？")) {
|
||||
onChange(stories.filter(s => s.id !== storyId))
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
if (!formData.title || !formData.content) {
|
||||
alert("请填写标题和内容")
|
||||
return
|
||||
}
|
||||
|
||||
const now = new Date().toISOString()
|
||||
|
||||
if (editingStory) {
|
||||
// 更新现有故事
|
||||
onChange(
|
||||
stories.map(s =>
|
||||
s.id === editingStory.id
|
||||
? { ...s, ...formData, updatedAt: now }
|
||||
: s
|
||||
)
|
||||
)
|
||||
} else {
|
||||
// 添加新故事
|
||||
const newStory: FamilyStory = {
|
||||
id: uuidv4(),
|
||||
title: formData.title!,
|
||||
content: formData.content!,
|
||||
date: formData.date,
|
||||
imageIds: formData.imageIds || [],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
}
|
||||
onChange([...stories, newStory])
|
||||
}
|
||||
|
||||
setIsDialogOpen(false)
|
||||
setFormData({ title: "", content: "", date: "" })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-medium flex items-center gap-2">
|
||||
<BookOpen className="h-4 w-4" />
|
||||
家族故事 ({stories.length})
|
||||
</h3>
|
||||
{!readonly && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleAdd}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
添加故事
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{stories.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{stories
|
||||
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
|
||||
.map((story) => (
|
||||
<Card key={story.id} className="hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-lg font-serif">{story.title}</CardTitle>
|
||||
{story.date && (
|
||||
<div className="flex items-center gap-1 text-sm text-muted-foreground mt-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{story.date}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!readonly && (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => handleEdit(story)}
|
||||
>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => handleDelete(story.id)}
|
||||
>
|
||||
<Trash className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground whitespace-pre-line leading-relaxed">
|
||||
{story.content}
|
||||
</p>
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
创建于 {new Date(story.createdAt).toLocaleDateString('zh-CN')}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-muted-foreground text-sm border border-dashed rounded-lg">
|
||||
暂无家族故事
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 添加/编辑故事对话框 */}
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingStory ? "编辑故事" : "添加故事"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="story-title">故事标题 *</Label>
|
||||
<Input
|
||||
id="story-title"
|
||||
placeholder="例如：爷爷的创业故事"
|
||||
value={formData.title || ""}
|
||||
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="story-date">发生日期（可选）</Label>
|
||||
<Input
|
||||
id="story-date"
|
||||
type="date"
|
||||
value={formData.date || ""}
|
||||
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="story-content">故事内容 *</Label>
|
||||
<Textarea
|
||||
id="story-content"
|
||||
placeholder="记录家族的珍贵故事..."
|
||||
className="min-h-[200px]"
|
||||
value={formData.content || ""}
|
||||
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
{editingStory ? "保存" : "添加"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user