From af6ea966fd60750076a9a781fa362af226abe6a6 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 7 May 2026 02:44:06 +0800
Subject: [PATCH] feat(web): add asset gallery with waterfall layout, preview
 and delete

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/assets/AssetGallery.tsx    | 96 ++++++++++++++++++-
 .../src/components/assets/AssetPreview.tsx    | 35 +++++++
 web/client/src/hooks/useAssets.ts             | 19 ++++
 3 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 web/client/src/components/assets/AssetPreview.tsx
 create mode 100644 web/client/src/hooks/useAssets.ts

diff --git a/web/client/src/components/assets/AssetGallery.tsx b/web/client/src/components/assets/AssetGallery.tsx
index fb0dee6..07227a9 100644
--- a/web/client/src/components/assets/AssetGallery.tsx
+++ b/web/client/src/components/assets/AssetGallery.tsx
@@ -1,3 +1,97 @@
+import { useState, useEffect } from 'react';
+import { Trash2, RefreshCw } from 'lucide-react';
+import { useAssets } from '@/hooks/useAssets';
+import { AssetPreview } from './AssetPreview';
+import { Button } from '@/components/ui/button';
+import type { Asset } from '@/types';
+
 export function AssetGallery() {
-  return <div className="p-6 text-zinc-500">资产画廊</div>;
+  const [accountFilter, setAccountFilter] = useState('');
+  const [typeFilter, setTypeFilter] = useState<string>('');
+  const [accounts, setAccounts] = useState<{ id: string; name: string }[]>([]);
+  const { assets, loading, remove } = useAssets({
+    accountId: accountFilter || undefined,
+    type: typeFilter || undefined,
+  });
+  const [previewAsset, setPreviewAsset] = useState<Asset | null>(null);
+
+  useEffect(() => {
+    fetch('/api/accounts').then((r) => r.json()).then(setAccounts).catch(() => {});
+  }, []);
+
+  const handleScan = async () => {
+    await fetch('/api/assets/scan', { method: 'POST' });
+    window.location.reload();
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-800">
+        <select
+          value={accountFilter}
+          onChange={(e) => setAccountFilter(e.target.value)}
+          className="h-8 rounded-md border border-zinc-800 bg-zinc-900 px-2 text-xs"
+        >
+          <option value="">全部账号</option>
+          {accounts.map((a) => (
+            <option key={a.id} value={a.id}>{a.name}</option>
+          ))}
+        </select>
+        <select
+          value={typeFilter}
+          onChange={(e) => setTypeFilter(e.target.value)}
+          className="h-8 rounded-md border border-zinc-800 bg-zinc-900 px-2 text-xs"
+        >
+          <option value="">全部类型</option>
+          <option value="image">图片</option>
+          <option value="video">视频</option>
+        </select>
+        <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleScan}>
+          <RefreshCw size={12} className="mr-1" />
+          扫描
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-auto p-4">
+        {loading ? (
+          <p className="text-zinc-500 text-sm text-center mt-8">加载中...</p>
+        ) : assets.length === 0 ? (
+          <p className="text-zinc-600 text-sm text-center mt-8">暂无资产，点击"扫描"导入</p>
+        ) : (
+          <div className="grid grid-cols-4 gap-3">
+            {assets.map((asset) => (
+              <div
+                key={asset.id}
+                className="group relative aspect-[9/16] bg-zinc-900 rounded-lg overflow-hidden cursor-pointer border border-zinc-800 hover:border-zinc-600 transition-colors"
+                onClick={() => setPreviewAsset(asset)}
+              >
+                {asset.type === 'image' ? (
+                  <img
+                    src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
+                    alt=""
+                    className="w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                ) : (
+                  <video
+                    src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
+                    className="w-full h-full object-cover"
+                    muted
+                  />
+                )}
+                <button
+                  onClick={(e) => { e.stopPropagation(); remove(asset.id); }}
+                  className="absolute top-1 right-1 p-1 rounded bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <Trash2 size={12} className="text-red-400" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {previewAsset && <AssetPreview asset={previewAsset} onClose={() => setPreviewAsset(null)} />}
+    </div>
+  );
 }
diff --git a/web/client/src/components/assets/AssetPreview.tsx b/web/client/src/components/assets/AssetPreview.tsx
new file mode 100644
index 0000000..30ff18b
--- /dev/null
+++ b/web/client/src/components/assets/AssetPreview.tsx
@@ -0,0 +1,35 @@
+import { X } from 'lucide-react';
+import type { Asset } from '@/types';
+
+export function AssetPreview({ asset, onClose }: { asset: Asset; onClose: () => void }) {
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
+      onClick={onClose}
+    >
+      <button
+        onClick={onClose}
+        className="absolute top-4 right-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-white"
+      >
+        <X size={20} />
+      </button>
+
+      <div className="max-w-[90vw] max-h-[90vh]" onClick={(e) => e.stopPropagation()}>
+        {asset.type === 'image' ? (
+          <img
+            src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
+            alt=""
+            className="max-w-full max-h-[90vh] object-contain rounded-lg"
+          />
+        ) : (
+          <video
+            src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
+            controls
+            autoPlay
+            className="max-w-full max-h-[90vh] rounded-lg"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/web/client/src/hooks/useAssets.ts b/web/client/src/hooks/useAssets.ts
new file mode 100644
index 0000000..971f5cc
--- /dev/null
+++ b/web/client/src/hooks/useAssets.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '@/lib/api';
+import type { Asset } from '@/types';
+
+export function useAssets(params?: { accountId?: string; type?: string }) {
+  const [assets, setAssets] = useState<Asset[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    api.listAssets(params).then(setAssets).finally(() => setLoading(false));
+  }, [params?.accountId, params?.type]);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  const remove = (id: string) => api.deleteAsset(id).then(refresh);
+
+  return { assets, loading, refresh, remove };
+}