freedakgmail
334 lines
16 KiB
TypeScript
334 lines
16 KiB
TypeScript
"use client"
|
||
|
||
import { useEffect } from "react"
|
||
import { useSession } from "next-auth/react"
|
||
import { useRouter } from "next/navigation"
|
||
import { SiteHeader } from "@/components/site-header"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Button } from "@/components/ui/button"
|
||
import { BookOpen, Users, Network, Settings, Shield, FileText } from "lucide-react"
|
||
|
||
export default function HelpPage() {
|
||
const { data: session, status, update } = useSession()
|
||
const router = useRouter()
|
||
|
||
useEffect(() => {
|
||
if (status !== "authenticated") return
|
||
if (session?.user?.hasSeenHelp) return
|
||
|
||
const markHelpSeen = async () => {
|
||
try {
|
||
const response = await fetch("/api/users/me/seen-help", {
|
||
method: "PATCH",
|
||
})
|
||
|
||
if (!response.ok) {
|
||
throw new Error("failed to update help status")
|
||
}
|
||
|
||
await update({ user: { hasSeenHelp: true } })
|
||
} catch (error) {
|
||
console.error("标记使用帮助状态失败:", error)
|
||
}
|
||
}
|
||
|
||
markHelpSeen()
|
||
}, [status, session?.user?.hasSeenHelp, update])
|
||
|
||
return (
|
||
<div className="h-screen flex flex-col bg-background">
|
||
<SiteHeader />
|
||
|
||
<main className="flex-1 overflow-y-auto">
|
||
<div className="container mx-auto px-4 py-8">
|
||
<div className="max-w-5xl mx-auto space-y-8">
|
||
{/* 标题 */}
|
||
<div>
|
||
<h1 className="text-3xl font-serif font-bold mb-2">使用帮助</h1>
|
||
<p className="text-muted-foreground">
|
||
华夏家谱系统使用指南
|
||
</p>
|
||
<div className="mt-4">
|
||
<Button onClick={() => router.replace("/")} size="lg">
|
||
前往总览页面
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<Tabs defaultValue="guide" className="space-y-6">
|
||
<TabsList className="grid w-full grid-cols-3">
|
||
<TabsTrigger value="guide">快速入门</TabsTrigger>
|
||
<TabsTrigger value="roles">角色权限</TabsTrigger>
|
||
<TabsTrigger value="features">功能说明</TabsTrigger>
|
||
</TabsList>
|
||
|
||
{/* 快速入门 */}
|
||
<TabsContent value="guide" className="space-y-6">
|
||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||
<BookOpen className="h-6 w-6" />
|
||
</div>
|
||
<div>
|
||
<CardTitle className="text-xl font-serif font-light">使用流程</CardTitle>
|
||
<CardDescription className="font-light">从创建到完善的完整流程</CardDescription>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="space-y-4">
|
||
<div className="flex gap-4">
|
||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||
1
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium mb-1">注册账号</h3>
|
||
<p className="text-sm text-muted-foreground font-light">
|
||
使用邮箱注册账号，验证后即可登录系统
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||
2
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium mb-1">创建家族树</h3>
|
||
<p className="text-sm text-muted-foreground font-light">
|
||
首次登录后，点击"开始记录"创建您的第一个家族树，填写家族名称和描述
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||
3
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium mb-1">添加始祖</h3>
|
||
<p className="text-sm text-muted-foreground font-light">
|
||
添加家族的第一位成员（始祖），填写基本信息如姓名、生卒年月、籍贯等
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||
4
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium mb-1">添加配偶和子女</h3>
|
||
<p className="text-sm text-muted-foreground font-light">
|
||
为成员添加配偶关系和子女，系统会自动建立家族关系网络
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||
5
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium mb-1">完善信息</h3>
|
||
<p className="text-sm text-muted-foreground font-light">
|
||
上传照片、填写生平事迹、添加标签等，丰富家族档案
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||
6
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-medium mb-1">邀请协作</h3>
|
||
<p className="text-sm text-muted-foreground font-light">
|
||
邀请家族成员共同编辑，一起完善家族树
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||
<CardHeader>
|
||
<CardTitle className="text-xl font-serif font-light">温馨提示</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-2 text-sm text-muted-foreground font-light">
|
||
<li>• 建议先从近代祖先开始录入，逐步向上追溯</li>
|
||
<li>• 尽量填写完整的生卒年月和籍贯信息，便于生成统计和迁徙图</li>
|
||
<li>• 定期备份数据，可使用导出功能保存家族数据</li>
|
||
<li>• 上传的照片建议使用清晰的正面照</li>
|
||
<li>• 邀请家族成员协作时，建议赋予"编辑者"角色</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* 角色权限 */}
|
||
<TabsContent value="roles" className="space-y-6">
|
||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||
<Shield className="h-6 w-6" />
|
||
</div>
|
||
<div>
|
||
<CardTitle className="text-xl font-serif font-light">角色说明</CardTitle>
|
||
<CardDescription className="font-light">不同角色的权限范围</CardDescription>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="space-y-6">
|
||
<div className="p-4 bg-primary/5 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-2 h-2 rounded-full bg-primary"></div>
|
||
<h3 className="font-medium">创建者</h3>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground font-light mb-3">
|
||
家族树的创建者，拥有最高权限
|
||
</p>
|
||
<div className="space-y-1 text-sm">
|
||
<p className="text-muted-foreground font-light">✓ 查看所有信息</p>
|
||
<p className="text-muted-foreground font-light">✓ 添加、编辑、删除成员</p>
|
||
<p className="text-muted-foreground font-light">✓ 管理协作者</p>
|
||
<p className="text-muted-foreground font-light">✓ 导入导出数据</p>
|
||
<p className="text-muted-foreground font-light">✓ 删除家族树</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 bg-muted/30 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
|
||
<h3 className="font-medium">编辑者</h3>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground font-light mb-3">
|
||
可以编辑家族树内容的协作者
|
||
</p>
|
||
<div className="space-y-1 text-sm">
|
||
<p className="text-muted-foreground font-light">✓ 查看所有信息</p>
|
||
<p className="text-muted-foreground font-light">✓ 添加、编辑成员</p>
|
||
<p className="text-muted-foreground font-light">✓ 上传照片和文档</p>
|
||
<p className="text-muted-foreground font-light">✗ 删除成员</p>
|
||
<p className="text-muted-foreground font-light">✗ 管理协作者</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 bg-muted/30 rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<div className="w-2 h-2 rounded-full bg-green-500"></div>
|
||
<h3 className="font-medium">查看者</h3>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground font-light mb-3">
|
||
只能查看家族树信息的协作者
|
||
</p>
|
||
<div className="space-y-1 text-sm">
|
||
<p className="text-muted-foreground font-light">✓ 查看所有信息</p>
|
||
<p className="text-muted-foreground font-light">✓ 查看族谱图</p>
|
||
<p className="text-muted-foreground font-light">✓ 查看统计数据</p>
|
||
<p className="text-muted-foreground font-light">✗ 编辑任何内容</p>
|
||
<p className="text-muted-foreground font-light">✗ 添加或删除成员</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
{/* 功能说明 */}
|
||
<TabsContent value="features" className="space-y-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||
<Users className="h-5 w-5" />
|
||
</div>
|
||
<CardTitle className="text-lg font-serif font-light">成员管理</CardTitle>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-2 text-sm text-muted-foreground font-light">
|
||
<li>• 添加、编辑、删除家族成员</li>
|
||
<li>• 上传成员照片和文档</li>
|
||
<li>• 记录生平事迹和重要信息</li>
|
||
<li>• 设置成员标签和分类</li>
|
||
<li>• 搜索和筛选成员</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||
<Network className="h-5 w-5" />
|
||
</div>
|
||
<CardTitle className="text-lg font-serif font-light">族谱图</CardTitle>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-2 text-sm text-muted-foreground font-light">
|
||
<li>• 可视化展示家族关系</li>
|
||
<li>• 支持缩放和拖拽</li>
|
||
<li>• 快速定位成员位置</li>
|
||
<li>• 导出族谱图片</li>
|
||
<li>• 多种视图模式</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||
<FileText className="h-5 w-5" />
|
||
</div>
|
||
<CardTitle className="text-lg font-serif font-light">关系计算</CardTitle>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-2 text-sm text-muted-foreground font-light">
|
||
<li>• 自动计算成员间的亲属关系</li>
|
||
<li>• 显示关系路径</li>
|
||
<li>• 查看直系亲属信息</li>
|
||
<li>• 支持复杂关系计算</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-none shadow-sm bg-card/50 backdrop-blur">
|
||
<CardHeader>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||
<Settings className="h-5 w-5" />
|
||
</div>
|
||
<CardTitle className="text-lg font-serif font-light">数据管理</CardTitle>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ul className="space-y-2 text-sm text-muted-foreground font-light">
|
||
<li>• 导入已有家族数据</li>
|
||
<li>• 导出备份数据</li>
|
||
<li>• 查看修谱记录</li>
|
||
<li>• 统计分析功能</li>
|
||
<li>• 时间轴和迁徙图</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|