1. 小程序端

2. 视频优化

client/src/App.vue

@@ -90,6 +90,7 @@ const isFullWidthPage = computed(() => {
     || path.startsWith('/blog/')
     || path.startsWith('/works/')
     || path.startsWith('/columns')
+    || path.startsWith('/videos/')
 })
 
 // 应用网站配置到页面标题和meta标签

client/src/components/admin/ImagePicker.vue

@@ -165,7 +165,6 @@ const uploadFile = async (file: File) => {
     if (props.categoryId) {
       formData.append('categoryId', props.categoryId.toString())
     }
-    formData.append('storageType', 'aliyun')
 
     const result = await parseApiResponse<{ fileUrl: string }>(await authFetch(`${API_BASE}/admin/attachments/upload`, {
       method: 'POST',

client/src/components/admin/ImageUpload.vue

@@ -366,7 +366,6 @@ const uploadSingleFile = async (file: File): Promise<string | null> => {
     if (props.categoryId) {
       formData.append('categoryId', props.categoryId.toString())
     }
-    formData.append('storageType', 'aliyun')
 
     const result = await parseApiResponse<{ fileUrl: string }>(await authFetch(`${API_BASE}/admin/attachments/upload`, {
       method: 'POST',

client/src/components/admin/VideoUpload.vue

@@ -46,7 +46,6 @@ const uploadFile = async (file: File) => {
     const formData = new FormData()
     formData.append('file', file)
     if (props.categoryId) formData.append('categoryId', props.categoryId.toString())
-    formData.append('storageType', 'aliyun')
     const result = await parseApiResponse<{ fileUrl: string }>(
       await authFetch(`${API_BASE}/admin/attachments/upload`, { method: 'POST', headers: {}, body: formData })
     )

client/src/composables/useMdMediaUpload.ts

@@ -14,7 +14,6 @@ export function useMdMediaUpload(editorRef: Ref<ExposeParam | undefined>) {
     const formData = new FormData()
     formData.append('file', file)
     formData.append('categoryId', '1')
-    formData.append('storageType', 'aliyun')
 
     const response = await authFetch('/api/admin/attachments/upload', {
       method: 'POST',

client/src/pages/VideoAlbumDetail.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="page-section block">
-    <div class="max-w-6xl mx-auto pb-12 md:pb-20">
+  <section class="page-section block w-full">
+    <div class="max-w-[90rem] mx-auto w-full pt-20 md:pt-32 px-4 md:px-6 pb-12 md:pb-20">
       <button @click="router.push('/videos')" class="mb-8 text-art-muted hover:text-art-text flex items-center gap-2 text-sm">
         <Icon name="arrow-left" :size="16" /> 返回视频
       </button>

client/src/pages/VideoDetail.vue

@@ -1,28 +1,71 @@
 <template>
-  <section class="page-section block">
-    <div class="max-w-6xl mx-auto pb-12 md:pb-20">
+  <section class="page-section block w-full">
+    <div class="max-w-[90rem] mx-auto w-full pt-20 md:pt-32 px-4 md:px-6 pb-12 md:pb-20">
       <button @click="$router.back()" class="mb-8 text-art-muted hover:text-art-text flex items-center gap-2 text-sm">
         <Icon name="arrow-left" :size="16" /> 返回
       </button>
 
-      <div v-if="loading" class="flex justify-center py-20"><div class="animate-spin h-10 w-10 border-t-2 border-art-accent rounded-full"></div></div>
+      <div v-if="loading" class="flex justify-center py-20">
+        <div class="animate-spin h-10 w-10 border-t-2 border-art-accent rounded-full" />
+      </div>
       <div v-else-if="error" class="text-red-400 text-center py-12">
         <p class="mb-4">{{ error }}</p>
         <button
           type="button"
           class="px-4 py-2 border border-art-border rounded-full text-sm text-art-text hover:border-art-accent transition-colors"
           @click="load"
-        >重试</button>
+        >
+          重试
+        </button>
       </div>
 
       <template v-else-if="video">
         <h1 class="font-serif text-3xl md:text-4xl text-art-text mb-6">{{ video.title }}</h1>
 
+        <!-- 播放区：未挂载前封面；挂载后 DPlayer + 暂停时大按钮遮罩 -->
         <div
           v-if="video.videoUrl"
-          ref="playerRef"
-          class="w-full aspect-video rounded-xl overflow-hidden bg-black mb-6"
-        ></div>
+          class="w-full aspect-video rounded-xl overflow-hidden bg-black mb-6 relative"
+        >
+          <!-- DPlayer 容器：playerReady 后始终保留，暂停不销毁 -->
+          <div
+            v-show="playerReady"
+            ref="playerRef"
+            class="absolute inset-0 w-full h-full"
+          />
+
+          <!-- 大播放按钮：初始 / 暂停时显示；点击开始或继续播 -->
+          <div
+            v-if="showPlayOverlay"
+            class="absolute inset-0 z-20 cursor-pointer group"
+            role="button"
+            tabindex="0"
+            aria-label="播放视频"
+            @click="onOverlayPlay"
+            @keydown.enter.prevent="onOverlayPlay"
+            @keydown.space.prevent="onOverlayPlay"
+          >
+            <img
+              v-if="!playerReady && coverSrc"
+              :src="coverSrc"
+              class="w-full h-full object-cover"
+              alt=""
+            />
+            <div
+              v-else-if="!playerReady"
+              class="w-full h-full bg-black/60"
+            />
+            <div
+              class="absolute inset-0 transition-colors"
+              :class="playerReady ? 'bg-black/40' : 'bg-black/35 group-hover:bg-black/25'"
+            />
+            <div
+              class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 md:w-24 md:h-24 rounded-full border border-white/40 bg-black/40 backdrop-blur-md flex items-center justify-center transition-transform group-hover:scale-105 group-active:scale-95 z-10"
+            >
+              <Icon name="play" :size="32" class="text-white ml-1" />
+            </div>
+          </div>
+        </div>
         <div
           v-else
           class="w-full aspect-video rounded-xl overflow-hidden bg-black/40 border border-art-border flex items-center justify-center mb-6"
@@ -39,10 +82,11 @@
             <router-link
               :to="`/videos/albums/${video.albumContext.albumId}`"
               class="text-xs text-art-accent hover:underline"
-            >返回专辑</router-link>
+            >
+              返回专辑
+            </router-link>
           </div>
           <div class="flex gap-3 overflow-x-auto pb-2">
-            <!-- 前序视频 -->
             <div
               v-for="pv in video.albumContext.prevVideos"
               :key="'prev-' + pv.id"
@@ -54,14 +98,14 @@
               </div>
               <p class="text-xs text-art-muted mt-1 line-clamp-2 group-hover:text-art-text">{{ pv.title }}</p>
             </div>
-            <!-- 当前视频高亮 -->
             <div class="shrink-0 w-36">
               <div class="aspect-video rounded-lg overflow-hidden border-2 border-art-accent bg-black/40">
                 <img v-if="video.cover" :src="video.cover" class="w-full h-full object-cover" alt="" />
               </div>
-              <p class="text-xs text-art-accent mt-1 line-clamp-2 font-medium">正在播放</p>
+              <p class="text-xs text-art-accent mt-1 line-clamp-2 font-medium">
+                {{ playerReady && !showPlayOverlay ? '正在播放' : '当前视频' }}
+              </p>
             </div>
-            <!-- 后续视频 -->
             <div
               v-for="nv in video.albumContext.nextVideos"
               :key="'next-' + nv.id"
@@ -89,7 +133,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+/**
+ * 视频详情：封面大按钮点播；暂停时再次显示大按钮（不销毁播放器）。
+ * 恢复 rounded-xl / rounded-lg 与 w-full，避免 PC 端观感变窄变生硬。
+ */
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import DPlayer from 'dplayer'
 import 'dplayer/dist/DPlayer.min.css'
@@ -101,31 +149,86 @@ const router = useRouter()
 const loading = ref(true)
 const error = ref('')
 const video = ref<VideoDetailItem | null>(null)
+/** 已挂载 DPlayer */
+const playerReady = ref(false)
+/** 初始或暂停时显示大播放按钮 */
+const showPlayOverlay = ref(true)
 const playerRef = ref<HTMLElement | null>(null)
 let dp: DPlayer | null = null
 
-/** 销毁 DPlayer 实例 */
-const destroyPlayer = () => {
-  if (dp) { dp.destroy(); dp = null }
+const coverSrc = computed(() => video.value?.poster || video.value?.cover || '')
+
+/** 销毁 DPlayer，释放资源 */
+function destroyPlayer() {
+  if (dp) {
+    dp.destroy()
+    dp = null
+  }
+  playerReady.value = false
 }
 
-/** 创建 DPlayer 播放器 */
-const initPlayer = async () => {
-  destroyPlayer()
-  if (!playerRef.value || !video.value?.videoUrl) return
-  await nextTick()
-  dp = new DPlayer({
-    container: playerRef.value,
-    video: { url: video.value.videoUrl, pic: video.value.poster || video.value.cover },
-    theme: '#d4b383',
-    lang: 'zh-cn',
+/** 绑定 play/pause，驱动大按钮显隐 */
+function bindPlayerEvents(player: DPlayer) {
+  player.on('play', () => {
+    showPlayOverlay.value = false
+  })
+  player.on('pause', () => {
+    showPlayOverlay.value = true
   })
 }
 
-/** 加载视频详情 */
-const load = async () => {
+/** 首次创建播放器并播放 */
+async function initPlayer() {
+  destroyPlayer()
+  playerReady.value = true
+  await nextTick()
+  if (!playerRef.value || !video.value?.videoUrl) {
+    playerReady.value = false
+    return
+  }
+  dp = new DPlayer({
+    container: playerRef.value,
+    video: {
+      url: video.value.videoUrl,
+      pic: video.value.poster || video.value.cover,
+    },
+    autoplay: false,
+    theme: '#d4b383',
+    lang: 'zh-cn',
+  })
+  bindPlayerEvents(dp)
+  try {
+    dp.play()
+    showPlayOverlay.value = false
+  } catch {
+    showPlayOverlay.value = true
+  }
+}
+
+/**
+ * 点击大按钮：未就绪则初始化；已就绪则继续 play。
+ * 用户手势触发，利于移动端绕过自动播限制。
+ */
+async function onOverlayPlay() {
+  if (!video.value?.videoUrl) return
+  if (!playerReady.value || !dp) {
+    showPlayOverlay.value = false
+    await initPlayer()
+    return
+  }
+  try {
+    dp.play()
+    showPlayOverlay.value = false
+  } catch {
+    showPlayOverlay.value = true
+  }
+}
+
+/** 加载视频详情；切换条目时重置播放态 */
+async function load() {
   loading.value = true
   error.value = ''
+  showPlayOverlay.value = true
   destroyPlayer()
   try {
     video.value = await fetchVideo(route.params.id as string)
@@ -137,17 +240,17 @@ const load = async () => {
   }
 }
 
-watch([video, playerRef, loading], async ([v, el, isLoading]) => {
-  if (isLoading || !v?.videoUrl || !el) return
-  await nextTick()
-  initPlayer()
-}, { flush: 'post' })
-
 onMounted(load)
 watch(() => route.params.id, load)
-onBeforeUnmount(destroyPlayer)
+onBeforeUnmount(() => {
+  destroyPlayer()
+  showPlayOverlay.value = true
+})
 </script>
 
 <style scoped>
-:deep(.dplayer) { width: 100% !important; height: 100% !important; }
+:deep(.dplayer) {
+  width: 100% !important;
+  height: 100% !important;
+}
 </style>

client/src/pages/Videos.vue

@@ -1,197 +1,339 @@
 <template>
   <section id="videos" class="page-section block animate-slide-down">
-    <div class="max-w-6xl mx-auto pb-12 md:pb-20">
-      <div class="mb-12">
+    <div class="max-w-6xl mx-auto w-full pb-12 md:pb-20">
+      <div class="mb-10">
         <h2 class="font-serif text-5xl italic text-art-text mb-4">视频</h2>
         <p class="text-art-muted">精选视频内容与系列专辑。</p>
       </div>
 
-      <!-- 分类 Tab 快捷筛选 -->
-      <div class="flex flex-wrap gap-2 mb-8">
+      <!-- 主 Tab：默认全部视频，分类/专辑收进第二页 -->
+      <nav class="flex items-end gap-8 mb-10 border-b border-art-border" aria-label="视频浏览切换">
         <button
           type="button"
-          class="px-4 py-1.5 rounded-full text-sm border transition-colors"
-          :class="activeCategory === 0 ? 'border-art-accent text-art-accent bg-art-accent/10' : 'border-art-border text-art-muted hover:text-art-text'"
-          @click="selectCategory(0)"
-        >全部</button>
+          class="relative pb-3 text-sm tracking-wide transition-colors"
+          :class="mainTab === 'videos' ? 'text-art-text' : 'text-art-muted hover:text-art-text'"
+          @click="switchMainTab('videos')"
+        >
+          全部视频
+          <span
+            v-if="mainTab === 'videos'"
+            class="absolute left-0 right-0 -bottom-px h-0.5 bg-art-accent"
+          />
+        </button>
         <button
-          v-for="cat in categories"
-          :key="cat.id"
           type="button"
-          class="px-4 py-1.5 rounded-full text-sm border transition-colors"
-          :class="activeCategory === cat.id ? 'border-art-accent text-art-accent bg-art-accent/10' : 'border-art-border text-art-muted hover:text-art-text'"
-          @click="selectCategory(cat.id)"
-        >{{ cat.name }}</button>
-      </div>
+          class="relative pb-3 text-sm tracking-wide transition-colors"
+          :class="mainTab === 'browse' ? 'text-art-text' : 'text-art-muted hover:text-art-text'"
+          @click="switchMainTab('browse')"
+        >
+          分类 &amp; 专辑
+          <span
+            v-if="mainTab === 'browse'"
+            class="absolute left-0 right-0 -bottom-px h-0.5 bg-art-accent"
+          />
+        </button>
+      </nav>
 
-      <!-- 分类概览卡片 -->
-      <div v-if="categories.length" class="mb-14">
-        <h3 class="font-mono text-xs text-art-muted uppercase tracking-widest mb-6">分类</h3>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div
-            v-for="cat in categories"
-            :key="'card-' + cat.id"
-            class="group p-5 rounded-xl border cursor-pointer transition-colors"
-            :class="activeCategory === cat.id ? 'border-art-accent/50 bg-art-accent/5' : 'border-art-border hover:border-art-accent/30 hover:bg-art-text/5'"
-            @click="selectCategory(cat.id)"
-          >
-            <h4 class="text-art-text font-medium group-hover:text-art-accent transition-colors">{{ cat.name }}</h4>
-            <p v-if="cat.description" class="text-xs text-art-muted mt-2 line-clamp-2">{{ cat.description }}</p>
-            <div class="flex gap-4 mt-3 text-xs text-art-muted">
-              <span>{{ cat.videoCount ?? 0 }} 个视频</span>
-              <span>{{ cat.albumCount ?? 0 }} 个专辑</span>
-            </div>
-          </div>
-        </div>
+      <div v-if="loading" class="flex justify-center py-20">
+        <div class="animate-spin h-10 w-10 border-t-2 border-art-accent rounded-full" />
       </div>
-      <div v-else-if="!loading && !error" class="mb-10 text-center text-art-muted text-sm py-6 border border-dashed border-art-border rounded-xl">
-        暂无视频分类，请先在后台创建分类
-      </div>
-
-      <div v-if="loading" class="flex justify-center py-20"><div class="animate-spin h-10 w-10 border-t-2 border-art-accent rounded-full"></div></div>
 
       <div v-else-if="error" class="text-center py-12">
         <p class="text-red-400 mb-4">{{ error }}</p>
         <button
           type="button"
           class="px-4 py-2 border border-art-border rounded-full text-sm text-art-text hover:border-art-accent hover:text-art-accent transition-colors"
-          @click="loadAll"
-        >重试</button>
+          @click="retry"
+        >
+          重试
+        </button>
       </div>
 
-      <template v-else>
-        <!-- 专辑 -->
-        <div v-if="albums.length" class="mb-16">
-          <h3 class="font-mono text-xs text-art-muted uppercase tracking-widest mb-6">专辑</h3>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            <div
-              v-for="album in albums"
-              :key="album.id"
-              class="group rounded-xl overflow-hidden border border-art-border hover:border-art-accent/40 transition-colors"
-            >
-              <div
-                class="aspect-video bg-gray-900 overflow-hidden cursor-pointer"
-                @click="router.push(`/videos/albums/${album.id}`)"
+      <!-- Tab 面板：out-in 淡入上移，切换时不走全页 loading 以免打断动画 -->
+      <Transition v-else name="videos-tab" mode="out-in">
+        <div :key="mainTab" class="videos-tab-panel">
+          <!-- 全部视频 -->
+          <template v-if="mainTab === 'videos'">
+            <div v-if="categories.length" class="mb-8">
+              <label class="sr-only" for="video-cat-filter">按分类筛选</label>
+              <select
+                id="video-cat-filter"
+                class="bg-transparent border-0 border-b border-art-border text-sm text-art-text py-1.5 pr-8 focus:outline-none focus:border-art-accent cursor-pointer"
+                :value="activeCategory"
+                @change="onVideoFilterChange"
               >
-                <img v-if="album.cover" :src="album.cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="" />
-              </div>
-              <!-- 专辑预览视频缩略图 -->
-              <div
-                v-if="album.previewVideos?.length"
-                class="flex gap-1 px-2 py-2 bg-black/30 border-t border-art-border overflow-x-auto"
-              >
-                <div
-                  v-for="pv in album.previewVideos"
-                  :key="pv.id"
-                  class="shrink-0 w-16 h-10 rounded overflow-hidden cursor-pointer border border-transparent hover:border-art-accent/50"
-                  @click.stop="router.push(`/videos/${pv.id}`)"
-                >
-                  <img v-if="pv.cover" :src="pv.cover" class="w-full h-full object-cover" alt="" />
-                  <div v-else class="w-full h-full bg-art-text/5 flex items-center justify-center">
-                    <Icon name="play" :size="12" class="text-art-muted" />
-                  </div>
-                </div>
-              </div>
-              <div class="p-4 cursor-pointer" @click="router.push(`/videos/albums/${album.id}`)">
-                <h4 class="text-art-text font-medium group-hover:text-art-accent transition-colors">{{ album.name }}</h4>
-                <p class="text-xs text-art-muted mt-1">
-                  {{ album.videoCount ?? 0 }} 个视频
-                  <span v-if="album.latestVideoUpdatedAt" class="ml-2">· 更新于 {{ album.latestVideoUpdatedAt }}</span>
-                </p>
-                <p v-if="album.categoryName" class="text-xs text-art-muted/70 mt-1">{{ album.categoryName }}</p>
-              </div>
+                <option :value="0">全部分类</option>
+                <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
+              </select>
             </div>
-          </div>
-        </div>
-        <div v-else class="mb-10 text-center text-art-muted text-sm py-8 border border-dashed border-art-border rounded-xl">
-          暂无专辑
-        </div>
 
-        <!-- 最新视频 -->
-        <div>
-          <h3 class="font-mono text-xs text-art-muted uppercase tracking-widest mb-6">最新视频</h3>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            <div
-              v-for="video in videos"
-              :key="video.id"
-              class="group cursor-pointer rounded-xl overflow-hidden border border-art-border hover:border-art-accent/40 transition-colors"
-              @click="router.push(`/videos/${video.id}`)"
-            >
-              <div class="aspect-video bg-black/40 relative overflow-hidden">
-                <img v-if="video.cover" :src="video.cover" class="w-full h-full object-cover" alt="" />
-                <div class="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/10 transition-colors">
-                  <div class="w-12 h-12 rounded-full border border-art-border flex items-center justify-center">
-                    <Icon name="play" :size="20" class="text-art-text ml-0.5" />
+            <div v-if="panelLoading" class="flex justify-center py-16">
+              <div class="animate-spin h-8 w-8 border-t-2 border-art-accent rounded-full" />
+            </div>
+            <template v-else>
+              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div
+                  v-for="video in videos"
+                  :key="video.id"
+                  class="group cursor-pointer rounded-xl overflow-hidden border border-art-border hover:border-art-accent/40 transition-colors"
+                  @click="router.push(`/videos/${video.id}`)"
+                >
+                  <div class="aspect-video bg-black/40 relative overflow-hidden">
+                    <img v-if="video.cover" :src="video.cover" class="w-full h-full object-cover" alt="" />
+                    <div class="absolute inset-0 flex items-center justify-center bg-black/30 group-hover:bg-black/10 transition-colors">
+                      <div class="w-12 h-12 rounded-full border border-art-border flex items-center justify-center">
+                        <Icon name="play" :size="20" class="text-art-text ml-0.5" />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="p-4">
+                    <h4 class="text-art-text font-medium line-clamp-2">{{ video.title }}</h4>
+                    <p class="text-xs text-art-muted mt-1">
+                      {{ video.categoryName || '未分类' }}
+                      <span v-if="video.createdAt" class="ml-2">· 发布于 {{ video.createdAt }}</span>
+                    </p>
                   </div>
                 </div>
               </div>
-              <div class="p-4">
-                <h4 class="text-art-text font-medium line-clamp-2">{{ video.title }}</h4>
-                <p class="text-xs text-art-muted mt-1">
-                  {{ video.categoryName || '未分类' }}
-                  <span v-if="video.createdAt" class="ml-2">· 发布于 {{ video.createdAt }}</span>
-                </p>
+              <div v-if="videos.length === 0" class="text-center py-12 text-art-muted rounded-xl border border-dashed border-art-border">
+                暂无视频
+              </div>
+            </template>
+          </template>
+
+          <!-- 分类 & 专辑 -->
+          <template v-else>
+            <div v-if="categories.length" class="mb-12">
+              <h3 class="font-mono text-xs text-art-muted uppercase tracking-widest mb-6">分类</h3>
+              <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div
+                  class="group p-5 rounded-xl border cursor-pointer transition-colors"
+                  :class="activeCategory === 0 ? 'border-art-accent/50 bg-art-accent/5' : 'border-art-border hover:border-art-accent/30 hover:bg-art-text/5'"
+                  @click="selectBrowseCategory(0)"
+                >
+                  <h4 class="text-art-text font-medium">全部专辑</h4>
+                  <p class="text-xs text-art-muted mt-2">查看所有分类下的专辑</p>
+                </div>
+                <div
+                  v-for="cat in categories"
+                  :key="'card-' + cat.id"
+                  class="group p-5 rounded-xl border cursor-pointer transition-colors"
+                  :class="activeCategory === cat.id ? 'border-art-accent/50 bg-art-accent/5' : 'border-art-border hover:border-art-accent/30 hover:bg-art-text/5'"
+                  @click="selectBrowseCategory(cat.id)"
+                >
+                  <h4 class="text-art-text font-medium group-hover:text-art-accent transition-colors">{{ cat.name }}</h4>
+                  <p v-if="cat.description" class="text-xs text-art-muted mt-2 line-clamp-2">{{ cat.description }}</p>
+                  <div class="flex gap-4 mt-3 text-xs text-art-muted">
+                    <span>{{ cat.videoCount ?? 0 }} 个视频</span>
+                    <span>{{ cat.albumCount ?? 0 }} 个专辑</span>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-          <div v-if="videos.length === 0" class="text-center py-12 text-art-muted">暂无视频</div>
+            <div
+              v-else
+              class="mb-10 text-center text-art-muted text-sm py-6 border border-dashed border-art-border rounded-xl"
+            >
+              暂无视频分类，请先在后台创建分类
+            </div>
+
+            <div v-if="panelLoading" class="flex justify-center py-16">
+              <div class="animate-spin h-8 w-8 border-t-2 border-art-accent rounded-full" />
+            </div>
+            <template v-else>
+              <div v-if="albums.length">
+                <h3 class="font-mono text-xs text-art-muted uppercase tracking-widest mb-6">专辑</h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <div
+                    v-for="album in albums"
+                    :key="album.id"
+                    class="group rounded-xl overflow-hidden border border-art-border hover:border-art-accent/40 transition-colors"
+                  >
+                    <div
+                      class="aspect-video bg-gray-900 overflow-hidden cursor-pointer"
+                      @click="router.push(`/videos/albums/${album.id}`)"
+                    >
+                      <img
+                        v-if="album.cover"
+                        :src="album.cover"
+                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                        alt=""
+                      />
+                    </div>
+                    <div
+                      v-if="album.previewVideos?.length"
+                      class="flex gap-1 px-2 py-2 bg-black/30 border-t border-art-border overflow-x-auto"
+                    >
+                      <div
+                        v-for="pv in album.previewVideos"
+                        :key="pv.id"
+                        class="shrink-0 w-16 h-10 rounded overflow-hidden cursor-pointer border border-transparent hover:border-art-accent/50"
+                        @click.stop="router.push(`/videos/${pv.id}`)"
+                      >
+                        <img v-if="pv.cover" :src="pv.cover" class="w-full h-full object-cover" alt="" />
+                        <div v-else class="w-full h-full bg-art-text/5 flex items-center justify-center">
+                          <Icon name="play" :size="12" class="text-art-muted" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="p-4 cursor-pointer" @click="router.push(`/videos/albums/${album.id}`)">
+                      <h4 class="text-art-text font-medium group-hover:text-art-accent transition-colors">{{ album.name }}</h4>
+                      <p class="text-xs text-art-muted mt-1">
+                        {{ album.videoCount ?? 0 }} 个视频
+                        <span v-if="album.latestVideoUpdatedAt" class="ml-2">· 更新于 {{ album.latestVideoUpdatedAt }}</span>
+                      </p>
+                      <p v-if="album.categoryName" class="text-xs text-art-muted/70 mt-1">{{ album.categoryName }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                v-else
+                class="text-center text-art-muted text-sm py-10 border border-dashed border-art-border rounded-xl"
+              >
+                暂无专辑
+              </div>
+            </template>
+          </template>
         </div>
-      </template>
+      </Transition>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
+/**
+ * 前台视频页：双主 Tab + 卡片圆角边框（对齐改前视觉）+ Tab 切换过渡。
+ */
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { fetchVideoCategories, fetchVideoAlbums, fetchVideos, type VideoCategory, type VideoAlbum, type VideoItem } from '../services/api'
+import {
+  fetchVideoCategories,
+  fetchVideoAlbums,
+  fetchVideos,
+  type VideoCategory,
+  type VideoAlbum,
+  type VideoItem,
+} from '../services/api'
 import { useScrollAnimation } from '../composables/useScrollAnimation'
 import Icon from '../components/Icon.vue'
 
 const router = useRouter()
+/** 首屏全页 loading */
 const loading = ref(false)
+/** Tab 内局部 loading，避免打断 Transition */
+const panelLoading = ref(false)
 const error = ref('')
 const categories = ref<VideoCategory[]>([])
 const albums = ref<VideoAlbum[]>([])
 const videos = ref<VideoItem[]>([])
+const mainTab = ref<'videos' | 'browse'>('videos')
 const activeCategory = ref(0)
-
 const { initObserver } = useScrollAnimation()
 
-/** 切换分类并重新加载数据 */
-const selectCategory = (catId: number) => {
-  activeCategory.value = catId
-  loadData()
+/** 切换主 Tab；数据用 panelLoading，保证面板过渡可见 */
+async function switchMainTab(tab: 'videos' | 'browse') {
+  if (mainTab.value === tab) return
+  mainTab.value = tab
+  if (tab === 'videos') await loadVideos(true)
+  else await loadAlbums(true)
 }
 
-/** 加载专辑与视频列表 */
-const loadData = async () => {
-  loading.value = true
+function onVideoFilterChange(e: Event) {
+  const val = Number((e.target as HTMLSelectElement).value) || 0
+  activeCategory.value = val
+  loadVideos(true)
+}
+
+function selectBrowseCategory(catId: number) {
+  activeCategory.value = catId
+  loadAlbums(true)
+}
+
+/** @param silent 为 true 时用面板内 loading，不盖住 Tab 过渡 */
+async function loadVideos(silent = false) {
+  if (silent) panelLoading.value = true
+  else loading.value = true
   error.value = ''
   try {
     const catId = activeCategory.value || undefined
-    albums.value = await fetchVideoAlbums(catId)
     videos.value = await fetchVideos(catId)
   } catch (err) {
     error.value = '加载失败，请稍后重试'
     console.error('加载视频列表失败:', err)
   } finally {
     loading.value = false
+    panelLoading.value = false
     await initObserver()
   }
 }
 
-/** 加载分类并刷新列表 */
-const loadAll = async () => {
+async function loadAlbums(silent = false) {
+  if (silent) panelLoading.value = true
+  else loading.value = true
+  error.value = ''
+  try {
+    const catId = activeCategory.value || undefined
+    albums.value = await fetchVideoAlbums(catId)
+  } catch (err) {
+    error.value = '加载失败，请稍后重试'
+    console.error('加载专辑失败:', err)
+  } finally {
+    loading.value = false
+    panelLoading.value = false
+    await initObserver()
+  }
+}
+
+async function loadAll() {
+  loading.value = true
+  error.value = ''
   try {
     categories.value = await fetchVideoCategories()
+    videos.value = await fetchVideos()
   } catch (err) {
-    error.value = '加载分类失败，请稍后重试'
-    console.error('加载视频分类失败:', err)
-    return
+    error.value = '加载失败，请稍后重试'
+    console.error('加载视频页失败:', err)
+  } finally {
+    loading.value = false
+    await initObserver()
+  }
+}
+
+function retry() {
+  if (mainTab.value === 'videos') {
+    if (!categories.value.length) loadAll()
+    else loadVideos()
+  } else {
+    loadAlbums()
   }
-  await loadData()
 }
 
 onMounted(loadAll)
 </script>
+
+<style scoped>
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.videos-tab-enter-active,
+.videos-tab-leave-active {
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+.videos-tab-enter-from {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.videos-tab-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

client/src/pages/admin/Attachments.vue

@@ -293,7 +293,6 @@ const uploadFileWithFile = async (file: File) => {
     if (uploadCategoryId.value > 0) {
       formData.append('categoryId', uploadCategoryId.value.toString())
     }
-    formData.append('storageType', 'aliyun')
 
     await parseApiResponse(await authFetch(`${API_BASE}/admin/attachments/upload`, {
       method: 'POST',

client/src/pages/admin/PostForm.vue

@@ -549,7 +549,6 @@ const uploadMediaFile = async (file: File): Promise<string | null> => {
   const formData = new FormData()
   formData.append('file', file)
   formData.append('categoryId', '1')
-  formData.append('storageType', 'aliyun')
 
   const response = await authFetch('/api/admin/attachments/upload', {
     method: 'POST',

client/src/types/dplayer.d.ts

@@ -12,6 +12,9 @@ declare module 'dplayer' {
   }
   export default class DPlayer {
     constructor(options: DPlayerOptions)
+    play(): void
+    pause(): void
     destroy(): void
+    on(event: string, handler: (...args: unknown[]) => void): void
   }
 }