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>

src/views/creator-center/WorkspaceView.vue

@@ -1,9 +1,10 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useCreatorAccess } from './composables/useCreatorAccess'
@@ -43,6 +44,14 @@ const {
 
 const activeTab = ref('dramas')
 
+const workspaceCoverPreviewList = computed(() =>
+  (dramas.rows || []).map((row) => row.cover).filter(Boolean)
+)
+
+function workspaceCoverPreviewIndex(row) {
+  return Math.max(0, workspaceCoverPreviewList.value.indexOf(row.cover))
+}
+
 function onTabChange(name) {
   if (name === 'notices' && !notices.loaded) loadNotices()
 }
@@ -149,7 +158,15 @@ function openEdit(row) {
               <template #default="{ row }">
                 <div class="creator-drama-cell">
                   <div class="creator-drama-cover">
-                    <img v-if="row.cover" :src="row.cover" alt="" />
+                    <AppImage
+                      v-if="row.cover"
+                      :src="row.cover"
+                      :preview-list="workspaceCoverPreviewList"
+                      :initial-index="workspaceCoverPreviewIndex(row)"
+                      fit="cover"
+                      class="creator-drama-image"
+                      :alt="row.title"
+                    />
                     <span v-else>{{ (row.title || '?').slice(0, 1) }}</span>
                   </div>
                   <div class="creator-drama-meta">