feat(book-app): 添加聊天功能并优化首页布局

book-app/src/app/show-chat/show-chat.component.html

@@ -0,0 +1,25 @@
+<!-- <ion-header>
+  <ion-toolbar>
+    <ion-title>聊天</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="onNewChat()">
+        <ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header> -->
+
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let chat of chats" (click)="openChat(chat)">
+      <ion-avatar slot="start">
+        <img [src]="chat.avatarUrl" />
+      </ion-avatar>
+      <ion-label>
+        <h2>{{ chat.name }}</h2>
+        <p>{{ chat.lastMessage }}</p>
+      </ion-label>
+      <ion-note slot="end" color="medium">{{ chat.lastMessageTime | date: 'shortTime' }}</ion-note>
+    </ion-item>
+  </ion-list>
+</ion-content>

book-app/src/app/show-chat/show-chat.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ShowChatComponent } from './show-chat.component';
+
+describe('ShowChatComponent', () => {
+  let component: ShowChatComponent;
+  let fixture: ComponentFixture<ShowChatComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ShowChatComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ShowChatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

book-app/src/app/show-chat/show-chat.component.ts

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { IonButtons, IonNote } from '@ionic/angular/standalone';
+import { IonAvatar, IonButton, IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonIcon } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-show-chat',
+  standalone: true,
+  templateUrl: './show-chat.component.html',
+  imports: [IonHeader,IonToolbar,IonTitle,IonButton,IonIcon,IonContent,IonList,IonItem,IonAvatar,IonLabel,IonButtons,IonNote,CommonModule  ],
+})
+export class ShowChatComponent {
+  chats = [
+    {
+      name: '康康',
+      lastMessage: '[动画表情]',
+      lastMessageTime: new Date(),
+      avatarUrl: 'assets/img/3.png',
+    },
+    {
+      name: 'handsome sheep',
+      lastMessage: '你睡了吗？',
+      lastMessageTime: new Date(),
+      avatarUrl: 'assets/img/4.png',
+    },
+    {
+      name: '小熊',
+      lastMessage: '网络一线牵，珍惜这段缘',
+      lastMessageTime: new Date(),
+      avatarUrl: 'assets/img/5.png',
+    },
+    {
+      name: '涛涛',
+      lastMessage: '你吃了吗？',
+      lastMessageTime: new Date(),
+      avatarUrl: 'assets/img/7.png',
+    },
+    {
+      name: 'Peter',
+      lastMessage: '不是哥们',
+      lastMessageTime: new Date(),
+      avatarUrl: 'assets/img/8.png',
+    },
+    {
+      name: '惊鸿戏梦',
+      lastMessage: '111',
+      lastMessageTime: new Date(),
+      avatarUrl: 'assets/img/9.png',
+    },
+  ];
+
+  openChat(chat: any) {
+    console.log('打开聊天:', chat);
+    // 这里可以添加打开聊天的逻辑
+  }
+
+  onNewChat() {
+    console.log('新聊天');
+    // 这里可以添加新聊天的逻辑
+  }
+}

book-app/src/app/show-novel/show-novel.component.scss

@@ -7,9 +7,10 @@ ion-card {
 }
 
 ion-card img {
-  // width: 280px;
+   width: 280px;
   height: 384px;
   max-width: 100%; /* 限制图片宽度 */
-
+  //  width: auto;
+  // height: auto;
   margin-bottom: 10px; /* 图片与标题之间的间距 */
 }

book-app/src/app/show-novel/show-novel.component.ts

@@ -17,13 +17,13 @@ import { IonIcon } from '@ionic/angular/standalone';
 export class ShowNovelComponent {
   novels = [
     {
-      title: '我在精神病院学斩神',
-      description: '若黯夜降临，吾必立于万万人前，横刀向渊，血染苍穹',
+      title: '斩神',
+      description: '若黯夜降临吾必立于万万人前，横刀向渊，血染苍穹',
       image: 'assets/img/1.png' // 请替换为实际图片路径
     },
     {
       title: '诡舍',
-      description: '日子无聊没活力？看看诡舍刺激刺激',
+      description: '日子无聊没活力？看看《诡舍》刺激刺激',
       image: 'assets/img/2.png' // 请替换为实际图片路径
     },
     // {

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

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 1
+     首页
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -16,20 +16,20 @@
 
   <div class="inquery" style="margin-top: 10px">
     <div class="inquery-ai">
-    <ion-button expand="full" (click)="goToPage3()">
+    <ion-button expand="full" (click)="goToPage1()">
     <!-- <img src="assets\img\1.png" alt="" slot="start"> -->
     取名生成器</ion-button>
 </div>
 
 <div class="inquery-human">
-  <ion-button expand="full" (click)="getPlantingPlan()">
+  <ion-button expand="full" (click)="goToPage3()">
     属性生成器
   </ion-button>
 </div>
 
 
   <div class="inquery-ai">
-  <ion-button expand="full" (click)="getPlantingPlan()">内容生成器</ion-button>
+  <ion-button expand="full" (click)="goToPage4()">内容生成器</ion-button>
 </div>
 
 <div class="inquery-human">

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

@@ -14,20 +14,23 @@ import { Router } from '@angular/router';
 })
 export class Tab1Page {
  
-    constructor(private router: Router) {}
+   constructor(private router: Router) {}
 
-    // 定义获取种植方案的方法
-    getPlantingPlan() {
-      this.router.navigate(['/tabs/inquiry']);
-      // 这里可以调用API或服务来获取种植方案
-    
-    }
+  
+   goToPage1(){
+    this.router.navigate(['/tabs/inquiry']);
+
+  
+   }
   goToPage2(){
     this.router.navigate(['/tabs/picture'])
   }
   goToPage3(){
     this.router.navigate(['/tabs/show'])
   }
+  goToPage4(){
+    this.router.navigate(['/tabs/chat'])
+  }
   
  
 }

book-app/src/app/tab2/tab2.page.html

@@ -1,17 +1,19 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-     视野
+      视野
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
+
+
 <ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+  <!-- <ion-header collapse="condense">
     <ion-toolbar>
       <ion-title size="large">Tab 2</ion-title>
     </ion-toolbar>
-  </ion-header>
+  </ion-header> -->
 
   <app-show-novel></app-show-novel> <!-- 使用 ShowNovelComponent -->
 

book-app/src/app/tab3/tab3.page.html

@@ -1,15 +1,13 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 3
+      聊天
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content [fullscreen]="true">
-  <ion-list>
-    <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-    <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+  <!-- <ion-list>
     <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))">
       <ion-item>
         <ion-label> 小熊 </ion-label>
@@ -36,5 +34,6 @@
         <ion-reorder slot="end"></ion-reorder>
       </ion-item>
     </ion-reorder-group>
-  </ion-list>
+  </ion-list> -->
+  <app-show-chat></app-show-chat>
 </ion-content>

book-app/src/app/tab3/tab3.page.ts

@@ -4,13 +4,14 @@ import { IonHeader, IonToolbar, IonTitle, IonContent, IonLabel } from '@ionic/an
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { IonReorderGroup } from '@ionic/angular/standalone';
 import { ItemReorderEventDetail } from '@ionic/angular';
+import { ShowChatComponent } from '../show-chat/show-chat.component';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonReorder ,IonList,IonReorderGroup,IonItem,IonLabel  ,IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [IonReorder ,IonList,IonReorderGroup,IonItem,IonLabel  ,IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,ShowChatComponent],
 })
 export class Tab3Page {
   constructor() {}

book-app/src/app/tab4/tab4.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 4
+      我的
     </ion-title>
   </ion-toolbar>
 </ion-header>

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

@@ -42,6 +42,11 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../show-novel/show-novel.component').then((m) => m.ShowNovelComponent),
       },
+      {
+        path: 'chat',
+        loadComponent: () =>
+          import('../show-chat/show-chat.component').then((m) => m.ShowChatComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',