feat(toolbox): 更新工具箱功能和界面

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

@@ -1,102 +1,134 @@
-import { HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
-import { IonicRouteStrategy } from '@ionic/angular';
-
-export const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
-  },
-  {
-    path: 'story-generator',
-    loadComponent: () => import('./story-generator/story-generator.page').then(m => m.StoryGeneratorPage)
-  },
-  {
-    path: 'toolbox',
-    loadComponent: () => import('./toolbox/toolbox.page').then(m => m.ToolboxPage)
-  },
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
-  },
-  {
-    path: 'register',
-    loadComponent: () => import('./register/register.page').then(m => m.RegisterPage)
-  },
-  {
-    path: 'login',
-    loadComponent: () => import('./login/login.page').then(m => m.LoginPage)
-  },
-  {
-    path: 'short-generator',
-    loadComponent: () => import('./short-generator/short-generator.page').then(m => m.ShortGeneratorPage)
-  },
-  {
-    path: 'character-creator',
-    loadComponent: () => import('./character-creator/character-creator.page').then(m => m.CharacterCreatorPage)
-  },
-  {
-    path: 'chapter-generator',
-    loadComponent: () => import('./chapter-generator/chapter-generator.page').then(m => m.ChapterGeneratorPage)
-  },
-  {
-    path: 'tab1',
-    loadComponent: () => import('./tab1/tab1.page').then(m => m.Tab1Page)
-  },
-  {
-    path: 'world-setup',
-    loadComponent: () => import('./world-setup/world-setup.page').then(m => m.WorldSetupPage)
-  },
-  {
-    path: 'character-generator',
-    loadComponent: () => import('./character-generator/character-generator.page').then(m => m.CharacterGeneratorPage)
-  },
-  {
-    path: 'name-generator',
-    loadComponent: () => import('./name-generator/name-generator.page').then(m => m.NameGeneratorPage)
-  },
-  {
-    path: 'agent-create',
-    loadComponent: () => import('./agent-create/agent-create.page').then( m => m.AgentCreatePage)
-  },
-  {
-    path: 'atest',
-    loadComponent: () => import('./atest/atest.page').then( m => m.AtestPage)
-  },
-  {
-    path: 'tab4',
-    loadComponent: () => import('./tab4/tab4.page').then( m => m.Tab4Page)
-  },
-  {
-    path: 'tab2',
-    loadComponent: () => import('./tab2/tab2.page').then( m => m.Tab2Page)
-  },
-  {
-    path: 'tab7',
-    loadComponent: () => import('./tab7/tab7.page').then( m => m.Tab7Page)
-  },
-  {
-    path: 'comp-uploader-hwobs',
-    loadComponent: () => import('../app/comp-uploader-hwobs/comp-uploader-hwobs.component').then( m => m.CompUploaderHwobsComponent)
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
+import { IonicRouteStrategy } from '@ionic/angular';
+
+export const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'story-generator',
+    loadComponent: () => import('./story-generator/story-generator.page').then(m => m.StoryGeneratorPage)
+  },
+  {
+    path: 'toolbox',
+    loadComponent: () => import('./toolbox/toolbox.page').then(m => m.ToolboxPage)
+  },
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
+  {
+    path: 'register',
+    loadComponent: () => import('./register/register.page').then(m => m.RegisterPage)
+  },
+  {
+    path: 'login',
+    loadComponent: () => import('./login/login.page').then(m => m.LoginPage)
+  },
+  {
+    path: 'short-generator',
+    loadComponent: () => import('./short-generator/short-generator.page').then(m => m.ShortGeneratorPage)
+  },
+  {
+    path: 'character-creator',
+    loadComponent: () => import('./character-creator/character-creator.page').then(m => m.CharacterCreatorPage)
+  },
+  {
+    path: 'chapter-generator',
+    loadComponent: () => import('./chapter-generator/chapter-generator.page').then(m => m.ChapterGeneratorPage)
+  },
+  {
+    path: 'tab1',
+    loadComponent: () => import('./tab1/tab1.page').then(m => m.Tab1Page)
+  },
+  {
+    path: 'world-setup',
+    loadComponent: () => import('./world-setup/world-setup.page').then(m => m.WorldSetupPage)
+  },
+  {
+    path: 'character-generator',
+    loadComponent: () => import('./character-generator/character-generator.page').then(m => m.CharacterGeneratorPage)
+  },
+  {
+    path: 'name-generator',
+    loadComponent: () => import('./name-generator/name-generator.page').then(m => m.NameGeneratorPage)
+  },
+  {
+    path: 'agent-create',
+    loadComponent: () => import('./agent-create/agent-create.page').then( m => m.AgentCreatePage)
+  },
+  {
+    path: 'atest',
+    loadComponent: () => import('./atest/atest.page').then( m => m.AtestPage)
+  },
+  {
+    path: 'tab4',
+    loadComponent: () => import('./tab4/tab4.page').then( m => m.Tab4Page)
+  },
+  {
+    path: 'tab2',
+    loadComponent: () => import('./tab2/tab2.page').then( m => m.Tab2Page)
+  },
+  {
+    path: 'tab7',
+    loadComponent: () => import('./tab7/tab7.page').then( m => m.Tab7Page)
+  },
+  {
+    path: 'comp-uploader-hwobs',
+    loadComponent: () => import('../app/comp-uploader-hwobs/comp-uploader-hwobs.component').then( m => m.CompUploaderHwobsComponent)
+  },
  {
+    path: 'tool1',
+    loadComponent: () => import('./tool1/tool1.page').then( m => m.Tool1Page)
+  },
+  {
+    path: 'tool2',
+    loadComponent: () => import('./tool2/tool2.page').then( m => m.Tool2Page)
+  },
+  {
+    path: 'tool3',
+    loadComponent: () => import('./tool3/tool3.page').then( m => m.Tool3Page)
+  },
+  {
+    path: 'tool4',
+    loadComponent: () => import('./tool4/tool4.page').then( m => m.Tool4Page)
+  },
+  {
+    path: 'tool5',
+    loadComponent: () => import('./tool5/tool5.page').then( m => m.Tool5Page)
+  },
+  {
+    path: 'tool6',
+    loadComponent: () => import('./tool6/tool6.page').then( m => m.Tool6Page)
+  },
+  {
+    path: 'tool7',
+    loadComponent: () => import('./tool7/tool7.page').then( m => m.Tool7Page)
+  },
+  {
+    path: 'tool8',
+    loadComponent: () => import('./tool8/tool8.page').then( m => m.Tool8Page)
   }
 
-
-
-
-
-
-];
-
-
-
-
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }), HttpClientModule],
-  exports: [RouterModule],
-  providers: [
-    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
-  ],
-})
+
+
+
+
+
+
+];
+
+
+
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }), HttpClientModule],
+  exports: [RouterModule],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+})
 export class AppRoutingModule { }

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

@@ -81,21 +81,21 @@
           <ion-row>
             <ion-col size="6" *ngFor="let story of storyList">
               <div class="story-card" (click)="goStory(story)">
-                <ion-img [src]="story.get('cover')" alt=""></ion-img>
+                <!-- <ion-img [src]="story.get('cover')" alt=""></ion-img> -->
                 <div class="story-info">
-                  <h3>{{story.get("title")}} {{story.id}}</h3>
-                  <p>{{formatDate(story.createdAt)}}</p>
+                  <h3>{{story.get("title")}} </h3>
+                  <!-- <p>{{story.id}} {{formatDate(story.createdAt)}}</p> -->
                 </div>
               </div>
             </ion-col>
           </ion-row>
         </ion-grid>
 
-        <div class="empty-state" *ngIf="stories.length === 0">
+        <!-- <div class="empty-state" *ngIf="stories.length === 0">
           <ion-icon name="document-outline"></ion-icon>
           <h3>暂无作品</h3>
           <p>点击新建作品按钮开始创作</p>
-        </div>
+        </div> -->
       </ion-card-content>
     </ion-card>
   </div>

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

@@ -180,6 +180,7 @@ export class ShortGeneratorPage implements OnInit {
             topic: `${this.style}`,
             content2: `${this.generatedContent}`,
             entry: `${this.entry}`,
+          
              outline: `${this.generatedOutline}`,
             date: dateStr,
             

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

@@ -85,6 +85,7 @@
         <div class="modal-content" *ngIf="currentProduct">
           <h1 class="product-name">{{currentProduct.get('title')}}</h1>
           <p><strong>作者：</strong>{{currentProduct.get('username')}}</p>
+          <p>{{currentProduct.get('required')}}</p>
           <fm-markdown-preview  [content]="currentProduct.get('content2')"></fm-markdown-preview>
           
           <!-- <div class="image-container">

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>小说大纲生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <!-- <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input> -->
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()"  expand="block">生成大纲</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存小说大纲</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,136 @@
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
+/* 卡片样式 */
+ion-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* 默认阴影 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  /* 添加过渡效果 */
+}
+
+ion-content ion-card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
+  /* 调整阴影强度和模糊半径 */
+  transform: translateY(-12px);
+  /* 增加提升高度 */
+}
+
+/* 卡片标题样式 */
+ion-card-title {
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+/* 卡片内容样式 */
+ion-card-content {
+  padding: 16px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: rgba(255, 255, 255, 0.5);
+  /* 半透明白色背景 */
+  --color: black;
+  /* 按钮文字颜色 */
+  --border-radius: 8px;
+  /* 按钮圆角 */
+  --padding-top: 12px;
+  /* 按钮内边距 */
+  --padding-bottom: 12px;
+  /* 按钮内边距 */
+  --padding-start: 24px;
+  /* 按钮内边距 */
+  --padding-end: 24px;
+  /* 按钮内边距 */
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+ion-button:hover {
+  --background: rgba(255, 255, 255, 0.7);
+  /* 鼠标悬停时稍微不那么透明 */
+}
+
+/* 工具栏样式 */
+ion-toolbar {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  --color: #333;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 返回按钮样式 */
+ion-back-button {
+  --color: #007bff;
+}
+
+/* 为每个卡片添加背景图片和不同的渐变背景 */
+ion-card:nth-child(1) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(2) {
+  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(3) {
+  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}

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

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

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

@@ -0,0 +1,135 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool1',
+  templateUrl: './tool1.page.html',
+  styleUrls: ['./tool1.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool1Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的小说作者，请您根据用户提供的要求${this.style}，添加文章信息，并给出短篇小说大纲。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            title :`小说大纲`,
+            required: `${this.style}`,
+            content2: `${this.generatedOutline}`,
+            
+           
+             
+            date: dateStr,
+            
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+<!-- 
+  <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input> -->
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成标题</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存标题</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,136 @@
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
+/* 卡片样式 */
+ion-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* 默认阴影 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  /* 添加过渡效果 */
+}
+
+ion-content ion-card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
+  /* 调整阴影强度和模糊半径 */
+  transform: translateY(-12px);
+  /* 增加提升高度 */
+}
+
+/* 卡片标题样式 */
+ion-card-title {
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+/* 卡片内容样式 */
+ion-card-content {
+  padding: 16px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: rgba(255, 255, 255, 0.5);
+  /* 半透明白色背景 */
+  --color: black;
+  /* 按钮文字颜色 */
+  --border-radius: 8px;
+  /* 按钮圆角 */
+  --padding-top: 12px;
+  /* 按钮内边距 */
+  --padding-bottom: 12px;
+  /* 按钮内边距 */
+  --padding-start: 24px;
+  /* 按钮内边距 */
+  --padding-end: 24px;
+  /* 按钮内边距 */
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+ion-button:hover {
+  --background: rgba(255, 255, 255, 0.7);
+  /* 鼠标悬停时稍微不那么透明 */
+}
+
+/* 工具栏样式 */
+ion-toolbar {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  --color: #333;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 返回按钮样式 */
+ion-back-button {
+  --color: #007bff;
+}
+
+/* 为每个卡片添加背景图片和不同的渐变背景 */
+ion-card:nth-child(1) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(2) {
+  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(3) {
+  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}

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

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

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

@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool2',
+  templateUrl: './tool2.page.html',
+  styleUrls: ['./tool2.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool2Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的小说作者，请您根据用户提供的要求${this.style}，并给出小说标题。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            required: `${this.style}`,
+            content2: `${this.generatedOutline}`,
+            date: dateStr,
+            title :`小说标题`,
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <!-- <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input> -->
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成人物特点</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存人物特点</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,136 @@
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
+/* 卡片样式 */
+ion-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* 默认阴影 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  /* 添加过渡效果 */
+}
+
+ion-content ion-card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
+  /* 调整阴影强度和模糊半径 */
+  transform: translateY(-12px);
+  /* 增加提升高度 */
+}
+
+/* 卡片标题样式 */
+ion-card-title {
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+/* 卡片内容样式 */
+ion-card-content {
+  padding: 16px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: rgba(255, 255, 255, 0.5);
+  /* 半透明白色背景 */
+  --color: black;
+  /* 按钮文字颜色 */
+  --border-radius: 8px;
+  /* 按钮圆角 */
+  --padding-top: 12px;
+  /* 按钮内边距 */
+  --padding-bottom: 12px;
+  /* 按钮内边距 */
+  --padding-start: 24px;
+  /* 按钮内边距 */
+  --padding-end: 24px;
+  /* 按钮内边距 */
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+ion-button:hover {
+  --background: rgba(255, 255, 255, 0.7);
+  /* 鼠标悬停时稍微不那么透明 */
+}
+
+/* 工具栏样式 */
+ion-toolbar {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  --color: #333;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 返回按钮样式 */
+ion-back-button {
+  --color: #007bff;
+}
+
+/* 为每个卡片添加背景图片和不同的渐变背景 */
+ion-card:nth-child(1) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(2) {
+  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(3) {
+  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}

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

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

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

@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool3',
+  templateUrl: './tool3.page.html',
+  styleUrls: ['./tool3.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool3Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的小说作者，请您根据用户提供的要求${this.style}，给出人物特点。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            required: `${this.style}`,
+            content2: `${this.generatedOutline}`,
+            date: dateStr,
+            title :`人物特点`,
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <!-- <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input> -->
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成小说名称</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存小说名称</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,136 @@
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
+/* 卡片样式 */
+ion-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* 默认阴影 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  /* 添加过渡效果 */
+}
+
+ion-content ion-card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
+  /* 调整阴影强度和模糊半径 */
+  transform: translateY(-12px);
+  /* 增加提升高度 */
+}
+
+/* 卡片标题样式 */
+ion-card-title {
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+/* 卡片内容样式 */
+ion-card-content {
+  padding: 16px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: rgba(255, 255, 255, 0.5);
+  /* 半透明白色背景 */
+  --color: black;
+  /* 按钮文字颜色 */
+  --border-radius: 8px;
+  /* 按钮圆角 */
+  --padding-top: 12px;
+  /* 按钮内边距 */
+  --padding-bottom: 12px;
+  /* 按钮内边距 */
+  --padding-start: 24px;
+  /* 按钮内边距 */
+  --padding-end: 24px;
+  /* 按钮内边距 */
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+ion-button:hover {
+  --background: rgba(255, 255, 255, 0.7);
+  /* 鼠标悬停时稍微不那么透明 */
+}
+
+/* 工具栏样式 */
+ion-toolbar {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  --color: #333;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 返回按钮样式 */
+ion-back-button {
+  --color: #007bff;
+}
+
+/* 为每个卡片添加背景图片和不同的渐变背景 */
+ion-card:nth-child(1) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(2) {
+  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(3) {
+  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}

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

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

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

@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool4',
+  templateUrl: './tool4.page.html',
+  styleUrls: ['./tool4.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool4Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的小说作者，请您根据用户提供的要求${this.style}，给出小说名称。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            required: `${this.style}`,
+            content2: `${this.generatedOutline}`,
+            date: dateStr,
+            title :`小说名称`,
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <!-- <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input> -->
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求"  (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成人物名称</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存人物名称</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,136 @@
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
+/* 卡片样式 */
+ion-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* 默认阴影 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  /* 添加过渡效果 */
+}
+
+ion-content ion-card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
+  /* 调整阴影强度和模糊半径 */
+  transform: translateY(-12px);
+  /* 增加提升高度 */
+}
+
+/* 卡片标题样式 */
+ion-card-title {
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+/* 卡片内容样式 */
+ion-card-content {
+  padding: 16px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: rgba(255, 255, 255, 0.5);
+  /* 半透明白色背景 */
+  --color: black;
+  /* 按钮文字颜色 */
+  --border-radius: 8px;
+  /* 按钮圆角 */
+  --padding-top: 12px;
+  /* 按钮内边距 */
+  --padding-bottom: 12px;
+  /* 按钮内边距 */
+  --padding-start: 24px;
+  /* 按钮内边距 */
+  --padding-end: 24px;
+  /* 按钮内边距 */
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+ion-button:hover {
+  --background: rgba(255, 255, 255, 0.7);
+  /* 鼠标悬停时稍微不那么透明 */
+}
+
+/* 工具栏样式 */
+ion-toolbar {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  --color: #333;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 返回按钮样式 */
+ion-back-button {
+  --color: #007bff;
+}
+
+/* 为每个卡片添加背景图片和不同的渐变背景 */
+ion-card:nth-child(1) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(2) {
+  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(3) {
+  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}

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

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

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

@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool5',
+  templateUrl: './tool5.page.html',
+  styleUrls: ['./tool5.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool5Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的小说作者，请您根据用户提供的要求${this.style}，给出人物名称。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            required: `${this.style}`,
+            content2: `${this.generatedOutline}`,
+            date: dateStr,
+            title :`人物名称`,
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <!-- <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input> -->
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成世界架构</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存世界架构</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,136 @@
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
+/* 卡片样式 */
+ion-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* 默认阴影 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  /* 添加过渡效果 */
+}
+
+ion-content ion-card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
+  /* 调整阴影强度和模糊半径 */
+  transform: translateY(-12px);
+  /* 增加提升高度 */
+}
+
+/* 卡片标题样式 */
+ion-card-title {
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+/* 卡片内容样式 */
+ion-card-content {
+  padding: 16px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: rgba(255, 255, 255, 0.5);
+  /* 半透明白色背景 */
+  --color: black;
+  /* 按钮文字颜色 */
+  --border-radius: 8px;
+  /* 按钮圆角 */
+  --padding-top: 12px;
+  /* 按钮内边距 */
+  --padding-bottom: 12px;
+  /* 按钮内边距 */
+  --padding-start: 24px;
+  /* 按钮内边距 */
+  --padding-end: 24px;
+  /* 按钮内边距 */
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+ion-button:hover {
+  --background: rgba(255, 255, 255, 0.7);
+  /* 鼠标悬停时稍微不那么透明 */
+}
+
+/* 工具栏样式 */
+ion-toolbar {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  --color: #333;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 返回按钮样式 */
+ion-back-button {
+  --color: #007bff;
+}
+
+/* 为每个卡片添加背景图片和不同的渐变背景 */
+ion-card:nth-child(1) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(2) {
+  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(3) {
+  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}

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

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

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

@@ -0,0 +1,131 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool6',
+  templateUrl: './tool6.page.html',
+  styleUrls: ['./tool6.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool6Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的小说作者，请您根据用户提供的要求${this.style}，给出小说世界架构。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            required: `${this.style}`,
+            content2: `${this.generatedOutline}`,
+            date: dateStr,
+            title :`世界架构`,
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input>
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成大纲</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存小说</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,136 @@
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
+/* 卡片样式 */
+ion-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* 默认阴影 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+  /* 添加过渡效果 */
+}
+
+ion-content ion-card:hover {
+  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
+  /* 调整阴影强度和模糊半径 */
+  transform: translateY(-12px);
+  /* 增加提升高度 */
+}
+
+/* 卡片标题样式 */
+ion-card-title {
+  color: #ffffff;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+/* 卡片内容样式 */
+ion-card-content {
+  padding: 16px;
+}
+
+/* 按钮样式 */
+ion-button {
+  --background: rgba(255, 255, 255, 0.5);
+  /* 半透明白色背景 */
+  --color: black;
+  /* 按钮文字颜色 */
+  --border-radius: 8px;
+  /* 按钮圆角 */
+  --padding-top: 12px;
+  /* 按钮内边距 */
+  --padding-bottom: 12px;
+  /* 按钮内边距 */
+  --padding-start: 24px;
+  /* 按钮内边距 */
+  --padding-end: 24px;
+  /* 按钮内边距 */
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+ion-button:hover {
+  --background: rgba(255, 255, 255, 0.7);
+  /* 鼠标悬停时稍微不那么透明 */
+}
+
+/* 工具栏样式 */
+ion-toolbar {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  --color: #333;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 返回按钮样式 */
+ion-back-button {
+  --color: #007bff;
+}
+
+/* 为每个卡片添加背景图片和不同的渐变背景 */
+ion-card:nth-child(1) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(2) {
+  background: linear-gradient(135deg, #39a6f9, hsl(311, 73%, 87%)), url('/assets/images/card2.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+
+ion-card:nth-child(3) {
+  background: linear-gradient(135deg, #24f919, #e8f5aa), url('/assets/images/card3.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+  background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+  /* 渐变背景和图片背景 */
+  background-blend-mode: multiply;
+  /* 混合模式 */
+  background-size: cover;
+  /* 背景图片覆盖整个卡片 */
+  background-position: center;
+  /* 背景图片居中 */
+}

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

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

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

@@ -0,0 +1,134 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool7',
+  templateUrl: './tool7.page.html',
+  styleUrls: ['./tool7.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool7Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "玄幻";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的${this.style}作者，请您根据用户提供的标题${this.titlel}，添加文章信息，并给出短篇小说大纲。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            title: `${this.titlel}`,
+            topic: `${this.style}`,
+            
+           
+             outline: `${this.generatedOutline}`,
+            date: dateStr,
+            
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>短篇小说生成器</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image6.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <h1>标题</h1>
+  <ion-input [value]="titlel" placeholder="输入标题" (ionInput)="titleInput($event)"></ion-input>
+  <h1>要求</h1>
+  <ion-input [value]="style" placeholder="输入要求" (ionInput)="styleInput($event)"></ion-input>
+
+ 
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成大纲</ion-button>
+
+  <!-- <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea> -->
+    @if(isComplete){
+      <fm-markdown-preview  [content]="responseMsg"></fm-markdown-preview>
+    }
+   
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存小说</ion-button>
+
+</ion-content>

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

@@ -0,0 +1,121 @@
+/* 全局样式 */
+
+ion-app {
+  background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
+  /* 添加背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个内容区域 */
+  background-position: center;
+  /* 背景图片居中 */
+  height: 100vh;
+  /* 确保背景覆盖整个视口高度 */
+  margin: 0;
+  /* 移除默认的外边距 */
+  padding: 0;
+  /* 移除默认的内边距 */
+}
+
+ion-content {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+  overflow: auto;
+  /* 确保内容可以滚动 */
+}
+
+:host {
+  --page-padding: 16px;
+  --primary-color: #003366;
+  /* 深蓝色 */
+  --secondary-color: #336633;
+  /* 墨绿色 */
+  --background-color: #f5f5f5;
+  --text-color: #333333;
+  --highlight-color: #ffcc00;
+  /* 高亮颜色 */
+}
+
+.input-field {
+  width: 100%;
+}
+
+.reader-group-button {
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.textarea-field {
+  width: 100%;
+  min-height: 150px;
+  /* 设置最小高度 */
+}
+
+.generate-button {
+  margin-top: 20px;
+}
+
+.copy-button {
+  margin-top: 10px;
+}
+
+ion-button {
+  --background: #007bff;
+  --color: #101010;
+  --border-radius: 8px;
+  --padding-top: 12px;
+  --padding-bottom: 12px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  margin-top: 16px;
+}
+
+ion-button:hover {
+  --background: #0056b3;
+}
+
+ion-textarea {
+  --background: #ffffff;
+  --color: #343a40;
+  --border-color: #ced4da;
+  --border-radius: 8px;
+  --padding-top: 12px;
+  --padding-bottom: 12px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  border: 1px solid #ced4da;
+  border-radius: 8px;
+  --min-height: 100px;
+}
+
+ion-textarea:focus {
+  --border-color: #80bdff;
+  --box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+ion-input {
+  --background: #ffffff;
+  --color: #343a40;
+  --border-color: #ced4da;
+  --border-radius: 8px;
+  --padding-top: 12px;
+  --padding-bottom: 12px;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  border: 1px solid #ced4da;
+  border-radius: 8px;
+}
+
+ion-input:focus {
+  --border-color: #80bdff;
+  --box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+/* 设置生成的小说书名文本框的高度 */
+.response-textarea {
+  --min-height: 800px;
+  /* 将最小高度增加到 800px */
+  border-color: #80bdff;
+  /* 可选：设置不同的边框颜色以区分 */
+  background-color: #f8f9fa;
+  /* 可选：设置不同的背景颜色以区分 */
+}

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

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

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

@@ -0,0 +1,134 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule, LoadingController } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+import { CompWordEntryComponent } from '../comp-word-entry/comp-word-entry.component';
+
+
+import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
+
+@Component({
+  selector: 'app-tool8',
+  templateUrl: './tool8.page.html',
+  styleUrls: ['./tool8.page.scss'],
+  standalone: true,
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+    // IonHeader,
+    // IonToolbar,
+    // IonTitle,
+    // IonContent,
+    // IonButton,
+    // IonTextarea,
+    // IonInput,
+    IonIcon,
+    IonCard,
+    IonCardHeader,
+    IonCardTitle,
+    IonCardSubtitle,
+    IonCardContent,
+    IonThumbnail,
+    IonItem,
+    IonList,
+    CommonModule,
+    IonLabel,
+    IonAvatar,
+    IonSelect,
+    IonSelectOption,
+    // IonButtons,
+    IonProgressBar,
+    IonText
+  ],
+})
+export class Tool8Page implements OnInit {
+  constructor(private router: Router) {
+    this.currentUser = new CloudUser();
+   }
+
+  ngOnInit() { }
+  currentUser: CloudUser;
+
+  // 用户输入提示词
+  titlel: string = "";
+  titleInput(ev: any) {
+    console.log(ev.detail.value);
+    this.titlel = ev.detail.value;
+  }
+
+  style: string = "玄幻";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
+  }
+  
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+    let PromptTemplate = `
+    您作为一名专业的${this.style}作者，请您根据用户提供的标题${this.titlel}，添加文章信息，并给出短篇小说大纲。
+    `;
+    console.log(PromptTemplate);
+    let completion = new FmodeChatCompletion([
+      { role: "system", content: "" },
+      { role: "user", content: PromptTemplate }
+    ]);
+
+    completion.sendCompletion().subscribe((message: any) => {
+      // 打印消息体
+      console.log(message.content);
+      // 赋值消息内容给组件内属性
+      this.responseMsg = message.content;
+      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+        this.isComplete = true;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
+  }
+  saveNovel() {
+    let consult = new CloudObject("NovelAriticle")
+    let now = new Date();
+    let dateStr = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}`
+    // 对象权限的精确指定
+      let completion = new FmodeChatCompletion([
+        {role:"system",content:""},
+      ])     
+      completion.sendCompletion().subscribe((message:any)=>{
+        // 打印消息体
+        console.log(message.content)
+        // 赋值消息内容给组件内属性
+        if (message?.complete  ) {
+         
+          
+          consult.set({
+            user: this.currentUser.toPointer(),
+            username: this.currentUser.data["username"],
+            title: `${this.titlel}`,
+            topic: `${this.style}`,
+            
+           
+             outline: `${this.generatedOutline}`,
+            date: dateStr,
+            
+            category: `工具箱内容` 
+          });
+                  consult.save();
+                  console.log(consult);
+        }
+      })
+  }
+}

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

@@ -12,30 +12,58 @@
   <!-- 小说书名生成按钮 -->
   <ion-card>
     <ion-card-header>
-      <ion-card-title>小说书名生成</ion-card-title>
+      <ion-card-title>小说大纲生成</ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ion-button (click)="navigateTo('/name-generator')">生成书名</ion-button>
+      <ion-button (click)="navigateTo('/tool1')">生成大纲</ion-button>
     </ion-card-content>
   </ion-card>
 
   <!-- 人物设定生成按钮 -->
   <ion-card>
     <ion-card-header>
-      <ion-card-title>人物设定生成</ion-card-title>
+      <ion-card-title>小说标题生成</ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ion-button (click)="navigateTo('/character-generator')">生成角色</ion-button>
+      <ion-button (click)="navigateTo('/tool2')">生成标题</ion-button>
     </ion-card-content>
   </ion-card>
 
   <!-- 世界架构设定按钮 -->
   <ion-card>
     <ion-card-header>
-      <ion-card-title>世界架构设定</ion-card-title>
+      <ion-card-title>人物特点生成</ion-card-title>
     </ion-card-header>
     <ion-card-content>
-      <ion-button (click)="navigateTo('/world-setup')">生成世界架构</ion-button>
+      <ion-button (click)="navigateTo('/tool3')">生成人物特点</ion-button>
     </ion-card-content>
   </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>小说名称生成</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button (click)="navigateTo('/tool4')">生成小说名称</ion-button>
+    </ion-card-content>
+  </ion-card>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>小说人物名称生成</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button (click)="navigateTo('/tool5')">生成人物名称</ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- 人物设定生成按钮 -->
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>世界架构生成</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-button (click)="navigateTo('/tool6')">生成世界架构</ion-button>
+    </ion-card-content>
+  </ion-card>
+
 </ion-content>

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

@@ -123,4 +123,14 @@ ion-card:nth-child(3) {
     /* 背景图片覆盖整个卡片 */
     background-position: center;
     /* 背景图片居中 */
+}
+ion-card:nth-child(4) {
+    background: linear-gradient(135deg, #fd7a59, #eaf4ba), url('/assets/images/card1.jpg');
+    /* 渐变背景和图片背景 */
+    background-blend-mode: multiply;
+    /* 混合模式 */
+    background-size: cover;
+    /* 背景图片覆盖整个卡片 */
+    background-position: center;
+    /* 背景图片居中 */
 }