大海
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { Card } from "@/components/ui/Card";
|
||
import { Button } from "@/components/ui/Button";
|
||
import { EmptyState } from "@/components/ui/EmptyState";
|
||
import { use笔记和标注 } from "@/hooks/use笔记和标注";
|
||
|
||
export default function PagePage() {
|
||
const { data, loading, error, refetch } = use笔记和标注();
|
||
const [open, setOpen] = useState(false);
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-xl font-bold text-gray-800">笔记和标注</h1>
|
||
<p className="text-sm text-gray-500 mt-1">对某一页写笔记，支持高亮段落摘抄。</p>
|
||
</div>
|
||
<Button onClick={() => setOpen(true)} variant="primary" size="sm">新增</Button>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="flex justify-center py-12">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
|
||
</div>
|
||
) : error ? (
|
||
<Card className="text-center py-8">
|
||
<p className="text-red-500 text-sm">{error}</p>
|
||
<Button onClick={refetch} variant="secondary" size="sm" className="mt-2">重试</Button>
|
||
</Card>
|
||
) : data.length === 0 ? (
|
||
<EmptyState
|
||
icon="📭"
|
||
title="暂无数据"
|
||
description="还没有任何记录，点击上方按钮开始"
|
||
action={<Button onClick={() => setOpen(true)} variant="primary" size="sm">创建第一条</Button>}
|
||
/>
|
||
) : (
|
||
<div className="space-y-3">
|
||
{data.map((item: any) => (
|
||
<Card key={item.id}>
|
||
<h3 className="font-medium text-gray-800">{item.title || item.name || `Item ${item.id.slice(0, 8)}`}</h3>
|
||
<p className="text-xs text-gray-400 mt-1">{item.createdAt || ""}</p>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|