feat(novel-app): 添加文章显示页面并实现相关功能

novel-app/deploy.ps1

@@ -0,0 +1,18 @@
+# 打包项目，携带应用前缀（index.html中相对路径将自动修复为/dev/jxnu/<学号>前缀）
+# /dev/ 项目测试版上传路径
+# /dev/jxnu/<学号> nova-crm项目预留路径
+# set NODE_OPTIONS=–max_old_space_size=16000;
+node ./node_modules/@angular/cli/bin/ng build --base-href="/dev/jxnu/20222670105/"
+
+# 清空旧文件目录
+obsutil rm obs://nova-cloud/dev/jxnu/20222670105 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"
+
+# 同步文件目录
+obsutil sync ./www obs://nova-cloud/dev/jxnu/20222670105  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read
+
+
+# 授权公开可读
+obsutil chattri obs://nova-cloud/dev/jxnu/20222670105 -r -f -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com" -acl=public-read
+
+# 列举对象
+obsutil ls obs://nova-cloud/dev/jxnu/20222670105  -i=XSUWJSVMZNHLWFAINRZ1 -k=P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6 -e="obs.cn-south-1.myhuaweicloud.com"

novel-app/src/app/app.routes.ts

@@ -74,6 +74,10 @@ export const routes: Routes = [
   },
  {
     path: 'tab4',
     loadComponent: () => import('./tab4/tab4.page').then( m => m.Tab4Page)
+  },
+  {
+    path: 'tab2',
+    loadComponent: () => import('./tab2/tab2.page').then( m => m.Tab2Page)
   }
 
 

novel-app/src/app/component/article-card/article-card.component.html

@@ -0,0 +1,10 @@
+<div class="card">
+  <img [src]="card.get('image')[0]" alt="Image">
+  <div class="content">
+    <h3>{{ card.get('title') }}</h3>
+    <p>{{ card.get('topic') }} &nbsp; {{ card.get('date') }}</p>
+    <p>
+      阅读量: {{ card.get('views') }} &nbsp; 赞: {{ card.get('likes') }}
+    </p>
+  </div>
+</div>

novel-app/src/app/component/article-card/article-card.component.scss

@@ -0,0 +1,37 @@
+.card {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 10px 0;
+  }
+  
+  .card img {
+    width: 120px;
+    height: 80px;
+    margin-right: 15px;
+    object-fit: cover;
+  }
+  
+  .card .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  
+  .card h3 {
+    font-size: 16px;
+    margin: 0;
+    color: #333;
+  }
+  
+  .card p {
+    margin: 5px 0;
+    color: #666;
+    font-size: 14px;
+  }
+  
+  .card p:last-child {
+    display: flex;
+    justify-content: space-between;
+    width: 150px;
+  }

novel-app/src/app/component/article-card/article-card.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ArticleCardComponent } from './article-card.component';
+
+describe('ArticleCardComponent', () => {
+  let component: ArticleCardComponent;
+  let fixture: ComponentFixture<ArticleCardComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ArticleCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ArticleCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

novel-app/src/app/component/article-card/article-card.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonCard } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-article-card',
+  templateUrl: './article-card.component.html',
+  styleUrls: ['./article-card.component.scss'],
+  standalone: true,
+  imports: [
+    IonCard, CommonModule
+  ]
+})
+export class ArticleCardComponent  implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+  /**
+   * controller for dropdown visibility
+   */
+  dropdownVisible = false;
+
+  toggleDropdown() {
+    this.dropdownVisible = !this.dropdownVisible;
+  }
+
+  @Input() card: any; // 接收父组件传递的卡片数据
+}

novel-app/src/app/tab2/tab2.page.html

@@ -0,0 +1,125 @@
+<ion-header [translucent]="true">
+  <ion-toolbar class="custom-toolbar">
+    <div class="search-bar" >
+      <ion-searchbar 
+      placeholder="搜索" 
+      class="custom-searchbar" 
+      (ionInput)="searchProducts($event)">
+      </ion-searchbar>
+    </div>
+    @if(!searchTerm){
+    <div class="header">
+      <ion-card-header>
+        <ion-card-title>
+          <ion-segment [scrollable]="true" value="hotdot" [value]="type" (ionChange)="typeChange($event)">
+            <ion-segment-button value="hotdot" content-id="hotdot">
+              <ion-label>热点</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="export" content-id="export">
+              <ion-label>专家科普</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="sleep" content-id="sleep">
+              <ion-label>睡眠</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="life" content-id="life">
+              <ion-label>生活</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="男" content-id="male">
+              <ion-label>男性</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="女" content-id="female">
+              <ion-label>女性</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-card-title>
+      </ion-card-header>
+    </div>
+  }
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="knowledge" [fullscreen]="true">
+  @if(!searchTerm){
+    
+    <div class="content">
+      <ion-card>
+        <ion-card-header></ion-card-header>
+  
+        <ion-card-content>
+          <ion-segment-view>
+      
+            <ion-segment-content id="female">
+              <!-- 轮播图区域 -->
+             
+              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of cards" [card]="card"></app-article-card>
+            </ion-segment-content>
+          </ion-segment-view>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  }
+  @if(searchTerm){
+    <div>
+      <app-article-card (click)="openDetailModal(product)" *ngFor="let product of products" [card]="product"></app-article-card>
+    </div>
+    @if (products.length == 0) {
+      <div class="no-results" style="margin: 50px auto;">
+        <h2>寻找中···   请耐性等待 ····</h2>
+      </div>
+    }
+  }
+
+
+  <!-- 底部弹出模态 -->
+  <ion-modal [isOpen]="isModalOpen" cssClass="bottom-modal">
+    <ng-template>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-button (click)="closeDetailModal()">关闭</ion-button>
+          </ion-buttons>
+          <ion-title>{{currentProduct.get('category')}}</ion-title>
+       
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="modal-content" *ngIf="currentProduct">
+          <h1 class="product-name">{{currentProduct.get('title')}}</h1>
+          <p><strong>作者：</strong>{{currentProduct.get('author')}}</p>
+          <p>{{currentProduct.get('content')[0]}}</p>
+          <div class="image-container">
+            <img style="width: 100%; height: auto;" [src]="currentProduct.get('image')[0]" alt="图片" class="medicine-image">
+          </div>
+          <p>{{currentProduct.get('content')[0]}}</p>  
+          <div class="image-container">
+            <img style="width: 100%; height: auto;" [src]="currentProduct.get('image')[0]" alt="图片" class="medicine-image">
+          </div>
+          <div style="display: flex; height: 30px; width: 100%; justify-content: space-between; align-items: center">
+            <p style="margin-left:30px"><strong>阅读量：</strong>{{currentProduct.get('views')}}</p>
+            <p style="margin-right:30px"><strong>点赞量：</strong>{{currentProduct.get('likes')}}</p>  
+          </div>
+        </div>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+
+  <ion-modal class="share-modal" [isOpen]="shareDetail">
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="end">
+            <ion-button (click)="closeDetailModal()">X</ion-button>
+          </ion-buttons>
+          <ion-title>分享</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-item>
+          <ion-label position="stacked">分享链接</ion-label>
+          <!-- <ion-input [(ngModel)]="shareLink" readonly></ion-input> -->
+        </ion-item>
+        <ion-button expand="block" (click)="copyLink()">复制链接</ion-button>
+    </ion-content>
+  </ion-modal>
+</ion-content>

novel-app/src/app/tab2/tab2.page.scss

@@ -0,0 +1,216 @@
+.custom-toolbar {
+  --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
+  display: flex; /* 使用 Flexbox 布局 */
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+  padding: 0; /* 去掉默认内边距 */
+}
+
+
+.search-bar {
+    padding: 10px;
+    text-align: center;
+  }
+  
+.custom-searchbar {
+  --background: #ffffff;
+  --border-radius: 20px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+.header {
+  height: 80px;
+  margin-top:-10px
+}
+.knowledge {
+  height: 100%;
+  width: 100%;
+}
+
+.content {
+  margin-top: -5px;
+  -height: 100%;
+  width: 100%;
+}
+ion-card-header {
+  font-size: 1.5em;
+  height: auto;
+}
+
+ion-card {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+
+ion-card-content {
+  font-size: 1.2em;
+  width: 100%;
+  height: auto;
+}
+
+ion-segment-view {
+  height: auto;
+  width: 100%;
+}
+
+ion-segment-content {
+  // display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// ion-segment-content:nth-of-type(5) {
+//   background: lightpink;
+// }
+// ion-segment-content:nth-of-type(2) {
+//   background: lightblue;
+// }
+// ion-segment-content:nth-of-type(3) {
+//   background: lightgreen;
+// }
+
+.share-modal{
+  --height: 30vh;
+  --width: 100%;
+  --offset-y: 0; /* 确保模态窗口从底部弹出 */
+}
+// 底部弹窗(modal)样式
+.bottom-modal {
+  --height: 100vh;
+  --width: 100%;
+  --offset-y: 0; /* 确保模态窗口从底部弹出 */
+  
+  .modal-content {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  
+  .image-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+  
+  .medicine-image {
+    object-fit: cover;
+    border-radius: 8px;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// .tabs {
+//   display: flex;
+//   justify-content: space-around;
+//   padding: 0px 0;
+//   background-color: #f8f8f8;
+// }
+
+// .tabs ion-button {
+//   flex: 1;
+//   text-align: center;
+//   // border: none;
+//   --background: transparent;
+//   --color-checked: #4caf50;
+//   --indicator-color: #4caf50;
+//   --color: #666;
+//   --color-focused: #4caf50;
+//   --color-hover: #4caf50;
+//   --color-activated: #4caf50;
+//   --color-selected: #4caf50;
+// }
+
+// .tab {
+//   cursor: pointer;
+//   padding: 0px 0px;
+// }
+// .tab.active {
+//   color: rgb(81, 255, 0);
+//   background-color: rgb(255, 255, 255);
+// }
+
+//
+
+// 轮播图区域
+.carousel-container {
+  position: relative;
+  max-width: 800px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.carousel {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+  min-width: 100%;
+}
+
+.slide img {
+  width: 100%;
+  height: auto;
+}
+
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+.prev {
+  left: 0;
+}
+
+.next {
+  right: 0;
+}
+
+.dots {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+.dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  background: #bbb;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.dot.active {
+  background: #717171;
+} 
+//

novel-app/src/app/tab2/tab2.page.spec.ts

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

novel-app/src/app/tab2/tab2.page.ts

@@ -0,0 +1,155 @@
+import { Component } from '@angular/core';
+import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton, IonFabList } from '@ionic/angular/standalone';
+import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { addIcons } from 'ionicons';
+import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
+import { ArticleCardComponent } from '../component/article-card/article-card.component';
+import { CommonModule } from '@angular/common';
+import { CloudObject, CloudQuery } from '../lib/ncloud';
+import { Router } from '@angular/router';
+import {
+  chevronDownCircle,
+  chevronForwardCircle,
+  chevronUpCircle,
+  colorPalette,
+  document,
+  globe,
+} from 'ionicons/icons';
+addIcons({ airplane, bluetooth, call, wifi });
+addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe });
+@Component({
+  selector: 'app-tab2',
+  templateUrl: 'tab2.page.html',
+  styleUrls: ['tab2.page.scss'],
+  standalone: true,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+    IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
+    IonSegment, IonSegmentButton,
+    IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
+    IonModal,IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton,IonFabList,
+  ]
+})
+
+export class Tab2Page {
+  
+ /**
+  * 轮播图
+  */
+ images = [
+  'https://picsum.photos/800/400?random=1',
+  'https://picsum.photos/800/400?random=2',
+  'https://picsum.photos/800/400?random=3',
+  'https://picsum.photos/800/400?random=4',
+  'https://picsum.photos/800/400?random=5',
+  'https://picsum.photos/800/400?random=6',
+];
+
+currentSlide = 0;
+intervalId: any;
+setSlidePosition() {
+  // 这里不需要额外的逻辑，因为在 HTML 中已经通过绑定实现
+}
+
+nextSlide() {
+  this.currentSlide = (this.currentSlide + 1) % this.images.length;
+}
+
+prevSlide() {
+  this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
+}
+
+goToSlide(index: number) {
+  this.currentSlide = index;
+}
+
+startAutoSlide() {
+  this.intervalId = setInterval(() => this.nextSlide(), 3000);
+}
+
+
+  products: Array<CloudObject> = []; // 当前显示的科普信息
+  allCards: Array<CloudObject> = []; // 所有科普信息
+
+  //搜索功能
+  searchTerm: string = '';
+
+  async searchProducts(event: any) {
+    this.searchTerm = event.detail.value.toLowerCase();
+    if (this.searchTerm) {
+      this.products = this.allCards.filter(product =>
+        product.get('topic').toLowerCase().includes(this.searchTerm) ||
+        product.get('title').toLowerCase().includes(this.searchTerm) ||
+        product.get('category').toLowerCase().includes(this.searchTerm) ||
+        product.get('content')[0].toLowerCase().includes(this.searchTerm)
+      );
+    } else {
+      this.products = [...this.allCards]; // 如果搜索词为空，则显示所有科普信息
+    }
+  }
+
+  isModalOpen = false;
+  currentProduct: any;      // 当前选择的科普信息
+
+  openDetailModal(product?: any) {
+    this.isModalOpen = true;
+    this.currentProduct = product;
+  }
+  closeDetailModal() {
+    this.isModalOpen = false;
+    this.currentProduct = null;
+  }
+  shareDetail = false;
+  shareDetailModal() {
+    this.shareDetail = true;
+    // 在这里确保模态框的aria-hidden属性被正确处理
+    // setTimeout(() => {
+    //   const modalElement = document.querySelector('ion-modal');
+    //   if (modalElement) {
+    //     modalElement.setAttribute('aria-hidden', 'false');
+    //   }
+    // }, 0);
+  }
+  closeShareModal(){
+    this.shareDetail = false;
+
+  }
+  copyLink() {
+    console.log('复制链接');
+  }
+  type:"hotdot"|"export"|"sleep"|"life"|"男"|"女" = "hotdot"
+
+  constructor(
+    private modalCtrl:ModalController,
+    private router:Router,
+  ) { 
+    this.loadCards(); // 初始化时加载所有科普信息
+  }
+
+  cards: Array<CloudObject> = []; // 当前显示的分类卡片
+  async typeChange(ev: any) {
+    this.type = ev?.detail?.value || ev?.value || 'hotdot';
+    console.log(this.type);
+    await this.loadCards(); // 重新加载卡片
+  }
+
+  async loadCards() {
+    const query = new CloudQuery('HotDot');
+    this.allCards = await query.find(); // 执行查询并获取结果
+    this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
+  }
+
+
+  publishHealthInfo() {
+    // 这里可以添加发布求医信息的逻辑
+    console.log('发布求医信息');
+  }
+
+  openAiKnowledge(){
+    this.router.navigate(['tabs/ai-knowledge']);
+  }
+  ngOnInit() {
+
+  }
+
+}