大海
52 lines
1.8 KiB
TypeScript
52 lines
1.8 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 { useItems } from "@/hooks/useItems";
|
|
|
|
export default function PagePage() {
|
|
const { data, loading, error, refetch } = useItems();
|
|
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>
|
|
);
|
|
}
|