群聊

pages/tabs/messages.vue

@@ -37,6 +37,9 @@
         <view class="av-wrap">
           <image v-if="c.avatar && c.type !== 'files'" class="av" :src="c.avatar" mode="aspectFill" />
           <view v-else-if="c.type === 'files'" class="av"><fy-file-mark /></view>
+          <view v-else-if="facesOf(c).length" class="av mosaic">
+            <image v-for="f in facesOf(c)" :key="f.id" class="tile" :src="f.avatar" mode="aspectFill" />
+          </view>
           <view v-else class="av txt" :class="avClass(c)">{{ avText(c) }}</view>
           <text v-if="c.unread && !c.muted" class="badge abs">{{ c.unread > 99 ? '99+' : c.unread }}</text>
           <text v-else-if="c.unread && c.muted" class="dotu" />
@@ -102,6 +105,10 @@ export default {
     reload() {
       store.refreshPeoplePhotos().finally(() => this.pull())
     },
+    facesOf(c) {
+      if (!c || c.type !== 'group' || c.avatar) return []
+      return (c.memberIds || []).map((id) => store.person(id)).filter((p) => p && p.avatar).slice(0, 4)
+    },
     avText(c) {
       if (c.type === 'work') return '工'
       if (c.type === 'group') return '群'
@@ -187,6 +194,8 @@ export default {
 .av.work { background: #1677FF; color: #fff; }
 .av.file { background: #F3F6FB; color: #4B5563; }
 .av.plain { background: #E8F1FF; color: #1677FF; }
+.mosaic { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4rpx; background: #E8F1FF; padding: 6rpx; box-sizing: border-box; }
+.tile { width: 38rpx; height: 38rpx; border-radius: 8rpx; }
 .abs { position: absolute; top: -8rpx; right: -8rpx; }
 .dotu { position: absolute; top: -4rpx; right: -4rpx; width: 16rpx; height: 16rpx; border-radius: 50%; background: #DC2626; }
 .meta { flex: 1; margin-left: 20rpx; min-width: 0; padding: 8rpx 0 18rpx; border-bottom: 1rpx solid #F0F2F5; }