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

<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>