newly

.docgenirc.js

@@ -0,0 +1,13 @@
+/**
+ * @type {import('@docgeni/core').DocgeniConfig}
+ */
+module.exports = {
+    mode: 'lite',
+    title: 'fmode-ng-user',
+    description: 'An Ionic project',
+    docsDir: 'docs',
+    navs: [
+        null
+    ],
+    libs: []
+};

.gitignore

@@ -68,3 +68,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+.docgeni/site

docs/getting-started.md

@@ -0,0 +1,14 @@
+---
+title: Getting Started
+order: 10
+---
+
+Hello Docgeni!
+
+## Installation
+
+```
+ng add @docgeni/cli
+```
+...
+

package.json

@@ -5,9 +5,11 @@
   "homepage": "https://ionicframework.com/",
   "scripts": {
     "ng": "ng",
+    "build:docs": "docgeni build",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
+    "start:docs": "docgeni serve --port 4600",
     "test": "ng test",
     "lint": "ng lint"
   },
@@ -45,6 +47,8 @@
     "@angular/compiler-cli": "^18.0.0",
     "@angular/language-service": "^18.0.0",
     "@capacitor/cli": "6.1.0",
+    "@docgeni/cli": "^2.3.2",
+    "@docgeni/template": "2.3.2",
     "@ionic/angular-toolkit": "^11.0.1",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",

src/app/app-routing.module.ts

@@ -9,7 +9,16 @@ const routes: Routes = [
   {
     path: 'user',
     loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
-  }
+  },
+  {
+    path: 'book-detail',
+    loadChildren: () => import('./book-detail/book-detail.module').then( m => m.BookDetailPageModule)
+  },
+  {
+    path: 'book-content',
+    loadChildren: () => import('./book-content/book-content.module').then( m => m.BookContentPageModule)
+  },
+  
 ];
 @NgModule({
   imports: [

src/app/book-content/book-content-routing.module.ts

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

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

src/app/book-content/book-content.page.html

@@ -0,0 +1,30 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button (click)="goBack()"></ion-back-button>
+        </ion-buttons>
+        <ion-title>{{ showBookInfo ? '类别介绍：科幻' : '书籍内容' }}</ion-title>
+    </ion-toolbar>
+</ion-header>
+
+<ion-content class="book-content">
+    <ion-card *ngIf="showBookInfo" class="book-info">
+        <ion-card-header>
+            <ion-card-title>{{ bookTitle }}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            <p>科幻小说是一种以科学和技术为基础，通过想象和虚构来探索未来世界、人类文明、外星生命等主题的小说。它通常以科学原理、技术预测、未来社会等为背景，通过丰富的想象力和创新性的叙事手法，展示了一个充满惊奇和未知的未来世界。科幻小说的发展是一个不断创新和演变的过程，让我们感受到科技的魅力和未知世界的神秘，同时也让我们思考人类的未来和存在的意义。</p>
+        </ion-card-content>
+    </ion-card>
+
+    <ion-card *ngIf="!showBookInfo" class="book-content">
+        <ion-card-header>
+            <ion-card-title>{{ bookTitle }}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            <p>科幻小说是一种以科学和技术为基础，通过想象和虚构来探索未来世界、人类文明、外星生命等主题的小说。它通常以科学原理、技术预测、未来社会等为背景，通过丰富的想象力和创新性的叙事手法，展示了一个充满惊奇和未知的未来世界。 科幻小说起源于19世纪初，当时一些作家开始尝试将科学原理和技术应用到小说中，创造出一种新的文学形式。随着科学技术的不断发展和进步，科幻小说的内容和主题也不断扩展和深化。科幻小说不仅让我们感受到科技的魅力和未知世界的神秘，也让我们思考人类的未来和存在的意义。 科幻小说涵盖了多个主题和风格，包括硬科幻、软科幻、奇幻科幻等。其中，硬科幻强调科学原理和科技发展的精确性，注重科技细节的描绘和未来科技的发展。而软科幻则更注重人文和社会科学的探讨，关注人类文明的发展和未来社会的变化。奇幻科幻则是一种将科幻元素与奇幻元素相结合的小说类型，通常以魔法、神话、神秘力量等奇幻元素为基础，通过想象和创新来展示一个充满奇幻色彩的未来世界
+
+            </p>
+        </ion-card-content>
+    </ion-card>
+</ion-content>

src/app/book-content/book-content.page.scss

@@ -0,0 +1,21 @@
+.book-content {
+    --background: linear-gradient(to bottom, #ff7e5f, #feb47b);
+    color: #fff;
+    padding: 20px;
+}
+
+.book-info,
+.book-content {
+    background: var(--background);
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+ion-card-header {
+    background: var(--background);
+}
+
+ion-card-title {
+    color: #fff;
+    font-weight: bold;
+}

src/app/book-content/book-content.page.spec.ts

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

src/app/book-content/book-content.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-book-content',
+  templateUrl: 'book-content.page.html',
+  styleUrls: ['book-content.page.scss'],
+})
+export class BookContentPage {
+  bookTitle: string = '书籍名称';
+  showBookInfo: boolean = true;
+
+  constructor() {}
+
+  goBack() {
+    // 返回上一个页面的逻辑
+  }
+}

src/app/book-detail/book-detail-routing.module.ts

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

src/app/book-detail/book-detail.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BookDetailPageRoutingModule } from './book-detail-routing.module';
+
+import { BookDetailPage } from './book-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BookDetailPageRoutingModule
+  ],
+  declarations: [BookDetailPage]
+})
+
+
+
+
+export class BookDetailPageModule {}

src/app/book-detail/book-detail.page.html

@@ -0,0 +1,26 @@
+<ion-header>
+    <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+            <ion-back-button defaultHref="/tab2"></ion-back-button>
+        </ion-buttons>
+        <ion-title>{{ bookTitle }}</ion-title>
+    </ion-toolbar>
+</ion-header>
+
+<ion-content>
+    <ion-card>
+        <ion-card-header>
+            <ion-card-title>《人才战略》简介</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+            <p>中国作为世界上最大的发展中国家，人口多，底子薄，人均资源相对不足，这一基本国情决定了中国的发展必须坚持"以人为本"，走人才强国之路。 中国实施人才强国战略的根本目的，就是要把人才作为推进事业发展的关键因素，努力造就数以亿计的高素质劳动者、 数以千万计的专门人才和一大批拔尖创新人才，建设规模宏大、结构合理、素质较高的人才队伍，开创人才辈出、人尽其才 的新局面，把中国由人口大国转化为人才资源强国，大力提升国家核心竞争力和综合国力，完成全面建设小康社会的历史任务，实现中华民族的伟大复兴。
+            </p>
+            <p>中国的人才战略是经济社会发展战略的重要组成部分，是关于人才资源发展的总体谋划、总体思路。中国的人才强国战略主要包括两层含义: 一是着眼加大人才资源的开发力度，全面提高人才的基本素质，将人口大国转变为人才强国，通过提高人才的竞争能力，增强国家的综合国力和国际竞争力。 二是着眼创新体制机制，做到广纳人才，为我所用，通过提高政策制度对人才的吸引力和凝聚力，增强国家的综合国力和国际竞争力。 实施这一战略，要按照人才发展战略规定的原则，坚持以人才资源能力建设为主题，以调整和优化人才结构为主线，以改革创新为动力，抓紧做好培养、吸引和用好各方面人才的工作。
+            </p>
+            <p>关于中国人才战略的基本内涵，从总体上看，可以划分成5个相辅相成的组成部分: 人力资本投资优先战略，人力资本是国民通过学习和培训在人才个体身上形成的能够进行创造性劳动的知识和技能。人力资本的形成是通过多渠道多途径的人力资本投资实现的。 实施人才强国战略，首先要加大人力资本投资力度，实行人力资本投资优先战略，大力投资于国民教育和促进国民身心健康的各项事业。中国是世界上国内投资率最高的国家，投资率达到GDP的42%，但其中大部分属于物力资本(厂房与设备)投资，而人力资本(如R&D、教育、公共卫生等)投资却明显偏低。
+                在人才强国战略的指导下，中国势必将改变投资战略，不断扩大对国民教育、全民健康和社会保障的投资，建立遍及城乡的教育网络，从而逐步缩小同发达国家的差距。
+
+            </p>
+        </ion-card-content>
+    </ion-card>
+</ion-content>

src/app/book-detail/book-detail.page.scss

@@ -0,0 +1,17 @@
+ion-card {
+    margin: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+ion-card-header {
+    background-color: #f8f8f8;
+}
+
+ion-card-title {
+    font-weight: bold;
+}
+
+ion-card-content {
+    color: #333;
+}

src/app/book-detail/book-detail.page.spec.ts

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

src/app/book-detail/book-detail.page.ts

@@ -0,0 +1,30 @@
+// import { Component, OnInit } from '@angular/core';
+
+// @Component({
+//   selector: 'app-book-detail',
+//   templateUrl: './book-detail.page.html',
+//   styleUrls: ['./book-detail.page.scss'],
+// })
+// export class BookDetailPage implements OnInit {
+
+//   constructor() { }
+
+//   ngOnInit() {
+//   }
+
+// }
+
+import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-book-detail',
+  templateUrl: 'book-detail.page.html',
+  styleUrls: ['book-detail.page.scss'],
+})
+export class BookDetailPage {
+  bookTitle: string = '《人才战略》';
+
+  constructor(private navCtrl: NavController) {}
+
+}

src/app/tab1/tab1.page.html

@@ -1,17 +1,51 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      使用说明
-    </ion-title>
-  </ion-toolbar>
+<!-- <ion-header>
+    <ion-toolbar>
+        <ion-title>阅读APP</ion-title>
+    </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-content>
+    <ion-segment [(ngModel)]="selectedCategory" (ionChange)="segmentChanged()">
+        <ion-segment-button value="male">
+            男生
+        </ion-segment-button>
+        <ion-segment-button value="female">
+            女生
+        </ion-segment-button>
+    </ion-segment>
+
+    <ion-card *ngFor="let category of categories">
+        <ion-card-header>
+            {{category.title}}
+        </ion-card-header>
+        <ion-card-content>
+            <ion-list>
+                <ion-item *ngFor="let subCategory of category.subCategories" (click)="viewBookDetail(subCategory)">
+                    {{subCategory.title}}
+                </ion-item>
+            </ion-list>
+        </ion-card-content>
+    </ion-card>
+</ion-content> -->
+
+
+
+<ion-header>
     <ion-toolbar>
-      <ion-title size="large">使用说明</ion-title>
+        <ion-title>阅读APP</ion-title>
     </ion-toolbar>
-  </ion-header>
+</ion-header>
+
+<ion-content class="home-page">
+    <ion-segment (ionChange)="segmentChanged($event)">
+        <ion-segment-button value="male">男生</ion-segment-button>
+        <ion-segment-button value="female">女生</ion-segment-button>
+    </ion-segment>
 
-  
-</ion-content>
+    <ion-list *ngFor="let category of categories">
+        <ion-list-header>{{ category.name }}</ion-list-header>
+        <ion-item *ngFor="let item of category.items" (click)="goToBookDetail(item)">
+            {{ item }}
+        </ion-item>
+    </ion-list>
+</ion-content>

src/app/tab1/tab1.page.scss

@@ -0,0 +1,22 @@
+// ion-card {
+//     margin: 10px;
+// }
+// ion-item {
+//     cursor: pointer;
+// }
+.home-page {
+    background-color: #ab9191;
+}
+
+ion-list {
+    margin: 20px;
+    background-color: #90e0f0;
+}
+
+ion-list-header {
+    font-weight: bold;
+}
+
+ion-item {
+    cursor: pointer;
+}

src/app/tab1/tab1.page.ts

@@ -1,12 +1,94 @@
+// import { Component } from '@angular/core';
+
+// @Component({
+//   selector: 'app-tab1',
+//   templateUrl: 'tab1.page.html',
+//   styleUrls: ['tab1.page.scss']
+// })
+// export class Tab1Page {
+//   selectedCategory: string = 'male';
+
+//   categories = [
+//     {
+//       title: '热门',
+//       subCategories: [
+//         { title: '大国科技' },
+//         { title: '科幻' },
+//         { title: '历史争霸' },
+//         { title: '天才' },
+//         { title: '脑洞' },
+//         { title: '都市修真' }
+//       ]
+//     },
+//     {
+//       title: '题材',
+//       subCategories: [
+//         { title: '都市' },
+//         { title: '同人' },
+//         { title: '科幻' },
+//         { title: '玄幻' },
+//         { title: '游戏' },
+//         { title: '悬疑' }
+//       ]
+//     },
+//     {
+//       title: '情节',
+//       subCategories: [
+//         { title: '江湖' },
+//         { title: '校园' },
+//         { title: '重生' },
+//         { title: '僵尸' },
+//         { title: '三国' },
+//         { title: '修炼' }
+//       ]
+//     },
+//     {
+//       title: '风格',
+//       subCategories: [
+//         { title: '励志' },
+//         { title: '现实' },
+//         { title: '烧脑' }
+//       ]
+//     }
+//   ];
+
+//   constructor() {}
+
+//   segmentChanged() {
+//     // Handle segment change logic here
+//   }
+
+//   viewBookDetail(subCategory: any) {
+//     // 实现查看书籍详情的逻辑
+//   }
+// }
+
+
+
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab1',
   templateUrl: 'tab1.page.html',
-  styleUrls: ['tab1.page.scss']
+  styleUrls: ['tab1.page.scss'],
 })
 export class Tab1Page {
+  categories: any[] = [
+    { name: '热门', items: ['大国科技', '科幻', '历史争霸', '天才', '脑洞', '都市修真'] },
+    { name: '题材', items: ['都市', '同人', '科幻', '玄幻', '游戏', '悬疑', '武侠', '仙侠', '历史'] },
+    { name: '情节', items: ['江湖', '校园', '重生', '僵尸', '三国', '修炼', '经济', '全民', '二次元'] },
+    { name: '风格', items: ['励志', '现实', '烧脑'] }
+  ];
+
+  constructor(private navCtrl: NavController) {}
 
-  constructor() {}
+  segmentChanged(event: any) {
+    // 处理分类切换逻辑
+  }
 
-}
+  goToBookDetail(bookTitle: string) {
+    // 导航至书籍详情页面，并传递书籍标题参数
+    this.navCtrl.navigateForward(`/book-content`);
+  }
+}

src/app/tab2/tab2.page.html

@@ -1,17 +1,63 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
+<!-- <ion-header>
+    <ion-toolbar>
+        <ion-searchbar></ion-searchbar>
+    </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-content>
+    <ion-segment [(ngModel)]="selectedCategory" (ionChange)="segmentChanged()">
+        <ion-segment-button value="default">
+            默认
+        </ion-segment-button>
+        <ion-segment-button value="update">
+            更新
+        </ion-segment-button>
+        <ion-segment-button value="progress">
+            进度
+        </ion-segment-button>
+        <ion-segment-button value="recommend">
+            推荐
+        </ion-segment-button>
+    </ion-segment>
+
+    <ion-grid>
+        <ion-row>
+            <ion-col size="6" *ngFor="let book of books" (click)="viewBookDetail(book)">
+                <ion-card class="book-card">
+                    <img src="{{book.image}}" alt="{{book.title}}">
+                    <ion-card-content>
+                        <ion-card-title>{{book.title}}</ion-card-title>
+                    </ion-card-content>
+                </ion-card>
+            </ion-col>
+        </ion-row>
+    </ion-grid>
+</ion-content> -->
+
+<ion-header>
     <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
+        <ion-searchbar></ion-searchbar>
     </ion-toolbar>
-  </ion-header>
+</ion-header>
+
+<ion-content>
+    <ion-segment (ionChange)="segmentChanged($event)">
+        <ion-segment-button value="default">默认</ion-segment-button>
+        <ion-segment-button value="update">更新</ion-segment-button>
+        <ion-segment-button value="progress">进度</ion-segment-button>
+        <ion-segment-button value="recommend">推荐</ion-segment-button>
+    </ion-segment>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+    <ion-grid>
+        <ion-row *ngFor="let row of bookRows">
+            <ion-col *ngFor="let book of row" size="6">
+                <ion-card (click)="goToBookDetail(book)">
+                    <ion-card-content>
+                        <img [src]="book.imageUrl" alt="Book Image">
+                        <p>{{ book.title }}</p>
+                    </ion-card-content>
+                </ion-card>
+            </ion-col>
+        </ion-row>
+    </ion-grid>
+</ion-content>

src/app/tab2/tab2.page.scss

@@ -0,0 +1,41 @@
+// ion-card {
+//     margin: 10px;
+// }
+// .book-card {
+//     height: 300px;
+//     border-radius: 10px;
+//     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+// }
+// img {
+//     width: 100%;
+//     height: 70%;
+//     border-top-left-radius: 10px;
+//     border-top-right-radius: 10px;
+// }
+// ion-card-content {
+//     padding: 10px;
+// }
+// ion-card-title {
+//     font-weight: bold;
+// }
+ion-card {
+    margin: 10px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+ion-card-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+img {
+    width: 100%;
+    border-radius: 10px 10px 0 0;
+}
+
+p {
+    margin-top: 10px;
+    font-weight: bold;
+}

src/app/tab2/tab2.page.ts

@@ -1,12 +1,78 @@
+// import { Component } from '@angular/core';
+// import { Router } from '@angular/router';
+
+// @Component({
+//   selector: 'app-tab2',
+//   templateUrl: 'tab2.page.html',
+//   styleUrls: ['tab2.page.scss']
+// })
+// export class Tab2Page {
+//   selectedCategory: string = 'default';
+
+//   books = [
+//     { title: '人才战略', image: 'assets/images/book1.jpg' },
+//     { title: 'Book 2', image: 'assets/book2.jpg' },
+//     { title: 'Book 3', image: 'assets/book3.jpg' },
+//     { title: 'Book 4', image: 'assets/book4.jpg' },
+//     { title: 'Book 5', image: 'assets/book5.jpg' },
+//     { title: 'Book 6', image: 'assets/book6.jpg' }
+//   ];
+
+//   constructor(private router: Router) {}
+
+//   segmentChanged() {
+//     // Handle segment change logic here
+//   }
+
+//   viewBookDetail(book: any) {
+//     // 实现跳转到书籍详情页面的逻辑
+//     this.router.navigate(['/book-detail', book.id]); // 假设路由为 '/book-detail/:id'
+//   }
+// }
+
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
-  styleUrls: ['tab2.page.scss']
+  styleUrls: ['tab2.page.scss'],
 })
 export class Tab2Page {
+  bookRows: any[] = [];
+  currentCategory: string = 'default';
+
+  constructor(private navCtrl: NavController) {
+    this.loadBooks();
+  }
+
+  loadBooks() {
+    // 根据不同分类加载不同的书籍数据
+    // 示例数据，您需要根据实际情况进行替换
+    this.bookRows = [
+      [
+        { imageUrl: 'assets/images/book1.jpg', title: '人才战略' },
+        { imageUrl: 'assets/images/book2.jpg', title: '神秘岛' },
+        { imageUrl: 'assets/images/book3.jpg', title: '快乐王子' },
+        { imageUrl: 'assets/images/book4.jpg', title: '西游记' },
+        { imageUrl: 'assets/images/book5.jpg', title: '易经' },
+        { imageUrl: 'assets/images/book6.jpg', title: '呐喊' },
+        { imageUrl: 'assets/images/book7.jpg', title: '三国演义' },
+        { imageUrl: 'assets/images/book8.jpg', title: 'TOM历险记' },
+        { imageUrl: 'assets/images/book9.jpg', title: '神秘岛2' },
+        { imageUrl: 'assets/images/book10.jpg', title: '诗经' }
+      ],
+      // 其他分类的书籍数据...
+    ];
+  }
 
-  constructor() {}
+  segmentChanged(event: any) {
+    this.currentCategory = event.detail.value;
+    this.loadBooks();
+  }
 
-}
+  goToBookDetail(book: any) {
+    // 导航至书籍详情页面
+    this.navCtrl.navigateForward(`/book-detail`);
+  }
+}

src/app/tab3/tab3.page.html

@@ -1,17 +1,56 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 3
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
+<ion-header>
     <ion-toolbar>
-      <ion-title size="large">Tab 3</ion-title>
+        <ion-title>首页</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="goToRegister()">登录/注册</ion-button>
+        </ion-buttons>
     </ion-toolbar>
-  </ion-header>
+</ion-header>
+
+<ion-content>
+    <ion-card (click)="viewReadingRank()">
+        <ion-card-header>
+            读书排行榜
+        </ion-card-header>
+    </ion-card>
+
+    <ion-card>
+        <ion-card-header>
+            阅读时长
+        </ion-card-header>
+        <ion-card-content>
+            阅读时长: {{readingTime}} 分钟
+        </ion-card-content>
+    </ion-card>
 
-  <app-explore-container name="Tab 3 page"></app-explore-container>
-</ion-content>
+    <ion-row>
+        <ion-col size="6">
+            <ion-card>
+                <ion-card-header>
+                    在读书籍
+                </ion-card-header>
+                <ion-card-content>
+                    <ion-list>
+                        <ion-item *ngFor="let book of readingBooks">
+                            {{book.title}}
+                        </ion-item>
+                    </ion-list>
+                </ion-card-content>
+            </ion-card>
+        </ion-col>
+        <ion-col size="6">
+            <ion-card>
+                <ion-card-header>
+                    读完书籍
+                </ion-card-header>
+                <ion-card-content>
+                    <ion-list>
+                        <ion-item *ngFor="let book of completedBooks">
+                            {{book.title}}
+                        </ion-item>
+                    </ion-list>
+                </ion-card-content>
+            </ion-card>
+        </ion-col>
+    </ion-row>
+</ion-content>

src/app/tab3/tab3.page.scss

@@ -0,0 +1,7 @@
+ion-card {
+    margin: 10px;
+}
+
+ion-item {
+    text-align: center;
+}

src/app/tab3/tab3.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab3',
@@ -6,7 +7,27 @@ import { Component } from '@angular/core';
   styleUrls: ['tab3.page.scss']
 })
 export class Tab3Page {
+  readingTime: number = 264; // 模拟阅读时长为 264 分钟
 
-  constructor() {}
+  readingBooks = [
+    { title: 'Book 1' },
+    { title: 'Book 2' },
+    { title: 'Book 3' }
+  ];
 
+  completedBooks = [
+    { title: 'Book 4' },
+    { title: 'Book 5' },
+    { title: 'Book 6' }
+  ];
+
+  constructor(private router: Router) {}
+
+  goToRegister() {
+    // 实现跳转到注册页面的逻辑
+  }
+
+  viewReadingRank() {
+    this.router.navigate(['/reading-rank']); // 假设路由为 '/reading-rank'
+  }
 }

src/app/tabs/tabs.page.html

@@ -1,20 +1,20 @@
 <ion-tabs>
 
-  <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="tab1" href="/tabs/tab1">
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
-      <ion-label>说明</ion-label>
-    </ion-tab-button>
+    <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="tab1" href="/tabs/tab1">
+            <ion-icon aria-hidden="true" name="triangle"></ion-icon>
+            <ion-label>分类</ion-label>
+        </ion-tab-button>
 
-    <ion-tab-button tab="tab2" href="/tabs/tab2">
-      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
-      <ion-label>示例</ion-label>
-    </ion-tab-button>
+        <ion-tab-button tab="tab2" href="/tabs/tab2">
+            <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
+            <ion-label>书城</ion-label>
+        </ion-tab-button>
 
-    <ion-tab-button tab="tab3" href="/tabs/tab3">
-      <ion-icon aria-hidden="true" name="square"></ion-icon>
-      <ion-label>我的</ion-label>
-    </ion-tab-button>
-  </ion-tab-bar>
+        <ion-tab-button tab="tab3" href="/tabs/tab3">
+            <ion-icon aria-hidden="true" name="square"></ion-icon>
+            <ion-label>我的</ion-label>
+        </ion-tab-button>
+    </ion-tab-bar>
 
-</ion-tabs>
+</ion-tabs>