refactor: 抽取 MediaCard 媒体网格卡组件

src/components/MediaCard.vue

@@ -0,0 +1,37 @@
+<template>
+  <article>
+    <div class="media-visual" :class="visualClass">
+      <span v-if="variant === 'live'" class="live-corner"><i></i>LIVE</span>
+      <t-button shape="square" variant="text" @click="$emit('play')">
+        <svg><use href="#i-play" /></svg>
+      </t-button>
+      <small v-if="variant === 'live'">{{ source }}</small>
+      <small v-else class="media-duration">{{ duration }}</small>
+    </div>
+    <div class="media-card-copy">
+      <span><strong>{{ name }}</strong><small>{{ desc }}</small></span>
+      <t-button
+        class="icon-button"
+        shape="square"
+        variant="text"
+        @click="$emit('action')"
+      >
+        <svg>
+          <use :href="variant === 'live' ? '#i-more' : '#i-download'" />
+        </svg>
+      </t-button>
+    </div>
+  </article>
+</template>
+
+<script setup>
+defineProps({
+  variant: { type: String, required: true }, // 'live' | 'video'
+  name: { type: String, required: true },
+  desc: { type: String, required: true },
+  visualClass: { type: String, required: true },
+  source: { type: String, default: '' },
+  duration: { type: String, default: '' }
+})
+defineEmits(['play', 'action'])
+</script>

src/views/MediaView/MediaView.vue

@@ -23,17 +23,17 @@
           <span class="media-live-count"><i></i>{{ liveStreams.length }} 路直播中</span>
         </div>
         <div class="live-media-grid">
-          <article v-for="s in liveStreams" :key="s.id">
-            <div class="media-visual" :class="s.visualClass">
-              <span class="live-corner"><i></i>LIVE</span>
-              <t-button shape="square" variant="text" @click="openLive(s)"><svg><use href="#i-play" /></svg></t-button>
-              <small>{{ s.source }}</small>
-            </div>
-            <div class="media-card-copy">
-              <span><strong>{{ s.name }}</strong><small>{{ s.desc }}</small></span>
-              <t-button class="icon-button" shape="square" variant="text" @click="ui.toast('更多操作')"><svg><use href="#i-more" /></svg></t-button>
-            </div>
-          </article>
+          <MediaCard
+            v-for="s in liveStreams"
+            :key="s.id"
+            variant="live"
+            :name="s.name"
+            :desc="s.desc"
+            :source="s.source"
+            :visual-class="s.visualClass"
+            @play="openLive(s)"
+            @action="ui.toast('更多操作')"
+          />
           <div v-if="!liveStreams.length" class="table-empty" style="grid-column:1/-1">暂无直播流</div>
         </div>
       </div>
@@ -47,16 +47,17 @@
           </div>
         </div>
         <div class="media-grid">
-          <article v-for="v in videos" :key="v.id">
-            <div class="media-visual" :class="v.visualClass">
-              <t-button shape="square" variant="text" @click="ui.toast('播放：' + v.name)"><svg><use href="#i-play" /></svg></t-button>
-              <small class="media-duration">{{ v.duration }}</small>
-            </div>
-            <div class="media-card-copy">
-              <span><strong>{{ v.name }}</strong><small>{{ v.desc }}</small></span>
-              <t-button class="icon-button" shape="square" variant="text" @click="download(v)"><svg><use href="#i-download" /></svg></t-button>
-            </div>
-          </article>
+          <MediaCard
+            v-for="v in videos"
+            :key="v.id"
+            variant="video"
+            :name="v.name"
+            :desc="v.desc"
+            :duration="v.duration"
+            :visual-class="v.visualClass"
+            @play="ui.toast('播放：' + v.name)"
+            @action="download(v)"
+          />
           <div v-if="!videos.length" class="table-empty" style="grid-column:1/-1">暂无视频资产</div>
         </div>
       </div>
@@ -70,6 +71,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useUiStore } from '@/stores/modules/uiStore'
 import request from '@/utils/http'
 import * as urls from '@/config/urls'
+import MediaCard from '@/components/MediaCard.vue'
 
 const route = useRoute()
 const router = useRouter()