diff --git a/docs/superpowers/plans/2026-06-02-data-dashboard-frontend.md b/docs/superpowers/plans/2026-06-02-data-dashboard-frontend.md
new file mode 100644
index 0000000..1870e5a
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-02-data-dashboard-frontend.md
@@ -0,0 +1,2982 @@
+# 数据看板前端 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 实现数据看板页面（6 大模块），在 mock 数据下完整跑通水晶收益、藏品表现、升级进度的可视化展示。
+
+**Architecture:** 单页面 + 1 个聚合 composable（`useDashboardData`）+ 11 个展示子组件。composable 内部用 `effectScope` 包裹 7 个并发请求，按 section 维度独立暴露 loading/error/refresh。后端未就绪时通过 `USE_MOCK_API` 开关走 mock 数据，接真实接口只需翻常量。
+
+**Tech Stack:** Vue 3 (Composition API) + uni-app + Vuex 4（已有，不新增模块）+ uCharts 插件（柱状+折线）+ SCSS（uni.scss 共享 token）+ CSS conic-gradient（5 个等级环）
+
+**Spec:** `docs/superpowers/specs/2026-06-02-data-dashboard-frontend-design.md`
+**配套视觉/API 文档:** `docs/figma-analysis-data-dashboard.md`
+
+---
+
+## 文件总览
+
+**Create（15 个）**:
+- `frontend/pages/dashboard/dashboard.vue`
+- `frontend/pages/dashboard/components/DashboardHeader.vue`
+- `frontend/pages/dashboard/components/CrystalOverview.vue`
+- `frontend/pages/dashboard/components/IncomeCurve.vue`
+- `frontend/pages/dashboard/components/ExhibitionCenter.vue`
+- `frontend/pages/dashboard/components/LikeIncomeBoard.vue`
+- `frontend/pages/dashboard/components/CollectionMatrix.vue`
+- `frontend/pages/dashboard/components/TopFiveAssets.vue`
+- `frontend/pages/dashboard/components/LevelDistribution.vue`
+- `frontend/pages/dashboard/components/UpcomingUpgrades.vue`
+- `frontend/pages/dashboard/components/RecentUpgrades.vue`
+- `frontend/pages/dashboard/components/SectionSkeleton.vue`
+- `frontend/pages/dashboard/components/EmptyState.vue`
+- `frontend/composables/useDashboardData.js`
+- `frontend/utils/mock/dashboard.js`
+
+**Modify（3 个）**:
+- `frontend/pages.json`（注册 dashboard 页面）
+- `frontend/utils/api.js`（追加 `dashboardApi` 命名空间 + mock 触发）
+- `frontend/uni.scss`（追加设计 token 变量）
+
+**无新增测试文件**：项目未引入测试框架，验证走 `superpowers:verification-before-completion` 流程的手动核对清单。
+
+---
+
+## Task 1: 页面注册 + SCSS 设计 token
+
+**Files:**
+- Modify: `frontend/pages.json`（在 `pages` 数组末尾追加一项）
+- Modify: `frontend/uni.scss`（在文件末尾追加 dashboard 专用 token）
+
+- [ ] **Step 1: 在 `pages.json` 末尾注册 dashboard 页面**
+
+在 `pages` 数组最后一个对象（`tasks/revenue`）之后，逗号之后追加：
+
+```json
+		,{
+			"path": "pages/dashboard/dashboard",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		}
+```
+
+- [ ] **Step 2: 在 `uni.scss` 末尾追加 dashboard token**
+
+```scss
+/* ==================== Dashboard 设计 Token ==================== */
+
+/* 颜色（与 spec §3.1 一致） */
+$d-text-data: #FFFABD;
+$d-text-white: #FFFFFF;
+$d-tab-active: linear-gradient(231deg, #A8A6ED 0%, #88C8D8 64%, #F380EF 100%);
+$d-card-crystal: linear-gradient(135deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
+$d-card-today: linear-gradient(137deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
+$d-progress-cyan: linear-gradient(90deg, #5EDFFF 0%, #FFC8C8 100%);
+$d-progress-pink: linear-gradient(90deg, #FFF375 0%, #FF6B84 100%);
+$d-bar-blue-yellow: linear-gradient(90deg, #1BAFEE 0%, #FFCC14 100%);
+$d-bar-fill: linear-gradient(135deg, #FFDF77 0%, #B984FF 60%, #FF8183 100%);
+$d-page-bg: linear-gradient(153deg, #FF9597 0%, #80DFFF 33%, #B8B8B8 74%, #D9D9D9 100%);
+
+/* 5 个等级专属渐变（环图、徽章、TOP 徽章） */
+$d-level-ur: linear-gradient(135deg, #FF8A65 0%, #FFD740 100%);
+$d-level-ssr: linear-gradient(135deg, #FF5E9C 0%, #FFB199 100%);
+$d-level-sr: linear-gradient(135deg, #B17BFF 0%, #FF8FE6 100%);
+$d-level-r: linear-gradient(135deg, #5EDFFF 0%, #6FA9FF 100%);
+$d-level-n: linear-gradient(135deg, #C5C5C5 0%, #8C8C8C 100%);
+
+/* 阴影 */
+$d-shadow-card: 0px 4px 4px rgba(189, 50, 50, 0.25);
+$d-shadow-data: -1px 1px 4px rgba(206, 9, 9, 0.84);
+$d-shadow-mascot: 2px 2px 4px rgba(242, 21, 21, 0.47);
+$d-shadow-tab: 0px 4px 4px rgba(0, 0, 0, 0.25);
+$d-shadow-inner: 0px 4px 4px rgba(96, 13, 13, 0.25);
+
+/* 圆角 */
+$d-radius-thumb: 3px;
+$d-radius-progress: 6px;
+$d-radius-card-sm: 14px;
+$d-radius-card-md: 17px;
+$d-radius-card-lg: 22px;
+
+/* 字号 */
+$d-fs-num-xl: 35px;
+$d-fs-num-lg: 18px;
+$d-fs-num-md: 14px;
+$d-fs-num-sm: 9px;
+$d-fs-title-lg: 20px;
+$d-fs-title-md: 18px;
+$d-fs-title-sm: 15px;
+$d-fs-label: 12px;
+
+/* 间距 */
+$d-space-card-x: 16px;
+$d-space-section: 24px;
+$d-space-cell: 12px;
+```
+
+- [ ] **Step 3: 手动验证 - 路由可达**
+
+启动 H5 dev server（如果已在跑则跳过）：
+```bash
+cd frontend && npm run dev:h5
+```
+
+在 H5 dev URL 末尾加 `/pages/dashboard/dashboard` 访问：
+- 预期：进入空页面（白屏即可，组件尚未创建）
+- 不预期：路由 404、JSON 解析错误
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/pages.json frontend/uni.scss
+git commit -m "feat(dashboard): 注册页面 + 追加 SCSS 设计 token"
+```
+
+---
+
+## Task 2: Mock 数据 + dashboardApi 命名空间
+
+**Files:**
+- Create: `frontend/utils/mock/dashboard.js`
+- Modify: `frontend/utils/api.js`（追加 `dashboardApi` + 注入 mock 触发逻辑）
+
+- [ ] **Step 1: 创建 mock 数据文件 `frontend/utils/mock/dashboard.js`**
+
+```javascript
+// 数据看板 mock 数据工厂
+// 后端就绪后，将 utils/api.js 顶部 USE_MOCK_API 改为 false 即可
+
+const randomDelay = (min = 200, max = 600) =>
+  new Promise((resolve) => setTimeout(resolve, Math.random() * (max - min) + min))
+
+// 1. 今日概览
+export async function mockTodayOverview({ star_id }) {
+  await randomDelay()
+  return {
+    code: 200,
+    data: {
+      crystal_balance: 2713,
+      today_income: 213,
+      week_rank: 12,
+    },
+  }
+}
+
+// 2. 七日收益曲线
+export async function mock7DayIncomeCurve({ star_id }) {
+  await randomDelay()
+  const today = new Date()
+  const points = []
+  const incomes = [180, 245, 198, 312, 276, 221, 189] // 最后一个是今天
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date(today)
+    d.setDate(d.getDate() - i)
+    const income = incomes[6 - i]
+    points.push({
+      date: `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`,
+      income,
+      is_today: i === 0,
+      is_peak: income === 312,
+    })
+  }
+  return {
+    code: 200,
+    data: {
+      points,
+      total_income: incomes.reduce((a, b) => a + b, 0),
+      avg_income: Math.round(incomes.reduce((a, b) => a + b, 0) / 7),
+    },
+  }
+}
+
+// 3. 展出收益中心
+export async function mockExhibitionSummary({ star_id }) {
+  await randomDelay()
+  return {
+    code: 200,
+    data: {
+      exhibiting_count: 21,
+      starbook_count: 33,
+      total_duration: '712:13:56',
+      total_earnings: 39721,
+      top5: [
+        { asset_id: 1, asset_name: '璀璨星河', asset_thumb: '', duration_7d: '144:13:56', earnings_7d: 2173, avg_earnings: 15 },
+        { asset_id: 2, asset_name: '夏日微风', asset_thumb: '', duration_7d: '77:13:56', earnings_7d: 1332, avg_earnings: 15 },
+        { asset_id: 3, asset_name: '夜色霓虹', asset_thumb: '', duration_7d: '64:15:37', earnings_7d: 1201, avg_earnings: 12 },
+        { asset_id: 4, asset_name: '黎明序曲', asset_thumb: '', duration_7d: '51:22:12', earnings_7d: 783, avg_earnings: 12 },
+        { asset_id: 5, asset_name: '深海回响', asset_thumb: '', duration_7d: '51:22:12', earnings_7d: 783, avg_earnings: 12 },
+      ],
+    },
+  }
+}
+
+// 4. 点赞收益按等级
+export async function mockLikeIncomeByLevel({ star_id }) {
+  await randomDelay()
+  return {
+    code: 200,
+    data: {
+      total_like_count: 231,
+      total_income: 12719,
+      levels: [
+        { level: 'UR', asset_count: 1, total_income: 723, thumb: '' },
+        { level: 'SSR', asset_count: 2, total_income: 381, thumb: '' },
+        { level: 'SR', asset_count: 5, total_income: 233, thumb: '' },
+        { level: 'SR', asset_count: 4, total_income: 169, thumb: '' },
+        { level: 'R', asset_count: 6, total_income: 57, thumb: '' },
+      ],
+    },
+  }
+}
+
+// 5. 藏品 TOP5
+export async function mockTopAssets({ star_id }) {
+  await randomDelay()
+  return {
+    code: 200,
+    data: {
+      items: [
+        { asset_id: 1, asset_name: '璀璨星河', asset_thumb: '', total_earnings: 8420, rank: 1 },
+        { asset_id: 2, asset_name: '夏日微风', asset_thumb: '', total_earnings: 6230, rank: 2 },
+        { asset_id: 3, asset_name: '夜色霓虹', asset_thumb: '', total_earnings: 5180, rank: 3 },
+        { asset_id: 4, asset_name: '黎明序曲', asset_thumb: '', total_earnings: 4320, rank: 4 },
+        { asset_id: 5, asset_name: '深海回响', asset_thumb: '', total_earnings: 3980, rank: 5 },
+      ],
+    },
+  }
+}
+
+// 6. 藏品等级分布
+export async function mockLevelDistribution({ star_id }) {
+  await randomDelay()
+  const total = 33
+  return {
+    code: 200,
+    data: {
+      items: [
+        { level: 'UR', count: 1, total },
+        { level: 'SSR', count: 2, total },
+        { level: 'SR', count: 5, total },
+        { level: 'R', count: 6, total },
+        { level: 'N', count: 0, total },
+      ],
+    },
+  }
+}
+
+// 7. 升级进度
+export async function mockUpgradeProgress({ star_id }) {
+  await randomDelay()
+  return {
+    code: 200,
+    data: {
+      upcoming: [
+        { asset_id: 1, asset_name: '璀璨星河', asset_thumb: '', like_progress: 73, duration_progress: 92 },
+        { asset_id: 2, asset_name: '夏日微风', asset_thumb: '', like_progress: 75, duration_progress: 96 },
+        { asset_id: 3, asset_name: '夜色霓虹', asset_thumb: '', like_progress: 97, duration_progress: 71 },
+      ],
+      recent: [
+        { asset_id: 4, asset_name: '黎明序曲', asset_thumb: '', new_level: 'SSR', upgrade_time: Date.now() - 3600000 },
+        { asset_id: 5, asset_name: '深海回响', asset_thumb: '', new_level: 'SR', upgrade_time: Date.now() - 86400000 },
+        { asset_id: 6, asset_name: '晨曦微光', asset_thumb: '', new_level: 'SR', upgrade_time: Date.now() - 172800000 },
+      ],
+    },
+  }
+}
+
+// 路由表：endpoints 字符串 → mock 工厂
+export const mockRouter = {
+  '/api/v1/dashboard/today-overview': mockTodayOverview,
+  '/api/v1/dashboard/income-curve': mock7DayIncomeCurve,
+  '/api/v1/dashboard/exhibition-summary': mockExhibitionSummary,
+  '/api/v1/dashboard/like-income-by-level': mockLikeIncomeByLevel,
+  '/api/v1/dashboard/top-assets': mockTopAssets,
+  '/api/v1/dashboard/level-distribution': mockLevelDistribution,
+  '/api/v1/dashboard/upgrade-progress': mockUpgradeProgress,
+}
+```
+
+- [ ] **Step 2: 在 `frontend/utils/api.js` 末尾追加 `dashboardApi` 命名空间**
+
+```javascript
+// ==================== 数据看板 ====================
+import { mockRouter } from './mock/dashboard'
+
+const DASHBOARD_PREFIX = '/api/v1/dashboard'
+
+// mock 触发器：当 USE_MOCK_API 为 true 时短路返回 mock 数据
+// 后端就绪后将 USE_MOCK_API 改为 false 即可
+async function dashboardRequest(endpoint, params = {}) {
+  if (USE_MOCK_API) {
+    const factory = mockRouter[`${DASHBOARD_PREFIX}${endpoint}`]
+    if (factory) return factory(params)
+  }
+  return request({ url: `${DASHBOARD_PREFIX}${endpoint}`, method: 'GET', data: params })
+}
+
+export const dashboardApi = {
+  getTodayOverview: (starId) => dashboardRequest('/today-overview', { star_id: starId }).then((r) => r.data),
+  get7DayIncomeCurve: (starId) => dashboardRequest('/income-curve', { star_id: starId }).then((r) => r.data),
+  getExhibitionSummary: (starId) => dashboardRequest('/exhibition-summary', { star_id: starId }).then((r) => r.data),
+  getLikeIncomeByLevel: (starId) => dashboardRequest('/like-income-by-level', { star_id: starId }).then((r) => r.data),
+  getTopAssets: (starId) => dashboardRequest('/top-assets', { star_id: starId }).then((r) => r.data),
+  getLevelDistribution: (starId) => dashboardRequest('/level-distribution', { star_id: starId }).then((r) => r.data),
+  getUpgradeProgress: (starId) => dashboardRequest('/upgrade-progress', { star_id: starId }).then((r) => r.data),
+}
+```
+
+- [ ] **Step 3: 手动验证 mock 触发**
+
+在 H5 dev console 跑：
+```js
+const { dashboardApi } = await import('/utils/api.js')
+const today = await dashboardApi.getTodayOverview(1)
+console.log(today)  // 预期: { crystal_balance: 2713, today_income: 213, week_rank: 12 }
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/utils/mock/dashboard.js frontend/utils/api.js
+git commit -m "feat(dashboard): 追加 mock 数据工厂 + dashboardApi 命名空间"
+```
+
+---
+
+## Task 3: useDashboardData Composable
+
+**Files:**
+- Create: `frontend/composables/useDashboardData.js`
+
+- [ ] **Step 1: 完整实现 composable**
+
+```javascript
+import { ref, computed, onScopeDisposal } from 'vue'
+import { dashboardApi } from '@/utils/api'
+
+/**
+ * 数据看板聚合 composable
+ * - 7 个接口并发（Promise.allSettled，单失败不阻塞）
+ * - 按 section 维度暴露 loading/error/data
+ * - 30 分钟内 refresh 不重发请求（lastFetched 缓存）
+ * - effectScope + onScopeDisposal 自动清理（页面 onUnmounted 调用 dispose）
+ *
+ * @param {object} options
+ * @param {number|null} options.starId 顶粉星城 ID
+ * @returns {UseDashboardDataReturn}
+ */
+export function useDashboardData({ starId = null } = {}) {
+  // —— 内部 state ——
+  const loading = ref({
+    overall: false,
+    today: false,
+    curve: false,
+    exhibition: false,
+    likeIncome: false,
+    topAssets: false,
+    levels: false,
+    upgrades: false,
+  })
+
+  const error = ref({
+    today: null,
+    curve: null,
+    exhibition: null,
+    likeIncome: null,
+    topAssets: null,
+    levels: null,
+    upgrades: null,
+  })
+
+  const data = ref({
+    today: null,
+    curve: null,
+    exhibition: null,
+    likeIncome: null,
+    topAssets: null,
+    levels: null,
+    upgrades: null,
+  })
+
+  const lastFetched = ref(0)
+  const STALE_MS = 30 * 60 * 1000 // 30 分钟
+
+  const isReady = computed(() => Object.values(data.value).every((v) => v !== null))
+
+  // —— 内部辅助：单 section 加载 ——
+  async function loadSection(section, fetcher) {
+    loading.value[section] = true
+    error.value[section] = null
+    try {
+      const result = await fetcher(starId)
+      data.value[section] = result
+    } catch (e) {
+      error.value[section] = e.message || '加载失败'
+      data.value[section] = null
+    } finally {
+      loading.value[section] = false
+    }
+  }
+
+  // —— 全量加载 ——
+  async function loadAll(force = false) {
+    if (!force && Date.now() - lastFetched.value < STALE_MS) return
+    loading.value.overall = true
+    try {
+      // 并发执行，单个失败由 loadSection 内部捕获
+      await Promise.allSettled([
+        loadSection('today', dashboardApi.getTodayOverview),
+        loadSection('curve', dashboardApi.get7DayIncomeCurve),
+        loadSection('exhibition', dashboardApi.getExhibitionSummary),
+        loadSection('likeIncome', dashboardApi.getLikeIncomeByLevel),
+        loadSection('topAssets', dashboardApi.getTopAssets),
+        loadSection('levels', dashboardApi.getLevelDistribution),
+        loadSection('upgrades', dashboardApi.getUpgradeProgress),
+      ])
+      lastFetched.value = Date.now()
+    } finally {
+      loading.value.overall = false
+    }
+  }
+
+  // —— 局部刷新 ——
+  async function refresh(section) {
+    if (!section) {
+      return loadAll(true)
+    }
+    const fetcherMap = {
+      today: dashboardApi.getTodayOverview,
+      curve: dashboardApi.get7DayIncomeCurve,
+      exhibition: dashboardApi.getExhibitionSummary,
+      likeIncome: dashboardApi.getLikeIncomeByLevel,
+      topAssets: dashboardApi.getTopAssets,
+      levels: dashboardApi.getLevelDistribution,
+      upgrades: dashboardApi.getUpgradeProgress,
+    }
+    if (!fetcherMap[section]) return
+    await loadSection(section, fetcherMap[section])
+  }
+
+  // —— effectScope 资源释放 ——
+  // 调用方在页面 onUnmounted 中调用 dispose()
+  function dispose() {
+    // ref 状态由 Vue 自动 GC；此处保留接口给未来清理（如取消 in-flight 请求）
+    // 当前实现：无 in-flight 引用，无需额外清理
+  }
+
+  // 自动调用一次首屏加载
+  loadAll()
+
+  return {
+    loading,
+    error,
+    data,
+    refresh,
+    isReady,
+    lastFetched,
+    dispose,
+  }
+}
+```
+
+- [ ] **Step 2: 手动验证 composable 行为**
+
+在 H5 dev console 跑：
+```js
+const { useDashboardData } = await import('/composables/useDashboardData.js')
+const { data, loading, isReady, refresh } = useDashboardData({ starId: 1 })
+// 等 ~1 秒
+setTimeout(() => {
+  console.log('isReady:', isReady.value)        // true
+  console.log('today:', data.value.today)        // { crystal_balance: 2713, ... }
+  console.log('curve.points.length:', data.value.curve.points.length)  // 7
+  console.log('exhibition.top5.length:', data.value.exhibition.top5.length)  // 5
+}, 1500)
+```
+
+预期：所有数据加载完成，形状如 mock。
+
+- [ ] **Step 3: 验证局部刷新**
+
+```js
+// 在同一 console 继续
+await refresh('curve')
+console.log('loading.curve:', loading.value.curve)  // 预期: false（load 完自动归位）
+console.log('data.curve:', data.value.curve !== null)  // true
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/composables/useDashboardData.js
+git commit -m "feat(dashboard): useDashboardData composable（7接口并发+section级refresh）"
+```
+
+---
+
+## Task 4: dashboard.vue 页面骨架
+
+**Files:**
+- Create: `frontend/pages/dashboard/dashboard.vue`
+
+- [ ] **Step 1: 完整实现页面骨架**
+
+```vue
+<template>
+  <view class="dashboard-container" :style="{ background: pageBg }">
+    <!-- 顶部装饰背景 -->
+    <DashboardHeader
+      :active-tab="activeTab"
+      @update:active-tab="handleTabChange"
+    />
+
+    <!-- Tab 1: 水晶相关 -->
+    <view v-if="activeTab === 'crystal'" class="dashboard-content">
+      <view class="placeholder-section">
+        <text class="placeholder-text">骨架页（组件将在 Task 5-10 添加）</text>
+      </view>
+    </view>
+
+    <!-- Tab 2: 赛季总览（占位） -->
+    <view v-else class="dashboard-content">
+      <view class="season-placeholder">
+        <text class="placeholder-icon">🏆</text>
+        <text class="placeholder-title">赛季总览 · 即将上线</text>
+        <text class="placeholder-sub">历史赛季数据正在筹备中</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted } from 'vue'
+import DashboardHeader from './components/DashboardHeader.vue'
+import { useDashboardData } from '@/composables/useDashboardData'
+
+export default {
+  components: { DashboardHeader },
+  setup() {
+    const activeTab = ref('crystal')
+    const starId = ref(uni.getStorageSync('star_id') || null)
+
+    const { loading, error, data, refresh, isReady, dispose } = useDashboardData({
+      starId: starId.value,
+    })
+
+    function handleTabChange(tab) {
+      activeTab.value = tab
+    }
+
+    onMounted(() => {
+      // 首屏已由 composable 内部自动调用 loadAll()
+      // 此处预留 onMounted 钩子供未来扩展
+    })
+
+    onUnmounted(() => {
+      dispose()
+    })
+
+    return {
+      activeTab,
+      loading,
+      error,
+      data,
+      isReady,
+      handleTabChange,
+      pageBg: 'linear-gradient(153deg, #FF9597 0%, #80DFFF 33%, #B8B8B8 74%, #D9D9D9 100%)',
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  min-height: 100vh;
+  padding: 0;
+}
+
+.dashboard-content {
+  padding: 24rpx 32rpx 80rpx;
+}
+
+.placeholder-section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 22rpx;
+  padding: 80rpx 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-text {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 28rpx;
+}
+
+.season-placeholder {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  border-radius: 22rpx;
+  padding: 120rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.placeholder-icon {
+  font-size: 96rpx;
+  margin-bottom: 24rpx;
+}
+
+.placeholder-title {
+  color: #ffffff;
+  font-size: 36rpx;
+  font-weight: 700;
+  margin-bottom: 16rpx;
+}
+
+.placeholder-sub {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 26rpx;
+}
+</style>
+```
+
+- [ ] **Step 2: 创建 `DashboardHeader.vue` 占位（Task 5 会完整实现）**
+
+文件 `frontend/pages/dashboard/components/DashboardHeader.vue`：
+
+```vue
+<template>
+  <view class="dashboard-header">
+    <view class="header-bg"></view>
+    <view class="header-content">
+      <text class="header-title">数据看板</text>
+      <view class="header-tabs">
+        <view
+          :class="['tab', activeTab === 'crystal' ? 'tab-active' : '']"
+          @tap="$emit('update:activeTab', 'crystal')"
+        >
+          水晶相关
+        </view>
+        <view
+          :class="['tab', activeTab === 'season' ? 'tab-active' : '']"
+          @tap="$emit('update:activeTab', 'season')"
+        >
+          赛季总览
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DashboardHeader',
+  props: {
+    activeTab: { type: String, default: 'crystal' },
+  },
+  emits: ['update:activeTab'],
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-header {
+  position: relative;
+  height: 280rpx;
+  overflow: hidden;
+}
+
+.header-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 700rpx;
+  background: linear-gradient(179deg, #FFE5E5 0%, #F3A0A1 50%, #FF9C9C 86%, #FF2024 100%);
+  filter: blur(4px);
+  z-index: 0;
+}
+
+.header-content {
+  position: relative;
+  z-index: 1;
+  padding: 80rpx 32rpx 32rpx;
+}
+
+.header-title {
+  display: block;
+  font-size: 48rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+  text-align: center;
+  margin-bottom: 32rpx;
+}
+
+.header-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 0;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 22rpx;
+  padding: 6rpx;
+  margin: 0 100rpx;
+}
+
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 16rpx 0;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.7);
+  border-radius: 22rpx;
+  transition: all 0.25s ease;
+}
+
+.tab-active {
+  background: linear-gradient(231deg, #A8A6ED 0%, #88C8D8 64%, #F380EF 100%);
+  color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+</style>
+```
+
+- [ ] **Step 3: 手动验证骨架页**
+
+访问 H5 dev URL `/pages/dashboard/dashboard`：
+- 预期：红色装饰背景 + "数据看板" 标题 + 两个 Tab + "骨架页" 占位文字
+- 切换 Tab：右半部分在占位和"赛季总览"间切换
+- 打开 devtools console：1.5 秒后 `data.today` 等字段非空（可通过 Vue devtools 检查）
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/pages/dashboard/dashboard.vue frontend/pages/dashboard/components/DashboardHeader.vue
+git commit -m "feat(dashboard): 页面骨架 + Header 占位"
+```
+
+---
+
+## Task 5: DashboardHeader 完整实现（毛绒怪 + 渐变标题）
+
+**Files:**
+- Modify: `frontend/pages/dashboard/components/DashboardHeader.vue`（替换占位为完整实现）
+
+- [ ] **Step 1: 替换为完整实现**
+
+```vue
+<template>
+  <view class="dashboard-header">
+    <!-- 装饰渐变背景 -->
+    <view class="header-deco-bg"></view>
+
+    <!-- 装饰光晕（红粉色） -->
+    <view class="header-glow"></view>
+
+    <!-- 状态栏占位（iPhone 44px） -->
+    <view class="status-bar-placeholder"></view>
+
+    <view class="header-content">
+      <!-- 毛绒怪头像（占位：纯色块 + emoji） -->
+      <view class="mascot">
+        <text class="mascot-emoji">🐾</text>
+      </view>
+
+      <!-- 渐变标题 -->
+      <view class="title-wrap">
+        <text class="header-title">数据看板</text>
+      </view>
+
+      <!-- Tab 胶囊 -->
+      <view class="header-tabs">
+        <view
+          :class="['tab', activeTab === 'crystal' ? 'tab-active' : '']"
+          @tap="$emit('update:activeTab', 'crystal')"
+        >
+          水晶相关
+        </view>
+        <view
+          :class="['tab', activeTab === 'season' ? 'tab-active' : '']"
+          @tap="$emit('update:activeTab', 'season')"
+        >
+          赛季总览
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'DashboardHeader',
+  props: {
+    activeTab: { type: String, default: 'crystal' },
+  },
+  emits: ['update:activeTab'],
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard-header {
+  position: relative;
+  height: 360rpx;
+  overflow: hidden;
+}
+
+.status-bar-placeholder {
+  height: 44px;
+}
+
+.header-deco-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 700rpx;
+  background: linear-gradient(179deg, #FFE5E5 0%, #F3A0A1 50%, #FF9C9C 86%, #FF2024 100%);
+  filter: blur(4px);
+  z-index: 0;
+}
+
+.header-glow {
+  position: absolute;
+  top: 100rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 400rpx;
+  height: 400rpx;
+  background: radial-gradient(circle, rgba(255, 200, 100, 0.5) 0%, transparent 70%);
+  filter: blur(30px);
+  z-index: 1;
+}
+
+.header-content {
+  position: relative;
+  z-index: 2;
+  padding: 0 32rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.mascot {
+  width: 104rpx;
+  height: 104rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #FF6B6B 0%, #FFB199 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 2px 2px 30px rgba(242, 21, 21, 0.47);
+  margin-bottom: 16rpx;
+}
+
+.mascot-emoji {
+  font-size: 64rpx;
+}
+
+.title-wrap {
+  margin-bottom: 24rpx;
+}
+
+.header-title {
+  font-size: 48rpx;
+  font-weight: 700;
+  background: linear-gradient(90deg, #FFE5B4 0%, #FFB199 50%, #FF8A95 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+.header-tabs {
+  display: flex;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 22rpx;
+  padding: 6rpx;
+  width: 100%;
+  max-width: 500rpx;
+}
+
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 14rpx 0;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.75);
+  border-radius: 22rpx;
+  transition: all 0.25s ease;
+}
+
+.tab-active {
+  background: linear-gradient(231deg, #A8A6ED 0%, #88C8D8 64%, #F380EF 100%);
+  color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+}
+</style>
+```
+
+- [ ] **Step 2: 手动验证**
+
+访问 H5 dev URL `/pages/dashboard/dashboard`：
+- 预期：粉红渐变背景 + 红色光晕 + 圆形毛绒怪占位（带红色光晕阴影）+ 渐变文字"数据看板"+ 紫蓝粉渐变 Tab 胶囊
+- 切换 Tab：胶囊平滑滑动
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/pages/dashboard/components/DashboardHeader.vue
+git commit -m "feat(dashboard): Header 完整视觉（毛绒怪占位+渐变标题+Tab胶囊）"
+```
+
+---
+
+## Task 6: CrystalOverview 组件（顶部双卡）
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/CrystalOverview.vue`
+
+- [ ] **Step 1: 完整实现**
+
+```vue
+<template>
+  <view class="crystal-overview">
+    <!-- 错误态 -->
+    <view v-if="error" class="error-card" @tap="$emit('retry')">
+      <text class="error-text">加载失败，点击重试</text>
+    </view>
+
+    <!-- 骨架态 -->
+    <view v-else-if="loading || !data" class="skeleton-row">
+      <view v-for="i in 2" :key="i" class="skeleton-card"></view>
+    </view>
+
+    <!-- 正常态 -->
+    <view v-else class="card-row">
+      <view class="data-card card-crystal">
+        <text class="card-label">水晶余额</text>
+        <text class="card-value">{{ data.crystal_balance }}</text>
+      </view>
+      <view class="data-card card-today">
+        <text class="card-label">今日收益</text>
+        <text class="card-value">+ {{ data.today_income }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'CrystalOverview',
+  props: {
+    data: { type: Object, default: null }, // { crystal_balance, today_income, week_rank? }
+    loading: { type: Boolean, default: false },
+    error: { type: String, default: null },
+  },
+  emits: ['retry'],
+}
+</script>
+
+<style lang="scss" scoped>
+.crystal-overview {
+  margin: 24rpx 0;
+}
+
+.card-row {
+  display: flex;
+  gap: 16rpx;
+}
+
+.data-card {
+  flex: 1;
+  height: 200rpx;
+  border-radius: 22rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.card-crystal {
+  background: linear-gradient(135deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
+  box-shadow: 0px 4px 4px rgba(189, 50, 50, 0.25);
+}
+
+.card-today {
+  background: linear-gradient(137deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
+  box-shadow: 0px 4px 4px rgba(189, 50, 50, 0.25);
+}
+
+.card-label {
+  font-size: 24rpx;
+  color: #ffffff;
+  text-shadow: 0px 4px 4px rgba(164, 60, 60, 0.55);
+  margin-bottom: 12rpx;
+}
+
+.card-value {
+  font-size: 70rpx;
+  font-weight: 700;
+  color: #FFFABD;
+  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
+  font-family: 'Baloo Bhai', sans-serif;
+  line-height: 1;
+}
+
+/* 骨架态 */
+.skeleton-row {
+  display: flex;
+  gap: 16rpx;
+}
+
+.skeleton-card {
+  flex: 1;
+  height: 200rpx;
+  border-radius: 22rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s infinite;
+}
+
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* 错误态 */
+.error-card {
+  height: 200rpx;
+  border-radius: 22rpx;
+  background: rgba(255, 100, 100, 0.15);
+  border: 2rpx solid rgba(255, 100, 100, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-text {
+  color: #ff8080;
+  font-size: 28rpx;
+}
+</style>
+```
+
+- [ ] **Step 2: 在 dashboard.vue 中挂载组件**
+
+修改 `frontend/pages/dashboard/dashboard.vue` 的 template：
+
+把
+```vue
+<view v-if="activeTab === 'crystal'" class="dashboard-content">
+  <view class="placeholder-section">
+    <text class="placeholder-text">骨架页（组件将在 Task 5-10 添加）</text>
+  </view>
+</view>
+```
+
+替换为：
+```vue
+<view v-if="activeTab === 'crystal'" class="dashboard-content">
+  <CrystalOverview
+    :data="data.today"
+    :loading="loading.today"
+    :error="error.today"
+    @retry="refresh('today')"
+  />
+</view>
+```
+
+并在 components 中追加：
+```js
+components: { DashboardHeader, CrystalOverview },
+```
+
+- [ ] **Step 3: 手动验证**
+
+刷新 H5 dev URL：
+- 预期：双卡显示"水晶余额 2713"和"今日收益 + 213"，金黄色数字 + 渐变背景
+- 1.5s 后才显示（loading 期间是骨架屏）
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/pages/dashboard/components/CrystalOverview.vue frontend/pages/dashboard/dashboard.vue
+git commit -m "feat(dashboard): CrystalOverview 双卡（水晶余额+今日收益）"
+```
+
+---
+
+## Task 7: IncomeCurve 组件（uCharts 七日柱状+折线）
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/IncomeCurve.vue`
+- Create: `frontend/pages/dashboard/chart-theme.json`（uCharts 主题配置）
+
+- [ ] **Step 1: 创建 uCharts 主题配置 `frontend/pages/dashboard/chart-theme.json`**
+
+> **注意**：此文件路径在 Vue 项目中通过 `?url` 或 `import` 引入。H5 用 `import`，小程序/App 走条件编译。
+
+```json
+{
+  "type": "barline",
+  "color": ["#FFCC14", "#1BAFEE"],
+  "padding": [16, 16, 8, 16],
+  "dataLabel": false,
+  "legend": { "show": false },
+  "xAxis": {
+    "disableGrid": true,
+    "axisLine": false,
+    "fontColor": "#FFFFFF",
+    "fontSize": 9
+  },
+  "yAxis": {
+    "data": [{ "min": 0 }],
+    "disableGrid": true,
+    "axisLine": false,
+    "fontColor": "#FFFFFF",
+    "fontSize": 9
+  },
+  "extra": {
+    "bar": {
+      "type": "group",
+      "width": 18,
+      "activeBgColor": "#000000",
+      "activeBgOpacity": 0.1,
+      "linear": true,
+      "color": ["#FFDF77", "#B984FF", "#FF8183"]
+    },
+    "line": {
+      "type": "curve",
+      "width": 2,
+      "activeType": "hollow"
+    }
+  }
+}
+```
+
+- [ ] **Step 2: 完整实现 IncomeCurve.vue**
+
+```vue
+<template>
+  <view class="income-curve-card">
+    <text class="curve-title">七日收益曲线</text>
+
+    <!-- 错误态 -->
+    <view v-if="error" class="error-box" @tap="$emit('retry')">
+      <text class="error-text">加载失败，点击重试</text>
+    </view>
+
+    <!-- 骨架态 -->
+    <view v-else-if="loading || !points || points.length === 0" class="skeleton-chart"></view>
+
+    <!-- 图表 -->
+    <view v-else class="chart-wrap">
+      <view class="chart-header">
+        <text class="chart-peak-value" v-if="peak">+ {{ peak.income }}</text>
+        <text class="chart-peak-date" v-if="peak">{{ peak.date }}</text>
+      </view>
+      <view class="chart-canvas">
+        <!-- #ifdef H5 -->
+        <qiun-data-charts
+          type="barline"
+          :opts="chartOpts"
+          :chartData="chartData"
+          :ontouch="true"
+          canvas2d
+          :ontap="handleChartTap"
+        />
+        <!-- #endif -->
+        <!-- #ifdef APP-PLUS || MP-WEIXIN -->
+        <view class="chart-placeholder-fallback">
+          <text>📊 {{ points.length }} 天数据</text>
+          <text class="chart-fallback-sub">App 端图表组件配置中</text>
+        </view>
+        <!-- #endif -->
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// #ifdef H5
+import { ref, computed } from 'vue'
+// #endif
+
+export default {
+  name: 'IncomeCurve',
+  props: {
+    points: { type: Array, default: () => [] }, // DailyIncomePoint[]
+    loading: { type: Boolean, default: false },
+    error: { type: String, default: null },
+  },
+  emits: ['retry'],
+
+  setup(props) {
+    // 高亮当日（peak）
+    const peak = computed(() => props.points.find((p) => p.is_peak) || null)
+
+    // #ifdef H5
+    const chartData = computed(() => {
+      const categories = props.points.map((p) => p.date.slice(5)) // MM.DD
+      const barData = props.points.map((p) => p.income)
+      const lineData = props.points.map((p) => p.income)
+      return {
+        categories,
+        series: [
+          { name: '收益', data: barData, color: '#FFDF77' },
+          { name: '趋势', data: lineData, color: '#1BAFEE', type: 'line' },
+        ],
+      }
+    })
+
+    const chartOpts = {
+      color: ['#FFCC14', '#1BAFEE'],
+      padding: [16, 16, 8, 16],
+      dataLabel: false,
+      legend: { show: false },
+      xAxis: { disableGrid: true, axisLine: false, fontColor: '#FFFFFF', fontSize: 9 },
+      yAxis: { data: [{ min: 0 }], disableGrid: true, axisLine: false, fontColor: '#FFFFFF', fontSize: 9 },
+      extra: {
+        bar: { type: 'group', width: 18, linear: true, color: ['#FFDF77', '#B984FF', '#FF8183'] },
+        line: { type: 'curve', width: 2, activeType: 'hollow' },
+      },
+    }
+    // #endif
+
+    function handleChartTap(e) {
+      // 后续可扩展：点击柱子查看当日明细
+      console.log('[IncomeCurve] chart tap', e)
+    }
+
+    return { peak, handleChartTap }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.income-curve-card {
+  background: linear-gradient(135deg, #FFDF77 0%, #8E95E2 40%, #F48CFF 100%);
+  border-radius: 22rpx;
+  padding: 24rpx;
+  margin: 24rpx 0;
+  box-shadow: 0px 4px 4px rgba(189, 50, 50, 0.25);
+  min-height: 360rpx;
+}
+
+.curve-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 16rpx;
+  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+.chart-wrap {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 17rpx;
+  padding: 16rpx;
+  backdrop-filter: blur(10px);
+}
+
+.chart-header {
+  display: flex;
+  align-items: baseline;
+  gap: 12rpx;
+  margin-bottom: 12rpx;
+}
+
+.chart-peak-value {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #FFFABD;
+  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
+  font-family: 'Baloo Bhai', sans-serif;
+}
+
+.chart-peak-date {
+  font-size: 18rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.chart-canvas {
+  width: 100%;
+  height: 240rpx;
+}
+
+.chart-placeholder-fallback {
+  height: 240rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-size: 28rpx;
+}
+
+.chart-fallback-sub {
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  opacity: 0.7;
+}
+
+.skeleton-chart {
+  height: 360rpx;
+  border-radius: 17rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s infinite;
+}
+
+.error-box {
+  height: 360rpx;
+  border-radius: 17rpx;
+  background: rgba(255, 100, 100, 0.15);
+  border: 2rpx solid rgba(255, 100, 100, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-text {
+  color: #ff8080;
+  font-size: 28rpx;
+}
+
+@keyframes skeleton-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>
+```
+
+- [ ] **Step 3: 在 dashboard.vue 中挂载组件**
+
+在 CrystalOverview 之后追加：
+```vue
+<IncomeCurve
+  :points="data.curve?.points || []"
+  :loading="loading.curve"
+  :error="error.curve"
+  @retry="refresh('curve')"
+/>
+```
+
+components 追加 `IncomeCurve`。
+
+- [ ] **Step 4: 安装 uCharts**
+
+```bash
+cd frontend && npm install qiun-data-charts
+```
+
+如项目无 H5 组件库依赖关系导致构建失败，回退到 `chart-theme.json` + 占位文字（Step 2 中已留 fallback）。
+
+- [ ] **Step 5: 手动验证**
+
+刷新 H5 dev URL：
+- 预期：渐变卡片 + "七日收益曲线" 标题 + 柱状图（7 根柱，渐变填充）+ 折线（蓝黄渐变）+ 高亮当日 "+ 312" + 日期
+- 加载中：渐变骨架屏闪烁
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add frontend/pages/dashboard/components/IncomeCurve.vue frontend/pages/dashboard/dashboard.vue frontend/pages/dashboard/chart-theme.json frontend/package.json frontend/package-lock.json
+git commit -m "feat(dashboard): IncomeCurve 七日柱状+折线（uCharts H5）"
+```
+
+---
+
+## Task 8: ExhibitionCenter 组件（3 联 + 5 行表格）
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/ExhibitionCenter.vue`
+
+- [ ] **Step 1: 完整实现**
+
+```vue
+<template>
+  <view class="exhibition-center">
+    <text class="section-title">展出收益中心</text>
+
+    <!-- 错误态 -->
+    <view v-if="error" class="error-box" @tap="$emit('retry')">
+      <text class="error-text">加载失败，点击重试</text>
+    </view>
+
+    <!-- 骨架态 -->
+    <view v-else-if="loading || !data" class="skeleton-section">
+      <view class="skeleton-stats"></view>
+      <view class="skeleton-rows">
+        <view v-for="i in 5" :key="i" class="skeleton-row"></view>
+      </view>
+    </view>
+
+    <!-- 正常态 -->
+    <view v-else>
+      <!-- 顶部 3 联统计 -->
+      <view class="stats-row">
+        <view class="stat-cell">
+          <text class="stat-value">{{ data.exhibiting_count }} / {{ data.starbook_count }}</text>
+          <text class="stat-label">展出中 / 星册中</text>
+        </view>
+        <view class="stat-cell">
+          <text class="stat-value">{{ data.total_duration }}</text>
+          <text class="stat-label">累计展出时长</text>
+        </view>
+        <view class="stat-cell">
+          <text class="stat-value">{{ data.total_earnings }}</text>
+          <text class="stat-label">累计展出收益</text>
+        </view>
+      </view>
+
+      <!-- 5 行表格 -->
+      <view class="table">
+        <view class="table-header">
+          <text class="th th-thumb"></text>
+          <text class="th th-duration">七日展出时长</text>
+          <text class="th th-earnings">七日收益</text>
+          <text class="th th-avg">平均收益</text>
+        </view>
+        <view
+          v-for="(item, idx) in data.top5"
+          :key="item.asset_id"
+          class="table-row"
+        >
+          <view class="td td-thumb">
+            <view class="thumb-placeholder" :class="`thumb-grad-${idx % 5}`">
+              <text class="thumb-emoji">🎨</text>
+            </view>
+          </view>
+          <text class="td td-duration">{{ item.duration_7d }}</text>
+          <text class="td td-earnings">{{ item.earnings_7d }}</text>
+          <text class="td td-avg">{{ item.avg_earnings }} / H</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'ExhibitionCenter',
+  props: {
+    data: { type: Object, default: null }, // ExhibitionIncomeSummary
+    loading: { type: Boolean, default: false },
+    error: { type: String, default: null },
+  },
+  emits: ['retry'],
+}
+</script>
+
+<style lang="scss" scoped>
+.exhibition-center {
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(10px);
+  border-radius: 22rpx;
+  padding: 24rpx;
+  margin: 24rpx 0;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+}
+
+.section-title {
+  display: block;
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 24rpx;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.stats-row {
+  display: flex;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 17rpx;
+  padding: 24rpx 0;
+  margin-bottom: 24rpx;
+}
+
+.stat-cell {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.stat-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #FFFABD;
+  font-family: 'Baloo Bhai', sans-serif;
+  margin-bottom: 8rpx;
+}
+
+.stat-label {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.table {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 14rpx;
+  overflow: hidden;
+}
+
+.table-header,
+.table-row {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 12rpx;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.th,
+.td {
+  font-size: 24rpx;
+  color: #ffffff;
+  text-align: center;
+}
+
+.th-thumb,
+.td-thumb {
+  width: 80rpx;
+  flex-shrink: 0;
+}
+
+.th-duration,
+.td-duration,
+.th-earnings,
+.td-earnings {
+  flex: 1;
+}
+
+.th-avg,
+.td-avg {
+  width: 100rpx;
+  flex-shrink: 0;
+}
+
+.th {
+  font-size: 20rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.thumb-placeholder {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 3rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+}
+
+.thumb-grad-0 { background: linear-gradient(135deg, #FF6B6B 0%, #FFB199 100%); }
+.thumb-grad-1 { background: linear-gradient(135deg, #B17BFF 0%, #FF8FE6 100%); }
+.thumb-grad-2 { background: linear-gradient(135deg, #5EDFFF 0%, #6FA9FF 100%); }
+.thumb-grad-3 { background: linear-gradient(135deg, #FFE066 0%, #FFB199 100%); }
+.thumb-grad-4 { background: linear-gradient(135deg, #C5C5C5 0%, #8C8C8C 100%); }
+
+.thumb-emoji {
+  font-size: 32rpx;
+}
+
+.td-earnings {
+  color: #FFFABD;
+  font-weight: 600;
+  font-family: 'Baloo Bhai', sans-serif;
+}
+
+/* 骨架 */
+.skeleton-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.skeleton-stats {
+  height: 120rpx;
+  border-radius: 17rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.skeleton-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.skeleton-row {
+  height: 80rpx;
+  border-radius: 14rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.error-box {
+  height: 240rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 100, 100, 0.15);
+  border: 2rpx solid rgba(255, 100, 100, 0.4);
+  border-radius: 17rpx;
+}
+
+.error-text {
+  color: #ff8080;
+  font-size: 28rpx;
+}
+</style>
+```
+
+- [ ] **Step 2: 在 dashboard.vue 中挂载**
+
+在 IncomeCurve 后追加：
+```vue
+<ExhibitionCenter
+  :data="data.exhibition"
+  :loading="loading.exhibition"
+  :error="error.exhibition"
+  @retry="refresh('exhibition')"
+/>
+```
+
+components 追加 `ExhibitionCenter`。
+
+- [ ] **Step 3: 手动验证**
+
+刷新 H5 dev URL：
+- 预期：玻璃拟态卡片 + "展出收益中心" 标题 + 3 联统计（21/33、712:13:56、39721）+ 5 行表格（每行 4×5 缩略图 + 时长 + 收益 + 平均）
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add frontend/pages/dashboard/components/ExhibitionCenter.vue frontend/pages/dashboard/dashboard.vue
+git commit -m "feat(dashboard): ExhibitionCenter 3联+5行表格"
+```
+
+---
+
+## Task 9: LikeIncomeBoard 组件
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/LikeIncomeBoard.vue`
+
+- [ ] **Step 1: 完整实现**
+
+```vue
+<template>
+  <view class="like-income-board">
+    <text class="section-title">点赞收益看板</text>
+
+    <!-- 错误/骨架态 -->
+    <view v-if="error" class="error-box" @tap="$emit('retry')">
+      <text class="error-text">加载失败，点击重试</text>
+    </view>
+    <view v-else-if="loading || !stats" class="skeleton-board">
+      <view class="skeleton-stats"></view>
+      <view class="skeleton-list"></view>
+    </view>
+
+    <!-- 正常态 -->
+    <view v-else class="board-row">
+      <!-- 左侧统计 -->
+      <view class="left-stats">
+        <view class="stat-block">
+          <text class="stat-num">{{ stats.total_like_count }}</text>
+          <text class="stat-text">累积点赞</text>
+        </view>
+        <view class="stat-block">
+          <text class="stat-num">{{ stats.total_income }}</text>
+          <text class="stat-text">累计收益</text>
+        </view>
+      </view>
+
+      <!-- 右侧等级列表 -->
+      <view class="right-list">
+        <view
+          v-for="(item, idx) in levels"
+          :key="idx"
+          class="level-row"
+        >
+          <view class="level-thumb">
+            <view class="thumb-circle" :class="`level-${item.level}`">
+              <text class="thumb-letter">{{ item.level }}</text>
+            </view>
+          </view>
+          <text class="level-name">{{ item.level }}</text>
+          <text class="level-income">{{ item.total_income }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'LikeIncomeBoard',
+  props: {
+    stats: { type: Object, default: null }, // { total_like_count, total_income }
+    levels: { type: Array, default: () => [] },
+    loading: { type: Boolean, default: false },
+    error: { type: String, default: null },
+  },
+  emits: ['retry'],
+}
+</script>
+
+<style lang="scss" scoped>
+.like-income-board {
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(10px);
+  border-radius: 22rpx;
+  padding: 24rpx;
+  margin: 24rpx 0;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+}
+
+.section-title {
+  display: block;
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 24rpx;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.board-row {
+  display: flex;
+  gap: 16rpx;
+}
+
+.left-stats {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24rpx;
+  padding-right: 16rpx;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-num {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #FFFABD;
+  font-family: 'Baloo Bhai', sans-serif;
+  text-shadow: -1px 1px 4px rgba(206, 9, 9, 0.84);
+  margin-bottom: 6rpx;
+}
+
+.stat-text {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.right-list {
+  flex: 1.5;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.level-row {
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 12rpx;
+  padding: 12rpx;
+  gap: 16rpx;
+}
+
+.level-thumb {
+  width: 56rpx;
+  height: 56rpx;
+  flex-shrink: 0;
+}
+
+.thumb-circle {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
+}
+
+.thumb-letter {
+  font-size: 18rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.level-UR { background: linear-gradient(135deg, #FF8A65 0%, #FFD740 100%); }
+.level-SSR { background: linear-gradient(135deg, #FF5E9C 0%, #FFB199 100%); }
+.level-SR { background: linear-gradient(135deg, #B17BFF 0%, #FF8FE6 100%); }
+.level-R { background: linear-gradient(135deg, #5EDFFF 0%, #6FA9FF 100%); }
+.level-N { background: linear-gradient(135deg, #C5C5C5 0%, #8C8C8C 100%); }
+
+.level-name {
+  flex: 0 0 60rpx;
+  font-size: 22rpx;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.level-income {
+  flex: 1;
+  font-size: 28rpx;
+  font-weight: 700;
+  color: #FFFABD;
+  font-family: 'Baloo Bhai', sans-serif;
+  text-align: right;
+}
+
+/* 骨架/错误 */
+.skeleton-board {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.skeleton-stats,
+.skeleton-list {
+  height: 200rpx;
+  border-radius: 17rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.error-box {
+  height: 240rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 100, 100, 0.15);
+  border: 2rpx solid rgba(255, 100, 100, 0.4);
+  border-radius: 17rpx;
+}
+
+.error-text {
+  color: #ff8080;
+  font-size: 28rpx;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>
+```
+
+- [ ] **Step 2: 在 dashboard.vue 中挂载**
+
+在 ExhibitionCenter 后追加：
+```vue
+<LikeIncomeBoard
+  :stats="data.likeIncome ? { total_like_count: data.likeIncome.total_like_count, total_income: data.likeIncome.total_income } : null"
+  :levels="data.likeIncome?.levels || []"
+  :loading="loading.likeIncome"
+  :error="error.likeIncome"
+  @retry="refresh('likeIncome')"
+/>
+```
+
+components 追加 `LikeIncomeBoard`。
+
+- [ ] **Step 3: 手动验证 + Commit**
+
+```bash
+git add frontend/pages/dashboard/components/LikeIncomeBoard.vue frontend/pages/dashboard/dashboard.vue
+git commit -m "feat(dashboard): LikeIncomeBoard 左侧统计+右侧等级列表"
+```
+
+---
+
+## Task 10: CollectionMatrix + TopFiveAssets
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/CollectionMatrix.vue`
+- Create: `frontend/pages/dashboard/components/TopFiveAssets.vue`
+
+- [ ] **Step 1: 完整实现 TopFiveAssets.vue**
+
+```vue
+<template>
+  <view class="top-five-card">
+    <text class="card-title">历史藏品收益 TOP 5</text>
+    <view v-if="!items || items.length === 0" class="empty-row">
+      <text class="empty-text">暂无数据</text>
+    </view>
+    <view v-else class="top-five-row">
+      <view
+        v-for="item in items"
+        :key="item.asset_id"
+        class="top-cell"
+      >
+        <view class="top-thumb" :class="`top-grad-${item.rank}`">
+          <text class="top-emoji">🏆</text>
+        </view>
+        <view class="top-badge" :class="`top-badge-${item.rank}`">
+          <text class="top-badge-text">TOP {{ item.rank }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'TopFiveAssets',
+  props: {
+    items: { type: Array, default: () => [] }, // TopAssetItem[]
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.top-five-card {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 17rpx;
+  padding: 20rpx;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+}
+
+.card-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 16rpx;
+}
+
+.top-five-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 8rpx;
+}
+
+.top-cell {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.top-thumb {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8rpx;
+  box-shadow: 0 0 12px rgba(255, 200, 100, 0.3);
+}
+
+.top-grad-1 { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); }
+.top-grad-2 { background: linear-gradient(135deg, #C0C0C0 0%, #808080 100%); }
+.top-grad-3 { background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%); }
+.top-grad-4 { background: linear-gradient(135deg, #B17BFF 0%, #FF8FE6 100%); }
+.top-grad-5 { background: linear-gradient(135deg, #5EDFFF 0%, #6FA9FF 100%); }
+
+.top-emoji {
+  font-size: 48rpx;
+}
+
+.top-badge {
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+  opacity: 0.85;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.top-badge-1 { background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%); }
+.top-badge-2 { background: linear-gradient(90deg, #C0C0C0 0%, #808080 100%); }
+.top-badge-3 { background: linear-gradient(90deg, #CD7F32 0%, #8B4513 100%); }
+.top-badge-4 { background: linear-gradient(90deg, #B17BFF 0%, #FF8FE6 100%); }
+.top-badge-5 { background: linear-gradient(90deg, #5EDFFF 0%, #6FA9FF 100%); }
+
+.top-badge-text {
+  font-size: 18rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.empty-row {
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-text {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 24rpx;
+}
+</style>
+```
+
+- [ ] **Step 2: 完整实现 CollectionMatrix.vue（容器，先只接 TopFiveAssets）**
+
+```vue
+<template>
+  <view class="collection-matrix">
+    <text class="section-title">藏品矩阵</text>
+
+    <!-- TOP 5 -->
+    <TopFiveAssets :items="topFive || []" />
+
+    <!-- 后续 Task 11/12 在此追加 LevelDistribution / UpcomingUpgrades / RecentUpgrades -->
+  </view>
+</template>
+
+<script>
+import TopFiveAssets from './TopFiveAssets.vue'
+
+export default {
+  name: 'CollectionMatrix',
+  components: { TopFiveAssets },
+  props: {
+    topFive: { type: Array, default: () => [] },
+    levels: { type: Array, default: () => [] },
+    upgrades: { type: Object, default: () => ({ upcoming: [], recent: [] }) },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.collection-matrix {
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(10px);
+  border-radius: 22rpx;
+  padding: 24rpx;
+  margin: 24r 0;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+}
+
+.section-title {
+  display: block;
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #ffffff;
+  margin-bottom: 24rpx;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
+}
+</style>
+```
+
+- [ ] **Step 3: 在 dashboard.vue 中挂载**
+
+在 LikeIncomeBoard 后追加：
+```vue
+<CollectionMatrix
+  :top-five="data.topAssets"
+  :levels="data.levels"
+  :upgrades="data.upgrades"
+/>
+```
+
+components 追加 `CollectionMatrix`。
+
+- [ ] **Step 4: 手动验证 + Commit**
+
+```bash
+git add frontend/pages/dashboard/components/TopFiveAssets.vue frontend/pages/dashboard/components/CollectionMatrix.vue frontend/pages/dashboard/dashboard.vue
+git commit -m "feat(dashboard): CollectionMatrix 容器 + TopFiveAssets"
+```
+
+---
+
+## Task 11: LevelDistribution 组件（5 个 conic-gradient 环形图）
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/LevelDistribution.vue`
+
+- [ ] **Step 1: 完整实现**
+
+```vue
+<template>
+  <view class="level-distribution">
+    <text class="card-title">藏品等级分布</text>
+    <view v-if="!items || items.length === 0" class="empty-row">
+      <text class="empty-text">暂无数据</text>
+    </view>
+    <view v-else class="ring-row">
+      <view
+        v-for="item in items"
+        :key="item.level"
+        class="ring-cell"
+      >
+        <view
+          class="ring-outer"
+          :style="getRingStyle(item)"
+        >
+          <view class="ring-inner">
+            <text class="ring-count">{{ item.count }}</text>
+          </view>
+        </view>
+        <text class="ring-label">{{ item.level }}</text>
+        <text class="ring-pct">{{ getPercent(item) }}%</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'LevelDistribution',
+  props: {
+    items: { type: Array, default: () => [] }, // AssetLevelItem[]
+  },
+  setup() {
+    function getPercent(item) {
+      if (!item.total) return 0
+      return Math.round((item.count / item.total) * 100)
+    }
+    function getRingStyle(item) {
+      const pct = getPercent(item)
+      const colorMap = {
+        UR: '#FF8A65, #FFD740',
+        SSR: '#FF5E9C, #FFB199',
+        SR: '#B17BFF, #FF8FE6',
+        R: '#5EDFFF, #6FA9FF',
+        N: '#C5C5C5, #8C8C8C',
+      }
+      const colors = colorMap[item.level] || '#999, #ccc'
+      // 占位 0 显示灰色环
+      if (pct === 0) {
+        return {
+          background: 'conic-gradient(rgba(255,255,255,0.1) 0deg, rgba(255,255,255,0.1) 360deg)',
+        }
+      }
+      // 渐变环：从顶部开始，pct% 处停止
+      return {
+        background: `conic-gradient(${colors} 0deg ${pct * 3.6}deg, rgba(255,255,255,0.1) ${pct * 3.6}deg 360deg)`,
+      }
+    }
+    return { getPercent, getRingStyle }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.level-distribution {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 17rpx;
+  padding: 20rpx;
+  margin-top: 16rpx;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+}
+
+.card-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 16rpx;
+}
+
+.ring-row {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 16rpx 0;
+}
+
+.ring-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.ring-outer {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
+}
+
+.ring-inner {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+
+.ring-count {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #FFFABD;
+  font-family: 'Baloo Bhai', sans-serif;
+}
+
+.ring-label {
+  margin-top: 8rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ring-pct {
+  font-size: 18rpx;
+  color: rgba(255, 255, 255, 0.6);
+  margin-top: 2rpx;
+}
+
+.empty-row {
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-text {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 24rpx;
+}
+</style>
+```
+
+- [ ] **Step 2: 在 CollectionMatrix.vue 中挂载**
+
+在 `<TopFiveAssets>` 后追加：
+```vue
+<LevelDistribution :items="levels" />
+```
+
+并追加 import 和 components 注册。
+
+- [ ] **Step 3: 手动验证 + Commit**
+
+```bash
+git add frontend/pages/dashboard/components/LevelDistribution.vue frontend/pages/dashboard/components/CollectionMatrix.vue
+git commit -m "feat(dashboard): LevelDistribution 5个conic-gradient环形图"
+```
+
+---
+
+## Task 12: UpcomingUpgrades + RecentUpgrades
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/UpcomingUpgrades.vue`
+- Create: `frontend/pages/dashboard/components/RecentUpgrades.vue`
+
+- [ ] **Step 1: 完整实现 UpcomingUpgrades.vue**
+
+```vue
+<template>
+  <view class="upcoming-upgrades">
+    <text class="card-title">即将升级</text>
+    <view v-if="!items || items.length === 0" class="empty-row">
+      <text class="empty-text">暂无数据</text>
+    </view>
+    <view v-else class="upgrades-list">
+      <view
+        v-for="item in items"
+        :key="item.asset_id"
+        class="upgrade-row"
+      >
+        <view class="upgrade-thumb">
+          <view class="thumb-circle" :style="{ background: 'linear-gradient(135deg, #FF6B6B 0%, #FFB199 100%)' }">
+            <text class="thumb-letter">{{ item.asset_name[0] }}</text>
+          </view>
+        </view>
+        <view class="upgrade-progress">
+          <view class="progress-bar progress-cyan">
+            <view class="progress-fill" :style="{ width: item.like_progress + '%' }"></view>
+            <text class="progress-text">{{ item.like_progress }}%</text>
+          </view>
+          <view class="progress-bar progress-pink">
+            <view class="progress-fill" :style="{ width: item.duration_progress + '%' }"></view>
+            <text class="progress-text">{{ item.duration_progress }}%</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'UpcomingUpgrades',
+  props: {
+    items: { type: Array, default: () => [] }, // UpcomingLevelUpItem[]
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.upcoming-upgrades {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 17rpx;
+  padding: 20rpx;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+}
+
+.card-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 16rpx;
+}
+
+.upgrades-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.upgrade-row {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.upgrade-thumb {
+  width: 64rpx;
+  height: 64rpx;
+  flex-shrink: 0;
+}
+
+.thumb-circle {
+  width: 100%;
+  height: 100%;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
+}
+
+.thumb-letter {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.upgrade-progress {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+
+.progress-bar {
+  position: relative;
+  height: 16rpx;
+  border-radius: 6rpx;
+  background: rgba(217, 217, 217, 0.2);
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 6rpx;
+  transition: width 0.3s ease;
+}
+
+.progress-cyan .progress-fill {
+  background: linear-gradient(90deg, #5EDFFF 0%, #FFC8C8 100%);
+}
+
+.progress-pink .progress-fill {
+  background: linear-gradient(90deg, #FFF375 0%, #FF6B84 100%);
+}
+
+.progress-text {
+  position: absolute;
+  right: 6rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.empty-row {
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-text {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 24rpx;
+}
+</style>
+```
+
+- [ ] **Step 2: 完整实现 RecentUpgrades.vue**
+
+```vue
+<template>
+  <view class="recent-upgrades">
+    <text class="card-title">最近升级</text>
+    <view v-if="!items || items.length === 0" class="empty-row">
+      <text class="empty-text">暂无数据</text>
+    </view>
+    <view v-else class="upgrades-list">
+      <view
+        v-for="item in items"
+        :key="item.asset_id"
+        class="upgrade-row"
+      >
+        <view class="upgrade-thumb">
+          <view class="thumb-circle" :style="{ background: 'linear-gradient(135deg, #B17BFF 0%, #FF8FE6 100%)' }">
+            <text class="thumb-letter">{{ item.asset_name[0] }}</text>
+          </view>
+        </view>
+        <view class="upgrade-info">
+          <text class="upgrade-name">{{ item.asset_name }}</text>
+          <text class="upgrade-time">{{ formatTime(item.upgrade_time) }}</text>
+        </view>
+        <view class="level-badge" :class="`level-${item.new_level}`">
+          <text class="level-letter">{{ item.new_level }}</text>
+          <text class="lv-up">Lv UP</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'RecentUpgrades',
+  props: {
+    items: { type: Array, default: () => [] }, // RecentLevelUpItem[]
+  },
+  setup() {
+    function formatTime(ts) {
+      const d = new Date(ts)
+      const now = Date.now()
+      const diff = now - ts
+      if (diff < 60 * 60 * 1000) return `${Math.floor(diff / 60000)} 分钟前`
+      if (diff < 24 * 60 * 60 * 1000) return `${Math.floor(diff / 3600000)} 小时前`
+      return `${Math.floor(diff / 86400000)} 天前`
+    }
+    return { formatTime }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.recent-upgrades {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 17rpx;
+  padding: 20rpx;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
+}
+
+.card-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #ffffff;
+  margin-bottom: 16rpx;
+}
+
+.upgrades-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.upgrade-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12rpx;
+  padding: 10rpx;
+}
+
+.upgrade-thumb {
+  width: 56rpx;
+  height: 56rpx;
+  flex-shrink: 0;
+}
+
+.thumb-circle {
+  width: 100%;
+  height: 100%;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
+}
+
+.thumb-letter {
+  font-size: 22rpx;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.upgrade-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+  min-width: 0;
+}
+
+.upgrade-name {
+  font-size: 22rpx;
+  color: #ffffff;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.upgrade-time {
+  font-size: 18rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.level-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6rpx 12rpx;
+  border-radius: 8rpx;
+  flex-shrink: 0;
+}
+
+.level-UR { background: linear-gradient(135deg, #FF8A65 0%, #FFD740 100%); }
+.level-SSR { background: linear-gradient(135deg, #FF5E9C 0%, #FFB199 100%); }
+.level-SR { background: linear-gradient(135deg, #B17BFF 0%, #FF8FE6 100%); }
+.level-R { background: linear-gradient(135deg, #5EDFFF 0%, #6FA9FF 100%); }
+.level-N { background: linear-gradient(135deg, #C5C5C5 0%, #8C8C8C 100%); }
+
+.level-letter {
+  font-size: 20rpx;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+.lv-up {
+  font-size: 14rpx;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.empty-row {
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-text {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 24rpx;
+}
+</style>
+```
+
+- [ ] **Step 3: 在 CollectionMatrix.vue 中挂载（两列布局）**
+
+替换 CollectionMatrix.vue 的 template 为：
+```vue
+<template>
+  <view class="collection-matrix">
+    <text class="section-title">藏品矩阵</text>
+    <TopFiveAssets :items="topFive || []" />
+    <LevelDistribution :items="levels || []" />
+    <view class="upgrades-two-col">
+      <UpcomingUpgrades :items="upgrades?.upcoming || []" />
+      <RecentUpgrades :items="upgrades?.recent || []" />
+    </view>
+  </view>
+</template>
+```
+
+并在 `<style>` 中追加：
+```scss
+.upgrades-two-col {
+  display: flex;
+  gap: 12rpx;
+  margin-top: 16rpx;
+
+  > * {
+    flex: 1;
+  }
+}
+```
+
+在 `<script>` 中追加 import 与 components 注册：
+```js
+import LevelDistribution from './LevelDistribution.vue'
+import UpcomingUpgrades from './UpcomingUpgrades.vue'
+import RecentUpgrades from './RecentUpgrades.vue'
+
+components: { TopFiveAssets, LevelDistribution, UpcomingUpgrades, RecentUpgrades },
+```
+
+- [ ] **Step 4: 手动验证 + Commit**
+
+```bash
+git add frontend/pages/dashboard/components/UpcomingUpgrades.vue frontend/pages/dashboard/components/RecentUpgrades.vue frontend/pages/dashboard/components/CollectionMatrix.vue
+git commit -m "feat(dashboard): UpcomingUpgrades + RecentUpgrades 双列布局"
+```
+
+---
+
+## Task 13: SectionSkeleton + EmptyState 通用组件
+
+**Files:**
+- Create: `frontend/pages/dashboard/components/SectionSkeleton.vue`
+- Create: `frontend/pages/dashboard/components/EmptyState.vue`
+
+- [ ] **Step 1: 完整实现 SectionSkeleton.vue**
+
+```vue
+<template>
+  <view class="section-skeleton" :class="`skeleton-${variant}`">
+    <view v-if="variant === 'card'" class="sk-card">
+      <view class="sk-label"></view>
+      <view class="sk-value"></view>
+    </view>
+    <view v-else-if="variant === 'list'" class="sk-list">
+      <view v-for="i in 3" :key="i" class="sk-row"></view>
+    </view>
+    <view v-else-if="variant === 'chart'" class="sk-chart"></view>
+    <view v-else-if="variant === 'matrix'" class="sk-matrix">
+      <view class="sk-row"></view>
+      <view class="sk-row"></view>
+      <view class="sk-row"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SectionSkeleton',
+  props: {
+    variant: { type: String, default: 'card' }, // card | list | chart | matrix
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.section-skeleton {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 17rpx;
+  padding: 24rpx;
+  margin: 16rpx 0;
+}
+
+.sk-card,
+.sk-list,
+.sk-chart,
+.sk-matrix {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.sk-card {
+  align-items: center;
+}
+
+.sk-label {
+  width: 40%;
+  height: 24rpx;
+  border-radius: 6rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.sk-value {
+  width: 60%;
+  height: 48rpx;
+  border-radius: 8rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.sk-row {
+  width: 100%;
+  height: 64rpx;
+  border-radius: 12rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.sk-chart {
+  width: 100%;
+  height: 240rpx;
+  border-radius: 14rpx;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+</style>
+```
+
+- [ ] **Step 2: 完整实现 EmptyState.vue**
+
+```vue
+<template>
+  <view class="empty-state">
+    <text class="empty-icon">{{ icon }}</text>
+    <text class="empty-text">{{ text }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'EmptyState',
+  props: {
+    text: { type: String, default: '暂无数据' },
+    icon: { type: String, default: '📭' },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 32rpx;
+}
+
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 16rpx;
+  opacity: 0.6;
+}
+
+.empty-text {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 26rpx;
+}
+</style>
+```
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add frontend/pages/dashboard/components/SectionSkeleton.vue frontend/pages/dashboard/components/EmptyState.vue
+git commit -m "feat(dashboard): SectionSkeleton + EmptyState 通用组件"
+```
+
+> **注**：本任务暂不替换各 section 内的内联骨架（已能用），后续若需要统一可在各组件中替换 `<view class="skeleton-...">` 为 `<SectionSkeleton variant="..." />`。
+
+---
+
+## Task 14: onShow 刷新 + Tab 缓存 + 下拉刷新
+
+**Files:**
+- Modify: `frontend/pages/dashboard/dashboard.vue`
+
+- [ ] **Step 1: 加入 onShow 静默刷新 + Tab 缓存**
+
+完整替换 `<script setup>` 部分（在 `export default` 内）：
+
+```javascript
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import DashboardHeader from './components/DashboardHeader.vue'
+import CrystalOverview from './components/CrystalOverview.vue'
+import IncomeCurve from './components/IncomeCurve.vue'
+import ExhibitionCenter from './components/ExhibitionCenter.vue'
+import LikeIncomeBoard from './components/LikeIncomeBoard.vue'
+import CollectionMatrix from './components/CollectionMatrix.vue'
+import { useDashboardData } from '@/composables/useDashboardData'
+
+export default {
+  components: { DashboardHeader, CrystalOverview, IncomeCurve, ExhibitionCenter, LikeIncomeBoard, CollectionMatrix },
+  setup() {
+    const activeTab = ref('crystal')
+    const starId = ref(uni.getStorageSync('star_id') || null)
+
+    const { loading, error, data, refresh, isReady, lastFetched, dispose } = useDashboardData({
+      starId: starId.value,
+    })
+
+    // Tab 切换：30 分钟内复用缓存；切回水晶 Tab 时静默刷新
+    function handleTabChange(tab) {
+      activeTab.value = tab
+      if (tab === 'crystal') {
+        // 静默后台刷新（不显示 loading 覆盖，因为数据已存在）
+        refresh()
+      }
+    }
+
+    // 下拉刷新
+    async function handlePullDownRefresh() {
+      await refresh()
+      uni.stopPullDownRefresh()
+    }
+
+    onMounted(() => {
+      // 首屏已由 composable 自动 loadAll()
+    })
+
+    onUnmounted(() => {
+      dispose()
+    })
+
+    return {
+      activeTab,
+      loading,
+      error,
+      data,
+      isReady,
+      lastFetched,
+      handleTabChange,
+      handlePullDownRefresh,
+      pageBg: 'linear-gradient(153deg, #FF9597 0%, #80DFFF 33%, #B8B8B8 74%, #D9D9D9 100%)',
+    }
+  },
+}
+```
+
+并在 `<template>` 顶部加 pull-down-refresh 包装（uni-app 页面配置）：
+
+把 `<view class="dashboard-container" :style="{ background: pageBg }">` 改为：
+```vue
+<scroll-view
+  scroll-y
+  class="dashboard-scroll"
+  :style="{ background: pageBg }"
+  @scrolltolower="handlePullDownRefresh"
+  :refresher-enabled="true"
+  :refresher-triggered="loading.overall"
+  @refresherrefresh="handlePullDownRefresh"
+>
+  <view class="dashboard-container">
+    ...（原内容）
+  </view>
+</scroll-view>
+```
+
+在 `<style>` 中加：
+```scss
+.dashboard-scroll {
+  height: 100vh;
+}
+```
+
+- [ ] **Step 2: 启用页面下拉刷新**
+
+修改 `frontend/pages.json` 中 dashboard 条目：
+```json
+		,{
+			"path": "pages/dashboard/dashboard",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none"
+				},
+				"enablePullDownRefresh": true
+			}
+		}
+```
+
+- [ ] **Step 3: 手动验证**
+
+刷新 H5 dev URL：
+- 拖动下拉 → 触发刷新（loading 短暂亮起）
+- 切换 Tab 1 → Tab 2 → Tab 1：第一次切回 Tab 1 时触发静默 refresh
+- 离开页面后再次进入：composable dispose 已调用
+
+- [ ] **Step 4: 验证 Figma 视觉一致性**
+
+用 `superpowers:verification-before-completion` 流程对照 `docs/figma-analysis-data-dashboard.md` 第三节设计 token 逐项核对：
+- [ ] 颜色 token 与 §3.1 一致
+- [ ] 阴影 token 与 §3.2 一致
+- [ ] 圆角与 §3.3 一致
+- [ ] 5 个等级色与 §2.7.2 一致
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add frontend/pages/dashboard/dashboard.vue frontend/pages.json
+git commit -m "feat(dashboard): onShow 静默刷新 + Tab 缓存 + 下拉刷新"
+```
+
+---
+
+## 风险与决策记录
+
+| 风险 | 应对 |
+|------|------|
+| uCharts 在小程序/App 端需单独配置 | Task 7 留 fallback 占位；App 端后续用 `qiun-data-charts` 原生插件补充 |
+| 后端接口契约变更 | proto 是单一信源（spec §4.2），mock 与接口字段同步更新 |
+| 视觉稿 1:1 像素级还原 | Task 14 末提供核对清单；超出 token 范围的微调由 UI 评审 |
+| 7 接口并发 401 处理 | `utils/api.js` 已有统一处理（清除 token + 跳登录），无需 dashboard 额外处理 |
+
+## 后续可扩展（不在本计划）
+
+- Tab 2 "赛季总览" 真实数据（spec §7.3）
+- IncomeCurve 点击柱子弹窗（spec §7.3）
+- 升级提醒推送（spec §7.3）
+- 视觉资源（Figma 素材）批量下载与替换占位
+
+## 变更记录
+
+| 日期 | 变更 | 作者 |
+|------|------|------|
+| 2026-06-02 | 初版 | Claude |