Finish the navigation bar

MindOCApp/src/app/tabs/tabs.page.html

@@ -1,21 +1,22 @@
+<!-- src/app/tabs/tabs.page.html -->
 <ion-tabs>
-
   <ion-tab-bar slot="bottom" class="mindoc-tab-bar">
     <!-- 情绪日记 -->
-    <ion-tab-button tab="mood" href="/tabs/mood">
-      <ion-icon aria-hidden="true" name="leaf"></ion-icon>
+    <ion-tab-button tab="mood">
+      <ion-icon name="leaf"></ion-icon>
       <ion-label>情绪日记</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="game" href="/tabs/game">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+    <!-- 解压游戏 -->
+    <ion-tab-button tab="game">
+      <ion-icon name="game-controller"></ion-icon>
+      <ion-label>心灵SPA</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="ai" href="/tabs/ai">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+    <!-- AI守护 -->
+    <ion-tab-button tab="ai">
+      <ion-icon name="heart-circle"></ion-icon>
+      <ion-label>AI伙伴</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
-</ion-tabs>
+</ion-tabs>

MindOCApp/src/app/tabs/tabs.page.scss

@@ -1 +1,116 @@
-
+/* tabs.page.scss */
+.mindoc-tab-bar {
+    --transition-duration: 0.4s;
+    --particle-color: rgba(255,154,158,0.3);
+    --background: rgba(255,255,255,0.96);
+    --border: 0;
+    height: 60px;
+    backdrop-filter: blur(12px);
+    border-radius: 24px 24px 0 0;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
+    padding: 8px 0;
+    
+    ion-tab-button {
+      overflow: visible;
+      position: relative;
+      transition: all var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
+  
+      /* 光晕背景动画 */
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 110%;
+        height: 110%;
+        background: radial-gradient(circle at center, 
+          rgba(255,154,158,0.15) 0%,
+          rgba(255,154,158,0) 70%);
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0;
+        transition: all var(--transition-duration) ease-out;
+      }
+  
+      /* 粒子飞溅效果 */
+      &::after {
+        content: '';
+        position: absolute;
+        top: -10px;
+        left: 50%;
+        width: 8px;
+        height: 8px;
+        background: var(--particle-color);
+        border-radius: 50%;
+        opacity: 0;
+        filter: blur(1px);
+      }
+  
+      ion-icon {
+        position: relative;
+        z-index: 1;
+        transition: 
+          transform var(--transition-duration) ease-out,
+          color 0.2s linear;
+      }
+  
+      /* 选中状态动画 */
+      &.tab-selected {
+        transform: translateY(-8px);
+  
+        &::before {
+          transform: translate(-50%, -50%) scale(1);
+          opacity: 1;
+        }
+  
+        ion-icon {
+          transform: 
+            scale(1.2)
+            rotate(15deg);
+          color: #ff6b6b;
+          filter: 
+            drop-shadow(0 2px 4px rgba(255,107,107,0.3));
+        }
+  
+        /* 粒子动画序列 */
+        &::after {
+          animation: 
+            particle-float 1.2s ease-out,
+            particle-fade 1s ease-out;
+        }
+      }
+    }
+  }
+  
+  /* 粒子漂浮动画 */
+  @keyframes particle-float {
+    0% {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+    }
+    50% {
+      transform: translateX(-50%) translateY(-40px);
+    }
+    100% {
+      transform: translateX(-50%) translateY(-80px);
+      opacity: 0;
+    }
+  }
+  
+  /* 粒子渐隐动画 */
+  @keyframes particle-fade {
+    0% { opacity: 0.8; }
+    100% { opacity: 0; }
+  }
+  
+  /* 图标颜色渐变 */
+  ion-tab-button {
+    @for $i from 1 through 3 {
+      &:nth-child(#{$i}) {
+        --particle-color: rgba(255, 107 + ($i * 20), 107 + ($i * 15), 0.3);
+        
+        &.tab-selected ion-icon {
+          color: hsl(350 + ($i * 30), 70%, 60%);
+        }
+      }
+    }
+  }