f

wisdom-app/src/app/page/inquiry-human/inquiry-human.component.ts

@@ -97,11 +97,13 @@ export class InquiryHumanComponent implements OnInit {
       isAvailable: false
     }
   ];
-
+  type:string = "图文咨询"
   selectOption(option: ConsultOption) {
     if (!option.isAvailable) return;
     this.options.forEach(opt => opt.isSelected = false);
     option.isSelected = true;
+    this.type = option.title
+    
   }
 
   isModalOpen = false;
@@ -227,10 +229,11 @@ export class InquiryHumanComponent implements OnInit {
           className:"user",
           objectId:this.currentUser.id
         },
-        type: this.selectedOption?.title, // 咨询类型
+        type: this.type, // 咨询类型
         userPhone: this.currentUser?.data["phone"], // 获取当前用户的手机号
         username : this.currentUser?.data["realname"], // 获取当前用户的姓名
       });
+      console.log("type",this.type)
       appointment.save();
       this.num = 0;
       console.log(appointment);

wisdom-app/src/app/page/page-create-agent/page-create-agent.component.html

@@ -1,17 +1,11 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <!-- <ion-buttons slot="start">
-      <ion-button (click)="backhome()" color="primary" >{{back}}</ion-button>
-    </ion-buttons> -->
-    <ion-button color="light" slot="start">
-      <ion-back-button  defaultHref="/" ></ion-back-button>
-    </ion-button>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/" color="light"></ion-back-button>
+    </ion-buttons>
     <ion-title>创建智能体</ion-title>
-
-    @if(progress!=0 && progress!=1){
-      <ion-progress-bar  [value]="progress"></ion-progress-bar>
-    }
-
+    <!-- 使用Angular的 *ngIf 指令来控制进度条的显示 -->
+    <ion-progress-bar *ngIf="progress > 0 && progress < 1" [value]="progress"></ion-progress-bar>
   </ion-toolbar>
 </ion-header>
 
@@ -19,69 +13,120 @@
   <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
-  <div style="text-align: center; margin-top: 20px">
-    <img height="80px" [src]="currentUser.get('avatar')" alt="" style="border-radius: 50%;">
-    <p>AI生成头像</p>
+
+  <!-- 用户头像和描述 -->
+  <div class="user-avatar-section">
+    <img
+      class="user-avatar"
+      [src]="currentUser.get('avatar') || '../../assets/image/doctor7.png'"
+      alt="用户头像"
+    />
+    <p class="avatar-description">AI生成头像</p>
   </div>
-  <div>
-    <ion-card>
+
+  <!-- 创建智能体表单 -->
+  <ion-card class="form-card">
+    <ion-card-header>
+      <ion-card-title>创建智能体信息</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
       <ion-list>
+        <!-- 名称输入 -->
         <ion-item>
-          <p style="width: 60px; font-weight: bolder;">名称：</p>
-          <!-- <ion-input label="输入你想了解的科普信息" placeholder="Enter text"></ion-input> -->
-          <ion-input  [value]="name" placeholder="输入名称" (ionInput)="nameInput($event)"></ion-input>
+          <ion-label position="stacked">名称</ion-label>
+          <ion-input
+            type="text"
+            placeholder="输入名称"
+            [(ngModel)]="name"
+          ></ion-input>
         </ion-item>
+        
+        <!-- 年龄输入 -->
         <ion-item>
-          <p style="width: 60px; font-weight: bolder;">年龄：</p>
-          <ion-input  [value]="age" placeholder="输入年龄" (ionInput)="ageInput($event)"></ion-input>
+          <ion-label position="stacked">年龄</ion-label>
+          <ion-input
+            type="number"
+            placeholder="输入年龄"
+            [(ngModel)]="age"
+          ></ion-input>
         </ion-item>
+        
+        <!-- 性别选择 -->
         <ion-item>
-          <p style="width: 60px;  font-weight: bolder;">性别：</p>
+          <ion-label position="stacked">性别</ion-label>
           <ion-select
-            aria-label="性别"
             placeholder="选择性别"
-            (ionChange)="genderChange($event)"
-            (ionCancel)="genderCancel()"
-            (ionDismiss)="genderDismiss()"
+            [(ngModel)]="gender"
           >
             <ion-select-option value="男">男</ion-select-option>
             <ion-select-option value="女">女</ion-select-option>
+            <ion-select-option value="其他">其他</ion-select-option>
           </ion-select>
         </ion-item>
-        <ion-item style="height: auto;">
-            <p style="width:120px;font-weight: bolder;">设定描述：</p>
-            <ion-textarea [value]="desc" placeholder="示例：你是一位经验丰富的妇科医生，拥有丰富的临床经验" (ionInput)="descInput($event)" autoGrow="true"></ion-textarea> 
+        
+        <!-- 设定描述 -->
+        <ion-item>
+          <ion-label position="stacked">设定描述</ion-label>
+          <ion-textarea
+            placeholder="示例：你是一位经验丰富的妇科医生，拥有丰富的临床经验"
+            autoGrow="true"
+            [(ngModel)]="desc"
+          ></ion-textarea>
         </ion-item>
       </ion-list>
-    </ion-card>
-  </div>
-  <ion-card>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 我的智能体列表 -->
+  <ion-card class="agent-list-card" *ngFor="let agent of agentList">
     <ion-card-header>
       <ion-card-title>我的智能体</ion-card-title>
       <ion-card-subtitle>智能体</ion-card-subtitle>
     </ion-card-header>
     <ion-card-content>
       <ion-list>
-        <ion-item  *ngFor="let agent of agentList" lines="none">
-          <ion-thumbnail slot="start" (click)="openInquiry(agent)">
-            <img [src]="agent.get('avatar') || '../../assets/image/doctor7.png'" [alt]="agent.get('name')" />
+        <ion-item  lines="none">
+          <ion-thumbnail slot="start">
+            <img
+              [src]="agent.get('avatar') || '../../assets/image/doctor7.png'"
+              [alt]="agent.get('name')"
+              (click)="openInquiry(agent)"
+            />
           </ion-thumbnail>
-          <div class="doctor-info" (click)="openInquiry(agent)">
-            <div>
-              <ion-text>{{ agent.get('name') }}({{ agent.get('age') }}岁)</ion-text>
-            </div>
-            <div>
-              <ion-text>{{ agent.get('gender') }}</ion-text>
-            </div>
-          </div>
-          <ion-button ios="logo-apple" size="small" color="danger" (click)="deleteAgent(agent)" slot="end">删除</ion-button>
+          <ion-label (click)="openInquiry(agent)" class="agent-info">
+            <h2>{{ agent.get('name') }} ({{ agent.get('age') }}岁)</h2>
+            <p>{{ agent.get('gender') }}</p>
+          </ion-label>
+          <ion-button
+            size="small"
+            color="danger"
+            fill="clear"
+            (click)="deleteAgent(agent)"
+            slot="end"
+          >
+            删除
+          </ion-button>
         </ion-item>
       </ion-list>
     </ion-card-content>
   </ion-card>
+
+  <!-- 空状态 -->
+  <div *ngIf="agentList.length === 0" class="empty-state">
+    <ion-icon name="person-off-outline" size="large"></ion-icon>
+    <p>暂无智能体记录</p>
+  </div>
 </ion-content>
+
 <ion-footer>
   <ion-toolbar>
-    <ion-button  (click)="createAgent()" expand="block" color="primary" >创建ai医生</ion-button>
+    <ion-button
+      expand="block"
+      color="primary"
+      (click)="createAgent()"
+      class="create-agent-button"
+    >
+      创建AI医生
+    </ion-button>
   </ion-toolbar>
 </ion-footer>

wisdom-app/src/app/page/page-create-agent/page-create-agent.component.scss

@@ -1,10 +1,156 @@
+/* 通用样式 */
 ion-header {
-    background-color: #5c97ff;
-    color: white;
-}
-
-ion-title {
+    --background: #478aff;
+    --color: white;
+  }
+  
+  ion-title {
     font-size: 20px;
     font-weight: bold;
     text-align: center;
-}
+  }
+  
+  ion-toolbar {
+    --background: #699df9;
+    position: relative;
+  }
+  
+  ion-back-button {
+    --color: white;
+  }
+  
+  ion-progress-bar {
+    margin-top: 8px;
+    height: 4px;
+  }
+  
+  /* 用户头像部分 */
+  .user-avatar-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px 0;
+  }
+  
+  .user-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #5c97ff;
+  }
+  
+  .avatar-description {
+    margin-top: 10px;
+    font-size: 16px;
+    color: #555;
+  }
+  
+  /* 表单卡片 */
+  .form-card {
+    margin: 0 16px 20px 16px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .form-card ion-card-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  .form-card ion-card-subtitle {
+    font-size: 14px;
+    color: #888;
+  }
+  
+  /* 智能体列表卡片 */
+  .agent-list-card {
+    margin: 0 16px 20px 16px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .agent-list-card ion-card-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  
+  .agent-list-card ion-card-subtitle {
+    font-size: 14px;
+    color: #888;
+  }
+  
+  .agent-info {
+    cursor: pointer;
+  }
+  
+  .agent-info h2 {
+    font-size: 16px;
+    margin: 0;
+    color: #333;
+  }
+  
+  .agent-info p {
+    font-size: 14px;
+    margin: 4px 0 0 0;
+    color: #666;
+  }
+  
+  /* 删除按钮样式 */
+  ion-button[color="danger"] {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    font-size: 14px;
+  }
+  
+  /* 创建智能体按钮 */
+  .create-agent-button {
+    --border-radius: 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  
+  /* 空状态样式 */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 10vh;
+    color: #888;
+    font-size: 16px;
+  }
+  
+  .empty-state ion-icon {
+    margin-bottom: 12px;
+    color: #bbb;
+  }
+
+  
+  /* 响应式设计 */
+  @media (max-width: 600px) {
+    .user-avatar {
+      width: 60px;
+      height: 60px;
+    }
+  
+    .avatar-description {
+      font-size: 14px;
+    }
+  
+    .form-card, .agent-list-card {
+      margin: 0 8px 16px 8px;
+    }
+  
+    .create-agent-button {
+      font-size: 14px;
+    }
+  
+    .agent-info h2 {
+      font-size: 14px;
+    }
+  
+    .agent-info p {
+      font-size: 12px;
+    }
+  }

wisdom-app/src/app/page/page-create-agent/page-create-agent.component.ts

@@ -4,6 +4,8 @@ import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 import { LoadingController,IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText, IonRefresherContent, IonRefresher, ToastController, IonToast, IonFooter, IonBackButton } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
 import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompletion, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
 
 
 @Component({
@@ -42,7 +44,7 @@ import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompl
      IonCardSubtitle,
      IonRefresher,
      IonRefresherContent,
-    IonToast
+    IonToast,FormsModule
   ],
 })
 export class PageCreateAgentComponent  implements OnInit {
@@ -331,9 +333,36 @@ ${userPrompt}
       }
       openChatPanelModal(this.modalCtrl,options)
   }
-  deleteAgent(agent:CloudObject){
+  async deleteAgent(agent:CloudObject){
+    const alert = await this.alertController.create({
+      header: '确认删除',
+      message: `确定要删除 ${agent.get('name')} 吗？`,
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel',
+        },
+        {
+          text: '确认',
+          handler: () => {
+            this.agentList = this.agentList.filter(a => a.id !== agent.id);
+            this.presentToast('智能体已删除。');
+          },
+        },
+      ],
+    });
+    
+    await alert.present();
     console.log("删除了",agent);
     agent.destroy();
     this.loadAgentData();
   }
+  async presentToast(message: string) {
+    const toast = await this.toastController.create({
+      message,
+      duration: 2000,
+      position: 'bottom',
+    });
+    toast.present();
+  }
 }

wisdom-app/src/app/page/page-user-inquery/page-user-inquery.component.html

@@ -16,6 +16,7 @@
   <ion-list>
     <ion-card *ngFor="let appointment of appointmentList" class="appointment-card">
       <ion-card-content>
+        <!-- 姓名和电话号码始终显示 -->
         <ion-item lines="none">
           <ion-label>
             <h2 class="appointment-name">姓名：{{appointment.get("username")}}</h2>
@@ -25,17 +26,34 @@
           <ion-icon name="call" slot="start" color="primary"></ion-icon>
           <ion-label class="appointment-phone">{{appointment.get("userPhone")}}</ion-label>
         </ion-item>
-        <ion-item lines="none">
-          <ion-icon name="calendar" slot="start" color="primary"></ion-icon>
-          <ion-label class="appointment-type">预约方式：{{appointment.get("type")}}</ion-label>
-        </ion-item>
-        <ion-button 
-          expand="block" 
-          color="primary" 
-          class="action-button"
-          (click)="presentAlert(appointment.get('username'), appointment.get('userPhone'))">
-          立即前往
+        
+        <!-- 折叠按钮 -->
+        <ion-button fill="clear" size="small" class="toggle-button" (click)="toggleDetails(appointment?.id)">
+          <ion-icon [name]="isExpanded(appointment.id) ? 'chevron-up' : 'chevron-down'"></ion-icon>
+          {{ isExpanded(appointment.id) ? '收起' : '展开' }}
         </ion-button>
+        
+        <!-- 折叠的内容 -->
+        <div class="additional-details" *ngIf="isExpanded(appointment?.id)">
+          <ion-item lines="none">
+            <ion-icon name="calendar" slot="start" color="primary"></ion-icon>
+            <ion-label class="appointment-type">预约方式：{{appointment.get("type")}}</ion-label>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-icon name="time" slot="start" color="primary"></ion-icon>
+            <ion-label class="appointment-time">时间：{{appointment.updatedAt | date:'short'}}</ion-label>
+          </ion-item>
+          <ion-button 
+            expand="block" 
+            color="primary" 
+            class="action-button"
+            (click)="presentAlert(appointment.get('username'), appointment.get('userPhone'))">
+            立即前往
+          </ion-button>
+          <ion-button color="danger" expand="block" (click)="deleteAppoint(appointment)">
+            删除预约
+          </ion-button>
+        </div>
       </ion-card-content>
     </ion-card>
   </ion-list>

wisdom-app/src/app/page/page-user-inquery/page-user-inquery.component.scss

@@ -81,4 +81,111 @@ ion-icon {
 .custom-alert-message {
   font-size: 16px;
   color: #555;
+}
+ion-header {
+  --background: #5c97ff;
+  --color: white;
+}
+
+ion-title {
+  font-size: 20px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.appointment-card {
+  margin: 12px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+}
+
+.appointment-card:hover {
+  transform: scale(1.02);
+}
+
+ion-card-content {
+  padding: 16px;
+}
+
+.appointment-name {
+  font-size: 18px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.appointment-phone,
+.appointment-type,
+.appointment-time {
+  font-size: 16px;
+  color: #555;
+}
+
+ion-icon {
+  margin-right: 8px;
+}
+
+.action-button {
+  margin-top: 16px;
+  --border-radius: 20px;
+  transition: transform 0.2s;
+}
+
+.action-button:active {
+  transform: scale(0.98);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #888;
+  font-size: 16px;
+  padding: 20px;
+}
+
+.empty-state ion-icon {
+  margin-bottom: 12px;
+}
+
+/* 自定义 Alert 样式 */
+.custom-alert {
+  --background: #ffffff;
+  --border-radius: 12px;
+  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.custom-alert-header {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+}
+
+.custom-alert-message {
+  font-size: 16px;
+  color: #555;
+}
+
+/* 折叠按钮样式 */
+.toggle-button {
+  --padding-start: 0;
+  --padding-end: 0;
+  --min-height: 0;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+}
+
+/* 折叠内容过渡效果 */
+.additional-details {
+  margin-top: 12px;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; max-height: 0; }
+  to { opacity: 1; max-height: 500px; }
 }

wisdom-app/src/app/page/page-user-inquery/page-user-inquery.component.ts

@@ -50,7 +50,6 @@ import { CloudObject, CloudQuery, CloudUser } from 'src/lib/ncloud';
 export class PageUserInqueryComponent implements OnInit {
   appointmentList: Array<CloudObject> = [];
   currentUser: CloudUser;
-
   constructor(private alertController: AlertController) {
     this.currentUser = new CloudUser();
     this.appointDisplay();
@@ -73,11 +72,25 @@ export class PageUserInqueryComponent implements OnInit {
     let query = new CloudQuery('appointment');
     // query.include("user")
     query.equalTo('doctor', this.currentUser?.id);
-    this.appointmentList = await query.find();
+    let list = await query.find()
+    this.appointmentList = list.reverse();
     console.log('我的appointmentList', this.appointmentList);
     console.log("this.currentUser", this.currentUser);
   }
+  expandedAppointments: Set<string> = new Set();
 
+// 切换折叠状态
+toggleDetails(appointmentId: any) {
+  if (this.expandedAppointments.has(appointmentId)) {
+    this.expandedAppointments.delete(appointmentId);
+  } else {
+    this.expandedAppointments.add(appointmentId);
+  }
+}
+// 检查是否展开
+isExpanded(appointmentId: any): boolean {
+  return this.expandedAppointments.has(appointmentId);
+}
   // 用来认证医生
   async load() {
     let depart = new CloudQuery('Department');
@@ -143,7 +156,19 @@ export class PageUserInqueryComponent implements OnInit {
         }
       ]
     });
-
     await alert.present();
   }
+  async deleteAppoint(appoint:CloudObject){
+    let alert = await this.alertController.create({
+      header: '温馨提示',
+      subHeader: 'Tips',
+      message: '删除成功！',
+      buttons: ['好的'],
+    });
+    console.log("删除了",appoint)
+    appoint.destroy();
+    this.appointDisplay();
+    await alert.present();
+    
+  }
 }