refactor(novel-app): 优化章节生成器和文章卡片组件

novel-app/src/app/chapter-generator/chapter-generator.page.html

@@ -26,7 +26,7 @@
 
     <!-- 侧边栏 -->
     <div [style.display]="isSideShow ? 'flex' : 'none'"
-      style="display: flex; width: 200px; flex-direction: column; z-index: 1000;">
+      style="display: flex; width: 200px; height: 90%; flex-direction: column; z-index: 1000; overflow-y: auto; max-height: 100%;">
       <ion-list>
         <ion-item *ngFor="let chapter of chapters; let i = index;" (click)="selectChapter(i)">
           <ion-label>{{ chapter.title }}</ion-label>
@@ -40,11 +40,7 @@
       <ion-button (click)="addChapter()">
         <ion-icon name="add"></ion-icon>添加章节
       </ion-button>
-
-      <ion-button color="light" (click)="toggleSide()">
-        <ion-icon name="add"></ion-icon>{{isSideShow ? '折叠' : '展开'}}
-      </ion-button>
-    </div>
+</div>
 
     <!-- 内容区域 -->
     <div class="chapter-edit-container">
@@ -62,16 +58,17 @@
         <textarea [(ngModel)]="selectedChapterContent" style="width: 100%; height: 300px;"></textarea>
       </ion-item>
       <ion-button (click)="saveChapter()" expand="block" color="success">保存章节</ion-button>
-      } @else {
+      } 
+      @else {
       <p>请选择一个章节进行编辑。</p>
       }
     </div>
   </div>
 
   <!-- 悬浮球 -->
-  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button (click)="toggleSide()">
-      <ion-icon name="chevron-forward"></ion-icon>
+      <ion-icon name="add"></ion-icon>
     </ion-fab-button>
   </ion-fab>
 </ion-content>

novel-app/src/app/chapter-generator/chapter-generator.page.scss

@@ -6,7 +6,9 @@ ion-menu {
 ion-list {
     margin-top: 16px;
 }
-
+ion-content {
+    overflow: auto; // 确保内容可以滚动，不会裁剪 FAB
+}
 .overlay {
     position: fixed;
     top: 0;
@@ -41,5 +43,7 @@ ion-list {
 
 ion-fab {
     z-index: 1000;
+    margin-left: 16px; // 根据需要调整
+    margin-bottom: 40px; // 根据需要调整
     /* 确保悬浮球在最上层 */
 }

novel-app/src/app/chapter-generator/chapter-generator.page.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms'; // 导入 FormsModule
 import { IonRouterOutlet } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
+import { add } from 'ionicons/icons';
 import { chevronForward } from 'ionicons/icons';
 import { IonicModule, ModalController } from '@ionic/angular';
 import { CommonModule } from '@angular/common';
@@ -30,8 +31,8 @@ addIcons({ chevronForward });
 })
 export class ChapterGeneratorPage implements OnInit {
   chapters = [
-    { title: 'Chapter 1', content: '这是第一章的内容。' },
-    // 其他章节...
+    { title: 'Chapter 1', content: '' },
+   
   ];
   isSideShow: boolean = true;
   selectedChapterIndex: number | null = null;
@@ -41,7 +42,7 @@ export class ChapterGeneratorPage implements OnInit {
   title: string = '';
   description: string = '';
 
-  constructor(private modalCtrl: ModalController, private route: ActivatedRoute) { }
+  constructor(private modalCtrl: ModalController, private route: ActivatedRoute) {  addIcons({ add });}
 
   ngOnInit() {
     this.route.queryParams.subscribe(params => {

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

@@ -1,7 +1,7 @@
 <div class="card">
   <div class="content">
     <h3>{{ card.get('title') }}</h3>
-    
-    <p>作者：{{ card.get('username') }}</p> <p>{{ card.get('date') }}</p>
+    <p *ngIf="user.id === admin">作者：{{ card.get('username') }}</p>
+    <p>{{ card.get('date') }}</p>
   </div>
-</div>
+</div>

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { IonCard } from '@ionic/angular/standalone';
-
+import { CloudObject, CloudQuery,CloudUser } from '../../lib/ncloud';
 @Component({
   selector: 'app-article-card',
   templateUrl: './article-card.component.html',
@@ -12,10 +12,21 @@ import { IonCard } from '@ionic/angular/standalone';
   ]
 })
 export class ArticleCardComponent  implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {}
+  user : CloudUser 
+  admin:string = 'nRDdxdEn2k'
+  constructor() { 
+    this.user = new CloudUser();
+  }
+  async loadDoctorList(){
+    let user = new CloudUser();
+    let query = new CloudQuery("NovelCharacter");
+    query.equalTo("user",user?.id)
+    console.log("user",user.id)
+   
+  }
+  ngOnInit() {
+    this.loadDoctorList();
+  }
 
   dropdownVisible = false;
 

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

@@ -14,28 +14,20 @@
       <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-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> -->
             <ion-segment-button value="短篇小说" content-id="短篇小说">
               <ion-label>短篇小说</ion-label>
              </ion-segment-button>
              <ion-segment-button value="工具箱" content-id="短篇小说">
               <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>
@@ -56,7 +48,7 @@
           <ion-segment-view>
       
             <ion-segment-content id="female">
-              <app-article-card (click)="openDetailModal(card)" *ngFor="let card of mycards" [card]="card"></app-article-card>
+              <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>
@@ -64,6 +56,7 @@
     </div>
   }
   @if(searchTerm){
+   
     <div>
       <app-article-card (click)="openDetailModal(product)" *ngFor="let product of products" [card]="product"></app-article-card>
     </div>

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

@@ -54,12 +54,14 @@ setSlidePosition() {
 
   async searchProducts(event: any) {
     this.searchTerm = event.detail.value.toLowerCase();
+    console.log('搜索词:', this.searchTerm);
+    
     if (this.searchTerm) {
       this.products = this.allCards.filter(product =>
-        product.get('topic').toLowerCase().includes(this.searchTerm) ||
+        product.get('username').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)
+        product.get('content2')[0].toLowerCase().includes(this.searchTerm)
       );
     } else {
       this.products = [...this.allCards]; // 如果搜索词为空，则显示所有科普信息
@@ -67,7 +69,7 @@ setSlidePosition() {
   }
 
   isModalOpen = false;
-  currentProduct: any;      // 当前选择的科普信息
+  currentProduct: any;      
 
   openDetailModal(product?: any) {
     this.isModalOpen = true;
@@ -81,52 +83,55 @@ setSlidePosition() {
 
 
 
-  type:"hotdot"|"export" = "hotdot"
+  type:"短篇小说"|"工具箱" = "短篇小说"
 content = ''
   constructor(
     private modalCtrl:ModalController,
     private router:Router,
   ) { 
     this.user = new CloudUser();
-    // this.loadCards(); // 初始化时加载所有科普信息
+    this.loadmyCards(); // 初始化时加载所有科普信息
   }
 
   cards: Array<CloudObject> = [];
   mycards: Array<CloudObject> = []; // 当前显示的分类卡片
   myCards: Array<CloudObject> = [];
   async typeChange(ev: any) {
-    this.type = ev?.detail?.value || ev?.value || 'hotdot';
+    this.type = ev?.detail?.value || ev?.value || '短篇小说';
     console.log(this.type);
     await this.loadmyCards(); // 重新加载卡片
   }
 
   // async loadCards() {
   //   const query = new CloudQuery('NovelAriticle');
-  //   // this.content = '',
   //   this.allCards = await query.find(); 
   //   console.log(this.allCards);
   //   this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
   //   console.log(this.cards);
-   
   // }
   async loadmyCards() {
     let user = new CloudUser();
     const query = new CloudQuery('NovelAriticle');
+    if(user.id == this.admin){   
+      this.allCards = await query.find(); 
+    console.log(this.allCards);
+    this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
+    console.log(this.cards);
+
+     }else{
     query.equalTo("user",user?.id)
     console.log("user",user.id)
-    this.myCards = await query.find(); 
-    console.log(this.myCards);
-    this.mycards = this.myCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
-    console.log(this.mycards);
-   
+    this.allCards = await query.find(); 
+    console.log(this.allCards);
+    this.cards = this.allCards.filter((card) => card.get('category').toLowerCase().includes(this.type));
+    console.log(this.cards);
+  }
   }
 
 
 
 
-  openAiKnowledge(){
-    this.router.navigate(['tabs/ai-knowledge']);
-  }
+ 
   ngOnInit() {
     this.loadmyCards();
   }

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

@@ -9,7 +9,10 @@
       <ion-icon aria-hidden="true" name="chatbox"></ion-icon>
       <ion-label>角色</ion-label>
     </ion-tab-button>
-
+    <ion-tab-button tab="person" (click)="goPage('/tab2')">
+      <ion-icon aria-hidden="true" name="person"></ion-icon>
+      <ion-label>生成管理</ion-label>
+    </ion-tab-button>
     <ion-tab-button tab="person" (click)="goPage('/tabs/person')">
       <ion-icon aria-hidden="true" name="person"></ion-icon>
       <ion-label>个人</ion-label>