feat: show avatars in my comments

uniapp/src/pages/my_comments/my_comments.vue

@@ -10,7 +10,12 @@
         <view class="my-comments-page">
             <view v-for="item in commentList" :key="item.id" class="comment-card" @tap="goPost(item)">
                 <view class="comment-card__head">
-                    <text class="comment-card__label">{{ item.reply_to ? '回复了评论' : '评论了帖子' }}</text>
+                    <view class="comment-card__author">
+                        <image class="comment-card__avatar" :src="getCommentAvatar(item)" mode="aspectFill"
+                            @error="handleAvatarError" />
+                        <text class="comment-card__name">{{ item.user?.nickname || '我' }}</text>
+                        <text class="comment-card__label">{{ item.reply_to ? '回复了评论' : '评论了帖子' }}</text>
+                    </view>
                     <text class="comment-card__time">{{ formatTime(item.create_time) }}</text>
                 </view>
 
@@ -45,6 +50,7 @@ import { deleteComment, getMyCommentLists } from '@/api/community'
 
 const paging = shallowRef()
 const commentList = ref<any[]>([])
+const avatarLoadFailed = ref(false)
 
 onShow(() => {
     paging.value?.reload()
@@ -84,6 +90,14 @@ const confirmDelete = (item: any) => {
     })
 }
 
+const getCommentAvatar = (item: any) => {
+    return avatarLoadFailed.value ? '/static/images/avatar.png' : (item.user?.avatar || '/static/images/avatar.png')
+}
+
+const handleAvatarError = () => {
+    avatarLoadFailed.value = true
+}
+
 const parseTimestamp = (value: string | number) => {
     if (typeof value === 'number') return value
     return new Date(String(value).replace(/-/g, '/')).getTime() / 1000
@@ -130,7 +144,33 @@ const formatTime = (value: string | number) => {
     margin-bottom: 16rpx;
 }
 
+.comment-card__author {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+}
+
+.comment-card__avatar {
+    width: 40rpx;
+    height: 40rpx;
+    flex-shrink: 0;
+    margin-right: 10rpx;
+    border-radius: 50%;
+    background: #eef2f7;
+}
+
+.comment-card__name {
+    max-width: 180rpx;
+    overflow: hidden;
+    color: #344055;
+    font-size: 24rpx;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .comment-card__label {
+    margin-left: 10rpx;
     color: #687385;
     font-size: 24rpx;
 }