style(frontend):优化前端效果

1.对于UI的配色和布局进行了优化

frontend/src/components/Chat/LeftPanel.tsx

@@ -69,9 +69,9 @@ export function LeftPanel({ activeTab }: LeftPanelProps) {
   const isChats = activeTab === 'chats';
 
   return (
-    <div className="w-64 bg-bg-sidebar border-r border-border-primary flex flex-col shrink-0">
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border-primary">
-        <span className="text-[11px] font-bold text-text-muted uppercase tracking-widest">
+    <div className="w-[260px] bg-bg-sidebar border-r border-border-primary flex flex-col shrink-0">
+      <div className="flex items-center justify-between px-4 py-4">
+        <span className="text-[11px] font-semibold text-text-muted uppercase tracking-[1.5px]">
           {isChats ? t('chat.chatHistory') : t('nav.workflow')}
         </span>
         <button
@@ -79,47 +79,49 @@ export function LeftPanel({ activeTab }: LeftPanelProps) {
             if (isChats) handleNewChat();
             else setSelectedWorkflow('new');
           }}
-          className="p-1.5 rounded-lg bg-bg-hover text-text-muted hover:text-accent hover:bg-accent-light transition-all"
+          className="w-[26px] h-[26px] rounded-md bg-bg-card text-text-secondary hover:bg-accent hover:text-white transition-all flex items-center justify-center shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
           title={isChats ? t('chat.newChat') : t('workflow.createWorkflow')}
         >
-          <Plus size={14} />
+          <Plus size={12} />
         </button>
       </div>
 
-      <div className="flex-1 overflow-y-auto py-2 px-2 space-y-0.5">
+      <div className="flex-1 overflow-y-auto px-2 pb-2">
         {isChats ? (
           sessions.length === 0 ? (
             <div className="px-3 py-8 text-center text-text-muted text-xs">
               {t('chat.noHistory')}
             </div>
           ) : (
-            sessions.map((session) => (
-              <div
-                key={session.id}
-                onClick={() => setActiveSessionId(session.id)}
-                className={`group flex items-center gap-2.5 px-3 py-2.5 rounded-lg cursor-pointer transition-all ${
-                  activeSessionId === session.id
-                    ? 'bg-accent-light text-accent'
-                    : 'hover:bg-bg-hover text-text-secondary'
-                }`}
-              >
-                <MessageSquare size={14} className={`flex-shrink-0 ${activeSessionId === session.id ? 'text-accent' : 'text-text-muted'}`} />
-                <div className="flex-1 min-w-0">
-                  <h3 className={`text-xs font-medium truncate ${activeSessionId === session.id ? 'text-accent' : 'text-text-secondary'}`}>
-                    {session.title}
-                  </h3>
-                  <p className="text-[10px] text-text-muted mt-0.5">
-                    {new Date(session.updatedAt).toLocaleDateString()}
-                  </p>
-                </div>
-                <button
-                  onClick={(e) => handleDeleteChat(e, session.id)}
-                  className="opacity-0 group-hover:opacity-100 p-1 rounded text-text-muted hover:text-danger hover:bg-danger-bg transition-all"
+            sessions.map((session) => {
+              const isActive = activeSessionId === session.id;
+              return (
+                <div
+                  key={session.id}
+                  onClick={() => setActiveSessionId(session.id)}
+                  className={`group flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-all mb-px ${
+                    isActive
+                      ? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
+                      : 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
+                  }`}
                 >
-                  <Trash2 size={12} />
-                </button>
-              </div>
-            ))
+                  <div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
+                    <MessageSquare size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
+                      {session.title}
+                    </h3>
+                  </div>
+                  <button
+                    onClick={(e) => handleDeleteChat(e, session.id)}
+                    className="opacity-0 group-hover:opacity-100 p-1 rounded text-text-muted hover:text-danger transition-all"
+                  >
+                    <Trash2 size={11} />
+                  </button>
+                </div>
+              );
+            })
           )
         ) : (
           loadingWorkflows ? (
@@ -129,32 +131,29 @@ export function LeftPanel({ activeTab }: LeftPanelProps) {
               {t('workflow.noWorkflows')}
             </div>
           ) : (
-            workflows.map((wf) => (
-              <div
-                key={wf.trace_id}
-                onClick={() => setSelectedWorkflow(wf.trace_id)}
-                className={`group flex items-center gap-2.5 px-3 py-2.5 rounded-lg cursor-pointer transition-all ${
-                  selectedWorkflow === wf.trace_id
-                    ? 'bg-accent-light'
-                    : 'hover:bg-bg-hover'
-                }`}
-              >
-                <WorkflowIcon size={14} className={`flex-shrink-0 ${selectedWorkflow === wf.trace_id ? 'text-accent' : 'text-text-muted'}`} />
-                <div className="flex-1 min-w-0">
-                  <h3 className={`text-xs font-medium truncate ${selectedWorkflow === wf.trace_id ? 'text-accent' : 'text-text-secondary'}`}>
-                    {wf.title || t('common.unnamed')}
-                  </h3>
-                  <div className="flex items-center gap-1.5 mt-0.5">
-                    <span className={`w-1.5 h-1.5 rounded-full ${
-                      wf.status?.includes('working') ? 'bg-accent animate-pulse' :
-                      wf.status === 'failed' ? 'bg-danger' :
-                      wf.status === 'completed' ? 'bg-success' : 'bg-text-muted'
-                    }`} />
-                    <span className="text-[10px] text-text-muted font-mono truncate">{wf.trace_id.slice(-8)}</span>
+            workflows.map((wf) => {
+              const isActive = selectedWorkflow === wf.trace_id;
+              return (
+                <div
+                  key={wf.trace_id}
+                  onClick={() => setSelectedWorkflow(wf.trace_id)}
+                  className={`group flex items-center gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer transition-all mb-px ${
+                    isActive
+                      ? 'bg-bg-card shadow-[0_1px_3px_rgba(0,0,0,0.04)]'
+                      : 'hover:bg-white/60 dark:hover:bg-white/[0.04]'
+                  }`}
+                >
+                  <div className={`w-7 h-7 rounded-[7px] flex items-center justify-center flex-shrink-0 ${isActive ? 'bg-accent-light' : 'bg-bg-primary'}`}>
+                    <WorkflowIcon size={12} className={isActive ? 'text-accent' : 'text-text-muted'} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className={`text-xs truncate ${isActive ? 'text-text-primary font-medium' : 'text-text-secondary'}`}>
+                      {wf.title || t('common.unnamed')}
+                    </h3>
                   </div>
                 </div>
-              </div>
-            ))
+              );
+            })
           )
         )}
       </div>