optimize:current status and voice button

MindOCApp/src/app/mood/mood.page.html

@@ -1,8 +1,24 @@
 <!-- mood.page.html -->
 <ion-content class="mood-journal-v2">
+  <div class="mood-journal">
+    <!-- 顶部情绪状态指示 -->
+    <div class="mood-header">
+      <div class="current-status">
+        <ion-icon name="happy" class="pulse"></ion-icon>
+        <h2>当前情绪指数</h2>
+        <div class="score">7.2<span>/10</span></div>
+      </div>
+      <div class="emotion-cloud">
+        <span class="tag happy">快乐</span>
+        <span class="tag calm">平静</span>
+        <span class="tag anxious">轻微焦虑</span>
+      </div>
+    </div>
+  </div>
+
   <!-- 新型情绪仪表盘 -->
   <div class="emotion-dashboard">
-    <div class="circular-progress">
+    <!-- <div class="circular-progress">
       <div class="wave-container" [style.--progress]="currentMoodScore/10">
         <div class="liquid"></div>
         <div class="glow"></div>
@@ -12,15 +28,15 @@
         <div class="label">今日情绪指数</div>
       </div>
     </div>
-    <!-- 新增周边指标 -->
+    新增周边指标
     <div class="vital-stats">
-      <div class="stat-item" ><!-- (click)="toggleStat('stress')" -->
+      <div class="stat-item" > (click)="toggleStat('stress')"
         <div class="stat-icon heart-beat"></div>
         <div class="stat-value">72</div>
         <div class="stat-label">压力指数</div>
       </div>
-      <!-- 其他指标... -->
-    </div>
+      其他指标...
+    </div> -->
     <!-- 动态波纹背景 -->
     <div class="ripple-background">
       <div class="ripple" *ngFor="let r of ripples" 
@@ -63,5 +79,12 @@
     </div>
     <div class="suggestion">建议：尝试傍晚进行呼吸训练</div>
   </div>
+
+  <!-- 语音输入按钮 -->
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button class="voice-btn" (click)="startRecording()">
+      <ion-icon name="mic" [class.recording]="isRecording"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>
 

MindOCApp/src/app/mood/mood.page.scss

@@ -7,7 +7,66 @@
   
     background: var(--bg);
     padding-bottom: 80px;
-  
+
+
+    .mood-journal {
+      --primary-color: #ff9a9e;
+      --secondary-color: #a8edea;
+      --text-color: #6c5b7b;
+      // 情绪状态指示样式
+      .mood-header {
+        padding: 20px;
+        background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
+        border-radius: 0 0 30px 30px;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    
+        .current-status {
+          text-align: center;
+          color: white;
+          
+          ion-icon {
+            font-size: 48px;
+            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+          }
+    
+          .score {
+            font-size: 42px;
+            font-weight: bold;
+            span {
+              font-size: 16px;
+              opacity: 0.8;
+            }
+          }
+        }
+    
+        .emotion-cloud {
+          margin-top: 15px;
+          display: flex;
+          justify-content: center;
+          gap: 8px;
+          flex-wrap: wrap;
+    
+          .tag {
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 14px;
+            background: rgba(255,255,255,0.2);
+            backdrop-filter: blur(4px);
+            
+            &.happy { background: rgba(255,234,167,0.3); }
+            &.calm { background: rgba(168,237,234,0.3); }
+            &.anxious { background: rgba(255,154,158,0.3); }
+          }
+        }
+      }
+      @keyframes pulse {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.1); }
+        100% { transform: scale(1); }
+      }
+    }
+
+    // 新型情绪仪表盘
     .emotion-dashboard {
       padding: 20px;
       background: #c06c840f;
@@ -293,6 +352,18 @@
         padding-left: 28px;
       }
     }
+
+    // 语音输入按钮
+    .voice-btn {
+      --background: #ff9a9da2;
+      --box-shadow: 0 4px 16px rgba(255,154,158,0.3);
+      
+      &[class*="recording"] {
+        animation: pulse 1.5s infinite;
+      }
+    }
+  
+
   }
   
   @keyframes wave {

MindOCApp/src/app/mood/mood.page.ts

@@ -97,8 +97,6 @@ export class MoodPage implements OnInit {
     };
   }
   
-  // 录音状态
-  isRecording: boolean = false;
 
   // 智能分析建议
   analysisSuggestion: string = '检测到本周三下午常出现情绪波动，建议尝试呼吸练习';
@@ -165,6 +163,13 @@ export class MoodPage implements OnInit {
     // 实际开发中可跳转详情页或显示模态框
   }
 
+  // 录音状态
+  isRecording: boolean = false;
+
+  startRecording() {
+    this.isRecording = !this.isRecording;
+    // 后续集成录音功能
+  }
   /** 切换录音状态 */
   toggleRecording(): void {
     this.isRecording = !this.isRecording;