修改主页面

dream-app/src/app/tab1/tab1.page.html

@@ -1,68 +1,81 @@
 <ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-button>
-          <ion-icon name="logo-android"></ion-icon>
-        </ion-button>
-      </ion-buttons>
-      <ion-title>好梦</ion-title>
-      <ion-buttons slot="end">
-        <ion-button (click)="openSettings()">
-          <ion-icon name="settings"></ion-icon>
-        </ion-button>
-        <ion-button (click)="openProfile()">
-          <ion-icon name="person-circle"></ion-icon>
-        </ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-  </ion-header>
-  
-  <ion-content>
-    <div class="sleep-status">
-      <h2>{{ currentDate | date: 'yyyy-MM-dd HH:mm' }}</h2>
-      <div class="sleep-quality">
-        <ion-icon name="star" *ngFor="let star of getSleepQualityStars()"></ion-icon>
-      </div>
-      <p>昨晚睡眠时长：{{ sleepDuration }}</p>
-      <p>入睡时间：{{ sleepTime }}</p>
-      <p>醒来时间：{{ wakeTime }}</p>
-    </div>
-  
-    <ion-button expand="full" (click)="recordDream()">
+  <ion-toolbar>
+    <!-- Logo与应用名称 -->
+    <ion-buttons slot="start">
+      <ion-button fill="clear">
+        <ion-icon name="moon-outline"></ion-icon>
+        <ion-label>好梦</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <!-- 设置按钮 -->
+    <ion-buttons slot="end">
+      <ion-button fill="clear" (click)="openSettings()">
+        <ion-icon name="settings-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- 主要功能区域 -->
+  <div class="main-functions">
+    <!-- 梦境记录 -->
+    <ion-button
+      expand="block"
+      size="large"
+      color="tertiary"
+      (click)="navigateTo('record')"
+    >
+      <ion-icon slot="start" name="create-outline"></ion-icon>
       记录梦境
     </ion-button>
-    <p class="dream-prompt">随时记录你美好的梦境</p>
-  
-    <div class="dream-analysis">
-      <h3>昨晚梦境</h3>
-      <p>{{ lastDreamDescription }}</p>
-      <ion-button (click)="analyzeDream()">解梦</ion-button>
-      <div class="emotion-analysis">
-        <p>情感分析：</p>
-        <ion-icon name="happy" *ngIf="emotion === '快乐'"></ion-icon>
-        <ion-icon name="sad" *ngIf="emotion === '悲伤'"></ion-icon>
-        <ion-icon name="heart" *ngIf="emotion === '放松'"></ion-icon>
-      </div>
-    </div>
-  
-    <div class="dream-visualization">
-      <h3>最近梦境图片</h3>
-      <!-- <ion-slides>
-        <ion-slide *ngFor="let image of dreamImages">
-          <img [src]="image" />
-        </ion-slide>
-      </ion-slides> -->
-      <ion-button (click)="viewAllDreams()">查看所有梦境</ion-button>
-    </div>
-  
-    <div class="tips">
-      <h3>今日改善建议</h3>
-      <p>{{ improvementSuggestion }}</p>
-      <h4>睡眠健康小贴士</h4>
-      <ion-list>
-        <ion-item *ngFor="let tip of sleepTips">
-          {{ tip }}
-        </ion-item>
-      </ion-list>
+
+    <!-- 梦境分析和梦境描绘 -->
+    <div class="function-cards">
+      <!-- 梦境分析 -->
+      <ion-card (click)="navigateTo('analysis')">
+        <ion-card-header>
+          <ion-icon name="search-outline" size="large"></ion-icon>
+          <ion-card-title>梦境分析</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          解读您的梦境，提供专业建议。
+        </ion-card-content>
+      </ion-card>
+
+      <!-- 梦境描绘 -->
+      <ion-card (click)="navigateTo('visualization')">
+        <ion-card-header>
+          <ion-icon name="color-palette-outline" size="large"></ion-icon>
+          <ion-card-title>梦境描绘</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+          根据描述生成梦境的印象图片。
+        </ion-card-content>
+      </ion-card>
     </div>
-  </ion-content>
+  </div>
+
+  <!-- 近期梦境展示 -->
+  <ion-list>
+    <ion-list-header>
+      <ion-label>近期梦境</ion-label>
+    </ion-list-header>
+
+    <ion-item
+      *ngFor="let dream of recentDreams"
+      (click)="openDreamDetail(dream)"
+    >
+      <ion-avatar slot="start">
+        <ion-icon
+          [name]="getEmotionIcon(dream.emotion)"
+          size="large"
+        ></ion-icon>
+      </ion-avatar>
+      <ion-label>
+        <h2>{{ dream.title }}</h2>
+        <p>{{ dream.date | date }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

dream-app/src/app/tab1/tab1.page.scss

@@ -0,0 +1,21 @@
+.main-functions {
+    padding: 16px;
+  
+    ion-button {
+      margin-bottom: 16px;
+    }
+  
+    .function-cards {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+  
+      ion-card {
+        width: 48%;
+      }
+    }
+  }
+  
+  ion-list {
+    margin-top: 16px;
+  }

dream-app/src/app/tab1/tab1.page.spec.ts

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { Tab1Page } from './tab1.page';
 
 describe('Tab1Page', () => {
@@ -7,6 +6,12 @@ describe('Tab1Page', () => {
   let fixture: ComponentFixture<Tab1Page>;
 
   beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Tab1Page],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
     fixture = TestBed.createComponent(Tab1Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -15,4 +20,4 @@ describe('Tab1Page', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+});

dream-app/src/app/tab1/tab1.page.ts

@@ -1,68 +1,60 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonCardHeader, IonChip, IonButton, IonButtons, IonList, IonItem, IonIcon } from '@ionic/angular/standalone';
-
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule, DatePipe } from '@angular/common';
 import { Router } from '@angular/router';
-import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss'],
+  templateUrl: './tab1.page.html',
+  styleUrls: ['./tab1.page.scss'],
   standalone: true,
-  imports: [
-    CommonModule,
-    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonCard,IonCardContent,IonCardHeader,IonChip,
-    IonButton,IonButtons,IonList,IonItem,IonIcon
-  ],
+  imports: [IonicModule, CommonModule, DatePipe],
 })
 export class Tab1Page {
-  currentDate: Date = new Date();
-  sleepDuration: string = '7小时30分钟';
-  sleepTime: string = '22:30';
-  wakeTime: string = '06:00';
-  lastDreamDescription: string = '在海边漫步';
-  emotion: string = '放松';
-  dreamImages: string[] = [
-    'assets/images/dream1.jpg',
-    'assets/images/dream2.jpg',
-    'assets/images/dream3.jpg',
-  ];
-  improvementSuggestion: string = '保持卧室安静和黑暗';
-  sleepTips: string[] = [
-    '定时作息，建立良好睡眠习惯',
-    '避免晚上使用电子设备',
-    '保持卧室温度适宜',
+  recentDreams = [
+    {
+      title: '飞翔的城市',
+      date: new Date('2023-10-20'),
+      emotion: '愉悦',
+    },
+    {
+      title: '迷失的森林',
+      date: new Date('2023-10-18'),
+      emotion: '恐惧',
+    },
+    // 更多示例梦境
   ];
 
   constructor(private router: Router) {}
 
-  getSleepQualityStars(): number[] {
-    return Array(4).fill(0); // 假设4颗星
-  }
-
-  recordDream() {
-    // 记录梦境的逻辑
-  }
-
-  analyzeDream() {
-    // 解梦的逻辑
-  }
-
-  viewAllDreams() {
-    // 查看所有梦境的逻辑
+  // 导航到指定页面
+  navigateTo(page: string) {
+    this.router.navigate([`/tabs/${page}`]);
   }
 
+  // 打开设置页面
   openSettings() {
-    // 打开设置页面的逻辑
+    this.router.navigate(['/settings']);
   }
 
-  openProfile() {
-    // 打开个人资料页面的逻辑
+  // 打开梦境详情页
+  openDreamDetail(dream: any) {
+    this.router.navigate(['/dream-detail'], { state: { dream } });
   }
 
-  navigateTo(page: string) {
-    this.router.navigate([page]);
+  // 根据情感获取对应的图标名称
+  getEmotionIcon(emotion: string): string {
+    switch (emotion) {
+      case '愉悦':
+        return 'happy-outline';
+      case '悲伤':
+        return 'sad-outline';
+      case '恐惧':
+        return 'alert-circle-outline';
+      case '平静':
+        return 'leaf-outline';
+      default:
+        return 'help-outline';
+    }
   }
-}
+}

dream-app/src/app/tabs/tabs.page.html

@@ -1,18 +1,21 @@
 <ion-tabs>
   <ion-tab-bar slot="bottom">
+    <!-- 好梦 -->
     <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="time"></ion-icon>
+      <ion-icon name="moon-outline"></ion-icon>
       <ion-label>好梦</ion-label>
     </ion-tab-button>
 
+    <!-- 探索 -->
     <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="aperture"></ion-icon>
+      <ion-icon name="compass-outline"></ion-icon>
       <ion-label>探索</ion-label>
     </ion-tab-button>
 
+    <!-- 我的 -->
     <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="person"></ion-icon>
+      <ion-icon name="person-outline"></ion-icon>
       <ion-label>我的</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-</ion-tabs>
+</ion-tabs>

dream-app/src/app/tabs/tabs.page.spec.ts

@@ -1,6 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideRouter } from '@angular/router';
-
 import { TabsPage } from './tabs.page';
 
 describe('TabsPage', () => {
@@ -10,7 +8,6 @@ describe('TabsPage', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [TabsPage],
-      providers: [provideRouter([])]
     }).compileComponents();
   });
 
@@ -23,4 +20,4 @@ describe('TabsPage', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+});

dream-app/src/app/tabs/tabs.page.ts

@@ -1,19 +1,11 @@
-import { Component, EnvironmentInjector, inject } from '@angular/core';
-import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { time, aperture, person } from 'ionicons/icons';
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-tabs',
-  templateUrl: 'tabs.page.html',
-  styleUrls: ['tabs.page.scss'],
+  templateUrl: './tabs.page.html',
+  styleUrls: ['./tabs.page.scss'],
   standalone: true,
-  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
+  imports: [IonicModule],
 })
-export class TabsPage {
-  public environmentInjector = inject(EnvironmentInjector);
-
-  constructor() {
-    addIcons({ time, aperture, person });
-  }
-}
+export class TabsPage {}

dream-app/src/app/tabs/tabs.routes.ts

@@ -33,4 +33,4 @@ export const routes: Routes = [
     redirectTo: '/tabs/tab1',
     pathMatch: 'full',
   },
-];
+];