AI

package.json

@@ -28,6 +28,7 @@
     "@capacitor/status-bar": "6.0.0",
     "@ionic/angular": "^8.0.0",
     "ionicons": "^7.0.0",
+    "node-nlp": "^4.27.0",
     "parse": "^5.3.0",
     "rxjs": "~7.8.0",
     "swiper": "^11.1.4",

src/app/aichat/aichat-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AIChatPage } from './aichat.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AIChatPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AIChatPageRoutingModule {}

src/app/aichat/aichat.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AIChatPageRoutingModule } from './aichat-routing.module';
+
+import { AIChatPage } from './aichat.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AIChatPageRoutingModule
+  ],
+  declarations: [AIChatPage]
+})
+export class AIChatPageModule {}

src/app/aichat/aichat.page.html

@@ -0,0 +1,26 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-back-button slot="start" defaultHref="/tabs/tab3"></ion-back-button>
+    <ion-title>AIChat</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list lines="none">
+    <ion-item *ngFor="let message of chatMessages">
+      <ion-avatar slot="start">
+        <ion-img [src]="message.senderAvatar"></ion-img>
+      </ion-avatar>
+      <ion-label>
+        <h3>{{ message.sender }}</h3>
+        <p>{{ message.content }}</p>
+        <p class="message-time">{{ message.timestamp | date: 'medium' }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-item>
+    <ion-input placeholder="请输入消息" [(ngModel)]="newMessage"></ion-input>
+    <ion-button slot="end" (click)="sendMessage()">发送</ion-button>
+  </ion-item>
+</ion-content>

src/app/aichat/aichat.page.scss

@@ -0,0 +1,14 @@
+page-aichat {
+    ion-content {
+      ion-item {
+        ion-avatar {
+          width: 40px;
+          height: 40px;
+        }
+        .message-time {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+    }
+  }

src/app/aichat/aichat.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AIChatPage } from './aichat.page';
+
+describe('AIChatPage', () => {
+  let component: AIChatPage;
+  let fixture: ComponentFixture<AIChatPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AIChatPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/aichat/aichat.page.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-aichat',
+  templateUrl: './aichat.page.html',
+  styleUrls: ['./aichat.page.scss'],
+})
+export class AIChatPage implements OnInit {
+
+  constructor() { }
+  chatMessages: any[] = [
+    { sender: 'AI Bot', senderAvatar: 'assets/img/d.webp', content: '欢迎来到AI对话', timestamp: new Date() }
+  ];
+  newMessage: string = '';
+
+  sendMessage() {
+    if (this.newMessage.trim() !== '') {
+      this.chatMessages.push({ sender: 'User', senderAvatar: 'assets/user-avatar.png', content: this.newMessage, timestamp: new Date() });
+      this.newMessage = ''; // 清空输入框
+    }
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/app-routing.module.ts

@@ -60,6 +60,10 @@ const routes: Routes = [
     },
  {
     path: 'creator',
     loadChildren: () => import('./creator/creator.module').then( m => m.CreatorPageModule)
+  },
+  {
+    path: 'aichat',
+    loadChildren: () => import('./aichat/aichat.module').then( m => m.AIChatPageModule)
   }
 
 

src/app/tab3/tab3.page.html

@@ -1,5 +1,5 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
     <ion-title>
       消息
     </ion-title>
@@ -11,7 +11,7 @@
 </ion-header>
 
 <ion-content>
-<div style="background-image: url(assets/img/c.jpg);">
+<div style="background-color: rgb(0, 132, 255);">
   <ion-searchbar placeholder="输入关键字搜索"></ion-searchbar>
   <ion-card class="card">
     <ion-card-header >
@@ -67,8 +67,7 @@
     </ion-item>
     <ion-item>
       <ion-input placeholder="添加评论" ></ion-input>
-      <ion-button slot="start" (click)="sendComment()"></ion-button>
-      <ion-button slot="end" (click)="sendComment()">
+          <ion-button slot="end" (click)="sendComment()">
         <ion-icon name="send"></ion-icon>
       </ion-button>
     </ion-item>
@@ -159,4 +158,9 @@
    </div>
   </div>
 </div>
+<ion-item>一键AI
+  <ion-button slot="end" (click)="goToAIChatPage()">
+    <ion-icon name="logo-android"></ion-icon>
+  </ion-button>
+</ion-item>
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -14,7 +14,7 @@ ion-avatar {
   width: 365px;
   height: 250px;
   background-color: #4158D0;
-  background-image: linear-gradient(43deg, #4158D0 0%, #0c8dd8 46%, #baff70 100%);
+  background-image: linear-gradient(43deg, #41d0d0 0%, #0c94d8 46%, #baff70 100%);
   border-radius: 8px;
   color: white;
   overflow: hidden;

src/app/tab3/tab3.page.ts

@@ -73,4 +73,7 @@ export class Tab3Page {
   isUserFollowed(userId: number): boolean {
     return this.followedUsers.includes(userId);
   }
+  goToAIChatPage() {
+    this.router.navigate(['/aichat']); // 导航到AI对话页面
+  }
 }