1

wisdom-app/src/app/component/edit-tag/edit-tag.component.html

@@ -1,9 +1,11 @@
 
 <ion-input [value]="userInput" (ionInput)="onInput($event)" type="text" placeholder="请输入标签名称"></ion-input>
-<p>当前输入: {{userInput}}</p> <ion-button (click)="addTag()">添加标签</ion-button>
-
+<!-- <p>当前输入: {{userInput}}</p>  -->
+<ion-button (click)="addTag()" expand="block">添加标签</ion-button>
+<div>
 @for(tag of tags;track tag;){
     <ion-chip color="primary" (click)="removeTag(tag)">
         <ion-label>{{tag}}</ion-label>
     </ion-chip>
-}
+}
+</div>

wisdom-app/src/app/tab4/tab4.page.html

@@ -17,7 +17,7 @@
          <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>
@@ -31,8 +31,20 @@
       }
      @if(currentUser?.id){
       <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()" color="light">登出</ion-button>
+      <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
     }
     </ion-card-content>
   </ion-card>
+  <ion-card class="memo-card">
+    <h2 class="memo-title">健康备忘录</h2>
+    <p class="memo-description">写下您问诊的医生名或者心动的科普知识，便于您下次查找（点击标签可删除）</p>
+    <app-edit-tag (onTagChange)="setTagsValue($event)"></app-edit-tag>
+
+    <h2 class="memo-title">收藏夹</h2>
+    <ul class="tag-list">
+        @for(tag of editTags; track tag;){
+            <li class="tag-item">{{tag}}</li>
+        }
+    </ul>
+</ion-card>
 </ion-content>

wisdom-app/src/app/tab4/tab4.page.scss

@@ -0,0 +1,62 @@
+ion-card {
+    background-color: #e0f7fa; /* 浅蓝色背景，给人以清新和健康的感觉 */
+    border-radius: 10px; /* 圆角边框 */
+    padding: 20px; /* 内边距 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+}
+
+ion-card-title {
+    font-size: 1.5em; /* 标题字体大小 */
+    font-weight: bold; /* 加粗 */
+    color: #00796b; /* 深绿色字体，象征健康 */
+    margin: 0; /* 去掉默认的外边距 */
+}
+
+ion-card-subtitle {
+    font-size: 1.2em; /* 副标题字体大小 */
+    color: #004d40; /* 更深的绿色字体 */
+    margin-top: 5px; /* 顶部外边距 */
+}
+
+ion-card:hover {
+    background-color: #b2ebf2; /* 悬停时的背景色变化 */
+    transition: background-color 0.3s; /* 背景色变化的过渡效果 */
+}
+.memo-card {
+    background-color: #e0f7fa; /* 浅蓝色背景，给人以清新和健康的感觉 */
+    border-radius: 10px; /* 圆角边框 */
+    padding: 20px; /* 内边距 */
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+}
+
+.memo-title {
+    font-size: 1.8em; /* 标题字体大小 */
+    font-weight: bold; /* 加粗 */
+    color: #00796b; /* 深绿色字体，象征健康 */
+    margin: 15px 0; /* 顶部和底部外边距 */
+}
+
+.memo-description {
+    font-size: 1.1em; /* 描述字体大小 */
+    color: #004d40; /* 更深的绿色字体 */
+    margin-bottom: 20px; /* 底部外边距 */
+}
+
+.tag-list {
+    list-style-type: none; /* 去掉默认的列表样式 */
+    padding: 0; /* 去掉内边距 */
+}
+
+.tag-item {
+    background-color: #b2ebf2; /* 标签背景色 */
+    color: #00796b; /* 标签字体颜色 */
+    border-radius: 5px; /* 标签圆角 */
+    padding: 10px; /* 标签内边距 */
+    margin: 5px 0; /* 标签外边距 */
+    transition: background-color 0.3s; /* 背景色变化的过渡效果 */
+    cursor: pointer; /* 鼠标悬停时显示为可点击 */
+}
+
+.tag-item:hover {
+    background-color: #80deea; /* 悬停时的背景色变化 */
+}

wisdom-app/src/app/tab4/tab4.page.ts

@@ -3,6 +3,7 @@ import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, I
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.component';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
+import { EditTagComponent } from '../component/edit-tag/edit-tag.component';
 
 @Component({
   selector: 'app-tab4',
@@ -10,7 +11,8 @@ import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-log
   styleUrls: ['tab4.page.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
-    IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle
+    IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
+    EditTagComponent
   ],
 })
 export class Tab4Page {
@@ -40,4 +42,19 @@ export class Tab4Page {
     openUserEditModal(this.modalCtrl)
   }
 
+  editTags:Array<String>=[]
+   async setTagsValue(ev:any){
+    let currentUser = new CloudUser();
+    let userPrompt = ``
+    if(!currentUser?.id){
+      console.log("用户未登录，请登录后重试");
+      let user = await openUserLoginModal(this.modalCtrl);
+      if(!user?.id){
+        return
+      }
+      currentUser = user;
+    }
+  //console.log("setTagsValue",ev);
+  this.editTags=ev;
+}
 }