登录2.0

myapp/src/app/tab2/tab2.page.html

@@ -48,7 +48,7 @@
   </ion-card>
 
   <!-- 历史咨询记录 - 修改后的布局 -->
-  @if (consultList?.length) {
+  @if (consultList.length) {
     <ion-card class="history-card">
       <ion-card-header>
         <ion-card-title>历史咨询记录</ion-card-title>

myapp/src/app/tabs/tabs.page.html

@@ -11,10 +11,10 @@
       <ion-label>客服</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab3" href="/tabs/tab3">
+    <!-- <ion-tab-button tab="tab3" href="/tabs/tab3">
       <ion-icon aria-hidden="true" name="person-outline"></ion-icon>
       <ion-label>我的</ion-label>
-    </ion-tab-button>
+    </ion-tab-button> -->
 
         <ion-tab-button tab="mine" href="/tabs/mine">
       <ion-icon aria-hidden="true" name="person-outline"></ion-icon>

myapp/src/lib/user/page-mine/page-mine.component.html

@@ -1,50 +1,75 @@
 <ion-header>
-  <ion-toolbar color="primary">
+  <ion-toolbar color="white">
     <ion-title>我的资料</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding" style="background-color: white;">
   <!-- 用户已登录状态 -->
   @if(currentUser?.id) {
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>
-        <ion-icon name="person-circle" size="large"></ion-icon>
-        {{ currentUser?.get("username") }}
-      </ion-card-title>
-    </ion-card-header>
+    <div class="profile-container">
+      <!-- 头像和用户名 -->
+      <div class="profile-header">
+        <img src="/assets/tx.jpeg" alt="用户头像" class="profile-avatar">
+        <h2 class="profile-name">{{ currentUser?.get("username") }}</h2>
+      </div>
 
-    <ion-card-content>
-      <ion-grid>
-        <ion-row>
-          <ion-col size="6">
-            <ion-button expand="block" color="primary" (click)="edit()">
-              <ion-icon name="create" slot="start"></ion-icon>
-              编辑资料
-            </ion-button>
-          </ion-col>
-          <ion-col size="6">
-            <ion-button expand="block" color="danger" (click)="logout()">
-              <ion-icon name="log-out" slot="start"></ion-icon>
-              退出登录
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
-    </ion-card-content>
-  </ion-card>
+      <!-- 功能列表 - 确保每个item只有一个右侧箭头 -->
+      <ion-list lines="full" class="function-list">
+        <ion-item button detail>
+          <ion-icon slot="start" name="notifications-outline" color="medium"></ion-icon>
+          <ion-label>通知</ion-label>
+        </ion-item>
+        
+        <ion-item button detail>
+          <ion-icon slot="start" name="people-outline" color="medium"></ion-icon>
+          <ion-label>粉丝 <span class="fans-count">120</span></ion-label>
+        </ion-item>
+        
+        <ion-item button detail>
+          <ion-icon slot="start" name="bookmark-outline" color="medium"></ion-icon>
+          <ion-label>收藏</ion-label>
+        </ion-item>
+        
+        <ion-item button detail>
+          <ion-icon slot="start" name="help-circle-outline" color="medium"></ion-icon>
+          <ion-label>帮助</ion-label>
+        </ion-item>
+        
+        <ion-item button detail>
+          <ion-icon slot="start" name="mail-outline" color="medium"></ion-icon>
+          <ion-label>联系我们</ion-label>
+        </ion-item>
+
+        <!-- 编辑资料 -->
+        <ion-item button detail (click)="edit()">
+          <ion-icon slot="start" name="create-outline" color="medium"></ion-icon>
+          <ion-label>编辑资料</ion-label>
+        </ion-item>
+      </ion-list>
+
+      <!-- 退出登录按钮 -->
+      <div class="logout-button">
+        <ion-button expand="block" color="primary" fill="outline" shape="round" (click)="logout()">
+          <ion-icon name="log-out-outline" slot="start"></ion-icon>
+          退出登录
+        </ion-button>
+      </div>
+    </div>
   }
 
   <!-- 用户未登录状态 -->
   @if(!currentUser?.id) {
-  <div class="login-prompt">
-    <ion-icon name="lock-closed" size="large"></ion-icon>
-    <h2>请先登录</h2>
-    <ion-button expand="block" color="primary" (click)="login()">
-      <ion-icon name="log-in" slot="start"></ion-icon>
-      点击登录
-    </ion-button>
-  </div>
+    <div class="login-prompt">
+      <div class="login-icon">
+        <ion-icon name="lock-closed"></ion-icon>
+      </div>
+      <h2>登录后体验更精彩</h2>
+      <p class="prompt-text">与全世界的经历、人物和故事相遇</p>
+      <ion-button expand="block" color="primary" shape="round" class="login-button" (click)="login()">
+        <ion-icon name="log-in" slot="start"></ion-icon>
+        立即登录
+      </ion-button>
+    </div>
   }
 </ion-content>

myapp/src/lib/user/page-mine/page-mine.component.scss

@@ -3,17 +3,110 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 60vh;
+  height: 70vh;
   text-align: center;
+  padding: 20px;
 
-  ion-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    color: var(--ion-color-primary);
+  .login-icon {
+    background: var(--ion-color-primary);
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+
+    ion-icon {
+      font-size: 2.5rem;
+      color: white;
+    }
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: var(--ion-color-dark);
+  }
+
+  .prompt-text {
+    font-size: 1rem;
+    color: var(--ion-color-medium);
+    margin-bottom: 30px;
+    max-width: 80%;
+    line-height: 1.4;
+  }
+
+  .login-button {
+    max-width: 250px;
+    --padding-top: 15px;
+    --padding-bottom: 15px;
+    font-weight: bold;
   }
 }
 
-ion-card {
+.profile-container {
   max-width: 500px;
-  margin: 2rem auto;
+  margin: 0 auto;
+}
+
+.profile-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px 0 30px;
+  
+  .profile-avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 10px; /* 修改为正方形带圆角 */
+    object-fit: cover;
+    margin-bottom: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .profile-name {
+    margin: 0;
+    font-size: 1.5rem; /* 修改字体大小 */
+    font-weight: bold;
+    color: var(--ion-color-dark);
+  }
+}
+
+.function-list {
+  background: transparent;
+  margin: 20px 0;
+  
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --min-height: 56px;
+    --background: transparent;
+    
+    ion-icon[slot="start"] {
+      font-size: 1.2rem;
+      margin-right: 12px;
+    }
+    
+    .fans-count {
+      color: var(--ion-color-primary);
+      font-weight: bold;
+      margin-left: 8px;
+    }
+  }
+}
+
+.logout-button {
+  margin-top: 40px;
+  
+  ion-button {
+    --padding-top: 15px;
+    --padding-bottom: 15px;
+    font-weight: 500;
+  }
+}
+
+ion-button {
+  --border-radius: 50px;
 }

myapp/src/lib/user/page-mine/page-mine.component.ts

@@ -3,9 +3,8 @@ import { CloudUser } from 'src/lib/ncloud';
 import { ModalController } from "@ionic/angular/standalone";
 import { UserEditComponent } from '../user-edit/user-edit.component';
 import { 
-  IonHeader, IonToolbar, IonTitle, IonContent, IonCard, 
-  IonCardHeader, IonCardTitle, IonCardContent, IonButton, 
-  IonIcon, IonGrid, IonRow, IonCol 
+  IonHeader, IonToolbar, IonTitle, IonContent, IonList, 
+  IonItem, IonLabel, IonIcon, IonButton, IonBadge 
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -14,9 +13,8 @@ import {
   styleUrls: ['./page-mine.component.scss'],
   standalone: true,
   imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, IonCard,
-    IonCardHeader, IonCardTitle, IonCardContent, IonButton,
-    IonIcon, IonGrid, IonRow, IonCol
+    IonHeader, IonToolbar, IonTitle, IonContent, IonList,
+    IonItem, IonLabel, IonIcon, IonButton, IonBadge
   ]
 })
 export class PageMineComponent {

myapp/src/lib/user/user-edit/user-edit.component.html

@@ -16,6 +16,26 @@
       <ion-input type="text" placeholder="输入新用户名"></ion-input>
     </ion-item>
 
+        <ion-item>
+      <ion-label position="stacked">性别</ion-label>
+      <ion-input type="text" placeholder="输入您的性别"></ion-input>
+    </ion-item>
+
+        <ion-item>
+      <ion-label position="stacked">年龄</ion-label>
+      <ion-input type="text" placeholder="输入您的年龄"></ion-input>
+    </ion-item>
+
+        <ion-item>
+      <ion-label position="stacked">生日</ion-label>
+      <ion-input type="text" placeholder="输入您的生日"></ion-input>
+    </ion-item>
+
+            <ion-item>
+      <ion-label position="stacked">所在地</ion-label>
+      <ion-input type="text" placeholder="输入您的地址"></ion-input>
+    </ion-item>
+
     <ion-item>
       <ion-label position="stacked">密码</ion-label>
       <ion-input type="password" placeholder="输入新密码"></ion-input>

myapp/src/lib/user/user-login/user-login.component.html

@@ -1,3 +0,0 @@
-<p>
-  user-login works!
-</p>

myapp/src/lib/user/user-login/user-login.component.spec.ts

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

myapp/src/lib/user/user-login/user-login.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-user-login',
-  templateUrl: './user-login.component.html',
-  styleUrls: ['./user-login.component.scss'],
-  standalone: true,
-})
-export class UserLoginComponent  implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
-
-}