poem-life-app/src/app/tab1/tab1.page.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: 危齐晟 1913361097@qq.com
+ * @Date: 2024-11-26 10:29:57
+ * @LastEditors: 危齐晟 1913361097@qq.com
+ * @LastEditTime: 2024-12-15 19:56:21
+ * @FilePath: \202226701045\poem-life-app\src\app\tab1\tab1.page.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent,IonButtons, IonButton, IonIcon,IonDatetime } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';

poem-life-app/src/app/tab2/tab2.page.html

@@ -1,17 +1,57 @@
 <ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tab 2
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
+   <ion-toolbar>
+    <ion-buttons slot="end">
+     <ion-button (click)="openSearch()" class="search-button">
+      <ion-icon name="search" slot="icon-only"></ion-icon>
+     </ion-button>
+    </ion-buttons>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tab 2</ion-title>
-    </ion-toolbar>
+    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)" class="custom-segment">
+     <ion-segment-button value="collection" class="segment-button">
+      <ion-label>分类</ion-label>
+     </ion-segment-button>
+     <ion-segment-button value="works" class="segment-button">
+      <ion-label>作品</ion-label>
+     </ion-segment-button>
+     <ion-segment-button value="authors" class="segment-button">
+      <ion-label>作者</ion-label>
+     </ion-segment-button>
+    </ion-segment>
+   </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 2 page"></app-explore-container>
-</ion-content>
+  <ion-content [fullscreen]="true">
+   <ng-container *ngIf="selectedSegment === 'collection'">
+    <ion-grid>
+     <ion-col size="2" class="fixed-sidebar">
+      <ion-list>
+       <ion-item button *ngFor="let category of categories" (click)="selectCategory(category)">
+        <ion-label>{{ category }}</ion-label>
+       </ion-item>
+      </ion-list>
+     </ion-col>
+     <ion-col size="10" class="scrollable-content">
+      <div class="book-cards-container">
+       <ion-card *ngFor="let book of filteredBooks" (click)="selectBook(book)" class="book-card">
+        <ion-card-header>
+         <ion-card-title>{{ book.title }}</ion-card-title>
+        </ion-card-header>
+        <ion-card-content>
+         <p>{{ book.count }} 个条目</p >
+        </ion-card-content>
+       </ion-card>
+      </div>
+     </ion-col>
+    </ion-grid>
+   </ng-container>
+
+   <ng-container *ngIf="selectedSegment === 'works' || selectedSegment === 'authors'">
+    <div class="blank-page">
+     <p *ngIf="selectedSegment === 'works'">这里是作品页面的内容。</p >
+     <p *ngIf="selectedSegment === 'authors'">这里是作者页面的内容。</p >
+    </div>
+   </ng-container>
+  </ion-content>
+  <ion-header [translucent]="true">
+   <ion-toolbar>
+    <ion-buttons slot="end">

poem-life-app/src/app/tab2/tab2.page.scss

@@ -0,0 +1,126 @@
+/* 全局设置 */
+ion-content {
+   --background: #f9f9f9; // 设置背景颜色
+  }
+
+  /* 工具栏样式 */
+  ion-toolbar {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 0 10px; // 给 toolbar 一些内边距
+  }
+
+  /* 自定义分段控件样式 */
+  .custom-segment {
+   margin: 0 auto; // 自动左右边距使 segment 居中
+   background: white; // 设置背景为白色
+   border-radius: 8px; // 圆角
+   display: flex;
+   justify-content: space-between;
+   width: fit-content; // 只占用必要的宽度
+   padding: 0 5px; // 减少一点内边距以适应更紧凑的设计
+  }
+
+  .segment-button {
+   flex: 1;
+   border: 1px solid #007aff; // 蓝色边框
+   border-radius: 8px;
+   margin: 0 -5px; // 让它们更靠近
+   text-align: center;
+   padding: 10px 0;
+   transition: background-color 0.2s;
+
+   &.segment-button-active {
+    background-color: #007aff; // 当前选中的背景颜色
+    color: white;
+   }
+
+   ion-label {
+    font-size: 1.2em;
+    font-weight: bold;
+    margin: 0;
+   }
+  }
+
+  .search-button {
+   margin-left: auto; // 强制将搜索按钮推到最右边
+  }
+
+  /* 书籍卡片样式 */
+  .book-card {
+   margin: 0; /* 移除边距，由 .book-cards-container 控制 */
+   border-radius: 8px;
+   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+   background-color: #f5f5f5;
+   text-align: center;
+   width: 80%; /* 减小卡片的宽度 */
+
+   &:hover {
+    transform: scale(1.02); // 悬停时放大效果
+   }
+
+   ion-card-header {
+    background: #e0e0e0; // 卡片头部背景
+    border-radius: 8px 8px 0 0;
+    padding: 10px;
+   }
+
+   ion-card-title {
+    font-size: 16px; /* 减小卡片标题的字体大小 */
+    margin-bottom: 10px;
+   }
+
+   p {
+    font-size: 12px; /* 减小卡片内容的字体大小 */
+    color: #666;
+    margin: 0;
+   }
+  }
+
+  /* 固定左侧分类列表 */
+  .fixed-sidebar {
+   position: fixed;
+   top: 56px; /* 工具栏的高度 */
+   bottom: 0;
+   left: 0;
+   overflow-y: auto;
+   background-color: white;
+   border-right: 1px solid #ddd;
+   z-index: 1;
+   width: 250px; /* 增加宽度以防止遮挡 */
+  }
+
+  /* 可滚动的右侧内容 */
+  .scrollable-content {
+   margin-left: 250px; /* 留出左侧分类列表的空间 */
+   height: calc(100vh - 56px); /* 减去工具栏高度 */
+   overflow-y: auto;
+   padding-top: 10px;
+  }
+
+  /* 使用 Flexbox 确保项目占据整个容器的高度 */
+  ion-col[size="2"] {
+   display: flex;
+   flex-direction: column;
+   justify-content: space-between;
+  }
+
+/* 书籍卡片容器 */
+.book-cards-container {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr); /* 每行显示三个卡片 */
+   gap: 10px; // 设置卡片之间的间距
+   padding: 10px;
+   margin-left: 100px; /* 扩大第一列卡片与左侧导航栏之间的间距 */
+  }
+
+  /* 空白页面样式 */
+  .blank-page {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   height: 100%;
+   font-size: 1.2em;
+   color: #888;
+  }

poem-life-app/src/app/tab2/tab2.page.ts

@@ -1,16 +1,152 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
+// import { IonHeader, IonToolbar, IonTitle, IonContent,IonButton, IonButtons  } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent]
+  imports: [CommonModule, FormsModule,
+    IonicModule, ExploreContainerComponent]
 })
 export class Tab2Page {
+    selectedSegment: string = 'collection';
+    books: any[] = [
+      { title: '唐诗鉴赏辞典', count: 1100, category: '书籍' },
+      { title: '宋词鉴赏辞典', count: 1294, category: '书籍' },
+      { title: '唐宋词鉴赏辞典', count: 1500, category: '书籍' },
+      { title: '元明清词鉴赏辞典', count: 840, category: '书籍' },
+      { title: '新诗鉴赏辞典', count: 909, category: '书籍' },
+      { title: '历代女性诗词鉴赏辞典', count: 652, category: '书籍' },
+      { title: '历代赋鉴赏辞典', count: 250, category: '书籍' },
+      { title: '先秦诗鉴赏辞典', count: 370, category: '书籍' },
+      { title: '汉魏六朝诗鉴赏辞典', count: 930, category: '书籍' },
+      { title: '古文鉴赏辞典', count: 566, category: '书籍' },
+      { title: '古代志怪小说鉴赏辞典', count: 539, category: '书籍' },
+      { title: '唐宋小说鉴赏辞典', count: 335, category: '书籍' },
+      { title: '明清鉴赏辞典', count: 243, category: '书籍' },
+      { title: '明清传奇鉴赏辞典', count: 281, category: '书籍' },
+      { title: '宋词300首鉴赏辞典', count: 396, category: '书籍' },
+      { title: '诗经鉴赏辞典', count: 231, category: '书籍' },
+      { title: '唐诗300首鉴赏辞典', count: 312, category: '书籍' },
+      { title: '元曲300首鉴赏辞典', count: 404, category: '书籍' },
+      { title: '中华诗词名句鉴赏辞典', count: 31, category: '书籍' },
+      { title: '诸子百家名句鉴赏辞典', count: 198, category: '书籍' }
+    ];
+      filteredBooks: any[] = [];
+      categories: string[] = [
+        '书籍', '选集', '主题', '写景', '节日', '节气', '词牌', '时间', '时令', '花卉', '课本', '地理', '城市', '名山', '用典'
+      ];
+// 定义每个分类对应的书籍列表
+ categoryBooks: { [key: string]: any[] } = {
+    '选集': [
+     { title: '诗经全集', count: 305, category: '选集' },
+     { title: '楚辞全集', count: 17, category: '选集' },
+     { title: '道德经', count: 81, category: '选集' }
+    ],
+    '主题': [
+     { title: '爱', count: 100, category: '主题' },
+     { title: '禅', count: 50, category: '主题' },
+     { title: '茶', count: 60, category: '主题' }
+    ],
+    '写景': [
+     { title: '春', count: 200, category: '写景' },
+     { title: '夏', count: 150, category: '写景' },
+     { title: '秋', count: 180, category: '写景' }
+    ],
+    '节日': [
+     { title: '春节', count: 30, category: '节日' },
+     { title: '元宵', count: 20, category: '节日' },
+     { title: '寒食', count: 15, category: '节日' }
+    ],
+    '节气': [
+     { title: '立春', count: 10, category: '节气' },
+     { title: '雨水', count: 12, category: '节气' },
+     { title: '惊蛰', count: 8, category: '节气' }
+    ],
+    '词牌': [
+     { title: '如梦令', count: 5, category: '词牌' },
+     { title: '醉花阴', count: 7, category: '词牌' },
+     { title: '虞美人', count: 6, category: '词牌' }
+    ],
+    '时间': [
+     { title: '正月', count: 25, category: '时间' },
+     { title: '二月', count: 20, category: '时间' },
+     { title: '三月', count: 18, category: '时间' }
+    ],
+    '时令': [
+     { title: '樱桃', count: 10, category: '时令' },
+     { title: '荔枝', count: 8, category: '时令' },
+     { title: '杨梅', count: 9, category: '时令' }
+    ],
+    '花卉': [
+     { title: '牡丹', count: 15, category: '花卉' },
+     { title: '梅花', count: 12, category: '花卉' },
+     { title: '桃花', count: 14, category: '花卉' }
+    ],
+    '课本': [
+     { title: '小学古诗词', count: 75, category: '课本' },
+     { title: '小学文言文', count: 30, category: '课本' },
+     { title: '初中古诗词', count: 50, category: '课本' }
+    ],
+    '地理': [
+     { title: '黄鹤楼', count: 5, category: '地理' },
+     { title: '西湖', count: 7, category: '地理' },
+     { title: '洞庭湖', count: 6, category: '地理' }
+    ],
+    '城市': [
+      { title: '洛阳', count: 10, category: '城市' },
+      { title: '长安', count: 12, category: '城市' },
+      { title: '北京', count: 15, category: '城市' }
+    ],
+    '名山': [
+      { title: '黄山', count: 8, category: '名山' },
+      { title: '泰山', count: 9, category: '名山' },
+      { title: '衡山', count: 7, category: '名山' }
+    ],
+    '用典': [
+      { title: '敬民篇', count: 10, category: '用典' },
+      { title: '治理篇', count: 8, category: '用典' },
+      { title: '修身篇', count: 9, category: '用典' }
+    ]
+ };
+  constructor() {
+    this.filteredBooks = this.books;
+  }
+  segmentChanged(event: any) {
+      const newSegment = event.detail.value;
+      if (newSegment === 'collection') {
+       this.selectCategory(this.categories[0]); // 默认选择第一个类别
+      } else {
+       this.filteredBooks = []; // 清空书籍列表
+      }
+     }
 
-  constructor() {}
+     selectBook(book: any) {
+      console.log('Selected book:', book);
+     }
+
+     openSearch() {
+      console.log('Search clicked');
+     }
+
+     selectCategory(category: string) {
+      console.log('Selected category:', category);
+      // 根据类别筛选书籍
+      if (this.categoryBooks[category]) {
+       this.filteredBooks = this.categoryBooks[category];
+      } else {
+       this.filteredBooks = this.books.filter(book => book.category === category);
+
+       // 如果没有匹配到任何书籍，显示提示信息
+       if (this.filteredBooks.length === 0) {
+        this.filteredBooks = [{ title: '暂无相关书籍', count: 0 }];
+       }
+      }
+     }
+    }
 
-}