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

src/views/creator-center/DramaEditView.vue

@@ -1,7 +1,9 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
+import { computed } from 'vue'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useRbac } from '@/stores/rbac'
@@ -47,6 +49,14 @@ const {
   withdraw
 } = useDramaEdit()
 
+const episodeCoverPreviewList = computed(() =>
+  episodes.value.map((row) => row.cover).filter(Boolean)
+)
+
+function episodeCoverPreviewIndex(row) {
+  return Math.max(0, episodeCoverPreviewList.value.indexOf(row.cover))
+}
+
 function back() {
   window.history.back()
 }
@@ -193,7 +203,15 @@ function requestDramaCover(options) {
         <el-table-column label="封面" width="88">
           <template #default="{ row }">
             <div class="creator-episode-cover">
-              <img v-if="row.cover" :src="row.cover" alt="" />
+              <AppImage
+                v-if="row.cover"
+                :src="row.cover"
+                :preview-list="episodeCoverPreviewList"
+                :initial-index="episodeCoverPreviewIndex(row)"
+                fit="cover"
+                class="creator-episode-image"
+                :alt="row.title"
+              />
               <span v-else>无</span>
             </div>
           </template>