first commit

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,7 +5,11 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  }
+  },
+  // {
+  //   path: 'home',
+  //   loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+  // }
 ];
 @NgModule({
   imports: [

src/app/home/home-routing.module.ts

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

src/app/home/home.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 { HomePageRoutingModule } from './home-routing.module';
+
+import { HomePage } from './home.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    HomePageRoutingModule
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}

src/app/home/home.page.html

@@ -0,0 +1,46 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>推荐</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <!-- 顶部导航栏 -->
+  <ion-segment value="recommendations">
+    <ion-segment-button value="recommendations">
+      <ion-label>推荐</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="following">
+      <ion-label>关注</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="hot">
+      <ion-label>热门</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- 搜索框 -->
+  <ion-searchbar placeholder="搜索"></ion-searchbar>
+
+  <!-- 内容卡片 -->
+  <ion-card *ngFor="let item of items">
+    <ion-card-header>
+      <ion-card-title>{{ item.title }}</ion-card-title>
+      <ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="4">
+            <img [src]="item.image" />
+          </ion-col>
+          <ion-col size="8">
+            <p>{{ item.description }}</p>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-card-content>
+    <ion-item lines="none">
+      <ion-label>{{ item.footer }}</ion-label>
+    </ion-item>
+  </ion-card>
+</ion-content>

src/app/home/home.page.spec.ts

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

src/app/home/home.page.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss']
+})
+export class HomePage {
+
+  items = [
+    {
+      title: "是什么让“牢大”科比，成了中文互联网最热门的流量密码?",
+      subtitle: "BB姬",
+      image: "assets/images/kobe.jpg",
+      description: "本文首发于微信公众号“BB姬”（bibiji300）真新镇小茂｜文 2015年，网络游戏主播李赣组织孙笑川等人，成...",
+      footer: "4076 赞同 · 1696 收藏"
+    },
+    {
+      title: "汪汪：姜萍事件很快就会有结果，做点分析预测",
+      subtitle: "科学声音",
+      image: "assets/images/jiangping.jpg",
+      description: "阿里达摩院在6.21发布了决赛通知，确认姜萍参赛。今天是6.24，姜萍考试结束，我觉得我可以写点东西了。前...",
+      footer: "1049 赞同 · 469 评论"
+    }
+  ];
+
+  constructor() {}
+
+}

src/app/tab2/tab2.page.html

@@ -1,17 +1,48 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
-  </ion-header>
-
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+<ion-header>  
+  <ion-toolbar>  
+    <ion-buttons slot="start">  
+      <ion-menu-button></ion-menu-button>  
+    </ion-buttons>  
+    <ion-title>消息</ion-title>  
+    <ion-segment (ionChange)="segmentChanged($event)" class="ion-margin-end">  
+      <ion-segment-button value="invitations">  
+        邀请回答  
+      </ion-segment-button>  
+      <ion-segment-button value="system">  
+        系统消息  
+      </ion-segment-button>  
+      <ion-segment-button value="private">  
+        用户私信  
+      </ion-segment-button>  
+    </ion-segment>  
+  </ion-toolbar>  
+</ion-header>  
+  
+<ion-content>  
+  <ion-list *ngIf="selectedSegment === 'invitations'">  
+    <ion-item *ngFor="let invitation of invitationMessages">  
+      <ion-label>  
+        <h2>{{ invitation.inviter.username }} 邀请你回答</h2>  
+        <p>{{ invitation.question }} - {{ invitation.time | date: 'yyyy-MM-dd HH:mm' }}</p>  
+      </ion-label>  
+    </ion-item>  
+  </ion-list>  
+  
+  <ion-list *ngIf="selectedSegment === 'system'">  
+    <ion-item *ngFor="let message of systemMessages">  
+      <ion-label>  
+        <h2>{{ message.source }}</h2>  
+        <p>{{ message.content }} - {{ message.time | date: 'yyyy-MM-dd HH:mm' }}</p>  
+      </ion-label>  
+    </ion-item>  
+  </ion-list>  
+  
+  <ion-list *ngIf="selectedSegment === 'private'">  
+    <ion-item *ngFor="let pm of privateMessages">  
+      <ion-label>  
+        <h2>{{ pm.user.username }}</h2>  
+        <p>{{ pm.content }} - {{ pm.time | date: 'yyyy-MM-dd HH:mm' }}</p>  
+      </ion-label>  
+    </ion-item>  
+  </ion-list>  
+</ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,52 @@
+ion-content {  
+    --background: #f4f4f4;  
+  }  
+    
+  ion-item {  
+    --padding-start: 0;  
+    --padding-end: 0;  
+    margin-bottom: 10px;  
+    background-color: #fff;  
+    border-radius: 5px;  
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);  
+  }  
+    
+  ion-label {  
+    padding: 10px;  
+  }  
+    
+  h2 {
+    font-size: 16px;
+    color: #333;
+    margin: 0 0 5px 0;
+    }
+    
+    p {
+    font-size: 14px;
+    color: #666;
+    margin: 0;
+    }
+    
+    ion-segment {
+    --background: transparent;
+    --color-selected: #4285F4;
+    }
+    
+    ion-segment-button {
+    --border-width: 0;
+    --color-focused: #ccc;
+    --color-checked: #4285F4;
+    --min-width: 100px;
+    }
+    
+    ion-segment-button:last-child {
+    --border-radius-end: 5px;
+    }
+    
+    ion-segment-button:first-child {
+    --border-radius-start: 5px;
+    }
+    
+    ion-segment-button.segment-selected {
+    font-weight: bold;
+    }

src/app/tab2/tab2.page.ts

@@ -1,12 +1,29 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-tab2',
-  templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
-})
-export class Tab2Page {
-
-  constructor() {}
-
-}
+import { Component } from '@angular/core';  
+  
+@Component({  
+  selector: 'app-tab2',  
+  templateUrl: './tab2.page.html',  
+  styleUrls: ['./tab2.page.scss'],  
+})  
+export class Tab2Page {  
+  selectedSegment: string = 'invitations';  
+  
+  invitationMessages = [  
+    { inviter: { username: 'Alice' }, question: 'How to use Ionic v7?', time: new Date() },  
+    // 更多邀请消息...  
+  ];  
+  
+  systemMessages = [  
+    { source: '系统', content: '您的新回答已被采纳！', time: new Date(new Date().getTime() - 3600000) },  
+    // 更多系统消息...  
+  ];  
+  
+  privateMessages = [  
+    { user: { username: 'Bob' }, content: 'Hello, how are you?', time: new Date() },  
+    // 更多私信...  
+  ];  
+  
+  segmentChanged(event: CustomEvent) {  
+    this.selectedSegment = event.detail.value;  
+  }  
+}

src/app/tab3/tab3.module.ts

@@ -1,18 +1,16 @@
-import { IonicModule } from '@ionic/angular';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Tab3Page } from './tab3.page';
-import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
+import { IonicModule } from '@ionic/angular';
 
 import { Tab3PageRoutingModule } from './tab3-routing.module';
+import { Tab3Page } from './tab3.page';
 
 @NgModule({
   imports: [
-    IonicModule,
     CommonModule,
     FormsModule,
-    ExploreContainerComponentModule,
+    IonicModule,
     Tab3PageRoutingModule
   ],
   declarations: [Tab3Page]

src/app/tab3/tab3.page.html

@@ -1,17 +1,144 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </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>
+  <!-- 顶部个人信息 -->
+  <ion-card>
+    <ion-item>
+      <ion-avatar slot="start">
+        <img [src]="userInfo.avatarUrl" />
+      </ion-avatar>
+      <ion-label>
+        <h2>{{ userInfo.username }}</h2>
+        <p>{{ userInfo.nickname }}</p>
+      </ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-button fill="outline" slot="end">添加认证信息</ion-button>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>
+        关注 {{ userInfo.following }} | 被关注 {{ userInfo.followers }} | 收藏 {{ userInfo.favorites }} | 最近浏览 {{ userInfo.recentViews }}
+      </ion-label>
+    </ion-item>
+  </ion-card>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
+  <!-- 会员 -->
+  <ion-card>
+    <ion-item lines="none">
+      <ion-label>年卡限时 5 折</ion-label>
+      <ion-note slot="end">最低 0.3 元/天</ion-note>
+    </ion-item>
+  </ion-card>
+
+  <!-- 功能区域 -->
+  <ion-grid>
+    <ion-row>
+      <ion-col size="4">
+        <ion-button fill="clear" (click)="goToBookshelf()">
+          <ion-icon name="book" slot="icon-only"></ion-icon>
+          书架
+        </ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button fill="clear" (click)="goToWallet()">
+          <ion-icon name="wallet" slot="icon-only"></ion-icon>
+          钱包
+        </ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button fill="clear" (click)="goToActivitySquare()">
+          <ion-icon name="thumbs-up" slot="icon-only"></ion-icon>
+          超赞包
+        </ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button fill="clear" (click)="goToHelpAndSupport()">
+          <ion-icon name="help-circle" slot="icon-only"></ion-icon>
+          付费咨询
+        </ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button fill="clear">
+          <ion-icon name="document" slot="icon-only"></ion-icon>
+          已购
+        </ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <!-- 其他信息 -->
+  <ion-card>
+    <ion-item>
+      <ion-label>Hi，开启源享创作之旅</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>新人报到和源友们打个招呼</ion-label>
+      <ion-button slot="end" fill="outline">去发布</ion-button>
+    </ion-item>
+    <ion-item>
+      <ion-label>回答问题</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-label>有没有编程基础能填报计算机专业吗？</ion-label>
+      <ion-button slot="end" fill="outline">写回答</ion-button>
+    </ion-item>
+  </ion-card>
+
+  <!-- 活动与讨论 -->
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <ion-card>
+          <ion-item>
+            <ion-label>创作活动</ion-label>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>有奖活动进行中</ion-label>
+          </ion-item>
+        </ion-card>
+      </ion-col>
+      <ion-col>
+        <ion-card>
+          <ion-item>
+            <ion-label>热门讨论</ion-label>
+          </ion-item>
+          <ion-item lines="none">
+            <ion-label>我的摄影日记</ion-label>
+          </ion-item>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <!-- 知乎数据 -->
+  <ion-grid>
+    <ion-row>
+      <ion-col size="6">
+        <ion-item>
+          <ion-label>我的源享</ion-label>
+          <ion-note slot="end">1610 天</ion-note>
+        </ion-item>
+      </ion-col>
+      <ion-col size="6">
+        <ion-item>
+          <ion-label>收到互动</ion-label>
+          <ion-note slot="end">计算中</ion-note>
+        </ion-item>
+      </ion-col>
+      <ion-col size="6">
+        <ion-item>
+          <ion-label>我的徽章</ion-label>
+        </ion-item>
+      </ion-col>
+      <ion-col size="6">
+        <ion-item>
+          <ion-label>我的创作</ion-label>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,28 @@
+ion-avatar img {
+    width: 100%;
+    height: 100%;
+  }
+  
+  ion-button {
+    --padding-start: 0;
+    --padding-end: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+    --min-height: 44px;
+  }
+  
+  ion-card {
+    margin: 10px;
+  }
+  
+  ion-item {
+    --inner-padding-end: 0;
+    --inner-padding-start: 0;
+    --padding-top: 0;
+    --padding-bottom: 0;
+  }
+  
+  ion-grid {
+    padding: 10px;
+  }
+  

src/app/tab3/tab3.page.spec.ts

@@ -1,8 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
-
 import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
-
 import { Tab3Page } from './tab3.page';
 
 describe('Tab3Page', () => {

src/app/tab3/tab3.page.ts

@@ -1,12 +1,37 @@
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab3',
-  templateUrl: 'tab3.page.html',
-  styleUrls: ['tab3.page.scss']
+  templateUrl: './tab3.page.html',
+  styleUrls: ['./tab3.page.scss'],
 })
 export class Tab3Page {
+  userInfo: any = {
+    username: 'Faraday',
+    nickname: '点击查看个人主页',
+    avatarUrl: '/assets/avatar.png',
+    followers: 10086,
+    following: 129,
+    favorites: 7,
+    recentViews: 2917
+  };
 
-  constructor() {}
+  constructor(private navCtrl: NavController) {}
 
+  goToBookshelf() {
+    this.navCtrl.navigateForward('/bookshelf');
+  }
+
+  goToWallet() {
+    this.navCtrl.navigateForward('/wallet');
+  }
+
+  goToActivitySquare() {
+    this.navCtrl.navigateForward('/activity-square');
+  }
+
+  goToHelpAndSupport() {
+    this.navCtrl.navigateForward('/help-and-support');
+  }
 }

src/app/tabs/tabs-routing.module.ts

@@ -7,6 +7,10 @@ const routes: Routes = [
     path: 'tabs',
     component: TabsPage,
     children: [
+      {
+        path: 'home',  // 新增的路由配置
+        loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
+      },
       {
         path: 'tab1',
         loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)

src/app/tabs/tabs.page.html

@@ -1,20 +1,24 @@
 <ion-tabs>
-
   <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+     <!-- 新增的Tab -->
+     <ion-tab-button tab="home">
+      <ion-icon name="home"></ion-icon>
+      <ion-label>Home</ion-label>
+     </ion-tab-button>
+
+    <ion-tab-button tab="tab1">
+      <ion-icon name="home"></ion-icon>
       <ion-label>Tab 1</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+    <ion-tab-button tab="tab2">
+      <ion-icon name="home"></ion-icon>
       <ion-label>Tab 2</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
+    <ion-tab-button tab="tab3">
+      <ion-icon name="home"></ion-icon>
       <ion-label>Tab 3</ion-label>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>