R94 A2/A3/A4 移动端列表卡片化

client/src/pages/AssetRegistryPage.tsx

@@ -570,6 +570,13 @@ export function AssetRegistryPage() {
     return items;
   }, [approvedPurchasesQuery.data?.items, currentAsset?.purchaseRequest]);
 
+  const categoryItems = categoriesQuery.data?.items ?? [];
+  const assetItems = assetsQuery.data?.items ?? [];
+  const selectAsset = (assetId: string) => {
+    setIsCreatingAsset(false);
+    setSelectedAssetId(assetId);
+  };
+
   return (
     <div className="space-y-6">
       <PageHeader
@@ -636,7 +643,33 @@ export function AssetRegistryPage() {
             <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveError(categoriesQuery.error)}</p>
           ) : null}
           {!categoriesQuery.isLoading && !categoriesQuery.isError ? (
-            <div className="rounded-lg border border-zinc-200">
+            <>
+              <div className="space-y-2 md:hidden">
+                {categoryItems.length ? (
+                  categoryItems.map((item) => (
+                    <button
+                      key={item.id}
+                      type="button"
+                      className="w-full rounded-lg border border-zinc-200 bg-white p-3 text-left"
+                      onClick={() => resetCategoryEditor(item)}
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="truncate text-sm font-semibold text-zinc-900">{item.name}</div>
+                          <div className="mt-1 text-xs text-zinc-500">{item.code}</div>
+                        </div>
+                        <span className="shrink-0 rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
+                          {item.enabled ? "启用" : "停用"}
+                        </span>
+                      </div>
+                      <div className="mt-2 text-xs text-zinc-500">{item.documentCategory?.name ?? "系统默认"}</div>
+                    </button>
+                  ))
+                ) : (
+                  <div className="rounded-lg border border-zinc-200 p-3 text-sm text-zinc-500">暂无资产分类</div>
+                )}
+              </div>
+              <div className="hidden rounded-lg border border-zinc-200 md:block">
               <Table>
                 <TableHeader>
                   <tr>
@@ -646,7 +679,7 @@ export function AssetRegistryPage() {
                   </tr>
                 </TableHeader>
                 <TableBody>
-                  {(categoriesQuery.data?.items ?? []).map((item) => (
+                  {categoryItems.map((item) => (
                     <TableRow key={item.id} onClick={() => resetCategoryEditor(item)} className="cursor-pointer">
                       <TableCell className="font-medium text-zinc-900">{item.code}</TableCell>
                       <TableCell>
@@ -658,7 +691,8 @@ export function AssetRegistryPage() {
                   ))}
                 </TableBody>
               </Table>
-            </div>
+              </div>
+            </>
           ) : null}
         </div>
 
@@ -724,7 +758,45 @@ export function AssetRegistryPage() {
               <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveError(assetsQuery.error)}</p>
             ) : null}
             {!assetsQuery.isLoading && !assetsQuery.isError ? (
-              <div className="rounded-lg border border-zinc-200">
+              <>
+                <div className="space-y-3 md:hidden">
+                  {assetItems.length ? (
+                    assetItems.map((item) => (
+                      <button
+                        data-testid="asset-mobile-row"
+                        type="button"
+                        key={item.id}
+                        onClick={() => selectAsset(item.id)}
+                        className={`w-full rounded-lg border p-3 text-left ${
+                          item.id === selectedAssetId && !isCreatingAsset
+                            ? "border-zinc-400 bg-zinc-50"
+                            : "border-zinc-200 bg-white"
+                        }`}
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="min-w-0">
+                            <div className="truncate text-sm font-semibold text-zinc-900">{item.assetNo}</div>
+                            <div className="mt-1 truncate text-xs text-zinc-500">{item.name}</div>
+                          </div>
+                          <StatusBadge status={item.status} />
+                        </div>
+                        <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-zinc-600">
+                          <div>
+                            <div className="text-zinc-400">分类</div>
+                            <div className="mt-0.5 truncate text-zinc-700">{item.category?.name ?? "-"}</div>
+                          </div>
+                          <div>
+                            <div className="text-zinc-400">归属人</div>
+                            <div className="mt-0.5 truncate text-zinc-700">{item.assignee?.name ?? "-"}</div>
+                          </div>
+                        </div>
+                      </button>
+                    ))
+                  ) : (
+                    <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无资产卡片</div>
+                  )}
+                </div>
+                <div className="hidden rounded-lg border border-zinc-200 md:block">
                 <Table>
                   <TableHeader>
                     <tr>
@@ -735,11 +807,10 @@ export function AssetRegistryPage() {
                     </tr>
                   </TableHeader>
                   <TableBody>
-                    {(assetsQuery.data?.items ?? []).length ? (
-                      assetsQuery.data?.items.map((item) => (
+                    {assetItems.length ? (
+                      assetItems.map((item) => (
                         <TableRow data-testid="asset-row" key={item.id} onClick={() => {
-                          setIsCreatingAsset(false);
-                          setSelectedAssetId(item.id);
+                          selectAsset(item.id);
                         }} className={item.id === selectedAssetId && !isCreatingAsset ? "bg-zinc-50" : "cursor-pointer"}>
                           <TableCell>
                             <div className="font-medium text-zinc-900">{item.assetNo}</div>
@@ -759,7 +830,8 @@ export function AssetRegistryPage() {
                     )}
                   </TableBody>
                 </Table>
-              </div>
+                </div>
+              </>
             ) : null}
           </div>