From a91d7a5e618af9609a1ab8c0ce88cd13cd7de5bf Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Tue, 2 Jun 2026 22:05:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20Header=20=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E8=A7=86=E8=A7=89=EF=BC=88=E6=AF=9B=E7=BB=92=E6=80=AA=E5=8D=A0?=
 =?UTF-8?q?=E4=BD=8D+=E6=B8=90=E5=8F=98=E6=A0=87=E9=A2=98+Tab=E8=83=B6?=
 =?UTF-8?q?=E5=9B=8A=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/components/DashboardHeader.vue  | 101 +++++++++++++-----
 1 file changed, 77 insertions(+), 24 deletions(-)

diff --git a/frontend/pages/dashboard/components/DashboardHeader.vue b/frontend/pages/dashboard/components/DashboardHeader.vue
index d150bf2..9f8c1bf 100644
--- a/frontend/pages/dashboard/components/DashboardHeader.vue
+++ b/frontend/pages/dashboard/components/DashboardHeader.vue
@@ -1,8 +1,26 @@
 <template>
   <view class="dashboard-header">
-    <view class="header-bg"></view>
+    <!-- 装饰渐变背景 -->
+    <view class="header-deco-bg"></view>
+
+    <!-- 装饰光晕（红粉色） -->
+    <view class="header-glow"></view>
+
+    <!-- 状态栏占位（iPhone 44px） -->
+    <view class="status-bar-placeholder"></view>
+
     <view class="header-content">
-      <text class="header-title">数据看板</text>
+      <!-- 毛绒怪头像（占位：纯色块 + 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' : '']"
@@ -21,24 +39,25 @@
   </view>
 </template>
 
-<script>
-export default {
-  name: 'DashboardHeader',
-  props: {
-    activeTab: { type: String, default: 'crystal' },
-  },
-  emits: ['update:activeTab'],
-}
+<script setup>
+defineProps({
+  activeTab: { type: String, default: 'crystal' },
+})
+defineEmits(['update:activeTab'])
 </script>
 
 <style lang="scss" scoped>
 .dashboard-header {
   position: relative;
-  height: 280rpx;
+  height: 360rpx;
   overflow: hidden;
 }
 
-.header-bg {
+.status-bar-placeholder {
+  height: 44px;
+}
+
+.header-deco-bg {
   position: absolute;
   top: 0;
   left: 0;
@@ -49,38 +68,72 @@ export default {
   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: 1;
-  padding: 80rpx 32rpx 32rpx;
+  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 {
-  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;
+  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;
-  justify-content: center;
-  gap: 0;
   background: rgba(0, 0, 0, 0.15);
   border-radius: 22rpx;
   padding: 6rpx;
-  margin: 0 100rpx;
+  width: 100%;
+  max-width: 500rpx;
 }
 
 .tab {
   flex: 1;
   text-align: center;
-  padding: 16rpx 0;
+  padding: 14rpx 0;
   font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.75);
   border-radius: 22rpx;
   transition: all 0.25s ease;
 }