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

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

web/client/src/components/chat/ChatView.tsx

@@ -5,7 +5,6 @@ import { useChat } from '@/hooks/useChat';
 import { ChatMessage } from './ChatMessage';
 import { ChatInput } from './ChatInput';
 import { PipelineProgress } from './PipelineProgress';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { Button } from '@/components/ui/button';
 import { RefreshCw, Loader2, StopCircle, X } from 'lucide-react';
 import { api } from '@/lib/api';
@@ -14,18 +13,18 @@ import type { Account, Message } from '@/types';
 export function ChatView() {
   const { conversationId } = useParams<{ conversationId?: string }>();
   const navigate = useNavigate();
-  const { setConversations, selectedAccountId, setSelectedAccountId } = useAppStore();
-  const { messages, connected, thinking, toolStatus, pipeline, send, stop, createConversation } = useChat(conversationId || null);
+  const { setConversations, selectedAccountId } = useAppStore();
+  const { messages, connected, thinking, toolStatus, pipeline, send, stop, createConversation, removeMessage } = useChat(conversationId || null);
   const [manifestPath, setManifestPath] = useState<string | null>(null);
   const [accounts, setAccounts] = useState<Account[]>([]);
   const [quote, setQuote] = useState<string | null>(null);
+  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
   const creatingRef = useRef(false);
 
   useEffect(() => { api.listAccounts().then(setAccounts).catch(() => {}); }, []);
 
   useEffect(() => {
-    fetch('/api/pipeline/conversations')
-      .then((r) => r.json()).then(setConversations).catch(() => {});
+    api.listConversations().then(setConversations).catch(() => {});
   }, [messages]);
 
   useEffect(() => {
@@ -38,27 +37,13 @@ export function ChatView() {
     }
   }, [messages]);
 
+  // After navigating to a new conversation, send the pending message
   useEffect(() => {
-    if (selectedAccountId && conversationId && connected && messages.length === 0) {
-      const account = accounts.find((a) => a.id === selectedAccountId);
-      if (account) {
-        send(`已选择账号「${account.name}」：${account.description || ''}。生图:${account.imageModel} 视频:${account.videoModel} 画幅:${account.defaultFormat}`);
-      }
+    if (conversationId && connected && pendingMessage && messages.length === 0) {
+      send(pendingMessage);
+      setPendingMessage(null);
     }
-  }, [selectedAccountId, conversationId, connected]);
-
-  const handleNewConversation = useCallback(() => {
-    if (creatingRef.current) return;
-    creatingRef.current = true;
-    createConversation('新对话', selectedAccountId || undefined);
-    setTimeout(() => {
-      fetch('/api/pipeline/conversations').then((r) => r.json()).then((list) => {
-        setConversations(list);
-        if (list.length > 0) navigate(`/chat/${list[0].id}`);
-        creatingRef.current = false;
-      });
-    }, 500);
-  }, [createConversation, selectedAccountId]);
+  }, [conversationId, connected, pendingMessage]);
 
   const handleResume = async () => {
     if (!manifestPath) return;
@@ -84,59 +69,77 @@ export function ChatView() {
 
   const handleContinue = useCallback(() => { send('请继续'); }, [send]);
   const handleQuote = useCallback((content: string) => { setQuote(content.slice(0, 200)); }, []);
+  const handleDeleteMsg = useCallback((msgId: string) => {
+    removeMessage(msgId);
+  }, [removeMessage]);
+
+  // Delayed conversation creation
+  const handleSendNew = useCallback(async (content: string) => {
+    if (creatingRef.current) return;
+    creatingRef.current = true;
+    setPendingMessage(content);
+
+    try {
+      createConversation(content.slice(0, 30), selectedAccountId || undefined);
+      setTimeout(async () => {
+        const list = await api.listConversations();
+        setConversations(list);
+        if (list.length > 0) {
+          navigate(`/chat/${list[0].id}`);
+        }
+        creatingRef.current = false;
+      }, 600);
+    } catch {
+      creatingRef.current = false;
+    }
+  }, [createConversation, selectedAccountId]);
 
   const handleSend = useCallback((content: string) => {
-    if (quote) { send(`> ${quote}\n\n${content}`); setQuote(null); }
-    else send(content);
-  }, [send, quote]);
+    if (quote) { content = `> ${quote}\n\n${content}`; setQuote(null); }
+    if (conversationId) {
+      send(content);
+    } else {
+      handleSendNew(content);
+    }
+  }, [send, quote, conversationId]);
 
   const handleStop = useCallback(() => { stop(); }, [stop]);
 
+  // Empty state - no conversation selected
   if (!conversationId) {
     return (
-      <div className="flex-1 flex flex-col items-center justify-center gap-4">
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 bg-white">
         <div className="text-4xl mb-2">💬</div>
         <h2 className="text-lg font-semibold text-zinc-800">开始新对话</h2>
-        <p className="text-sm text-zinc-500">选择左侧对话或创建新的创作会话</p>
-        <div className="flex gap-2 mt-2">
-          {accounts.length > 0 && (
+        <p className="text-sm text-zinc-500">输入消息开始创作，对话将自动创建</p>
+        <div className="w-full max-w-xl px-4 mt-4">
+          <ChatInput onSend={handleSend} disabled={thinking || creatingRef.current} />
+        </div>
+        {accounts.length > 0 && (
+          <div className="flex items-center gap-2 mt-3">
+            <span className="text-xs text-zinc-400">当前账号:</span>
             <select
               value={selectedAccountId || ''}
-              onChange={(e) => setSelectedAccountId(e.target.value || null)}
-              className="h-9 rounded-md border border-zinc-200 bg-white px-3 text-sm text-zinc-700"
+              onChange={(e) => useAppStore.getState().setSelectedAccountId(e.target.value || null)}
+              className="h-7 rounded border border-zinc-200 bg-zinc-50 px-2 text-xs text-zinc-600"
             >
-              <option value="">不指定账号</option>
+              <option value="">不指定</option>
               {accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
             </select>
-          )}
-          <button
-            onClick={handleNewConversation}
-            disabled={creatingRef.current}
-            className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors disabled:opacity-50"
-          >
-            {creatingRef.current ? '创建中...' : '开始对话'}
-          </button>
-        </div>
+          </div>
+        )}
       </div>
     );
   }
 
+  // Active conversation
   return (
-    <div className="flex-1 flex flex-col bg-white">
-      <div className="px-4 py-2 border-b border-zinc-200 flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-1.5">
-            <div className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-500' : 'bg-red-400'}`} />
-            <span className="text-xs text-zinc-400">{connected ? '在线' : '连接中'}</span>
-          </div>
-          <select
-            value={selectedAccountId || ''}
-            onChange={(e) => setSelectedAccountId(e.target.value || null)}
-            className="h-7 rounded border border-zinc-200 bg-zinc-50 px-2 text-xs text-zinc-600"
-          >
-            <option value="">切换账号</option>
-            {accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
-          </select>
+    <div className="flex-1 flex flex-col bg-white h-full">
+      {/* Header bar */}
+      <div className="px-4 py-2 border-b border-zinc-200 flex items-center justify-between flex-shrink-0">
+        <div className="flex items-center gap-1.5">
+          <div className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-500' : 'bg-red-400'}`} />
+          <span className="text-xs text-zinc-400">{connected ? '在线' : '连接中'}</span>
         </div>
         <div className="flex items-center gap-2">
           {manifestPath && (
@@ -152,43 +155,56 @@ export function ChatView() {
         </div>
       </div>
 
-      <ScrollArea className="flex-1 px-4 py-4">
-        {messages.map((msg) => (
-          <ChatMessage
-            key={msg.id}
-            message={msg}
-            onRegenerate={msg.role === 'assistant' ? handleRegenerate : undefined}
-            onContinue={msg.role === 'assistant' ? handleContinue : undefined}
-            onQuote={handleQuote}
-          />
-        ))}
+      {/* Chat area */}
+      <div className="flex-1 overflow-hidden">
+        <div className="h-full flex flex-col">
+          {/* Message list */}
+          <div className="flex-1 overflow-y-auto px-4 py-4">
+            {messages.map((msg, i) => (
+              msg.role !== 'tool' && (
+                <ChatMessage
+                  key={msg.id}
+                  message={msg}
+                  isLast={i === messages.length - 1}
+                  isThinking={thinking}
+                  onRegenerate={msg.role === 'assistant' ? handleRegenerate : undefined}
+                  onContinue={msg.role === 'assistant' ? handleContinue : undefined}
+                  onQuote={handleQuote}
+                  onDelete={handleDeleteMsg}
+                />
+              )
+            ))}
 
-        {pipeline && (
-          <PipelineProgress
-            phase={pipeline.phase}
-            progress={pipeline.progress}
-            currentItem={pipeline.currentItem}
-            totalItems={pipeline.totalItems}
-            status={pipeline.status}
-          />
-        )}
+            {pipeline && (
+              <PipelineProgress
+                phase={pipeline.phase}
+                progress={pipeline.progress}
+                currentItem={pipeline.currentItem}
+                totalItems={pipeline.totalItems}
+                status={pipeline.status}
+              />
+            )}
 
-        {thinking && !pipeline && (
-          <div className="flex items-center gap-2 text-zinc-400 text-sm py-2">
-            <Loader2 size={14} className="animate-spin" />
-            {toolStatus || '思考中...'}
+            {thinking && !pipeline && (
+              <div className="flex items-center gap-2 text-zinc-400 text-sm py-2">
+                <Loader2 size={14} className="animate-spin" />
+                {toolStatus || '思考中...'}
+              </div>
+            )}
           </div>
-        )}
-      </ScrollArea>
 
-      {quote && (
-        <div className="mx-4 px-3 py-1.5 bg-zinc-50 border border-zinc-200 rounded-lg flex items-center gap-2 text-xs text-zinc-500">
-          <span className="flex-1 truncate">引用: {quote}</span>
-          <button onClick={() => setQuote(null)} className="text-zinc-400 hover:text-zinc-600"><X size={12} /></button>
+          {/* Quote bar */}
+          {quote && (
+            <div className="mx-4 px-3 py-1.5 bg-zinc-50 border border-zinc-200 rounded-lg flex items-center gap-2 text-xs text-zinc-500 flex-shrink-0">
+              <span className="flex-1 truncate">引用: {quote}</span>
+              <button onClick={() => setQuote(null)} className="text-zinc-400 hover:text-zinc-600"><X size={12} /></button>
+            </div>
+          )}
+
+          {/* Input */}
+          <ChatInput onSend={handleSend} disabled={thinking} />
         </div>
-      )}
-
-      <ChatInput onSend={handleSend} disabled={thinking} />
+      </div>
     </div>
   );
 }