add:homepage

FilmDraw-app/src/app/app.routes.ts

@@ -1,12 +1,32 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'interact',
+    loadComponent: () => import('./interact/interact.page').then( m => m.InteractPage)
+  },
  {
+    path: 'help',
+    loadComponent: () => import('./homepage/help/help.page').then( m => m.HelpPage)
+  },
+  {
+    path: 'like',
+    loadComponent: () => import('./homepage/like/like.page').then( m => m.LikePage)
+  },
   {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+    path: 'inform',
+    loadComponent: () => import('./homepage/inform/inform.page').then( m => m.InformPage)
   },
   {
-    path: 'interact',
-    loadComponent: () => import('./interact/interact.page').then( m => m.InteractPage)
+    path: 'privacy',
+    loadComponent: () => import('./homepage/privacy/privacy.page').then( m => m.PrivacyPage)
   },
-];
+  {
+    path: 'history',
+    loadComponent: () => import('./homepage/history/history.page').then( m => m.HistoryPage)
+  },
+
+];

FilmDraw-app/src/app/homepage/help/help.page.html

@@ -0,0 +1,49 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>帮助</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="closeHelp()">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="help-content">
+  <h2>欢迎来到帮助页面</h2>
+  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在这里你可以找到使用本应用程序的指南和常见问题解答。</p>
+
+  <h3>常见问题</h3>
+  <ion-list>
+    <ion-item>
+      <ion-label>
+        <h2>如何使用此应用程序？</h2>
+        <p>请查看我们的使用指南，了解如何开始使用。您可以在主菜单中找到所有功能。</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>如何报告问题？</h2>
+        <p>您可以通过应用内的反馈功能报告问题，或通过我们的支持邮箱与我们联系。</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>如何重置密码？</h2>
+        <p>在登录页面点击“忘记密码”，然后按照提示进行操作以重置您的密码。</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>如何更新个人信息？</h2>
+        <p>您可以在个人资料页面更新您的信息，包括姓名、邮箱和头像。</p>
+      </ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>
+        <h2>应用程序是否支持多语言？</h2>
+        <p>是的，您可以在设置中选择您希望使用的语言。</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+</ion-content>

FilmDraw-app/src/app/homepage/help/help.page.scss

@@ -0,0 +1,54 @@
+.help-content {
+    background-color: #f9f9f9; // 背景颜色
+    color: #333; // 字体颜色
+    border-radius: 8px;
+    background-color: #fff; // 列表背景
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 阴影效果
+      }
+  
+    h2 {
+      font-size: 24px;
+      margin-bottom: 16px;
+      color: #036a99 // 标题颜色
+    }
+    
+    p {
+        font-size: 14px;
+        color: #666; // 问题内容颜色
+        margin-top: 4px;
+      }
+  
+    h3 {
+      margin-top: 24px;
+      margin-bottom: 8px;
+      font-size: 20px;
+      color: #555; // 小标题颜色
+    }
+  
+    ion-list {
+      margin-top: 16px;
+      border-radius: 8px;
+      background-color: #fff; // 列表背景
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 阴影效果
+    }
+  
+    ion-item {
+      border-bottom: 1px solid #eee; // 列表项分隔线
+      padding: 12px 16px;
+  
+      &:last-child {
+        border-bottom: none; // 最后一个项去掉分隔线
+      }
+  
+      h2 {
+        font-size: 18px;
+        color: #036a99 // 问题标题颜色
+      }
+  
+      p {
+        font-size: 14px;
+        color: #666; // 问题内容颜色
+        margin-top: 4px;
+      }
+    }
+  

FilmDraw-app/src/app/homepage/help/help.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HelpPage } from './help.page';
+
+describe('HelpPage', () => {
+  let component: HelpPage;
+  let fixture: ComponentFixture<HelpPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HelpPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

FilmDraw-app/src/app/homepage/help/help.page.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonItem,IonButton, IonButtons, IonContent, IonHeader, IonLabel, IonList, IonTitle, IonToolbar, NavController, IonIcon } from '@ionic/angular/standalone';
+import { close } from 'ionicons/icons';
+import { addIcons } from 'ionicons';
+
+@Component({
+  selector: 'app-help',
+  templateUrl: './help.page.html',
+  styleUrls: ['./help.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle,  CommonModule, FormsModule,
+    IonToolbar,IonLabel,IonButton,IonButtons,IonList,IonItem,IonIcon,
+  ]
+})
+export class HelpPage implements OnInit {
+
+  constructor(private navCtrl: NavController) {
+   addIcons( {close})
+  }
+
+  closeHelp() {
+    this.navCtrl.back();
+  }
+
+  ngOnInit() {
+  }
+
+}

FilmDraw-app/src/app/homepage/history/history.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>History</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">History</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

FilmDraw-app/src/app/homepage/history/history.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HistoryPage } from './history.page';
+
+describe('HistoryPage', () => {
+  let component: HistoryPage;
+  let fixture: ComponentFixture<HistoryPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HistoryPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

FilmDraw-app/src/app/homepage/history/history.page.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-history',
+  templateUrl: './history.page.html',
+  styleUrls: ['./history.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+})
+export class HistoryPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

FilmDraw-app/src/app/homepage/inform/inform.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Inform</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Inform</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

FilmDraw-app/src/app/homepage/inform/inform.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { InformPage } from './inform.page';
+
+describe('InformPage', () => {
+  let component: InformPage;
+  let fixture: ComponentFixture<InformPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InformPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

FilmDraw-app/src/app/homepage/inform/inform.page.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-inform',
+  templateUrl: './inform.page.html',
+  styleUrls: ['./inform.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+})
+export class InformPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

FilmDraw-app/src/app/homepage/like/like.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Like</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Like</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

FilmDraw-app/src/app/homepage/like/like.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LikePage } from './like.page';
+
+describe('LikePage', () => {
+  let component: LikePage;
+  let fixture: ComponentFixture<LikePage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LikePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

FilmDraw-app/src/app/homepage/like/like.page.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-like',
+  templateUrl: './like.page.html',
+  styleUrls: ['./like.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+})
+export class LikePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

FilmDraw-app/src/app/homepage/privacy/privacy.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>Privacy</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Privacy</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

FilmDraw-app/src/app/homepage/privacy/privacy.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PrivacyPage } from './privacy.page';
+
+describe('PrivacyPage', () => {
+  let component: PrivacyPage;
+  let fixture: ComponentFixture<PrivacyPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrivacyPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

FilmDraw-app/src/app/homepage/privacy/privacy.page.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-privacy',
+  templateUrl: './privacy.page.html',
+  styleUrls: ['./privacy.page.scss'],
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+})
+export class PrivacyPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -87,7 +87,7 @@
       <ion-row>
         <ion-col>
           <ion-item>
-            <ion-label>设置与帮助</ion-label>
+            <ion-label (click)="goToHelp()">设置与帮助</ion-label>
             <ion-icon name="help-circle" slot="end"></ion-icon>
           </ion-item>
         </ion-col>

FilmDraw-app/src/app/tab4/tab4.page.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 import { 
   IonAvatar,IonHeader ,IonButton,IonCol,IonContent,
   IonItem,IonLabel,IonRow,IonTitle,IonToolbar,ModalController,
-  IonIcon
+  IonIcon,
+  NavController
    , } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
@@ -32,7 +33,7 @@ export class Tab4Page {
   avatarUrl: string = 'assets/img/tx.jpg'; // 默认头像路径
  
   currentUser:CloudUser|undefined
-  constructor(private modalCtrl:ModalController) {
+  constructor(private modalCtrl:ModalController, private navCtrl: NavController) {
     this.currentUser = new CloudUser();
     addIcons({helpCircle,notificationsOutline,settings,lockClosedOutline,bookmarkOutline,footstepsOutline});
   
@@ -60,4 +61,9 @@ export class Tab4Page {
   openUserEditModal(this.modalCtrl);
   }
 
+
+  goToHelp() {
+    this.navCtrl.navigateForward('/help');
+  }
+
 }