feat(ai): 初始化模态框添加故事生成和第三步

Encaik · Sep 29, 2024 · 7442ef5 · 7442ef5 · vercel · Sep 29, 2024
1 parent 26d358b
commit 7442ef5
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 37 deletions.
diff --git a/src/app/components/init-modal/init-modal.component.html b/src/app/components/init-modal/init-modal.component.html
@@ -1,6 +1,7 @@
 <nz-steps class="w-full sm:w-1/2 m-auto" [nzCurrent]="current">
   <nz-step nzTitle="选择角色"></nz-step>
   <nz-step nzTitle="选择世界"></nz-step>
+  <nz-step nzTitle="前情提要"></nz-step>
 </nz-steps>
 
 <div class="my-4 relative">
@@ -58,4 +59,9 @@
       </div>
     }
   </nz-spin>
+  <nz-spin [nzSpinning]="!story">
+    @if (current === 2) {
+      <p>{{ story }}</p>
+    }
+  </nz-spin>
 </div>
diff --git a/src/app/components/init-modal/init-modal.component.ts b/src/app/components/init-modal/init-modal.component.ts
@@ -14,7 +14,7 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
 @Component({
   selector: 'app-init-modal',
   standalone: true,
-  imports: [CommonModule, NzDescriptionsModule, NzStepsModule, NzTagModule, KeyValuePipe, LevelMapViewComponent,NzSpinModule ],
+  imports: [CommonModule, NzDescriptionsModule, NzStepsModule, NzTagModule, KeyValuePipe, LevelMapViewComponent, NzSpinModule],
   templateUrl: './init-modal.component.html'
 })
 export class InitModalComponent implements OnInit {
@@ -27,6 +27,7 @@ export class InitModalComponent implements OnInit {
   galaxiesId: string | undefined;
   selectCharacter: InitCharacter | undefined;
   selectEnv: Env | undefined;
+  story: string = '';
 
   ngOnInit() {
     this.getCharacterList(8);
@@ -36,14 +37,20 @@ export class InitModalComponent implements OnInit {
   getCharacterList(length: number) {
     this.generateSrv.getCharacterList(length).subscribe(res => {
       this.characters = res;
-    })
+    });
   }
 
   getEnvList(length: number) {
-    this.generateSrv.getEnvList(length).subscribe(({envs,galaxiesId}) => {
+    this.generateSrv.getEnvList(length).subscribe(({ envs, galaxiesId }) => {
       this.envs = envs;
       this.galaxiesId = galaxiesId;
-    })
+    });
+  }
+
+  getStory(character: InitCharacter, env: Env) {
+    this.generateSrv.getStory(character, env).subscribe(res => {
+      this.story = res;
+    });
   }
 
   onCharacterClick(item: InitCharacter) {
@@ -52,7 +59,13 @@ export class InitModalComponent implements OnInit {
   }
 
   onEnvClick(item: Env) {
+    // this.current = 2;
     this.selectEnv = item;
+    // this.getStory(this.selectCharacter!, this.selectEnv!);
+    this.onSubmitClick();
+  }
+
+  onSubmitClick() {
     this.ref.destroy({
       character: this.selectCharacter,
       env: {

diff --git a/src/app/shared/services/generate.service.ts b/src/app/shared/services/generate.service.ts
@@ -10,42 +10,62 @@ import { BattleCharacter, Env, InitCharacter } from '@models';
 export class GenerateService {
   private http = inject(HttpClient);
 
-  getCharacterList(length: number):Observable<InitCharacter[]> {
-    return this.http.get<Res<InitCharacter[]>>('/api/generate/character', {
-      params: { length }
-    }).pipe(map(res=>{
-      if(res.status === ResStatus.Success){
-        return res.data;
-      }else{
-        return []
-      }
-    }));
+  getCharacterList(length: number): Observable<InitCharacter[]> {
+    return this.http
+      .get<Res<InitCharacter[]>>('/api/generate/character', {
+        params: { length }
+      })
+      .pipe(
+        map(res => {
+          if (res.status === ResStatus.Success) {
+            return res.data;
+          } else {
+            return [];
+          }
+        })
+      );
   }
 
-  getEnvList(length: number):Observable<{ envs: Env[]; galaxiesId: string }> {
-    return this.http.get<Res<{ envs: Env[]; galaxiesId: string }>>('/api/generate/env', {
-      params: { length }
-    }).pipe(map(res=>{
-      if(res.status === ResStatus.Success){
-        return res.data;
-      }else{
-        return {
-          envs:[],
-          galaxiesId: ''
-        }
-      }
-    }));
+  getEnvList(length: number): Observable<{ envs: Env[]; galaxiesId: string }> {
+    return this.http
+      .get<Res<{ envs: Env[]; galaxiesId: string }>>('/api/generate/env', {
+        params: { length }
+      })
+      .pipe(
+        map(res => {
+          if (res.status === ResStatus.Success) {
+            return res.data;
+          } else {
+            return {
+              envs: [],
+              galaxiesId: ''
+            };
+          }
+        })
+      );
   }
 
-  getEnemyList(length: number,level:number):Observable<BattleCharacter[]> {
-    return this.http.get<Res<BattleCharacter[]>>('/api/generate/enemy', {
-      params: { length,level }
-    }).pipe(map(res=>{
-      if(res.status === ResStatus.Success){
-        return res.data;
-      }else{
-        return []
-      }
-    }));
+  getEnemyList(length: number, level: number): Observable<BattleCharacter[]> {
+    return this.http
+      .get<Res<BattleCharacter[]>>('/api/generate/enemy', {
+        params: { length, level }
+      })
+      .pipe(
+        map(res => {
+          if (res.status === ResStatus.Success) {
+            return res.data;
+          } else {
+            return [];
+          }
+        })
+      );
+  }
+
+  getStory(character: InitCharacter, env: Env): Observable<string> {
+    return this.http.post<Res<string>>('/api/generate/story', { character, env }).pipe(
+      map(res => {
+        return res.status === ResStatus.Success ? res.data : '';
+      })
+    );
   }
 }