Bläddra i källkod

2024.7.10 10:45am

FelixTDT 4 månader sedan
förälder
incheckning
b76815921a

+ 1 - 1
src/app/home/home.page.ts

@@ -22,7 +22,7 @@ export class HomePage implements OnInit {
         this.newPostId = params["postId"];
       }
     });
-    this.fetchPosts();
+    // this.fetchPosts();
   }
 
   ionViewWillEnter() {

+ 22 - 11
src/app/tab1/tab1.page.html

@@ -1,17 +1,28 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 1
-    </ion-title>
+    <ion-title class="header-title">用提问探索世界</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content [scrollEvents]="true">
+  <div class="suggestions">
+    <ion-chip *ngFor="let suggestion of suggestions" (click)="useSuggestion(suggestion)">
+      <ion-label>{{ suggestion }}</ion-label>
+    </ion-chip>
+  </div>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  <div class="chat-container">
+    <div *ngFor="let message of messageList" class="message" [ngClass]="{'user-message': message.role === 'user', 'ai-message': message.role === 'ai'}">
+      <div class="message-bubble">{{ message.content }}</div>
+    </div>
+  </div>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar>
+    <ion-input [(ngModel)]="userInput" placeholder="输入您的问题"></ion-input>
+    <ion-button (click)="sendMessage()" slot="end">
+      <ion-icon name="send-outline"></ion-icon>
+    </ion-button>
+  </ion-toolbar>
+</ion-footer>

+ 51 - 0
src/app/tab1/tab1.page.scss

@@ -0,0 +1,51 @@
+.header-title {
+    font-family: 'Arial', sans-serif;
+    font-size: 1.5rem;
+    text-align: center;
+    padding: 10px;
+  }
+  
+  .suggestions {
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+  }
+  
+  .chat-container {
+    padding: 10px;
+    overflow-y: auto;
+  }
+  
+  .message {
+    display: flex;
+    margin-bottom: 10px;
+  }
+  
+  .user-message {
+    justify-content: flex-end;
+  }
+  
+  .ai-message {
+    justify-content: flex-start;
+  }
+  
+  .message-bubble {
+    max-width: 70%;
+    padding: 10px;
+    border-radius: 15px;
+    background-color: #e0e0e0;
+    color: #000;
+    word-wrap: break-word;
+  }
+  
+  .user-message .message-bubble {
+    background-color: #dcf8c6;
+  }
+  
+  ion-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+  }
+  

+ 49 - 5
src/app/tab1/tab1.page.ts

@@ -1,12 +1,56 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { TestChatCompletion, TestChatMessage } from '../../modules/aigc/chat/class-chat-completion';
 
 @Component({
   selector: 'app-tab1',
-  templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss']
+  templateUrl: './tab1.page.html',
+  styleUrls: ['./tab1.page.scss'],
 })
-export class Tab1Page {
+export class Tab1Page implements OnInit {
+  messageList: Array<TestChatMessage> = [];
+  userInput: string = '';
+  suggestions: string[] = ['巴西的首都是那个城市?', ' 设计一款有趣的编程游戏', '写一首赞美人与自然的诗歌']; // 示例建议词
 
-  constructor() {}
+  completion: TestChatCompletion;
+  constructor() { 
+    this.completion = new TestChatCompletion(this.messageList);
+  }
 
+  ngOnInit() {}
+
+  async sendMessage() {
+    if (this.userInput.trim() === '') return;
+    this.messageList.push({
+      role: 'user',
+      content: this.userInput
+    });
+    const userMessage = this.userInput;
+    this.userInput = '';
+    await this.completion.createCompletionByStream();
+    this.addAIResponse();
+  }
+
+  addAIResponse() {
+    let aiResponse = '这是AI的回复'; // 示例AI回复
+    let aiMessage: TestChatMessage = {
+      role: 'ai',
+      content: ''
+    };
+    this.messageList.push(aiMessage);
+
+    // 逐字显示AI的回复
+    let currentIndex = 0;
+    let interval = setInterval(() => {
+      if (currentIndex < aiResponse.length) {
+        aiMessage.content += aiResponse[currentIndex];
+        currentIndex++;
+      } else {
+        clearInterval(interval);
+      }
+    }, 100); // 调整这个值可以控制字出现的速度
+  }
+
+  useSuggestion(suggestion: string) {
+    this.userInput = suggestion;
+  }
 }

+ 31 - 4
src/app/tab2/tab2.page.ts

@@ -41,22 +41,49 @@ export class Tab2Page {
     }
   }
   invitationMessages = [  
-    { inviter: { username: 'Alice' }, question: 'How to use Ionic v7?', time: new Date() },  
+    { inviter: { username: 'Alice' }, question: 'How to use Ionic v7?', time: new Date(new Date().getTime() - 3600000) },  
+    { inviter: { username: '阿巴阿巴' }, question: '怎么说话?', time: new Date(new Date().getTime() - 7200000) },
+    { inviter: { username: 'JohnDoe' }, question: 'What is the best way to learn React?', time: new Date(new Date().getTime() - 14400000) },  
+    { inviter: { username: 'JaneSmith' }, question: 'Can you explain CSS Grid?', time: new Date(new Date().getTime() - 18000000) },  
+    { inviter: { username: 'Coder123' }, question: 'How to optimize JavaScript performance?', time: new Date(new Date().getTime() - 21600000) },  
+    { inviter: { username: 'TechGuru' }, question: 'What is Node.js used for?', time: new Date(new Date().getTime() - 25200000) },  
+    { inviter: { username: 'WebDevMaster' }, question: 'Best practices for responsive design?', time: new Date(new Date().getTime() - 28800000) },  
+    { inviter: { username: 'FrontendFanatic' }, question: 'What are Web Components?', time: new Date(new Date().getTime() - 32400000) },  
+    { inviter: { username: 'JSNinja' }, question: 'How to handle asynchronous code in JavaScript?', time: new Date(new Date().getTime() - 36000000) },  
+    { inviter: { username: 'DesignLover' }, question: 'What are the latest UI/UX trends?', time: new Date(new Date().getTime() - 39600000) }
+
+  
     // 更多邀请消息...  
   ];  
   
   systemMessages = [  
     { source: '系统', content: '您的新回答已被采纳!', time: new Date(new Date().getTime() - 3600000) },  
+    { source: '徽章小助手', content: '您获得了新的徽章!', time: new Date(new Date().getTime() - 3000000) },
+    { source: '系统', content: '您的新回答已被采纳!', time: new Date(new Date().getTime() - 3600000) }, 
+    { source: '系统', content: '您的新回答已被采纳!', time: new Date(new Date().getTime() - 3600000) }, 
+    { source: '系统', content: '您的新回答已被采纳!', time: new Date(new Date().getTime() - 3600000) }, 
+    { source: '徽章小助手', content: '您获得了新的徽章!', time: new Date(new Date().getTime() - 3000000) },
+    { source: '徽章小助手', content: '您获得了新的徽章!', time: new Date(new Date().getTime() - 3000000) },
     // 更多系统消息...  
   ];  
   
   privateMessages = [  
-    { user: { username: 'Bob' }, content: 'Hello, how are you?', time: new Date() },  
+    { user: { username: 'Bob' }, content: 'Hello, how are you?', time: new Date(new Date().getTime() - 3600000) },
+    { user: { username: 'Alice' }, content: 'Can you help me with my project?', time: new Date(new Date().getTime() - 7200000) },
+    { user: { username: 'Charlie' }, content: 'What is the best way to learn JavaScript?', time: new Date(new Date().getTime() - 10800000) },
+    { user: { username: 'Dave' }, content: 'Any tips for improving CSS skills?', time: new Date(new Date().getTime() - 14400000) },
+    { user: { username: 'Eve' }, content: 'How do I deploy a React app?', time: new Date(new Date().getTime() - 18000000) },
+    { user: { username: 'Frank' }, content: 'What are the latest trends in web development?', time: new Date(new Date().getTime() - 21600000) },
+    { user: { username: 'Grace' }, content: 'Can you explain the virtual DOM?', time: new Date(new Date().getTime() - 25200000) },
+    { user: { username: 'Hank' }, content: 'How to manage state in a React application?', time: new Date(new Date().getTime() - 28800000) },
+    { user: { username: 'Ivy' }, content: 'What is the difference between var, let, and const?', time: new Date(new Date().getTime() - 32400000) },
+    { user: { username: 'Jack' }, content: 'How do I set up a Node.js server?', time: new Date(new Date().getTime() - 36000000) }
+  
     // 更多私信...  
   ];  
   
   segmentChanged(event: CustomEvent) {  
     this.selectedSegment = event.detail.value;  
     this.generateTestData();
-  }  
-}
+  }
+}  

+ 0 - 26
src/modules/create-post/create-post.page.html

@@ -1,26 +0,0 @@
-<ion-header>
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button defaultHref="/home"></ion-back-button>
-      </ion-buttons>
-      <ion-title>创建帖子</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  
-  <ion-content>
-    <ion-item>
-      <ion-label position="floating">标题</ion-label>
-      <ion-input [(ngModel)]="title"></ion-input>
-    </ion-item>
-  
-    <ion-item>
-      <ion-label position="floating">正文</ion-label>
-      <ion-textarea [(ngModel)]="content"></ion-textarea>
-    </ion-item>
-  
-    <ion-button expand="block" (click)="uploadImage()">上传图片</ion-button>
-    <ion-img [src]="image" *ngIf="image"></ion-img>
-  
-    <ion-button expand="block" (click)="submitPost()">发布</ion-button>
-  </ion-content>
-  

+ 0 - 87
src/modules/create-post/create-post.page.ts

@@ -1,87 +0,0 @@
-import { Component } from '@angular/core';
-import { NavController, AlertController } from '@ionic/angular';
-import Parse from 'parse';
-
-@Component({
-  selector: 'app-create-post',
-  templateUrl: './create-post.page.html',
-  styleUrls: ['./create-post.page.scss'],
-})
-export class CreatePostPage {
-  title: string = '';
-  content: string = '';
-  image: string = '';
-
-  constructor(private navCtrl: NavController, private alertCtrl: AlertController) {}
-
-  async uploadImage() {
-    // 实现上传图片的逻辑
-    const alert = await this.alertCtrl.create({
-      header: '上传图片',
-      inputs: [
-        {
-          name: 'imageUrl',
-          type: 'url',
-          placeholder: '输入图片URL'
-        }
-      ],
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel'
-        },
-        {
-          text: '上传',
-          handler: (data) => {
-            this.image = data.imageUrl;
-          }
-        }
-      ]
-    });
-
-    await alert.present();
-  }
-
-  async submitPost() {
-    if (!this.title || !this.content) {
-      const alert = await this.alertCtrl.create({
-        header: '错误',
-        message: '标题和正文不能为空',
-        buttons: ['确定']
-      });
-      await alert.present();
-      return;
-    }
-
-    const currentUser = Parse.User.current();
-    if (!currentUser) {
-      const alert = await this.alertCtrl.create({
-        header: '错误',
-        message: '请先登录',
-        buttons: ['确定']
-      });
-      await alert.present();
-      return;
-    }
-
-    const Post240709 = Parse.Object.extend('Post240709');
-    const post = new Post240709();
-    post.set('title', this.title);  
-    post.set('content', this.content);
-    post.set('imageUrl', this.image);
-    post.set('author', currentUser);
-
-    try {
-      await post.save();
-      this.navCtrl.navigateBack('/home');
-    } catch (error) {
-      console.error('Error while creating post:', error);
-      const alert = await this.alertCtrl.create({
-        header: '错误',
-        message: '发布失败,请重试',
-        buttons: ['确定']
-      });
-      await alert.present();
-    }
-  }
-}

+ 1 - 0
web3-1234567

@@ -0,0 +1 @@
+Subproject commit e0b3f7dde28214e90b1cdc82f60e7d2af20ef1b0