feat(ui): enhance UI with animations, dark mode support and and improved components

- Add framer-motion page transitions and AnimatePresence support
- Add dark mode support across all components
- Create reusable UI components (Button, Badge, Card, EmptyState, Input, Toast, Skeleton)
- Add CSS custom properties for consistent theming
- Add animation variants and utility functions
- Improve ChatArea, Sidebar, TriggersPanel with animations

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

desktop/src/components/ChatArea.tsx

@@ -1,7 +1,10 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { useChatStore, Message } from '../store/chatStore';
 import { useGatewayStore } from '../store/gatewayStore';
-import { Paperclip, ChevronDown, Terminal, SquarePen, ArrowUp } from 'lucide-react';
+import { Paperclip, ChevronDown, Terminal, SquarePen, ArrowUp, MessageSquare } from 'lucide-react';
+import { Button, EmptyState } from './ui';
+import { listItemVariants, defaultTransition, fadeInVariants } from '../lib/animations';
 
 const MODELS = ['glm-5', 'qwen3.5-plus', 'kimi-k2.5', 'minimax-m2.5'];
 
@@ -58,56 +61,84 @@ export function ChatArea() {
   return (
     <>
       {/* Header */}
-      <div className="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0 bg-white">
+      <div className="h-14 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-6 flex-shrink-0 bg-white dark:bg-gray-900">
         <div className="flex items-center gap-2">
-          <h2 className="font-semibold text-gray-900">{currentAgent?.name || 'ZCLAW'}</h2>
+          <h2 className="font-semibold text-gray-900 dark:text-gray-100">{currentAgent?.name || 'ZCLAW'}</h2>
           {isStreaming ? (
-            <span className="text-xs text-gray-400 flex items-center gap-1">
-              <span className="w-1.5 h-1.5 bg-gray-400 rounded-full thinking-dot"></span>
+            <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
+              <span className="w-1.5 h-1.5 bg-gray-500 dark:bg-gray-400 rounded-full thinking-dot"></span>
               正在输入中
             </span>
           ) : (
-            <span className={`text-xs flex items-center gap-1 ${connected ? 'text-green-500' : 'text-gray-400'}`}>
-              <span className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-400' : 'bg-gray-300'}`}></span>
+            <span className={`text-xs flex items-center gap-1 ${connected ? 'text-green-500' : 'text-gray-500 dark:text-gray-400'}`}>
+              <span className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-400' : 'bg-gray-300 dark:bg-gray-600'}`}></span>
               {connected ? 'Gateway 已连接' : 'Gateway 未连接'}
             </span>
           )}
         </div>
         <div className="flex items-center gap-2">
           {messages.length > 0 && (
-            <button
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={newConversation}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-500 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
               title="新对话"
+              aria-label="开始新对话"
+              className="flex items-center gap-1.5 text-gray-500 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20"
             >
               <SquarePen className="w-3.5 h-3.5" />
               新对话
-            </button>
+            </Button>
           )}
         </div>
       </div>
 
       {/* Messages */}
-      <div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
-        {messages.length === 0 && (
-          <div className="text-center text-gray-400 py-20">
-            <p className="text-lg mb-2">欢迎使用 ZCLAW 🦞</p>
-            <p className="text-sm">{connected ? '发送消息开始对话' : '请先在设置中连接 Gateway'}</p>
-          </div>
-        )}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6 bg-white dark:bg-gray-900">
+        <AnimatePresence mode="popLayout">
+          {messages.length === 0 && (
+            <motion.div
+              key="empty-state"
+              variants={fadeInVariants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+            >
+              <EmptyState
+                icon={<MessageSquare className="w-8 h-8" />}
+                title="欢迎使用 ZCLAW"
+                description={connected ? '发送消息开始对话' : '请先在设置中连接 Gateway'}
+              />
+            </motion.div>
+          )}
 
-        {messages.map((message) => (
-          <MessageBubble key={message.id} message={message} />
-        ))}
+          {messages.map((message) => (
+            <motion.div
+              key={message.id}
+              variants={listItemVariants}
+              initial="hidden"
+              animate="visible"
+              layout
+              transition={defaultTransition}
+            >
+              <MessageBubble message={message} />
+            </motion.div>
+          ))}
+        </AnimatePresence>
       </div>
 
       {/* Input */}
-      <div className="border-t border-gray-100 p-4 bg-white">
+      <div className="border-t border-gray-100 dark:border-gray-800 p-4 bg-white dark:bg-gray-900">
         <div className="max-w-4xl mx-auto">
-          <div className="relative flex items-end gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-2 focus-within:border-orange-300 focus-within:ring-2 focus-within:ring-orange-100 transition-all">
-            <button className="p-2 text-gray-400 hover:text-gray-600 rounded-lg">
+          <div className="relative flex items-end gap-2 bg-gray-50 dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-2 focus-within:border-orange-300 dark:focus-within:border-orange-600 focus-within:ring-2 focus-within:ring-orange-100 dark:focus-within:ring-orange-900/30 transition-all">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              aria-label="添加附件"
+            >
               <Paperclip className="w-5 h-5" />
-            </button>
+            </Button>
             <div className="flex-1 py-1">
               <textarea
                 ref={textareaRef}
@@ -123,41 +154,48 @@ export function ChatArea() {
                 }
                 disabled={isStreaming || !connected}
                 rows={1}
-                className="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 disabled:opacity-50 resize-none leading-relaxed mt-1"
+                className="w-full bg-transparent border-none focus:outline-none text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 disabled:opacity-50 resize-none leading-relaxed mt-1"
                 style={{ minHeight: '24px', maxHeight: '160px' }}
               />
             </div>
             <div className="flex items-center gap-2 pr-2 pb-1 relative">
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setShowModelPicker(!showModelPicker)}
-                className="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors"
+                className="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
+                aria-label="选择模型"
+                aria-expanded={showModelPicker}
               >
                 <span>{currentModel}</span>
                 <ChevronDown className="w-3 h-3" />
-              </button>
+              </Button>
               {showModelPicker && (
-                <div className="absolute bottom-full right-8 mb-2 bg-white border border-gray-200 rounded-lg shadow-lg py-1 min-w-[160px] z-10">
+                <div className="absolute bottom-full right-8 mb-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg py-1 min-w-[160px] z-10">
                   {MODELS.map((model) => (
                     <button
                       key={model}
                       onClick={() => { setCurrentModel(model); setShowModelPicker(false); }}
-                      className={`w-full text-left px-3 py-2 text-xs hover:bg-gray-50 ${model === currentModel ? 'text-orange-600 font-medium' : 'text-gray-700'}`}
+                      className={`w-full text-left px-3 py-2 text-xs hover:bg-gray-50 dark:hover:bg-gray-700 ${model === currentModel ? 'text-orange-600 dark:text-orange-400 font-medium' : 'text-gray-700 dark:text-gray-300'}`}
                     >
                       {model}
                     </button>
                   ))}
                 </div>
               )}
-              <button
+              <Button
+                variant="primary"
+                size="sm"
                 onClick={handleSend}
                 disabled={isStreaming || !input.trim() || !connected}
-                className="w-8 h-8 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                className="w-8 h-8 rounded-full p-0 flex items-center justify-center"
+                aria-label="发送消息"
               >
                 <ArrowUp className="w-4 h-4" />
-              </button>
+              </Button>
             </div>
           </div>
-          <div className="text-center mt-2 text-xs text-gray-400">
+          <div className="text-center mt-2 text-xs text-gray-500 dark:text-gray-400">
             Agent 在本地运行，内容由 AI 生成
           </div>
         </div>
@@ -229,7 +267,7 @@ function renderInline(text: string): React.ReactNode[] {
     } else if (match[5]) {
       // `code`
       parts.push(
-        <code key={parts.length} className="bg-gray-100 text-orange-700 px-1 py-0.5 rounded text-[0.85em] font-mono">
+        <code key={parts.length} className="bg-gray-100 dark:bg-gray-700 text-orange-700 dark:text-orange-400 px-1 py-0.5 rounded text-[0.85em] font-mono">
           {match[6]}
         </code>
       );
@@ -237,7 +275,7 @@ function renderInline(text: string): React.ReactNode[] {
       // [text](url)
       parts.push(
         <a key={parts.length} href={match[9]} target="_blank" rel="noopener noreferrer"
-          className="text-orange-600 underline hover:text-orange-700">{match[8]}</a>
+          className="text-orange-600 dark:text-orange-400 underline hover:text-orange-700 dark:hover:text-orange-300">{match[8]}</a>
       );
     }
 
@@ -254,16 +292,16 @@ function renderInline(text: string): React.ReactNode[] {
 function MessageBubble({ message }: { message: Message }) {
   if (message.role === 'tool') {
     return (
-      <div className="ml-12 bg-gray-50 border border-gray-200 rounded-lg p-3 text-xs font-mono">
-        <div className="flex items-center gap-2 text-gray-500 mb-1">
+      <div className="ml-12 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-xs font-mono">
+        <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400 mb-1">
           <Terminal className="w-3.5 h-3.5" />
           <span className="font-semibold">{message.toolName || 'tool'}</span>
         </div>
         {message.toolInput && (
-          <pre className="text-gray-600 bg-white rounded p-2 mb-1 overflow-x-auto">{message.toolInput}</pre>
+          <pre className="text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-900 rounded p-2 mb-1 overflow-x-auto">{message.toolInput}</pre>
         )}
         {message.content && (
-          <pre className="text-green-700 bg-white rounded p-2 overflow-x-auto">{message.content}</pre>
+          <pre className="text-green-700 dark:text-green-400 bg-white dark:bg-gray-900 rounded p-2 overflow-x-auto">{message.content}</pre>
         )}
       </div>
     );
@@ -274,13 +312,13 @@ function MessageBubble({ message }: { message: Message }) {
   return (
     <div className={`flex gap-4 ${isUser ? 'justify-end' : ''}`}>
       <div
-        className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${isUser ? 'bg-gray-200 text-gray-600 order-last' : 'agent-avatar text-white'}`}
+        className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${isUser ? 'bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-200 order-last' : 'agent-avatar text-white'}`}
       >
-        {isUser ? '用' : '🦞'}
+        {isUser ? '用' : 'Z'}
       </div>
       <div className={isUser ? 'max-w-2xl' : 'flex-1 max-w-3xl'}>
         <div className={`p-4 shadow-sm ${isUser ? 'chat-bubble-user shadow-md' : 'chat-bubble-assistant'}`}>
-          <div className={`leading-relaxed whitespace-pre-wrap ${isUser ? 'text-white' : 'text-gray-700'}`}>
+          <div className={`leading-relaxed whitespace-pre-wrap ${isUser ? 'text-white' : 'text-gray-700 dark:text-gray-200'}`}>
             {message.content
               ? (isUser ? message.content : renderMarkdown(message.content))
               : (message.streaming ? '' : '...')}