12.22

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

@@ -53,7 +53,7 @@
             <h2>{{ route.title }}</h2>
             <p>{{ route.description }}</p>
           </ion-label>
-          <ion-button slot="end" fill="outline" (click)="goToPage1()">去这里！</ion-button>
+          <ion-button slot="end" fill="outline" >去这里！</ion-button>
         </ion-item>
       </ion-list>
     </ion-card-content>

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

@@ -76,11 +76,6 @@ export class Tab1Page {
 
   constructor(private router: Router) {}
 
-  goToPage1(){
-    this.router.navigate(['/tabs/TengwangPavilion'])
-  }
-
-
   onSearch(event: any) {
     const query = event.target.value;
     // 处理搜索逻辑，例如过滤推荐路线或热门景点

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

@@ -1,17 +1,41 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
+<ion-header>
+  <ion-toolbar class="custom-toolbar">
+    <ion-title class="ion-text-center">AI助手</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content class="custom-content">
+  <ion-card class="input-card">
+    <ion-card-content>
+      <ion-input
+        class="custom-input"
+        name="text"
+        type="text"
+        [(ngModel)]="page2"
+        placeholder="请输入内容"
+        (focus)="clearPlaceholder()"
+      ></ion-input>
+    </ion-card-content>
+  </ion-card>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <!-- “请输入您的需求”盒子 -->
+  <ion-card class="input-card">
+    <ion-card-content>
+      <ion-textarea
+        [(ngModel)]="userPrompt"
+        placeholder="请输入文本提示词"
+        autoGrow="true"
+        class="custom-textarea"
+      ></ion-textarea>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block" class="custom-button">
+    旅游路线
+  </ion-button>
+
+  <!-- 展示：返回消息内容 -->
+  <div *ngIf="!isComplete" class="response-message">{{responseMsg}}</div>
+  <fm-markdown-preview *ngIf="isComplete" class="content-style" [content]="responseMsg"></fm-markdown-preview>
+</ion-content>

travel-app/src/app/tab2/tab2.page.scss

@@ -0,0 +1,28 @@
+.custom-toolbar {
+    --background: #c8b0af; // 设置页眉背景颜色为紫色
+    --color: white; // 设置页眉文字颜色为白色
+  }
+  
+  .custom-toolbar ion-title {
+    font-size: 1.5rem; // 可以根据需要调整字体大小
+  }
+  ion-content.custom-content {
+    --background: #ceaf9f; // 替换#your-color-code为你想要的颜色
+  }
+  .input-card {
+    margin: 10px;
+    ion-card-content {
+      padding: 10px;
+    }
+  }
+  .custom-button {
+    --background: #808080; // 灰色背景
+  }
+  .response-card {
+    margin: 10px;
+    --background: #ffffff; // 设置背景颜色为白色，可根据需要更改
+  }
+  
+  .response-message {
+    white-space: pre-wrap; // 保持回复中的格式
+  }

travel-app/src/app/tab2/tab2.page.spec.ts

@@ -1,4 +1,4 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { Tab2Page } from './tab2.page';
 
@@ -6,13 +6,17 @@ describe('Tab2Page', () => {
   let component: Tab2Page;
   let fixture: ComponentFixture<Tab2Page>;
 
-  beforeEach(async () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [Tab2Page],
+    }).compileComponents();
+
     fixture = TestBed.createComponent(Tab2Page);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+});

travel-app/src/app/tab2/tab2.page.ts

@@ -1,16 +1,68 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+
+// 假设的AI服务，需要替换为实际的飞码AI服务连接代码
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule
+  ]
 })
-export class Tab2Page {
-
+export class Tab2Page implements OnInit {
+  page2: string = "时间"; // 用户输入的游玩时间
+  userPrompt: string = "请描述您的需求"; // 用户输入的需求提示
+  responseMsg: string = ""; // 用于展示AI返回的消息内容
+  isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
   constructor() {}
 
+  ngOnInit() {}
+
+  // 更新游玩时间
+  page2Input(ev: any) {
+    this.page2 = ev.detail.value;
+  }
+
+  // 更新用户需求提示
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
+  }
+
+
+  clearPlaceholder() {
+    if (this.page2 === "时间") {
+      this.page2 = ""; // 清空输入框内容
+    }
+  }
+
+  // 发送消息到AI服务并获取响应
+  sendMessage() {
+    console.log("creating AI message...");
+
+    let PromptTemplate = `您作为一名专业的南昌导游，请您根据用户描述的需求，给出旅游路线，用户游玩的时间是${this.page2}。以下是用户的口述：${this.userPrompt}`;
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "你是一名友好的AI助手" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message:any)=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+      if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true
+      }
+    })
+  }
 }

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

@@ -1,17 +1,30 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
+    <ion-title>Chat</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-content>
+  <ion-list>
+    <ion-item *ngFor="let message of messages">
+      <ion-label [ngClass]="{'bot-message': message.from === 'bot', 'user-message': message.from === 'user'}">
+        {{message.text}}
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <ion-footer>
     <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
+      <ion-input [(ngModel)]="newMessage" placeholder="输入你的问题或需求"></ion-input>
+      <ion-button (click)="sendMessage()" expand="block">发送</ion-button>
     </ion-toolbar>
-  </ion-header>
+  </ion-footer>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+  @if(!isComplete){
+    <div>{{responseMsg}}</div>
+  }
+  <!-- 消息传输完成后，实时预览Markdown格式 -->
+  @if(isComplete){
+    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+  }
+</ion-content>

travel-app/src/app/tab3/tab3.page.scss

@@ -0,0 +1,16 @@
+.bot-message {
+    align-self: flex-start;
+    background-color: #e0e0e0;
+    border-radius: 10px;
+    padding: 10px;
+    max-width: 70%;
+    }
+    .user-message {
+    align-self: flex-end;
+    background-color: #0084ff;
+    color: white;
+    border-radius: 10px;
+    padding: 10px;
+    max-width: 70%;
+    }
+    

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

@@ -1,14 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { NavController } from '@ionic/angular';
+// 假设的AI服务，需要替换为实际的飞码AI服务连接代码
+import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule
+  ]
 })
-export class Tab3Page {
-  constructor() {}
-}
+
+export class Tab3Page  {
+
+  responseMsg: string = ""; // 用于展示AI返回的消息内容
+  isComplete:boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  messages = [
+    {
+      from: 'bot',
+      text: '您好！我是人工智能助手，很高兴为您服务。请问有什么可以帮助您的？'
+    },
+    {
+      from: 'user',
+      text: '你能帮我写一篇文章吗？'
+    },
+    {
+      from: 'user',
+      text: '有没有什么推荐的阅读材料？'
+    },
+    {
+      from: 'user',
+      text: '能帮我分析一下市场趋势吗？'
+    }
+  ];
+  newMessage = '';
+
+  constructor(private navCtrl: NavController) {}
+
+  // 发送消息到AI服务并获取响应
+  sendMessage() {
+    console.log("creating AI message...");
+
+    let PromptTemplate = ``;
+
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "你是一名友好的AI助手" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message:any)=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+      if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true
+      }
+    })
+  }
+}

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

@@ -21,11 +21,6 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../tab3/tab3.page').then((m) => m.Tab3Page),
       },
-      {
-        path: 'TengwangPavilion',
-        loadComponent: () =>
-          import('../tengwang-pavilion/tengwang-pavilion.component').then((m) => m.TengwangPavilionComponent),
-      },
       {
         
         path: '',

travel-app/src/main.ts

@@ -16,7 +16,7 @@ Parse.serverURL = "https://server.fmode.cn/parse";
 localStorage.setItem("NOVA_APIG_SERVER", 'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY24lMkZhcGklMkZhcGlnJTJG')
 
 // 注意：替换Token 根据Token设置Parse服务帐套权限
-Parse.User.become("r:E4KpGvTEto-139700736071732983416")
+Parse.User.become("r:E4KpGvTEto-139700736071734318549")
 
 
 bootstrapApplication(AppComponent, {