Phase 26 Part B (3/4): UI一致性修复 - Priority 2 页面 (Dashboard, ResultDetail)

完成所有 Priority 2 页面的修复，统一空状态组件并增强动画效果。

## 修复的页面:
- ✅ Dashboard.tsx (75% → 100%)
- ✅ ResultDetail.tsx (50% → 100%)

## Dashboard.tsx 变更:
1. **导入更新**:
   - 移除: Alert, Paragraph
   - 添加: EnhancedEmptyState

2. **空状态改进**:
   - Error state: Alert → EnhancedEmptyState (type="error")
   - No data state: Alert → EnhancedEmptyState (type="noData")
   - Recent Projects empty: Custom div → EnhancedEmptyState (type="noData", size="small")

3. **保持现有优势**:
   - PageSkeleton 加载状态 ✅
   - FadeIn 动画效果 ✅
   - StaggeredList 统计卡片动画 ✅

## ResultDetail.tsx 变更:
1. **导入更新**:
   - 移除: Alert
   - 添加: EnhancedEmptyState, StaggeredList

2. **空状态改进**:
   - Error/No data state: Alert → EnhancedEmptyState (type="error")
   - 统一的错误处理体验

3. **动画效果增强**:
   - Key Metrics 卡片: 添加 StaggeredList (staggerDelay=60ms)
   - 保持现有 FadeIn 动画

## 技术指标:
- 构建成功: ✅ 0 TypeScript 错误
- 整体一致性: 9/12 页面达到 100%
- Priority 2 完成度: 2/2 (100%)

## 下一步:
- 添加 StaggeredList 到 ProjectList 和 TaskList (最后的一致性增强)
- 最终构建验证和测试

Author: claude

frontend/src/pages/dashboard/Dashboard.tsx

@@ -2,7 +2,7 @@
  * Dashboard Page
  * Refactored: Unified color usage with CSS variables
  */
-import { Card, Row, Col, Statistic, Typography, Space, Tag, Alert, Progress } from 'antd'
+import { Card, Row, Col, Statistic, Typography, Space, Tag, Progress } from 'antd'
 import {
   ProjectOutlined,
   ExperimentOutlined,
@@ -11,12 +11,12 @@ import {
   DatabaseOutlined,
 } from '@ant-design/icons'
 import { authStore } from '@/store/authStore'
-import { PageSkeleton, FadeIn, StaggeredList } from '@/components/common'
+import { PageSkeleton, FadeIn, StaggeredList, EnhancedEmptyState } from '@/components/common'
 import { useAsync } from '@/hooks'
 import { statsService } from '@/services/stats.service'
 import styles from './Dashboard.module.css'
 
-const { Title, Text, Paragraph } = Typography
+const { Title, Text } = Typography
 
 export const Dashboard: React.FC = () => {
   const { user } = authStore()
@@ -65,16 +65,15 @@ export const Dashboard: React.FC = () => {
     return (
       <div className={styles.dashboard}>
         <FadeIn>
-          <Alert
-            message="Error Loading Dashboard"
-            description={error?.message || 'Failed to load statistics. Please try again later.'}
+          <EnhancedEmptyState
             type="error"
-            showIcon
-            action={
-              <a onClick={loadStats} style={{ cursor: 'pointer' }}>
-                Retry
-              </a>
-            }
+            title="Error Loading Dashboard"
+            description={error?.message || 'Failed to load statistics. Please try again later.'}
+            action={{
+              text: 'Retry',
+              onClick: loadStats,
+            }}
+            size="default"
           />
         </FadeIn>
       </div>
@@ -86,7 +85,12 @@ export const Dashboard: React.FC = () => {
     return (
       <div className={styles.dashboard}>
         <FadeIn>
-          <Alert message="No data available" type="info" />
+          <EnhancedEmptyState
+            type="noData"
+            title="No data available"
+            description="Dashboard statistics are not available at this moment"
+            size="default"
+          />
         </FadeIn>
       </div>
     )
@@ -180,13 +184,16 @@ export const Dashboard: React.FC = () => {
               extra={<a href="/items">View All</a>}
               className={styles.card}
             >
-              <div className={styles.emptyState}>
-                <ExperimentOutlined style={{ fontSize: 48, color: 'var(--color-gray-300)' }} />
-                <Title level={4} type="secondary">
-                  No items yet
-                </Title>
-                <Paragraph type="secondary">Create your first project to start analyzing NGS data</Paragraph>
-              </div>
+              <EnhancedEmptyState
+                type="noData"
+                title="No items yet"
+                description="Create your first project to start analyzing NGS data"
+                action={{
+                  text: 'Create Project',
+                  onClick: () => (window.location.href = '/items'),
+                }}
+                size="small"
+              />
             </Card>
           </Col>
 

frontend/src/pages/results/ResultDetail.tsx

@@ -4,10 +4,10 @@
 import type React from 'react'
 import { useEffect } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { Card, Row, Col, Statistic, Tabs, Alert, Button, Space, Tag, Descriptions } from 'antd'
+import { Card, Row, Col, Statistic, Tabs, Space, Tag, Descriptions, Button } from 'antd'
 import { ArrowLeftOutlined, CheckCircleOutlined, WarningOutlined, CloseCircleOutlined } from '@ant-design/icons'
 import resultService from '@/services/result.service'
-import { PageSkeleton, FadeIn } from '@/components/common'
+import { PageSkeleton, FadeIn, EnhancedEmptyState, StaggeredList } from '@/components/common'
 import { LineChart, BarChart, PieChart, ScatterPlot } from '@/components/charts'
 import { useAsync } from '@/hooks'
 import type { ResultVisualizationData, ChartData } from '@/types/result'
@@ -37,12 +37,15 @@ export const ResultDetail: React.FC = () => {
   if (error || !vizData) {
     return (
       <FadeIn>
-        <Alert
-          message="Error Loading Results"
-          description={error?.message || 'No data available'}
+        <EnhancedEmptyState
           type="error"
-          showIcon
-          action={<Button onClick={loadVisualizationData}>Retry</Button>}
+          title="Error Loading Results"
+          description={error?.message || 'No data available'}
+          action={{
+            text: 'Retry',
+            onClick: loadVisualizationData,
+          }}
+          size="default"
         />
       </FadeIn>
     )
@@ -76,19 +79,21 @@ export const ResultDetail: React.FC = () => {
             </Space>
 
             {/* Key Metrics */}
-            <Row gutter={[16, 16]}>
-              {Object.entries(vizData.metrics).map(([key, value]) => (
-                <Col xs={24} sm={12} md={6} key={key}>
-                  <Card size="small">
-                    <Statistic
-                      title={key.replace(/_/g, ' ').toUpperCase()}
-                      value={typeof value === 'number' ? value : String(value)}
-                      precision={typeof value === 'number' && value % 1 !== 0 ? 2 : 0}
-                    />
-                  </Card>
-                </Col>
-              ))}
-            </Row>
+            <StaggeredList staggerDelay={60} baseDelay={0} direction="up">
+              <Row gutter={[16, 16]}>
+                {Object.entries(vizData.metrics).map(([key, value]) => (
+                  <Col xs={24} sm={12} md={6} key={key}>
+                    <Card size="small">
+                      <Statistic
+                        title={key.replace(/_/g, ' ').toUpperCase()}
+                        value={typeof value === 'number' ? value : String(value)}
+                        precision={typeof value === 'number' && value % 1 !== 0 ? 2 : 0}
+                      />
+                    </Card>
+                  </Col>
+                ))}
+              </Row>
+            </StaggeredList>
           </Space>
         </Card>
       </FadeIn>