feat(web): 支持后台列表图片大图预览

src/views/userManagement/AppUsersView.vue

@@ -3,6 +3,7 @@
 <script setup>
 import { computed } from 'vue'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { useRbac } from '@/stores/rbac'
 import {
@@ -70,6 +71,12 @@ function avatarText(row) {
   return name.slice(0, 1).toUpperCase()
 }
 
+const avatarPreviewList = computed(() => users.value.map((row) => row.avatarUrl).filter(Boolean))
+
+function avatarPreviewIndex(row) {
+  return Math.max(0, avatarPreviewList.value.indexOf(row.avatarUrl))
+}
+
 function canBeBanned(row) {
   return row.status !== 'banned' && row.status !== 'deactivated'
 }
@@ -145,7 +152,15 @@ function canBeBanned(row) {
         <template #default="{ row }">
           <div class="app-user-cell">
             <span class="app-user-avatar">
-              <img v-if="row.avatarUrl" :src="row.avatarUrl" alt="" />
+              <AppImage
+                v-if="row.avatarUrl"
+                :src="row.avatarUrl"
+                :preview-list="avatarPreviewList"
+                :initial-index="avatarPreviewIndex(row)"
+                fit="cover"
+                class="app-user-avatar-image"
+                :alt="row.nickname || row.uid"
+              />
               <template v-else>{{ avatarText(row) }}</template>
             </span>
             <div class="app-user-meta">
@@ -217,7 +232,15 @@ function canBeBanned(row) {
       <template v-if="detail">
         <div class="app-user-summary">
           <span class="app-user-avatar">
-            <img v-if="detail.avatarUrl" :src="detail.avatarUrl" alt="" />
+            <AppImage
+              v-if="detail.avatarUrl"
+              :src="detail.avatarUrl"
+              :preview-list="avatarPreviewList"
+              :initial-index="avatarPreviewIndex(detail)"
+              fit="cover"
+              class="app-user-avatar-image"
+              :alt="detail.nickname || detail.uid"
+            />
             <template v-else>{{ avatarText(detail) }}</template>
           </span>
           <div class="app-user-meta">