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

src/views/contentManagement/BannerManagementView.vue

@@ -1,9 +1,10 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import {
   createBannerApi,
   deleteBannerApi,
@@ -53,6 +54,12 @@ const linkTypeOptions = [
   { code: 'URL', text: '打开链接' }
 ]
 
+const bannerPreviewList = computed(() => list.value.map((item) => item.imageUrl).filter(Boolean))
+
+function bannerPreviewIndex(row) {
+  return Math.max(0, bannerPreviewList.value.indexOf(row.imageUrl))
+}
+
 async function load() {
   loading.value = true
   try {
@@ -253,7 +260,15 @@ onMounted(async () => {
     >
       <el-table-column label="预览" width="190">
         <template #default="{ row }">
-          <img v-if="row.imageUrl" :src="row.imageUrl" class="banner-thumb" />
+          <AppImage
+            v-if="row.imageUrl"
+            :src="row.imageUrl"
+            :preview-list="bannerPreviewList"
+            :initial-index="bannerPreviewIndex(row)"
+            fit="cover"
+            class="banner-thumb"
+            :alt="row.title"
+          />
           <div v-else class="banner-thumb-empty">暂无图片</div>
         </template>
       </el-table-column>