update: scss

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

@@ -40,7 +40,7 @@
       <ion-button (click)="addChapter()">
         <ion-icon name="add"></ion-icon>添加章节
       </ion-button>
-</div>
+    </div>
 
     <!-- 内容区域 -->
     <div class="chapter-edit-container">
@@ -58,7 +58,7 @@
         <textarea [(ngModel)]="selectedChapterContent" style="width: 100%; height: 300px;"></textarea>
       </ion-item>
       <ion-button (click)="saveChapter()" expand="block" color="success">保存章节</ion-button>
-      } 
+      }
       @else {
       <p>请选择一个章节进行编辑。</p>
       }

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

@@ -6,9 +6,11 @@ ion-menu {
 ion-list {
     margin-top: 16px;
 }
+
 ion-content {
     overflow: auto; // 确保内容可以滚动，不会裁剪 FAB
 }
+
 .overlay {
     position: fixed;
     top: 0;

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

@@ -102,7 +102,7 @@
 
   <!-- 悬浮按钮 -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button (click)="navigateTo('/character')" class="floating-button">
+    <ion-fab-button (click)="navigateTo('/tab1')" class="floating-button">
       <img src="assets/images/floating-button.gif" alt="悬浮按钮">
     </ion-fab-button>
   </ion-fab>

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

@@ -7,12 +7,14 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content 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;">
+
 
   <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-input [value]="style" placeholder="输入小说要求" (ionInput)="styleInput($event)"></ion-input>
 
   <!-- 词条列表编辑区域 -->
   <span (click)="showEntryList()">
@@ -25,7 +27,7 @@
 
   <!-- 展示：返回消息内容 -->
   <!-- 实时预览生成的小说大纲 -->
-  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true" 
+  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
     class="generated-outline"></ion-textarea>
   <!-- 按钮：执行消息生成函数 -->
   <ion-button (click)="sendOutline()" expand="block">生成小说</ion-button>

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

@@ -1,8 +1,26 @@
+/* 全局样式 */
+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 {
-    --padding-top: 20px;
-    --padding-bottom: 20px;
+    --background: transparent;
+    /* 设置为透明，以便背景从 ion-app 继承 */
+    padding: 16px;
 }
 
+
 ion-header {
     background-color: #488aff;
     color: white;

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

@@ -7,18 +7,22 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content 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;">
+
   <form #storyForm="ngForm" (ngSubmit)="nextStep()">
     <ion-item>
       <ion-label position="stacked">作品名称 *</ion-label>
-      <ion-textarea [(ngModel)]="title" name="title" required placeholder="请输入作品名称" (ionInput)="nameInput($event)" ></ion-textarea>
+      <ion-textarea [(ngModel)]="title" name="title" required placeholder="请输入作品名称"
+        (ionInput)="nameInput($event)"></ion-textarea>
       <div *ngIf="storyForm.submitted && storyForm.controls['title'].invalid" class="error">
         作品名称是必填项。
       </div>
     </ion-item>
     <ion-label position="stacked">作品简介（选填）</ion-label>
     <ion-item>
-      <ion-textarea [(ngModel)]="description" name="description" rows="5" placeholder="请输入作品简介" (ionInput)="descripInput($event)" ></ion-textarea>
+      <ion-textarea [(ngModel)]="description" name="description" rows="5" placeholder="请输入作品简介"
+        (ionInput)="descripInput($event)"></ion-textarea>
     </ion-item>
     <ion-button type="submit" expand="block" [disabled]="storyForm.invalid">下一步</ion-button>
   </form>

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

@@ -1,3 +1,25 @@
+/* 全局样式 */
+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-header {
     ion-toolbar {
         ion-title {

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

@@ -3,28 +3,28 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
-    <ion-title>短篇小说生成器</ion-title>
+    <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>
-    }
-   
+  @if(isComplete){
+  <fm-markdown-preview [content]="responseMsg"></fm-markdown-preview>
+  }
+
 
   <!-- 保存按钮 -->
   <ion-button (click)="saveNovel()" expand="block" color="success">保存标题</ion-button>

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

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
-    <ion-title>短篇小说生成器</ion-title>
+    <ion-title>人物特点生成器</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -15,16 +15,16 @@
   <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>
-    }
-   
+  @if(isComplete){
+  <fm-markdown-preview [content]="responseMsg"></fm-markdown-preview>
+  }
+
 
   <!-- 保存按钮 -->
   <ion-button (click)="saveNovel()" expand="block" color="success">保存人物特点</ion-button>

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

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
-    <ion-title>短篇小说生成器</ion-title>
+    <ion-title>小说名称生成器</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -15,16 +15,16 @@
   <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>
-    }
-   
+  @if(isComplete){
+  <fm-markdown-preview [content]="responseMsg"></fm-markdown-preview>
+  }
+
 
   <!-- 保存按钮 -->
   <ion-button (click)="saveNovel()" expand="block" color="success">保存小说名称</ion-button>

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

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
-    <ion-title>短篇小说生成器</ion-title>
+    <ion-title>人物名称生成器</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -13,18 +13,18 @@
   <!-- <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-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>
-    }
-   
+  @if(isComplete){
+  <fm-markdown-preview [content]="responseMsg"></fm-markdown-preview>
+  }
+
 
   <!-- 保存按钮 -->
   <ion-button (click)="saveNovel()" expand="block" color="success">保存人物名称</ion-button>

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

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
-    <ion-title>短篇小说生成器</ion-title>
+    <ion-title>世界架构生成器</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -15,16 +15,16 @@
   <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>
-    }
-   
+  @if(isComplete){
+  <fm-markdown-preview [content]="responseMsg"></fm-markdown-preview>
+  }
+
 
   <!-- 保存按钮 -->
   <ion-button (click)="saveNovel()" expand="block" color="success">保存世界架构</ion-button>

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

@@ -124,8 +124,31 @@ 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: linear-gradient(135deg, #f51f10, #e4d2f1), url('/assets/images/card4.jpg');
+    /* 渐变背景和图片背景 */
+    background-blend-mode: multiply;
+    /* 混合模式 */
+    background-size: cover;
+    /* 背景图片覆盖整个卡片 */
+    background-position: center;
+    /* 背景图片居中 */
+}
+
+ion-card:nth-child(5) {
+    background: linear-gradient(135deg, #2bb4f3, #e2f1e7), url('/assets/images/card5.jpg');
+    /* 渐变背景和图片背景 */
+    background-blend-mode: multiply;
+    /* 混合模式 */
+    background-size: cover;
+    /* 背景图片覆盖整个卡片 */
+    background-position: center;
+    /* 背景图片居中 */
+}
+
+ion-card:nth-child(6) {
+    background: linear-gradient(135deg, #c68e26, #e9ceef), url('/assets/images/card6.jpg');
     /* 渐变背景和图片背景 */
     background-blend-mode: multiply;
     /* 混合模式 */