1

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

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

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

@@ -19,18 +19,29 @@
       }
         <!-- 已登录 -->
      @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-header>
+        <ion-card-title>{{currentUser?.get("username")}}</ion-card-title>
+        <ion-card-subtitle>姓名:{{currentUser?.get("realname")||"-"}} 性别:{{currentUser?.get("gender")||"-"}} 年龄:{{currentUser?.get("age")||"-"}}</ion-card-subtitle>
+      </ion-card-header> -->
+      <ion-card-header class="card-header">
+        <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.png'" alt="头像" class="avatar" />
+        <div class="user-info">
+            <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
+            <ion-card-subtitle>
+                姓名: {{currentUser?.get("realname") || "-"}} 
+                性别: {{currentUser?.get("gender") || "-"}} 
+                年龄: {{currentUser?.get("age") || "-"}}
+            </ion-card-subtitle>
+        </div>
+    </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>
+        <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
+        <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
       }
      @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()">编辑资料</ion-button>
+      <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
       <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
     }
     </ion-card-content>

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

@@ -59,4 +59,21 @@ ion-card:hover {
 
 .tag-item:hover {
     background-color: #80deea; /* 悬停时的背景色变化 */
+}
+.card-header {
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中对齐 */
+    padding: 10px; /* 内边距 */
+}
+
+.avatar {
+    width: 50px; /* 头像宽度 */
+    height: 50px; /* 头像高度 */
+    border-radius: 50%; /* 圆形头像 */
+    margin-right: 15px; /* 头像与文本之间的间距 */
+    object-fit: cover; /* 确保图片覆盖区域并保持比例 */
+}
+
+.user-info {
+    flex: 1; /* 使用户信息部分占据剩余空间 */
 }

wisdom-app/src/lib/user/modal-user-edit/modal-user-edit.component.html

@@ -17,6 +17,9 @@
   <ion-item>
      <ion-input [value]="userData['gender']" (ionChange)="userDataChange('gender',$event)" label="性别" placeholder="请您输入男/女"></ion-input>
     </ion-item>
+    <ion-item>
+      <ion-input [value]="userData['avatar']" (ionChange)="userDataChange('avatar',$event)" label="头像" placeholder="请您输入头像地址"></ion-input>
+     </ion-item>
 
    <ion-button expand="block" (click)="save()">保存</ion-button>
    <ion-button expand="block" (click)="cancel()">取消</ion-button>