Merge branch 'master' of http://git.fmode.cn:3000/lzy/S202226701025

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

@@ -41,14 +41,15 @@
 
     <!-- 推荐影视剧列表 -->
     <section>
-      <ion-card>
+      <ion-card class="recommend">
         <ion-card-header>
           <ion-card-title>为您推荐</ion-card-title>
         </ion-card-header>
         <ion-card-content>
-          <ion-button (click)="sendMessage()" expand="block">推荐生成</ion-button>
+          <ion-button (click)="sendMessage()" expand="block" [disabled]="isLoading">推荐生成</ion-button>
+          <ion-spinner *ngIf="isLoading" slot="start"></ion-spinner> <!-- 显示加载指示器 -->
           <ion-list>
-            <ion-item *ngFor="let film of filmList">
+            <ion-item class="re" *ngFor="let film of filmList.slice().reverse()">
               <ion-label>
                 <h2>{{ film.get('title') }}</h2>
                 <p>题材: {{ film.get('genre') }}</p>
@@ -61,34 +62,3 @@
       </ion-card>
     </section>
 </ion-content>
-
-
-
-
-
-
-
-
-    <!-- 底部推荐区 -->
-    <!-- <section>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>您可能也喜欢</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <ion-list>
-            <ion-item *ngFor="let similarMovie of similarMovies">
-              <ion-thumbnail slot="start">
-                <img [src]="similarMovie.coverImage" alt="{{ similarMovie.title }} 封面">
-              </ion-thumbnail>
-              <ion-label>
-                <h2>{{ similarMovie.title }}</h2>
-                <p>评分: {{ similarMovie.rating }}</p>
-                <p>{{ similarMovie.description }}</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-card-content>
-      </ion-card>
-    </section> -->
-

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

@@ -1,13 +1,15 @@
 ion-title {
     flex: 1; // 使标题占据可用空间
     text-align: left; // 确保文字左对齐
-    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-left: 10px; // 左侧边距，可以根据需要调整
     margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 25px;
+    color: #003073;
   }
 
 ion-header {
-    background-color: #3880ff; // 设置头部背景色
-    color: white; // 设置头部文字颜色
+  background-color: #f5f6f9; // 设置头部背景色
   }
   
   /* 按钮样式 */
@@ -15,7 +17,7 @@ ion-button {
   --background: #036a99; /* 按钮背景色 */
   color: white; /* 按钮字体颜色 */
   --border-radius: 5px; /* 按钮圆角 */
-  font-size: 18px; /* 按钮字体大小 */
+  font-size: 20px; /* 按钮字体大小 */
   width: 100%;
 }
 
@@ -28,52 +30,45 @@ ion-icon {
     margin: 10px; // 设置卡片之间的间距
     border-radius: 10px; // 设置卡片圆角
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 添加阴影效果
+    
+  }
+
+ .recommend {
+    --ion-background-color: #f0f8ff;
   }
   
   ion-card-header {
-    background-color: #f0f0f0; // 设置卡片头部背景色
+    background-color: #f7e2e2; // 设置卡片头部背景色
   }
   
   ion-card-title {
-    font-size: 1.2em; // 设置卡片标题字体大小
+    font-size: 1.5em; // 设置卡片标题字体大小
     font-weight: bold; // 设置卡片标题字体加粗
   }
   
   ion-item {
     --ion-item-background: transparent; // 设置列表项背景透明
     margin: 5px 0; // 设置列表项上下间距
+
   }
-  
+
   ion-label {
     color: #333; // 设置标签文字颜色
+    margin-top: 0;
   }
   
-  h1 {
+  ion-label h1 {
     font-size: 1.6em; // 设置二级标题字体大小
     margin: 0; // 去掉默认外边距
     font-weight: bold;
   }
   
-  h3 {
-    font-size: 1.2em; // 设置段落字体大小
-    color: #666; // 设置段落文字颜色
-  }
-  
-  h2 {
-    font-size: 1em; // 设置二级标题字体大小
-    margin: 0; // 去掉默认外边距
-  }
-  
-  p {
-    font-size: 0.9em; // 设置段落字体大小
+  ion-label h3 {
+    font-size: 17px; // 设置段落字体大小
     color: #666; // 设置段落文字颜色
+    margin-top: 10px;
   }
-  
-  ion-thumbnail {
-    width: 100px; // 设置封面图宽度
-    height: 150px; // 设置封面图高度
-  }
-  
+
   ion-avatar {
     border-radius: 50%; // 设置头像圆形
     width: 80px; // 设置头像宽度
@@ -82,4 +77,28 @@ ion-icon {
   
   ion-card-content {
     padding: 10px; // 设置卡片内容内边距
-  }
+  }
+
+.re{
+    border-bottom: 1px solid #dee2e6; /* 分割线颜色 */
+}
+
+  /* 推荐影视剧列表样式 */
+ion-list {
+  margin-top: 8px;
+}
+ 
+ion-list ion-item {
+  padding: 12px 0;
+  border-bottom: none; /* 移除分割线 */
+}
+ 
+ion-list ion-label h2 {
+  font-size: 18px; /* 电影标题字体大小 */
+  color: #343a40; /* 深灰色 */
+}
+ 
+ion-list ion-label p {
+  color: #6c757d; /* 灰色 */
+  font-size: 14px; /* 描述信息字体大小 */
+}

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, 
   IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
   IonItem, IonAvatar, IonLabel, IonList, IonThumbnail, 
-  IonIcon, IonButton, ModalController,
+  IonIcon, IonButton, ModalController, IonSpinner
 } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { CommonModule } from '@angular/common';
@@ -25,7 +25,7 @@ interface DialogueItem {
     IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
     IonIcon, IonButton,
     IonCard, IonCardHeader, IonCardTitle, IonCardContent, 
-    IonItem, IonAvatar, IonLabel, IonList, IonThumbnail,
+    IonItem, IonAvatar, IonLabel, IonList, IonThumbnail, IonSpinner
   ]
 })
 export class Tab2Page {
@@ -86,8 +86,13 @@ export class Tab2Page {
       });
     }
     
+    isLoading: boolean = false; // 定义加载状态属性
+
     sendMessage() {
       console.log("create");
+
+      this.isLoading = true; // 开始加载
+      this.isComplete = false; // 重置完成状态
     
       let dialogues = this.chatList.map(chat => {
         const dialogueArray = chat.get('dialogue');
@@ -95,9 +100,9 @@ export class Tab2Page {
       }).join('\n');
     
       let PromptTemplate = `
-      请根据以下的用户聊天记录生成该用户的影视剧推荐列表。
-    
-      ${dialogues}
+      请根据以下的用户聊天记录和用户画像生成该用户的影视剧推荐列表。
+      聊天记录：${dialogues}，
+      用户画像：${this.currentUser.get("imagery")}。
     
       请生成推荐列表，包括剧名、题材、评分和描述。
       严格按照下面的格式生成：
@@ -118,6 +123,7 @@ export class Tab2Page {
     
         if (message?.complete) {
           this.isComplete = true;
+          this.isLoading = false; // 完成加载
     
           // 假设 message.content 是自然语言文本而不是 JSON
           try {
@@ -129,7 +135,18 @@ export class Tab2Page {
     
             // 遍历推荐列表并保存到 FilmRecommendation 表
             for (const rec of recommendations) {
+              // 检查是否已存在相同剧名的推荐
+              let query = new CloudQuery("FilmRecommendation");
+              query.equalTo("user", currentUser.toPointer()); // 只查询当前用户的记录
+              query.equalTo("title", rec.title); // 检查剧名是否相同
+
+              const existingRecommendations = await query.find();
+
+              if (existingRecommendations.length === 0) {
+              // 如果没有相同剧名的记录，保存新的推荐
+              
               const recommendation = new CloudObject("FilmRecommendation");
+
               recommendation.set({
                 user: currentUser.toPointer(), // 设置用户指针
                 title: rec.title,
@@ -144,6 +161,9 @@ export class Tab2Page {
               } catch (error) {
                 console.error('保存推荐失败:', error);
               }
+            } else {
+              console.log(`推荐已存在，剧名: ${rec.title}`);
+            }
             }
           } catch (error) {
             console.error('解析推荐内容失败:', error);

FilmDraw-app/src/app/tab3/tab3.page.scss

@@ -1,18 +1,18 @@
 // 定义颜色变量
 $light-blue: #e0f7fa;
-$blue: #77a0cc;
+$blue: #93b8e0;
 $dark-blue: #587fb6;
 $text-color: #333;
 
 ion-title {
   flex: 1; // 使标题占据可用空间
-  text-align: center; // 确保文字左对齐
-  font-size: 30px;
-  margin-left: 16px; // 左侧边距，可以根据需要调整
+  text-align: left; // 确保文字左对齐
+  margin-left: 10px; // 左侧边距，可以根据需要调整
   margin-top: 5px;
-  // font-family: 楷体;
-  // font-style: italic;
-  }
+  margin-bottom: 5px;
+  font-size: 25px;
+  color: #003073;
+}
 
 ion-header {
   background-color: #f5f7fc; // 设置头部背景色

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

@@ -9,8 +9,11 @@
   ion-title {
     flex: 1; // 使标题占据可用空间
     text-align: left; // 确保文字左对齐
-    margin-left: 16px; // 左侧边距，可以根据需要调整
+    margin-left: 10px; // 左侧边距，可以根据需要调整
     margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 25px;
+    color: #003073;
   }
   
   ion-header {