docs: add statistics style alignment analysis and comparison

STATISTICS_STYLE_ALIGNMENT.md

@@ -0,0 +1,120 @@
+# ExportRecordManager 统计样式对齐总结
+
+## 🎯 目标
+将 ExportRecordManager 组件的统计卡片样式与项目中其他"项目统计"保持完全一致，确保整个应用的视觉统一性。
+
+## 📊 参考样式分析
+
+### 项目中的统计卡片设计模式
+通过分析 `ProjectCard.tsx` 和 `ProjectDetails.tsx` 中的项目统计样式，发现项目使用了以下设计模式：
+
+```tsx
+// ProjectDetails.tsx 中的统计卡片样式
+<div className="bg-gradient-to-br from-white to-primary-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
+  <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-primary-100/50 to-primary-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
+  <div className="relative z-10">
+    {/* 内容 */}
+  </div>
+</div>
+```
+
+### 设计特点
+1. **渐变背景**: `bg-gradient-to-br from-white to-{color}-50/30`
+2. **装饰圆圈**: 右上角的半透明渐变圆圈装饰
+3. **悬停效果**: `hover:-translate-y-1` 和阴影变化
+4. **圆角设计**: `rounded-xl` 更大的圆角
+5. **层次结构**: 使用 `relative` 和 `z-10` 确保内容在装饰之上
+
+## 🔄 修改对比
+
+### 修改前 - 使用 stat-card 类
+```tsx
+<div className="stat-card primary">
+  <div className="flex items-center justify-between">
+    <div>
+      <div className="text-2xl font-bold text-primary-600">
+        {statistics.total_exports}
+      </div>
+      <div className="text-sm text-gray-600">总导出次数</div>
+    </div>
+    <div className="p-3 bg-primary-50 rounded-lg">
+      <BarChart3 className="w-6 h-6 text-primary-600" />
+    </div>
+  </div>
+</div>
+```
+
+### 修改后 - 项目统计风格
+```tsx
+<div className="bg-gradient-to-br from-white to-primary-50/30 rounded-xl shadow-sm border border-gray-200/50 p-4 md:p-5 hover:shadow-md transition-all duration-300 hover:-translate-y-1 relative overflow-hidden">
+  <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-primary-100/50 to-primary-200/50 rounded-full -translate-y-8 translate-x-8 opacity-50"></div>
+  <div className="relative z-10">
+    <div className="flex items-center justify-between mb-2">
+      <div className="p-2 bg-primary-100/50 rounded-lg">
+        <BarChart3 className="w-5 h-5 text-primary-600" />
+      </div>
+    </div>
+    <div className="text-2xl font-bold text-gray-900 mb-1">
+      {statistics.total_exports}
+    </div>
+    <div className="text-sm text-gray-600">总导出次数</div>
+  </div>
+</div>
+```
+
+## 🎨 具体改进内容
+
+### 1. 背景和边框
+- **原来**: 使用 `.stat-card` 类的预定义样式
+- **现在**: 使用项目标准的渐变背景 `bg-gradient-to-br from-white to-{color}-50/30`
+- **边框**: 统一使用 `border border-gray-200/50`
+
+### 2. 装饰元素
+- **新增**: 右上角的装饰圆圈，每个卡片使用对应的颜色
+  - 总导出: `from-primary-100/50 to-primary-200/50`
+  - 成功导出: `from-green-100/50 to-green-200/50`
+  - 失败导出: `from-red-100/50 to-red-200/50`
+  - 文件大小: `from-purple-100/50 to-purple-200/50`
+
+### 3. 布局结构
+- **图标位置**: 从右侧移到左上角，与项目统计保持一致
+- **图标样式**: 使用 `bg-{color}-100/50` 的半透明背景
+- **层次结构**: 使用 `relative z-10` 确保内容在装饰之上
+
+### 4. 交互效果
+- **悬停动画**: `hover:-translate-y-1` 向上移动效果
+- **阴影变化**: `hover:shadow-md` 悬停时增强阴影
+- **过渡动画**: `transition-all duration-300` 流畅的过渡效果
+
+### 5. 响应式设计
+- **内边距**: `p-4 md:p-5` 在不同屏幕尺寸下的适配
+- **圆角**: 统一使用 `rounded-xl` 更现代的圆角设计
+
+## ✅ 对齐效果
+
+### 视觉一致性
+- ✅ **完全匹配**: 与 ProjectCard 和 ProjectDetails 中的统计卡片样式完全一致
+- ✅ **颜色系统**: 使用相同的颜色变体和透明度
+- ✅ **装饰效果**: 相同的右上角圆圈装饰模式
+- ✅ **交互反馈**: 一致的悬停和过渡动画
+
+### 用户体验
+- ✅ **熟悉感**: 用户在不同页面看到相同的设计模式
+- ✅ **专业感**: 统一的设计语言提升应用的专业度
+- ✅ **可读性**: 优化的布局和颜色对比度
+
+### 技术实现
+- ✅ **代码一致性**: 使用相同的 CSS 类和结构模式
+- ✅ **维护性**: 遵循项目的设计系统，便于后续维护
+- ✅ **扩展性**: 可以轻松应用到其他需要统计卡片的组件
+
+## 🎯 设计原则体现
+
+1. **一致性原则**: 整个应用使用统一的统计卡片设计
+2. **层次性原则**: 通过装饰、阴影、颜色建立清晰的视觉层次
+3. **反馈性原则**: 悬停动画提供即时的交互反馈
+4. **美观性原则**: 渐变、圆角、阴影营造现代化的视觉效果
+
+## 📝 总结
+
+这次样式对齐确保了 ExportRecordManager 组件完全融入项目的设计体系，用户在使用不同功能时都能感受到一致的视觉体验。通过参考项目中已有的优秀设计模式，我们不仅解决了"黑底黑字"的可见性问题，还提升了整体的设计质量和用户体验。