0.0.8.1
This commit is contained in:
freedakgmail
@@ -0,0 +1,296 @@
|
||||
"use client"
|
||||
|
||||
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 { BookOpen, Users, Network, Settings, Shield, FileText } from "lucide-react"
|
||||
|
||||
export default function HelpPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-background">
|
||||
<SiteHeader />
|
||||
|
||||
<main className="flex-1 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>
|
||||
|
||||
<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">创建者 (Owner)</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">编辑者 (Editor)</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">查看者 (Viewer)</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>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user