tab4 change

src/app/tab4/tab4.page.html

@@ -1,55 +1,87 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
+  <ion-toolbar color="primary">
     <ion-title>我的资料</ion-title>
+    <ion-buttons slot="end">
+      @if (isLoggedIn) {
+        <ion-button (click)="logout()">
+          <ion-icon slot="icon-only" name="log-out-outline"></ion-icon>
+        </ion-button>
+      } @else {
+        <ion-button (click)="openLogin()">
+          <ion-icon slot="icon-only" name="log-in-outline"></ion-icon>
+        </ion-button>
+      }
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding" [fullscreen]="true">
   <!-- 顶部个人信息区域 -->
   <div class="profile-section">
     <div class="avatar">
-      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+      <ion-avatar>
+        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+" alt="用户头像">
+      </ion-avatar>
     </div>
-    <div class="profile-info">
-      <div class="profile-name">
-        <span>运动达人</span>
-        <span class="profile-more">></span>
-      </div>
-      <div class="profile-stats">
-        <div class="stat-item">
-          <span class="stat-number">128</span> 关注
+    
+    @if (isLoggedIn) {
+      <div class="profile-info">
+        <div class="profile-name">
+          <span>{{ currentUser.name }}</span>
+          <span class="profile-more">></span>
         </div>
-        <div class="stat-item">
-          <span class="stat-number">356</span> 粉丝
+        <div class="profile-email">{{ currentUser.email }}</div>
+        <div class="profile-stats">
+          <div class="stat-item">
+            <span class="stat-number">{{ currentUser.stats.following }}</span> 关注
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">{{ currentUser.stats.followers }}</span> 粉丝
+          </div>
+          <div class="stat-item">
+            <span class="stat-number">{{ currentUser.stats.cheers }}</span> 加油
+          </div>
         </div>
-        <div class="stat-item">
-          <span class="stat-number">1,024</span> 加油
+        <div class="badge-container">
+          <ion-chip color="primary">
+            <ion-icon name="time-outline"></ion-icon>
+            <ion-label>累计运动 {{ currentUser.stats.hours }}h</ion-label>
+          </ion-chip>
+          <ion-chip color="secondary">
+            <ion-icon name="calendar-outline"></ion-icon>
+            <ion-label>坚持运动 {{ currentUser.stats.days }}天</ion-label>
+          </ion-chip>
+          <ion-chip color="tertiary">
+            <ion-icon name="trophy-outline"></ion-icon>
+            <ion-label>{{ currentUser.stats.medals }}枚奖牌</ion-label>
+          </ion-chip>
         </div>
       </div>
-      <div class="badge-container">
-        <ion-chip>
-          <ion-icon name="time-outline"></ion-icon>
-          <ion-label>累计运动 90h</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-icon name="calendar-outline"></ion-icon>
-          <ion-label>坚持运动 120天</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-icon name="trophy-outline"></ion-icon>
-          <ion-label>5枚奖牌</ion-label>
-        </ion-chip>
+    } @else {
+      <div class="welcome-section">
+        <h3>欢迎来到健身世界</h3>
+        <p>登录以查看个人资料和运动数据</p>
+        <div class="auth-buttons">
+          <ion-button expand="block" color="primary" (click)="openLogin()">
+            <ion-icon slot="start" name="log-in-outline"></ion-icon>
+            登录
+          </ion-button>
+          <ion-button expand="block" fill="outline" color="medium" (click)="openRegister()">
+            <ion-icon slot="start" name="person-add-outline"></ion-icon>
+            注册
+          </ion-button>
+        </div>
       </div>
-    </div>
+    }
   </div>
   
-  <!-- 卡片区域 -->
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>我的数据</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <div class="data-card">
+  @if (isLoggedIn) {
+    <!-- 卡片区域 -->
+    <ion-card class="data-card">
+      <ion-card-header>
+        <ion-card-title>我的数据</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
         <div class="data-content">
           <div class="data-value">90分钟</div>
           <div class="data-label">本周运动</div>
@@ -61,16 +93,14 @@
             </ion-col>
           </ion-row>
         </div>
-      </div>
-    </ion-card-content>
-  </ion-card>
+      </ion-card-content>
+    </ion-card>
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>总运动数据</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <div class="data-card">
+    <ion-card class="data-card">
+      <ion-card-header>
+        <ion-card-title>总运动数据</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
         <div class="data-content">
           <div class="data-value">5,400分钟</div>
           <div class="data-label">累计运动时长</div>
@@ -82,56 +112,171 @@
             </ion-col>
           </ion-row>
         </div>
+      </ion-card-content>
+    </ion-card>
+
+    <!-- 功能按钮区域 -->
+    <ion-list class="function-list">
+      <ion-item>
+        <ion-icon slot="start" name="document-text-outline" color="primary"></ion-icon>
+        <ion-label>我的动态</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="heart-outline" color="danger"></ion-icon>
+        <ion-label>收藏与加油</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="school-outline" color="warning"></ion-icon>
+        <ion-label>我的课程</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="medal-outline" color="success"></ion-icon>
+        <ion-label>我的活动</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="nutrition-outline" color="tertiary"></ion-icon>
+        <ion-label>我的饮食</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="wallet-outline" color="medium"></ion-icon>
+        <ion-label>订单与钱包</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="gift-outline" color="secondary"></ion-icon>
+        <ion-label>领福利</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="people-outline" color="primary"></ion-icon>
+        <ion-label>我的团队</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" name="help-circle-outline" color="medium"></ion-icon>
+        <ion-label>帮助中心</ion-label>
+        <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+      </ion-item>
+    </ion-list>
+  }
+
+  <!-- 登录模态框 -->
+  <!-- 登录模态框 -->
+<ion-modal [isOpen]="showLoginModal">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>用户登录</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="closeModals()">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="auth-content">
+      <div class="auth-container">
+        <!-- 邮箱输入 -->
+        <div class="input-item">
+          <label class="input-label">邮箱</label>
+          <ion-input type="email" [(ngModel)]="loginForm.email" placeholder="请输入您的邮箱"></ion-input>
+        </div>
+        
+        <!-- 密码输入 -->
+        <div class="input-item">
+          <label class="input-label">密码</label>
+          <ion-input type="password" [(ngModel)]="loginForm.password" placeholder="请输入密码"></ion-input>
+        </div>
+        
+        <!-- 错误信息 -->
+        @if (authError) {
+          <div class="error-message">
+            <ion-icon name="warning-outline"></ion-icon>
+            {{ authError }}
+          </div>
+        }
+        
+        <!-- 登录按钮 -->
+        <ion-button expand="block" color="primary" (click)="handleLogin()">
+          <ion-icon slot="start" name="log-in-outline"></ion-icon>
+          登录
+        </ion-button>
+        
+        <!-- 页脚链接 -->
+        <div class="auth-footer">
+          <p>还没有账号？<a (click)="openRegister()">立即注册</a></p>
+        </div>
       </div>
-    </ion-card-content>
-  </ion-card>
+    </ion-content>
+  </ng-template>
+</ion-modal>
 
-  <!-- 功能按钮区域 -->
-  <ion-list>
-    <ion-item>
-      <ion-icon slot="start" name="document-text-outline"></ion-icon>
-      <ion-label>我的动态</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="heart-outline"></ion-icon>
-      <ion-label>收藏与加油</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="school-outline"></ion-icon>
-      <ion-label>我的课程</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="medal-outline"></ion-icon>
-      <ion-label>我的活动</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="nutrition-outline"></ion-icon>
-      <ion-label>我的饮食</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="wallet-outline"></ion-icon>
-      <ion-label>订单与钱包</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="gift-outline"></ion-icon>
-      <ion-label>领福利</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="people-outline"></ion-icon>
-      <ion-label>我的团队</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-    <ion-item>
-      <ion-icon slot="start" name="help-circle-outline"></ion-icon>
-      <ion-label>帮助中心</ion-label>
-      <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
-    </ion-item>
-  </ion-list>
+<!-- 注册模态框 -->
+<ion-modal [isOpen]="showRegisterModal">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>用户注册</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="closeModals()">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="auth-content">
+      <div class="auth-container">
+        <!-- 昵称输入 -->
+        <div class="input-item">
+          <label class="input-label">昵称</label>
+          <ion-input type="text" [(ngModel)]="registerForm.name" placeholder="设置您的昵称"></ion-input>
+        </div>
+        
+        <!-- 邮箱输入 -->
+        <div class="input-item">
+          <label class="input-label">邮箱</label>
+          <ion-input type="email" [(ngModel)]="registerForm.email" placeholder="请输入您的邮箱"></ion-input>
+        </div>
+        
+        <!-- 密码输入 -->
+        <div class="input-item">
+          <label class="input-label">密码</label>
+          <ion-input type="password" [(ngModel)]="registerForm.password" placeholder="设置密码（至少6位）"></ion-input>
+        </div>
+        
+        <!-- 确认密码输入 -->
+        <div class="input-item">
+          <label class="input-label">确认密码</label>
+          <ion-input type="password" [(ngModel)]="registerForm.confirmPassword" placeholder="请再次输入密码"></ion-input>
+        </div>
+        
+        <!-- 错误信息 -->
+        @if (authError) {
+          <div class="error-message">
+            <ion-icon name="warning-outline"></ion-icon>
+            {{ authError }}
+          </div>
+        }
+        
+        <!-- 注册按钮 -->
+        <ion-button expand="block" color="primary" (click)="handleRegister()">
+          <ion-icon slot="start" name="person-add-outline"></ion-icon>
+          注册
+        </ion-button>
+        
+        <!-- 页脚链接 -->
+        <div class="auth-footer">
+          <p>已有账号？<a (click)="openLogin()">立即登录</a></p>
+        </div>
+      </div>
+    </ion-content>
+  </ng-template>
+</ion-modal>
+  
+ 
 </ion-content>

src/app/tab4/tab4.page.scss

@@ -6,30 +6,30 @@
 .profile-section {
   display: flex;
   margin-bottom: 16px;
-  background-color: #fff; /* 设置个人信息区域背景颜色 */
-  padding: 16px;
-  border-radius: 8px; /* 添加圆角 */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  background: linear-gradient(135deg, var(--ion-color-primary) 0%, #4a8eff 100%);
+  padding: 20px;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  color: white;
 }
 
 .avatar {
-  width: 70px;
-  height: 70px;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
-  border: 2px solid var(--ion-color-primary); /* 统一边框颜色 */
+  border: 3px solid rgba(255, 255, 255, 0.3);
   overflow: hidden;
   margin-right: 15px;
   flex-shrink: 0;
-  background-color: #f0f0f0;
+  background-color: rgba(255, 255, 255, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
-}
-
-.avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover; /* 确保头像图片完整显示 */
+  
+  ion-avatar {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .profile-info {
@@ -37,17 +37,23 @@
 }
 
 .profile-name {
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   font-weight: bold;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   display: flex;
   justify-content: space-between;
-  color: #333; /* 设置字体颜色为深色 */
+  align-items: center;
+}
+
+.profile-email {
+  font-size: 0.9rem;
+  opacity: 0.9;
+  margin-bottom: 10px;
 }
 
 .profile-more {
-  font-size: 1.2rem;
-  color: #999; /* 设置“>”的颜色 */
+  font-size: 1.4rem;
+  opacity: 0.7;
 }
 
 .profile-stats {
@@ -57,13 +63,13 @@
 
 .stat-item {
   margin-right: 15px;
-  font-size: 0.8rem;
-  color: #666; /* 设置统计数字颜色 */
+  font-size: 0.9rem;
+  opacity: 0.9;
 }
 
 .stat-number {
   font-weight: bold;
-  color: #333; /* 设置统计数字颜色 */
+  font-size: 1.1rem;
 }
 
 .badge-container {
@@ -74,64 +80,162 @@
 }
 
 ion-chip {
-  --background: #f0f0f0; /* 设置徽章背景颜色 */
-  --color: #333; /* 设置徽章文字颜色 */
-  --border-radius: 8px; /* 设置徽章圆角 */
-  padding: 4px 8px; /* 调整徽章内边距 */
-  font-size: 0.8rem;
+  --background: rgba(255, 255, 255, 0.2);
+  --color: white;
+  --border-radius: 16px;
+  padding: 6px 12px;
+  font-size: 0.85rem;
+  backdrop-filter: blur(5px);
 }
 
 ion-icon {
-  font-size: 1rem; /* 调整图标大小 */
+  font-size: 1rem;
 }
 
-.data-card {
+.welcome-section {
+  flex: 1;
+  padding: 10px 0;
+  
+  h3 {
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin: 0 0 8px 0;
+  }
+  
+  p {
+    font-size: 0.95rem;
+    opacity: 0.9;
+    margin-bottom: 15px;
+  }
+}
+
+.auth-buttons {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
+  flex-direction: column;
+  gap: 10px;
+  
+  ion-button {
+    --border-radius: 12px;
+    font-weight: 500;
+  }
+}
+
+.data-card {
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  
+  ion-card-header {
+    padding-bottom: 0;
+    
+    ion-card-title {
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+  }
+  
+  ion-card-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+  }
+}
+
+.data-content {
+  flex: 1;
 }
 
 .data-value {
-  font-size: 1.5rem;
+  font-size: 1.6rem;
   font-weight: bold;
   margin-bottom: 5px;
-  color: #333; /* 设置数据值字体颜色 */
+  color: var(--ion-color-primary);
 }
 
 .data-label {
-  font-size: 0.8rem;
-  color: #666; /* 设置数据标签字体颜色 */
+  font-size: 0.9rem;
+  color: var(--ion-color-medium);
 }
 
 .chart-bar {
-  width: 8px;
-  background-color: var(--ion-color-primary);
-  border-radius: 4px;
+  width: 10px;
+  background: linear-gradient(to top, var(--ion-color-primary), #8ab6ff);
+  border-radius: 5px;
   margin: 0 auto;
   transition: height 0.5s ease;
 }
 
-ion-list {
-  margin-top: 16px;
-  border-radius: 8px;
+.function-list {
+  border-radius: 16px;
   overflow: hidden;
-}
-
-ion-item {
-  --background: #fff; /* 设置列表项背景颜色 */
-  --color: #333; /* 设置列表项字体颜色 */
-  --border-color: #eee; /* 统一边框颜色 */
-  --padding-start: 16px; /* 调整列表项内边距 */
-  --padding-end: 16px;
-  --min-height: 50px;
-}
-
-ion-icon {
-  color: #666; /* 设置图标颜色 */
-}
-
-/* 添加分割线样式 */
-ion-item:not(:last-child) {
-  border-bottom: 1px solid #eee;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-top: 20px;
+  
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --min-height: 60px;
+    --border-color: rgba(0, 0, 0, 0.05);
+    
+    ion-icon[slot="start"] {
+      font-size: 1.4rem;
+      margin-right: 15px;
+    }
+    
+    ion-label {
+      font-weight: 500;
+    }
+  }
+}
+
+.auth-container {
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px 0;
+  
+  ion-item {
+    --background: #f8f9fa;
+    --border-radius: 12px;
+    margin-bottom: 20px;
+    --padding-start: 15px;
+    --padding-end: 15px;
+  }
+  
+  ion-button {
+    margin-top: 10px;
+    --border-radius: 12px;
+    height: 50px;
+    font-weight: 600;
+  }
+}
+
+.error-message {
+  background: var(--ion-color-danger-tint);
+  color: var(--ion-color-danger);
+  padding: 12px;
+  border-radius: 8px;
+  margin: 15px 0;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+  
+  ion-icon {
+    margin-right: 8px;
+  }
+}
+
+.auth-footer {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 0.95rem;
+  color: var(--ion-color-medium);
+  
+  a {
+    color: var(--ion-color-primary);
+    text-decoration: none;
+    font-weight: 500;
+    cursor: pointer;
+  }
 }

src/app/tab4/tab4.page.ts

@@ -3,7 +3,8 @@ import {
   IonHeader, IonToolbar, IonTitle, IonContent, 
   IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
   IonChip, IonIcon, IonLabel, IonList, IonItem,
-  IonRow, IonCol
+  IonRow, IonCol, IonModal, IonButton, IonInput,
+  IonGrid, IonButtons, IonBackButton, IonAvatar
 } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { 
@@ -11,9 +12,11 @@ import {
   documentTextOutline, heartOutline, schoolOutline, 
   medalOutline, nutritionOutline, walletOutline, 
   giftOutline, peopleOutline, helpCircleOutline, 
-  chevronForwardOutline 
-} from 'ionicons/icons';
-import { CommonModule } from '@angular/common'; // 导入CommonModule解决*ngFor问题
+  chevronForwardOutline, logInOutline, personAddOutline,
+  logOutOutline, closeOutline, checkmarkOutline, warningOutline } from 'ionicons/icons';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { CloudUser } from '../../lib/ncloud';
 
 @Component({
   selector: 'app-tab4',
@@ -21,24 +24,186 @@ import { CommonModule } from '@angular/common'; // 导入CommonModule解决*ngFo
   styleUrls: ['tab4.page.scss'],
   standalone: true,
   imports: [
-    CommonModule, // 必须导入
+    CommonModule,
+    FormsModule,
     IonHeader, IonToolbar, IonTitle, IonContent, 
     IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
     IonChip, IonIcon, IonLabel, IonList, IonItem,
-    IonRow, IonCol
+    IonRow, IonCol, IonModal, IonButton, IonInput,
+    IonGrid, IonButtons, IonBackButton, IonAvatar
   ],
 })
 export class Tab4Page {
   weeklyBars = [30, 60, 90, 40, 70, 50, 80];
   totalBars = [20, 40, 60, 80, 100, 50, 70];
+  
+  // 用户状态
+  isLoggedIn = false;
+  currentUser: any = {
+    name: '运动达人',
+    email: '',
+    stats: {
+      following: 128,
+      followers: 356,
+      cheers: 1024,
+      hours: 90,
+      days: 120,
+      medals: 5
+    }
+  };
+  
+  // 登录/注册表单
+  loginForm = {
+    email: '',
+    password: ''
+  };
+  
+  registerForm = {
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  };
+  
+  // 模态框状态
+  showLoginModal = false;
+  showRegisterModal = false;
+  authError = '';
+  
+  // 用户服务
+  userService = new CloudUser();
 
   constructor() {
-    addIcons({ 
-      timeOutline, calendarOutline, trophyOutline, 
-      documentTextOutline, heartOutline, schoolOutline, 
-      medalOutline, nutritionOutline, walletOutline, 
-      giftOutline, peopleOutline, helpCircleOutline, 
-      chevronForwardOutline 
-    });
+    addIcons({logOutOutline,logInOutline,timeOutline,calendarOutline,trophyOutline,personAddOutline,documentTextOutline,chevronForwardOutline,heartOutline,schoolOutline,medalOutline,nutritionOutline,walletOutline,giftOutline,peopleOutline,helpCircleOutline,closeOutline,warningOutline,checkmarkOutline});
+    
+    // 检查登录状态
+    this.checkLoginStatus();
+  }
+  
+  // 检查登录状态
+  async checkLoginStatus() {
+    const userData = localStorage.getItem("NCloud/dev/User");
+    if (userData) {
+      const user = JSON.parse(userData);
+      this.isLoggedIn = true;
+      this.currentUser = {
+        ...this.currentUser,
+        name: user.name || '运动达人',
+        email: user.email
+      };
+    }
+  }
+  
+  // 打开登录模态框
+  openLogin() {
+    this.showLoginModal = true;
+    this.authError = '';
+    this.loginForm = { email: '', password: '' };
+  }
+  
+  // 打开注册模态框
+  openRegister() {
+    this.showRegisterModal = true;
+    this.authError = '';
+    this.registerForm = { 
+      name: '', 
+      email: '', 
+      password: '', 
+      confirmPassword: '' 
+    };
+  }
+  
+  // 关闭模态框
+  closeModals() {
+    this.showLoginModal = false;
+    this.showRegisterModal = false;
+  }
+  
+  // 处理登录
+  async handleLogin() {
+    if (!this.loginForm.email || !this.loginForm.password) {
+      this.authError = '请输入邮箱和密码';
+      return;
+    }
+    
+    try {
+      const user = await this.userService.login(
+        this.loginForm.email, 
+        this.loginForm.password
+      );
+      
+      if (user) {
+        this.isLoggedIn = true;
+        this.currentUser = {
+          ...this.currentUser,
+          name: user.data['name'] || '运动达人',
+          email: user.data['email'] || ''
+        };
+    
+        this.closeModals();
+      } else {
+        this.authError = '登录失败，请检查邮箱和密码';
+      }
+    } catch (error) {
+      this.authError = '登录过程中发生错误';
+      console.error(error);
+    }
+  }
+  
+  // 处理注册
+  async handleRegister() {
+    if (this.registerForm.password !== this.registerForm.confirmPassword) {
+      this.authError = '两次输入的密码不一致';
+      return;
+    }
+    
+    if (!this.registerForm.name || !this.registerForm.email || !this.registerForm.password) {
+      this.authError = '请填写所有必填字段';
+      return;
+    }
+    
+    try {
+      const user = await this.userService.signUp(
+        this.registerForm.email,
+        this.registerForm.password,
+        {
+          name: this.registerForm.name,
+          email: this.registerForm.email
+        }
+      );
+      
+      if (user) {
+        this.isLoggedIn = true;
+        this.currentUser = {
+          ...this.currentUser,
+          name: this.registerForm.name,
+          email: this.registerForm.email
+        };
+        this.closeModals();
+      } else {
+        this.authError = '注册失败，请稍后再试';
+      }
+    } catch (error) {
+      this.authError = '注册过程中发生错误';
+      console.error(error);
+    }
+  }
+  
+  // 退出登录
+  async logout() {
+    await this.userService.logout();
+    this.isLoggedIn = false;
+    this.currentUser = {
+      name: '运动达人',
+      email: '',
+      stats: {
+        following: 128,
+        followers: 356,
+        cheers: 1024,
+        hours: 90,
+        days: 120,
+        medals: 5
+      }
+    };
   }
 }