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

novel-app/package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.0.1",
       "dependencies": {
         "@angular/animations": "^18.0.0",
+        "@angular/cdk": "^18.2.14",
         "@angular/common": "^18.0.0",
         "@angular/compiler": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
+        "@angular/material": "^18.2.14",
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
@@ -22,7 +24,7 @@
         "@capacitor/haptics": "6.0.2",
         "@capacitor/keyboard": "6.0.3",
         "@capacitor/status-bar": "6.0.2",
-        "@ionic/angular": "^8.0.0",
+        "@ionic/angular": "^8.4.1",
         "fmode-ng": "^0.0.63",
         "ionicons": "^7.2.1",
         "rxjs": "~7.8.0",
@@ -488,7 +490,6 @@
       "resolved": "https://registry.npmmirror.com/@angular/cdk/-/cdk-18.2.14.tgz",
       "integrity": "sha512-vDyOh1lwjfVk9OqoroZAP8pf3xxKUvyl+TVR8nJxL4c5fOfUFkD7l94HaanqKSRwJcI2xiztuu92IVoHn8T33Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -674,6 +675,24 @@
         "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmmirror.com/@angular/material/-/material-18.2.14.tgz",
+      "integrity": "sha512-28pxzJP49Mymt664WnCtPkKeg7kXUsQKTKGf/Kl95rNTEdTJLbnlcc8wV0rT0yQNR7kXgpfBnG7h0ETLv/iu5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^18.0.0 || ^19.0.0",
+        "@angular/cdk": "18.2.14",
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "@angular/forms": "^18.0.0 || ^19.0.0",
+        "@angular/platform-browser": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "18.2.12",
       "resolved": "https://registry.npmmirror.com/@angular/platform-browser/-/platform-browser-18.2.12.tgz",
@@ -3907,12 +3926,12 @@
       }
     },
     "node_modules/@ionic/angular": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.4.0.tgz",
-      "integrity": "sha512-ivgHk76zpu6EZZlxXj5+FUqGwFKotWhDDA9YRltd2QCnQN+7kwacQk7KFInQ5Sd8RJT98mKFG3oOpyx5gFrBdA==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmmirror.com/@ionic/angular/-/angular-8.4.1.tgz",
+      "integrity": "sha512-22ghlHeIJjHDizns/huYp1sQ3Y9qYyUY9hEueIB0e8jsNhCOwhRijMIoOCZ/sfMKTbNaKX7EJ25NpVetF7mZXQ==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.4.0",
+        "@ionic/core": "8.4.1",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -4085,9 +4104,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.4.0.tgz",
-      "integrity": "sha512-mZ2Ni9QByFGWBNr5W/F/nyPV+cXLhK+6W5BRziy7QPX6YIS57KH8FpY+CjE7BEcpE78anyY49bZt3eOWcES02g==",
+      "version": "8.4.1",
+      "resolved": "https://registry.npmmirror.com/@ionic/core/-/core-8.4.1.tgz",
+      "integrity": "sha512-D5xpw5TF2wldpAWE0rHq3L+5T79EjR6d++QFpprjp+q+cFjjhOnfGD+2k7gLlWepAod9LUUigeL0JF02C2wgRQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",

novel-app/package.json

@@ -14,10 +14,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.2.14",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.2.14",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
@@ -27,7 +29,7 @@
     "@capacitor/haptics": "6.0.2",
     "@capacitor/keyboard": "6.0.3",
     "@capacitor/status-bar": "6.0.2",
-    "@ionic/angular": "^8.0.0",
+    "@ionic/angular": "^8.4.1",
     "fmode-ng": "^0.0.63",
     "ionicons": "^7.2.1",
     "rxjs": "~7.8.0",

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

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
@@ -67,3 +68,68 @@ export const routes: Routes = [
   ],
 })
 export class AppRoutingModule { }
+=======
+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',
+    loadComponent: () => import('./character/character.page').then(m => m.CharacterPage)
+  },
+  {
+    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)
+  }
+
+
+
+
+];
+
+
+
+
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }), HttpClientModule],
+  exports: [RouterModule],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
+  ],
+})
+export class AppRoutingModule { }
+>>>>>>> 92bb7a7a89d34e8fc2085197f481d5b5758947d2

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

@@ -0,0 +1,70 @@
+<!-- chapter-generator.page.html -->
+<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>
+  <!-- 遮罩层 -->
+  <div class="overlay" [style.display]="isSideShow ? 'block' : 'none'"></div>
+
+  <!-- 主要内容区域 -->
+  <div class="content-container">
+
+    <!-- 侧边栏 -->
+    <div [style.display]="isSideShow ? 'flex' : 'none'"
+      style="display: flex; width: 200px; flex-direction: column; z-index: 1000;">
+      <ion-list>
+        <ion-item *ngFor="let chapter of chapters; let i = index;" (click)="selectChapter(i)">
+          <ion-label>{{ chapter.title }}</ion-label>
+          <ion-buttons slot="end">
+            <ion-button (click)="deleteChapter(i)">
+              <ion-icon name="trash"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+        </ion-item>
+      </ion-list>
+      <ion-button (click)="addChapter()">
+        <ion-icon name="add"></ion-icon>添加章节
+      </ion-button>
+
+      <ion-button color="light" (click)="toggleSide()">
+        <ion-icon name="add"></ion-icon>{{isSideShow ? '折叠' : '展开'}}
+      </ion-button>
+    </div>
+
+    <!-- 内容区域 -->
+    <div class="chapter-edit-container">
+      <ion-button>AI续写</ion-button>
+      <ion-button>AI润色</ion-button>
+      <ion-button>AI扩写</ion-button>
+      @if(selectedChapterIndex !== null){
+      <ion-item>
+        <ion-label position="floating">章节标题</ion-label>
+        <ion-input [(ngModel)]="selectedChapterTitle"></ion-input>
+      </ion-item>
+      <ion-label position="floating">章节内容</ion-label>
+      <ion-item>
+        <textarea [(ngModel)]="selectedChapterContent" style="width: 100%; height: 300px;"></textarea>
+      </ion-item>
+      <ion-button (click)="saveChapter()" expand="block" color="success">保存章节</ion-button>
+      } @else {
+      <p>请选择一个章节进行编辑。</p>
+      }
+    </div>
+  </div>
+
+  <!-- 悬浮球 -->
+  <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+    <ion-fab-button (click)="toggleSide()">
+      <ion-icon name="chevron-forward"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</ion-content>

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

@@ -0,0 +1,45 @@
+/* chapter-generator.page.scss */
+ion-menu {
+    --width: 80%;
+}
+
+ion-list {
+    margin-top: 16px;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100% - 200px);
+    /* 200px 是侧边栏的宽度 */
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    /* 半透明黑色背景 */
+    z-index: 999;
+    /* 确保遮罩层在主要内容之上 */
+    margin-left: 200px;
+    /* 与侧边栏对齐 */
+}
+
+.content-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 100;
+    /* 设置一个比侧边栏低的 z-index */
+}
+
+.chapter-edit-container {
+    flex: 1;
+    padding: 16px;
+    position: relative;
+    z-index: 100;
+    /* 设置与 AI 功能按钮相同的 z-index */
+}
+
+ion-fab {
+    z-index: 1000;
+    /* 确保悬浮球在最上层 */
+}

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

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

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

@@ -0,0 +1,77 @@
+// chapter-generator.page.ts
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms'; // 导入 FormsModule
+import { IonBackButton, IonButton, IonButtons, IonContent, IonFab, IonFabButton, IonHeader, IonIcon, IonInput, IonItem, IonLabel, IonList, IonMenu, IonMenuButton, IonRouterOutlet, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronForward } from 'ionicons/icons';
+
+addIcons({ chevronForward });
+
+@Component({
+  selector: 'app-chapter-generator',
+  templateUrl: './chapter-generator.page.html',
+  styleUrls: ['./chapter-generator.page.scss'],
+  standalone: true,
+  imports: [
+    FormsModule, // 添加 FormsModule
+    IonIcon, IonRouterOutlet,
+    IonList, IonFab, IonBackButton,
+    IonFabButton, CommonModule,
+    IonTitle, IonMenuButton, IonMenu,
+    IonContent, IonItem, IonInput, IonLabel, IonButton, IonButtons, IonHeader, IonToolbar
+  ]
+})
+export class ChapterGeneratorPage {
+  chapters = [
+    { title: 'Chapter 1', content: '这是第一章的内容。' },
+    // 其他章节...
+  ];
+  isSideShow: boolean = true;
+
+  toggleSide() {
+    this.isSideShow = !this.isSideShow;
+  }
+
+  addChapter() {
+    const newChapter = { title: `Chapter ${this.chapters.length + 1}`, content: '' };
+    this.chapters.push(newChapter);
+    this.selectChapter(this.chapters.length - 1); // 自动编辑新添加的章节
+  }
+
+  deleteChapter(index: number) {
+    if (index === this.selectedChapterIndex) {
+      this.selectedChapterIndex = null;
+      this.selectedChapterTitle = '';
+      this.selectedChapterContent = '';
+    }
+    this.chapters.splice(index, 1);
+  }
+
+  selectedChapterIndex: number | null = null;
+  selectedChapterTitle: string = '';
+  selectedChapterContent: string = '';
+
+  selectChapter(index: number) {
+    this.editChapter(index);
+    this.isSideShow = false; // 隐藏侧边栏
+  }
+
+  editChapter(index: number) {
+    this.selectedChapterIndex = index;
+    this.selectedChapterTitle = this.chapters[index].title;
+    this.selectedChapterContent = this.chapters[index].content; // 初始化内容为当前章节的内容
+  }
+
+  saveChapter() {
+    if (this.selectedChapterIndex !== null) {
+      this.chapters[this.selectedChapterIndex].title = this.selectedChapterTitle;
+      this.chapters[this.selectedChapterIndex].content = this.selectedChapterContent;
+      console.log('章节内容已保存:', this.selectedChapterContent);
+      this.selectedChapterIndex = null;
+      this.selectedChapterTitle = '';
+      this.selectedChapterContent = '';
+      this.isSideShow = true; // 显示侧边栏
+    }
+  }
+}

novel-app/src/app/comp-word-entry/comp-word-entry.component.html

@@ -0,0 +1,47 @@
+@for(entry of entryList;let idx = $index;track entry){
+  <ion-card>
+    <ion-card-header>
+          <ion-card-title>{{entry?.title || "新词条"}}
+          <ion-button (click)="deleteEntry(idx)" color="danger">删除</ion-button>
+
+          </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item>
+          <ion-select  [value]="entry.type" (ionChange)="onIonChange(entry,'type',$event)" placeholder="词条类型">
+            <ion-select-option value="人物">人物</ion-select-option>
+            <ion-select-option value="道具">道具</ion-select-option>
+            <ion-select-option value="场景">场景</ion-select-option>
+          </ion-select>
+          <ion-input [value]="entry.title" (ionChange)="onIonChange(entry,'title',$event)" placeholder="请输入词条名称"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-input label="标签" [value]="entry.newTag" (ionChange)="onIonChange(entry,'newTag',$event)"></ion-input>
+          <ion-button (click)="addTag(entry)">添加</ion-button>
+        </ion-item>
+        @if(entry.tags?.length){
+          <ion-item>
+            @for(tag of entry.tags;track tag){
+              <ion-chip>{{tag}}</ion-chip>
+            }
+          </ion-item>
+        }
+        <ion-item>
+          <ion-label slot="start">重要程度</ion-label>
+          <ion-radio-group label="重要程度" [value]="entry.important" (ionChange)="onIonChange(entry,'important',$event)">
+            <ion-radio value="重要">重要</ion-radio><br />
+            <ion-radio value="不重要">不重要</ion-radio>
+          </ion-radio-group>
+        </ion-item>
+        <ion-item>
+          <ion-textarea label="词条简介" [value]="entry.desc" (ionChange)="onIonChange(entry,'desc',$event)"></ion-textarea>
+        </ion-item>
+
+      </ion-list>
+
+
+    </ion-card-content>
+  </ion-card>
+}
+<ion-button expand="block" (click)="addEntry()">添加词条</ion-button>

novel-app/src/app/tag/tag.component.spec.ts → novel-app/src/app/comp-word-entry/comp-word-entry.component.spec.ts

@@ -1,19 +1,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
 
-import { TagComponent } from './tag.component';
+import { CompWordEntryComponent } from './comp-word-entry.component';
 
-describe('TagComponent', () => {
-  let component: TagComponent;
-  let fixture: ComponentFixture<TagComponent>;
+describe('CompWordEntryComponent', () => {
+  let component: CompWordEntryComponent;
+  let fixture: ComponentFixture<CompWordEntryComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ TagComponent ],
-      imports: [IonicModule.forRoot()]
+      imports: [CompWordEntryComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(TagComponent);
+    fixture = TestBed.createComponent(CompWordEntryComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));

novel-app/src/app/comp-word-entry/comp-word-entry.component.ts

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonChip, IonIcon, IonInput, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup, IonSelect, IonSelectOption, IonTextarea } from '@ionic/angular/standalone';
+
+
+interface WordEntry{
+  title :string // 名称
+  type:"人物"|"道具"|"场景" // 类型
+  important:"重要"|"不重要" //  重要程度
+  desc:string // 词条简介
+  tags?:Array<string> // 别名标签
+  newTag?:string
+}
+
+
+/**
+ * 词条编辑组件
+ */
+@Component({
+  selector: 'comp-word-entry',
+  templateUrl: './comp-word-entry.component.html',
+  styleUrls: ['./comp-word-entry.component.scss'],
+  standalone: true,
+  imports:[
+    IonCard,IonCardHeader,IonCardContent,IonCardTitle,IonCardSubtitle,
+    IonList,IonItem,IonLabel,IonIcon,IonSelect,IonSelectOption,
+    IonInput,IonTextarea,
+    IonButton,
+    IonRadio,IonRadioGroup,IonChip
+  ]
+})
+export class CompWordEntryComponent  implements OnInit {
+
+  @Input()
+  entryList:Array<WordEntry> = []
+
+  @Output()
+  entryListChange:EventEmitter<Array<WordEntry>> = new EventEmitter<Array<WordEntry>>()
+
+  onIonChange(entry:any,key:string,ev:any){
+    entry[key] = ev.detail.value;
+  }
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  addEntry(){
+    this.entryList.push({
+      title:"",
+      type:"人物",
+      important:"重要",
+      desc:"简介"
+    })
+    this.entryListChange.emit(this.entryList)
+  }
+  deleteEntry(idx:number){
+    this.entryList.splice(idx,1);
+    this.entryListChange.emit(this.entryList)
+
+  }
+  // 标签条件
+  newTag:string = ""
+  addTag(entry:any){
+    if(!entry.tags) entry.tags = []
+    if(!entry.newTag) return
+    entry.tags.push(entry.newTag)
+    entry.newTag = ""
+  }
+
+
+}

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

@@ -1,3 +1,8 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>首页</ion-title>
+  </ion-toolbar>
+</ion-header>
 <ion-content [fullscreen]="true">
   <!-- 顶部图片区域 -->
   <div class="header-section">

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

@@ -7,7 +7,7 @@ import {
   IonItem, IonLabel, IonList, IonTitle, IonToolbar, ToastController, AlertController, IonCard, IonCardHeader, IonCardTitle
 } from '@ionic/angular/standalone';
 import { UserService } from '../services/user.service';
-import { ActionSheetController } from '@ionic/angular';
+import { ActionSheetController } from '@ionic/angular/standalone';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 
 interface User {

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

@@ -1,57 +1,45 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button (click)="goBack()">
-        <ion-icon name="arrow-back"></ion-icon>
-      </ion-button>
+      <ion-back-button defaultHref="/"></ion-back-button>
     </ion-buttons>
     <ion-title>短篇小说生成器</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>作品名称</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-input [(ngModel)]="workTitle" placeholder="请输入作品名称"></ion-input>
-    </ion-card-content>
-  </ion-card>
+<ion-content class="ion-padding">
 
-  <ion-item>
-    <ion-label>风格选择</ion-label>
-    <ion-select [(ngModel)]="selectedStyle" (ionChange)="onStyleChange()">
-      <ion-select-option value="爱情">爱情</ion-select-option>
-      <ion-select-option value="冒险">冒险</ion-select-option>
-      <ion-select-option value="科幻">科幻</ion-select-option>
-      <ion-select-option value="悬疑">悬疑</ion-select-option>
-    </ion-select>
-  </ion-item>
+  <h1>标题</h1>
+  <ion-input [value]="title" (ionInput)="titleInput($event)"></ion-input>
+  <h1>风格</h1>
+  <ion-input [value]="style" (ionInput)="styleInput($event)"></ion-input>
+  
+  <!-- 词条列表编辑区域 -->
+   <span (click)="showEntryList()">
+    当前词条 数量{{entryList?.length}}
+   </span>
+  <comp-word-entry [entryList]="entryList" (entryListChange)="onEntryListChange($event)"></comp-word-entry>
+  <!-- 文本域：生成提示词 -->
+  <h1>人物词条</h1>
+  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词"
+    autoGrow="true"></ion-textarea>
 
-  <ion-card>
-    <ion-card-header>
-      <ion-card-title>人物词条</ion-card-title>
-    </ion-card-header>
-    <ion-card-content>
-      <ion-input [(ngModel)]="characterName" placeholder="人物名称"></ion-input>
-      <ion-select [(ngModel)]="characterGender" placeholder="性别">
-        <ion-select-option value="男">男</ion-select-option>
-        <ion-select-option value="女">女</ion-select-option>
-      </ion-select>
-      <ion-textarea [(ngModel)]="characterDescription" placeholder="人物简介" autoGrow="true"></ion-textarea>
-      <ion-button expand="full" (click)="addCharacter()">新建人物</ion-button>
-    </ion-card-content>
-  </ion-card>
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成大纲</ion-button>
 
-  <ion-list>
-    <ion-item *ngFor="let character of characters">
-      <ion-label>
-        <h2>{{ character.name }}</h2>
-        <p>性别: {{ character.gender }}</p>
-        <p>简介: {{ character.description }}</p>
-      </ion-label>
-    </ion-item>
-  </ion-list>
+  <!-- 展示：返回消息内容 -->
+  <!-- 实时预览生成的小说大纲 -->
+  <ion-textarea [(ngModel)]="generatedOutline" placeholder="生成的小说大纲" autoGrow="true"
+    class="generated-outline"></ion-textarea>
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendOutline()" expand="block">生成小说</ion-button>
+
+  <!-- 展示：返回消息内容 -->
+  <!-- 实时预览生成的小说 -->
+  <ion-textarea [(ngModel)]="generatedContent" placeholder="生成的小说" autoGrow="true"
+    class="generated-content"></ion-textarea>
+
+  <!-- 保存按钮 -->
+  <ion-button (click)="saveNovel()" expand="block" color="success">保存小说</ion-button>
 
 </ion-content>

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

@@ -1,18 +1,52 @@
-ion-card {
-    margin: 16px;
+ion-content {
+    --padding-top: 20px;
+    --padding-bottom: 20px;
 }
 
-.theme-chips {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
+ion-header {
+    background-color: #488aff;
+    color: white;
 }
 
-ion-chip {
-    margin: 4px;
-    cursor: pointer; // 添加光标样式
+ion-title {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+ion-input,
+ion-textarea {
+    margin-bottom: 15px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+    padding: 10px;
+}
+
+ion-input {
+    height: 40px;
+}
+
+ion-textarea {
+    min-height: 100px;
 }
 
 ion-button {
-    margin-top: 10px; // 按钮与文本框之间的间距
+    margin-top: 10px;
+    margin-bottom: 15px;
+    --background: #488aff;
+    --color: white;
+    --border-radius: 8px;
+}
+
+.generated-outline {
+    margin-top: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 10px;
+    background-color: #f9f9f9;
+}
+
+h1 {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 5px;
 }

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

@@ -1,52 +1,135 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
 import { IonicModule } 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';
 
 @Component({
   selector: 'app-short-generator',
   templateUrl: './short-generator.page.html',
   styleUrls: ['./short-generator.page.scss'],
   standalone: true,
-  imports: [IonicModule, FormsModule]
+  imports: [
+    IonicModule,
+    FormsModule,
+    MarkdownPreviewModule,
+    CompWordEntryComponent,
+  ],
 })
 export class ShortGeneratorPage implements OnInit {
-  workTitle: string = '';
-  selectedStyle: string = '';
-  characterName: string = '';
-  characterGender: string = '';
-  characterDescription: string = '';
-  characters: Array<{ name: string; gender: string; description: string }> = [];
-
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() { }
 
-  goBack() {
-    // 实现返回逻辑，例如使用路由
+  navigateToContentGenerator() {
+    this.router.navigate(['/content-generator'], { queryParams: { outline: this.generatedOutline } });
+  }
+
+  // 用户输入提示词
+  title: string = "时空之旅";
+  titleInput(ev: any) {
+    this.title = ev.detail.value;
+  }
+
+  style: string = "玄幻";
+  styleInput(ev: any) {
+    this.style = ev.detail.value;
   }
 
-  onStyleChange() {
-    // 处理风格选择变化
+  // 用户输入提示词
+  userPrompt: string = "人物名字：紫霄月;  人物角色：女主角；人物描述：一位来自古老时空的神秘女子。她自幼便拥有穿梭时空的奇异能力，能够自由穿梭于不同的历史与未来之间。这种能力不仅赋予了她非凡的见识与智慧，也让她背负上了沉重的使命——寻找失落的时空碎片，以维护时空的平衡与稳定。";
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
+  }
+  // 人物词条
+  entryList:Array<any> = []
+  onEntryListChange(ev:any){
+    this.entryList = ev
+  }
+  showEntryList(){
+    console.log(JSON.stringify(this.entryList))
+  }
+  // 生成的小说大纲
+  generatedOutline: string = "";
+
+  // 生成的小说内容
+  generatedContent: string = "";
+
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = "";
+
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+
+  sendMessage() {
+    console.log("create");
+
+    let PromptTemplate = `
+    您作为一名专业的${this.style}作者，请您根据用户提供的标题${this.title}，给出短篇小说大纲。
+    以下是用户的口述：${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;
+        // 将生成的小说大纲放入文本框中
+        this.generatedOutline = this.responseMsg;
+      }
+    });
   }
 
-  addCharacter() {
-    console.log('人物创建:', {
-      name: this.characterName,
-      gender: this.characterGender,
-      description: this.characterDescription
+  sendOutline() {
+    console.log("create");
+
+    let PromptTemplate = `
+    根据短篇小说大纲${this.generatedOutline}，生成一个短篇小说。
+    `;
+
+    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.generatedContent = this.responseMsg;
+      }
     });
-    if (this.characterName && this.characterGender && this.characterDescription) {
-      this.characters.push({
-        name: this.characterName,
-        gender: this.characterGender,
-        description: this.characterDescription
-      });
-    }
-    // 清空输入框
-    this.characterName = '';
-    this.characterGender = '';
-    this.characterDescription = '';
   }
 
-}
+  saveNovel() {
+    if (this.generatedContent) {
+      const novelData = {
+        title: this.title,
+        style: this.style,
+        userPrompt: this.userPrompt,
+        generatedOutline: this.generatedOutline,
+        generatedContent: this.generatedContent
+      };
+
+      // 保存到本地存储
+      localStorage.setItem('novel', JSON.stringify(novelData));
+      console.log('小说已保存到本地存储');
+
+      // 可以在这里添加其他保存逻辑，例如发送到服务器
+    } else {
+      console.log('没有生成小说内容，无法保存');
+    }
+  }
+}

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

@@ -1,13 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>short-novel</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">short-novel</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

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

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

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

@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-
-@Component({
-  selector: 'app-short-novel',
-  templateUrl: './short-novel.page.html',
-  styleUrls: ['./short-novel.page.scss'],
-  standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
-})
-export class ShortNovelPage implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

@@ -1,13 +1,26 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>story-generator</ion-title>
+    <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">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">story-generator</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content class="ion-padding">
+  <ion-label position="stacked">作品名称 *</ion-label>
+  <ion-item>
+    <ion-textarea [(ngModel)]="title" placeholder="请输入作品名称"></ion-textarea>
+  </ion-item>
+
+  <ion-label position="stacked">作品简介（选填）</ion-label>
+  <ion-item>
+    <ion-textarea [(ngModel)]="description" rows="5" placeholder="请输入作品简介"></ion-textarea>
+  </ion-item>
+
+  <div class="button-container">
+    <ion-button (click)="nextStep()" expand="block" color="primary">
+      下一步
+    </ion-button>
+  </div>
 </ion-content>

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

@@ -0,0 +1,44 @@
+ion-header {
+    ion-toolbar {
+        ion-title {
+            font-size: 20px;
+        }
+    }
+}
+
+ion-content {
+    .ion-padding {
+        ion-label {
+            margin-bottom: 10px;
+            /* 增加标签和文本框之间的间距 */
+        }
+
+        ion-item {
+            margin-bottom: 20px;
+        }
+
+        ion-input,
+        ion-textarea {
+            padding: 15px;
+            border-radius: 8px;
+            border: 1px solid #ccc;
+            /* 添加边框 */
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            font-size: 16px;
+            color: #333;
+        }
+
+        ion-button {
+            font-size: 18px;
+            background-color: #007bff;
+            color: white;
+            border-radius: 8px;
+            padding: 15px 30px;
+            transition: background-color 0.3s ease;
+        }
+
+        ion-button:hover {
+            background-color: #0056b3;
+        }
+    }
+}

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

@@ -1,20 +1,27 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
-import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-story-generator',
   templateUrl: './story-generator.page.html',
   styleUrls: ['./story-generator.page.scss'],
   standalone: true,
-  imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule]
+  imports: [IonicModule, FormsModule],
 })
-export class StoryGeneratorPage implements OnInit {
+export class StoryGeneratorPage {
+  title: string = '';
+  description: string = '';
+  constructor(
+    private router: Router,
+  ) { }
 
-  constructor() { }
-
-  ngOnInit() {
+  nextStep() {
+    // 处理下一步逻辑
+    console.log('Title:', this.title);
+    console.log('Description:', this.description);
+    // 导航到 chapter-generator 页面
+    this.router.navigate(['/chapter-generator']);
   }
-
-}
+}

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

@@ -18,7 +18,7 @@ export const routes: Routes = [
       },
       {
         path: 'character',
-        loadComponent: () => import('../character/character.page').then( m => m.CharacterPage)
+        loadComponent: () => import('../character/character.page').then(m => m.CharacterPage)
       },
       {
         path: 'story-generator',

novel-app/src/app/tag/README.MD

@@ -1 +0,0 @@
-- 标签组件

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

@@ -1,3 +0,0 @@
-<p>
-  tag works!
-</p>

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

@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-tag',
-  templateUrl: './tag.component.html',
-  styleUrls: ['./tag.component.scss'],
-})
-export class TagComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() { }
-
-}