fix:full update

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

@@ -1,3 +1,24 @@
-<p>
-  page-novel works!
-</p>
+<ion-content>
+
+  <h1>风格</h1>
+  <ion-input [value]="fengge" (ionInput)="fenggeInput($event)"></ion-input>
+
+  <!-- 文本域：生成提示词 -->
+  <h1>剧情大纲的描述</h1>
+  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词"
+    autoGrow="true"></ion-textarea>
+
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成小说</ion-button>
+
+  <!-- 展示：返回消息内容 -->
+  <!-- 消息传输过程中，实时预览 -->
+  @if(!isComplete){
+  <div>{{responseMsg}}</div>
+  }
+  <!-- 消息传输完成后，实时预览Markdown格式 -->
+  @if(isComplete){
+  <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+  }
+
+</ion-content>

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

@@ -1,15 +1,53 @@
 import { Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonInput, IonTextarea } from '@ionic/angular/standalone';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
   selector: 'app-page-novel',
   templateUrl: './page-novel.component.html',
   styleUrls: ['./page-novel.component.scss'],
+  imports: [IonButton, IonContent, IonTextarea, IonInput, MarkdownPreviewModule
+  ],
   standalone: true,
 })
 export class PageNovelComponent implements OnInit {
-
   constructor() { }
-
   ngOnInit() { }
+  // 用户输入提示词
+  fengge: string = "科幻"
+  fenggeInput(ev: any) {
+    this.fengge = ev.detail.value;
+  }
+  // 用户输入提示词
+  userPrompt: string = "请描述基本大纲"
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = ""
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+  sendMessage() {
+    console.log("create")
+
+    let PromptTemplate = `
+    您作为一名专业的${this.fengge}小说作家，请您根据用户输入的小说大纲，写一篇小说。
+    以下是小说大纲：${this.userPrompt}
+    `
+
+    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
+      }
+    })
+  }
 
 }

novel-prod/README.md

@@ -163,4 +163,4 @@ AI小说平台采用个性化内容生成、付费订阅、广告合作、创作
 # FAQ：项目起名
 > 项目名称的生成：
 {{项目策划文档}}，作为一名创意大师，请帮我设计本项目的名称，并且要突出XXXXXX。  
-> 幻灵坊
+> 幻书坊