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

src/views/contentManagement/DramaManagementView.vue

@@ -5,6 +5,7 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import {
   changeDramaStatusApi,
   createDramaApi,
@@ -63,6 +64,12 @@ const coverDisplayName = computed(
   () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
 )
 
+const pageCoverPreviewList = computed(() => list.value.map((item) => item.cover).filter(Boolean))
+
+function coverPreviewIndex(row) {
+  return Math.max(0, pageCoverPreviewList.value.indexOf(row.cover))
+}
+
 const statusOptions = [
   { code: 'draft', text: '草稿' },
   { code: 'reviewing', text: '审核中' },
@@ -354,10 +361,15 @@ onMounted(async () => {
       <el-table-column label="短剧名称" min-width="220"
         ><template #default="{ row }"
           ><div class="drama-cell"
-            ><img v-if="row.cover" :src="row.cover" class="drama-cover-image" /><div
-              v-else
-              class="drama-cover"
-              >暂无封面</div
+            ><AppImage
+              v-if="row.cover"
+              :src="row.cover"
+              :preview-list="pageCoverPreviewList"
+              :initial-index="coverPreviewIndex(row)"
+              fit="cover"
+              class="drama-cover-image"
+              :alt="row.title"
+            /><div v-else class="drama-cover">暂无封面</div
             ><div
               ><b>{{ row.title }}</b></div
             ></div