app.1.2

angular.json

@@ -136,7 +136,8 @@
   "cli": {
     "schematicCollections": [
       "@ionic/angular-toolkit"
-    ]
+    ],
+    "analytics": false
   },
   "schematics": {
     "@ionic/angular-toolkit:component": {

src/app/app-routing.module.ts

@@ -5,6 +5,10 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'tab1/person',
+    loadChildren: () => import('./tab1-person/tab1-person.module').then(m => m.Tab1PersonPageModule)
   }
 ];
 @NgModule({
@@ -13,4 +17,4 @@ const routes: Routes = [
   ],
   exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

src/app/tab1-person/tab1-person-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { Tab1PersonPage } from './tab1-person.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: Tab1PersonPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class Tab1PersonPageRoutingModule {}

src/app/tab1-person/tab1-person.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { Tab1PersonPageRoutingModule } from './tab1-person-routing.module';
+
+import { Tab1PersonPage } from './tab1-person.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    Tab1PersonPageRoutingModule
+  ],
+  declarations: [Tab1PersonPage]
+})
+export class Tab1PersonPageModule {}

src/app/tab1-person/tab1-person.page.html

@@ -0,0 +1,62 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-item lines="none">
+      <ion-buttons slot="start" [routerLink]="['/tabs/tab1']">
+        <ion-icon name="chevron-back-outline" size="large"></ion-icon>
+      </ion-buttons>
+      <ion-label>
+        <ion-note>虚拟身份名</ion-note>
+      </ion-label>
+    </ion-item>
+
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+
+  <ng-container *ngIf="cate=='消息'">
+    <ion-list>
+      <ion-item *ngFor="let message of messages">
+        <ion-avatar slot="start">
+          <ion-img [src]="message.avatar"></ion-img>
+        </ion-avatar>
+        <ion-label>
+          <h2>{{ message.sender }}</h2>
+          <p>{{ message.content }}</p>
+          <p class="timestamp">{{ message.timestamp }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </ng-container>
+
+  <ng-container *ngIf="cate=='联系人'">
+    <ion-list>
+      <ion-item *ngFor="let contact of contacts">
+        <ion-avatar slot="start">
+          <ion-img [src]="contact.avatar"></ion-img>
+        </ion-avatar>
+        <ion-label>
+          <h3>{{ contact.name }}</h3>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </ng-container>
+  <ng-container *ngIf="cate=='未知领域'"></ng-container>
+
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-segment value="消息">
+      <ion-segment-button value="消息" (click)="cate='消息'">
+        <ion-label>消息</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="联系人" (click)="cate='联系人'">
+        <ion-label>联系人</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="未知领域" (click)="cate='未知领域'">
+        <ion-label>未知领域</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-footer>

src/app/tab1-person/tab1-person.page.scss

@@ -0,0 +1,33 @@
+/* 消息列表 */
+.metadata-end-wrapper {
+    position: absolute;
+
+    top: 10px;
+    inset-inline-end: 10px;
+
+    font-size: 0.8rem;
+
+    display: flex;
+    align-items: center;
+
+    ion-text {
+        font-size: 0.6rem
+    }
+}
+
+ion-label p {
+    font-size: 0.7rem;
+    display: block;
+    max-width: calc(100% - 60px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-label {
+    ion-text {
+        font-size: 0.9rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

src/app/tab1-person/tab1-person.page.spec.ts

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

src/app/tab1-person/tab1-person.page.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-tab1-person',
+  templateUrl: './tab1-person.page.html',
+  styleUrls: ['./tab1-person.page.scss'],
+})
+export class Tab1PersonPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+  cate: string = "消息"
+  messages = [
+    { sender: 'Alice', content: 'Hello! How are you doing?', timestamp: '2024-06-15 16:50:01', avatar: 'https://ionicframework.com/docs/img/demos/avatar.svg' },
+    { sender: 'Bob', content: 'I\'m good, thank you! How about you?', timestamp: '2024-06-15 16:51:20', avatar: 'https://ionicframework.com/docs/img/demos/avatar.svg' },
+    { sender: 'Alice', content: 'I\'m doing great, thanks for asking!', timestamp: '2024-06-15 16:52:45', avatar: 'https://ionicframework.com/docs/img/demos/avatar.svg' }
+  ];
+  contacts = [
+    { name: 'Alice', avatar: 'https://ionicframework.com/docs/img/demos/avatar.svg' },
+    { name: 'Bob', avatar: 'https://ionicframework.com/docs/img/demos/avatar.svg' },
+    { name: 'Charlie', avatar: 'https://ionicframework.com/docs/img/demos/avatar.svg' }
+  ];
+}

src/app/tab1/tab1.page.html

@@ -15,25 +15,28 @@
 
   <!--虚拟身份-->
   <ion-card>
-    <ion-card-header>
-      <ion-item lines="full">
-        <ion-avatar slot="start">
-          <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
-        </ion-avatar>
-        <ion-label>
-          <ion-note>虚拟身份名</ion-note>
-        </ion-label>
-        <ion-buttons slot="end">
-          <ion-button shape="round">
-            <ion-icon name="swap-horizontal-outline"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-      </ion-item>
-      <ion-item lines="none">身份标签</ion-item>
-    </ion-card-header>
-    <ion-card-content>
-      你的目标内容
-    </ion-card-content>
+    <ion-item lines="full">
+      <ion-avatar slot="start">
+        <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+      </ion-avatar>
+      <ion-label>
+        <ion-note>虚拟身份名</ion-note>
+      </ion-label>
+      <ion-buttons slot="end">
+        <ion-button shape="round">
+          <ion-icon name="swap-horizontal-outline"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>
+    <ion-item>
+      <ion-card-subtitle>身份标签</ion-card-subtitle>
+    </ion-item>
+    <ion-item button detail="true" [routerLink]="['/tab1/person']">
+      <ion-label>
+        <ion-note>空间</ion-note>
+      </ion-label>
+    </ion-item>
+
   </ion-card>
 
   <!--三餐记录-->
@@ -42,29 +45,17 @@
       <ion-card-title>今日三餐</ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ion-item lines="none">
-        <ion-label>
-          <h1>早饭</h1>
-          <p>五彩虾仁炒饭,营养丰富，早餐最爱</p>
-        </ion-label>
-      </ion-item>
-      <ion-item lines="none">
-        <ion-label>
-          <h1>中饭</h1>
-          <p>蜜汁烤五花肉，经典家常，上桌就光盘</p>
-        </ion-label>
-      </ion-item>
-      <ion-item lines="none">
-        <ion-label>
-          <h1>晚饭</h1>
-          <p>凉拌西蓝花，鲜香可口，美味下饭</p>
-        </ion-label>
-      </ion-item>
+      <ion-list>
+        <ion-item *ngFor="let food of foods">
+          <ion-label>
+            <h1>{{food.time}}</h1>
+            <p>{{food.content}}</p>
+          </ion-label>
+        </ion-item>
+      </ion-list>
       <ion-item lines="none">
         <ion-buttons slot="end">
-          <ion-button fill="solid" shape="round" size="large">
-            <ion-note color="black">编辑</ion-note>
-          </ion-button>
+          <ion-button shape="round" size="large">编辑</ion-button>
         </ion-buttons>
       </ion-item>
     </ion-card-content>

src/app/tab1/tab1.page.ts

@@ -7,6 +7,10 @@ import { Component } from '@angular/core';
 })
 export class Tab1Page {
 
-  constructor() {}
-
+  constructor() { }
+  foods = [
+    { time: '早饭', content: '五彩虾仁炒饭,营养丰富，早餐最爱' },
+    { time: '中饭', content: '蜜汁烤五花肉，经典家常，上桌就光盘' },
+    { time: '晚饭', content: '凉拌西蓝花，鲜香可口，美味下饭' },
+  ]
 }

src/app/tab3/tab3.page.html

@@ -40,7 +40,7 @@
           <img alt="头像" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
         </ion-avatar>
         <ion-label>
-          <ion-note>昵称</ion-note>
+          <ion-note>用户名</ion-note>
         </ion-label>
       </ion-item>
       <ion-item lines="none">