fix: style

mcbridge-app/src/app/inquiry/inquiry.component.html

@@ -1,33 +1,51 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      症状图{{imagineWork?.progress || 0}}
-    </ion-title> 
+  <ion-toolbar color="primary">
+    <ion-title class="ion-text-center">
+      症状图 {{imagineWork?.progress || 0}}%
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <!-- 生成提示词 -->
-  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="症状描述填写" autoGrow="true"></ion-textarea>
-  <ion-button (click)="createImage()" expand="block">生成症状图</ion-button>
-  <!-- 意境画面提示词 -->
-  <div>
-    {{PictureDescResult}}
-  </div>
-  <!-- 生成结果 -->
-  @if(images.length) {
-    @for(imageUrl of images;track imageUrl){
-      <img [src]="imageUrl" alt="" srcset="">
-    }
-  }
-  <!-- 生成状态 -->
-  @if(!images.length){
-    @if(imagineWork){
-      <h1>生成中</h1>
-    }
-    @if(!imagineWork){
-      <h1>未开始</h1>
-    }
-  }
+<ion-content [fullscreen]="true" class="ion-padding">
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>症状描述</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-textarea 
+        [value]="userPrompt" 
+        (ionInput)="promptInput($event)" 
+        placeholder="请填写症状描述" 
+        autoGrow="true"
+        class="textarea-custom">
+      </ion-textarea>
+      <ion-button 
+        (click)="createImage()" 
+        expand="full" 
+        class="button-custom">
+        生成症状图
+      </ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card *ngIf="PictureDescResult">
+    <ion-card-header>
+      <ion-card-title>症状描述</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div>{{PictureDescResult}}</div>
+    </ion-card-content>
+  </ion-card>
 
-</ion-content>
+  <div class="image-container">
+    <ng-container *ngIf="images.length; else loadingTemplate">
+      <ng-container *ngFor="let imageUrl of images; trackBy: trackImage">
+        <img [src]="imageUrl" alt="生成的症状图" class="generated-image">
+      </ng-container>
+    </ng-container>
+    <ng-template #loadingTemplate>
+      <h1 *ngIf="imagineWork">生成中...</h1>
+      <h1 *ngIf="!imagineWork">未开始</h1>
+    </ng-template>
+  </div>
+</ion-content>

mcbridge-app/src/app/inquiry/inquiry.component.scss

@@ -0,0 +1,32 @@
+.textarea-custom {
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .button-custom {
+    margin-top: 10px;
+    background-color: #3880ff;
+    color: white;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+  }
+
+  .button-custom:hover {
+    background-color: #3171e0;
+  }
+
+  .image-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 20px;
+  }
+
+  .generated-image {
+    max-width: 100%;
+    height: auto;
+    margin: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }

mcbridge-app/src/app/inquiry/inquiry.component.ts

@@ -1,4 +1,6 @@
+import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { IonCard, IonCardHeader, IonCardTitle, IonCardContent } from '@ionic/angular/standalone';
 import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { IonTextarea, IonButton,IonInput } from "@ionic/angular/standalone";
 import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
@@ -12,7 +14,12 @@ import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
     IonHeader, IonToolbar, IonTitle, IonContent, 
     IonButton,
     IonInput,
-    IonTextarea
+    IonTextarea,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardContent,
+    CommonModule
   ],
 })
 export class InquiryComponent  implements OnInit {
@@ -63,6 +70,9 @@ export class InquiryComponent  implements OnInit {
     })
 
     
+  }
+  trackImage(index: number, imageUrl: string) {
+    return imageUrl; // 返回图像URL作为跟踪标识
   }
   ngOnInit() {}