feat(web): add asset gallery with waterfall layout, preview and delete

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

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>
+  );
 }