Merge branch 'master' of http://git.fmode.cn:3000/19808003398/20222670105

novel-app/obsutil_windows_amd64_5.5.12/setup.bat

@@ -0,0 +1,19 @@
+@ECHO OFF
+rem Please ensure that this script is in the same directory as obsutil.
+TITLE Add obsutil as custom command for Windows.
+set linkFile=C:\windows\obsutil.exe
+set sourceFile=%~dp0%\obsutil.exe
+if exist %linkFile% (
+    del C:\windows\obsutil.exe
+)
+if exist %sourceFile% (
+    mklink %linkFile% %~dp0%\obsutil.exe
+) else (
+    echo Failed:%sourceFile% is not exist!
+)
+if %errorlevel% == 0 (
+    echo Successfully! %linkFile%
+) else (
+    echo Failed: failed to setup, %linkFile%
+)
+pause

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

@@ -7,36 +7,80 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" class="ion-padding">
-
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>小说类型</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-input [(ngModel)]="type" (ionInput)="typeInput($event)" placeholder="请输入小说类型"></ion-input>
-    </ion-card-content>
-  </ion-card>
-
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>背景</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-textarea [value]="userPrompt" (ionChange)="promptInput($event)" placeholder="请输入小说背景"></ion-textarea>
-    </ion-card-content>
-  </ion-card>
-
-  <ion-button expand="block" (click)="sendMessage()">生成人物设定</ion-button>
-
-  <ion-card *ngIf="responseMsg">
-    <ion-card-header>
-      <ion-card-title>生成的人物设定</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-textarea [value]="responseMsg" readonly class="response-textarea"></ion-textarea>
-      <ion-button expand="block" (click)="copyToClipboard()">复制</ion-button>
-    </ion-card-content>
-  </ion-card>
+<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;">
 
+  <!-- 使用 ion-grid 包裹所有行，确保布局正确 -->
+  <ion-grid>
+    <ion-row>
+      <ion-label>人物性别</ion-label>
+    </ion-row>
+    <ion-row class="type-buttons">
+      <ion-col size="4">
+        <ion-button (click)="selectGender('男')" [color]="selectedGender === '男' ? 'primary' : 'default'"
+          class="type-button">男</ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button (click)="selectGender('女')" [color]="selectedGender === '女' ? 'primary' : 'default'"
+          class="type-button">女</ion-button>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-label>小说类型</ion-label>
+    </ion-row>
+
+    <ion-row class="type-buttons">
+      <ion-col size="4">
+        <ion-button (click)="selectType('重生')" [color]="selectedType === '重生' ? 'primary' : 'default'"
+          class="type-button">重生</ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button (click)="selectType('都市')" [color]="selectedType === '都市' ? 'primary' : 'default'"
+          class="type-button">都市</ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button (click)="selectType('穿越')" [color]="selectedType === '穿越' ? 'primary' : 'default'"
+          class="type-button">穿越</ion-button>
+      </ion-col>
+    </ion-row>
+
+    <ion-row class="type-buttons">
+      <ion-col size="4">
+        <ion-button (click)="selectType('玄幻')" [color]="selectedType === '玄幻' ? 'primary' : 'default'"
+          class="type-button">玄幻</ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button (click)="selectType('系统文')" [color]="selectedType === '系统文' ? 'primary' : 'default'"
+          class="type-button">系统文</ion-button>
+      </ion-col>
+      <ion-col size="4">
+        <ion-button (click)="selectType('搞笑轻松')" [color]="selectedType === '搞笑轻松' ? 'primary' : 'default'"
+          class="type-button">搞笑轻松</ion-button>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="12">
+        <ion-label>期望描述</ion-label>
+        <ion-textarea [value]="userPrompt" (ionChange)="promptInput($event)" placeholder="请输入期望描述"
+          class="textarea-field" rows="5"></ion-textarea> <!-- 增加 rows 属性 -->
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="12">
+        <ion-button expand="block" (click)="sendMessage()" class="generate-button">生成人物设定</ion-button>
+      </ion-col>
+    </ion-row>
+
+    <ion-row *ngIf="responseMsg">
+      <ion-col size="12">
+        <ion-label>生成的人物设定</ion-label>
+        <ion-textarea [value]="responseMsg" readonly class="response-textarea" rows="10"></ion-textarea>
+        <!-- 增加 rows 属性 -->
+        <ion-button expand="block" (click)="copyToClipboard()" class="copy-button">复制</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

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

@@ -1,27 +1,66 @@
-ion-card {
-    margin-bottom: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+/* 全局样式 */
+
+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-card-header {
-    background-color: #f8f9fa;
-    border-bottom: 1px solid #dee2e6;
+ion-content {
+    --background: transparent;
+    /* 设置为透明，以便背景从 ion-app 继承 */
+    padding: 16px;
+    overflow: auto;
+    /* 确保内容可以滚动 */
 }
 
-ion-card-title {
-    font-size: 1.25rem;
-    font-weight: bold;
-    color: #343a40;
+:host {
+    --page-padding: 16px;
+    --primary-color: #003366;
+    /* 深蓝色 */
+    --secondary-color: #336633;
+    /* 墨绿色 */
+    --background-color: #f5f5f5;
+    --text-color: #333333;
+    --highlight-color: #ffcc00;
+    /* 高亮颜色 */
 }
 
-ion-card-content {
-    padding: 16px;
+.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: #fff;
+    --color: #101010;
     --border-radius: 8px;
     --padding-top: 12px;
     --padding-bottom: 12px;
@@ -71,10 +110,10 @@ ion-input:focus {
     --box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
-/* 设置生成的人物设定文本框的高度 */
+/* 设置生成的小说书名文本框的高度 */
 .response-textarea {
-    --min-height: 200px;
-    /* 设置更高的最小高度 */
+    --min-height: 800px;
+    /* 将最小高度增加到 800px */
     border-color: #80bdff;
     /* 可选：设置不同的边框颜色以区分 */
     background-color: #f8f9fa;

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons, IonCardContent, IonCardTitle, IonCardHeader, IonCard } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid } from '@ionic/angular/standalone';
 import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
@@ -13,7 +13,7 @@ import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
     CommonModule, // 确保 CommonModule 已经导入
     FormsModule,
     IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons,
-    IonCardContent, IonCardTitle, IonCardHeader, IonCard,
+    IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid,
     // 引入fm-markdown-preview组件模块
     MarkdownPreviewModule
   ],
@@ -23,47 +23,60 @@ export class CharacterGeneratorPage implements OnInit {
   constructor() { }
   ngOnInit() { }
 
-  // 用户输入提示词
-  type: string = "东方玄幻";
-  typeInput(ev: any) {
-    this.type = ev.detail.value;
+  types = [
+    '重生', '都市', '穿越', '玄幻', '系统文', '搞笑轻松', '历史古代', '武侠', '奇幻仙侠', '修仙', '末日求生', '东方玄幻', '异能', '科幻末世', '规则怪谈', '悬疑脑洞', '异世大陆', '种田文', '悬疑推理', '无脑爽文', '战神赘婿', '克苏鲁', '穿书'
+  ];
+
+  selectedType: string = '重生';
+
+  selectType(type: string) {
+    this.selectedType = type;
   }
 
-  // 用户输入提示词
-  userPrompt: string = "古代";
+  gender = [
+    '男', '女'
+  ];
+
+  selectedGender: string = '男'; // 修改默认值
+
+  selectGender(gender: string) {
+    this.selectedGender = gender;
+  }
+
+  userPrompt: string = "一个高中生，来自一个神秘的学校。";
   promptInput(ev: any) {
     this.userPrompt = ev.detail.value;
   }
 
-  // 属性：组件内用于展示消息内容的变量
   responseMsg: any = "";
+  isComplete: boolean = false;
 
-  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
-  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
   sendMessage() {
     console.log("create");
 
     let PromptTemplate = `
-    您作为一名专业的${this.type}小说作者，请您根据用户提供的小说背景，给出多个人物设定。
-    以下是用户的口述：${this.userPrompt}
-    `;
+    您作为一名专业的${this.selectedType}小说作者，请您根据用户提供的期望描述，给出一个性别为${this.selectedGender}、符合${this.selectedType}类型特点的人物描述。
+    以下是用户的期望描述：${this.userPrompt}
+  `;
+
+    // 添加系统角色提示
+    let systemPrompt = `
+    你是一名专业的小说作者，擅长各种类型的小说创作。请根据用户提供的信息，生成一个符合特定类型特点的人物描述。
+  `;
 
     let completion = new FmodeChatCompletion([
-      { role: "system", content: "" },
+      { role: "system", content: systemPrompt },
       { role: "user", content: PromptTemplate }
     ]);
     completion.sendCompletion().subscribe((message: any) => {
-      // 打印消息体
       console.log(message.content);
-      // 赋值消息内容给组件内属性
       this.responseMsg = message.content;
-      if (message?.complete) { // 判断message为完成状态，则设置isComplete为完成
+      if (message?.complete) {
         this.isComplete = true;
       }
     });
   }
 
-  // 复制到剪贴板
   copyToClipboard() {
     const textarea = document.createElement('textarea');
     textarea.value = this.responseMsg;

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

@@ -1,12 +1,33 @@
-<ion-header>
+<ion-header [translucent]="true" class="ion-no-border">
   <ion-toolbar>
-    <ion-title>首页</ion-title>
+    <div class="brand-header">
+      <div class="brand-title">
+        <div class="title-container">
+          <span>幻书坊</span>
+          <img src="assets/images/logo1.png" alt="幻书坊">
+        </div>
+      </div>
+    </div>
   </ion-toolbar>
 </ion-header>
-<ion-content [fullscreen]="true">
-  <!-- 顶部图片区域 -->
-  <div class="header-section">
-    <ion-img src="../../assets/images/首页顶部图.png" alt="header"></ion-img>
+
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('../../assets/images/background-image1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+
+  <!-- 轮播图 -->
+  <div class="banner-section">
+    <div #bannerContainer class="banner-container" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd($event)">
+      <div class="banner-img-container" [style.transform]="'translateX(' + translateX + 'px)'">
+        <img *ngFor="let slide of slides" [src]="slide.image" [alt]="slide.alt">
+      </div>
+      <div class="banner-indicators">
+        <span class="indicator" *ngFor="let slide of slides; let i = index" [class.active]="currentIndex === i"
+          (click)="goToSlide(i)"></span>
+      </div>
+      <div class="banner-arrows">
+      </div>
+    </div>
   </div>
 
   <!-- 功能按钮区域 -->
@@ -15,7 +36,7 @@
     <ion-button class="feature-button" (click)="navigateTo('/story-generator')" expand="block" fill="clear">
       <div class="button-content">
         <div class="icon-wrapper light-pink">
-          <ion-icon name="book"></ion-icon>
+          <img src="assets/images/story-generator-icon.png" alt="长篇生成">
         </div>
         <span>长篇生成</span>
       </div>
@@ -25,7 +46,7 @@
     <ion-button class="feature-button" (click)="navigateTo('/short-generator')" expand="block" fill="clear">
       <div class="button-content">
         <div class="icon-wrapper light-blue">
-          <ion-icon name="person-outline"></ion-icon>
+          <img src="assets/images/short-generator-icon.png" alt="短篇生成">
         </div>
         <span>短篇生成</span>
       </div>
@@ -35,7 +56,7 @@
     <ion-button class="feature-button" (click)="navigateTo('/toolbox')" expand="block" fill="clear">
       <div class="button-content">
         <div class="icon-wrapper light-purple">
-          <ion-icon name="build-outline"></ion-icon>
+          <img src="assets/images/toolbox-icon.png" alt="工具箱">
         </div>
         <span>工具箱</span>
       </div>
@@ -55,7 +76,6 @@
         </div>
       </ion-card-header>
 
-
       <ion-card-content>
         <ion-grid *ngIf="stories.length > 0">
           <ion-row>
@@ -72,11 +92,18 @@
         </ion-grid>
 
         <div class="empty-state" *ngIf="stories.length === 0">
-          <ion-icon name="document-text-outline"></ion-icon>
+          <ion-icon name="document-outline"></ion-icon>
           <h3>暂无作品</h3>
           <p>点击新建作品按钮开始创作</p>
         </div>
       </ion-card-content>
     </ion-card>
   </div>
+
+  <!-- 悬浮按钮 -->
+  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+    <ion-fab-button (click)="navigateTo('/character')" class="floating-button">
+      <img src="assets/images/floating-button.gif" alt="悬浮按钮">
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>

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

@@ -1,19 +1,204 @@
+/* 全局样式 */
+ion-app {
+    background: url('/assets/images/background-image1.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;
+}
+
 :host {
-    --ion-background-color: #f4f5f8;
+    --page-padding: 16px;
+    --primary-color: #003366;
+    /* 深蓝色 */
+    --secondary-color: #336633;
+    /* 墨绿色 */
+    --background-color: #f5f5f5;
+    --text-color: #333333;
+    --highlight-color: #ffcc00;
+    /* 高亮颜色 */
 }
 
-.header-section {
-    width: 100%;
-    height: 180px;
-    overflow: hidden;
 
-    ion-img {
+
+.floating-button {
+    --background: transparent !important;
+    --color: inherit !important;
+
+    /* 增大按钮尺寸 */
+    width: 64px;
+    /* 根据需要调整 */
+    height: 64px;
+    /* 根据需要调整 */
+    font-size: 24px;
+    /* 如果有文字内容，可以调整字体大小 */
+    position: relative;
+    /* 添加相对定位以便伪元素定位 */
+    cursor: pointer;
+    /* 添加鼠标悬停效果 */
+
+    img {
         width: 100%;
+        /* 确保图片占满按钮 */
         height: 100%;
-        object-fit: cover;
+        /* 确保图片占满按钮 */
+        object-fit: contain;
+        /* 确保图片不失真 */
+    }
+
+
+    &:hover::after {
+        opacity: 1 !important;
+        /* 使用 !important 来测试 */
+    }
+}
+
+/* 其他样式保持不变 */
+.gradient-background {
+    background: linear-gradient(135deg, #ff7e5f, #feb47b);
+    /* 你可以根据需要调整渐变色 */
+    color: white;
+    /* 确保文字颜色与背景对比明显 */
+    border: none;
+    /* 去掉默认边框 */
+}
+
+// 头部样式
+.brand-header {
+    padding: 8px var(--page-padding);
+    display: flex;
+    justify-content: center;
+
+    .brand-title {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+
+        .title-container {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 16px;
+            font-weight: 600;
+
+            span {
+                color: var(--primary-color);
+            }
+
+            img {
+                height: 18px;
+                width: 18px;
+                margin-top: 2px;
+            }
+        }
+    }
+}
+
+// 统计信息样式
+.stats-section {
+    display: flex;
+    justify-content: space-around;
+    padding: 10px 0;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 8px;
+    margin-bottom: 10px;
+
+    .stat-item {
+        text-align: center;
+        font-size: 1.2em;
+
+        .stat-value {
+            font-size: 2em;
+            margin-bottom: 5px;
+        }
+
+        .stat-label {
+            font-size: 1em;
+        }
+    }
+}
+
+// 轮播图样式
+.banner-section {
+    margin: 16px var(--page-padding);
+
+    .banner-container {
+        position: relative;
+        overflow: hidden;
+        border-radius: 12px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        background-color: white;
+
+        .banner-img-container {
+            display: flex;
+            transition: transform 0.5s ease;
+        }
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+
+        .banner-indicators {
+            position: absolute;
+            bottom: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 8px;
+
+            .indicator {
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background-color: rgba(0, 0, 0, 0.5);
+                cursor: pointer;
+
+                &.active {
+                    background-color: #ffcc00;
+                }
+            }
+        }
+
+        .banner-arrows {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            gap: 16px;
+
+            .arrow-btn {
+                background-color: rgba(0, 0, 0, 0.5);
+                padding: 8px;
+                border-radius: 50%;
+                color: white;
+                cursor: pointer;
+
+                ion-icon {
+                    font-size: 24px;
+                }
+            }
+        }
     }
 }
 
+// 功能按钮区域样式
 .features-section {
     display: flex;
     justify-content: space-between;
@@ -59,13 +244,13 @@
 
             ion-icon {
                 font-size: 24px;
-                color: #333;
+                color: var(--primary-color);
             }
         }
 
         span {
             font-size: 14px;
-            color: #333;
+            color: var(--primary-color);
             font-weight: 500;
         }
     }
@@ -78,6 +263,7 @@
         margin: 0;
         border-radius: 20px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        background-color: rgba(255, 255, 255, 0.5); // 设置背景颜色为白色，透明度为 0.5
 
         .card-header-content {
             display: flex;
@@ -89,6 +275,7 @@
                 font-size: 18px;
                 font-weight: 600;
                 margin: 0;
+                color: var(--primary-color);
             }
         }
     }
@@ -102,13 +289,13 @@
                 margin: 0;
                 font-size: 14px;
                 font-weight: 500;
-                color: #333;
+                color: var(--primary-color);
             }
 
             p {
                 margin: 4px 0 0;
                 font-size: 12px;
-                color: #666;
+                color: var(--text-color);
             }
 
             ion-row {
@@ -130,13 +317,13 @@
         h3 {
             margin: 0 0 8px;
             font-size: 16px;
-            color: #333;
+            color: var(--primary-color);
         }
 
         p {
             margin: 0;
             font-size: 14px;
-            color: #666;
+            color: var(--text-color);
         }
     }
 }

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

@@ -1,8 +1,10 @@
-import { Component, ViewChild } from '@angular/core';
+// home.page.ts
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule, PopoverController } from '@ionic/angular';
 import { Router } from '@angular/router';
 
+
 interface Story {
   id: string;
   cover: string;
@@ -17,8 +19,114 @@ interface Story {
   standalone: true,
   imports: [IonicModule, CommonModule]
 })
-export class HomePage {
+export class HomePage implements AfterViewInit {
   stories: Story[] = [];
+  slideWidth: number = 0; // 设置默认值为0
+  autoPlayInterval: NodeJS.Timeout | undefined;
+  currentIndex: number = 0;
+  slides: any[] = []; // 初始化为空数组
+  translateX: number = 0;
+  startX: number = 0;
+  currentTranslateX: number = 0;
+
+  @ViewChild('bannerContainer', { read: ElementRef }) bannerContainer!: ElementRef;
+
+  ngAfterViewInit() {
+    this.startAutoPlay();
+    this.checkSlideWidth();
+  }
+
+  ngAfterViewChecked() {
+    this.checkSlideWidth();
+  }
+
+  private checkSlideWidth() {
+    const container = this.bannerContainer.nativeElement;
+    if (container && container.clientWidth > 0) {
+      this.slideWidth = container.clientWidth;
+      console.log('slideWidth:', this.slideWidth);
+      this.slides = [
+        { image: 'assets/images/banner1.jpg', alt: 'Slide 1' },
+        { image: 'assets/images/banner2.jpg', alt: 'Slide 2' },
+        { image: 'assets/images/banner3.jpg', alt: 'Slide 3' },
+        { image: 'assets/images/banner4.jpg', alt: 'Slide 4' },
+        { image: 'assets/images/banner5.jpg', alt: 'Slide 5' },
+      ];
+      this.updateTranslateX();
+    } else {
+      console.warn('bannerContainer not found or has zero width');
+    }
+  }
+
+
+
+  ngOnDestroy() {
+    this.stopAutoPlay();
+  }
+
+  private startAutoPlay() {
+    this.stopAutoPlay();
+    this.autoPlayInterval = setInterval(() => {
+      this.nextSlide();
+    }, 3000); // 每3秒切换一次
+  }
+
+  private stopAutoPlay() {
+    if (this.autoPlayInterval) {
+      clearInterval(this.autoPlayInterval);
+    }
+  }
+
+  nextSlide() {
+    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  prevSlide() {
+    this.currentIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
+    this.updateTranslateX();
+  }
+
+  goToSlide(index: number) {
+    this.currentIndex = index;
+    this.updateTranslateX();
+  }
+
+  private updateTranslateX() {
+    if (this.slideWidth !== undefined && this.slideWidth > 0) {
+      this.translateX = -this.currentIndex * this.slideWidth;
+      this.currentTranslateX = this.translateX;
+      console.log('translateX:', this.translateX); // 添加调试信息
+    } else {
+      console.warn('slideWidth is not defined or zero');
+    }
+  }
+  onTouchStart(event: TouchEvent) {
+    this.startX = event.touches[0].clientX;
+    this.stopAutoPlay();
+    console.log('Touch Start:', this.startX); // 添加调试信息
+  }
+
+  onTouchMove(event: TouchEvent) {
+    const currentX = event.touches[0].clientX;
+    const diffX = currentX - this.startX;
+    this.currentTranslateX = this.translateX + diffX;
+    console.log('Touch Move:', diffX, this.currentTranslateX); // 添加调试信息
+  }
+
+  onTouchEnd(event: TouchEvent) {
+    const currentX = event.changedTouches[0].clientX;
+    const diffX = currentX - this.startX;
+    if (diffX > 50) {
+      this.prevSlide();
+    } else if (diffX < -50) {
+      this.nextSlide();
+    } else {
+      this.updateTranslateX();
+    }
+    this.startAutoPlay();
+    console.log('Touch End:', diffX, this.currentIndex); // 添加调试信息
+  }
 
   constructor(
     private router: Router,

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

@@ -7,36 +7,63 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" class="ion-padding">
+<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;">
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>小说类型</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-input [(ngModel)]="type" (ionInput)="typeInput($event)" placeholder="请输入小说类型"></ion-input>
-    </ion-card-content>
-  </ion-card>
+  <!-- 使用 ion-grid 包裹所有行，确保布局正确 -->
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12">
+        <ion-label>小说类型</ion-label>
+        <ion-input [(ngModel)]="type" (ionInput)="typeInput($event)" placeholder="请输入小说类型"
+          class="input-field"></ion-input>
+      </ion-col>
+    </ion-row>
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>故事梗概</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-textarea [value]="userPrompt" (ionChange)="promptInput($event)" placeholder="请输入小说故事梗概"></ion-textarea>
-    </ion-card-content>
-  </ion-card>
+    <ion-row>
+      <ion-col size="12">
+        <ion-label>读者人群</ion-label>
+        <ion-row>
+          <ion-col size="4">
+            <ion-button (click)="selectReaderGroup('不限人群')"
+              [color]="selectedReaderGroup === '不限人群' ? 'primary' : 'default'"
+              class="reader-group-button">不限人群</ion-button>
+          </ion-col>
+          <ion-col size="4">
+            <ion-button (click)="selectReaderGroup('男频小说')"
+              [color]="selectedReaderGroup === '男频小说' ? 'primary' : 'default'"
+              class="reader-group-button">男频小说</ion-button>
+          </ion-col>
+          <ion-col size="4">
+            <ion-button (click)="selectReaderGroup('女频小说')"
+              [color]="selectedReaderGroup === '女频小说' ? 'primary' : 'default'" color="warning"
+              class="reader-group-button">女频小说</ion-button>
+          </ion-col>
+        </ion-row>
+      </ion-col>
+    </ion-row>
 
-  <ion-button expand="block" (click)="sendMessage()">生成小说书名</ion-button>
+    <ion-row>
+      <ion-col size="12">
+        <ion-label>故事梗概</ion-label>
+        <ion-textarea [value]="userPrompt" (ionChange)="promptInput($event)" placeholder="请输入小说故事梗概"
+          class="textarea-field" rows="5"></ion-textarea> <!-- 增加 rows 属性 -->
+      </ion-col>
+    </ion-row>
 
-  <ion-card *ngIf="responseMsg">
-    <ion-card-header>
-      <ion-card-title>生成的小说书名</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-textarea [value]="responseMsg" readonly class="response-textarea"></ion-textarea>
-      <ion-button expand="block" (click)="copyToClipboard()">复制</ion-button>
-    </ion-card-content>
-  </ion-card>
+    <ion-row>
+      <ion-col size="12">
+        <ion-button expand="block" (click)="sendMessage()" class="generate-button">生成小说书名</ion-button>
+      </ion-col>
+    </ion-row>
 
+    <ion-row *ngIf="responseMsg">
+      <ion-col size="12">
+        <ion-label>生成的小说书名</ion-label>
+        <ion-textarea [value]="responseMsg" readonly class="response-textarea" rows="10"></ion-textarea>
+        <!-- 增加 rows 属性 -->
+        <ion-button expand="block" (click)="copyToClipboard()" class="copy-button">复制</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

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

@@ -1,27 +1,66 @@
-ion-card {
-    margin-bottom: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+/* 全局样式 */
+
+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-card-header {
-    background-color: #f8f9fa;
-    border-bottom: 1px solid #dee2e6;
+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;
+    /* 设置最小高度 */
 }
 
-ion-card-title {
-    font-size: 1.25rem;
-    font-weight: bold;
-    color: #343a40;
+.generate-button {
+    margin-top: 20px;
 }
 
-ion-card-content {
-    padding: 30px;
+.copy-button {
+    margin-top: 10px;
 }
 
 ion-button {
     --background: #007bff;
-    --color: #fff;
+    --color: #101010;
     --border-radius: 8px;
     --padding-top: 12px;
     --padding-bottom: 12px;
@@ -71,10 +110,10 @@ ion-input:focus {
     --box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
-/* 设置生成的人物设定文本框的高度 */
+/* 设置生成的小说书名文本框的高度 */
 .response-textarea {
-    --min-height: 200px;
-    /* 设置更高的最小高度 */
+    --min-height: 800px;
+    /* 将最小高度增加到 800px */
     border-color: #80bdff;
     /* 可选：设置不同的边框颜色以区分 */
     background-color: #f8f9fa;

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons, IonCardContent, IonCardTitle, IonCardHeader, IonCard } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid } from '@ionic/angular/standalone';
 import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
@@ -13,7 +13,7 @@ import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
     CommonModule, // 确保 CommonModule 已经导入
     FormsModule,
     IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons,
-    IonCardContent, IonCardTitle, IonCardHeader, IonCard,
+    IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid,
     // 引入fm-markdown-preview组件模块
     MarkdownPreviewModule
   ],
@@ -22,6 +22,11 @@ export class NameGeneratorPage implements OnInit {
   constructor() { }
   ngOnInit() { }
 
+  selectedReaderGroup: string = '不限人群';
+
+  selectReaderGroup(group: string) {
+    this.selectedReaderGroup = group;
+  }
   // 用户输入提示词
   type: string = "东方玄幻";
   typeInput(ev: any) {
@@ -43,9 +48,21 @@ export class NameGeneratorPage implements OnInit {
     console.log("create");
 
     let PromptTemplate = `
-    您作为一名专业的${this.type}小说作者，请您根据用户提供的小说故事梗概，给出多个小说书名。
-    以下是用户的口述：${this.userPrompt}
-    `;
+  您作为一名专业的${this.type}小说作者，请您根据用户提供的小说故事梗概和目标读者人群，给出多个小说书名。
+  主要读者人群为：${this.selectedReaderGroup}
+  以下是用户的口述：${this.userPrompt}
+
+  示例：
+  - 读者人群：男频小说
+    - 故事梗概：年轻男子意外获得神秘力量，成为守护世界的英雄。
+    - 书名建议：《英雄崛起》、《神秘力量》、《守护者》
+
+  - 读者人群：女频小说
+    - 故事梗概：年轻女子意外获时光之匙，穿梭古今阻止历史篡改，与时空守护者共斗邪恶势力，守护时间线安全。
+    - 书名建议：《时光守护者》、《穿越时空》、《历史篡改者》
+
+  请根据上述示例，为以下故事梗概和读者人群生成书名：
+  `;
 
     let completion = new FmodeChatCompletion([
       { role: "system", content: "" },
@@ -61,7 +78,6 @@ export class NameGeneratorPage implements OnInit {
       }
     });
   }
-
   // 复制到剪贴板
   copyToClipboard() {
     const textarea = document.createElement('textarea');

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

@@ -7,8 +7,8 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-
+<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;">
   <!-- 小说书名生成按钮 -->
   <ion-card>
     <ion-card-header>

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

@@ -1,6 +1,22 @@
 /* 全局样式 */
+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: #f7f7f7;
+    --background: transparent;
+    /* 设置为透明，以便背景从 ion-app 继承 */
     padding: 16px;
 }
 
@@ -9,11 +25,25 @@ 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: #333;
+    color: #ffffff;
     font-size: 1.25rem;
     font-weight: bold;
 }
@@ -25,24 +55,33 @@ ion-card-content {
 
 /* 按钮样式 */
 ion-button {
-    --background: #007bff;
-    --color: #fff;
-    --border-radius: 4px;
-    --padding-top: 10px;
-    --padding-bottom: 10px;
-    --padding-start: 16px;
-    --padding-end: 16px;
+    --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: #0056b3;
+    --background: rgba(255, 255, 255, 0.7);
+    /* 鼠标悬停时稍微不那么透明 */
 }
 
 /* 工具栏样式 */
 ion-toolbar {
-    --background: #ffffff;
+    --background: transparent;
+    /* 设置为透明，以便背景从 ion-app 继承 */
     --color: #333;
     border-bottom: 1px solid #e0e0e0;
 }
@@ -50,4 +89,38 @@ ion-toolbar {
 /* 返回按钮样式 */
 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;
+    /* 背景图片居中 */
 }

novel-app/src/app/world-setup/world-setup.page.html

@@ -3,40 +3,45 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/toolbox"></ion-back-button>
     </ion-buttons>
-    <ion-title>人物设定生成</ion-title>
+    <ion-title>世界架构设定</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true" class="ion-padding">
+<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;">
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>小说类型</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-input [(ngModel)]="type" (ionInput)="typeInput($event)" placeholder="请输入小说类型"></ion-input>
-    </ion-card-content>
-  </ion-card>
+  <!-- 使用 ion-grid 包裹所有行，确保布局正确 -->
+  <ion-grid>
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>期望描述</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-textarea [value]="userPrompt" (ionChange)="promptInput($event)" placeholder="请输入小说背景"></ion-textarea>
-    </ion-card-content>
-  </ion-card>
+    <ion-row>
+      <ion-col size="12">
+        <ion-label>小说背景</ion-label>
+        <ion-textarea [value]="novelBackground" (ionChange)="backgroundInput($event)" placeholder="请输入小说背景"
+          class="textarea-field" rows="5"></ion-textarea>
+      </ion-col>
+    </ion-row>
 
-  <ion-button expand="block" (click)="sendMessage()">生成世界架构</ion-button>
+    <ion-row>
+      <ion-col size="12">
+        <ion-label>期望描述</ion-label>
+        <ion-textarea [value]="userPrompt" (ionChange)="promptInput($event)" placeholder="请输入期望描述"
+          class="textarea-field" rows="5"></ion-textarea> <!-- 增加 rows 属性 -->
+      </ion-col>
+    </ion-row>
 
-  <ion-card *ngIf="responseMsg">
-    <ion-card-header>
-      <ion-card-title>生成的世界架构</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-textarea [value]="responseMsg" readonly class="response-textarea"></ion-textarea>
-      <ion-button expand="block" (click)="copyToClipboard()">复制</ion-button>
-    </ion-card-content>
-  </ion-card>
+    <ion-row>
+      <ion-col size="12">
+        <ion-button expand="block" (click)="sendMessage()" class="generate-button">生成世界架构</ion-button>
+      </ion-col>
+    </ion-row>
 
+    <ion-row *ngIf="responseMsg">
+      <ion-col size="12">
+        <ion-label>生成的世界架构</ion-label>
+        <ion-textarea [value]="responseMsg" readonly class="response-textarea" rows="10"></ion-textarea>
+        <!-- 增加 rows 属性 -->
+        <ion-button expand="block" (click)="copyToClipboard()" class="copy-button">复制</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
 </ion-content>

novel-app/src/app/world-setup/world-setup.page.scss

@@ -1,27 +1,66 @@
-ion-card {
-    margin-bottom: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+/* 全局样式 */
+
+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-card-header {
-    background-color: #f8f9fa;
-    border-bottom: 1px solid #dee2e6;
+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;
+    /* 设置最小高度 */
 }
 
-ion-card-title {
-    font-size: 1.25rem;
-    font-weight: bold;
-    color: #343a40;
+.generate-button {
+    margin-top: 20px;
 }
 
-ion-card-content {
-    padding: 30px;
+.copy-button {
+    margin-top: 10px;
 }
 
 ion-button {
     --background: #007bff;
-    --color: #fff;
+    --color: #101010;
     --border-radius: 8px;
     --padding-top: 12px;
     --padding-bottom: 12px;
@@ -71,10 +110,10 @@ ion-input:focus {
     --box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
-/* 设置生成的人物设定文本框的高度 */
+/* 设置生成的小说书名文本框的高度 */
 .response-textarea {
-    --min-height: 200px;
-    /* 设置更高的最小高度 */
+    --min-height: 800px;
+    /* 将最小高度增加到 800px */
     border-color: #80bdff;
     /* 可选：设置不同的边框颜色以区分 */
     background-color: #f8f9fa;

novel-app/src/app/world-setup/world-setup.page.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons, IonCardContent, IonCardTitle, IonCardHeader, IonCard } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid } from '@ionic/angular/standalone';
 import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
 
 @Component({
@@ -13,7 +13,7 @@ import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
     CommonModule, // 确保 CommonModule 已经导入
     FormsModule,
     IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonBackButton, IonButtons,
-    IonCardContent, IonCardTitle, IonCardHeader, IonCard,
+    IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonCol, IonRow, IonLabel, IonGrid,
     // 引入fm-markdown-preview组件模块
     MarkdownPreviewModule
   ],
@@ -22,21 +22,24 @@ export class WorldSetupPage implements OnInit {
 
   constructor() { }
   ngOnInit() { }
+  novelBackground: string = '在一个神秘的星球上，有许多不同的种族，他们都有着自己独特的文化和历史。';
+  responseMsg: string = '';
 
-  // 用户输入提示词
-  type: string = "东方玄幻";
-  typeInput(ev: any) {
-    this.type = ev.detail.value;
+
+
+  backgroundInput(event: any) {
+    this.novelBackground = event.target.value;
   }
 
   // 用户输入提示词
-  userPrompt: string = "古代";
+  userPrompt: string = "我希望这个世界有强大的魔法体系，主角从一个普通少年成长为一代宗师。";
   promptInput(ev: any) {
     this.userPrompt = ev.detail.value;
   }
 
-  // 属性：组件内用于展示消息内容的变量
-  responseMsg: any = "";
+
+
+
 
   // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
   isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
@@ -44,9 +47,13 @@ export class WorldSetupPage implements OnInit {
     console.log("create");
 
     let PromptTemplate = `
-    您作为一名专业的${this.type}小说作者，请您根据用户提供的期望描述，给出一个世界架构设定。
-    以下是用户的口述：${this.userPrompt}
-    `;
+  您作为一名专业的小说作者，请您根据以下信息生成一个详细的世界架构设定：
+  
+  小说背景：${this.novelBackground}
+  用户期望：${this.userPrompt}
+  
+  请确保生成的世界架构与上述信息紧密相关，并且符合小说的整体风格。
+`;
 
     let completion = new FmodeChatCompletion([
       { role: "system", content: "" },

novel-app/src/index.html

@@ -3,12 +3,13 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>Ionic App</title>
+  <title>幻书坊：ai小说app</title>
 
   <base href="/" />
 
   <meta name="color-scheme" content="light dark" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="viewport"
+    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
 
@@ -23,4 +24,4 @@
   <app-root></app-root>
 </body>
 
-</html>
+</html>