feat

tailor-app/myapp/src/app/aichat/aichat.component.html

@@ -0,0 +1,11 @@
+<ion-content>
+    <!-- 文本域：生成提示词 -->
+     <h1>AI客服</h1>
+    <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+  
+    <!-- 按钮：执行消息生成函数 -->
+    <ion-button (click)="sendMessage()" expand="block">发送消息</ion-button>
+    
+    <!-- 展示：返回消息内容 -->
+    <div>{{responseMsg}}</div>
+  </ion-content>

tailor-app/myapp/src/app/aichat/aichat.component.scss

@@ -0,0 +1,122 @@
+.header-space {
+  height: 40px; /* 留出空白区域的高度 */
+}
+
+ion-title {
+    flex: 1; // 使标题占据可用空间
+    text-align: left; // 确保文字左对齐
+    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-top: 5px;
+    color: rgb(71, 68, 68);
+  }
+  
+  ion-header {
+    background-color: #3880ff; // 设置头部背景色
+  }
+  
+  
+  ion-card {
+    margin: 10px; // 设置卡片之间的间距
+    border-radius: 10px; // 设置卡片圆角
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
+  }
+  
+  ion-card-header {
+    background-color: #d8e5fa; // 设置头部背景色
+    color: white; // 设置头部文字颜色
+  }
+  
+  ion-card-title {
+    font-size: 1.2em; // 设置卡片标题字体大小
+    font-weight: bold; // 设置卡片标题字体加粗
+  }
+  
+  ion-item {
+    --ion-item-background: transparent; // 设置列表项背景透明
+  }
+  
+  ion-label {
+    color: #333; // 设置标签文字颜色
+  }
+  
+  
+  
+  h2 {
+    font-size: 1em; // 设置二级标题字体大小
+    margin: 0; // 去掉默认外边距
+  }
+  
+  p {
+    font-size: 0.9em; // 设置段落字体大小
+    color: #666; // 设置段落文字颜色
+  }
+  
+  ion-list {
+    padding: 0; // 去掉列表内边距
+  }
+  
+  ion-card-content {
+    padding: 10px; // 设置卡片内容内边距
+  }
+  
+  ion-button {
+    --background: #3880ff; // 设置按钮背景色
+    --color: white; // 设置按钮文字颜色
+    margin-top: 10px; // 设置按钮与上方内容的间距
+    border-radius: 20px; // 设置按钮圆角
+  }
+  
+  
+  .chat-partner-area {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 15px;
+  
+    .avatar {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      margin-right: 15px;
+    }
+  
+    .description {
+      flex-grow: 1;
+    }
+  
+    ion-button {
+      border-radius: 20px;
+    }
+  }
+  
+  .role-interaction-area {
+    h2 {
+      margin-bottom: 15px;
+    }
+  
+    .role-container {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+      border: 1px solid #ccc;
+      border-radius: 10px;
+      padding: 15px;
+  
+      .avatar {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        margin-right: 10px;
+      }
+  
+      .role-description {
+        flex-grow: 1;
+      }
+  
+      ion-button {
+        border-radius: 20px;
+      }
+    }
+  }

tailor-app/myapp/src/app/aichat/aichat.component.spec.ts

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

tailor-app/myapp/src/app/aichat/aichat.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonInput, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonTextarea } from '@ionic/angular/standalone';
+import { FmodeChatCompletion } from 'fmode-ng';
+
+@Component({
+  selector: 'app-aichat',
+  templateUrl: './aichat.component.html',
+  styleUrls: ['./aichat.component.scss'],
+  standalone: true,
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
+    IonTextarea,IonInput
+    ],
+})
+export class AIchatComponent  implements OnInit {
+
+  constructor() {}
+  ngOnInit(){}
+  // 用户输入提示词
+   userPrompt:string = "请问您有什么问题吗"
+  promptInput(ev:any){
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg:any = ""
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  sendMessage(){
+    console.log("create")
+    let PromptTemple = `
+    您作为一名专业的服装设计师，请您根据客户描述的问题或需求，给出详细的解答。
+    以下是用户的描述：${this.userPrompt}`
+    let completion = new FmodeChatCompletion([
+      {role:"system",content:""},
+      {role:"user",content:PromptTemple}
+    ])
+    completion.sendCompletion().subscribe((message:any)=>{
+      // 打印消息体
+      console.log(message.content)
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content
+    })
+  }
+
+}

tailor-app/myapp/src/app/community/community.page.html

@@ -1,42 +1,30 @@
+<!-- community.page.html -->
 <ion-header>
-  <ion-toolbar>
-    <ion-title>
-      帖子
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
- 
-<ion-content>
-  <div class="waterfall">
-    <div class="post-item" style="position: relative;">
-      <img src="assets/img/jj.png" alt="Post Image" class="img" />
-      <h3> post.title </h3>
-      <p> post.content</p>
-      <ion-chip style="margin: 0;">
-        <ion-avatar>
-          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-        </ion-avatar>
-        <ion-label>Chip Avatar</ion-label>
-      </ion-chip>
-      <div style="display: flex; align-items: center;position: absolute;bottom: 15px;right: 15px;">
-        <ion-icon name="heart" style="font-size: 16px;"></ion-icon>
-        <span style="margin-left: 4px;font-size: 16px;">11</span>
-      </div>
-        
-    </div>
-    <div class="post-item" style="">
-      <img src="assets/img/shi.png" alt="Post Image" />
-      <h3> post.title </h3>
-      <p> post.content</p>
-    </div>
-    <div class="post-item" style="">
-      <img src="assets/img/shi.png" alt="Post Image" />
-      <h3> post.title </h3>
-      <p> post.content</p>
-    </div>
-    
-
-    
-  </div>
+    <ion-toolbar>
+      <ion-title>社区</ion-title>
+    </ion-toolbar>
+  </ion-header>
   
-</ion-content>
+  <ion-content>
+    <ion-list>
+      <!-- 评论列表 -->
+      <ion-card *ngFor="let comment of comments">
+        <ion-card-header>
+          <ion-card-title>{{ comment.username }}</ion-card-title>
+          <ion-card-subtitle>{{ comment.date | date:'short' }}</ion-card-subtitle>
+        </ion-card-header>
+        <ion-card-content>
+          <p>{{ comment.text }}</p>
+        </ion-card-content>
+      </ion-card>
+    </ion-list>
+  
+    <!-- 评论输入区域 -->
+    <ion-item>
+      <ion-input [(ngModel)]="newComment" placeholder="写下你的评论..."></ion-input>
+      <ion-button (click)="addComment()" color="primary">
+        <ion-icon slot="icon-only" name="send"></ion-icon>
+        <ion-label>发送</ion-label>
+      </ion-button>
+    </ion-item>
+  </ion-content>

tailor-app/myapp/src/app/community/community.page.scss

@@ -1,30 +1,69 @@
-/* src/pages/posts/posts.page.scss */
-.waterfall {
-    column-count: 2; // 设置列数
-    column-gap: 16px; // 设置列间距
-    width: 100%;
-  }
-  
-  .post-item {
-    break-inside: avoid; // 防止内容在列中拆分
-    margin-bottom: 16px; // 设置项目间距
-    padding: 8px;
-    background: #fff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-  }
-  
-  .img {
-    width: 100%;
-    height: auto;
-    border-radius: 8px 8px 0 0;
-  }
-  
-  .post-item h3 {
-    margin: 16px 0 8px;
-  }
-  
-  .post-item p {
-    color: #666;
-  }
-  
+/* community.page.scss */
+ion-header {
+  background-color: #4a90e2; /* 设置页头背景色 */
+  color: white;
+}
+
+ion-toolbar {
+  --background: #4a90e2; /* 设置工具栏背景色 */
+}
+
+ion-title {
+  font-weight: bold;
+}
+
+ion-content {
+  background-color: #f5f5f5; /* 设置内容背景色 */
+}
+
+ion-card {
+  margin: 10px 0;
+  border-radius: 10px; /* 圆角 */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  background-color: white; /* 卡片背景色 */
+}
+
+ion-card-header {
+  background-color: #e1f5fe; /* 卡片头部背景色 */
+  border-top-left-radius: 10px; /* 圆角 */
+  border-top-right-radius: 10px; /* 圆角 */
+  padding: 10px; /* 内边距 */
+}
+
+ion-card-title {
+  font-size: 1.2em; /* 标题字体大小 */
+  color: #007aff; /* 标题颜色 */
+}
+
+ion-card-subtitle {
+  font-size: 0.9em; /* 副标题字体大小 */
+  color: #666; /* 副标题颜色 */
+}
+
+ion-card-content {
+  margin-top: 20px;
+  font-size: 1em; /* 内容字体大小 */
+  color: #333; /* 内容颜色 */
+}
+
+ion-item {
+  padding: 10px;
+  background-color: #fff; /* 输入框背景色 */
+  border-radius: 5px; /* 圆角 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+}
+
+ion-input {
+  flex: 1;
+}
+
+ion-button {
+  --background: #4a90e2; /* 按钮背景色 */
+  --color: white; /* 按钮文字颜色 */
+  border-radius: 5px; /* 按钮圆角 */
+  margin-left: 5px; /* 按钮与输入框的间距 */
+}
+
+ion-icon {
+  color: white; /* 图标颜色 */
+}

tailor-app/myapp/src/app/community/community.page.ts

@@ -1,37 +1,42 @@
-
-import { Component, NgModule, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { IonButton, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonIcon, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonCardContent,IonLabel } from '@ionic/angular/standalone';
 import { FormsModule } from '@angular/forms';
-import { addIcons } from 'ionicons';
-import { camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline,heart,heartOutline} from 'ionicons/icons';
-import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonLabel, IonItem, IonList, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemOption, IonItemSliding, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip,IonTabButton,IonListHeader,ItemReorderEventDetail, IonTabBar, IonTabs,IonCardSubtitle,IonImg,IonBadge   } from '@ionic/angular/standalone';
-addIcons({camera,trendingUpOutline,sparklesOutline,cloudyOutline,diceOutline,heart,heartOutline})
-
-import * as echarts from 'echarts';
+import { CommonModule } from '@angular/common';
 @Component({
   selector: 'app-community',
   templateUrl: './community.page.html',
   styleUrls: ['./community.page.scss'],
   standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton,  IonLabel, IonLabel, IonList, IonItem, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions,IonInput,IonCheckbox,IonRadio,IonToggle,IonRadioGroup,IonSearchbar,IonSegment,IonSegmentButton,IonDatetime,IonFooter,IonCardContent,IonCardTitle,IonCardHeader,IonCard,IonCol,IonRow,IonGrid,IonChip,IonTabButton,IonTabBar,IonTabs,IonListHeader,IonCardSubtitle,IonImg,IonBadge ]
-
+  imports: [IonHeader,IonToolbar,IonTitle,IonContent,IonList,IonCard,IonCardHeader,
+    IonCardTitle,IonCardSubtitle,IonItem,IonInput,IonButton,IonIcon,IonCardContent,
+    FormsModule,CommonModule,IonLabel
+    ],
 })
-
-
 export class CommunityPage implements OnInit {
-  public  posts = [
-    { imageUrl: 'assets/img/shi.png', title: 'title', content: 'content' },
-    { imageUrl: 'assets/img/shi.png', title: 'title', content: 'content' },
-   
-    
-  ];
-  
-  constructor() { }
+  comments: { username: string; date: Date; text: string }[] = [];
+  newComment: string = '';
+
+  constructor() {
+    this.comments = [
+      { username: '用户1', date: new Date(), text: '这件衣服真好看！' },
+      { username: '用户2', date: new Date(), text: '我也想要一件！' },
+    ];
+  }
+  addComment() {
+    if (this.newComment.trim()) {
+      const newCommentObj = {
+        username: '当前用户', // 可以替换为实际的用户名
+        date: new Date(),
+        text: this.newComment,
+      };
+      this.comments.push(newCommentObj);
+      this.newComment = ''; // 清空输入框
+    }
+  }
 
   ngOnInit() {
     
     
   }
-  
-}
-
+}

tailor-app/myapp/src/app/customization/customization.page.ts

@@ -167,7 +167,7 @@ export class CustomizationPage implements OnInit {
     "goal":"客户定制服装目的",
     "style":"风格",
     "color":"颜色",
-    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
+    "feature":"客户的身体三围，以三围+尺寸这样的格式拼接，例如胸围+85cm,腰围+60cm,臀围90cm",
     "ACC":"配饰，耳环，领带什么的",
     "rim":"辅料，纽扣，拉链什么的",
     "period":"定制周期",
@@ -176,7 +176,8 @@ export class CustomizationPage implements OnInit {
     "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
     "after":"售后信息",
     "texture":"材质"
-    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"
+    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示",
+    "gender":女装就填女,男装填入男
 
 }
 
@@ -247,6 +248,7 @@ export class CustomizationPage implements OnInit {
               "image": a['image'],
               "user": new CloudUser().toPointer(),
               "detail": a['detail'],
+              "gender":a['gender'],
               "comment": ""
 
 
@@ -371,7 +373,7 @@ export class CustomizationPage implements OnInit {
 - 打招呼，以用户自述为主
 - 当信息充足时候，根据用户定制服装目的做出一些推荐服装来引导用户，并进入下一个环节
 2.拓展的问询细节
-例如：询问顾客的风格偏好（如休闲、正式、个性化等）。是否要指定特定的材质？倾向于哪种版型？英式、意式或其他？是否有特定的身体特征需要特别注意，例如肩宽、胸围、腰围等？是否有任何特殊的图案、标志或文字想要添加到服装上？是否需要这件服装与特定的配饰或鞋子或裤子搭配？是否需要特定的辅料，如纽扣、拉链、衬里等？是否需要特定的颜色或配色方案？对服装有没有什么特殊的需求？期望的定制周期是多久？您对售后服务有什么期望？
+例如：询问顾客的风格偏好（如休闲、正式、个性化等）。是否要指定特定的材质？倾向于哪种版型？英式、意式或其他？您的三围是多少，例如臀围、胸围、腰围等？询问是女士还是男士？是否有任何特殊的图案、标志或文字想要添加到服装上？是否需要这件服装与特定的配饰或鞋子或裤子搭配？是否需要特定的辅料，如纽扣、拉链、衬里等？是否需要特定的颜色或配色方案？对服装有没有什么特殊的需求？期望的定制周期是多久？您对售后服务有什么期望？
 - 以上这些问题要要逐个问，不能一次性给出让用户作答，每次问完都要根据之前回答和这次提问内容为用户推荐特定的服装来引导用户(比如前面用户回答是为了婚礼，那你应该先说一下婚礼的服装需要满足的特点，因为接下来你要问用户需要什么风格，你就可以基于用户婚礼这个回答先推荐西装，燕尾服等服装，然后再问用户需要什么风格的服装，推荐5个选择)，当问询细节补充完成后进入下一个环节
 3.初步的定制结果，并且同时列出定制项目
 初步结果：初步得出现在定制的结果要得出客户定制服装目的，风格，颜色，客户特殊的身体特征，配饰，辅料，定制周期，衣服类型，裤子类型，鞋子类型，售后信息，材质，备注
@@ -385,7 +387,7 @@ export class CustomizationPage implements OnInit {
     "goal":"客户定制服装目的",
     "style":"风格",
     "color":"颜色",
-    "feature":"客户特殊的身体特征胸围大点什么的，如果客户没有特殊的身体特征这里填空字符串",
+    "feature":"客户的身体三围，以三围+尺寸这样的格式拼接，例如胸围+85cm,腰围+60cm,臀围90cm",
     "ACC":"配饰，耳环，领带什么的",
     "rim":"辅料，纽扣，拉链什么的",
     "period":"定制周期",
@@ -394,7 +396,9 @@ export class CustomizationPage implements OnInit {
     "shoe":"以鞋子类型+推荐尺码这样的格式拼接,如果客户没有指定鞋子类型，由你来选一种合适的鞋子类型",
     "after":"售后信息",
     "texture":"材质"
-    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示"
+    "remark":"备注，用户给出了不属于上述字段的需求就全部拼接在这里显示",
+    "gender":女装就填女,男装填入男
+
 
 }
 ，并在消息结尾附带: [完成]

tailor-app/myapp/src/app/me/me.page.html

@@ -1,296 +1,73 @@
-<ion-header [translucent]="true">
-  <ion-toolbar color="success">
-    <ion-title>me</ion-title>
-  </ion-toolbar>
-</ion-header>
 
-<ion-content [fullscreen]="true">
-
-  <ion-card>
-    <!-- 未登录 -->
-     @if(!currentUser?.id){
-       <ion-card-header>
-         <ion-card-title>请登录</ion-card-title>
-         <ion-card-subtitle>暂无信息</ion-card-subtitle>
-        </ion-card-header>
-      }
-        <!-- 未登录 -->
-     @if(currentUser?.id){
-      <ion-card-header>
-        <ion-card-title>{{currentUser?.get("username")}} {{currentUser?.get("realname")}}</ion-card-title>
-        <ion-card-subtitle>性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</ion-card-subtitle>
-      </ion-card-header>
-      }
-      <ion-card-content>
-      @if(!currentUser?.id){
-        <ion-button expand="block" (click)="signup()">注册</ion-button>
-        <ion-button expand="block" (click)="login()">登录</ion-button>
-      }
-     @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
-    }
-    </ion-card-content>
-  </ion-card>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    <!-- GPT组件 -->
-    <h1>GPT组件</h1>
-     <ion-input type="" [(ngModel)]="inputValue"  ></ion-input>
-    <ion-button (click)="printInputValue()">提交</ion-button>
-   {{gptre}}
-
-
-  <h1>页面跳转和组件使用</h1>
-  <!-- 页面跳转和组件使用 -->
-  <ion-button [routerLink]="[ '/yiyun' ]">
-    跳转到yiyun
-  </ion-button>
-
-  <app-slide></app-slide>
-  <h1>button组件调用</h1>
-  <!-- button组件调用 -->
-  <ion-button [routerLink]="[ '/yiyun' ]" color="warning">
-    修改按钮颜色
-  </ion-button>
- 
-  <ion-buttons slot="start">
-    <ion-back-button>返回i按钮</ion-back-button>
-  </ion-buttons>
-
-  <ion-button expand="block">
-    按钮可以block
-  </ion-button>
-
-  <ion-button expand="full">
-    按钮可以直角
-  </ion-button>
-
-  <ion-button fill="clear" expand="block">
-    按钮可以透明背景填充
-  </ion-button>
-
-  <ion-button>
-    <ion-icon slot="icon-only" name="add"></ion-icon>
-  </ion-button>
-  <ion-button fill="clear">
-    <ion-icon slot="icon-only" name="add"></ion-icon>
-  </ion-button>
-
-  <ion-button size="small">
-    小按钮
-  </ion-button>
-  <ion-button size="large">
-    大按钮
-  </ion-button>
-
-  <ion-button mode="ios" color="primary">
-    ios按钮
-  </ion-button>
-  <ion-button mode="md" color="primary">
-    android按钮
-  </ion-button>
-
-  <ion-button>
-    <ion-icon name="add" slot="start"></ion-icon>
-    图片在左侧文字在右侧按钮
-  </ion-button>
-  <ion-button>
-    <ion-icon name="add" slot="end"></ion-icon>
-    图片在右侧文字在右侧按钮
-  </ion-button>
-
-  <!-- List组件调用 -->
-  <h1>List组件调用 </h1>
-  <ion-list lines="full">
-    <ion-item *ngFor="let item of list" [routerLink]="[ '/yiyun' ]">
-      {{item}}
-    </ion-item>
-  </ion-list>
+<ion-content class="my-page-content">
+  <!-- 添加空白区域 -->
+  <div class="header-space"></div>
+
+  <!-- 用户信息区域 -->
+    <ion-content>
+      <!-- 用户信息 -->
+      <ion-item lines="none" class="user-info">
+        <ion-avatar slot="start">
+          <!-- 显示头像，如果没有头像，显示默认头像 -->
+          <img [src]="userData?.avatar || 'assets/img/user-avatar.jpg'" alt="User Avatar" />
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ userData?.name}}</h2>
+          <p>您没有访问权限，请登录。</p>
+        </ion-label>
+        <!-- 登录、注册、编辑和退出登录按钮 -->
+        <div class="user-actions" slot="end">
+          @if(!currentUser?.id){
+            <ion-button (click)="signup()" fill="outline" color="primary">
+              注册
+            </ion-button>
+            <ion-button (click)="login()" fill="outline" color="primary">
+              登录
+            </ion-button>
+          }
+          @if(currentUser?.id){
+            <ion-button (click)="logout()" fill="clear" color="danger">
+              退出登录
+            </ion-button>
+          }
+        </div>
+        </ion-item>
 
   <ion-list>
-    <ion-item-divider>
-      <ion-label>分组列表A</ion-label>
-    </ion-item-divider>
-    <ion-item>
-      a
-    </ion-item>
-    <ion-item>
-      aaa
-    </ion-item>
-
-    <ion-item-divider>
-      <ion-label>B</ion-label>
-    </ion-item-divider>
-    <ion-item>
-      b
-    </ion-item>
-    <ion-item>
-      bbb
+    <!-- 我的定制 -->
+    <ion-item button (click)="customizations()" class="my-item">
+      <ion-icon slot="start" name="shirt-outline"></ion-icon>
+      <ion-label>我的定制</ion-label>
     </ion-item>
-  </ion-list>
 
-  <ion-list lines="full">
-    <ion-item *ngFor="let item of list">
-      <ion-icon slot="start" name="add"></ion-icon>
-      带图标列表{{item}}
-    </ion-item>
-  </ion-list>
-
-  <ion-list>
-    <ion-item *ngFor="let item of list">
-      <ion-avatar item-left>
-        <img src="assets/shapes.svg">
-      </ion-avatar>
-      <ion-label>列表中的头像</ion-label>
+    <!-- 我的收藏 -->
+    <ion-item button (click)="favorites()" class="my-item">
+      <ion-icon slot="start" name="heart-outline"></ion-icon>
+      <ion-label>我的收藏</ion-label>
     </ion-item>
-  </ion-list>
 
-  <ion-list>
-    <ion-item *ngFor="let item of list">
-      <ion-thumbnail item-left>
-        <img src="assets/shapes.svg">
-      </ion-thumbnail>
-      <div>
-        <h2>我是标题</h2>
-        <p>我是新闻</p>
-      </div>
-      <button ion-button clear item-right></button>
+    <!-- 会员服务 -->
+    <ion-item button (click)="AIchat()" class="my-item">
+      <ion-icon slot="start" name="star-outline"></ion-icon>
+      <ion-label>AI服务</ion-label>
     </ion-item>
-  </ion-list>
-
-  <ion-list>
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>滑动列表1</ion-label>
-      </ion-item>
-      <ion-item-options side="start">
-        <ion-item-option>Favorite</ion-item-option>
-        <ion-item-option color="primary">Share</ion-item-option>
-      </ion-item-options>
 
-      <ion-item-options side="end">
-        <ion-item-option>Unread</ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label>滑动列表2</ion-label>
-      </ion-item>
-      <ion-item-options side="start">
-        <ion-item-option>Favorite</ion-item-option>
-        <ion-item-option color="primary">Share</ion-item-option>
-      </ion-item-options>
-
-      <ion-item-options side="end">
-        <ion-item-option>Unread</ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-  </ion-list>
-  <!-- 表单组件 -->
-  <h1>表单组件</h1>
-
-  <ion-list>
-    <ion-item>
-      <ion-label>用户名</ion-label>
-      <ion-input [(ngModel)]="peopleInfo.username"></ion-input>
+    <!-- 系统设置 -->
+    <ion-item button (click)="systemsettings()" class="my-item">
+      <ion-icon slot="start" name="settings-outline"></ion-icon>
+      <ion-label>系统设置</ion-label>
     </ion-item>
 
-    <ion-item>
-      <ion-label>是否本科</ion-label>
-      <ion-toggle slot="end" [(ngModel)]="peopleInfo.flag"></ion-toggle>
+    <!-- 反馈与帮助 -->
+    <ion-item button (click)="feedback()" class="my-item">
+      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
+      <ion-label>反馈与帮助</ion-label>
     </ion-item>
 
-    <ion-radio-group [(ngModel)]="peopleInfo.payType">
-      <ion-item>
-        <ion-avatar item-left>
-          <img src="assets/shapes.svg">
-        </ion-avatar>
-        <ion-label>支付宝支付</ion-label>
-        <ion-radio value="1"></ion-radio>
-      </ion-item>
-
-      <ion-item>
-        <ion-avatar item-left>
-          <img src="assets/shapes.svg">
-        </ion-avatar>
-        <ion-label>微信支付</ion-label>
-        <ion-radio value="2"></ion-radio>
-      </ion-item>
-
-    </ion-radio-group>
-
-    <ion-item>
-      <ion-label>checkbox</ion-label>
-      <ion-checkbox></ion-checkbox>
+    <!-- 登出 -->
+    <ion-item button (click)="logout()" class="my-item">
+      <ion-icon slot="start" name="log-out-outline"></ion-icon>
+      <ion-label>登出</ion-label>
     </ion-item>
   </ion-list>
-  {{peopleInfo|json}}
-
-  <!-- 搜索框 -->
-  <h1>搜索框</h1>
-  <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
-  <ion-searchbar placeholder="Filter Pizza" (ionInput)="onSearchInput($event)" animated></ion-searchbar>
-
-  <!-- segment演示 -->
-  <h1>segment演示</h1>
-  <ion-segment [(ngModel)]="tab">
-    <ion-segment-button value="tab1">
-      <ion-label>详情</ion-label>
-    </ion-segment-button>
-    <ion-segment-button value="tab2">
-      <ion-label>评论</ion-label>
-    </ion-segment-button>
-
-    <div class="info" [ngSwitch]="tab">
-      <div *ngSwitchCase="'tab1'">商品简介</div>
-      <div *ngSwitchCase="'tab2'">商品评论</div>
-
-    </div>
-
-
-    {{tab}}
-
-    <!-- 日期组件 -->
-    <h1>日期组件</h1>
-    <ion-list>
-
-      <ion-item>
-        <ion-label>Date</ion-label>
-        <ion-datetime display-format="DD.MM.YYYY HH:mm"></ion-datetime>
-      </ion-item>
-    </ion-list>
-  </ion-segment>
-
-
 </ion-content>

tailor-app/myapp/src/app/me/me.page.scss

@@ -0,0 +1,62 @@
+.my-page-content {
+    --background: #e0f7fa; /* 设置整体背景颜色为浅蓝色 */
+  }
+  .header-space {
+    height: 40px; /* 留出空白区域的高度 */
+  }
+  .user-info {
+    display: flex;
+    align-items: center;
+    padding: 16px;
+    background-color: white; /* 用户信息背景 */
+    border-bottom: 2px solid #e5e5e5; /* 底部边框 */
+  }
+  ion-item {
+    margin: 8px 0;
+  }
+
+  ion-button {
+    margin-top: 10px;
+  }
+  
+  ion-label {
+    font-size: 14px;
+    color: #555;
+  }
+
+  .user-info ion-avatar {
+    width: 64px;
+    height: 64px;
+    margin-right: 16px;
+  }
+  
+  .user-details {
+    flex: 1;
+  }
+  
+  .user-details h2 {
+    margin: 0;
+    font-size: 18px;
+    color: #333; /* 用户名颜色 */
+  }
+  
+  .user-details p {
+    margin: 0;
+    font-size: 14px;
+    color: #999; /* 用户邮箱颜色 */
+  }
+  
+  .my-item {
+    --ion-item-background: white; /* 列表项背景 */
+    --ion-item-border-color: #e5e5e5; /* 列表项边框颜色 */
+    --ion-item-border-width: 2px; /* 列表项边框宽度 */
+  }
+  
+  .my-item ion-icon {
+    color: #5fe407; /* 图标颜色 */
+    font-size: 24px; /* 图标大小 */
+  }
+  
+  .my-item ion-label {
+    font-size: 16px; /* 列表项文本大小 */
+  }

tailor-app/myapp/src/app/me/me.page.ts

@@ -1,31 +1,35 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { IonContent, IonHeader, IonTitle, IonToolbar, IonButton, IonLabel, IonItem, IonList, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemOption, IonItemSliding, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime, ModalController, IonCardContent, IonCardSubtitle, IonCardTitle, IonCardHeader,IonCard } from '@ionic/angular/standalone';
-import { RouterModule } from '@angular/router';
-import { SlideModule } from '../module/slide/slide.module';
+import { IonContent, IonHeader, IonTitle,IonButton, IonLabel, IonItem, IonList, IonIcon, IonAvatar,NavController} from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { add } from 'ionicons/icons';
-// import {FmodeChatCompletion} from "fmode-ng"
-import { TestChatCompletion } from './test-chat-completion';
-import { CloudUser } from 'src/lib/ncloud';
+import { IonNote } from '@ionic/angular/standalone';
+import { IonToolbar } from '@ionic/angular/standalone';
+import { ModalController } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
+import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
-import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
-
 addIcons({ add })
 @Component({
   selector: 'app-me',
   templateUrl: './me.page.html',
   styleUrls: ['./me.page.scss'],
   standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, RouterModule, IonLabel, IonLabel, IonList, IonItem, SlideModule, IonBackButton, IonButtons, IonIcon, IonItemDivider, IonAvatar, IonThumbnail, IonItemOptions, IonItemSliding, IonItemOption, IonItemOptions, IonInput, IonCheckbox, IonRadio, IonToggle, IonRadioGroup, IonSearchbar, IonSegment, IonSegmentButton, IonDatetime,IonCardContent,IonCardSubtitle,IonCardTitle,IonCardHeader,IonCardSubtitle,IonCard]
+  imports: [IonContent, IonHeader, IonTitle,IonList,IonAvatar,
+    IonLabel,IonButton,IonIcon,IonItem,IonNote,IonToolbar,
+    IonAvatar,IonItem]
 })
 export class MePage implements OnInit {
-
   currentUser:CloudUser|undefined
-  constructor(private modalCtrl:ModalController) {
+  // 用户信息数据
+  userData = {
+    name: '',  // 默认值，可以为空测试默认显示“游客”
+    avatar: 'assets/img'  // 默认头像路径
+  };
+
+  constructor(private navCtrl: NavController, private modalCtrl: ModalController,private router: Router) {
     this.currentUser = new CloudUser();
   }
+
   async login(){
     // 弹出登录窗口
     let user = await openUserLoginModal(this.modalCtrl);
@@ -33,6 +37,7 @@ export class MePage implements OnInit {
       this.currentUser = user
     }
   }
+
   async signup(){
     // 弹出注册窗口
     let user = await openUserLoginModal(this.modalCtrl,"signup");
@@ -40,142 +45,25 @@ export class MePage implements OnInit {
       this.currentUser = user
     }
   }
+
   logout(){
     this.currentUser?.logout();
   }
+  
+  customizations(){
 
-  editUser(){
-    openUserEditModal(this.modalCtrl)
   }
+  favorites(){
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  public list: any = []
-  public tab = "tab1"
-  public inputValue = ""
-  public gptre = ""
-  public peopleInfo: any = {
-    username: '',
-    age: 20,
-    flag: true,
-    payType: '1',
-    checkBoxList: [
-      { val: '吃饭', ischecked: true },
-      { val: '睡觉', ischecked: false },
-      { val: '敲代码', ischecked: false }
-    ],
-    cityList: ['北京', '上海', '深圳'],
-    city: '北京'
   }
-  ngOnInit() {
-    for (var i = 0; i < 5; i++) {
-      this.list.push(`aaaaaaa${i}`);
-    }
+  systemsettings(){
+
   }
-  onSearchInput(event: any) {
-    console.log(event.target.value);
+  feedback(){
+    
   }
-  async printInputValue() {
-    console.log("开始解析");
-
-    let token = "r:16cd8f27084ff647fcdb5308a6783c4c"
-    localStorage.setItem("token",token)
-    let messageList: any = [
-      {
-        role: "system", content: `${new Date().toLocaleString}`
-      },
-      {
-        role: "user", content: this.inputValue
-      }
-    ]
-
-    let completion=new TestChatCompletion(messageList)
-    completion.createCompletionByStream()
-    setInterval(()=>{
-      console.log(messageList);
-      this.gptre=messageList[messageList.length-1].content
-    },1000)
-
-
-    // let bodyJson = {
-    //   "token": `Bearer ${token}`,
-    //   "messages": messageList,
-    //   "model": "fmode-4.5-128k",
-    //   "temperature": 0.5,
-    //   "presence_penalty": 0,
-    //   "frequency_penalty": 0,
-    //   "top_p": 1,
-    //   "stream": true
-    // };
-
-    // let response = await fetch("https://test.fmode.cn/api/apig/aigc/gpt/v1/chat/completions", {
-    //   "headers": {
-    //     "accept": "text/event-stream",
-    //   },
-    //   "body": JSON.stringify(bodyJson),
-    //   "method": "POST",
-    //   "mode": "cors",
-    //   "credentials": "omit"
-    // });
-    // let reader = response.body?.getReader()
-    // if (!reader) {
-    //   throw new Error("Failed to get the response reader.");
-    // }
-
-    // let decoder = new TextDecoder();
-    // let buffer = "";
-
-    // while (true) {
-    //   let { done, value } = await reader.read();
-    //   if (done) {
-    //     break;
-    //   }
-    //   let data = decoder.decode(value);
-    //   let messages = data.split("\n");
-    //   console.log(messages);
-
-    //   for (let i = 0; i < messages.length - 1; i++) {
-    //     let message = messages[i];
-    //     console.log(message);
-    //     let dataStr: string = message.split("data: ")[1]
-    //     if (dataStr && dataStr.startsWith("{")) {
-    //       try {
-    //         let json = JSON.parse(dataStr);
-    //         let content = json.choices[0].delta.content
-    //         this.gptre = this.gptre + content
-    //       } catch (err) { }
-    //     }
-
-
-    //   }
-    // }
-
-
+  AIchat(){
+    this.router.navigate(['/tabs/aichat']);
   }
+  ngOnInit() {}
 }

tailor-app/myapp/src/app/report/report.component.html

@@ -21,7 +21,8 @@
 
  <!-- 表格内容 -->
  <ion-row *ngFor="let key of JSONKeys"  >
-   <ion-col  text-left size="2" style="border-right: 1px solid #ddd;"><strong>{{key}}</strong></ion-col>
+   @if(key!="image"){
+    <ion-col  text-left size="2" style="border-right: 1px solid #ddd;"><strong>{{key}}</strong></ion-col>
    <!-- <ion-col col-8 text-left>{{ JSONobject2[key] || "无"}} </ion-col> -->
    <ion-col  text-left style="position: relative;">
      <div style="display: flex;align-items: center;justify-content: center;  padding: 0px;">
@@ -33,8 +34,10 @@
        }
        
        
+       
      </div>
    </ion-col>
+   }
    <!-- <ion-col col-8 text-left>{{ 22}}</ion-col> -->
 
  </ion-row>

tailor-app/myapp/src/app/tabs/tabs.routes.ts

@@ -36,6 +36,11 @@ export const routes: Routes = [
         redirectTo: '/tabs/yiyun',
         pathMatch: 'full',
       },
+      {
+        path: 'aichat',
+        loadComponent: () =>
+          import('../aichat/aichat.component').then((m) => m.AIchatComponent),
+      },
     ],
   },
   {