數據展示元件 - Drama Ling Component Library

表格 (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>

📊 數據展示元件