From 282eb72e465d80b949fcfecaef315c5d8b46a793 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Tue, 2 Jun 2026 21:54:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20=E9=A1=B5=E9=9D=A2=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=20+=20Header=20=E5=8D=A0=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/components/DashboardHeader.vue  |  94 +++++++++++++++
 frontend/pages/dashboard/dashboard.vue        | 112 ++++++++++++++++++
 2 files changed, 206 insertions(+)
 create mode 100644 frontend/pages/dashboard/components/DashboardHeader.vue
 create mode 100644 frontend/pages/dashboard/dashboard.vue

diff --git a/frontend/pages/dashboard/components/DashboardHeader.vue b/frontend/pages/dashboard/components/DashboardHeader.vue
new file mode 100644
index 0000000..d150bf2
--- /dev/null
+++ b/frontend/pages/dashboard/components/DashboardHeader.vue
@@ -0,0 +1,94 @@
+<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>
diff --git a/frontend/pages/dashboard/dashboard.vue b/frontend/pages/dashboard/dashboard.vue
new file mode 100644
index 0000000..50e93e8
--- /dev/null
+++ b/frontend/pages/dashboard/dashboard.vue
@@ -0,0 +1,112 @@
+<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, 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, isReady, dispose } = useDashboardData({
+      starId: starId.value,
+    })
+
+    function handleTabChange(tab) {
+      activeTab.value = tab
+    }
+
+    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>