feat:ai-chat

fashion-app/src/app/ai-chat-component/ai-chat-component.component.html

@@ -0,0 +1,42 @@
+
+<ion-header>
+  <ion-toolbar class="custom-toolbar" >
+    <ion-buttons slot="start">
+      <ion-button (click)="goBack()">
+        <ion-icon name="chevron-back-sharp" style="color: black; font-size:27px"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>hcx</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="openOptions()">
+        <ion-icon name="ellipsis-horizontal" style="color: black; font-size:27px"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-footer style="background-color: #99d75c;">
+  <ion-toolbar>
+    <div class="footer-content">
+      <ion-buttons>
+        <ion-button (click)="startVoice()" fill="clear">
+          <ion-icon name="mic-circle-outline" style="color: white; font-size: 40px;"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+
+      <ion-input placeholder="输入消息..." class="input-box" >
+        <ion-button (click)="openEmojiPicker()" fill="clear" slot="end">
+          <ion-icon name="happy-outline" style="color:#99d75c; font-size: 30px;" ></ion-icon> 
+        </ion-button>
+      </ion-input>
+
+      <ion-buttons>
+        <ion-button (click)="sendMessage()" fill="clear">
+          <div class="circle">
+          <ion-icon name="paper-plane" style="color: white; font-size: 27px;"></ion-icon>
+        </div>
+        </ion-button>
+      </ion-buttons>
+    </div>
+  </ion-toolbar>
+</ion-footer>

fashion-app/src/app/ai-chat-component/ai-chat-component.component.scss

@@ -0,0 +1,50 @@
+ion-toolbar {
+    height: 70px; /* 设置你想要的高度 */
+    --min-height: 60px; /* 设置最小高度 */
+    padding: 0; /* 去掉内边距 */
+    display: flex; /* 使用Flexbox布局 */
+    align-items: center; /* 垂直居中对齐 */
+    --background: transparent; /* 去除背景色 */
+  }
+  ion-header{
+    background-color: #99d75c ;
+    --background: transparent; /* 去除背景色 */
+  }
+  
+  ion-title {
+    margin: 0; /* 去掉默认的外边距 */
+    flex: 1; /* 让标题占据剩余空间 */
+    text-align: center; /* 让标题文本居中 */
+    font-size: 24px;
+  }
+
+/* 输入框样式 */
+.input-box {
+  background-color: white; /* 设置输入框背景为白色 */
+  border-radius: 8px; /* 圆角 */
+ 
+  height: 40px; /* 高度 */
+  flex: 1; /* 让输入框占据剩余空间 */
+}
+
+/* 底部内容容器 */
+.footer-content {
+  display: flex; /* 使用Flexbox布局 */
+  align-items: center; /* 垂直居中对齐 */
+  justify-content: center; /* 水平居中对齐 */
+  width: 100%; /* 宽度100% */
+}
+
+ion-buttons {
+  margin: 0 5px; /* 按钮之间的间距 */
+}
+
+.circle{
+width: 35px;
+height: 35px;
+border-radius: 50%;
+border:2px white solid;
+display: flex; /* 使用Flexbox布局 */
+align-items: center; /* 垂直居中对齐 */
+justify-content: center; /* 水平居中对齐 */
+}

fashion-app/src/app/ai-chat-component/ai-chat-component.component.spec.ts

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

fashion-app/src/app/ai-chat-component/ai-chat-component.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { IonButtons, IonHeader, IonToolbar,IonButton, IonIcon, IonTitle, IonInput, IonFooter } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBackSharp, ellipsisHorizontal, happyOutline, micCircleOutline, paperPlane } from 'ionicons/icons';
+
+addIcons({ chevronBackSharp,ellipsisHorizontal,micCircleOutline,happyOutline,paperPlane });
+
+@Component({
+  selector: 'app-ai-chat-component',
+  templateUrl: './ai-chat-component.component.html',
+  styleUrls: ['./ai-chat-component.component.scss'],
+  standalone: true,
+  imports: [
+    IonHeader,IonToolbar,IonButtons,IonButton,IonIcon,IonTitle,IonInput,IonFooter,
+  ],
+ 
+})
+export class AiChatComponentComponent  implements OnInit {
+
+  constructor(private navCtrl: NavController) { }
+
+  goBack() {
+    this.navCtrl.back(); // 返回上一页
+  }
+
+  openOptions() {
+    // 打开选项菜单的逻辑
+    console.log("打开选项菜单");
+  }
+
+  ngOnInit() {}
+
+
+
+  startVoice() {
+    // 启动语音输入的逻辑
+    console.log("开始语音输入");
+  }
+
+  openEmojiPicker() {
+    // 打开表情选择器的逻辑
+    console.log("打开表情选择器");
+  }
+
+  sendMessage() {
+    // 发送消息的逻辑
+    console.log("发送消息");
+  }
+
+}

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

@@ -46,6 +46,12 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../page-bmi/page-bmi.component').then((m) => m.PageBmiComponent),
       },
+      {
+        path: 'chat',
+        loadComponent: () =>
+          import('../ai-chat-component/ai-chat-component.component').then((m) => m.AiChatComponentComponent),
+      },
+      
       {
         path: '',
         redirectTo: '/tabs/tab1',