234 lines
8.9 KiB
TypeScript
234 lines
8.9 KiB
TypeScript
"use client";
|
||
|
||
import { useMemo, useState } from "react";
|
||
import { Eye, Filter, Search } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Dialog } from "@/components/ui/dialog";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Select } from "@/components/ui/select";
|
||
import { Table } from "@/components/ui/table";
|
||
|
||
export type CmsRecordTone = "success" | "warning" | "danger" | "secondary";
|
||
|
||
export type CmsRecord = {
|
||
id: string;
|
||
title: string;
|
||
owner: string;
|
||
status: string;
|
||
statusTone: CmsRecordTone;
|
||
category: string;
|
||
updatedAt: string;
|
||
priority: "高" | "中" | "低";
|
||
summary: string;
|
||
};
|
||
|
||
type CmsModuleClientProps = {
|
||
records: CmsRecord[];
|
||
};
|
||
|
||
const PAGE_SIZE = 5;
|
||
const ALL_STATUS = "全部状态";
|
||
|
||
function matchesRecord(record: CmsRecord, query: string, status: string): boolean {
|
||
const normalizedQuery = query.trim().toLowerCase();
|
||
const matchesSearch =
|
||
normalizedQuery.length === 0 ||
|
||
[record.title, record.owner, record.category, record.summary]
|
||
.join(" ")
|
||
.toLowerCase()
|
||
.includes(normalizedQuery);
|
||
const matchesStatus = status === ALL_STATUS || record.status === status;
|
||
|
||
return matchesSearch && matchesStatus;
|
||
}
|
||
|
||
export function CmsModuleClient({ records }: CmsModuleClientProps): React.ReactElement {
|
||
const [query, setQuery] = useState("");
|
||
const [status, setStatus] = useState(ALL_STATUS);
|
||
const [page, setPage] = useState(1);
|
||
const [selectedRecord, setSelectedRecord] = useState<CmsRecord | null>(null);
|
||
|
||
const statusOptions = useMemo(() => {
|
||
const uniqueStatuses = new Set(records.map((record) => record.status));
|
||
return [ALL_STATUS, ...Array.from(uniqueStatuses)];
|
||
}, [records]);
|
||
|
||
const filteredRecords = useMemo(
|
||
() => records.filter((record) => matchesRecord(record, query, status)),
|
||
[query, records, status],
|
||
);
|
||
const pageCount = Math.max(1, Math.ceil(filteredRecords.length / PAGE_SIZE));
|
||
const safePage = Math.min(page, pageCount);
|
||
const pageStart = (safePage - 1) * PAGE_SIZE;
|
||
const visibleRecords = filteredRecords.slice(pageStart, pageStart + PAGE_SIZE);
|
||
const highPriorityCount = filteredRecords.filter((record) => record.priority === "高").length;
|
||
|
||
function updateQuery(value: string): void {
|
||
setQuery(value);
|
||
setPage(1);
|
||
}
|
||
|
||
function updateStatus(value: string): void {
|
||
setStatus(value);
|
||
setPage(1);
|
||
}
|
||
|
||
return (
|
||
<section className="rounded-lg border bg-card">
|
||
<div className="flex flex-col gap-4 border-b p-5 lg:flex-row lg:items-end lg:justify-between">
|
||
<div>
|
||
<h2 className="text-base font-semibold">数据列表</h2>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
共 {filteredRecords.length} 条记录，{highPriorityCount} 条高优先级已标记。
|
||
</p>
|
||
</div>
|
||
<div className="grid gap-2 sm:grid-cols-[minmax(220px,1fr)_160px]">
|
||
<label className="relative block">
|
||
<Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||
<Input
|
||
className="pl-9"
|
||
onChange={(event) => updateQuery(event.target.value)}
|
||
placeholder="搜索名称、负责人、分类"
|
||
value={query}
|
||
/>
|
||
</label>
|
||
<div className="relative block">
|
||
<Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||
<Select
|
||
aria-label="按状态筛选"
|
||
className="w-full pl-9"
|
||
onValueChange={updateStatus}
|
||
options={statusOptions.map((option) => ({ value: option, label: option }))}
|
||
value={status}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="overflow-x-auto">
|
||
<Table className="w-full min-w-[860px] text-sm">
|
||
<Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
|
||
<Table.Row>
|
||
<Table.Head className="px-4 py-3 font-medium">记录</Table.Head>
|
||
<Table.Head className="px-4 py-3 font-medium">分类</Table.Head>
|
||
<Table.Head className="px-4 py-3 font-medium">负责人</Table.Head>
|
||
<Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
|
||
<Table.Head className="px-4 py-3 font-medium">标记</Table.Head>
|
||
<Table.Head className="px-4 py-3 text-right font-medium">操作</Table.Head>
|
||
</Table.Row>
|
||
</Table.Header>
|
||
<Table.Body className="divide-y bg-card">
|
||
{visibleRecords.map((record) => (
|
||
<Table.Row key={record.id}>
|
||
<Table.Cell className="px-4 py-3">
|
||
<p className="font-medium">{record.title}</p>
|
||
<p className="mt-1 max-w-md truncate text-xs text-muted-foreground">{record.summary}</p>
|
||
</Table.Cell>
|
||
<Table.Cell className="px-4 py-3 text-muted-foreground">{record.category}</Table.Cell>
|
||
<Table.Cell className="px-4 py-3">{record.owner}</Table.Cell>
|
||
<Table.Cell className="px-4 py-3">
|
||
<Badge variant={record.statusTone}>{record.status}</Badge>
|
||
</Table.Cell>
|
||
<Table.Cell className="px-4 py-3">
|
||
<Badge variant={record.priority === "高" ? "danger" : record.priority === "中" ? "warning" : "secondary"}>
|
||
{record.priority}优先级
|
||
</Badge>
|
||
</Table.Cell>
|
||
<Table.Cell className="px-4 py-3">
|
||
<div className="flex justify-end">
|
||
<Button onClick={() => setSelectedRecord(record)} size="sm" type="button" variant="outline">
|
||
<Eye className="size-4" aria-hidden="true" />
|
||
详情
|
||
</Button>
|
||
</div>
|
||
</Table.Cell>
|
||
</Table.Row>
|
||
))}
|
||
{visibleRecords.length === 0 ? (
|
||
<Table.Row>
|
||
<Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
|
||
暂无匹配记录
|
||
</Table.Cell>
|
||
</Table.Row>
|
||
) : null}
|
||
</Table.Body>
|
||
</Table>
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-3 border-t p-4 sm:flex-row sm:items-center sm:justify-between">
|
||
<p className="text-sm text-muted-foreground">
|
||
第 {safePage} / {pageCount} 页
|
||
</p>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
disabled={safePage === 1}
|
||
onClick={() => setPage((current) => Math.max(1, current - 1))}
|
||
size="sm"
|
||
type="button"
|
||
variant="outline"
|
||
>
|
||
上一页
|
||
</Button>
|
||
<Button
|
||
disabled={safePage === pageCount}
|
||
onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
|
||
size="sm"
|
||
type="button"
|
||
variant="outline"
|
||
>
|
||
下一页
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<Dialog
|
||
description={selectedRecord?.summary}
|
||
onClose={() => setSelectedRecord(null)}
|
||
open={selectedRecord !== null}
|
||
title={selectedRecord?.title ?? "记录详情"}
|
||
>
|
||
{selectedRecord ? (
|
||
<dl className="grid gap-3 text-sm sm:grid-cols-2">
|
||
<div className="rounded-md border p-3">
|
||
<dt className="text-muted-foreground">分类</dt>
|
||
<dd className="mt-1 font-medium">{selectedRecord.category}</dd>
|
||
</div>
|
||
<div className="rounded-md border p-3">
|
||
<dt className="text-muted-foreground">负责人</dt>
|
||
<dd className="mt-1 font-medium">{selectedRecord.owner}</dd>
|
||
</div>
|
||
<div className="rounded-md border p-3">
|
||
<dt className="text-muted-foreground">状态</dt>
|
||
<dd className="mt-1">
|
||
<Badge variant={selectedRecord.statusTone}>{selectedRecord.status}</Badge>
|
||
</dd>
|
||
</div>
|
||
<div className="rounded-md border p-3">
|
||
<dt className="text-muted-foreground">最近更新</dt>
|
||
<dd className="mt-1 font-medium">{selectedRecord.updatedAt}</dd>
|
||
</div>
|
||
<div className="rounded-md border p-3 sm:col-span-2">
|
||
<dt className="text-muted-foreground">数据标记</dt>
|
||
<dd className="mt-2">
|
||
<Badge
|
||
variant={
|
||
selectedRecord.priority === "高"
|
||
? "danger"
|
||
: selectedRecord.priority === "中"
|
||
? "warning"
|
||
: "secondary"
|
||
}
|
||
>
|
||
{selectedRecord.priority}优先级
|
||
</Badge>
|
||
</dd>
|
||
</div>
|
||
</dl>
|
||
) : null}
|
||
</Dialog>
|
||
</section>
|
||
);
|
||
}
|