|
@@ -1,7 +1,7 @@
|
|
|
<ion-header class="ion-no-border">
|
|
|
<ion-toolbar>
|
|
|
<ion-buttons slot="start">
|
|
|
- <ion-back-button defaultHref="/tabs/tab3"></ion-back-button>
|
|
|
+ <ion-back-button (click)="goBack()" defaultHref="/tabs/tab3" text=""></ion-back-button>
|
|
|
</ion-buttons>
|
|
|
<ion-title>作品详情</ion-title>
|
|
|
<ion-buttons slot="end">
|
|
@@ -13,44 +13,87 @@
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
- <div class="art-detail-container" *ngIf="artwork">
|
|
|
- <div class="image-container">
|
|
|
- <img [src]="artwork.image" [alt]="artwork.title">
|
|
|
+ @if (artwork) {
|
|
|
+ <div class="artwork-container">
|
|
|
+
|
|
|
+ <div class="image-section">
|
|
|
+ <img [src]="artwork.image" [alt]="artwork.title" class="main-image">
|
|
|
</div>
|
|
|
|
|
|
- <div class="info-container">
|
|
|
- <h2>{{artwork.title}}</h2>
|
|
|
- <p class="description">{{artwork.description}}</p>
|
|
|
+
|
|
|
+ <div class="info-section">
|
|
|
+ <div class="artwork-header">
|
|
|
+ <h1>{{artwork.title}}</h1>
|
|
|
+ <div class="category-tag">{{artwork.category}}</div>
|
|
|
+ </div>
|
|
|
|
|
|
<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 class="user">
|
|
|
+ <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>
|
|
|
|
|
|
- <div class="interaction-bar">
|
|
|
- <div class="likes" (click)="toggleLike()">
|
|
|
- <ion-icon [name]="artwork.isLiked ? 'heart' : 'heart-outline'"
|
|
|
- [color]="artwork.isLiked ? 'danger' : 'medium'">
|
|
|
- </ion-icon>
|
|
|
+ <p class="description">{{artwork.description}}</p>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="action-buttons">
|
|
|
+ <ion-button fill="clear" (click)="toggleLike()">
|
|
|
+ <ion-icon [name]="isLiked ? 'heart' : 'heart-outline'" [color]="isLiked ? 'danger' : 'medium'"></ion-icon>
|
|
|
<span>{{artwork.likes}}</span>
|
|
|
- </div>
|
|
|
- <div class="share">
|
|
|
- <ion-icon name="share-social-outline"></ion-icon>
|
|
|
- <span>分享</span>
|
|
|
- </div>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button fill="clear" (click)="toggleSave()">
|
|
|
+ <ion-icon [name]="isSaved ? 'bookmark' : 'bookmark-outline'"></ion-icon>
|
|
|
+ <span>收藏</span>
|
|
|
+ </ion-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
<div class="comments-section">
|
|
|
- <h3>评论</h3>
|
|
|
+ <h2>评论 ({{artwork.comments?.length || 0}})</h2>
|
|
|
+
|
|
|
+
|
|
|
<div class="comment-input">
|
|
|
- <ion-input placeholder="写下你的评论..."></ion-input>
|
|
|
- <ion-button expand="block">发送</ion-button>
|
|
|
+ <ion-textarea [(ngModel)]="commentText" placeholder="写下你的评论..." rows="3"></ion-textarea>
|
|
|
+ <ion-button expand="block" (click)="submitComment()">发表评论</ion-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="comments-list">
|
|
|
+ @for(comment of artwork.comments; track comment.id) {
|
|
|
+ <div class="comment-item">
|
|
|
+ <div class="comment-header">
|
|
|
+ <img [src]="comment.avatarUrl" [alt]="comment.userName" class="comment-avatar">
|
|
|
+ <div class="comment-info">
|
|
|
+ <span class="comment-username">{{comment.userName}}</span>
|
|
|
+ <span class="comment-date">{{comment.date}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="comment-content">{{comment.content}}</p>
|
|
|
+ <div class="comment-actions">
|
|
|
+ <ion-button fill="clear" size="small">
|
|
|
+ <ion-icon name="heart-outline"></ion-icon>
|
|
|
+ <span>{{comment.likes}}</span>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button fill="clear" size="small">
|
|
|
+ <ion-icon name="chatbubble-outline"></ion-icon>
|
|
|
+ <span>回复</span>
|
|
|
+ </ion-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ } @else {
|
|
|
+ <div class="error-message">
|
|
|
+ <ion-icon name="alert-circle-outline"></ion-icon>
|
|
|
+ <p>作品信息加载失败</p>
|
|
|
+ <ion-button (click)="goBack()">返回</ion-button>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
</ion-content>
|