chore: update project files

demo/frontend/src/views/MyWorks.vue

@@ -3,7 +3,9 @@
     <!-- 左侧导航栏 -->
     <aside class="sidebar">
       <!-- Logo -->
-      <div class="logo">logo</div>
+      <div class="logo">
+        <img src="/images/backgrounds/logo.svg" alt="Logo" />
+      </div>
       
       <!-- 导航菜单 -->
       <nav class="nav-menu">
@@ -49,16 +51,15 @@
       <!-- 顶部栏 -->
       <header class="top-header">
         <div class="header-right">
-          <div class="discount-badge">
-            <span class="discount-icon">+ 25</span>
-            <span class="discount-text">首购优惠</span>
-          </div>
-          <div class="notification-bell">
-            <el-icon><Bell /></el-icon>
-            <span class="notification-badge">5</span>
+          <div class="points">
+            <div class="points-icon">
+              <el-icon><Star /></el-icon>
+            </div>
+            <span class="points-number">{{ userStore.availablePoints }}</span>
           </div>
+          <LanguageSwitcher />
           <div class="user-avatar">
-            <el-icon><User /></el-icon>
+            <img src="/images/backgrounds/avatar-default.svg" alt="用户头像" />
           </div>
           <div class="settings-icon">
             <el-icon><Setting /></el-icon>
@@ -67,7 +68,7 @@
       </header>
 
       <!-- 内容区域 -->
-      <div class="content-area">
+      <div class="content-area" @scroll="handleScroll">
         <div class="toolbar">
       <el-radio-group v-model="activeTab" size="small" class="seg-control">
         <el-radio-button label="all">全部</el-radio-button>
@@ -126,8 +127,8 @@
           </template>
         </div>
 
-    <el-row :gutter="16" class="works-grid">
-      <el-col v-for="item in filteredItems" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6">
+    <el-row :gutter="16" class="works-grid" justify="start">
+      <el-col v-for="item in filteredItems" :key="item.id" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
         <el-card class="work-card" :class="{ selected: selectedIds.has(item.id) }" shadow="hover">
           <div class="thumb" @click="multiSelect ? toggleSelect(item.id) : openDetail(item)">
             <!-- 如果是视频类型且有视频URL，使用video元素显示首帧 -->
@@ -138,12 +139,14 @@
               muted
               preload="metadata"
               @loadedmetadata="onVideoLoaded"
+              @error="onVideoError"
             ></video>
             <!-- 如果有封面图（thumbnailUrl），使用图片 -->
             <img 
               v-else-if="item.cover && item.cover !== item.resultUrl" 
               :src="item.cover" 
-              :alt="item.title" 
+              :alt="item.title"
+              @error="onImageError"
             />
             <!-- 否则使用默认占位符 -->
             <div v-else class="work-placeholder">
@@ -180,7 +183,13 @@
           </div>
           <div class="meta">
             <div class="title" :title="item.title">{{ item.title }}</div>
-            <div class="sub">{{ item.id }} · {{ item.sizeText }}</div>
+            <div class="sub">
+              {{ item.date || '未知日期' }} · {{ item.id }}
+              <span v-if="item.quality" class="quality-badge" :class="`quality-${(item.quality || '').toLowerCase()}`">
+                {{ formatQuality(item.quality) }}
+              </span>
+              · {{ item.sizeText }}
+            </div>
           </div>
           <template #footer>
             <el-space size="small">
@@ -222,10 +231,7 @@
               :alt="selectedItem.title"
             />
             
-            <!-- 视频文字叠加 -->
-            <div class="video-overlay" v-if="selectedItem.type === 'video' && selectedItem.overlayText">
-              <div class="overlay-text">{{ selectedItem.overlayText }}</div>
-            </div>
+            <!-- 视频文字叠加 已移除（用户要求） -->
           </div>
         </div>
         
@@ -234,9 +240,9 @@
           <div class="detail-header">
             <div class="user-info">
               <div class="avatar">
-                <el-icon><User /></el-icon>
+                <img src="/images/backgrounds/avatar-default.svg" alt="用户头像" class="avatar-image" />
               </div>
-              <div class="username">mingzi_FBx7foZYDS7inL</div>
+              <div class="username">{{ (selectedItem && selectedItem.username) || '匿名用户' }}</div>
             </div>
           </div>
           
@@ -246,9 +252,9 @@
             <div class="tab" :class="{ active: activeDetailTab === 'category' }" @click="activeDetailTab = 'category'">{{ selectedItem.category }}</div>
           </div>
           
-          <!-- 描述区域 -->
+          <!-- 提示词区域 -->
           <div class="description-section" v-if="activeDetailTab === 'detail'">
-            <h3 class="section-title">描述</h3>
+            <h3 class="section-title">提示词</h3>
             <p class="description-text">{{ getDescription(selectedItem) }}</p>
           </div>
           
@@ -267,14 +273,14 @@
             </div>
             
             <div class="description-section">
-              <h3 class="section-title">描述</h3>
+              <h3 class="section-title">提示词</h3>
               <p class="description-text">图1在图2中奔跑视频</p>
             </div>
           </div>
           
           <!-- 其他分类的内容 -->
           <div class="description-section" v-if="activeDetailTab === 'category' && selectedItem.category !== '参考图'">
-            <h3 class="section-title">描述</h3>
+            <h3 class="section-title">提示词</h3>
             <p class="description-text">{{ getDescription(selectedItem) }}</p>
           </div>
           
@@ -294,11 +300,11 @@
             </div>
             <div class="metadata-item" v-if="selectedItem.type === 'video'">
               <span class="label">时长</span>
-              <span class="value">5s</span>
+              <span class="value">{{ formatDuration(selectedItem.duration) || '未知' }}</span>
             </div>
             <div class="metadata-item" v-if="selectedItem.type === 'video'">
               <span class="label">清晰度</span>
-              <span class="value">1080p</span>
+              <span class="value">{{ selectedItem.quality || '未知' }}</span>
             </div>
             <div class="metadata-item">
               <span class="label">分类</span>
@@ -306,7 +312,7 @@
             </div>
             <div class="metadata-item" v-if="selectedItem.type === 'video'">
               <span class="label">宽高比</span>
-              <span class="value">16:9</span>
+              <span class="value">{{ selectedItem.aspectRatio || '未知' }}</span>
             </div>
           </div>
           
@@ -320,8 +326,21 @@
       </div>
     </el-dialog>
 
-        <div class="finished" v-if="!hasMore && filteredItems.length>0">已加载全部内容</div>
+        <div class="loading-indicator" v-if="loading">
+          <el-icon class="is-loading"><Loading /></el-icon>
+          <span>加载中...</span>
+        </div>
+        <div class="finished" v-if="!hasMore && filteredItems.length>0">
+          <span>✓ 已加载全部内容</span>
+        </div>
         <el-empty v-if="!loading && filteredItems.length===0" description="没有找到相关内容" />
+
+        <!-- 回到顶部按钮 -->
+        <transition name="fade">
+          <div v-show="showBackToTop" class="back-to-top" @click="scrollToTop" title="回到顶部">
+            <el-icon><ArrowUp /></el-icon>
+          </div>
+        </transition>
       </div>
       </main>
     </div>
@@ -329,13 +348,28 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onActivated, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Star, User, Compass, Document, VideoPlay, Picture, Film, Bell, Setting, Search, MoreFilled } from '@element-plus/icons-vue'
-import { getMyWorks } from '@/api/userWorks'
+import { Star, User, Compass, Document, VideoPlay, Picture, Film, Setting, Search, MoreFilled, Loading, ArrowUp } from '@element-plus/icons-vue'
+import { getMyWorks, getWorkDetail } from '@/api/userWorks'
+import { getCurrentUser } from '@/api/auth'
+import { useUserStore } from '@/stores/user'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 
 const router = useRouter()
+const userStore = useUserStore()
+
+// 用户信息
+const userInfo = ref({
+  username: '',
+  nickname: '',
+  bio: '',
+  avatar: '',
+  id: '',
+  points: 0,
+  frozenPoints: 0
+})
 
 const activeTab = ref('all')
 const dateRange = ref([])
@@ -354,30 +388,50 @@ const selectedItem = ref(null)
 const activeDetailTab = ref('detail')
 
 const page = ref(1)
-const pageSize =  ref(4)
+const pageSize =  ref(20)
 const loading = ref(false)
 const hasMore = ref(true)
 const items = ref([])
+const showBackToTop = ref(false) // 回到顶部按钮显示状态
+
+// 处理URL，确保相对路径正确
+const processUrl = (url) => {
+  if (!url) return null
+  // 如果已经是完整URL（http/https），直接返回
+  if (url.startsWith('http://') || url.startsWith('https://')) {
+    return url
+  }
+  // 如果是相对路径（以/开头），确保以/开头
+  if (url.startsWith('/')) {
+    return url
+  }
+  // 否则添加/前缀
+  return '/' + url
+}
 
 // 将后端返回的UserWork数据转换为前端需要的格式
 const transformWorkData = (work) => {
+  const resultUrl = processUrl(work.resultUrl)
+  const thumbnailUrl = processUrl(work.thumbnailUrl)
+
   return {
     id: work.id?.toString() || work.taskId || '',
     title: work.title || work.prompt || '未命名作品',
-    cover: work.thumbnailUrl || work.resultUrl || '/images/backgrounds/welcome.jpg',
-    resultUrl: work.resultUrl || '',
-    type: work.workType === 'TEXT_TO_VIDEO' || work.workType === 'IMAGE_TO_VIDEO' ? 'video' : 'image',
-    category: work.workType === 'TEXT_TO_VIDEO' ? '文生视频' : work.workType === 'IMAGE_TO_VIDEO' ? '图生视频' : '未知',
+    cover: thumbnailUrl || resultUrl || '/images/backgrounds/welcome.jpg',
+    resultUrl: resultUrl || '',
+    type: work.workType === 'TEXT_TO_VIDEO' || work.workType === 'IMAGE_TO_VIDEO' || work.workType === 'STORYBOARD_VIDEO' ? 'video' : 'image',
+    category: work.workType === 'TEXT_TO_VIDEO' ? '文生视频' : work.workType === 'IMAGE_TO_VIDEO' ? '图生视频' : work.workType === 'STORYBOARD_VIDEO' ? '分镜视频' : work.workType === 'STORYBOARD_IMAGE' ? '分镜图' : '未知',
     sizeText: work.fileSize || '未知大小',
     createTime: work.createdAt ? new Date(work.createdAt).toLocaleString('zh-CN') : '',
     date: work.createdAt ? new Date(work.createdAt).toLocaleDateString('zh-CN') : '',
     description: work.description || work.prompt || '',
     prompt: work.prompt || '',
-    duration: work.duration || '',
-    aspectRatio: work.aspectRatio || '',
-    quality: work.quality || '',
+    duration: work.duration || work.videoDuration || work.length || '',
+    aspectRatio: work.aspectRatio || work.ratio || work.aspect || '',
+    quality: work.quality || work.resolution || '',
+    username: work.username || work.user?.username || work.creator || work.author || work.owner || '未知用户',
     status: work.status || 'COMPLETED',
-    overlayText: work.prompt || ''
+  // overlayText 已移除，前端详情不再显示浮动文本
   }
 }
 
@@ -412,19 +466,60 @@ const loadList = async () => {
 // 筛选后的作品列表
 const filteredItems = computed(() => {
   let filtered = [...items.value]
-  
+
+  // 按日期筛选
+  if (dateFilter.value) {
+    const now = new Date()
+    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+
+    filtered = filtered.filter(item => {
+      if (!item.createdAt && !item.date) return false
+
+      // 获取作品创建日期
+      let itemDate
+      if (item.createdAt) {
+        itemDate = new Date(item.createdAt)
+      } else if (item.date) {
+        // 如果只有 date 字符串，尝试解析
+        itemDate = new Date(item.date)
+      }
+
+      if (!itemDate || isNaN(itemDate.getTime())) return false
+
+      // 重置时间为当天开始
+      const itemDay = new Date(itemDate.getFullYear(), itemDate.getMonth(), itemDate.getDate())
+
+      if (dateFilter.value === 'today') {
+        // 今天：日期相同
+        return itemDay.getTime() === today.getTime()
+      } else if (dateFilter.value === 'week') {
+        // 本周：过去7天内
+        const weekAgo = new Date(today)
+        weekAgo.setDate(weekAgo.getDate() - 7)
+        return itemDay >= weekAgo && itemDay <= today
+      } else if (dateFilter.value === 'month') {
+        // 本月：过去30天内
+        const monthAgo = new Date(today)
+        monthAgo.setDate(monthAgo.getDate() - 30)
+        return itemDay >= monthAgo && itemDay <= today
+      }
+
+      return true
+    })
+  }
+
   // 按类型筛选（全部/视频/图片）
   if (activeTab.value === 'video') {
     filtered = filtered.filter(item => item.type === 'video')
   } else if (activeTab.value === 'image') {
     filtered = filtered.filter(item => item.type === 'image')
   }
-  
+
   // 按分类筛选
   if (category.value !== 'all') {
     const categoryMap = {
       'text2video': '文生视频',
-      'image2video': '图生视频', 
+      'image2video': '图生视频',
       'storyboard': '分镜视频',
       'reference': '参考图'
     }
@@ -433,16 +528,34 @@ const filteredItems = computed(() => {
       filtered = filtered.filter(item => item.category === targetCategory)
     }
   }
-  
+
+  // 按清晰度筛选
+  if (resolution.value) {
+    filtered = filtered.filter(item => {
+      const itemQuality = (item.quality || '').toLowerCase()
+      const filterValue = resolution.value.toLowerCase()
+
+      // 映射关系：sd=标清, hd=高清, uhd=超清
+      if (filterValue === 'sd') {
+        return itemQuality === 'sd' || itemQuality.includes('标清')
+      } else if (filterValue === 'hd') {
+        return itemQuality === 'hd' || itemQuality.includes('高清')
+      } else if (filterValue === 'uhd') {
+        return itemQuality === 'uhd' || itemQuality.includes('超清') || itemQuality.includes('4k')
+      }
+      return false
+    })
+  }
+
   // 按关键词筛选
   if (keyword.value) {
     const keywordLower = keyword.value.toLowerCase()
-    filtered = filtered.filter(item => 
+    filtered = filtered.filter(item =>
       item.title.toLowerCase().includes(keywordLower) ||
       item.id.includes(keywordLower)
     )
   }
-  
+
   return filtered
 })
 
@@ -464,18 +577,85 @@ const loadMore = () => {
   loadList()
 }
 
-const openDetail = (item) => {
-  selectedItem.value = item
+// 滚动监听，触底自动加载更多，控制回到顶部按钮显示
+const handleScroll = (event) => {
+  const target = event.target
+  const scrollTop = target.scrollTop
+  const scrollHeight = target.scrollHeight
+  const clientHeight = target.clientHeight
+
+  // 控制回到顶部按钮显示（滚动超过300px时显示）
+  showBackToTop.value = scrollTop > 300
+
+  // 当滚动到距离底部100px时，自动加载更多
+  if (scrollHeight - scrollTop - clientHeight < 100) {
+    loadMore()
+  }
+}
+
+// 滚动到顶部
+const scrollToTop = () => {
+  const contentArea = document.querySelector('.content-area')
+  if (contentArea) {
+    contentArea.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+}
+
+const openDetail = async (item) => {
+  // 优先从后端拉取最新的详情数据，降级为传入的 item
+  try {
+    const resp = await getWorkDetail(item.id)
+    const payload = resp?.data?.data || resp?.data || null
+    if (payload) {
+      selectedItem.value = transformWorkData(payload)
+    } else {
+      selectedItem.value = item
+    }
+  } catch (err) {
+    console.warn('获取作品详情失败，使用已有数据：', err)
+    selectedItem.value = item
+  }
   detailDialogVisible.value = true
 }
 
-// 获取作品描述
+// 获取作品提示词（优先使用 prompt，其次使用后台 description，最后回退默认文案）
 const getDescription = (item) => {
+  if (!item) return ''
+  const desc = (item.prompt && item.prompt.trim()) ? item.prompt : (item.description && item.description.trim() ? item.description : '')
+  if (desc) return desc
+  // 回退文案
   if (item.type === 'video') {
-    return '影片捕捉了暴风雪中的午夜时分,坐落在积雪覆盖的悬崖顶上的孤立灯塔。相机逐渐放大灯塔的灯光,穿透飞舞的雪花,投射出幽幽的光芒。在白茫茫的环境中,灯塔的黑色轮廓显得格外醒目,呼啸的风声和远处海浪的撞击声增强了孤独的氛围。这一场景展示了灯塔的孤独力量。'
-  } else {
-    return '这是一张精美的参考图片，展现了独特的艺术风格和创意构思。图片构图优美，色彩搭配和谐，具有很高的艺术价值和参考意义。'
+    return '暂无提示词'
   }
+  return '暂无提示词'
+}
+
+// 格式化清晰度显示
+const formatQuality = (quality) => {
+  if (!quality) return ''
+  const q = quality.toUpperCase()
+  const qualityMap = {
+    'SD': '标清',
+    'HD': '高清',
+    'UHD': '超清',
+    '4K': '超清'
+  }
+  return qualityMap[q] || q
+}
+
+// 格式化时长（支持数字秒或字符串），返回类似 "5s" 或原始字符串
+const formatDuration = (dur) => {
+  if (dur === null || dur === undefined || dur === '') return ''
+  if (typeof dur === 'number') return `${dur}s`
+  if (typeof dur === 'string') {
+    const trimmed = dur.trim()
+    if (/^\d+$/.test(trimmed)) return `${trimmed}s`
+    return trimmed
+  }
+  return String(dur)
 }
 
 // 关闭模态框
@@ -599,7 +779,85 @@ const onVideoLoaded = (event) => {
   }
 }
 
+// 视频加载失败处理
+const onVideoError = (event) => {
+  console.warn('视频加载失败:', event.target.src)
+  const video = event.target
+  // 隐藏video元素，显示占位符
+  if (video) {
+    video.style.display = 'none'
+    // 创建或显示占位符
+    const placeholder = video.parentElement.querySelector('.work-placeholder')
+    if (!placeholder) {
+      const div = document.createElement('div')
+      div.className = 'work-placeholder'
+      div.innerHTML = '<el-icon><VideoPlay /></el-icon>'
+      video.parentElement.appendChild(div)
+    } else {
+      placeholder.style.display = 'flex'
+    }
+  }
+}
+
+// 图片加载失败处理
+const onImageError = (event) => {
+  console.warn('图片加载失败:', event.target.src)
+  const img = event.target
+  // 隐藏图片，显示占位符
+  if (img) {
+    img.style.display = 'none'
+    // 创建或显示占位符
+    const placeholder = img.parentElement.querySelector('.work-placeholder')
+    if (!placeholder) {
+      const div = document.createElement('div')
+      div.className = 'work-placeholder'
+      div.innerHTML = '<el-icon><VideoPlay /></el-icon>'
+      img.parentElement.appendChild(div)
+    } else {
+      placeholder.style.display = 'flex'
+    }
+  }
+}
+
+// 加载用户信息
+const loadUserInfo = async () => {
+  try {
+    const response = await getCurrentUser()
+    console.log('获取用户信息响应:', response)
+    if (response && response.data && response.data.success && response.data.data) {
+      const user = response.data.data
+      console.log('用户数据:', user)
+      userInfo.value = {
+        username: user.username || '',
+        nickname: user.nickname || user.username || '',
+        bio: user.bio || '',
+        avatar: user.avatar || '',
+        id: user.id ? String(user.id) : '',
+        points: user.points || 0,
+        frozenPoints: user.frozenPoints || 0
+      }
+      console.log('设置后的用户信息:', userInfo.value)
+    } else {
+      console.error('获取用户信息失败:', response?.data?.message || '未知错误')
+      ElMessage.error('获取用户信息失败')
+    }
+  } catch (error) {
+    console.error('加载用户信息失败:', error)
+    ElMessage.error('加载用户信息失败: ' + (error.message || '未知错误'))
+  }
+}
+
 onMounted(() => {
+  loadUserInfo()
+  loadList()
+})
+
+// 当页面被激活时（从其他页面返回时）刷新列表
+onActivated(() => {
+  // 重置分页并重新加载
+  page.value = 1
+  items.value = []
+  loadUserInfo()
   loadList()
 })
 </script>
@@ -649,7 +907,7 @@ onMounted(() => {
 /* 左侧导航栏 */
 .sidebar {
   width: 280px !important;
-  background: #1a1a1a !important;
+  background: #000000 !important;
   padding: 24px 0 !important;
   border-right: 1px solid #1a1a1a !important;
   flex-shrink: 0 !important;
@@ -660,9 +918,14 @@ onMounted(() => {
 
 .logo {
   padding: 0 24px 32px;
-  font-size: 20px;
-  font-weight: 500;
-  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo img {
+  height: 40px;
+  width: auto;
 }
 
 .nav-menu, .tools-menu {
@@ -722,10 +985,13 @@ onMounted(() => {
 
 /* 顶部导航栏 */
 .top-header {
-  padding: 20px 30px;
+  height: 80px;
+  padding: 0 30px;
   border-bottom: 1px solid #333;
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  background: #0a0a0a;
 }
 
 .header-right {
@@ -734,51 +1000,60 @@ onMounted(() => {
   gap: 20px;
 }
 
-.discount-badge {
+.points {
   display: flex;
   align-items: center;
-  background: #3b82f6;
-  color: white;
+  gap: 8px;
   padding: 6px 12px;
+  background: rgba(64, 158, 255, 0.1);
   border-radius: 20px;
-  font-size: 12px;
-  font-weight: 500;
+  border: 1px solid rgba(64, 158, 255, 0.3);
 }
 
-.discount-icon {
-  background: #1e40af;
-  padding: 2px 6px;
-  border-radius: 10px;
-  margin-right: 6px;
-}
-
-.notification-bell {
-  position: relative;
-  cursor: pointer;
-  color: #9ca3af;
-  font-size: 20px;
-}
-
-.notification-badge {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  background: #ef4444;
+.points-icon {
+  width: 20px;
+  height: 20px;
+  background: #409EFF;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: white;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 10px;
-  min-width: 16px;
-  text-align: center;
+  font-size: 12px;
 }
 
-.user-avatar, .settings-icon {
+.points-number {
+  color: #409EFF;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.user-avatar {
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user-avatar:hover {
+  transform: scale(1.05);
+}
+
+.settings-icon {
   cursor: pointer;
   color: #9ca3af;
   font-size: 20px;
 }
 
-.user-avatar:hover, .settings-icon:hover, .notification-bell:hover {
+.settings-icon:hover {
   color: white;
 }
 
@@ -787,6 +1062,32 @@ onMounted(() => {
   flex: 1;
   padding: 20px 24px;
   overflow-y: auto;
+  overflow-x: hidden;
+  scroll-behavior: smooth; /* 平滑滚动 */
+}
+
+/* 自定义滚动条样式 - 更明显美观的滚动条 */
+.content-area::-webkit-scrollbar {
+  width: 12px;
+}
+
+.content-area::-webkit-scrollbar-track {
+  background: rgba(26, 26, 26, 0.5);
+  border-radius: 6px;
+  margin: 4px 0;
+}
+
+.content-area::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  border: 2px solid rgba(26, 26, 26, 0.5);
+}
+
+.content-area::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
+  border-color: rgba(26, 26, 26, 0.3);
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
 }
 
 .toolbar {
@@ -849,9 +1150,22 @@ onMounted(() => {
 :deep(.filters .el-input__inner) { color: #cbd5e1; }
 :deep(.filters .el-input__suffix) { color: #cbd5e1; }
 .select-row { padding: 4px 0 8px; }
-.works-grid { margin-top: 12px; }
-.work-card { margin-bottom: 14px; }
-.thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 6px; cursor: pointer; }
+.works-grid { 
+  margin-top: 12px;
+}
+.work-card { 
+  margin-bottom: 14px; 
+  width: 100%;
+}
+.thumb { 
+  position: relative; 
+  width: 100%; 
+  padding-top: 100%; 
+  overflow: hidden; 
+  border-radius: 6px; 
+  cursor: pointer; 
+  aspect-ratio: 1 / 1;
+}
 .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
 .work-thumbnail-video {
   position: absolute;
@@ -916,8 +1230,58 @@ onMounted(() => {
 }
 .meta { margin-top: 10px; }
 .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.sub { color: #909399; font-size: 12px; margin-top: 4px; }
-.finished { text-align: center; color: #909399; margin: 14px 0 4px; font-size: 12px; }
+.sub {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+/* 清晰度标签样式 */
+.quality-badge {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  margin: 0 2px;
+}
+
+.quality-sd {
+  background: rgba(103, 194, 58, 0.15);
+  color: #67c23a;
+  border: 1px solid rgba(103, 194, 58, 0.3);
+}
+
+.quality-hd {
+  background: rgba(64, 158, 255, 0.15);
+  color: #409eff;
+  border: 1px solid rgba(64, 158, 255, 0.3);
+}
+
+.quality-uhd, .quality-4k {
+  background: rgba(230, 162, 60, 0.15);
+  color: #e6a23c;
+  border: 1px solid rgba(230, 162, 60, 0.3);
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px 0;
+  margin: 20px 0;
+  color: #409EFF;
+  font-size: 14px;
+}
+
+.loading-indicator .el-icon {
+  font-size: 18px;
+}
 
 /* 让卡片与页面背景一致 */
 :deep(.work-card.el-card) {
@@ -1005,20 +1369,7 @@ onMounted(() => {
   background: #000;
 }
 
-.video-overlay {
-  position: absolute;
-  bottom: 80px;
-  left: 20px;
-  z-index: 10;
-}
-
-.overlay-text {
-  font-family: 'Brush Script MT', cursive;
-  font-size: 24px;
-  color: #8b5cf6;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-  font-weight: bold;
-}
+/* overlay 样式已移除（不再使用） */
 
 .detail-right {
   flex: 1;
@@ -1045,13 +1396,17 @@ onMounted(() => {
 .avatar {
   width: 40px;
   height: 40px;
-  background: #409eff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #fff;
-  font-size: 18px;
+  overflow: hidden;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .username {
@@ -1209,6 +1564,63 @@ onMounted(() => {
 :deep(.el-overlay) {
   background-color: rgba(0, 0, 0, 0.8) !important;
 }
+
+/* 回到顶部按钮样式 */
+.back-to-top {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+  transition: all 0.3s ease;
+  z-index: 999;
+}
+
+.back-to-top:hover {
+  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+  transform: translateY(-4px);
+  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
+}
+
+.back-to-top:active {
+  transform: translateY(-2px);
+}
+
+.back-to-top .el-icon {
+  font-size: 24px;
+  color: white;
+}
+
+/* 过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* 优化加载完成提示样式 */
+.finished {
+  text-align: center;
+  color: #409eff;
+  margin: 20px 0;
+  font-size: 14px;
+  padding: 12px;
+  background: rgba(64, 158, 255, 0.1);
+  border-radius: 8px;
+  border: 1px solid rgba(64, 158, 255, 0.2);
+}
 </style>