novel-app/src/app/agent-create/agent-create.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-button (click)="backhome()" color="primary" >{{back}}</ion-button>
+      <ion-back-button defaultHref="tabs/tab1"></ion-back-button>
     </ion-buttons>
     <ion-title>创建智能体</ion-title>
     <!-- <ion-progress-bar type="indeterminate"></ion-progress-bar> -->
@@ -9,7 +9,9 @@
 </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;">
+
   <div style="text-align: center; margin-top: 20px">
     <img height="80px" [src]="currentUser.get('avatar')" alt="" style="border-radius: 50%;">
     <p>智能体创建</p>

novel-app/src/app/agent-create/agent-create.page.scss

@@ -0,0 +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: transparent;
+    /* 设置为透明，以便背景从 ion-app 继承 */
+    padding: 16px;
+}

novel-app/src/app/agent-create/agent-create.page.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { CloudObject, CloudQuery, CloudUser } from '../lib/ncloud';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonIcon, ModalController, IonTextarea, IonInput, IonCard, IonCardHeader, IonCardTitle, IonThumbnail, IonCardContent, IonCardSubtitle, IonItem, IonList, IonLabel, IonAvatar, IonSelect, IonSelectOption, AlertController, IonButtons, IonProgressBar, IonText } from '@ionic/angular/standalone';
+import { CloudObject,CloudUser } from '../lib/ncloud';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, ModalController, IonTextarea, IonInput, IonCard, IonItem, IonList, IonLabel, AlertController, IonButtons, IonBackButton, IonAvatar, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, 
+  IonIcon, IonProgressBar, IonSelect, IonSelectOption, IonText, IonThumbnail } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
 import { AvatarModule, ChatPanelOptions, DalleOptions, FmodeChat, FmodeChatCompletion, FmodeChatMessage, ImagineWork, openChatPanelModal } from 'fmode-ng';
-import { CompUploaderHwobsComponent } from '../comp-uploader-hwobs/comp-uploader-hwobs.component';
+import { CompUploaderHwobsComponent } from "../comp-uploader-hwobs/comp-uploader-hwobs.component";
 
 @Component({
   selector: 'app-agent-create',
@@ -12,11 +13,12 @@ import { CompUploaderHwobsComponent } from '../comp-uploader-hwobs/comp-uploader
   styleUrls: ['./agent-create.page.scss'],
   standalone: true,
   imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput,
-    IonIcon,IonCard,IonCardHeader,IonCardTitle,
-    IonCardSubtitle,IonCardContent, IonThumbnail, IonItem,IonList,CommonModule,IonLabel,
-    IonAvatar, IonSelect, IonSelectOption,IonButtons,IonProgressBar,
-    IonText, IonCardHeader, IonCardSubtitle,CompUploaderHwobsComponent]
+    IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput,
+    IonCard, IonBackButton,
+    IonItem, IonList, CommonModule,
+    IonButtons,
+    CompUploaderHwobsComponent
+]
 })
 export class AgentCreatePage implements OnInit {
 
@@ -32,7 +34,7 @@ export class AgentCreatePage implements OnInit {
  images:Array<string> = []
   back:string = "<";
   backhome() {
-    this.router.navigate(['/tab1']);
+    this.router.navigate(['tabs/tab1']);
   }
   ngOnInit() {
 

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

@@ -32,10 +32,6 @@ export const routes: Routes = [
     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)
@@ -44,10 +40,6 @@ export const routes: Routes = [
     path: 'chapter-generator',
     loadComponent: () => import('./chapter-generator/chapter-generator.page').then(m => m.ChapterGeneratorPage)
   },
-  {
-    path: 'character-detail/:id',
-    loadComponent: () => import('./character-detail/character-detail.component').then(m => m.CharacterDetailComponent)
-  },
   {
     path: 'tab1',
     loadComponent: () => import('./tab1/tab1.page').then(m => m.Tab1Page)

novel-app/src/app/character-detail/character-detail.component.html

@@ -1,39 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/character"></ion-back-button>
-    </ion-buttons>
-    <ion-title *ngIf="character; else loading">{{ character.name }} 的详情</ion-title>
-    <ng-template #loading>
-      <ion-title>加载中...</ion-title>
-    </ng-template>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <div *ngIf="character; else notFound">
-    <h2>角色信息</h2>
-    <ion-card>
-      <img [src]="character.avatar" [alt]="character.name" />
-      <ion-card-header>
-        <ion-card-title>{{ character.name }}</ion-card-title>
-        <ion-card-subtitle>性别: {{ character.gender }}</ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <p><strong>外貌描述:</strong> {{ character.appearance }}</p>
-        <p><strong>性格描述:</strong> {{ character.personality }}</p>
-      </ion-card-content>
-    </ion-card>
-
-    <ion-button expand="full" (click)="startChat()" style="margin-top: 20px; --background: #ff69b4; --color: white;">
-      开始聊天
-    </ion-button>
-    <ion-button expand="full" (click)="restoreChat('chatId')" >
-      继续聊天
-    </ion-button>
-  </div>
-  <ng-template #notFound>
-    <h2>角色未找到</h2>
-    <p>您所请求的角色信息不存在。</p>
-  </ng-template>
-</ion-content>

novel-app/src/app/character-detail/character-detail.component.spec.ts

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

novel-app/src/app/character-detail/character-detail.component.ts

@@ -1,80 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { CharacterService } from '../services/character.service';
-import { Character } from '../services/character.service';
-import { IonBackButton, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, 
-  IonCardTitle, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
-import { CommonModule } from '@angular/common';
-import { ChatPanelOptions, FmodeChat, openChatPanelModal } from 'fmode-ng';
-
-@Component({
-  selector: 'app-character-detail',
-  templateUrl: './character-detail.component.html',
-  styleUrls: ['./character-detail.component.scss'],
-  standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonBackButton, IonButtons,
-    IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, CommonModule, IonButton]
-})
-export class CharacterDetailComponent implements OnInit {
-  character!: Character;
-  characterNotFound: boolean = false;
-  
-
-  constructor(private route: ActivatedRoute, private characterService: CharacterService, private router: Router, private modalCtrl: ModalController) {}
-
-  ngOnInit() {
-    const characterId = this.route.snapshot.paramMap.get('id');
-    if (characterId) {
-      this.characterService.getCharacterById(characterId).subscribe(character => {
-        if (character) {
-          this.character = character;
-          this.characterNotFound = false;
-        } else {
-          this.characterNotFound = true;
-          console.error('角色未找到');
-        }
-      });
-    }
-  }
-
-  startChat() {
-    const chatOptions: ChatPanelOptions = {
-      roleId: "2DXJkRsjXK",
-      onChatInit: (chat: FmodeChat) => {
-        // 设置智能体的名字为角色名称
-        chat.role.set("name", this.character.name);
-        let newAvatar = "https://nova-cloud.obs.cn-south-1.myhuaweicloud.com/storage/aigc/imagine/U6UU36FsN8-0.png?x-image-process=image/resize,m_fixed,w_300"
-        chat.role.set("avatar", newAvatar); // 设置角色头像
-        chat.role.set("desc", "新的角色简介");
-        console.log(chat.role?.toJSON()) // 查看角色数据，内部属性均可覆盖
-        
-        // 决赛设定
-        chat.role.set("prompt", `你的名字是${this.character.name},你将作为${this.character.name}和用户聊天，
-          你的性别是${this.character.gender},你有着${this.character.appearance}外貌，你的性格是${this.character.personality},
-          请你在聊天过程中,按照你的人物设定和用户进行对话,并且当你准备好了时,请开始聊天`);
-        
-        // 设置角色的外貌特征和性格特点
-        chat.role.set("appearance", this.character.appearance); 
-        chat.role.set("personality", this.character.personality);
-        
-        // 设置角色头像
-        chat.role.set("avatar", this.character.avatar);
-      },
-      onChatSaved: (chat: FmodeChat) => {
-        console.log("onChatSaved",chat,chat?.chatSession,chat?.chatSession?.id);
-        // 在后端设置一张表，记录当前用户、对话角色，还有chatId为chat?.chatSession?.id
-        // 页面中加载历史对话表，循环时候，调用restoreChat()将存储的chatId传入，即可实现
-      },
-    };
-    openChatPanelModal(this.modalCtrl, chatOptions);
-  }
-
-    restoreChat(chatId:string){
-      let options:ChatPanelOptions = {
-        roleId:"2DXJkRsjXK",
-        chatId:chatId
-      }
-      openChatPanelModal(this.modalCtrl,options)
-    }
-
-}

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

@@ -1,48 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/tabs/character"></ion-back-button>
-    </ion-buttons>
-    <ion-title>角色管理</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- 空状态显示 -->
-  <div class="empty-state" *ngIf="characters.length === 0">
-    <ion-icon name="people-outline" class="empty-icon"></ion-icon>
-    <h2>暂无角色</h2>
-    <p>点击下方按钮创建新角色</p>
-    <ion-button 
-      expand="block" 
-      style="--background: #ff69b4"
-      (click)="createNewCharacter()">
-      创建角色
-    </ion-button>
-  </div>
-
-  <!-- 角色列表 -->
-  <ion-grid *ngIf="characters.length > 0">
-    <ion-row>
-      <ion-col size="6" size-md="4" size-lg="3" *ngFor="let character of characters">
-        <ion-card class="character-card" (click)="navigateToDetail(character.id)">
-          <img [src]="character.avatar" [alt]="character.name">
-          <ion-card-header>
-            <ion-card-title>{{ character.name }}</ion-card-title>
-          </ion-card-header>
-        </ion-card>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
-
-  <!-- 底部创建按钮 -->
-  <div class="bottom-button" *ngIf="characters.length > 0">
-    <ion-button 
-      expand="block" 
-      style="--background: #ff69b4" 
-      (click)="createNewCharacter()"
-      class="create-button">
-      创建角色
-    </ion-button>
-  </div>
-</ion-content>

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

@@ -1,71 +0,0 @@
-.empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 2rem;
-    text-align: center;
-  
-    .empty-icon {
-      font-size: 6rem;
-      color: var(--ion-color-medium);
-      margin-bottom: 1rem;
-    }
-  
-    h2 {
-      color: var(--ion-color-dark);
-      margin-bottom: 0.5rem;
-    }
-  
-    p {
-      color: var(--ion-color-medium);
-      margin-bottom: 2rem;
-    }
-  
-    ion-button {
-      max-width: 200px;
-    }
-  }
-  
-  .character-card {
-    margin: 8px;
-    cursor: pointer;
-    transition: transform 0.2s;
-  
-    &:hover {
-      transform: translateY(-4px);
-    }
-  
-    img {
-      width: 100%;
-      height: 200px;
-      object-fit: cover;
-    }
-  
-    ion-card-header {
-      padding: 12px;
-    }
-  
-    ion-card-title {
-      font-size: 1.1rem;
-      text-align: center;
-    }
-  }
-  
-  .bottom-button {
-    position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 200px;
-    z-index: 999;
-  }
-  
-  .create-button {
-    --background: #ff69b4;  // 粉色
-    --background-hover: #ff1493;  // 深粉色
-    --border-radius: 20px;
-    font-weight: bold;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  } 

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

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

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

@@ -1,41 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { Router } from '@angular/router';
-import { CharacterService } from '../services/character.service';
-import type { Character } from '../services/character.service';
-
-
-@Component({
-  selector: 'app-character',
-  templateUrl: './character.page.html',
-  styleUrls: ['./character.page.scss'],
-  standalone: true,
-  imports: [CommonModule, IonicModule]
-})
-export class CharacterPage implements OnInit {
-  characters: Character[] = [];
-
-  constructor(
-    private router: Router,
-    private characterService: CharacterService
-  ) { }
-
-  ngOnInit() {
-    this.loadCharacters();
-  }
-
-  loadCharacters() {
-    this.characterService.characters$.subscribe(chars => {
-      this.characters = chars;
-    });
-  }
-
-  createNewCharacter() {
-    this.router.navigate(['/character-creator']);
-  }
-
-  navigateToDetail(characterId: string) {
-    this.router.navigate(['/character-detail', characterId]); // 确保这里的 characterId 是有效的
-  }
-}

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

@@ -1,6 +1,6 @@
 /* 全局样式 */
 ion-app {
-    background: url('/assets/images/background-image1.jpg') no-repeat center center fixed;
+    background: url('/assets/images/background-image6.jpg') no-repeat center center fixed;
     /* 添加背景图片 */
     background-size: cover;
     /* 背景图片覆盖整个内容区域 */

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

@@ -1,16 +1,6 @@
 <ion-header>
   <ion-toolbar class="header-toolbar">
-    <ion-buttons slot="start">
-      <ion-button (click)="goBack()">
-        <ion-icon name="arrow-back"></ion-icon>
-      </ion-button>
-    </ion-buttons>
     <ion-title>个人中心</ion-title>
-    <ion-buttons slot="end">
-      <ion-button>
-        <ion-icon name="settings"></ion-icon>
-      </ion-button>
-    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 

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

@@ -8,13 +8,6 @@ ion-app {
   padding: 0;
 }
 
-/* 保持大部分样式不变，只添加必要的样式 */
-.buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
 .modal-content {
   --background: #fff;
   padding: 20px;

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

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
-import { IonButton, IonButtons, IonHeader, IonToolbar, IonIcon, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList } from '@ionic/angular/standalone';
+import { IonButton, IonHeader, IonToolbar, IonIcon, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-person',
   templateUrl: 'person.page.html',
   styleUrls: ['person.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, IonTitle,
+  imports: [IonHeader, IonToolbar, IonButton, IonIcon, IonTitle,
     IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList
   ]
 })

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

@@ -1,5 +1,10 @@
+<ion-header>
+  <ion-toolbar class="header-toolbar">
+    <ion-title>智能体</ion-title>
+  </ion-toolbar>
+</ion-header>
 
-<ion-content>
+<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;">
   <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>

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

@@ -1,3 +1,26 @@
+/* 全局样式 */
+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;
+}
+
 .searchbar-container {
   display: flex; /* 使用 Flexbox 布局 */
   align-items: center; /* 垂直居中 */

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

@@ -1,8 +1,7 @@
 import { CloudUser } from './../lib/ncloud';
 import { FmodeChat, FmodeChatMessage, openChatPanelModal, ChatPanelOptions } from 'fmode-ng';
 import { Component } from '@angular/core';
-import { IonCardHeader, IonHeader, IonToolbar, IonTitle, IonContent, IonTabButton, IonSearchbar, IonLabel, IonItem, IonList, NavController, IonCard, IonCardTitle, IonCardSubtitle, IonCardContent, IonThumbnail, IonFab, IonFabButton } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
+import { IonCardHeader, IonHeader, IonToolbar, IonTitle, IonContent,  IonItem, IonList, IonCard, IonCardTitle, IonCardSubtitle, IonCardContent, IonThumbnail, IonFab, IonFabButton, } from '@ionic/angular/standalone';
 import { IonButton } from '@ionic/angular/standalone';
 import { IonIcon } from '@ionic/angular/standalone';
 import { Router } from '@angular/router';
@@ -24,8 +23,8 @@ addIcons({ documentText, chatbubbles, person, calendar, newspaper,
   styleUrls: ['tab1.page.scss'],
   standalone: true,
   imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent, IonTabButton, IonButton,
-    IonIcon,IonSearchbar,IonLabel,IonItem,IonList,CommonModule,IonCard,IonCardHeader,IonCardTitle,IonCardSubtitle,
+    IonHeader, IonToolbar, IonTitle, IonContent, IonButton,
+    IonIcon,IonItem,IonList,CommonModule,IonCard,IonCardHeader,IonCardTitle,IonCardSubtitle,
     IonCardContent, IonThumbnail, IonFab,IonFabButton,IonIcon,IonRefresher,IonRefresherContent
 
   ],

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

@@ -1,6 +1,6 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="custom-toolbar">
-
+    
     <div class="search-bar" >
       <ion-searchbar 
       placeholder="搜索" 
@@ -8,7 +8,7 @@
       (ionInput)="searchProducts($event)">
       </ion-searchbar>
     </div>
-
+    
     @if(!searchTerm){
     <div class="header">
       <ion-card-header>
@@ -98,3 +98,4 @@
 
 
 </ion-content>
+

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

@@ -1,5 +1,18 @@
-// @import '@fortawesome/fontawesome-free/css/all.min.css'; // 字体图标
-// @import 'highlight.js/scss/monokai.scss'; // 代码高亮 - monokai主题
+/* 全局样式 */
+ion-app {
+  background: url('/assets/images/background-image1.jpg') no-repeat center center fixed; /* 设置背景图片 */
+  background-size: cover; /* 使背景图片覆盖整个区域 */
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+/* 其他样式 */
+.modal-content {
+  --background: #fff; /* 模态框内容背景 */
+  padding: 20px;
+}
+
 .custom-toolbar {
   --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
   display: flex; /* 使用 Flexbox 布局 */
@@ -8,12 +21,11 @@
   padding: 0; /* 去掉默认内边距 */
 }
 
-
 .search-bar {
-    padding: 10px;
-    text-align: center;
-  }
-  
+  padding: 10px;
+  text-align: center;
+}
+
 .custom-searchbar {
   --background: #ffffff;
   --border-radius: 20px;
@@ -22,18 +34,14 @@
 
 .header {
   height: 80px;
-  margin-top:-10px
+  margin-top: -10px;
 }
+
 .knowledge {
   height: 100%;
   width: 100%;
 }
 
-.content {
-  margin-top: -5px;
-  -height: 100%;
-  width: 100%;
-}
 ion-card-header {
   font-size: 1.5em;
   height: auto;
@@ -41,14 +49,13 @@ ion-card-header {
 
 ion-card {
   width: 100%;
-  height: 100%;
+  height: auto; /* 调整高度以适应内容 */
   margin: 0;
   padding: 0;
   border-radius: 0;
   box-shadow: none;
 }
 
-
 ion-card-content {
   font-size: 1.2em;
   width: 100%;
@@ -61,27 +68,17 @@ ion-segment-view {
 }
 
 ion-segment-content {
-  // display: flex;
   align-items: center;
   justify-content: center;
 }
 
-// ion-segment-content:nth-of-type(5) {
-//   background: lightpink;
-// }
-// ion-segment-content:nth-of-type(2) {
-//   background: lightblue;
-// }
-// ion-segment-content:nth-of-type(3) {
-//   background: lightgreen;
-// }
-
-.share-modal{
+.share-modal {
   --height: 30vh;
   --width: 100%;
   --offset-y: 0; /* 确保模态窗口从底部弹出 */
 }
-// 底部弹窗(modal)样式
+
+/* 底部弹窗(modal)样式 */
 .bottom-modal {
   --height: 100vh;
   --width: 100%;
@@ -102,117 +99,4 @@ ion-segment-content {
     object-fit: cover;
     border-radius: 8px;
   }
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// .tabs {
-//   display: flex;
-//   justify-content: space-around;
-//   padding: 0px 0;
-//   background-color: #f8f8f8;
-// }
-
-// .tabs ion-button {
-//   flex: 1;
-//   text-align: center;
-//   // border: none;
-//   --background: transparent;
-//   --color-checked: #4caf50;
-//   --indicator-color: #4caf50;
-//   --color: #666;
-//   --color-focused: #4caf50;
-//   --color-hover: #4caf50;
-//   --color-activated: #4caf50;
-//   --color-selected: #4caf50;
-// }
-
-// .tab {
-//   cursor: pointer;
-//   padding: 0px 0px;
-// }
-// .tab.active {
-//   color: rgb(81, 255, 0);
-//   background-color: rgb(255, 255, 255);
-// }
-
-//
-
-// 轮播图区域
-.carousel-container {
-  position: relative;
-  max-width: 800px;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-.carousel {
-  display: flex;
-  transition: transform 0.5s ease-in-out;
-}
-
-.slide {
-  min-width: 100%;
-}
-
-.slide img {
-  width: 100%;
-  height: auto;
-}
-
-.prev, .next {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  padding: 16px;
-  border: none;
-  cursor: pointer;
-}
-
-.prev {
-  left: 0;
-}
-
-.next {
-  right: 0;
-}
-
-.dots {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  text-align: center;
-}
-
-.dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin: 0 5px;
-  background: #bbb;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.dot.active {
-  background: #717171;
-} 
-//
+}

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

@@ -1,6 +1,6 @@
 import { MarkdownPreviewModule } from 'fmode-ng';
 import { Component } from '@angular/core';
-import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton, IonFabList } from '@ionic/angular/standalone';
+import { ModalController, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonAvatar, IonButton, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard, IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton, IonFabList, IonBackButton } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { addIcons } from 'ionicons';
 import { airplane, bluetooth, call, wifi } from 'ionicons/icons';
@@ -24,12 +24,12 @@ addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalett
   styleUrls: ['tab2.page.scss'],
   standalone: true,
   imports: [
-    IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
-    IonLabel,IonItem,IonList,IonAvatar,ArticleCardComponent,CommonModule,IonButton,
+    IonHeader, IonToolbar, IonTitle, IonContent,
+    IonLabel, ArticleCardComponent, CommonModule, IonButton,
     IonSegment, IonSegmentButton,
-    IonSegmentContent,IonSegmentView,IonCardContent, IonCardTitle, IonCardHeader,IonCard,
-    IonModal,IonIcon, IonButtons, IonSearchbar, IonFab, IonFabButton,IonFabList,MarkdownPreviewModule
-  ]
+    IonSegmentContent, IonSegmentView, IonCardContent, IonCardTitle, IonCardHeader, IonCard,
+    IonModal, IonButtons, IonSearchbar, MarkdownPreviewModule
+]
 })
 
 export class Tab2Page {

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

@@ -1,11 +1,16 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="custom-toolbar">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="tabs/person"></ion-back-button>
+    </ion-buttons>
     <ion-title class="custom-title">
       我的
     </ion-title>
   </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-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
     <ion-refresher-content></ion-refresher-content>

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

@@ -1,3 +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 {
+  --background: transparent;
+  /* 设置为透明，以便背景从 ion-app 继承 */
+  padding: 16px;
+}
+
 .custom-toolbar {
   --background: rgba(255, 255, 255, 0.8); /* 使工具栏背景透明 */
   display: flex; /* 使用 Flexbox 布局 */
@@ -97,12 +120,7 @@ ion-card:hover {
   flex: 1; /* 使用户信息部分占据剩余空间 */
 }
 
-ion-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 68vh; /* 使内容区域高度为视口高度 */
-}
+
 
 .login-card {
   width: 94%; /* 可以根据需要调整宽度 */

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonRefresher, IonRefresherContent } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonRefresher, IonRefresherContent, IonBackButton, IonButtons } from '@ionic/angular/standalone';
 import { CloudUser } from '../lib/ncloud';
 import { openUserEditModal } from '../lib/user/modal-user-edit/modal-user-edit.component';
 import { openUserLoginModal } from '../lib/user/modal-user-login/modal-user-login.component';
@@ -13,7 +13,7 @@ import { Router } from '@angular/router';
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
     IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
-    IonRefresher,IonRefresherContent
+    IonRefresher,IonRefresherContent, IonBackButton, IonButtons
   ],
 })
 export class Tab4Page {

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

@@ -5,14 +5,16 @@
       <ion-label>首页</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="character" (click)="goPage('/tab1')">
+    <ion-tab-button tab="tab1" (click)="goPage('/tabs/tab1')">
       <ion-icon aria-hidden="true" name="chatbox"></ion-icon>
       <ion-label>角色</ion-label>
     </ion-tab-button>
-    <ion-tab-button tab="person" (click)="goPage('/tab2')">
-      <ion-icon aria-hidden="true" name="person"></ion-icon>
+
+    <ion-tab-button tab="tab2" (click)="goPage('tabs/tab2')">
+      <ion-icon aria-hidden="true" name="search"></ion-icon>
       <ion-label>生成管理</ion-label>
     </ion-tab-button>
+
     <ion-tab-button tab="person" (click)="goPage('/tabs/person')">
       <ion-icon aria-hidden="true" name="person"></ion-icon>
       <ion-label>个人</ion-label>

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

@@ -2,7 +2,7 @@ import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, NavController } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { home, chatbox, person } from 'ionicons/icons';
+import { home, chatbox, person, search } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -18,7 +18,7 @@ export class TabsPage {
     private navCtrl: NavController,
     private router: Router
   ) {
-    addIcons({ home, chatbox, person });
+    addIcons({ home, chatbox, person, search });
   }
   goPage(page: string) {
     this.router.navigateByUrl(page)

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

@@ -17,8 +17,14 @@ export const routes: Routes = [
           import('../person/person.page').then((m) => m.PersonPage),
       },
       {
-        path: 'character',
-        loadComponent: () => import('../character/character.page').then(m => m.CharacterPage)
+        path: 'tab1',
+        loadComponent: () =>
+          import('../tab1/tab1.page').then((m) => m.Tab1Page),
+      },
+      {
+        path: 'tab2',
+        loadComponent: () =>
+          import('../tab2/tab2.page').then((m) => m.Tab2Page),
       },
       {
         path: 'story-generator',