ui: mobile-first records card list, responsive filters/paddings across pages, grades table scroll guard

app/src/pages/records/RecordsPage.tsx

@@ -7,7 +7,7 @@ import {
 } from '@/lib/api';
 import type { FootprintRow } from '@/lib/types';
 import {
-  Button, Confirm, Dropdown, DropdownItem, Empty, Input, Select, Table, TableWrap, Td, Th, Tr, useToast
+  Badge, Button, Confirm, Dropdown, DropdownItem, Empty, Input, Select, Table, TableWrap, Td, Th, Tr, useToast
 } from '@/components/ui';
 import { StatusBadge, LevelBadge, RoleBadge, GradeBadge } from '@/components/common/badges';
 import { RecordEditorDialog } from '@/components/records/RecordEditorDialog';
@@ -85,7 +85,7 @@ export function RecordsPage() {
   const openDetail = (id: number) => { setDetailId(id); setDetailOpen(true); };
 
   return (
-    <div className="px-6 py-5">
+    <div className="px-3 py-4 sm:px-6 sm:py-5">
       <div className="mb-3 flex flex-wrap items-center gap-2">
         <Input
           className="w-[220px]"
@@ -93,15 +93,16 @@ export function RecordsPage() {
           value={q}
           onChange={e => setQ(e.target.value)}
         />
-        <Select className="w-[130px]" value={typeId} onChange={e => setTypeId(e.target.value)}
+        <div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-center sm:gap-2">
+        <Select className="w-full sm:w-[130px]" value={typeId} onChange={e => setTypeId(e.target.value)}
           options={[{ value: '', label: '全部类型' }, ...(typesQ.data?.items ?? []).map(t => ({ value: String(t.id), label: t.name }))]} />
-        <Select className="w-[110px]" value={year} onChange={e => setYear(e.target.value)}
+        <Select className="w-full sm:w-[110px]" value={year} onChange={e => setYear(e.target.value)}
           options={[{ value: '', label: '全部年份' }, ...(yearsQ.data?.years ?? []).map(y => ({ value: String(y), label: y + ' 年' }))]} />
-        <Select className="w-[110px]" value={level} onChange={e => setLevel(e.target.value)}
+        <Select className="w-full sm:w-[110px]" value={level} onChange={e => setLevel(e.target.value)}
           options={[{ value: '', label: '全部级别' }, ...(taxQ.data?.items ?? []).filter(t => t.kind === 'level').map(t => ({ value: t.value, label: t.value }))]} />
-        <Select className="w-[100px]" value={role} onChange={e => setRole(e.target.value)}
+        <Select className="w-full sm:w-[100px]" value={role} onChange={e => setRole(e.target.value)}
           options={[{ value: '', label: '全部角色' }, ...(taxQ.data?.items ?? []).filter(t => t.kind === 'role').map(t => ({ value: t.value, label: t.value }))]} />
-        <Select className="w-[110px]" value={status} onChange={e => setStatus(e.target.value)}
+        <Select className="w-full sm:w-[110px]" value={status} onChange={e => setStatus(e.target.value)}
           options={[
             { value: '', label: '全部状态' },
             { value: 'draft', label: '草稿' },
@@ -109,21 +110,24 @@ export function RecordsPage() {
             { value: 'submitted', label: '已提交待果' },
             { value: 'finished', label: '已完结' }
           ]} />
-        <Select className="w-[130px]" value={sort} onChange={e => setSort(e.target.value)}
+        <Select className="w-full sm:w-[130px]" value={sort} onChange={e => setSort(e.target.value)}
           options={[
             { value: 'date_desc', label: '时间从新到旧' },
             { value: 'date_asc', label: '时间从旧到新' },
             { value: 'updated_desc', label: '最近修改' },
             { value: 'weight_desc', label: '重要度优先' }
           ]} />
-        <span className="num ml-auto text-[12px] text-ink-3">共 {total} 条</span>
-        <Button variant="primary" size="md" onClick={openNew}>
-          <Plus size={14} />
-          新建
-        </Button>
+        </div>
+        <div className="flex w-full items-center justify-between gap-2 sm:contents">
+          <span className="num text-[12px] text-ink-3 sm:ml-auto">共 {total} 条</span>
+          <Button variant="primary" size="md" onClick={openNew}>
+            <Plus size={14} />
+            新建
+          </Button>
+        </div>
       </div>
 
-      <div className="rounded-lg border border-line bg-surface shadow-card">
+      <div className="hidden rounded-lg border border-line bg-surface shadow-card md:block">
         <TableWrap className="max-h-[calc(100vh-260px)] overflow-y-auto">
           <Table>
             <thead>
@@ -194,8 +198,35 @@ export function RecordsPage() {
           )}
         </TableWrap>
 
-        {total > 0 && (
-          <div className="flex h-11 items-center justify-end gap-3 border-t border-line px-4 text-[12px] text-ink-3">
+      {/* 手机端：卡片列表（表格在窄屏不可用） */}
+      <div className="divide-y divide-line rounded-lg border border-line bg-surface md:hidden">
+        {(listQ.data?.items ?? []).map(row => (
+          <button key={row.id} onClick={() => openDetail(row.id)} className="block w-full px-3 py-3 text-left transition-colors active:bg-surface-2">
+            <div className="flex items-center gap-2">
+              <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: row.type_color }} />
+              <span className="min-w-0 flex-1 truncate text-[13.5px] font-medium text-ink-1">{row.title}</span>
+              {row.attachment_count > 0 && <span className="num shrink-0 text-[11px] text-ink-3">{row.attachment_count} 附件</span>}
+            </div>
+            <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+              <Badge color={row.type_color}>{row.type_name}</Badge>
+              <StatusBadge status={row.status} />
+              {row.level && <LevelBadge level={row.level} />}
+              {row.award_grade && <GradeBadge grade={row.award_grade} />}
+            </div>
+            <div className="num mt-1 text-[11.5px] text-ink-3">{fmtRange(row.start_date, row.end_date)}</div>
+          </button>
+        ))}
+        {!listQ.isLoading && !listQ.data?.items.length && (
+          <Empty
+            title="没有匹配的记录"
+            description="调整筛选条件，或新建一条记录。"
+            action={<Button variant="primary" onClick={openNew}><Plus size={14} /> 新建记录</Button>}
+          />
+        )}
+      </div>
+
+      {total > 0 && (
+        <div className="flex h-11 items-center justify-end gap-3 border-t border-line bg-surface px-4 text-[12px] text-ink-3">
             <span className="num">第 {page} / {totalPages} 页</span>
             <Button variant="secondary" size="sm" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</Button>
             <Button variant="secondary" size="sm" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</Button>