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

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import './index.css';
 import { Sidebar, MainViewType } from './components/Sidebar';
 import { ChatArea } from './components/ChatArea';
@@ -10,6 +11,9 @@ import { TeamCollaborationView } from './components/TeamCollaborationView';
 import { useGatewayStore } from './store/gatewayStore';
 import { useTeamStore } from './store/teamStore';
 import { getStoredGatewayToken } from './lib/gateway-client';
+import { pageVariants, defaultTransition, fadeInVariants } from './lib/animations';
+import { Bot, Users } from 'lucide-react';
+import { EmptyState } from './components/ui';
 
 type View = 'main' | 'settings';
 
@@ -66,48 +70,51 @@ function App() {
       />
 
       {/* 中间区域 */}
-      <main className="flex-1 flex flex-col bg-white relative overflow-hidden">
-        {mainContentView === 'hands' && selectedHandId ? (
-          <HandTaskPanel
-            handId={selectedHandId}
-            onBack={() => setSelectedHandId(undefined)}
-          />
-        ) : mainContentView === 'hands' ? (
-          <div className="flex-1 flex items-center justify-center p-6">
-            <div className="text-center">
-              <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                <span className="text-4xl">🤖</span>
-              </div>
-              <h3 className="text-lg font-semibold text-gray-700 mb-2">选择一个 Hand</h3>
-              <p className="text-sm text-gray-400 max-w-sm">
-                从左侧列表中选择一个自主能力包，查看其任务清单和执行结果。
-              </p>
-            </div>
-          </div>
-        ) : mainContentView === 'workflow' ? (
-          <div className="flex-1 overflow-y-auto">
-            <SchedulerPanel />
-          </div>
-        ) : mainContentView === 'team' ? (
-          activeTeam ? (
-            <TeamCollaborationView teamId={activeTeam.id} />
+      <AnimatePresence mode="wait">
+        <motion.main
+          key={mainContentView}
+          variants={pageVariants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          transition={defaultTransition}
+          className="flex-1 flex flex-col bg-white relative overflow-hidden"
+        >
+          {mainContentView === 'hands' && selectedHandId ? (
+            <HandTaskPanel
+              handId={selectedHandId}
+              onBack={() => setSelectedHandId(undefined)}
+            />
+          ) : mainContentView === 'hands' ? (
+            <EmptyState
+              icon={<Bot className="w-8 h-8" />}
+              title="Select a Hand"
+              description="Choose an autonomous capability package from the list on the left to view its task list and execution results."
+            />
+          ) : mainContentView === 'workflow' ? (
+            <motion.div
+              variants={fadeInVariants}
+              initial="initial"
+              animate="animate"
+              className="flex-1 overflow-y-auto"
+            >
+              <SchedulerPanel />
+            </motion.div>
+          ) : mainContentView === 'team' ? (
+            activeTeam ? (
+              <TeamCollaborationView teamId={activeTeam.id} />
+            ) : (
+              <EmptyState
+                icon={<Users className="w-8 h-8" />}
+                title="Select or Create a Team"
+                description="Choose a team from the list on the left, or click + to create a new multi-Agent collaboration team."
+              />
+            )
           ) : (
-            <div className="flex-1 flex items-center justify-center p-6">
-              <div className="text-center">
-                <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                  <span className="text-4xl">👥</span>
-                </div>
-                <h3 className="text-lg font-semibold text-gray-700 mb-2">选择或创建团队</h3>
-                <p className="text-sm text-gray-400 max-w-sm">
-                  从左侧列表选择一个团队，或点击 + 创建新的多 Agent 协作团队。
-                </p>
-              </div>
-            </div>
-          )
-        ) : (
-          <ChatArea />
-        )}
-      </main>
+            <ChatArea />
+          )}
+        </motion.main>
+      </AnimatePresence>
 
       {/* 右侧边栏 */}
       <RightPanel />