feat(dashboard): Header 完整视觉（毛绒怪占位+渐变标题+Tab胶囊）

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;
 }