From d1bff8bfd99b4c96dfdc5d6abbf01ce44937795f Mon Sep 17 00:00:00 2001
From: Timothy Yin <master@uniiem.com>
Date: Thu, 12 Mar 2026 13:30:02 +0800
Subject: [PATCH] feat: add grid view for IdTagsPage and toggle button

---
 apps/web/app/dashboard/id-tags/page.tsx | 289 ++++++++++++++++++------
 1 file changed, 223 insertions(+), 66 deletions(-)

diff --git a/apps/web/app/dashboard/id-tags/page.tsx b/apps/web/app/dashboard/id-tags/page.tsx
index d419e92..af44627 100644
--- a/apps/web/app/dashboard/id-tags/page.tsx
+++ b/apps/web/app/dashboard/id-tags/page.tsx
@@ -24,9 +24,11 @@ import {
 } from "@heroui/react";
 import { parseDate } from "@internationalized/date";
 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 { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
+import { IdTagCard } from "@/components/id-tag-card";
 
 const statusColorMap: Record<string, "success" | "danger" | "warning"> = {
   Accepted: "success",
@@ -396,6 +398,7 @@ export default function IdTagsPage() {
   const [saving, setSaving] = useState(false);
   const [deletingTag, setDeletingTag] = useState<string | null>(null);
   const [claiming, setClaiming] = useState(false);
+  const [viewMode, setViewMode] = useState<"table" | "grid">("table");
 
   const {
     data: idTagsData,
@@ -505,6 +508,19 @@ export default function IdTagsPage() {
             >
               <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
             </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>
               <Button size="sm" variant="secondary" onPress={openCreate}>
                 <Plus className="size-4" />
@@ -547,69 +563,46 @@ export default function IdTagsPage() {
         )}
       </div>
 
-      <Table>
-        <Table.ScrollContainer>
-          <Table.Content aria-label="储值卡列表" className="min-w-200">
-            <Table.Header>
-              <Table.Column isRowHeader>卡号</Table.Column>
-              <Table.Column>状态</Table.Column>
-              <Table.Column>余额</Table.Column>
-              {isAdmin && <Table.Column>关联用户</Table.Column>}
-              <Table.Column>有效期</Table.Column>
-              <Table.Column>父卡号</Table.Column>
-              <Table.Column>创建时间</Table.Column>
-              {isAdmin && <Table.Column className="text-end">操作</Table.Column>}
-            </Table.Header>
-            <Table.Body
-              renderEmptyState={() => (
-                <div className="py-8 text-center text-sm text-muted">
-                  {loading ? "加载中…" : "暂无储值卡"}
-                </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 (
-                  <Table.Row key={tag.idTag} id={tag.idTag}>
-                    <Table.Cell className="font-mono font-medium">{tag.idTag}</Table.Cell>
-                    <Table.Cell>
-                      <Chip
-                        color={statusColorMap[tag.status] ?? "warning"}
-                        size="sm"
-                        variant="soft"
-                      >
-                        {tag.status}
-                      </Chip>
-                    </Table.Cell>
-                    <Table.Cell className="font-mono">¥{fenToYuan(tag.balance)}</Table.Cell>
+                  <div key={tag.idTag} className="space-y-2">
+                    <IdTagCard
+                      idTag={tag.idTag}
+                      balance={tag.balance}
+                      layout={tag.cardLayout ?? undefined}
+                      skin={tag.cardSkin ?? undefined}
+                    />
                     {isAdmin && (
-                      <Table.Cell className="text-sm">
-                        {owner ? (
-                          <span title={owner.email}>
-                            {owner.name ?? owner.username ?? owner.email}
-                          </span>
-                        ) : (
-                          <span className="text-muted">—</span>
-                        )}
-                      </Table.Cell>
-                    )}
-                    <Table.Cell>
-                      {tag.expiryDate ? (
-                        dayjs(tag.expiryDate).format("YYYY/M/D")
-                      ) : (
-                        <span className="text-muted">—</span>
-                      )}
-                    </Table.Cell>
-                    <Table.Cell className="font-mono">
-                      {tag.parentIdTag ?? <span className="text-muted">—</span>}
-                    </Table.Cell>
-                    <Table.Cell className="text-sm">
-                      {dayjs(tag.createdAt).format("YYYY/M/D HH:mm:ss")}
-                    </Table.Cell>
-                    {isAdmin && (
-                      <Table.Cell>
-                        <div className="flex justify-end gap-1">
-                          {/* Edit button */}
+                      <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
@@ -647,7 +640,6 @@ export default function IdTagsPage() {
                               </Modal.Container>
                             </Modal.Backdrop>
                           </Modal>
-                          {/* Delete button */}
                           <Modal>
                             <Button
                               isDisabled={deletingTag === tag.idTag}
@@ -699,15 +691,180 @@ export default function IdTagsPage() {
                             </Modal.Backdrop>
                           </Modal>
                         </div>
-                      </Table.Cell>
+                      </div>
                     )}
-                  </Table.Row>
+                  </div>
                 );
               })}
-            </Table.Body>
-          </Table.Content>
-        </Table.ScrollContainer>
-      </Table>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* ── Table view (admin only) ────────────────────────────────── */}
+      {isAdmin && viewMode === "table" && (
+        <Table>
+          <Table.ScrollContainer>
+            <Table.Content aria-label="储值卡列表" className="min-w-200">
+              <Table.Header>
+                <Table.Column isRowHeader>卡号</Table.Column>
+                <Table.Column>状态</Table.Column>
+                <Table.Column>余额</Table.Column>
+                {isAdmin && <Table.Column>关联用户</Table.Column>}
+                <Table.Column>有效期</Table.Column>
+                <Table.Column>父卡号</Table.Column>
+                <Table.Column>创建时间</Table.Column>
+                {isAdmin && <Table.Column className="text-end">操作</Table.Column>}
+              </Table.Header>
+              <Table.Body
+                renderEmptyState={() => (
+                  <div className="py-8 text-center text-sm text-muted">
+                    {loading ? "加载中…" : "暂无储值卡"}
+                  </div>
+                )}
+              >
+                {tags.map((tag) => {
+                  const owner = users.find((u) => u.id === tag.userId);
+                  return (
+                    <Table.Row key={tag.idTag} id={tag.idTag}>
+                      <Table.Cell className="font-mono font-medium">{tag.idTag}</Table.Cell>
+                      <Table.Cell>
+                        <Chip
+                          color={statusColorMap[tag.status] ?? "warning"}
+                          size="sm"
+                          variant="soft"
+                        >
+                          {tag.status}
+                        </Chip>
+                      </Table.Cell>
+                      <Table.Cell className="font-mono">¥{fenToYuan(tag.balance)}</Table.Cell>
+                      {isAdmin && (
+                        <Table.Cell className="text-sm">
+                          {owner ? (
+                            <span title={owner.email}>
+                              {owner.name ?? owner.username ?? owner.email}
+                            </span>
+                          ) : (
+                            <span className="text-muted">—</span>
+                          )}
+                        </Table.Cell>
+                      )}
+                      <Table.Cell>
+                        {tag.expiryDate ? (
+                          dayjs(tag.expiryDate).format("YYYY/M/D")
+                        ) : (
+                          <span className="text-muted">—</span>
+                        )}
+                      </Table.Cell>
+                      <Table.Cell className="font-mono">
+                        {tag.parentIdTag ?? <span className="text-muted">—</span>}
+                      </Table.Cell>
+                      <Table.Cell className="text-sm">
+                        {dayjs(tag.createdAt).format("YYYY/M/D HH:mm:ss")}
+                      </Table.Cell>
+                      {isAdmin && (
+                        <Table.Cell>
+                          <div className="flex justify-end gap-1">
+                            {/* Edit button */}
+                            <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>
+                            {/* Delete button */}
+                            <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>
+                        </Table.Cell>
+                      )}
+                    </Table.Row>
+                  );
+                })}
+              </Table.Body>
+            </Table.Content>
+          </Table.ScrollContainer>
+        </Table>
+      )}
     </div>
   );
 }