refactor(person): 重构个人页面布局和样式

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

@@ -13,57 +13,32 @@
   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>
   </div>
-  <div>
+  <div style="height: 85%; flex-direction: column; z-index: 1000; overflow-y: auto; max-height: 100%;">
     <ion-card>
       <ion-list>
         <ion-item>
           <p style="width: 60px; font-weight: bolder;">名称：</p>
-          <!-- <ion-input label="输入你想了解的科普信息" placeholder="Enter text"></ion-input> -->
           <ion-input  [value]="name" placeholder="输入名称" (ionInput)="nameInput($event)"></ion-input>
         </ion-item>
-        <!-- <ion-item>
-          <p style="width: 60px; font-weight: bolder;">年龄：</p>
-          <ion-input  [value]="age" placeholder="输入年龄" (ionInput)="ageInput($event)"></ion-input>
-        </ion-item>
-        <ion-item>
-          <p style="width: 60px;  font-weight: bolder;">性别：</p>
-          <ion-input  [value]="gender" placeholder="输入种族" (ionInput)="genderChange($event)"></ion-input>
-        
-            
+     
           
-        </ion-item> -->
+        
         <ion-item style="height: auto;">
             <p style="width:120px;font-weight: bolder;">设定描述：</p>
             <ion-textarea [value]="desc" placeholder="示例：" (ionInput)="descInput($event)" autoGrow="true"></ion-textarea> 
         </ion-item>
-        
-        
-        <!-- <ion-item>
-          <ion-label position="stacked">上传角色图片</ion-label>
-          <div class="image-upload" (click)="fileInput.click()">
-            <input type="file" #fileInput (change)="onFileSelected($event)" accept="image/*" style="display: none;" />
-            <div class="image-preview" *ngIf="selectedImage">
-              <img style="height:200px;" [src]="selectedImage" alt="角色图片" />
-            </div>
-            <div class="upload-text" *ngIf="!selectedImage">
-              点击上传图片
-            </div>
- 
-          </div>
-        </ion-item> -->
       </ion-list>
-
     </ion-card>
-  </div>
+ 
   <comp-uploader-hwobs [url]="uploadUrl" (onUrlChange)="onUrlChange($event)"></comp-uploader-hwobs>
         @if(uploadUrl){
          <!-- <span>已上传：{{uploadUrl}}</span> -->
          <img [src]="uploadUrl">
        }
   <ion-button (click)="createAgent()" expand="block" color="primary" >创建智能体</ion-button>
-  
+</div>
 
 </ion-content>

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

@@ -12,7 +12,7 @@
 
     <!-- 保存作品按钮 -->
     <ion-buttons slot="end">
-      <ion-button color="primary">保存作品</ion-button>
+      <!-- <ion-button color="primary">保存作品</ion-button> -->
     </ion-buttons>
   </ion-toolbar>
 </ion-header>

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

@@ -12,7 +12,7 @@ import { AiPolishModalComponent } from '../ai-polish-modal/ai-polish-modal.compo
 import { AiContinueModalComponent } from '../ai-continue-modal/ai-continue-modal.component';
 import { OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { CloudObject, CloudQuery } from '../lib/ncloud';
+import { CloudObject, CloudQuery,CloudUser } from '../lib/ncloud';
 addIcons({ chevronForward });
 
 @Component({
@@ -42,8 +42,9 @@ export class ChapterGeneratorPage implements OnInit {
 
   constructor(private modalCtrl: ModalController, private route: ActivatedRoute) {  
     addIcons({ add });
+    this.currentUser = new CloudUser();
   }
-
+  currentUser: CloudUser;
   story:CloudObject|undefined
   async loadStory(){
     let query = new CloudQuery("Book");
@@ -52,8 +53,12 @@ export class ChapterGeneratorPage implements OnInit {
     if(!this.story?.id){
       this.story = new CloudObject("Book");
       this.story.set({
+        user: this.currentUser.toPointer(),
+        username: this.currentUser.data["username"],
+
         title:this.title,
-        desc:this.description
+        desc:this.description,
+        
       })
     }
     console.log(this.story)
@@ -160,6 +165,8 @@ export class ChapterGeneratorPage implements OnInit {
       story:this.story?.toPointer()
     })
     storyChapter.save();
+    console.log("保存成功");
+    
   }
 
   insertTextIntoChapterEnd(text: string) {

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

@@ -38,7 +38,7 @@
         <div class="icon-wrapper light-pink">
           <img src="assets/images/story-generator-icon.png" alt="长篇生成">
         </div>
-        <span>长篇生成</span>
+        <span>长篇创作</span>
       </div>
     </ion-button>
 
@@ -102,7 +102,7 @@
 
   <!-- 悬浮按钮 -->
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
-    <ion-fab-button (click)="navigateTo('/tab1')" class="floating-button">
+    <ion-fab-button (click)="navigateTo('/tabs/tab1')" class="floating-button">
       <img src="assets/images/floating-button.gif" alt="悬浮按钮">
     </ion-fab-button>
   </ion-fab>

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

@@ -3,7 +3,7 @@ import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule, PopoverController } from '@ionic/angular';
 import { Router } from '@angular/router';
-import { CloudObject, CloudQuery } from '../lib/ncloud';
+import { CloudObject, CloudQuery,CloudUser } from '../lib/ncloud';
 
 
 interface Story {
@@ -24,7 +24,11 @@ export class HomePage implements AfterViewInit {
   stories: Story[] = [];
   storyList:Array<CloudObject> = []
   async loadStoryList(){
+    let user = new CloudUser();
+    
+    
     let query = new CloudQuery("Book")
+    query.equalTo("user",user?.id)
     this.storyList = await query.find();
   }
   goStory(story:CloudObject){
@@ -184,11 +188,11 @@ export class HomePage implements AfterViewInit {
     <ion-list>
       <ion-item button (click)="select('long')">
         <ion-icon name="book-outline" slot="start"></ion-icon>
-        <ion-label>创建长篇</ion-label>
+        <ion-label>长篇创作</ion-label>
       </ion-item>
       <ion-item button (click)="select('short')">
         <ion-icon name="document-text-outline" slot="start"></ion-icon>
-        <ion-label>创建短篇</ion-label>
+        <ion-label>短篇生成</ion-label>
       </ion-item>
     </ion-list>
   `,

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

@@ -5,26 +5,34 @@
 </ion-header>
 
 <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;">
+  
   <div class="profile-card">
-    <ion-card>
-      <div class="profile-card-content">
-        <div class="profile-pic-container">
-          <img src="../assets/images/avatar.jpg" alt="个人头像" class="profile-pic">
-        </div>
-        <div class="profile-info-container">
-          <h2>超级小猫</h2>
-          <p class="gender">性别: {{ gender }}</p>
-        </div>
-        <div class="navigate-button-container">
-          <ion-button fill="clear" class="navigate-button" (click)="navigateToTab4()">
-            <ion-icon name="chevron-forward"></ion-icon>
-          </ion-button>
-        </div>
+    <ion-list>
+      <ion-card *ngIf="currentUser?.id" class="user-card">
+        <ion-card-header class="card-header">
+          <div class="user-info">
+            <img [src]="currentUser?.get('avatar') || 'https://app.fmode.cn/dev/jxnu/storage/20241229/32524-494c4c9916deb49ffddd3fd8333fa15e.jpg'" class="avatar">
+            <div class="user-details-container">
+              <ion-card-title class="username">账号：{{ currentUser?.get("username") }}</ion-card-title>
+            </div>
+            <div class="navigate-button-container">
+              <ion-button fill="clear" class="navigate-button" (click)="navigateToTab4()">
+                <ion-icon name="chevron-forward"></ion-icon>
+              </ion-button>
+            </div>
+          </div>
+        </ion-card-header>
+      </ion-card>
+    
+      <div *ngIf="!currentUser?.id" class="navigate-button-container">
+        <ion-button fill="clear" class="navigate-button" (click)="navigateToTab4()">
+          <ion-icon name="chevron-forward"></ion-icon>
+        </ion-button>
       </div>
-    </ion-card>
+    </ion-list>
   </div>
 
-  <ion-card>
+  <!-- <ion-card>
     <ion-card-header>
       <ion-card-title>个性签名</ion-card-title>
     </ion-card-header>
@@ -37,7 +45,7 @@
         class="signature-input" 
       />
     </ion-card-content>
-  </ion-card>
+  </ion-card> -->
 
   <ion-card>
     <ion-card-header>
@@ -49,14 +57,14 @@
           <img src="assets/images/setup.png" alt="设置" class="icon">
           设置
         </ion-item>
-        <ion-item>
+        <!-- <ion-item>
           <img src="assets/images/modify.png" alt="修改资料" class="icon">
           修改资料
         </ion-item>
         <ion-item>
           <img src="assets/images/logout.png" alt="注销账号" class="icon">
           注销账号
-        </ion-item>
+        </ion-item> -->
         <ion-item>
           <img src="assets/images/registration agreement.png" alt="用户注册协议" class="icon">
           用户注册协议

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

@@ -7,7 +7,6 @@ ion-app {
   margin: 0;
   padding: 0;
 }
-
 .modal-content {
   --background: #fff;
   padding: 20px;
@@ -130,4 +129,34 @@ ion-item {
 .signature-input::placeholder {
   color: #aaa; /* 提示文本颜色 */
   opacity: 1; /* 保持提示文本的透明度 */
-}
+}
+.user-info {
+   display: flex; /* 使用 Flexbox 布局 */
+   align-items: center; /* 垂直居中对齐 */
+   margin: 16px; /* 外边距 */
+  }
+  
+  .avatar {
+   width: 60px; /* 头像宽度 */
+   height: 60px; /* 头像高度 */
+   border-radius: 50%; /* 圆形头像 */
+  margin-right: 16px; /* 头像与文本的间距 */
+   object-fit: cover; /* 确保头像不变形 */
+  }
+  
+  .user-details-container {
+   flex-grow: 1; /* 使用户信息区域占据剩余空间 */
+  }
+  
+  .username {
+   font-size: 1.2em; /* 账号字体大小 */
+   font-weight: bold; /* 加粗 */
+   color: #333; /* 账号颜色 */
+   margin: 0; /* 去掉默认外边距 */
+  }
+  
+  .user-details {
+   font-size: 0.9em; /* 用户详情字体大小 */
+   color: #555; /* 用户详情颜色 */
+   margin: 0; /* 去掉默认外边距 */
+  }

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

@@ -1,18 +1,22 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { NavController } from '@ionic/angular';
-import { IonButton, 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, IonCardSubtitle } from '@ionic/angular/standalone';
+import { CloudUser } from './../lib/ncloud';
 @Component({
   selector: 'app-person',
   templateUrl: 'person.page.html',
   styleUrls: ['person.page.scss'],
   standalone: true,
   imports: [IonHeader, IonToolbar, IonButton, IonIcon, IonTitle,
-    IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList
+    IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardContent, IonItem, IonList,IonCardSubtitle,CommonModule,IonList
   ]
 })
 export class PersonPage {
-  constructor(private navCtrl: NavController) {}
+  currentUser: CloudUser | undefined;
+  constructor(private navCtrl: NavController) {
+    this.currentUser = new CloudUser();
+  }
 
   gender: string = '女'; // 默认性别
   signature: string = ''; // 个性签名

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

@@ -25,7 +25,7 @@
               </ion-thumbnail>
               <div class="doctor-info" (click)="openInquiry(doctor)">
                 <p>{{doctor.get("username")}}</p>
-                <h3>{{ doctor.get('name') }}({{ doctor.get('age') }}岁)</h3>
+                <h3>{{ doctor.get('name') }}</h3>
                 <p>{{ doctor.get('desc') }}</p>
                 
               </div>
@@ -48,8 +48,8 @@
             <img [src]="doctor.get('avatar')" [alt]="doctor.get('name')" />
           </ion-thumbnail>
           <div class="doctor-info" (click)="openInquiry(doctor)">
-            <h3>{{ doctor.get('name') }}({{ doctor.get('age') }}岁)</h3>
-            <p>{{ doctor.get('Desc') }},{{ doctor.get('title') }},{{ doctor.get('depart')?.name }}</p>
+            <h3>{{ doctor.get('name') }}</h3>
+            <p>{{ doctor.get('desc') }}</p>
            
           </div>
           <ion-button ios="logo-apple" size="small" color="danger" (click)="deleteAgent(doctor)" slot="end">删除</ion-button>

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

@@ -3,45 +3,40 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="tabs/person"></ion-back-button>
     </ion-buttons>
-    <ion-title class="custom-title">
-      我的
-    </ion-title>
+    <ion-title class="custom-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;">
 
+<ion-content [fullscreen]="true" class="ion-padding"
+  style="background-image: url('https://app.fmode.cn/dev/jxnu/storage/20241229/3327-77094b36acaf2edd0548c3779f1001e9380193f7.png'); 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>
- 
-  <ion-card>
-       
-      <ion-card-header class="card-header">
-        <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
-        <div class="user-info">
-            <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
-            <ion-card-subtitle>
-                姓名: {{currentUser?.get("realname") || "-"}} 
-                性别: {{currentUser?.get("gender") || "-"}} 
-                年龄: {{currentUser?.get("age") || "-"}}
-            </ion-card-subtitle>
-        </div>
+
+  <ion-card class="user-card">
+    <ion-card-header class="card-header">
+      <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/storage/20241229/32524-494c4c9916deb49ffddd3fd8333fa15e.jpg';" alt="图片加载失败" class="avatar" />
+      <div class="user-info">
+        <ion-card-title class="user-title">账号：{{currentUser?.get("username")}}</ion-card-title>
+        <ion-card-subtitle class="user-subtitle">
+          姓名: {{currentUser?.get("realname") || "-"}}
+          性别: {{currentUser?.get("gender") || "-"}}
+          年龄: {{currentUser?.get("age") || "-"}}
+        </ion-card-subtitle>
+      </div>
     </ion-card-header>
-      
-      <ion-card-content>
-      @if(!currentUser?.id){
-        <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
-        <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
-      }
-     @if(currentUser?.id){
-      <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
-      <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
-    }
+
+    <ion-card-content class="card-content">
+      <ng-container *ngIf="!currentUser?.id; else loggedIn">
+        <ion-button expand="block" (click)="signup()" color="success" class="action-button">注册</ion-button>
+        <ion-button expand="block" (click)="login()" color="success" class="action-button">登录</ion-button>
+      </ng-container>
+      <ng-template #loggedIn>
+        <ion-button expand="block" (click)="editUser()" color="success" class="action-button">编辑资料</ion-button>
+        <ion-button expand="block" (click)="logout()" color="medium" class="action-button">登出</ion-button>
+      </ng-template>
     </ion-card-content>
   </ion-card>
 
-
-
-</ion-content>
+</ion-content>

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

@@ -1,143 +1,92 @@
 /* 全局样式 */
+:host {
+  --page-padding: 16px;
+  --primary-color: #ec9811;
+  --card-border-radius: 16px;
+  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
 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 布局 */
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
-  padding: 0; /* 去掉默认内边距 */
+  --background: rgba(0, 0, 0, 0.7); /* 深色背景以匹配黑夜主题 */
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 较浅的边框以增加对比 */
+  padding: 0 16px;
 }
 
 .custom-title {
-  font-size: 1.3em; /* 字体大小 */
-  font-weight: bold; /* 加粗 */
-  color: #000000; 
-  text-align: center; /* 文字居中对齐 */
-  margin: 0; /* 去掉默认外边距 */
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影效果 */
-  /* 添加其他美化效果 */
-  font-family: "微软雅黑"; /* 自定义字体 */
-}
-
-ion-card {
-  background-color: #e0f7fa; /* 浅蓝色背景，给人以清新和健康的感觉 */
-  border-radius: 10px; /* 圆角边框 */
-  padding: 20px; /* 内边距 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
-}
-
-ion-card-title {
-  font-size: 1.5em; /* 标题字体大小 */
-  font-weight: bold; /* 加粗 */
-  color: #00796b; /* 深绿色字体，象征健康 */
-  margin: 0; /* 去掉默认的外边距 */
+  font-size: 1.5em;
+  font-weight: bold;
+  color: #ffeb3b; /* 明亮的黄色，象征火焰 */
+  text-align: center;
 }
 
-ion-card-subtitle {
-  font-size: 1.2em; /* 副标题字体大小 */
-  color: #004d40; /* 更深的绿色字体 */
-  margin-top: 5px; /* 顶部外边距 */
+/* 用户卡片样式 */
+.user-card {
+  margin: 20px 0;
+  border-radius: 15px;
+  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色，增加深度 */
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* 更深的阴影效果 */
+  transition: transform 0.3s ease-in-out;
 }
 
-ion-card:hover {
-  background-color: #b2ebf2; /* 悬停时的背景色变化 */
-  transition: background-color 0.3s; /* 背景色变化的过渡效果 */
-}
-.memo-card {
-  background-color: #e0f7fa; /* 浅蓝色背景，给人以清新和健康的感觉 */
-  border-radius: 10px; /* 圆角边框 */
-  padding: 20px; /* 内边距 */
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
+.user-card:hover {
+  transform: translateY(-5px);
 }
 
-.memo-title {
-  font-size: 1.8em; /* 标题字体大小 */
-  font-weight: bold; /* 加粗 */
-  color: #00796b; /* 深绿色字体，象征健康 */
-  margin: 15px 0; /* 顶部和底部外边距 */
-}
-
-.memo-description {
-  font-size: 1.1em; /* 描述字体大小 */
-  color: #004d40; /* 更深的绿色字体 */
-  margin-bottom: 20px; /* 底部外边距 */
-}
-
-.tag-list {
-  list-style-type: none; /* 去掉默认的列表样式 */
-  padding: 0; /* 去掉内边距 */
-}
-
-.tag-item {
-  background-color: #b2ebf2; /* 标签背景色 */
-  color: #00796b; /* 标签字体颜色 */
-  border-radius: 5px; /* 标签圆角 */
-  padding: 10px; /* 标签内边距 */
-  margin: 5px 0; /* 标签外边距 */
-  transition: background-color 0.3s; /* 背景色变化的过渡效果 */
-  cursor: pointer; /* 鼠标悬停时显示为可点击 */
-}
-
-.tag-item:hover {
-  background-color: #80deea; /* 悬停时的背景色变化 */
-}
 .card-header {
-  display: flex; /* 使用 Flexbox 布局 */
-  align-items: center; /* 垂直居中对齐 */
-  padding: 10px; /* 内边距 */
+  display: flex;
+  align-items: center;
+  padding: 15px;
 }
 
 .avatar {
-  width: 50px; /* 头像宽度 */
-  height: 50px; /* 头像高度 */
-  border-radius: 50%; /* 圆形头像 */
-  margin-right: 15px; /* 头像与文本之间的间距 */
-  object-fit: cover; /* 确保图片覆盖区域并保持比例 */
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  margin-right: 15px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 深色阴影 */
 }
 
 .user-info {
-  flex: 1; /* 使用户信息部分占据剩余空间 */
+  flex: 1;
 }
 
+.user-title {
+  font-size: 1.6em;
+  font-weight: bold;
+  color: #ffeb3b; /* 明亮的黄色 */
+}
 
-
-.login-card {
-  width: 94%; /* 可以根据需要调整宽度 */
-  max-width: 400px; /* 设置最大宽度以避免过宽 */
-  text-align: center; /* 文本居中 */
-  padding: 10px; /* 添加内边距 */
+.user-subtitle {
+  font-size: 1.2em;
+  color: #a5d6a7; /* 浅绿色，增加自然感 */
 }
 
-.image-container {
-  width: 100%; /* 图片容器宽度100% */
-  display: flex; /* 使用flex布局 */
-  justify-content: center; /* 水平居中 */
-  margin-top: 10px; /* 上方间距 */
+.card-content {
+  padding: 20px;
 }
 
-.responsive-image {
-  max-width: 80%; /* 最大宽度为容器宽度 */
-  height: auto; /* 高度自动 */
-  border-radius: 8px; /* 可选：添加圆角效果 */
+/* 按钮样式 */
+.action-button {
+  margin: 10px 0;
+  border-radius: 10px;
+  transition: background-color 0.3s, transform 0.2s;
+  background-color: rgba(255, 165, 0, 0.8); /* 橙色背景，象征火焰 */
+  color: white; /* 文字颜色为白色 */
 }
+
+.action-button:hover {
+  transform: translateY(-2px);
+  background-color: rgba(255, 165, 0, 1); /* 悬停时更亮的橙色 */
+}

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

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 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';
@@ -13,7 +14,7 @@ import { Router } from '@angular/router';
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
     IonCard,IonCardContent,IonButton,IonCardHeader,IonCardTitle,IonCardSubtitle,
-    IonRefresher,IonRefresherContent, IonBackButton, IonButtons
+    IonRefresher,IonRefresherContent, IonBackButton, IonButtons,CommonModule
   ],
 })
 export class Tab4Page {