框架优化

AiStudy-app/src/app/tab3/tab3.page.html

@@ -1,17 +1,98 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
-    <ion-title>
-      我的
-    </ion-title>
+    <ion-title>我的</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content [fullscreen]="true" class="ion-padding">
+  <!-- 用户信息卡片 -->
+  <ion-card class="user-card">
+    <ion-item lines="none">
+      <ion-avatar slot="start">
+        <img [src]="userAvatar || 'assets/default-avatar.png'" alt="用户头像">
+      </ion-avatar>
+      <ion-label>
+        <h2>{{ userName || '未登录' }}</h2>
+        <p>{{ userLevel }}</p>
+      </ion-label>
+      <ion-button fill="clear" (click)="editProfile()">
+        <ion-icon name="create-outline"></ion-icon>
+      </ion-button>
+    </ion-item>
+  </ion-card>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  <!-- 个人中心板块 -->
+  <ion-list-header>
+    <ion-label>个人中心</ion-label>
+  </ion-list-header>
+  <ion-list>
+    <ion-item button (click)="navigateTo('profile')">
+      <ion-icon name="person-outline" slot="start"></ion-icon>
+      <ion-label>个人资料</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    <ion-item button (click)="navigateTo('achievements')">
+      <ion-icon name="trophy-outline" slot="start"></ion-icon>
+      <ion-label>成就与勋章</ion-label>
+      <ion-badge slot="end" color="success">{{ achievementCount }}</ion-badge>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    <ion-item button (click)="navigateTo('history')">
+      <ion-icon name="time-outline" slot="start"></ion-icon>
+      <ion-label>学习历史</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+  </ion-list>
+
+  <!-- 订阅与支付板块 -->
+  <ion-list-header>
+    <ion-label>订阅与支付</ion-label>
+  </ion-list-header>
+  <ion-list>
+    <ion-item button (click)="navigateTo('subscription')">
+      <ion-icon name="card-outline" slot="start"></ion-icon>
+      <ion-label>订阅状态</ion-label>
+      <ion-badge slot="end" [color]="subscriptionStatus.color">{{ subscriptionStatus.text }}</ion-badge>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    <ion-item button (click)="navigateTo('courses')">
+      <ion-icon name="book-outline" slot="start"></ion-icon>
+      <ion-label>购买课程</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    <ion-item button (click)="navigateTo('payments')">
+      <ion-icon name="receipt-outline" slot="start"></ion-icon>
+      <ion-label>支付记录</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+  </ion-list>
+
+  <!-- 设置板块 -->
+  <ion-list-header>
+    <ion-label>设置</ion-label>
+  </ion-list-header>
+  <ion-list>
+    <ion-item button (click)="navigateTo('notifications')">
+      <ion-icon name="notifications-outline" slot="start"></ion-icon>
+      <ion-label>消息通知</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    <ion-item button (click)="navigateTo('privacy')">
+      <ion-icon name="lock-closed-outline" slot="start"></ion-icon>
+      <ion-label>隐私设置</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+    <ion-item button (click)="navigateTo('about')">
+      <ion-icon name="information-circle-outline" slot="start"></ion-icon>
+      <ion-label>关于我们</ion-label>
+      <ion-icon name="chevron-forward" slot="end"></ion-icon>
+    </ion-item>
+  </ion-list>
+
+  <!-- 退出登录按钮 -->
+  <div class="logout-button-container">
+    <ion-button expand="block" color="danger" (click)="logout()">
+      退出登录
+    </ion-button>
+  </div>
 </ion-content>

AiStudy-app/src/app/tab3/tab3.page.scss

@@ -0,0 +1,70 @@
+.user-card {
+  margin: 16px 0;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --padding-top: 12px;
+    --padding-bottom: 12px;
+  }
+
+  ion-avatar {
+    width: 60px;
+    height: 60px;
+  }
+
+  h2 {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  p {
+    font-size: 14px;
+    color: var(--ion-color-medium);
+    margin: 0;
+  }
+}
+
+ion-list-header {
+  padding-top: 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ion-color-medium);
+}
+
+ion-list {
+  margin-bottom: 16px;
+  background: transparent;
+
+  ion-item {
+    --padding-start: 16px;
+    --padding-end: 12px;
+    --border-radius: 8px;
+    margin-bottom: 4px;
+
+    ion-icon[slot="start"] {
+      color: var(--ion-color-primary);
+      margin-right: 16px;
+    }
+
+    ion-badge {
+      margin-right: 8px;
+    }
+  }
+}
+
+.logout-button-container {
+  padding: 16px;
+  margin-top: 16px;
+  margin-bottom: 32px;
+
+  ion-button {
+    --border-radius: 8px;
+    height: 48px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}

AiStudy-app/src/app/tab3/tab3.page.ts

@@ -1,14 +1,130 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { 
+  IonHeader, 
+  IonToolbar, 
+  IonTitle, 
+  IonContent,
+  IonCard,
+  IonItem,
+  IonAvatar,
+  IonLabel,
+  IonButton,
+  IonIcon,
+  IonList,
+  IonListHeader,
+  IonBadge,
+  AlertController
+} from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { 
+  personOutline,
+  createOutline,
+  trophyOutline,
+  timeOutline,
+  cardOutline,
+  bookOutline,
+  receiptOutline,
+  notificationsOutline,
+  lockClosedOutline,
+  informationCircleOutline,
+  chevronForward
+} from 'ionicons/icons';
 
 @Component({
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent],
+  imports: [
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonCard,
+    IonItem,
+    IonAvatar,
+    IonLabel,
+    IonButton,
+    IonIcon,
+    IonList,
+    IonListHeader,
+    IonBadge
+  ]
 })
-export class Tab3Page {
-  constructor() {}
+export class Tab3Page implements OnInit {
+  // 用户信息
+  userAvatar: string = 'assets/default-avatar.png';
+  userName: string = 'namgnal';
+  userLevel: string = 'LV.3 学习达人';
+  achievementCount: number = 5;
+  
+  // 订阅状态
+  subscriptionStatus = {
+    text: 'AiStudy Plus',
+    color: 'success'
+  };
+
+  constructor(
+    private router: Router,
+    private alertController: AlertController
+  ) {
+    // 添加图标
+    addIcons({
+      personOutline,
+      createOutline,
+      trophyOutline,
+      timeOutline,
+      cardOutline,
+      bookOutline,
+      receiptOutline,
+      notificationsOutline,
+      lockClosedOutline,
+      informationCircleOutline,
+      chevronForward
+    });
+  }
+
+  ngOnInit() {
+    // 初始化数据
+    this.loadUserData();
+  }
+
+  // 加载用户数据
+  async loadUserData() {
+    // TODO: 从服务器获取用户数据
+  }
+
+  // 编辑个人资料
+  editProfile() {
+    this.navigateTo('profile');
+  }
+
+  // 导航到指定页面
+  navigateTo(page: string) {
+    this.router.navigate([`/tabs/tab3/${page}`]);
+  }
+
+  // 退出登录
+  async logout() {
+    const alert = await this.alertController.create({
+      header: '确认退出',
+      message: '您确定要退出登录吗？',
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel'
+        },
+        {
+          text: '确定',
+          handler: () => {
+            // TODO: 实现退出登录逻辑
+            console.log('执行退出登录');
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
 }