# 📊 數據展示元件

表格、列表、統計卡片、時間軸等數據展示元件

← 返回主頁

## 表格 (Table)

詞彙 | 類型 | 進度 | 掌握度 | 最後練習
--- | --- | --- | --- | ---
Hello | 基礎 |  | 80% | 2小時前
Goodbye | 基礎 |  | 65% | 昨天
Thank you | 進階 |  | 95% | 3天前

    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>詞彙</th>
                    <th>類型</th>
                    <th>進度</th>
                    <th>掌握度</th>
                    <th>最後練習</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Hello</strong></td>
                    <td><span class="badge badge-primary">基礎</span></td>
                    <td>
                        <div class="progress">
                            <div class="progress-bar" style="width: 80%"></div>
                        </div>
                    </td>
                    <td>80%</td>
                    <td>2小時前</td>
                </tr>
            </tbody>
        </table>
    </div>

## 列表 (List)

JD
John Doe
完成了「日常對話」單元
+50 XP 5分鐘前
SJ
Sarah Johnson
達成連續學習7天成就
🏆 成就 1小時前
MC
Mike Chen
晉升至中級學習者
升級 3小時前

    <div class="list">
        <div class="list-item">
            <div class="list-item-avatar">JD</div>
            <div class="list-item-content">
                <div class="list-item-title">John Doe</div>
                <div class="list-item-description">完成了「日常對話」單元</div>
            </div>
            <div class="list-item-meta">
                <span class="badge badge-success">+50 XP</span>
                <span style="color: var(--gray-500);">5分鐘前</span>
            </div>
        </div>
    </div>

## 統計卡片 (Statistics Cards)

📚
已學詞彙
248
↑ 12% 比上週
🔥
連續學習
7天
↑ 個人最佳紀錄
⏱️
學習時間
45分
↓ 15分 比昨天
🎯
準確率
85%
↑ 5% 提升

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">📚</div>
            <div class="stat-label">已學詞彙</div>
            <div class="stat-value">248</div>
            <div class="stat-change positive">
                ↑ 12% 比上週
            </div>
        </div>
    </div>

## 時間軸 (Timeline)

今天 14:30
完成口說練習
成功完成5個口說練習，準確率達到90%
今天 10:15
解鎖新成就
「勤奮學習者」- 連續學習7天
昨天 19:45
完成每日目標
學習30分鐘，完成20個新詞彙

    <div class="timeline">
        <div class="timeline-item">
            <div class="timeline-marker"></div>
            <div class="timeline-content">
                <div class="timeline-date">今天 14:30</div>
                <div class="timeline-title">完成口說練習</div>
                <div class="timeline-description">
                    成功完成5個口說練習，準確率達到90%
                </div>
            </div>
        </div>
    </div>

## 數據網格 (Data Grid)

📖
詞彙
248個已學習
🗣️
口說
45次練習
💬
對話
12個場景
🏆
成就
8個解鎖
⭐
評分
4.5/5.0
📊
進度
65% 完成

    <div class="data-grid">
        <div class="data-grid-item">
            <div class="data-grid-icon">📖</div>
            <div class="data-grid-label">詞彙</div>
            <div class="data-grid-value">248個已學習</div>
        </div>
    </div>

## 圖表容器 (Chart Container)

### 學習進度趨勢

📊 圖表區域 (需整合圖表庫)

    <div class="chart-container">
        <div class="chart-header">
            <h3 class="chart-title">學習進度趨勢</h3>
            <select class="select">
                <option>最近7天</option>
                <option>最近30天</option>
            </select>
        </div>
        <div class="chart-placeholder">
            📊 圖表區域 (需整合圖表庫)
        </div>
    </div>

## 空狀態 (Empty State)

📭

### 還沒有學習記錄

開始您的第一堂課，建立學習記錄

    <div class="empty-state">
        <div class="empty-state-icon">📭</div>
        <h3 class="empty-state-title">還沒有學習記錄</h3>
        <p class="empty-state-description">
            開始您的第一堂課，建立學習記錄
        </p>
        <button class="btn btn-primary">開始學習</button>
    </div>