wzn 4 місяців тому
батько
коміт
c476d2841d

+ 60 - 9
src/app/profile/profile.page.html

@@ -1,13 +1,64 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>profile</ion-title>
+    <ion-title>我的</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="goToHelpPage()">
+        <ion-icon name="help-circle-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">profile</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>
+<ion-content>
+  <ion-list>
+    <ion-item (click)="goToProfileInfo()">
+      <ion-avatar slot="start">
+        <img src="assets/img/avatar.png" alt="头像">
+      </ion-avatar>
+      <ion-label>
+        <h2>{{nickname}}</h2>
+        <p>已坚持打卡{{days}}天</p>
+      </ion-label>
+    </ion-item>
+    
+    <ion-item (click)="goToStatsReport()">
+      <ion-label>统计报告</ion-label>
+      <ion-icon slot="end" name="bar-chart-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item (click)="share()">
+      <ion-label>分享</ion-label>
+      <ion-icon slot="end" name="share-social-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item (click)="backup()">
+      <ion-label>备份</ion-label>
+      <ion-icon slot="end" name="cloud-upload-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item (click)="restore()">
+      <ion-label>恢复</ion-label>
+      <ion-icon slot="end" name="cloud-download-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item (click)="sync()">
+      <ion-label>云同步</ion-label>
+      <ion-icon slot="end" name="sync-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item (click)="clearCache()">
+      <ion-label>清除缓存</ion-label>
+      <ion-icon slot="end" name="trash-bin-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item (click)="clearStats()">
+      <ion-label>清除统计数据</ion-label>
+      <ion-icon slot="end" name="stats-chart-outline"></ion-icon>
+    </ion-item>
+
+    <ion-item (click)="changeLanguage()">
+      <ion-label>语言设置</ion-label>
+      <ion-icon slot="end" name="language-outline"></ion-icon>
+    </ion-item>
+  </ion-list>
+<ion-content>

+ 32 - 0
src/app/profile/profile.page.scss

@@ -0,0 +1,32 @@
+ion-item {
+    --background: #ffffff;
+    --color: #000000;
+    --border-color: #f4f4f4;
+    --border-width: 1px;
+    --min-height: 50px;
+    --padding-start: 10px;
+    --padding-end: 10px;
+    --inner-padding-start: 10px;
+    --inner-padding-end: 10px;
+    --inner-padding-top: 5px;
+    --inner-padding-bottom: 5px;
+  }
+  
+  ion-avatar img {
+    width: 100%;
+    height: auto;
+    border-radius: 50%;
+  }
+  
+  ion-label {
+    h2 {
+      font-size: 1.2em;
+      margin: 0;
+      padding: 0;
+    }
+    p {
+      font-size: 0.9em;
+      color: gray;
+    }
+  }
+  

+ 43 - 4
src/app/profile/profile.page.ts

@@ -1,15 +1,54 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.page.html',
   styleUrls: ['./profile.page.scss'],
 })
-export class ProfilePage implements OnInit {
+export class ProfilePage {
+  nickname: string = '用户昵称';
+  days: number = 123; // 模拟数据,可根据实际情况修改
 
-  constructor() { }
+  constructor(private navCtrl: NavController) {}
 
-  ngOnInit() {
+  goToHelpPage() {
+    this.navCtrl.navigateForward('/help');
   }
 
+  goToProfileInfo() {
+    this.navCtrl.navigateForward('/profile-info');
+  }
+
+  goToStatsReport() {
+    this.navCtrl.navigateForward('/stats-report');
+  }
+
+  share() {
+    // 分享功能实现
+  }
+
+  backup() {
+    // 备份功能实现
+  }
+
+  restore() {
+    // 恢复功能实现
+  }
+
+  sync() {
+    // 云同步功能实现
+  }
+
+  clearCache() {
+    // 清除缓存功能实现
+  }
+
+  clearStats() {
+    // 清除统计数据功能实现
+  }
+
+  changeLanguage() {
+    // 语言设置功能实现
+  }
 }