fix:small

AIart-app/src/app/art-detail/art-detail.component.html

@@ -0,0 +1,34 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>作品详情</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="art-detail-container" *ngIf="artwork">
+    <div class="image-container">
+      <img [src]="artwork.image" [alt]="artwork.title">
+    </div>
+
+    <div class="info-container">
+      <h2>{{artwork.title}}</h2>
+      <p class="description">{{artwork.description}}</p>
+
+      <div class="user-info">
+        <img [src]="artwork.avatarUrl" [alt]="artwork.userName" class="avatar">
+        <div class="user-details">
+          <span class="username">{{artwork.userName}}</span>
+          <span class="date">{{artwork.date}}</span>
+        </div>
+      </div>
+
+      <div class="likes">
+        <ion-icon name="heart-outline"></ion-icon>
+        <span>{{artwork.likes}}</span>
+      </div>
+    </div>
+  </div>
+</ion-content>

AIart-app/src/app/art-detail/art-detail.page.scss → AIart-app/src/app/art-detail/art-detail.component.scss

@@ -87,4 +87,76 @@
             }
         }
     }
+}
+
+.art-detail-container {
+    .image-container {
+        width: 100%;
+        height: 300px;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    .info-container {
+        padding: 16px;
+
+        h2 {
+            font-size: 24px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 12px;
+        }
+
+        .description {
+            font-size: 16px;
+            color: #666;
+            line-height: 1.5;
+            margin-bottom: 20px;
+        }
+
+        .user-info {
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
+
+            .avatar {
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                margin-right: 12px;
+            }
+
+            .user-details {
+                display: flex;
+                flex-direction: column;
+
+                .username {
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #333;
+                }
+
+                .date {
+                    font-size: 14px;
+                    color: #999;
+                }
+            }
+        }
+
+        .likes {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #666;
+
+            ion-icon {
+                font-size: 24px;
+            }
+        }
+    }
 }

AIart-app/src/app/art-detail/art-detail.component.spec.ts

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

AIart-app/src/app/art-detail/art-detail.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-art-detail',
+  templateUrl: './art-detail.component.html',
+  styleUrls: ['./art-detail.component.scss'],
+  standalone: true,
+  imports: [IonicModule, CommonModule]
+})
+export class ArtDetailComponent implements OnInit {
+  artId: string = '';
+  artwork: any = null;
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.artId = this.route.snapshot.paramMap.get('id') || '';
+    this.loadArtwork();
+  }
+
+  loadArtwork() {
+    // 模拟加载数据，实际应用中应该从服务器获取
+    this.artwork = {
+      id: this.artId,
+      image: '../../assets/img/xingkong.png',
+      title: '梵高-星空高清画作',
+      description: '致敬梵高 #艺术品 #星空',
+      avatarUrl: '../../assets/img/book1.png',
+      userName: '星空艺术家',
+      date: '12-01',
+      likes: 1687
+    };
+  }
+}

AIart-app/src/app/art-detail/art-detail.page.html

@@ -1,50 +0,0 @@
-<ion-header [translucent]="true" class="ion-no-border">
-    <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
-        </ion-buttons>
-        <ion-title>作品详情</ion-title>
-    </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-    <div class="art-detail">
-        <img [src]="artDetail.image" [alt]="artDetail.title" class="main-image">
-
-        <div class="content-section">
-            <h1>{{artDetail.title}}</h1>
-            <p class="description">{{artDetail.description}}</p>
-
-            <div class="interaction-bar">
-                <ion-button fill="clear" (click)="toggleLike()" [color]="isLiked ? 'danger' : 'medium'">
-                    <ion-icon slot="start" [name]="isLiked ? 'heart' : 'heart-outline'"></ion-icon>
-                    {{likeCount}}
-                </ion-button>
-            </div>
-        </div>
-
-        <div class="comments-section">
-            <h2>评论</h2>
-
-            <div class="comment-input">
-                <ion-item>
-                    <ion-textarea [(ngModel)]="newComment" placeholder="写下你的评论..." rows="3"></ion-textarea>
-                </ion-item>
-                <ion-button expand="block" (click)="addComment()">发表评论</ion-button>
-            </div>
-
-            <div class="comments-list">
-                @for(comment of comments; track comment.id) {
-                <div class="comment-item">
-                    <div class="comment-header">
-                        <img [src]="comment.userAvatar || 'assets/default-avatar.png'" alt="avatar">
-                        <span class="username">{{comment.username}}</span>
-                        <span class="time">{{comment.createdAt | date:'MM-dd HH:mm'}}</span>
-                    </div>
-                    <p class="comment-content">{{comment.content}}</p>
-                </div>
-                }
-            </div>
-        </div>
-    </div>
-</ion-content>

AIart-app/src/app/art-detail/art-detail.page.ts

@@ -1,89 +0,0 @@
-import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon, IonBackButton, IonItem, IonLabel, IonInput, IonTextarea, IonButtons } from '@ionic/angular/standalone';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { CloudObject, CloudQuery } from 'src/lib/ncloud';
-
-@Component({
-    selector: 'app-art-detail',
-    templateUrl: './art-detail.page.html',
-    styleUrls: ['./art-detail.page.scss'],
-    standalone: true,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    imports: [
-        CommonModule,
-        FormsModule,
-        IonHeader,
-        IonToolbar,
-        IonTitle,
-        IonContent,
-        IonButton,
-        IonIcon,
-        IonBackButton,
-        IonItem,
-        IonLabel,
-        IonInput,
-        IonTextarea,
-        IonButtons
-    ]
-})
-export class ArtDetailPage implements OnInit {
-    artDetail: any = {};
-    comments: any[] = [];
-    newComment: string = '';
-    isLiked: boolean = false;
-    likeCount: number = 0;
-
-    constructor(private route: ActivatedRoute) { }
-
-    ngOnInit() {
-        const id = this.route.snapshot.paramMap.get('id');
-        if (id) {
-            this.loadArtDetail(id);
-            this.loadComments(id);
-        }
-    }
-
-    async loadArtDetail(id: string) {
-        const query = new CloudQuery('ArtWork');
-        const result = await query.get(id);
-        this.artDetail = result;
-        this.likeCount = result['get']('likes') || 0;
-        this.checkLikeStatus();
-    }
-
-    async loadComments(artId: string) {
-        const query = new CloudQuery('Comments');
-        query.equalTo('artId', artId);
-        const results = await query.find();
-        this.comments = results || [];
-    }
-
-    async toggleLike() {
-        if (!this.isLiked) {
-            this.likeCount++;
-            this.isLiked = true;
-            this.artDetail.set('likes', this.likeCount);
-            await this.artDetail.save();
-        }
-    }
-
-    async addComment() {
-        if (!this.newComment.trim()) return;
-
-        const comment = new CloudObject('Comments');
-        // comment.set('artId', this.artDetail.id);
-        // comment.set('content', this.newComment);
-        // comment.set('createdAt', new Date());
-        await comment.save();
-
-        await this.loadComments(this.artDetail.id);
-        this.newComment = '';
-    }
-
-    private async checkLikeStatus() {
-        // 这里可以添加检查用户是否已点赞的逻辑
-        // 可以使用 localStorage 或者数据库来存储用户的点赞状态
-    }
-} 

AIart-app/src/app/edit-tag/edit-tag.component.html

@@ -1,5 +1,20 @@
-<ion-input [value]="textResult" (ionInput)="userInput($event)" type="text" placeholder="请输入内容"></ion-input>
-<p>当前输入：{{textResult}}</p> <ion-button (click)="Add_tags()">添加标签</ion-button>
-@for (tag of user_tag;track tag) {
-<ion-chip>{{tag}}<span (click)="Delete_tag(tag)">&nbsp;x</span></ion-chip>
-}
+<div class="tag-input-container">
+    <ion-input [value]="textResult" (ionInput)="userInput($event)" type="text" placeholder="输入标签内容..."
+        class="tag-input">
+        <ion-icon name="pricetag-outline" slot="start"></ion-icon>
+    </ion-input>
+
+    <ion-button (click)="Add_tags()" class="add-button" [disabled]="!textResult">
+        <ion-icon name="add-outline" slot="start"></ion-icon>
+        添加标签
+    </ion-button>
+</div>
+
+<!-- <div class="tags-container">
+    @for (tag of user_tag; track tag) {
+    <ion-chip class="custom-chip">
+        <ion-label>{{tag}}</ion-label>
+        <ion-icon name="close-circle" (click)="Delete_tag(tag)"></ion-icon>
+    </ion-chip>
+    }
+</div> -->

AIart-app/src/app/edit-tag/edit-tag.component.scss

@@ -0,0 +1,86 @@
+.tag-input-container {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    .tag-input {
+        flex: 1;
+        --padding-start: 12px;
+        --padding-end: 12px;
+        --background: var(--ion-color-light);
+        --border-radius: 8px;
+        --placeholder-color: #999;
+        --placeholder-opacity: 0.8;
+
+        &::part(native) {
+            padding: 8px 12px;
+        }
+
+        ion-icon {
+            color: var(--ion-color-medium);
+            margin-right: 8px;
+        }
+    }
+
+    .add-button {
+        --padding-start: 16px;
+        --padding-end: 16px;
+        --border-radius: 8px;
+
+        ion-icon {
+            margin-right: 4px;
+        }
+    }
+}
+
+.tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-height: 40px;
+
+    .custom-chip {
+        --background: var(--ion-color-light);
+        --color: var(--ion-color-dark);
+        padding: 8px 12px;
+        border-radius: 16px;
+        transition: all 0.2s ease;
+
+        ion-label {
+            margin-right: 4px;
+            font-size: 14px;
+        }
+
+        ion-icon {
+            font-size: 16px;
+            color: var(--ion-color-medium);
+            cursor: pointer;
+            transition: color 0.2s ease;
+
+            &:hover {
+                color: var(--ion-color-danger);
+            }
+        }
+
+        &:hover {
+            --background: var(--ion-color-light-shade);
+        }
+    }
+}
+
+// 添加动画效果
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+ion-chip {
+    animation: fadeIn 0.3s ease-out;
+}

AIart-app/src/app/edit-tag/edit-tag.component.ts

@@ -1,30 +1,39 @@
-import { Component, input, OnInit } from '@angular/core';
-import { IonInput, IonButton, IonChip } from '@ionic/angular/standalone';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { IonInput, IonButton, IonChip, IonIcon, IonLabel } from '@ionic/angular/standalone';
+
 @Component({
   selector: 'edit-tag',
   templateUrl: './edit-tag.component.html',
   styleUrls: ['./edit-tag.component.scss'],
   standalone: true,
-  imports: [IonInput, IonButton, IonChip],
+  imports: [IonInput, IonButton, IonChip, IonIcon, IonLabel],
 })
 export class EditTagComponent implements OnInit {
+  @Output() onTagAdd = new EventEmitter<string>();
+
+  user_tag: string[] = [];
+  textResult: string = "";
 
-  user_tag: Array<string> = []
-  textResult: string = ""
   userInput(ev: any) {
-    console.log(ev)
-    this.textResult = ev.detail.value
+    this.textResult = ev.detail.value;
   }
+
   Add_tags() {
-    this.user_tag.push(this.textResult)
-    this.textResult = ""
+    if (this.textResult.trim()) {
+      this.user_tag.push(this.textResult.trim());
+      this.onTagAdd.emit(this.textResult.trim());
+      this.textResult = "";
+    }
   }
+
   Delete_tag(tag: string) {
-    let idx = this.user_tag.findIndex(item => item == this.textResult)
-    this.user_tag.splice(idx, 1)
+    const index = this.user_tag.indexOf(tag);
+    if (index > -1) {
+      this.user_tag.splice(index, 1);
+    }
   }
+
   constructor() { }
 
   ngOnInit() { }
-
 }

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

@@ -12,7 +12,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" [scrollY]="true">
   <!-- 分类导航 -->
   <div class="category-nav">
     <ion-toolbar>
@@ -44,18 +44,19 @@
     <div class="content-card" (click)="goToDetail(artwork.id)">
       <img [src]="artwork.image" [alt]="artwork.title" class="card-image">
       <div class="card-content">
-        <div class="title">{{artwork.title}} {{artwork.description}}</div>
+        <div class="title">{{artwork.title}}</div>
+        <div class="description">{{artwork.description}}</div>
         <div class="user-info">
           <div class="user">
-            <img src="../../assets/img/book1.png" alt="头像" class="avatar">
+            <img [src]="artwork.avatarUrl" [alt]="artwork.userName" class="avatar">
             <div class="info">
-              <span class="name">霸王别姬</span>
-              <span class="date">11-27</span>
+              <span class="name" style="font-size: 12px;">{{artwork.userName}}</span>
+              <span class="date">{{artwork.date}}</span>
             </div>
           </div>
           <div class="likes">
             <ion-icon name="heart-outline"></ion-icon>
-            <span>1687</span>
+            <span>{{artwork.likes}}</span>
           </div>
         </div>
       </div>
@@ -103,5 +104,5 @@
 
 <!-- 主内容区域添加 id -->
 <div class="ion-page" id="main-content">
-  <!-- 其他内容保持不变 -->
+  <!-- 其他内容持不变 -->
 </div>

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

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonMenu, IonList, IonItem, IonMenuButton } from '@ionic/angular/standalone';
-import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { Router } from '@angular/router';
 
 @Component({
@@ -8,7 +7,8 @@ import { Router } from '@angular/router';
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
+  imports: [
+    IonHeader, IonToolbar, IonTitle, IonContent,
     IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,
     IonMenu, IonList, IonItem, IonMenuButton
   ],
@@ -19,25 +19,41 @@ export class Tab3Page {
       id: '1',
       image: '../../assets/img/xingkong.png',
       title: '梵高-星空高清画作',
-      description: '致敬梵高 #艺术品 #星空'
+      description: '致敬梵高 #艺术品 #星空',
+      avatarUrl: '../../assets/img/book1.png',
+      userName: '星空艺术家',
+      date: '12-01',
+      likes: 1687
     },
     {
       id: '2',
       image: '../../assets/img/xiangrikui.png',
       title: '梵高《向日葵》',
-      description: '经典中的经典，笔触很牛！#花'
+      description: '经典中的经典，笔触很牛！#花',
+      avatarUrl: '../../assets/img/book2.png',
+      userName: '艺术鉴赏家',
+      date: '11-30',
+      likes: 2341
     },
     {
       id: '3',
       image: '../../assets/img/fangao.png',
       title: '梵高自画像',
-      description: '梵高生平自画像之其中🔟副👩‍🎨 #艺术欣赏 #美'
+      description: '梵高生平自画像之其中🔟副👩‍🎨 #艺术欣赏 #美',
+      avatarUrl: '../../assets/img/book3.png',
+      userName: '艺术探索者',
+      date: '11-29',
+      likes: 1892
     },
     {
       id: '4',
       image: '../../assets/img/cunzhuang.png',
       title: '阿尔小镇',
-      description: '走吧，梵高，去你最爱的阿尔看看，阿尔小镇'
+      description: '走吧，梵高，去你最爱的阿尔看看，阿尔小镇',
+      avatarUrl: '../../assets/img/book4.png',
+      userName: '风景画师',
+      date: '11-28',
+      likes: 2156
     }
   ];
 

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

@@ -10,14 +10,11 @@ import {
   folderOutline, readerOutline, cartOutline, thumbsUpOutline, ticketOutline, documentTextOutline,
   timeOutline, cloudDownloadOutline, bagCheckOutline, cardOutline, searchOutline, menuOutline,
   addCircleOutline, addOutline, optionsOutline, bookmarkOutline, notificationsOutline,
-  chevronBackOutline, chatbubblesOutline, refreshOutline, createOutline,
-  logOutOutline,
-  closeCircleOutline,
-  bulbOutline,
-  homeOutline,
-  peopleOutline,
-  trashOutline,
-  chatbubbleOutline
+  chevronBackOutline, chatbubblesOutline, refreshOutline, createOutline, logOutOutline,
+  closeCircleOutline, bulbOutline, homeOutline, peopleOutline, trashOutline, chatbubbleOutline,
+  informationCircleOutline,
+  pricetagOutline,
+  closeCircle,
 } from 'ionicons/icons';
 
 
@@ -43,7 +40,8 @@ export class TabsPage {
       cardOutline, searchOutline, menuOutline, addCircleOutline, addOutline, optionsOutline,
       bookmarkOutline, notificationsOutline, chevronBackOutline, chatbubblesOutline,
       refreshOutline, createOutline, logOutOutline, closeCircleOutline, bulbOutline,
-      homeOutline, peopleOutline, trashOutline, chatbubbleOutline
+      homeOutline, peopleOutline, trashOutline, chatbubbleOutline, informationCircleOutline,
+      pricetagOutline, closeCircle,
     });
   }
 }

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

@@ -58,7 +58,7 @@ export const routes: Routes = [
       },
       {
         path: 'art-detail/:id',
-        loadComponent: () => import('../art-detail/art-detail.page').then(m => m.ArtDetailPage)
+        loadComponent: () => import('../art-detail/art-detail.component').then((m) => m.ArtDetailComponent)
       },
     ],
   },

AIart-app/src/app/user-login/user-login.component.html

@@ -67,21 +67,34 @@
 
   @if(currentUser?.id) {
   <ion-card class="memo-card">
-    <h2 class="memo-title">兴趣跟踪表</h2>
-    <p class="memo-description">写下您感兴趣的学习方向或者心动的科普知识，便于您下次查找（点击标签可删除）</p>
+    <div class="memo-header" style="display: flex; align-items: center;">
+      <ion-icon name="bookmark-outline" style="margin-bottom: 12px;"></ion-icon>
+      <h2 class="memo-title">兴趣跟踪表</h2>
+    </div>
+
+    <p class="memo-description">
+      请写下您感兴趣的学习方向或者心动的科普知识，便于您下次查找
+    </p>
 
-    <edit-tag (onTagChange)="setTagsValue($event)"></edit-tag>
+    <div class="tag-editor">
+      <edit-tag (onTagAdd)="onTagAdd($event)"></edit-tag>
+    </div>
 
     @if(editTags.length > 0) {
-    <h2 class="memo-title">收藏夹</h2>
-    <ul class="tag-list">
-      @for(tag of editTags; track tag) {
-      <li class="tag-item">
-        <span>{{ tag }}</span>
-        <ion-icon name="close-circle-outline"></ion-icon>
-      </li>
-      }
-    </ul>
+    <div class="favorites-section">
+      <div class="section-header" style="display: flex; align-items: center;">
+        <h2 class="section-title">收藏夹</h2>
+      </div>
+
+      <div class="tag-list">
+        @for(tag of editTags; track tag) {
+        <div class="tag-item">
+          <span class="tag-text">{{ tag }}</span>
+          <ion-icon name="close-circle" class="delete-icon" (click)="deleteTag(tag)"></ion-icon>
+        </div>
+        }
+      </div>
+    </div>
     }
   </ion-card>
   }

AIart-app/src/app/user-login/user-login.component.ts

@@ -73,20 +73,49 @@ export class UserLoginComponent implements OnInit {
     openUserEditModal(this.modalCtrl)
   }
 
-  editTags: Array<String> = []
-  async setTagsValue(ev: any) {
+  editTags: string[] = [];
+
+  onTagAdd(newTag: string) {
+    // 检查标签是否已存在
+    if (!this.editTags.includes(newTag)) {
+      this.editTags.push(newTag);
+      this.saveTagsToUser(); // 保存到用户数据
+    } else {
+      // 可以添加一个提示说标签已存在
+      this.showToast('标签已存在');
+    }
+  }
+
+  deleteTag(tagToDelete: string) {
+    const index = this.editTags.indexOf(tagToDelete);
+    if (index > -1) {
+      this.editTags.splice(index, 1);
+      this.saveTagsToUser(); // 保存到用户数据
+    }
+  }
+
+  async saveTagsToUser() {
     let currentUser = new CloudUser();
-    let userPrompt = ``
     if (!currentUser?.id) {
       console.log("用户未登录，请登录后重试");
       let user = await openUserLoginModal(this.modalCtrl);
       if (!user?.id) {
-        return
+        return;
       }
       currentUser = user;
     }
-    //console.log("setTagsValue",ev);
-    this.editTags = ev;
+    // 这里可以添加保存标签到用户数据的逻辑
+    // 例如: currentUser.set('tags', this.editTags);
+    // await currentUser.save();
+  }
+
+  private async showToast(message: string) {
+    const toast = document.createElement('ion-toast');
+    toast.message = message;
+    toast.duration = 2000;
+    toast.position = 'top';
+    document.body.appendChild(toast);
+    await toast.present();
   }
 
 }