From f43a640e644f424d0cc8a73efbc7b7d9ddbefa62 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 7 May 2026 04:07:46 +0800
Subject: [PATCH] fix(web): add conversation preview, fix dark theme remnants

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/accounts/AccountForm.tsx   |  8 ++---
 .../src/components/layout/MiddlePanel.tsx     | 32 +++++++++++++++----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/web/client/src/components/accounts/AccountForm.tsx b/web/client/src/components/accounts/AccountForm.tsx
index d248a01..a06cb41 100644
--- a/web/client/src/components/accounts/AccountForm.tsx
+++ b/web/client/src/components/accounts/AccountForm.tsx
@@ -67,7 +67,7 @@ export function AccountForm({ account, onSave, onDelete, onCancel }: Props) {
           <select
             value={form.defaultFormat}
             onChange={(e) => handleChange('defaultFormat', e.target.value)}
-            className="mt-1 w-full h-10 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm"
+            className="mt-1 w-full h-10 rounded-md border border-zinc-200 bg-zinc-50 px-3 text-sm"
           >
             <option value="9:16">9:16 竖屏</option>
             <option value="16:9">16:9 横屏</option>
@@ -79,7 +79,7 @@ export function AccountForm({ account, onSave, onDelete, onCancel }: Props) {
           <select
             value={form.imageModel}
             onChange={(e) => handleChange('imageModel', e.target.value)}
-            className="mt-1 w-full h-10 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm"
+            className="mt-1 w-full h-10 rounded-md border border-zinc-200 bg-zinc-50 px-3 text-sm"
           >
             <option value="gemini">Gemini</option>
             <option value="mj">Midjourney</option>
@@ -92,7 +92,7 @@ export function AccountForm({ account, onSave, onDelete, onCancel }: Props) {
           <select
             value={form.videoModel}
             onChange={(e) => handleChange('videoModel', e.target.value)}
-            className="mt-1 w-full h-10 rounded-md border border-zinc-800 bg-zinc-900 px-3 text-sm"
+            className="mt-1 w-full h-10 rounded-md border border-zinc-200 bg-zinc-50 px-3 text-sm"
           >
             <option value="veo3-fast">Veo3 Fast</option>
             <option value="veo3-fast-frames">Veo3 Fast Frames</option>
@@ -119,7 +119,7 @@ export function AccountForm({ account, onSave, onDelete, onCancel }: Props) {
           onChange={(e) => handleChange('ttsInstruction', e.target.value)}
           rows={3}
           placeholder="用沉稳有力的男性声音朗读..."
-          className="mt-1 w-full rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm resize-y"
+          className="mt-1 w-full rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm resize-y"
         />
       </div>
 
diff --git a/web/client/src/components/layout/MiddlePanel.tsx b/web/client/src/components/layout/MiddlePanel.tsx
index 3f554ac..6628c9a 100644
--- a/web/client/src/components/layout/MiddlePanel.tsx
+++ b/web/client/src/components/layout/MiddlePanel.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { Plus } from 'lucide-react';
+import { Plus, MessageCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -26,6 +26,15 @@ export function MiddlePanel() {
       .catch(() => {});
   };
 
+  const formatDate = (d: string) => {
+    const date = new Date(d);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    if (diff < 86400000) return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+    if (diff < 604800000) return `${Math.floor(diff / 86400000)}天前`;
+    return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+  };
+
   return (
     <aside className="w-60 flex flex-col border-r border-zinc-200 bg-white">
       <div className="p-3 flex items-center justify-between border-b border-zinc-100">
@@ -39,17 +48,28 @@ export function MiddlePanel() {
           <Plus size={16} />
         </Button>
       </div>
-      <ScrollArea className="flex-1 px-2 py-1">
+      <ScrollArea className="flex-1">
         {conversations.map((conv) => (
           <button
             key={conv.id}
             onClick={() => navigate(`/chat/${conv.id}`)}
-            className={`w-full text-left px-3 py-2 rounded-md text-sm truncate mb-0.5 transition-colors
+            className={`w-full text-left px-3 py-2.5 border-b border-zinc-50 transition-colors
               ${conv.id === conversationId
-                ? 'bg-indigo-50 text-indigo-700 font-medium'
-                : 'text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900'}`}
+                ? 'bg-indigo-50 border-l-2 border-l-indigo-600'
+                : 'hover:bg-zinc-50 border-l-2 border-l-transparent'}`}
           >
-            {conv.title}
+            <div className={`text-sm truncate font-medium ${conv.id === conversationId ? 'text-indigo-700' : 'text-zinc-700'}`}>
+              {conv.title}
+            </div>
+            <div className="flex items-center justify-between mt-0.5">
+              <span className="text-xs text-zinc-400 truncate max-w-[150px]">
+                <MessageCircle size={10} className="inline mr-1" />
+                {conv.title.length > 25 ? conv.title.slice(0, 25) + '...' : conv.title}
+              </span>
+              <span className="text-[10px] text-zinc-300 flex-shrink-0 ml-2">
+                {formatDate(conv.updated_at)}
+              </span>
+            </div>
           </button>
         ))}
         {conversations.length === 0 && (