fix:tab4

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

@@ -28,5 +28,9 @@ export const routes: Routes = [
     path: 'history',
     loadComponent: () => import('./homepage/history/history.page').then( m => m.HistoryPage)
   },
+  {
+    path: 'myposts',
+    loadComponent: () => import('./homepage/myposts/myposts.page').then( m => m.MypostsPage)
+  },
 
 ];

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

@@ -0,0 +1,33 @@
+<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 [fullscreen]="true">
+<ion-accordion-group [multiple]="true" [value]="['first', 'third']">
+        <ion-accordion value="first">
+          <ion-item slot="header" color="light">
+            <ion-label>发布的帖子</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">帖子内容</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header" color="light">
+            <ion-label>发表的评论</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">评论内容</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header" color="light">
+            <ion-label>未发布的帖子</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">草稿</div>
+        </ion-accordion>
+</ion-accordion-group>
+</ion-content> 

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

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

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

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

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

@@ -29,7 +29,7 @@
     <div class="profile-container">
       <div class="avatar-container">
         <ion-avatar class="avatar">
-          <img [src]="currentUser?.get('avatar')" alt="avatar">
+          <img [src]="currentUser?.get('avatar') || avatarUrl" alt="avatar">
         </ion-avatar>
         <div class="user-info">
           <ion-label class="username">{{ currentUser?.get("username") }}</ion-label>
@@ -43,44 +43,56 @@
 
     </div>
   } 
-    <div class="settings-container">
+
+   <div class="settings-container">
+     <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+     <ion-reorder-group [disabled]="isDisabled" (ionItemReorder)="handleReorder($any($event))">
+    
       <ion-row>
         <ion-col>
           <ion-item>
-            <ion-label>历史记录</ion-label>
-            <ion-icon name="footsteps-outline" slot="end"></ion-icon>
+            <ion-label (click)="goToMyposts()">我的动态</ion-label>
+            <ion-reorder  name="footsteps-outline"></ion-reorder>
           </ion-item>
         </ion-col>
       </ion-row>
       <ion-row>
         <ion-col>
           <ion-item>
-            <ion-icon name="bookmark-outline" slot="end"></ion-icon>
-          <ion-label>收藏</ion-label>
+            <ion-label (click)="goToHistory()">历史记录</ion-label>
+            <ion-reorder name="footsteps-outline" ></ion-reorder>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-item>
+             <ion-label (click)="goToLike()">点赞</ion-label>
+             <ion-reorder name="bookmark-outline" ></ion-reorder>
         </ion-item>
         </ion-col>
       </ion-row>
       <ion-row>
         <ion-col>
           <ion-item>
-            <ion-label>隐私与安全设置</ion-label>
-            <ion-icon name="lock-closed-outline" slot="end"></ion-icon>
+            <ion-label (click)="goToPrivacy()">隐私与安全设置</ion-label>
+            <ion-reorder name="lock-closed-outline" ></ion-reorder>
           </ion-item>
         </ion-col>
       </ion-row>
       <ion-row>
         <ion-col>
           <ion-item>
-            <ion-label>个性化偏好设置</ion-label>
-            <ion-icon name="settings" slot="end"></ion-icon>
+            <ion-label (click)="goToSetting()">个性化偏好设置</ion-label>
+            <ion-reorder name="settings" ></ion-reorder>
           </ion-item>
         </ion-col>
       </ion-row>
       <ion-row>
         <ion-col>
           <ion-item>
-            <ion-label>通知与消息管理</ion-label>
-            <ion-icon slot="end" name="notifications-outline"></ion-icon>
+            <ion-label (click)="goToInform()">通知与消息管理</ion-label>
+            <ion-reorder  name="notifications-outline"></ion-reorder>
           </ion-item>
         </ion-col>
       </ion-row>
@@ -88,9 +100,15 @@
         <ion-col>
           <ion-item>
             <ion-label (click)="goToHelp()">设置与帮助</ion-label>
-            <ion-icon name="help-circle" slot="end"></ion-icon>
+            <ion-reorder name="help-circle" ></ion-reorder>
           </ion-item>
         </ion-col>
       </ion-row>
+    </ion-reorder-group>
     </div>
-  </ion-content>
+  
+  
+  <ion-button (click)="toggleReorder()"> Toggle Reorder </ion-button>
+
+
+</ion-content>

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

@@ -3,7 +3,10 @@ import {
   IonAvatar,IonHeader ,IonButton,IonCol,IonContent,
   IonItem,IonLabel,IonRow,IonTitle,IonToolbar,ModalController,
   IonIcon,
-  NavController
+  NavController,
+  ItemReorderEventDetail,
+  IonReorder,
+  IonReorderGroup
    , } from '@ionic/angular/standalone';
 import { CloudUser } from 'src/lib/ncloud';
 import { openUserLoginModal } from 'src/lib/user/modal-user-login/modal-user-login.component';
@@ -14,7 +17,7 @@ import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.
 
 
 
-
+ 
 @Component({
   selector: 'app-tab4',
   templateUrl: 'tab4.page.html',
@@ -22,7 +25,7 @@ import { openUserEditModal } from 'src/lib/user/modal-user-edit/modal-user-edit.
   standalone: true,
   imports: [  
       IonHeader,IonToolbar,IonTitle,IonContent,IonAvatar,IonLabel,IonButton,IonRow,IonCol,
-      IonItem,IonIcon,
+      IonItem,IonIcon,IonReorder,IonReorderGroup,
   ],
 })
 export class Tab4Page {
@@ -30,6 +33,7 @@ export class Tab4Page {
     username: 'yi',
     // 其他用户信息字段...
   };
+  public isDisabled = true;
   avatarUrl: string = 'assets/img/1.png'; // 默认头像路径
  
   currentUser:CloudUser|undefined
@@ -65,5 +69,43 @@ export class Tab4Page {
   goToHelp() {
     this.navCtrl.navigateForward('/help');
   }
+  goToHistory() {
+    this.navCtrl.navigateForward('/history');
+  }
+  goToLike() {
+    this.navCtrl.navigateForward('/like');
+  }
+  goToMyposts() {
+    this.navCtrl.navigateForward('/myposts');
+  }
+  goToInform() {
+    this.navCtrl.navigateForward('/inform');
+  }
+  goToPrivacy() {
+    this.navCtrl.navigateForward('/privacy');
+  }
+  goToSetting() {
+ 
+  }
+
+
+
+  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+    // The `from` and `to` properties contain the index of the item
+    // when the drag started and ended, respectively
+    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+
+    // Finish the reorder and position the item in the DOM based on
+    // where the gesture ended. This method can also be called directly
+    // by the reorder group
+    ev.detail.complete();
+  }
+
+  toggleReorder() {
+    this.isDisabled = !this.isDisabled;
+  }
+
+
+
 
 }