所有页面完善

paint-app/src/app/advise-page/advise-page.component.html

@@ -0,0 +1,37 @@
+<ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button (click)="gopage()">
+          <ion-icon name="chevron-back">
+          </ion-icon>返回
+        </ion-button>
+      </ion-buttons>
+      <ion-title>历史建议</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  
+  <ion-content>
+    <div class="video-list">
+        <div class="video-item" *ngFor="let advise of adviselist1">
+            <div class="video-preview">
+              <img [src]="advise.get('picture')" [alt]="advise.get('id')"/>
+            </div>
+            <div class="video-info">
+                <h3>绘画参考</h3>
+                <p style="font-size: 12px; color: #999;">想法:{{ advise.get('idea')}} </p>  
+                <p style="font-size: 12px; color: #999;">内容:{{  advise.get('content')}}  </p>   
+            </div>
+        </div>
+    </div>
+
+
+    <div class="video-list">
+        <div class="video-item1" *ngFor="let advise of adviselist2">
+            <div class="video-info">
+                <h3>建议参考</h3>
+                <p style="font-size: 12px; color: #999;">想法:{{ advise.get('idea')}} </p>  
+                <p style="font-size: 12px; color: #999;">内容:{{  advise.get('content')}}  </p>   
+            </div>
+        </div>
+    </div>
+  </ion-content>

paint-app/src/app/advise-page/advise-page.component.scss

@@ -0,0 +1,34 @@
+.video-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 16px;
+}
+
+.video-item {
+    width: calc(50% - 16px); /* 两列布局，减去间距 */
+    margin-bottom: 16px;
+    background-color: #fff; /* 背景色 */
+    border-radius: 8px; /* 圆角 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+    overflow: hidden; /* 防止内容溢出 */
+}
+
+.video-preview {
+    width: 100%;
+    height: auto; /* 自适应高度 */
+}
+
+.video-info {
+    padding: 8px;
+}
+
+
+.video-item1 {
+    width: 100%; /* 两列布局，减去间距 */
+    margin-bottom: 16px;
+    background-color: #fff; /* 背景色 */
+    border-radius: 8px; /* 圆角 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+    overflow: hidden; /* 防止内容溢出 */
+}

paint-app/src/app/advise-page/advise-page.component.spec.ts

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

paint-app/src/app/advise-page/advise-page.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import {chevronBack,star} from 'ionicons/icons';
+addIcons({chevronBack,star});
+import { addIcons } from 'ionicons';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { CloudUser } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-advise-page',
+  templateUrl: './advise-page.component.html',
+  styleUrls: ['./advise-page.component.scss'],
+  standalone: true,
+  imports:[IonHeader,IonIcon,IonButton,IonButtons,IonContent,IonTitle,IonToolbar,IonIcon,CommonModule],
+
+})
+export class AdvisePageComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+    this.loadadviselist();
+    this.loadadviselist2();
+  }
+  gopage(){
+    this.router.navigate(['/tabs/tab3'])
+  }
+
+adviselist1:Array<CloudObject> = []
+
+async loadadviselist(){
+  let currentUser = new CloudUser();
+  let query = new CloudQuery("padvise");
+  if(currentUser?.id){
+    await query.equalTo("user", currentUser.id);
+    await query.equalTo("type", "picture");
+  }
+  query.include('user');
+  this.adviselist1=await query.find();
+}
+
+
+adviselist2:Array<CloudObject> = []
+
+async loadadviselist2(){
+  let currentUser = new CloudUser();
+  let query = new CloudQuery("padvise");
+  if(currentUser?.id){
+    await query.equalTo("user", currentUser.id);
+    await query.equalTo("type", "text");
+  }
+  query.include('user');
+  this.adviselist2=await query.find();
+}
+}

paint-app/src/app/collect-page/collect-page.component.html

@@ -0,0 +1,26 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="gopage()">
+        <ion-icon name="chevron-back">
+        </ion-icon>返回
+      </ion-button>
+    </ion-buttons>
+    <ion-title>视频收藏</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="video-list">
+      <div class="video-item" *ngFor="let collect of collectList">
+          <div class="video-preview">
+            <img [src]="collect.get('video').url" [alt]="collect.get('video').title"/>
+          </div>
+          <div class="video-info">
+              <h3>{{ collect.get('video').title }}</h3>
+              <p style="font-size: 12px; color: #999;">评分:{{ collect.get('video').score }} 分</p>  
+              <p style="font-size: 12px; color: #999;">类型:{{ collect.get('video').type }}  </p>   
+          </div>
+      </div>
+  </div>
+</ion-content>

paint-app/src/app/collect-page/collect-page.component.scss

@@ -0,0 +1,24 @@
+.video-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 16px;
+}
+
+.video-item {
+    width: calc(50% - 16px); /* 两列布局，减去间距 */
+    margin-bottom: 16px;
+    background-color: #fff; /* 背景色 */
+    border-radius: 8px; /* 圆角 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+    overflow: hidden; /* 防止内容溢出 */
+}
+
+.video-preview {
+    width: 100%;
+    height: auto; /* 自适应高度 */
+}
+
+.video-info {
+    padding: 8px;
+}

paint-app/src/app/collect-page/collect-page.component.spec.ts

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

paint-app/src/app/collect-page/collect-page.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import {chevronBack,star} from 'ionicons/icons';
+addIcons({chevronBack,star});
+import { addIcons } from 'ionicons';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { CloudUser } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-collect-page',
+  templateUrl: './collect-page.component.html',
+  styleUrls: ['./collect-page.component.scss'],
+  standalone: true,
+  imports:[IonHeader,IonIcon,IonButton,IonButtons,IonContent,IonTitle,IonToolbar,IonIcon,CommonModule],
+})
+export class CollectPageComponent{
+
+  constructor(private router: Router) { }
+  ngOnInit() {
+    this.loadcollectlist();
+  }
+
+collectList:Array<CloudObject> = []
+
+async loadcollectlist(){
+  let currentUser = new CloudUser();
+  let query = new CloudQuery("pcollect");
+  if(currentUser?.id){
+    await query.equalTo("user", currentUser.id);
+  }
+  query.include('video');
+  this.collectList=await query.find();
+}
+
+
+gopage(){
+  this.router.navigate(['/tabs/tab3'])
+}
+}

paint-app/src/app/detail-page/detail-page.component.scss

@@ -1,5 +1,5 @@
 ion-button[slot='fixed'] {
-    top: 50%;
+    top:10%;
     right: 20px;
   }
   .button-container {

paint-app/src/app/detail-page/detail-page.component.ts

@@ -216,22 +216,25 @@ export class DetailPageComponent{
     // 检查 paintList 是否已定义且至少有一个元素
     if (this.paintList && this.paintList.length > 0) {
         await query.equalTo("user", currentUser.id);
-        await query.equalTo("paint", this.paintList[0].get("name")); // 确保 paintList[0] 是有效的
+        await query.equalTo("paint", this.paintList[0].id); // 确保 paintList[0] 是有效的
         this.favoritList = await query.find();
     } else {
         console.error('paintList is undefined or empty');
     }
     if(this.favoritList && this.favoritList.length > 0){
       this.isFavorite = !this.isFavorite;
-      console.log('判断完成')
+     
     }
+    console.log('判断完成')
 }
   async addFavorite() {
      let currentUser = new CloudUser();
      if (currentUser?.id) {
       this.currentfavorit?.addPointer('user', '_User', currentUser.id);
   }
-     this.currentfavorit?.addPointer('paint','paint',this.paintList[0].get("name"));
+  if (this.paintList[0].id) {
+     this.currentfavorit?.addPointer('paint','paint',this.paintList[0].id);
+  }
      await this.currentfavorit?.save();
      console.log('添加成功')
      this.isFavorite = !this.isFavorite;
@@ -246,7 +249,7 @@ export class DetailPageComponent{
     let query = new CloudQuery("plike");
     if (this.paintList && this.paintList.length > 0) {
       await query.equalTo("user", currentUser.id);
-      await query.equalTo("paint", this.paintList[0].get("name")); // 确保 paintList[0] 是有效的
+      await query.equalTo("paint", this.paintList[0].id); // 确保 paintList[0] 是有效的
       this.favoritList1 = await query.find();
       this.currentfavorit1=this.favoritList1[0];
       await this.currentfavorit1?.destroy();

paint-app/src/app/like-page/like-page.component.html

@@ -0,0 +1,26 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="gopage()">
+        <ion-icon name="chevron-back">
+        </ion-icon>返回
+      </ion-button>
+    </ion-buttons>
+    <ion-title>绘画喜欢</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="video-list">
+      <div class="video-item" *ngFor="let like of likeList">
+          <div class="video-preview">
+            <img [src]="like.get('paint').picture" [alt]="like.get('paint').name"/>
+          </div>
+          <div class="paint-info">
+              <h3>{{ like.get('paint').name }}</h3>
+              <p style="font-size: 12px; color: #999;">作者:{{ like.get('paint').artist }} 分</p>  
+              <p style="font-size: 12px; color: #999;">类型:{{ like.get('paint').range }}  </p>   
+          </div>
+      </div>
+  </div>
+</ion-content>

paint-app/src/app/like-page/like-page.component.scss

@@ -0,0 +1,23 @@
+.video-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 16px;
+}
+
+.video-item {
+    width: calc(50% - 16px); /* 两列布局，减去间距 */
+    margin-bottom: 16px;
+    background-color: #fff; /* 背景色 */
+    border-radius: 8px; /* 圆角 */
+    overflow: hidden; /* 防止内容溢出 */
+}
+
+.video-preview {
+    width: 100%;
+    height: auto; /* 自适应高度 */
+}
+
+.video-info {
+    padding: 8px;
+}

paint-app/src/app/like-page/like-page.component.spec.ts

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

paint-app/src/app/like-page/like-page.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import {chevronBack,star} from 'ionicons/icons';
+addIcons({chevronBack,star});
+import { addIcons } from 'ionicons';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router';
+import { CloudObject, CloudQuery } from 'src/lib/ncloud';
+import { CloudUser } from 'src/lib/ncloud';
+
+@Component({
+  selector: 'app-like-page',
+  templateUrl: './like-page.component.html',
+  styleUrls: ['./like-page.component.scss'],
+  standalone: true,
+  imports:[IonHeader,IonIcon,IonButton,IonButtons,IonContent,IonTitle,IonToolbar,IonIcon,CommonModule],
+})
+export class LikePageComponent  implements OnInit {
+
+  constructor(private router: Router) { }
+  ngOnInit() {
+    this.loadlikelist();
+  }
+
+likeList:Array<CloudObject> = []
+
+async loadlikelist(){
+  let currentUser = new CloudUser();
+  let query = new CloudQuery("plike");
+  if(currentUser?.id){
+    await query.equalTo("user", currentUser.id);
+  }
+  query.include('paint');
+  this.likeList=await query.find();
+}
+
+
+gopage(){
+  this.router.navigate(['/tabs/tab3'])
+}
+}

paint-app/src/app/page-idea/page-idea.component.html

@@ -1,36 +1,47 @@
-<ion-content>
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="gopage()">
+        <ion-icon name="chevron-back">
+        </ion-icon>返回
+      </ion-button>
+    </ion-buttons>
+    <ion-title>ai绘画建议</ion-title>
+  </ion-toolbar>
+</ion-header>
 
-  <!-- <h1>科室</h1>
-  <ion-input  [value]="keshi" (ionInput)="keshiInput($event)"></ion-input>
 
-  <h1>症状的描述</h1>
-  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="文本提示词" autoGrow="true"></ion-textarea>
+<ion-content class="content-container">
+  <h1 class="title">绘画风格</h1>
+  <ion-input 
+    class="input-field" 
+    [value]="artStyle" 
+    (ionInput)="artStyleInput($event)">
+  </ion-input>
   
-  <ion-button (click)="sendMessage()" expand="block">初步诊断</ion-button>
-
-  @if(!isComplete){
-    <div>{{responseMsg}}</div>
-  }
-  @if(isComplete){
-    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
-  } -->
-
-  <h1>绘画风格</h1>
-  <ion-input [value]="artStyle" (ionInput)="artStyleInput($event)"></ion-input>
+  <h1 class="title">绘画需求的描述</h1>
+  <ion-textarea 
+    class="textarea-field" 
+    [value]="userPrompt" 
+    (ionInput)="promptInput($event)" 
+    placeholder="请输入您的绘画需求" 
+    autoGrow="true">
+  </ion-textarea>
   
-  <!-- 文本域：生成提示词 -->
-  <h1>绘画需求的描述</h1>
-  <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="请输入您的绘画需求" autoGrow="true"></ion-textarea>
+  <ion-button 
+    class="submit-button" 
+    (click)="sendMessage()" 
+    expand="block">
+    获取绘画建议
+  </ion-button>
   
-  <!-- 按钮：执行消息生成函数 -->
-  <ion-button (click)="sendMessage()" expand="block">获取绘画建议</ion-button>
   <!-- 展示：返回消息内容 -->
-  <!-- 消息传输过程中，实时预览 -->
-  @if(!isComplete){
-    <div>{{responseMsg}}</div>
-  }
-  @if(isComplete){
-    <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
-  }
-  
+  <div class="response-container">
+    @if(!isComplete){
+      <div class="response-message">{{responseMsg}}</div>
+    }
+    @if(isComplete){
+      <fm-markdown-preview class="content-style" [content]="responseMsg"></fm-markdown-preview>
+    }
+  </div>
 </ion-content>

paint-app/src/app/page-idea/page-idea.component.scss

@@ -0,0 +1,43 @@
+.content-container {
+    padding: 20px;
+    background-color: #f9f9f9;
+  }
+
+  .title {
+    font-size: 24px;
+    margin-bottom: 16px;
+    color: #333;
+  }
+
+  .input-field, .textarea-field {
+    margin-bottom: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .textarea-field {
+    min-height: 100px; /* 设置文本域的最小高度 */
+  }
+
+  .submit-button {
+    background-color: #007bff; /* 按钮背景色 */
+    color: white; /* 按钮文字颜色 */
+    border-radius: 8px;
+  }
+
+  .submit-button:hover {
+    background-color: #0056b3; /* 按钮悬停时的背景色 */
+  }
+
+  .response-container {
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .response-message {
+    color: #555;
+    font-size: 16px;
+  }

paint-app/src/app/page-idea/page-idea.component.ts

@@ -1,8 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput, IonButtons, IonIcon } from '@ionic/angular/standalone';
 /** 引用：从fmode-ng库引用FmodeChatCompletion类 */
 import { FmodeChatCompletion,MarkdownPreviewModule } from 'fmode-ng';
 import { ChangeDetectorRef } from '@angular/core'
+import { Router } from '@angular/router';
+import {chevronBack} from 'ionicons/icons';
+addIcons({chevronBack})
+import { addIcons } from 'ionicons';
+import { CloudObject, CloudUser } from 'src/lib/ncloud';
 
 @Component({
   selector: 'page-idea',
@@ -11,65 +16,16 @@ import { ChangeDetectorRef } from '@angular/core'
   standalone: true,
   imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton,IonTextarea,IonInput,
     // 引入fm-markdown-preview组件模块
-    MarkdownPreviewModule
+    MarkdownPreviewModule,
+    IonButtons,IonIcon
   ],
 })
 export class PageIdeaComponent  implements OnInit {
-  // constructor() {}
-  // ngOnInit() {}
-  
-  // // 用户输入提示词，初始值为"门诊"
-  // keshi: string = "门诊";
-  
-  // // 处理用户输入的科室信息
-  // keshiInput(ev: any) {
-  //   this.keshi = ev.detail.value; // 将用户输入的值赋给keshi属性
-  // }
-  
-  // // 用户输入提示词，初始值为"请描述您的症状"
-  // userPrompt: string = "请描述您的症状";
-  
-  // // 处理用户输入的症状描述
-  // promptInput(ev: any) {
-  //   this.userPrompt = ev.detail.value; // 将用户输入的值赋给userPrompt属性
-  // }
-  
-  // // 属性：组件内用于展示消息内容的变量
-  // responseMsg: any = "";
-  
-  // // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
-  // isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
-  
-  // // 发送消息并生成诊断
-  // sendMessage() {
-  //   console.log("create"); // 打印创建消息的日志
-  
-  //   // 创建提示模板，包含用户输入的科室和症状描述
-  //   let PromptTemplate = `
-  //     您作为一名专业的${this.keshi}医生，请您根据用户描述的症状，给出初步的诊断，并给出一些建议。
-  //     以下是用户的口述：${this.userPrompt}
-  //   `;
-  
-  //   // 实例化FmodeChatCompletion对象，传入系统和用户的消息
-  //   let completion = new FmodeChatCompletion([
-  //     { role: "system", content: "" }, // 系统角色消息，内容为空
-  //     { role: "user", content: PromptTemplate } // 用户角色消息，内容为PromptTemplate
-  //   ]);
-  
-  //   // 发送消息并订阅响应
-  //   completion.sendCompletion().subscribe((message: any) => {
-  //     // 打印返回的消息内容
-  //     console.log(message.content);
-  //     // 将返回的消息内容赋值给组件内的responseMsg属性
-  //     this.responseMsg = message.content;
-      
-  //     // 判断消息是否完成，如果完成则设置isComplete为true
-  //     if (message?.complete) {
-  //       this.isComplete = true;
-  //     }
-  //   });
-  // }
-constructor(private cdr: ChangeDetectorRef) {} // 注入 ChangeDetectorRef
+constructor(private cdr: ChangeDetectorRef,
+  private router: Router,
+) {
+  this.currentadivse = new CloudObject('padvise');
+} // 注入 ChangeDetectorRef
 ngOnInit() {}
 
 // 用户输入提示词，初始值为"素描"
@@ -123,10 +79,33 @@ sendMessage() {
     // 判断消息是否完成，如果完成则设置isComplete为true
     if (message?.complete) {
       this.isComplete = true;
+      this.addadvise(PromptTemplate);
     }
   });
 }
 overrideText() {
   this.responseMsg = "这是覆盖后的新文本"; // 设置为新的文本
 }
+
+gopage(){
+  this.router.navigate(['/tabs/tab1'])
+}
+
+
+ currentadivse: CloudObject | undefined; // 
+  advisedata: any = {};
+  async addadvise(userresult:string) {
+    let currentUser = new CloudUser();
+    if (currentUser?.id) {
+      this.currentadivse?.addPointer('user', '_User', currentUser.id);
+  }
+    if(this.isComplete){
+      this.advisedata['content']=this.responseMsg;
+      this.advisedata['type']='text';
+      this.advisedata['idea']="主题："+this.userPrompt+"风格："+this.artStyle;
+    }
+    this.currentadivse?.set(this.advisedata);
+    await this.currentadivse?.save();
+  }
+
 }

paint-app/src/app/picture/picture.component.html

@@ -1,63 +1,50 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="gopage()">
+        <ion-icon name="chevron-back">
+        </ion-icon>返回
+      </ion-button>
+    </ion-buttons>
     <ion-title>
       示例：古诗文意境生成{{imagineWork?.progress || 0}}
     </ion-title> 
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
-
-  <!-- <ion-textarea [value]="userPrompt" (ionInput)="promptInput($event)" placeholder="古诗文填写" autoGrow="true"></ion-textarea>
-  <ion-button (click)="createImage()" expand="block">生成意境</ion-button>
-  <div>
-    {{PictureDescResult}}
+<ion-content [fullscreen]="true" class="content-container">
+  <ion-item class="textarea-item">
+    <ion-textarea 
+      class="textarea-field"
+      [value]="userPrompt" 
+      (ionInput)="promptInput($event)" 
+      placeholder="在这里输入您的绘画想法" 
+      autoGrow="true">
+    </ion-textarea>
+  </ion-item>
+
+  <ion-button class="generate-button" (click)="createImage()" expand="block">生成意境</ion-button>
+
+  <!-- 意境画面提示词 -->
+  <div class="description-container">
+    <h2 class="description-title">画面描述：</h2>
+    <p class="description-text">{{ PictureDescResult }}</p>
   </div>
 
-  @if(images.length) {
-    @for(imageUrl of images;track imageUrl){
-      <img [src]="imageUrl" alt="" srcset="">
+  <div class="image-container">
+    @if(images.length) {
+      @for(imageUrl of images; track imageUrl) {
+        <img class="generated-image" [src]="imageUrl" alt="生成的意境图" srcset="">
+      }
     }
-  }
 
-  @if(!images.length){
-    @if(imagineWork){
-      <h1>生成中</h1>
-    }
-    @if(!imagineWork){
-      <h1>未开始</h1>
+    @if(!images.length) {
+      @if(imagineWork) {
+        <h1 class="status-message">生成中</h1>
+      }
+      @if(!imagineWork) {
+        <h1 class="status-message">未开始</h1>
+      }
     }
-  } -->
-<!-- 生成提示词 -->
-<ion-item>
-  <ion-textarea 
-    [value]="userPrompt" 
-    (ionInput)="promptInput($event)" 
-    placeholder="在这里输入您的绘画想法" 
-    autoGrow="true">
-  </ion-textarea>
-</ion-item>
-
-<ion-button (click)="createImage()" expand="block">生成意境</ion-button>
-
-<!-- 意境画面提示词 -->
-<div>
-  <h2>画面描述：</h2>
-  <p>{{ PictureDescResult }}</p>
-</div>
-
-@if(images.length) {
-  @for(imageUrl of images;track imageUrl){
-    <img [src]="imageUrl" alt="" srcset="">
-  }
-}
-
-@if(!images.length){
-  @if(imagineWork){
-    <h1>生成中</h1>
-  }
-  @if(!imagineWork){
-    <h1>未开始</h1>
-  }
-}
+  </div>
 </ion-content>

paint-app/src/app/picture/picture.component.scss

@@ -0,0 +1,60 @@
+.content-container {
+    padding: 20px;
+    background-color: #f0f0f0; /* 背景色 */
+  }
+
+  .textarea-item {
+    margin-bottom: 20px; /* 文本域与按钮之间的间距 */
+  }
+
+  .textarea-field {
+    border-radius: 8px; /* 圆角 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+  }
+
+  .generate-button {
+    background-color: #007bff; /* 按钮背景色 */
+    color: white; /* 按钮文字颜色 */
+    border-radius: 8px; /* 圆角 */
+  }
+
+  .generate-button:hover {
+    background-color: #0056b3; /* 按钮悬停时的背景色 */
+  }
+
+  .description-container {
+    margin-top: 20px; /* 描述区域与按钮之间的间距 */
+    padding: 10px;
+    background-color: #fff; /* 描述区域背景色 */
+    border-radius: 8px; /* 圆角 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+  }
+
+  .description-title {
+    font-size: 20px; /* 描述标题字体大小 */
+    color: #333; /* 描述标题颜色 */
+  }
+
+  .description-text {
+    color: #555; /* 描述文本颜色 */
+    font-size: 16px; /* 描述文本字体大小 */
+  }
+
+  .image-container {
+    margin-top: 20px; /* 图像区域与描述区域之间的间距 */
+    display: flex; /* 使用flex布局 */
+    flex-wrap: wrap; /* 允许换行 */
+    gap: 10px; /* 图像之间的间距 */
+  }
+
+  .generated-image {
+    max-width: 100%; /* 最大宽度为100% */
+    height: auto; /* 高度自适应 */
+    border-radius: 8px; /* 圆角 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+  }
+
+  .status-message {
+    color: #ff5722; /* 状态消息颜色 */
+    text-align: center; /* 文本居中 */
+  }

paint-app/src/app/picture/picture.component.ts

@@ -1,8 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonIcon, IonButtons } from '@ionic/angular/standalone';
 import { IonTextarea, IonButton,IonInput } from "@ionic/angular/standalone";
 import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
-
+import { Router } from '@angular/router';
+import {chevronBack} from 'ionicons/icons';
+addIcons({chevronBack})
+import { addIcons } from 'ionicons';
+import { CloudObject, CloudUser } from 'src/lib/ncloud';
 @Component({
   selector: 'picture',
   templateUrl: './picture.component.html',
@@ -12,60 +16,10 @@ import { DalleOptions, ImagineWork, FmodeChatCompletion } from 'fmode-ng';
     IonHeader, IonToolbar, IonTitle, IonContent, 
     IonButton,
     IonInput,
-    IonTextarea,IonItem
+    IonTextarea,IonItem,IonIcon,IonButtons
   ],
 })
 export class PictureComponent  implements OnInit {
- 
-  // userPrompt:string = "犬吠水声中，桃花带露浓。\n树深时见鹿，溪午不闻钟。"
-  // promptInput(ev:any){
-  //   this.userPrompt = ev.detail.value;
-  // }
-  // imagineWork:ImagineWork|undefined
-  // images:Array<string> = []
-  // constructor(
-  // ){
-  //   // 示例任务，自己生成图片后请存储新的ID
-  //   this.imagineWork = new ImagineWork("");
-  //   this.imagineWork.fetchTask().then(work=>{
-  //     this.images = this.imagineWork?.images || [];
-  //   })
-  // }
-
-  // PictureDescResult:string = `` // 画面描述结果
-  // async createImage(){
-  //   this.imagineWork = new ImagineWork();
-  //   // 文本生成
-  //   let PromptTemplate = `您是一名专业的美术画家，请您根据古诗文的内容，将其描述的画面、场景、人物、物品等用最简短的语言表达，直接写出画面，并且以中国的古风意境为主
-  //   诗文如下：
-  //   ${this.userPrompt}
-  //   `
-  //   let completion = new FmodeChatCompletion([
-  //     {role:"system",content:""},
-  //     {role:"user",content:PromptTemplate}
-  //   ])
-  //   completion.sendCompletion().subscribe((message:any)=>{
-  //     // 打印消息体
-  //     console.log(message.content)
-  //     // 赋值消息内容给组件内属性
-  //     this.PictureDescResult = message.content
-  //     if(message?.complete){ // 判断message为完成状态，则设置isComplete为完成
-  //       // 图片生成
-  //       let PicturePrompt = `${this.PictureDescResult}\n风格：中国古风。画面不带任何文字。突出色彩。`
-  //       let options:DalleOptions = {prompt:PicturePrompt}
-  //       this.imagineWork?.draw(options).subscribe(work=>{
-  //           console.log("imagineWork",work?.toJSON())
-  //           console.log("images",work?.get("images"))
-  //           if(work?.get("images")?.length){
-  //             this.images = work?.get("images");
-  //           }
-  //       })
-  //     }
-  //   })
-
-    
-  // }
-  // ngOnInit() {}
   userPrompt: string = "请描述您的绘画想法"; // 用户输入的绘画想法
   promptInput(ev: any) {
     this.userPrompt = ev.detail.value; // 更新用户输入的绘画想法
@@ -74,11 +28,12 @@ export class PictureComponent  implements OnInit {
   imagineWork: ImagineWork | undefined; // 用于处理图像生成的实例
   images: Array<string> = []; // 存储生成的图像数组
   
-  constructor() {
+  constructor(private router: Router) {
     // 初始化ImagineWork实例并获取初始任务
     this.imagineWork = new ImagineWork("");
     this.imagineWork.fetchTask().then(work => {
       this.images = this.imagineWork?.images || []; // 获取已有图像
+      this.currentadivse = new CloudObject('padvise');
     });
   }
   
@@ -87,7 +42,7 @@ export class PictureComponent  implements OnInit {
   async createImage() {
     this.imagineWork = new ImagineWork(); // 创建新的ImagineWork实例
     // 文本生成
-    let PromptTemplate = `您是一名专业的美术画家，请您根据用户的绘画想法，将其描述的画面、场景、人物、物品等用最简短的语言表达，直接写出画面，并且以中国的古风意境为主。
+    let PromptTemplate = `您是一名专业的美术画家，请您根据用户的绘画想法，将其描述的画面、场景、人物、物品等用最简短的语言表达，直接写出画面。
     用户的绘画想法如下：
     ${this.userPrompt}
     `;
@@ -107,7 +62,7 @@ export class PictureComponent  implements OnInit {
       // 判断消息是否完成
       if (message?.complete) {
         // 图片生成
-        let PicturePrompt = `${this.PictureDescResult}\n风格：中国古风。画面不带任何文字。突出色彩。`;
+        let PicturePrompt = `${this.PictureDescResult}\n画面不带任何文字。`;
         let options: DalleOptions = { prompt: PicturePrompt };
         
         // 生成图像
@@ -118,6 +73,7 @@ export class PictureComponent  implements OnInit {
           // 更新生成的图像
           if (work?.get("images")?.length) {
             this.images = work?.get("images");
+            this.addadvise();
           }
         });
       }
@@ -125,4 +81,28 @@ export class PictureComponent  implements OnInit {
   }
   
   ngOnInit() {}
+
+  gopage(){
+    this.router.navigate(['/tabs/tab1'])
+  }
+
+  currentadivse: CloudObject | undefined; // 
+  advisedata: any = {};
+  async addadvise() {
+    let currentUser = new CloudUser();
+    if (currentUser?.id) {
+      this.currentadivse?.addPointer('user', '_User', currentUser.id);
+  }
+    if(this.PictureDescResult){
+      this.advisedata['content']=this.PictureDescResult;
+      this.advisedata['type']='picture';
+      this.advisedata['idea']=this.userPrompt;
+    }
+    if(this.images){
+      this.advisedata['picture']=this.images[this.images.length-1];
+    }
+    this.currentadivse?.set(this.advisedata);
+    await this.currentadivse?.save();
+  }
+
 }

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

@@ -8,28 +8,6 @@
 
 <ion-content [fullscreen]="true" class="bg-color">
   <img src="https://s2.loli.net/2024/12/23/7HNb2O5GXsEghqt.png" alt="Image Description" class="image-style"/>
-  <!-- <ion-header>
-    <ion-toolbar>
-      <ion-button (click)="goTestPage()">测试</ion-button>
-      <ion-button (click)="goTestPage1()">灵感</ion-button>
-      <ion-button class="float-left" (click)="goTestPage2()">绘画</ion-button>
-      <ion-button class="float-left" (click)="goTestPage2()">绘画</ion-button>
-    </ion-toolbar>
-  </ion-header> -->
-    <!-- <ion-list v-if="loaded">
-      <ion-list-header>Albums</ion-list-header>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-icon style="width: 100%; height: 100%" :icon="musicalNotes"></ion-icon>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>Abbey Road</h3>
-          <p>The Beatles</p>
-          <p>1969</p>
-        </ion-label>
-      </ion-item>
-    </ion-list> -->
-
  <ion-card>
       <ion-card-header>
         <ion-card-title>AI绘画建议 <ion-button (click)="goTestPage1()">前往</ion-button></ion-card-title>
@@ -44,13 +22,4 @@
     <ion-card-content>
     </ion-card-content>
 </ion-card> 
-
-     
-<!-- <h1>星星打分组件演示:分值{{currentScore}}</h1>
-<edit-rating-star
-  [score]="currentScore" 
-  [scoreMax]="5" 
-  (onScoreChange)="handleScoreChange($event)">
-</edit-rating-star>
-<h1>编辑标签的演示</h1> -->
 </ion-content>

paint-app/src/app/tab3/tab3.page.html

@@ -8,7 +8,7 @@
     <ion-content class="ion-padding">
 
   <!-- 控件区域 -->
-  <ion-list>
+  <ion-list (click)="showAlert1()">
     <ion-item>
       <ion-label>安全隐私</ion-label>
     </ion-item>
@@ -18,7 +18,7 @@
   </ion-list>
   <div style="text-align: center; margin: 10px;"></div>
   <div style="text-align: center; margin: 10px;"></div>
-  <ion-list>
+  <ion-list (click)="showAlert1()">
     <ion-item>
       <ion-label>我的客服</ion-label>
     </ion-item>
@@ -32,7 +32,7 @@
   <div style="text-align: center; margin: 10px;"></div>
   <div style="text-align: center; margin: 10px;"></div>
   <!-- 版本号和关于区域 -->
-  <ion-list>
+  <ion-list (click)="showAlert1()">
     <ion-item>
       <ion-label>隐私政策</ion-label>
     </ion-item>
@@ -83,10 +83,10 @@
             }
             @if(currentUser?.id){
               <div class="img-box">
-                <img src="../../assets/icon/head1.png" alt="User Image" />
+                <img [src]="currentUser?.get('avatar') || 'https://s2.loli.net/2024/12/23/FbVMwDPieBp7tAs.png' " alt="User Image" />
               </div>
               <div class="info">
-                <div class="name">{{currentUser?.get("realname")}}</div>
+                <div class="name">{{currentUser?.get("username")||"-"}} </div>
                 <div class="no">邮箱:{{currentUser?.get("email")||"-"}}</div>
               </div>
               }
@@ -113,61 +113,56 @@
    </div>
   <div class="icon-container">
     <div class="icon-item">
-      <ion-icon name="folder-outline"></ion-icon>
-      <span>离线缓存</span>
-    </div>
-    <div class="icon-item">
+      <ion-button style="height: 20px;"fill="clear" (click)="!currentUser?.id ? showAlert() : gopage1()">
       <ion-icon name="time-outline"></ion-icon>
-      <span>历史记录</span>
-    </div>
-    <div class="icon-item">
-      <ion-icon name="star-outline"></ion-icon>
-      <span>我的收藏</span>
-    </div>
-    <div class="icon-item">
-      <ion-icon name="heart-outline"></ion-icon>
-      <span>我的喜欢</span>
+      </ion-button>
+      <span>历史建议</span>
     </div>
-  </div>
-
-  <!-- <div style="margin-top: 60px;width: 100%;padding-left: 20px;"><p class="left-align">更多服务：</p></div> -->
-  <!-- <div class="icon-container">
     <div class="icon-item">
-      <ion-icon name="folder-outline"></ion-icon>
-      <span>离线缓存</span>
-    </div>
-    <div class="icon-item">
-      <ion-icon name="time-outline"></ion-icon>
-      <span>历史记录</span>
+      <ion-button style="height: 20px;"fill="clear" (click)="!currentUser?.id ? showAlert() : editUser()">
+      <ion-icon name="person-outline"></ion-icon>
+    </ion-button>
+      <span>编辑信息</span>
     </div>
     <div class="icon-item">
+      <ion-button style="height: 20px;" fill="clear"  (click)="!currentUser?.id ? showAlert() : gopage3()">
       <ion-icon name="star-outline"></ion-icon>
-      <span>我的收藏</span>
+    </ion-button>
+      <span>视频收藏</span>
     </div>
     <div class="icon-item">
+      <ion-button style="height: 20px;"fill="clear"  (click)="!currentUser?.id ? showAlert() : gopage4()">
       <ion-icon name="heart-outline"></ion-icon>
-      <span>我的喜欢</span>
+    </ion-button>
+      <span>绘画喜欢</span>
     </div>
-  </div> -->
+  </div>
   <div style="margin-top: 60px;width: 100%;">
     <div style="width: 100%;padding-left: 20px;"><p class="left-align">更多服务：</p></div>
   <ion-list lines="none">
-    <ion-item (click)="!currentUser?.id ? showAlert() : editUser()">
-      <ion-icon slot="start" name="person-outline" style="font-size: 20px;"></ion-icon>
-      <ion-label>编辑信息</ion-label>
+    <!-- <ion-item (click)="!currentUser?.id ? showAlert() : editUser()"> -->
+
+
+      <ion-item (click)="showAlert1()">
+      <ion-icon slot="start" name="folder-outline" style="font-size: 20px;"></ion-icon>
+      <ion-label>信息安全</ion-label>
       <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
     </ion-item>
-    <ion-item>
+
+
+    <ion-item  (click)="showAlert1()">
       <ion-icon slot="start" name="shield-outline"style="font-size: 20px;"></ion-icon>
       <ion-label>安全隐私</ion-label>
       <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
     </ion-item>
-    <ion-item>
+
+
+    <ion-item (click)="showAlert1()">
       <ion-icon slot="start" name="call-outline"style="font-size: 20px;"></ion-icon>
       <ion-label>联系客服</ion-label>
       <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>
     </ion-item>
-    <ion-item>
+    <ion-item (click)="showAlert1()">
       <ion-icon slot="start" name="lock-closed-outline"style="font-size: 20px;"></ion-icon>
       <ion-label>隐私政策</ion-label>
       <ion-icon slot="end" name="chevron-forward-outline" style="color: lightgray;"></ion-icon>

paint-app/src/app/tab3/tab3.page.ts

@@ -78,4 +78,31 @@ export class Tab3Page {
 
   await alert.present(); // 显示提示框
 }
+
+
+async showAlert1() {
+  const alert = await this.alertController.create({
+    header: '提示', // 提示框的标题
+    message: '该功能暂时未开放', // 提示框的消息
+    buttons: ['确定'], // 按钮文本，用户点击后关闭提示框
+  });
+
+  await alert.present(); // 显示提示框
+}
+
+
+
+gopage1(){
+  this.router.navigate(['/tabs/advise-page'])
+}
+gopage2(){
+  this.router.navigate(['/tabs/tab3'])
+}
+gopage3(){
+  this.router.navigate(['/tabs/collect-page'])
+}
+gopage4(){
+  this.router.navigate(['/tabs/like-page'])
+}
+
 }

paint-app/src/app/tab4/tab4.component.scss

@@ -89,5 +89,9 @@ ion-header {
       background: linear-gradient(135deg, #ff4d4d, #f7a633); /* 悬停时变色 */
      }
     
-
+     ion-avatar {
+      margin-right: 8px; /* 头像与用户名之间的间距 */
+      width: 40px; /* 头像宽度 */
+      height: 40px; /* 头像高度 */
+  }
      

paint-app/src/app/tab4/tab4.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common'; // 确保导入 CommonModule
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonButton, IonIcon, IonItem, IonInput, IonLabel } from '@ionic/angular/standalone'; // 导入 IonButton 和 IonIcon
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonButton, IonIcon, IonItem, IonInput, IonLabel, IonAvatar } from '@ionic/angular/standalone'; // 导入 IonButton 和 IonIcon
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // 导入 FormsModule
 import { CloudObject ,CloudQuery} from 'src/lib/ncloud';
 import { ModalController } from '@ionic/angular/standalone';
@@ -13,7 +13,7 @@ import {  CloudUser } from 'src/lib/ncloud';
   standalone: true,
   imports: [CommonModule, IonHeader, IonToolbar, IonTitle,FormsModule,IonItem,
      IonContent, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle,ReactiveFormsModule,
-      IonCardContent, IonButton, IonIcon,IonInput,IonLabel] // 添加 IonButton 和 IonIcon
+      IonCardContent, IonButton, IonIcon,IonInput,IonLabel,IonAvatar] // 添加 IonButton 和 IonIcon
 })
 export class Tab4Component{
  

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

@@ -56,6 +56,21 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../detail-page/detail-page.component').then((m) => m.DetailPageComponent),
       },
+      {
+        path: 'collect-page',
+        loadComponent: () =>
+          import('../collect-page/collect-page.component').then((m) => m.CollectPageComponent),
+      },
+      {
+        path: 'like-page',
+        loadComponent: () =>
+          import('../like-page/like-page.component').then((m) => m.LikePageComponent),
+      },
+      {
+        path: 'advise-page',
+        loadComponent: () =>
+          import('../advise-page/advise-page.component').then((m) => m.AdvisePageComponent),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

paint-app/src/app/video-page/video-page.component.html

@@ -11,19 +11,33 @@
 </ion-header>
 
 <ion-content> 
-  <div class="vido-type">
-    <video id="video" controls>
+  <div class="video-container">
+    <video id="video" controls class="responsive-video">
         <source src="../../assets/6月26日(1).mp4" type="video/mp4">
         您的浏览器不支持视频标签。
     </video>
+
+    <div class="video-info">
+        <div class="video-title-author">
+            <h2>{{video?.get('title')}}</h2>  <!-- 视频标题 -->
+            <p style="color: rgb(128, 124, 124);">
+              风格: <span style="margin-right: 10px;">{{video?.get('type')}}</span>
+              评分: {{video?.get('score')}}
+          </p>
+        </div>
+        <ion-button 
+            fill="clear" 
+            (click)="iscollect ? removecollect() : addcollect()" 
+            [color]="iscollect ? 'yellow' : 'medium'"
+            class="favorite-button">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+        </ion-button>
     </div>
-    <div class="art-content">
-        <!-- 评价选择 -->
-        <p class="switch-head-line">
-            <span class="mr chooseActive" eval_data='1'>视频简介</span>
-        </p>
-        <!-- 评价选择 -->
-         <p>{{video?.get('allintroduce')}}</p>
+
+    <div class="video-description">
+        <h3>视频简介</h3>
+        <p>{{video?.get('allintroduce')}}</p>
     </div>
+</div>
 </ion-content>
 

paint-app/src/app/video-page/video-page.component.scss

@@ -0,0 +1,53 @@
+
+
+.favorite-button {
+    font-size: 24px; /* 增大按钮字体大小 */
+    width: 30px; /* 增大按钮宽度 */
+    height: 30px; /* 增大按钮高度 */
+    --padding-start: 0; /* 去掉按钮左侧的内边距 */
+    --padding-end: 0; /* 去掉按钮右侧的内边距 */
+    --padding-top: 0; /* 去掉按钮上方的内边距 */
+    --padding-bottom: 0; /* 去掉按钮下方的内边距 */
+}
+
+.video-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 16px;
+    background-color: #f8f8f8; /* 背景色 */
+}
+
+.responsive-video {
+    width: 100%;
+    max-width: 600px; /* 最大宽度 */
+    height: auto; /* 自适应高度 */
+    border-radius: 8px; /* 圆角 */
+}
+
+.video-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-top: 12px;
+}
+
+.video-title-author {
+    flex: 1;
+}
+
+.favorite-button {
+    margin-left: 16px; /* 收藏按钮与标题/作者之间的间距 */
+}
+
+.video-description {
+    margin-top: 16px;
+    text-align: left;
+    width: 100%;
+    max-width: 600px; /* 最大宽度 */
+}
+
+.video-description h3 {
+    margin-bottom: 8px; /* 标题与简介之间的间距 */
+}

paint-app/src/app/video-page/video-page.component.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController, IonImg, IonIcon, IonButtons } from '@ionic/angular/standalone';
-import {chevronBack} from 'ionicons/icons';
-addIcons({chevronBack})
+import {chevronBack,star} from 'ionicons/icons';
+addIcons({chevronBack,star})
 import { addIcons } from 'ionicons';
 import { CloudObject, CloudQuery } from 'src/lib/ncloud';
 import { ActivatedRoute } from '@angular/router';
 import { CommonModule } from '@angular/common';
+import { CloudUser } from 'src/lib/ncloud';
+
+
 @Component({
   selector: 'app-video-page',
   templateUrl: './video-page.component.html',
@@ -20,7 +23,9 @@ export class VideoPageComponent{
 
   constructor(private router: Router,
             private route: ActivatedRoute
-  ){}
+  ){
+    this.currentcollect = new CloudObject('pcollect');
+  }
 
   gopage(){
     this.router.navigate(['/tabs/tab2'])
@@ -33,7 +38,11 @@ export class VideoPageComponent{
       this.videoId = params['id'];
       // 根据 videoId 加载视频数据
     });
-    this.loadvideolist()
+   
+
+    this.loadvideolist().then(() => {
+      this.judgecollect();
+  });
   }
 
       async loadvideolist(){
@@ -41,4 +50,61 @@ export class VideoPageComponent{
       await query.equalTo("name",this.videoId)
       this.video = await query.first()
       }
+
+
+
+      iscollect: boolean = false; // 初始状态
+
+      collectdata: any = {};
+      currentcollect: CloudObject | undefined; // 
+      collectList:Array<CloudObject> = []
+
+          async judgecollect() {
+          let currentUser = new CloudUser();
+          let query = new CloudQuery("pcollect");
+          // 检查 paintList 是否已定义且至少有一个元素
+          if (this.video ) {
+              await query.equalTo("user", currentUser.id);
+              await query.equalTo("video", this.video.id); // 确保 paintList[0] 是有效的
+              this.collectList = await query.find();
+          } else {
+              console.error('paintList is undefined or empty');
+          }
+          if(this.collectList && this.collectList.length > 0){
+            this.iscollect = !this.iscollect;
+           
+          }
+          console.log('判断完成')
+      }
+
+      async addcollect() {
+        let currentUser = new CloudUser();
+        if (currentUser?.id) {
+         this.currentcollect?.addPointer('user', '_User', currentUser.id);
+     }
+     if (this.video?.id) {
+        this.currentcollect?.addPointer('video','pvideo',this.video.id);
+     }
+        await this.currentcollect?.save();
+        console.log('添加成功')
+        this.iscollect = !this.iscollect;
+     }
+
+     currentcollect1: CloudObject | undefined;  
+     collectList1:Array<CloudObject> = []
+  async removecollect() {
+    let currentUser = new CloudUser();
+    let query = new CloudQuery("pcollect");
+    if (this.video) {
+      await query.equalTo("user", currentUser.id);
+      await query.equalTo("video", this.video.id); 
+      this.collectList1 = await query.find();
+      this.currentcollect1=this.collectList1[0];
+      await this.currentcollect1?.destroy();
+      this.iscollect = !this.iscollect;
+      console.log('删除成功')
+  } else {
+      console.error('paintList is undefined or empty');
+  }
+ }
 }