update:图片

scene-app/package.json

@@ -2,7 +2,7 @@
   "name": "scene-app",
   "version": "0.0.1",
   "author": "Ionic Framework",
-  "homepage": "https://ionicframework.com/",
+  "tab2page": "https://ionicframework.com/",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

scene-app/src/app/app.component.html

@@ -1,3 +1 @@
-<ion-app>
-  <ion-router-outlet></ion-router-outlet>
-</ion-app>
+<router-outlet></router-outlet>

scene-app/src/app/app.component.ts

@@ -1,12 +1,14 @@
+
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   standalone: true,
-  imports: [IonApp, IonRouterOutlet],
+  imports: [IonApp, IonRouterOutlet, RouterOutlet],
 })
 export class AppComponent {
-  constructor() {}
+  constructor() { }
 }

scene-app/src/app/app.routes.ts

@@ -1,8 +1,44 @@
+
+
+
 import { Routes } from '@angular/router';
+import { TabsPage } from "./tabs/tabs.page"
 
 export const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPage,
+    children: [
+      {
+        path: 'tab2',
+        loadComponent: () =>
+          import('../app/tab2/tab2.page').then((m) => m.Tab2Page),
+      },
+      {
+        path: 'tab1',
+        loadComponent: () =>
+          import('../app/tab1/tab1.page').then((m) => m.Tab1Page),
+      },
+      {
+        path: 'tab3',
+        loadComponent: () =>
+          import('../app/tab3/tab3.page').then((m) => m.Tab3Page),
+      },
+      {
+        path: 'juben',
+        loadComponent: () =>
+          import('./page-juben/page-juben.component').then((m) => m.PageJubenComponent),
+      },
+      {
+        path: '',
+        redirectTo: '/tabs/tab2',
+        pathMatch: 'full',
+      },
+    ],
+  },
   {
     path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+    redirectTo: '/tabs/tab2',
+    pathMatch: 'full',
   },
 ];

scene-app/src/app/page-juben/page-juben.component.html

@@ -0,0 +1,23 @@
+<ion-content>
+
+  <h1>绘出心中景区环境</h1>
+  <ion-textarea [value]="environment" (ionInput)="environmentInput($event)" placeholder="您可以说明你对该景区的感觉或描述"
+    autoGrow="true"></ion-textarea>
+  
+
+ 
+
+  <!-- 按钮：执行消息生成函数 -->
+  <ion-button (click)="sendMessage()" expand="block">生成剧本</ion-button>
+
+  <!-- 展示：返回消息内容 -->
+  <!-- 消息传输过程中，实时预览 -->
+  @if(!isComplete){
+  <div>{{responseMsg}}</div>
+  }
+  <!-- 消息传输完成后，实时预览Markdown格式 -->
+  @if(isComplete){
+  <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+  }
+
+</ion-content>

scene-app/src/app/page-juben/page-juben.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PageJubenComponent } from './page-juben.component';
+
+describe('PageJubenComponent', () => {
+  let component: PageJubenComponent;
+  let fixture: ComponentFixture<PageJubenComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PageJubenComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PageJubenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

scene-app/src/app/page-juben/page-juben.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonInput, IonTextarea } from '@ionic/angular/standalone';
+import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';
+
+@Component({
+  selector: 'app-page-juben',
+  templateUrl: './page-juben.component.html',
+  styleUrls: ['./page-juben.component.scss'],
+  imports: [IonButton, IonContent, IonTextarea, IonInput, MarkdownPreviewModule
+  ],
+  standalone: true,
+})
+export class PageJubenComponent implements OnInit {
+  constructor() { }
+  ngOnInit() { }
+  // 用户输入提示词
+  environment: string = "山势雄伟，植被丰富，白云飘浮，给人营造出仙境的感觉"
+  environmentInput(ev: any) {
+    this.environment = ev.detail.value;
+  }
+  // 用户输入提示词
+  userPrompt: string = "山势雄伟，植被丰富，白云飘浮，给人营造出仙境的感觉"
+  promptInput(ev: any) {
+    this.userPrompt = ev.detail.value;
+  }
+  // 属性：组件内用于展示消息内容的变量
+  responseMsg: any = ""
+  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
+  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
+  sendMessage() {
+    console.log("create")
+
+    let PromptTemplate = `
+    您作为一名专业的沉浸式文旅策划大师，以下是該景區的描述${this.environment}，请帮我发掘该景区可以创作的剧本元素，包括角色设定、文化故事、剧本逻辑设置。
+    以下是剧本大纲：${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
+      }
+    })
+  }
+
+}

scene-app/src/app/tab1/tab1.page.html

@@ -28,7 +28,7 @@
       </ion-item-options>
     </ion-item-sliding>
   </ion-list>
-<h1>用户评价</h1>
+<h1>用户分享</h1>
   <!-- 用户评价区域 -->
   <ion-list>
     <ion-item *ngFor="let review of reviews">

scene-app/src/app/tab1/tab1.page.ts

@@ -51,17 +51,17 @@ export class Tab1Page {
 
   scripts = [
     {
-      coverImage: '"C:\workspace\s202226701008\scene-prod\img\sc1.jpg"',
+      coverImage: 'assets/images/script1.jpg',
       title: '古城秘案',
       description: '揭开古城隐藏的秘密',
     },
     {
-      coverImage: 'scene-prod/images/script2.jpg',
+      coverImage: 'assets/images/script2.jpg',
       title: '江湖恩怨',
       description: '在江湖中寻找真相',
     },
     {
-      coverImage: 'scene-prod/images/script3.jpg',
+      coverImage: 'assets/images/script3.jpg',
       title: '失落的宝藏',
       description: '寻找失落的历史遗迹',
     },
@@ -72,13 +72,13 @@ export class Tab1Page {
       avatar: 'assets/images/user1.jpg',
       username: '小明',
       content: '剧本设计非常有趣，沉浸感十足！',
-      rating: 5,
+     
     },
     {
       avatar: 'assets/images/user2.jpg',
       username: '小红',
       content: 'IP形象设计很独特，值得推荐！',
-      rating: 4,
+      
     },
     {
       avatar: 'assets/images/user3.jpg',

scene-app/src/app/tab2/tab2.page.html

@@ -1,39 +1,60 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-avatar src="assets/logo.png" alt="灵思剧境"></ion-avatar>
-      
+      <ion-button (click)="goToTab2()">
+        <ion-icon name="tab2-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  
+    <ion-buttons slot="end">
+      <ion-menu-button></ion-menu-button>
+      <ion-button (click)="openUserMenu($event)">
+        <ion-avatar>
+          <img [src]="userAvatar" *ngIf="userAvatar; else defaultAvatar">
+          <ng-template #defaultAvatar>
+            <ion-icon name="person-outline"></ion-icon>
+          </ng-template>
+        </ion-avatar>
+      </ion-button>
     </ion-buttons>
-
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-
-
-  <!-- 功能介绍区域 -->
+<!--轮播图/推荐位-->
+<ion-content [fullscreen]="true">
+  <ion-slides pager="true" autoplay="3000">
+    <ion-slide *ngFor="let item of recommendedItems; let i = index">
+      <img [src]="item.image" />
+      <div class="carousel-caption">
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.description }}</p>
+        <button (click)="goToItem(item)"></button>
+      </div>
+    </ion-slide>
+  </ion-slides>
+
+
+  <!-- 功能亮点介绍 -->
   <ion-grid>
     <ion-row>
-      <ion-col size="4" *ngFor="let feature of features">
+      <ion-col size="12">
         <ion-card>
           <ion-card-header>
-            <ion-icon [name]="feature.icon" slot="start"></ion-icon>
-            <ion-card-title>{{ feature.title }}</ion-card-title>
+            <ion-card-title>剧本创造</ion-card-title>
           </ion-card-header>
           <ion-card-content>
-            <p>{{ feature.description }}</p>
-            <ion-button expand="full" routerLink="{{ feature.link }}">了解更多</ion-button>
+            <ion-button expand="full" (click)="navigateToJubenGeneration()">
+              <ion-icon name="book" slot="start"></ion-icon>
+              创造出专属于你的景区剧本故事
+            </ion-button>
           </ion-card-content>
         </ion-card>
       </ion-col>
+   
     </ion-row>
   </ion-grid>
 
+  
 
 
-
-
- 
-
-</ion-content>
-                         
+</ion-content>

scene-app/src/app/tab2/tab2.page.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { Tab2Page } from './tab2.page';
 
-describe('Tab2Page', () => {
+describe('Tab1Page', () => {
   let component: Tab2Page;
   let fixture: ComponentFixture<Tab2Page>;
 

scene-app/src/app/tab2/tab2.page.ts

@@ -1,60 +1,88 @@
-import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, IonButtons, IonButton, IonFooter, IonLabel, IonAvatar, IonList, IonItem, IonItemOptions, IonItemOption, IonThumbnail, IonItemSliding, IonCardContent, IonCardHeader, IonCardTitle, IonCard, IonRow, IonCol, IonGrid } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
-import { addIcons } from 'ionicons';
-import { logoTwitter, logoWechat } from 'ionicons/icons';
+import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {
+  IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonButtons, IonButton, IonIcon, IonMenuButton, IonAvatar,
+  IonGrid, IonRow, IonCol, IonCard, IonCardHeader, IonCardContent, IonList, IonItem, IonLabel
+} from '@ionic/angular/standalone';
+
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab2',
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   standalone: true,
-  imports: 
-  [
-    CommonModule,RouterModule,
-    IonItemSliding,IonCardContent,IonCardHeader,IonCardTitle,IonCard,
-    IonRow,IonCol,IonGrid,
-    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonIcon,IonButtons,IonButton,IonFooter,IonLabel,IonAvatar,IonList,IonItem,IonItemOptions,IonItemOption,
-    IonThumbnail,
+  imports: [
+    IonHeader, IonToolbar, IonContent,
+    IonSearchbar, IonButtons, IonButton, IonIcon, IonMenuButton, IonAvatar, IonGrid, IonRow,
+    IonCol, IonCard, IonCardHeader, IonCardContent, IonList, IonItem, IonLabel, IonLabel, CommonModule
   ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class Tab2Page {
-  constructor() {
-    addIcons({logoWechat,logoTwitter})
-
-  }
-
-  features = [
-    {
-      icon: 'create',
-      title: '剧本创作',
-      description: '快速生成符合景区特色的剧本。',
-      link: '/script-creation',
-    },
-    {
-      icon: 'color-palette',
-      title: 'IP打造',
-      description: '设计独特角色形象，发掘景区特色IP。',
-      link: '/ip-creation',
-    },
-    {
-      icon: 'game-controller',
-      title: '游戏体验',
-      description: '参与沉浸式剧本杀，享受互动乐趣。',
-      link: '/game-experience',
-    },
+export class Tab2Page implements OnInit {
+  // 属性
+  searchQuery: string = ''; // 搜索查询字符串
+  recommendedItems: any[] = []; // 推荐位数据
+
+  userAvatar: string | null = null; // 用户头像
+
+
+
+  constructor(private router: Router) { }
+  ngOnInit(): void {
+    throw new Error('Method not implemented.');
+  }
+  // 导航到首页
+  goToTab2() {
+    // 实现导航逻辑，例如使用Angular Router
+  }
+
+  // 处理搜索输入
+  onSearchInput(event: any) {
+    // 处理搜索输入的逻辑，例如过滤显示结果
+    console.log(this.searchQuery);
+  }
+
+  latestPosts = [
+    { title: '新小说发布', content: '用户XX发布了一部新小说《XX传》', avatarUrl: 'assets/images/avatar1.jpg' },
+    { title: '热门讨论', content: '关于小说创作的技巧讨论火热进行中', avatarUrl: 'assets/images/avatar2.jpg' },
+  ];
+
+  popularTopics = [
+    { name: '小说创作大赛', description: '参与大赛，赢取丰厚奖品！' },
+    { name: '智能体互动体验', description: '分享你与智能体的互动故事。' },
   ];
 
 
 
-  startExperience(script: any) {
-    // 跳转到剧本体验页面
-    console.log('开始体验:', script.title);
+  openUserProfile() {
+    // 跳转到用户个人中心页面
+    this.router.navigate(['/profile']);
   }
-}
 
+  openSettings() {
+    // 跳转到设置页面
+    this.router.navigate(['/settings']);
+  }
 
+  navigateToJubenGeneration() {
+    // 跳转到剧本生成页面
+    this.router.navigate(['/tabs/juben']);
+  }
+
+  navigateToCharacterCreation() {
+    // 跳转到智能体创建页面
+    this.router.navigate(['/character-creation']);
+  }
+  goToItem(item: any): void {
+    // 假设item有一个属性可以用来导航，比如item.id
+    // 这里你需要根据你的应用逻辑来调整
+    this.router.navigate(['/some-route', item.id]);
+  }
+  openUserMenu($event: Event): void {
+    // 在这里添加打开用户菜单的逻辑
+    // 例如，你可以切换一个布尔值来控制菜单的显示状态
+    console.log('User menu button clicked', $event);
+  }
 
+}

scene-app/src/index.html

@@ -14,7 +14,7 @@
 
   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <!-- add to homescreen for ios -->
+  <!-- add to tab2screen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 </head>

scene-app/src/main.ts

@@ -5,10 +5,27 @@ import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalo
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 
+// 引用HttpClient方法
+import { provideHttpClient } from '@angular/common/http';
+// 引用移动端授权检测供应器
+import { Diagnostic } from '@awesome-cordova-plugins/diagnostic/ngx';
+// 设置Parse服务属性
+import Parse from "parse";
+Parse.initialize("ncloudmaster");
+Parse.serverURL = "https://server.fmode.cn/parse";
+localStorage.setItem("NOVA_APIG_SERVER", 'aHR0cHMlM0ElMkYlMkZzZXJ2ZXIuZm1vZGUuY24lMkZhcGklMkZhcGlnJTJG')
+
+// 注意：替换Token 根据Token设置Parse服务帐套权限
+Parse.User.become('r:E4KpGvTEto-188700767121732975341')
+
 bootstrapApplication(AppComponent, {
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
-    provideIonicAngular(),
+    provideIonicAngular(),  
+    // 添加HttpClient供应器
+    provideHttpClient(),
+    // 添加Diagnostic
+    Diagnostic,
     provideRouter(routes, withPreloading(PreloadAllModules)),
   ],
 });

scene-app/tsconfig.json

@@ -2,6 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "allowSyntheticDefaultImports":true,
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,