HoshinoSuzumi/helios-evcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add grid view for IdTagsPage and toggle button

Browse Source
This commit is contained in:
Timothy Yin
2026-03-12 13:30:02 +08:00
parent 9f92b57371
commit d1bff8bfd9
1 changed files with 223 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
apps/web/app/dashboard/id-tags/page.tsx
View File

@@ -24,9 +24,11 @@ import {
} from "@heroui/react"; } from "@heroui/react";
import { parseDate } from "@internationalized/date"; import { parseDate } from "@internationalized/date";
import { ArrowRotateRight, Pencil, Plus, TrashBin } from "@gravity-ui/icons"; import { ArrowRotateRight, Pencil, Plus, TrashBin } from "@gravity-ui/icons";
import { LayoutGrid, List } from "lucide-react";
import { api, type IdTag, type UserRow } from "@/lib/api"; import { api, type IdTag, type UserRow } from "@/lib/api";
import { useSession } from "@/lib/auth-client"; import { useSession } from "@/lib/auth-client";
import dayjs from "@/lib/dayjs"; import dayjs from "@/lib/dayjs";
import { IdTagCard } from "@/components/id-tag-card";
const statusColorMap: Record<string, "success" | "danger" | "warning"> = { const statusColorMap: Record<string, "success" | "danger" | "warning"> = {
Accepted: "success", Accepted: "success",
@@ -396,6 +398,7 @@ export default function IdTagsPage() {
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [deletingTag, setDeletingTag] = useState<string | null>(null); const [deletingTag, setDeletingTag] = useState<string | null>(null);
const [claiming, setClaiming] = useState(false); const [claiming, setClaiming] = useState(false);
const [viewMode, setViewMode] = useState<"table" | "grid">("table");
const { const {
data: idTagsData, data: idTagsData,
@@ -505,6 +508,19 @@ export default function IdTagsPage() {
> >
<ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} /> <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
</Button> </Button>
<Button
isIconOnly
size="sm"
variant="ghost"
onPress={() => setViewMode(viewMode === "table" ? "grid" : "table")}
aria-label={viewMode === "table" ? "切换到卡片视图" : "切换到列表视图"}
>
{viewMode === "table" ? (
<LayoutGrid className="size-4" />
) : (
<List className="size-4" />
)}
</Button>
<Modal> <Modal>
<Button size="sm" variant="secondary" onPress={openCreate}> <Button size="sm" variant="secondary" onPress={openCreate}>
<Plus className="size-4" /> <Plus className="size-4" />
@@ -547,6 +563,146 @@ export default function IdTagsPage() {
)} )}
</div> </div>
{/* ── Grid view ─────────────────────────────────────────── */}
{(!isAdmin || viewMode === "grid") && (
<>
{loading ? (
<div className="flex justify-center py-16">
<Spinner />
</div>
) : tags.length === 0 ? (
<div className="rounded-2xl border border-border px-6 py-14 text-center text-sm text-muted">
暂无储值卡
</div>
) : (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{tags.map((tag) => {
const owner = users.find((u) => u.id === tag.userId);
return (
<div key={tag.idTag} className="space-y-2">
<IdTagCard
idTag={tag.idTag}
balance={tag.balance}
layout={tag.cardLayout ?? undefined}
skin={tag.cardSkin ?? undefined}
/>
{isAdmin && (
<div className="flex items-center justify-between px-1">
<div className="flex min-w-0 items-center gap-1.5">
<Chip
color={statusColorMap[tag.status] ?? "warning"}
size="sm"
variant="soft"
>
{tag.status}
</Chip>
{owner && (
<span className="truncate text-xs text-muted">
{owner.name ?? owner.username ?? owner.email}
</span>
)}
</div>
<div className="flex shrink-0 gap-1">
<Modal>
<Button
isIconOnly
size="sm"
variant="tertiary"
onPress={() => openEdit(tag)}
>
<Pencil className="size-4" />
</Button>
<Modal.Backdrop>
<Modal.Container scroll="outside">
<Modal.Dialog className="sm:max-w-105">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Heading>编辑储值卡</Modal.Heading>
</Modal.Header>
<Modal.Body className="space-y-3">
<TagFormBody
form={form}
setForm={setForm}
isEdit={true}
users={users}
tags={tags}
/>
</Modal.Body>
<Modal.Footer className="flex justify-end gap-2">
<Button slot="close" variant="ghost">
取消
</Button>
<Button isDisabled={saving} slot="close" onPress={handleSave}>
{saving ? <Spinner size="sm" /> : "保存"}
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
<Modal>
<Button
isDisabled={deletingTag === tag.idTag}
isIconOnly
size="sm"
variant="danger-soft"
>
{deletingTag === tag.idTag ? (
<Spinner size="sm" />
) : (
<TrashBin className="size-4" />
)}
</Button>
<Modal.Backdrop>
<Modal.Container scroll="outside">
<Modal.Dialog className="sm:max-w-96">
<Modal.CloseTrigger />
<Modal.Header>
<Modal.Heading>确认删除储值卡</Modal.Heading>
</Modal.Header>
<Modal.Body>
<p className="text-sm text-muted">
将永久删除储值卡{" "}
<span className="font-mono font-medium text-foreground">
{tag.idTag}
</span>
，此操作不可恢复。
</p>
</Modal.Body>
<Modal.Footer className="flex justify-end gap-2">
<Button slot="close" variant="ghost">
取消
</Button>
<Button
slot="close"
variant="danger"
isDisabled={deletingTag === tag.idTag}
onPress={() => handleDelete(tag.idTag)}
>
{deletingTag === tag.idTag ? (
<Spinner size="sm" />
) : (
"确认删除"
)}
</Button>
</Modal.Footer>
</Modal.Dialog>
</Modal.Container>
</Modal.Backdrop>
</Modal>
</div>
</div>
)}
</div>
);
})}
</div>
)}
</>
)}
{/* ── Table view (admin only) ────────────────────────────────── */}
{isAdmin && viewMode === "table" && (
<Table> <Table>
<Table.ScrollContainer> <Table.ScrollContainer>
<Table.Content aria-label="储值卡列表" className="min-w-200"> <Table.Content aria-label="储值卡列表" className="min-w-200">
@@ -708,6 +864,7 @@ export default function IdTagsPage() {
</Table.Content> </Table.Content>
</Table.ScrollContainer> </Table.ScrollContainer>
</Table> </Table>
)}
</div> </div>
); );
} }