feat(web): 重构前端UI并支持OpenAI协议

- 添加账号管理详情页（基本信息、提示词、CapCut、参考图标签页）
- 重构资产页面，按项目组分开展示图片/视频
- 聊天界面支持深度思考内容折叠展示、复制、删除消息
- 设置页面支持Agent配置（Anthropic/OpenAI协议）和工具配置
- 后端支持OpenAI兼容协议流式输出和DeepSeek思考模式
- 添加对话置顶/删除功能、数据库迁移、资产清单API
- 添加账号参考图上传/删除、技能配置持久化、连接测试API

web/client/src/components/assets/AssetGallery.tsx

@@ -1,32 +1,81 @@
-import { useState, useEffect } from 'react';
-import { Trash2, RefreshCw } from 'lucide-react';
+import { useState, useEffect, useMemo } from 'react';
+import { RefreshCw, FolderOpen } from 'lucide-react';
 import { useAssets } from '@/hooks/useAssets';
+import { AssetProjectGroup } from './AssetProjectGroup';
 import { AssetPreview } from './AssetPreview';
 import { Button } from '@/components/ui/button';
 import type { Asset } from '@/types';
 
+interface ManifestGroup {
+  manifest_path: string;
+  account_id: string;
+  image_count: number;
+  video_count: number;
+  latest_at: string;
+}
+
 export function AssetGallery() {
   const [accountFilter, setAccountFilter] = useState('');
-  const [typeFilter, setTypeFilter] = useState<string>('');
   const [accounts, setAccounts] = useState<{ id: string; name: string }[]>([]);
+  const [manifests, setManifests] = useState<ManifestGroup[]>([]);
+  const [previewAsset, setPreviewAsset] = useState<Asset | null>(null);
   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(() => {});
+    fetch('/api/assets/manifests').then((r) => r.json()).then(setManifests).catch(() => {});
   }, []);
 
+  // Group assets by manifest_path
+  const grouped = useMemo(() => {
+    const map = new Map<string, Asset[]>();
+    for (const asset of assets) {
+      const key = asset.manifest_path || 'ungrouped';
+      if (!map.has(key)) map.set(key, []);
+      map.get(key)!.push(asset);
+    }
+    return map;
+  }, [assets]);
+
   const handleScan = async () => {
     await fetch('/api/assets/scan', { method: 'POST' });
     window.location.reload();
   };
 
+  const getGroupName = (manifestPath: string) => {
+    const parts = manifestPath.replace(/\\/g, '/').split('/');
+    // output/<name>/manifest.json → <name>
+    const dir = parts.length >= 2 ? parts[parts.length - 2] : manifestPath;
+    return dir;
+  };
+
+  const getGroupSubtitle = (manifestPath: string) => {
+    const m = manifests.find((m) => m.manifest_path === manifestPath);
+    if (!m) return '';
+    const parts: string[] = [];
+    if (m.image_count) parts.push(`${m.image_count} 图`);
+    if (m.video_count) parts.push(`${m.video_count} 视频`);
+    const acc = accounts.find((a) => a.id === m.account_id);
+    if (acc) parts.push(acc.name);
+    return parts.join(' · ');
+  };
+
+  // Filter manifests by account
+  const filteredGroups = useMemo(() => {
+    if (!accountFilter) return [...grouped.entries()];
+    return [...grouped.entries()].filter(([key]) => {
+      if (key === 'ungrouped') return true;
+      const m = manifests.find((m) => m.manifest_path === key);
+      return m?.account_id === accountFilter;
+    });
+  }, [grouped, manifests, accountFilter]);
+
   return (
     <div className="flex flex-col h-full">
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-200 bg-white">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-200 bg-white flex-shrink-0">
         <select
           value={accountFilter}
           onChange={(e) => setAccountFilter(e.target.value)}
@@ -37,15 +86,7 @@ export function AssetGallery() {
             <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-200 bg-zinc-50 px-2 text-xs"
-        >
-          <option value="">全部类型</option>
-          <option value="image">图片</option>
-          <option value="video">视频</option>
-        </select>
+        <span className="text-[10px] text-zinc-400">{assets.length} 个资产</span>
         <div className="flex-1" />
         <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleScan}>
           <RefreshCw size={12} className="mr-1" />
@@ -53,55 +94,27 @@ export function AssetGallery() {
         </Button>
       </div>
 
+      {/* Content */}
       <div className="flex-1 overflow-auto p-4">
         {loading ? (
           <p className="text-zinc-400 text-sm text-center mt-8">加载中...</p>
-        ) : assets.length === 0 ? (
+        ) : filteredGroups.length === 0 ? (
           <div className="flex flex-col items-center justify-center mt-16 text-zinc-400">
+            <FolderOpen size={28} className="mb-2 opacity-40" />
             <p className="text-sm">暂无资产</p>
             <p className="text-xs mt-1">点击"扫描"从 output 目录导入</p>
           </div>
         ) : (
-          <div className="grid grid-cols-6 gap-2">
-            {assets.map((asset) => (
-              <div
-                key={asset.id}
-                className="group relative aspect-square bg-zinc-100 rounded-lg overflow-hidden cursor-pointer border border-zinc-200 hover:border-indigo-300 hover:shadow-sm transition-all"
-                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-white/80 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
-                >
-                  <Trash2 size={12} className="text-red-500" />
-                </button>
-                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/40 to-transparent p-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                  <div className="flex items-center justify-between">
-                    <span className="text-[9px] text-white font-medium">
-                      {asset.type === 'image' ? '🖼' : '🎬'} #{asset.shot_index || '?'}
-                    </span>
-                    <span className="text-[8px] text-white/70">
-                      {asset.created_at ? new Date(asset.created_at).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }) : ''}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
+          filteredGroups.map(([manifestPath, groupAssets]) => (
+            <AssetProjectGroup
+              key={manifestPath}
+              title={getGroupName(manifestPath)}
+              subtitle={getGroupSubtitle(manifestPath)}
+              assets={groupAssets}
+              onPreview={setPreviewAsset}
+              onDelete={remove}
+            />
+          ))
         )}
       </div>