chat-panel;chat-info悬浮AI聊天组件完成

CraftsMart-angular/src/app/app.module.ts

@@ -11,9 +11,11 @@ import { PageCartComponent } from 'src/modules/craftsmart/page-cart/page-cart.co
 import { PageMineComponent } from 'src/modules/craftsmart/page-mine/page-mine.component';
 import { NavTabsComponent } from 'src/modules/craftsmart/nav-tabs/nav-tabs.component';
 import { NgModule ,CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+
 import { PageDiscoverComponent } from 'src/modules/craftsmart/page-discover/page-discover.component';
 import { PageLoginComponent } from 'src/modules/craftsmart/page-login/page-login.component';
 import { EditInfoComponent } from 'src/modules/craftsmart/edit-info/edit-info.component';
+import { PageChatPanelComponent } from 'src/modules/craftsmart/page-chat-panel/page-chat-panel.component';
 // import { PageLoginComponent } from 'src/modules/user/page-login/page-login.component';
 
 
@@ -25,6 +27,9 @@ const routes: Routes = [
   { path: 'mine', component: PageMineComponent },
   { path: 'login', component: PageLoginComponent },
   { path: 'edit-info', component: EditInfoComponent },
+  { path: 'page-chat-panel', component: PageChatPanelComponent },
+
+
 
 
 
@@ -36,7 +41,7 @@ const routes: Routes = [
 @NgModule({
   declarations: [
     AppComponent,
-    NavTabsComponent
+    NavTabsComponent,
   ],
   imports: [
     BrowserModule,

CraftsMart-angular/src/modules/craftsmart/chat-info/chat-info.component.html

@@ -0,0 +1,5 @@
+<ion-fab slot="fixed" vertical="bottom" horizontal="end" style="margin:0 20px 100px 0;">
+    <ion-fab-button (click)="openChatPanel()">
+      <ion-icon name="add"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>

CraftsMart-angular/src/modules/craftsmart/chat-info/chat-info.component.scss

@@ -0,0 +1,8 @@
+ion-fab-button {
+    --background: #4a4740;
+    --background-activated: #303030;
+    --background-hover: #2d2d2c;
+    --border-radius: 15px;
+    --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+    --color: rgb(255, 255, 255);
+  }

CraftsMart-angular/src/modules/craftsmart/chat-info/chat-info.component.spec.ts

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

CraftsMart-angular/src/modules/craftsmart/chat-info/chat-info.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import * as Parse from 'parse';
+import { ModalController } from '@ionic/angular';
+import { PageChatPanelComponent } from '../page-chat-panel/page-chat-panel.component'; // 引入PageChatPanelComponent
+
+@Component({
+  selector: 'app-chat-info',
+  templateUrl: './chat-info.component.html',
+  styleUrls: ['./chat-info.component.scss']
+})
+export class ChatInfoComponent {
+
+  chatPanelOpen: boolean = false; // 添加一个标记来跟踪聊天面板的打开状态
+
+
+  constructor(private router: Router,private modalController: ModalController) {}
+
+  async openChatPanel() {
+    if (this.chatPanelOpen) {
+      const modal = await this.modalController.getTop();
+      if (modal) {
+        modal.dismiss();
+      }
+      this.chatPanelOpen = false;
+    } else {
+      const modal = await this.modalController.create({
+        component: PageChatPanelComponent,
+        cssClass: 'chat-panel-modal',
+        componentProps: {}
+      });
+      modal.style.height = '40vh'; // 设置弹框高度为50%
+      modal.style.margin = '40vh 0 0 40vw'; // 设置弹框高度为50%
+
+      await modal.present();
+      this.chatPanelOpen = true;
+
+    }
+
+  }
+
+}

CraftsMart-angular/src/modules/craftsmart/craftsmart-routing.module.ts

@@ -9,6 +9,8 @@ import { PageItemDetailComponent } from './page-item-detail/page-item-detail.com
 import { PageChatPanelComponent } from './page-chat-panel/page-chat-panel.component';
 import { PageLoginComponent } from './page-login/page-login.component';
 import { EditInfoComponent } from './edit-info/edit-info.component';
+import { ChatInfoComponent } from './chat-info/chat-info.component';
+
 
 const routes: Routes = [
   {
@@ -19,6 +21,7 @@ const routes: Routes = [
       { path:"page-mine", component:PageMineComponent },
       { path:"page-login", component:PageLoginComponent },
       { path:"edit-info", component:EditInfoComponent},
+      { path:"chat-info", component:ChatInfoComponent},
       { path:"page-discover", component:PageDiscoverComponent },
       { path:"page-item-detail/:name", component:PageItemDetailComponent },
       {path:"page-chat-panel",component:PageChatPanelComponent},

CraftsMart-angular/src/modules/craftsmart/craftsmart.module.ts

@@ -12,6 +12,7 @@ import { PageChatPanelComponent } from './page-chat-panel/page-chat-panel.compon
 import { FormsModule } from '@angular/forms';
 import { PageLoginComponent } from './page-login/page-login.component';
 import { EditInfoComponent } from './edit-info/edit-info.component';
+import { ChatInfoComponent } from './chat-info/chat-info.component';
 
 
 @NgModule({
@@ -24,6 +25,7 @@ import { EditInfoComponent } from './edit-info/edit-info.component';
     PageChatPanelComponent,
     PageLoginComponent,
     EditInfoComponent,
+    ChatInfoComponent,
     
   ],
   imports: [

CraftsMart-angular/src/modules/craftsmart/home/home.component.html

@@ -53,4 +53,11 @@
   </div>
 </div>
 
+<!-- <ion-fab slot="fixed" vertical="bottom" horizontal="end" style="margin:0 20px 100px 0;">
+  <ion-fab-button (click)="openChatPanel()">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab> -->
+<app-chat-info></app-chat-info>
+
 </div>

CraftsMart-angular/src/modules/craftsmart/home/home.component.scss

@@ -124,5 +124,12 @@ overflow:scroll;
      }
   }
 }
-
+// ion-fab-button {
+//   --background: #4a4740;
+//   --background-activated: #303030;
+//   --background-hover: #2d2d2c;
+//   --border-radius: 15px;
+//   --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+//   --color: rgb(255, 255, 255);
+// }
 

CraftsMart-angular/src/modules/craftsmart/home/home.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import * as Parse from 'parse';
+import { ModalController } from '@ionic/angular';
+import { PageChatPanelComponent } from '../page-chat-panel/page-chat-panel.component'; // 引入PageChatPanelComponent
 
 interface Item {
   name: string;
@@ -17,8 +19,10 @@ interface Item {
 export class HomeComponent implements OnInit {
   items: Item[] = [];
   currentContent: string = 'module-one';
+  chatPanelOpen: boolean = false; // 添加一个标记来跟踪聊天面板的打开状态
 
-  constructor(private router: Router) {}
+
+  constructor(private router: Router,private modalController: ModalController) {}
 
   ngOnInit() {
     this.getData();
@@ -65,4 +69,27 @@ export class HomeComponent implements OnInit {
     this.currentContent = content;
     this.getData();
   }
+
+  async openChatPanel() {
+    if (this.chatPanelOpen) {
+      const modal = await this.modalController.getTop();
+      if (modal) {
+        modal.dismiss();
+      }
+      this.chatPanelOpen = false;
+    } else {
+      const modal = await this.modalController.create({
+        component: PageChatPanelComponent,
+        cssClass: 'chat-panel-modal',
+        componentProps: {}
+      });
+      modal.style.height = '40vh'; // 设置弹框高度为50%
+      modal.style.margin = '40vh 0 0 40vw'; // 设置弹框高度为50%
+
+      await modal.present();
+      this.chatPanelOpen = true;
+
+    }
+
+  }
 }

CraftsMart-angular/src/modules/craftsmart/page-cart/page-cart.component.html

@@ -93,6 +93,8 @@
     </ion-col>
   </ion-row>
 </ion-grid>
+<app-chat-info *ngIf="currentContent === 'cart-three'"></app-chat-info>
+
 
 <!-- <div class="content-wrapper">
   <div class="item-container" >

CraftsMart-angular/src/modules/craftsmart/page-chat-panel/page-chat-panel.component.html

@@ -1,53 +1,57 @@
-<div class="navigation-bar">
-    <div>
-        <button class="back-button" (click)="backIconClicked()">
-            <svg t="1699446776660" class="back-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2306" width="128" height="128"><path d="M532.526499 904.817574L139.506311 511.797385 532.526499 118.777197c12.258185-12.258185 12.432147-32.892131-0.187265-45.51052-12.707416-12.707416-32.995485-12.703323-45.511543-0.187265L75.166957 484.739123c-7.120165 7.120165-10.163477 17.065677-8.990768 26.624381-1.500167 9.755178 1.5104 20.010753 8.990768 27.491121l411.660734 411.660734c12.258185 12.258185 32.892131 12.432147 45.511543-0.187265 12.707416-12.707416 12.7023-32.995485 0.187265-45.51052z" p-id="2307" fill="#2c2c2c"></path></svg>
-         </button>
-         <button class="share-button">
-            <svg t="1699446835212" class="share-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3541" width="128" height="128"><path d="M874.9 459.4c-18.8 0-34 15.2-34 34v355.7c0 18.6-15.5 33.7-34.5 33.7H181.5c-19 0-34.5-15.1-34.5-33.7V232.3c0-18.6 15.5-33.7 34.5-33.7H541c18.8 0 34-15.2 34-34s-15.2-34-34-34H181.5C125 130.6 79 176.2 79 232.3v616.8c0 56 46 101.7 102.5 101.7h624.9c56.5 0 102.5-45.6 102.5-101.7V493.4c0-18.8-15.2-34-34-34z" fill="#2c2c2c" p-id="3542"></path><path d="M885.5 82.7H657.1c-18.8 0-34 15.2-34 34s15.2 34 34 34h169.7L358.5 619.1c-13.3 13.3-13.3 34.8 0 48.1 6.6 6.6 15.3 10 24 10s17.4-3.3 24-10l470-470v169.7c0 18.8 15.2 34 34 34s34-15.2 34-34V141.5c0.1-32.4-26.4-58.8-59-58.8z" fill="#2c2c2c" p-id="3543"></path></svg>
-         </button>
-    </div>
-</div>
-
-<div class="page">
-    <div class="leftnav col" *ngIf="false">
-        <div class="avatar row">头像</div>
-
-        <div class="tablist row">
-            <div class="tab-button">消息</div>
-            <div class="tab-button">邮件</div>
-            <div class="tab-button">文档</div>
-        </div>
 
-        <div class="footer row">
-            <div class="tab-button">设置</div>
+    <div class="navigation-bar">
+        <div>
+            <button class="back-button" (click)="backIconClicked()">
+                <svg t="1699446776660" class="back-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2306" width="128" height="128"><path d="M532.526499 904.817574L139.506311 511.797385 532.526499 118.777197c12.258185-12.258185 12.432147-32.892131-0.187265-45.51052-12.707416-12.707416-32.995485-12.703323-45.511543-0.187265L75.166957 484.739123c-7.120165 7.120165-10.163477 17.065677-8.990768 26.624381-1.500167 9.755178 1.5104 20.010753 8.990768 27.491121l411.660734 411.660734c12.258185 12.258185 32.892131 12.432147 45.511543-0.187265 12.707416-12.707416 12.7023-32.995485 0.187265-45.51052z" p-id="2307" fill="#2c2c2c"></path></svg>
+             </button>
+             <button class="share-button">
+                <svg t="1699446835212" class="share-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3541" width="128" height="128"><path d="M874.9 459.4c-18.8 0-34 15.2-34 34v355.7c0 18.6-15.5 33.7-34.5 33.7H181.5c-19 0-34.5-15.1-34.5-33.7V232.3c0-18.6 15.5-33.7 34.5-33.7H541c18.8 0 34-15.2 34-34s-15.2-34-34-34H181.5C125 130.6 79 176.2 79 232.3v616.8c0 56 46 101.7 102.5 101.7h624.9c56.5 0 102.5-45.6 102.5-101.7V493.4c0-18.8-15.2-34-34-34z" fill="#2c2c2c" p-id="3542"></path><path d="M885.5 82.7H657.1c-18.8 0-34 15.2-34 34s15.2 34 34 34h169.7L358.5 619.1c-13.3 13.3-13.3 34.8 0 48.1 6.6 6.6 15.3 10 24 10s17.4-3.3 24-10l470-470v169.7c0 18.8 15.2 34 34 34s34-15.2 34-34V141.5c0.1-32.4-26.4-58.8-59-58.8z" fill="#2c2c2c" p-id="3543"></path></svg>
+             </button>
         </div>
-
     </div>
-
-    <div class="chatlist col" *ngIf="false">
-
-    </div>
-
-    <div class="chatbox col">
-        <div class="msglist">
-            <ng-container *ngFor="let msg of messageList">
-                <div class="msgbox">
-                    {{msg?.content}}
-                </div>
-            </ng-container>
+    
+    <ion-content scrollY="true">
+    <div class="page">
+        <div class="leftnav col" *ngIf="false">
+            <div class="avatar row">头像</div>
+    
+            <div class="tablist row">
+                <div class="tab-button">消息</div>
+                <div class="tab-button">邮件</div>
+                <div class="tab-button">文档</div>
+            </div>
+    
+            <div class="footer row">
+                <div class="tab-button">设置</div>
+            </div>
+    
         </div>
-        <!-- 底部:用户输入 -->
-        <div class="footer">
-            <ion-list>
-                <ion-item>
-                <ion-textarea  [(ngModel)]="userInput"
-                labelPlacement="fixed"
-                 placeholder="请输入详细提示词"></ion-textarea>
-                 <ion-button (click)="send()">发送</ion-button>
-            </ion-item>
-        </ion-list>
-            
+    
+        <div class="chatlist col" *ngIf="false">
+    
+        </div>
+    
+        <div class="chatbox col">
+            <div class="msglist">
+                <ng-container *ngFor="let msg of messageList">
+                    <div class="msgbox">
+                        {{msg?.content}}
+                    </div>
+                </ng-container>
+            </div>
+            <!-- 底部:用户输入 -->
+            <div class="footer">
+                <ion-list>
+                    <ion-item>
+                    <ion-textarea  [(ngModel)]="userInput"
+                    labelPlacement="fixed"
+                     placeholder="请输入详细提示词"></ion-textarea>
+                     <ion-button (click)="send()">发送</ion-button>
+                </ion-item>
+            </ion-list>
+                
+            </div>
         </div>
     </div>
-</div>
+</ion-content>
+

CraftsMart-angular/src/modules/craftsmart/page-chat-panel/page-chat-panel.component.scss

@@ -38,13 +38,28 @@
       }
     }
   }
-
+  .page {
+    display: flex;
+    height: 100vh;
+  }
+  .msglist {
+    flex: 1;
+    padding: 10px;
+    margin-bottom: 105px;
+    overflow-y: auto;
+  }
+  
+  .msgbox {
+    background-color: #f1f1f1;
+    padding: 10px;
+    margin-bottom: 10px;
+  }
   .footer {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
-    padding: 10px;
+    padding:8px 8px;
     background-color: #f1f1f1;
   }
   
@@ -61,22 +76,6 @@
     flex-direction: column;
   }
   
-  .msglist {
-    flex: 1;
-    padding: 10px;
-    overflow-y: auto;
-  }
-  
-  .msgbox {
-    background-color: #f1f1f1;
-    padding: 10px;
-    margin-bottom: 10px;
-  }
-
-  .page {
-    display: flex;
-    height: 100vh;
-  }
   
   .leftnav {
     width: 250px;

CraftsMart-angular/src/modules/craftsmart/page-chat-panel/page-chat-panel.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component,OnInit } from '@angular/core';
 import { TestChatCompletion,TestChatMessage } from '../class-chat-completion';
 import { Router } from '@angular/router';
 

CraftsMart-angular/src/modules/craftsmart/page-item-detail/page-item-detail.component.html

@@ -16,6 +16,8 @@
         <p>{{ selectedItem.description }}</p>
     </div>
   </div>
+  <app-chat-info></app-chat-info>
+
   
   
 

CraftsMart-angular/src/modules/craftsmart/page-mine/page-mine.component.html

@@ -38,7 +38,7 @@
   <ion-card-header>
     <ion-card-title>{{user1?.get("username") || '未登录'}}</ion-card-title>
     <ion-card-subtitle *ngIf="!user1?.id">请您登陆后继续使用</ion-card-subtitle>
-    <ion-card-subtitle *ngIf="user1?.id">{{user1?.get("name")}}-{{user1?.get("username")}}</ion-card-subtitle>
+    <ion-card-subtitle *ngIf="user1?.id">{{user1?.get("name")}}-{{user1?.get("gender")}}</ion-card-subtitle>
   </ion-card-header>
 
   <!-- 新增：根据用户状态，显示登录/登出按钮，执行跳转或登出函数 -->