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/Sidebar.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Settings, Users, Bot, GitBranch, MessageSquare } from 'lucide-react';
 import { CloneManager } from './CloneManager';
 import { HandList } from './HandList';
 import { TaskList } from './TaskList';
 import { TeamList } from './TeamList';
 import { useGatewayStore } from '../store/gatewayStore';
+import { Button } from './ui';
+import { containerVariants, defaultTransition } from '../lib/animations';
 
 export type MainViewType = 'chat' | 'hands' | 'workflow' | 'team';
 
@@ -55,11 +58,14 @@ export function Sidebar({
   return (
     <aside className="w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col flex-shrink-0">
       {/* 顶部标签 - 使用图标 */}
-      <div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+      <div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="tablist">
         {TABS.map(({ key, label, icon: Icon }) => (
           <button
             key={key}
             title={label}
+            aria-label={label}
+            aria-selected={activeTab === key}
+            role="tab"
             className={`flex-1 py-2.5 px-2 text-xs font-medium transition-colors flex flex-col items-center gap-0.5 ${
               activeTab === key
                 ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 bg-blue-50 dark:bg-blue-900/20'
@@ -75,32 +81,50 @@ export function Sidebar({
 
       {/* Tab content */}
       <div className="flex-1 overflow-hidden">
-        {activeTab === 'clones' && <CloneManager />}
-        {activeTab === 'hands' && (
-          <HandList
-            selectedHandId={selectedHandId}
-            onSelectHand={handleSelectHand}
-          />
-        )}
-        {activeTab === 'workflow' && <TaskList />}
-        {activeTab === 'team' && (
-          <TeamList
-            selectedTeamId={selectedTeamId}
-            onSelectTeam={onSelectTeam}
-          />
-        )}
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={activeTab}
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            transition={defaultTransition}
+            className="h-full"
+          >
+            {activeTab === 'clones' && <CloneManager />}
+            {activeTab === 'hands' && (
+              <HandList
+                selectedHandId={selectedHandId}
+                onSelectHand={handleSelectHand}
+              />
+            )}
+            {activeTab === 'workflow' && <TaskList />}
+            {activeTab === 'team' && (
+              <TeamList
+                selectedTeamId={selectedTeamId}
+                onSelectTeam={onSelectTeam}
+              />
+            )}
+          </motion.div>
+        </AnimatePresence>
       </div>
 
       {/* 底部用户 */}
       <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
         <div className="flex items-center gap-3">
-          <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
+          <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
             {userName?.charAt(0) || '用'}
           </div>
-          <span className="font-medium text-gray-700 dark:text-gray-300">{userName}</span>
-          <button className="ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onClick={onOpenSettings}>
+          <span className="font-medium text-gray-700 dark:text-gray-300 truncate">{userName}</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="ml-auto p-1.5"
+            onClick={onOpenSettings}
+            aria-label="打开设置"
+          >
             <Settings className="w-4 h-4" />
-          </button>
+          </Button>
         </div>
       </div>
     </aside>