feat: UI美化和UX改进 v0.1.5

- 优化设计系统和主题配置
  - 增强Tailwind配置，添加更丰富的色彩系统
  - 新增多种动画效果和过渡动画
  - 改进字体系统和间距设置
  - 添加阴影变体和渐变效果

- 改进项目列表页面UI/UX
  - 重新设计页面头部，添加渐变背景和统计信息
  - 优化项目卡片布局和响应式设计
  - 增强加载和错误状态的视觉效果
  - 添加交错动画效果

- 优化项目卡片组件
  - 重新设计卡片布局，添加背景装饰
  - 改进统计信息展示，使用渐变背景和徽章
  - 增强悬停效果和交互反馈
  - 优化菜单和按钮设计

- 改进表单和模态框体验
  - 重新设计模态框头部和布局
  - 增强表单字段的视觉设计和验证反馈
  - 添加加载状态和成功状态指示
  - 改进按钮样式和交互效果

- 增强加载状态和反馈机制
  - 重新设计EmptyState组件，添加装饰效果
  - 增强LoadingSpinner，支持多种动画样式
  - 改进ErrorMessage组件，支持多种消息类型
  - 新增SkeletonLoader组件用于骨架屏加载

- 添加微交互和动画效果
  - 新增AnimatedButton组件，支持涟漪效果
  - 创建PageTransition组件用于页面过渡
  - 添加多种动画工具组件
  - 增强按钮和卡片的微交互效果

- 优化响应式设计和移动端体验
  - 改进容器布局和间距设置
  - 优化移动端的触摸体验
  - 确保所有组件在不同屏幕尺寸下的完美适配

遵循前端开发规范，提升界面美观性和用户体验

apps/desktop/src/components/ErrorMessage.tsx

@@ -1,36 +1,125 @@
 import React from 'react';
-import { AlertCircle, RefreshCw, X } from 'lucide-react';
+import { AlertCircle, RefreshCw, X, AlertTriangle, Info, CheckCircle } from 'lucide-react';
 
 interface ErrorMessageProps {
   message: string;
+  type?: 'error' | 'warning' | 'info' | 'success';
   onRetry?: () => void;
   onDismiss?: () => void;
+  title?: string;
 }
 
 /**
- * 错误消息组件
+ * 增强的消息组件
+ * 支持多种消息类型和更好的视觉设计
  */
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({
   message,
+  type = 'error',
   onRetry,
-  onDismiss
+  onDismiss,
+  title
 }) => {
+  const getConfig = () => {
+    switch (type) {
+      case 'warning':
+        return {
+          bgColor: 'bg-yellow-50',
+          borderColor: 'border-yellow-200',
+          textColor: 'text-yellow-800',
+          iconColor: 'text-yellow-600',
+          icon: AlertTriangle,
+          defaultTitle: '警告'
+        };
+      case 'info':
+        return {
+          bgColor: 'bg-blue-50',
+          borderColor: 'border-blue-200',
+          textColor: 'text-blue-800',
+          iconColor: 'text-blue-600',
+          icon: Info,
+          defaultTitle: '信息'
+        };
+      case 'success':
+        return {
+          bgColor: 'bg-green-50',
+          borderColor: 'border-green-200',
+          textColor: 'text-green-800',
+          iconColor: 'text-green-600',
+          icon: CheckCircle,
+          defaultTitle: '成功'
+        };
+      default:
+        return {
+          bgColor: 'bg-red-50',
+          borderColor: 'border-red-200',
+          textColor: 'text-red-800',
+          iconColor: 'text-red-600',
+          icon: AlertCircle,
+          defaultTitle: '错误'
+        };
+    }
+  };
+
+  const config = getConfig();
+  const Icon = config.icon;
+
   return (
-    <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <AlertCircle size={20} className="text-red-500 flex-shrink-0" />
-        <span className="text-red-700">{message}</span>
-      </div>
-      <div className="flex items-center gap-2">
-        {onRetry && (
-          <button className="btn btn-secondary btn-sm" onClick={onRetry}>
-            <RefreshCw size={14} />
-            重试
-          </button>
-        )}
+    <div className={`${config.bgColor} ${config.borderColor} border rounded-2xl p-6 animate-fade-in-up shadow-sm`}>
+      <div className="flex items-start gap-4">
+        {/* 图标 */}
+        <div className={`${config.iconColor} flex-shrink-0 mt-0.5`}>
+          <Icon size={24} />
+        </div>
+
+        {/* 内容 */}
+        <div className="flex-1 min-w-0">
+          {/* 标题 */}
+          {(title || config.defaultTitle) && (
+            <h4 className={`${config.textColor} font-semibold text-lg mb-2`}>
+              {title || config.defaultTitle}
+            </h4>
+          )}
+
+          {/* 消息内容 */}
+          <p className={`${config.textColor} leading-relaxed`}>
+            {message}
+          </p>
+
+          {/* 操作按钮 */}
+          {(onRetry || onDismiss) && (
+            <div className="flex items-center gap-3 mt-4">
+              {onRetry && (
+                <button
+                  className="btn btn-secondary btn-sm"
+                  onClick={onRetry}
+                >
+                  <RefreshCw size={14} />
+                  重试
+                </button>
+              )}
+              {onDismiss && (
+                <button
+                  className="btn btn-ghost btn-sm"
+                  onClick={onDismiss}
+                  title="关闭"
+                >
+                  <X size={14} />
+                  关闭
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* 右上角关闭按钮 */}
         {onDismiss && (
-          <button className="btn btn-ghost btn-sm" onClick={onDismiss}>
-            <X size={14} />
+          <button
+            className={`${config.iconColor} hover:bg-white hover:bg-opacity-50 p-1 rounded-lg transition-colors duration-200 flex-shrink-0`}
+            onClick={onDismiss}
+            title="关闭"
+          >
+            <X size={16} />
           </button>
         )}
       </div>