feat: 优化

.claude/settings.local.json

@@ -68,7 +68,8 @@
       "Bash(npm run lint:es -- --no-fix src/views/material/MixTaskList.vue)",
       "Bash(npm run)",
       "Skill(plan)",
-      "Skill(plan:*)"
+      "Skill(plan:*)",
+      "Bash(py:*)"
     ],
     "deny": [],
     "ask": []

frontend/app/web-gold/src/components/VideoSelector.vue

@@ -10,29 +10,56 @@
     <div class="video-selector">
       <!-- 搜索栏 -->
       <div class="search-bar">
-        <a-input-search
-          v-model:value="searchKeyword"
-          placeholder="搜索视频名称"
-          allow-clear
-          @search="handleSearch"
-          class="search-input"
-        />
+        <div class="search-input-wrapper">
+          <SearchOutlined class="search-icon" />
+          <a-input-search
+            v-model:value="searchKeyword"
+            placeholder="输入视频名称进行搜索..."
+            allow-clear
+            @search="handleSearch"
+            class="search-input"
+          />
+        </div>
       </div>
 
       <!-- 视频网格 -->
-      <div class="video-grid" v-loading="loading">
+      <div class="video-grid">
+        <!-- 骨架屏加载状态 -->
+        <a-skeleton
+          v-if="loading"
+          v-for="n in 6"
+          :key="n"
+          :loading="true"
+          :active="true"
+          :avatar="false"
+          :title="false"
+          class="video-card-skeleton"
+        >
+          <template #default>
+            <div class="skeleton-thumbnail"></div>
+            <div class="skeleton-content">
+              <a-skeleton-title class="skeleton-title" />
+              <a-skeleton-paragraph class="skeleton-meta" :rows="1" />
+            </div>
+          </template>
+        </a-skeleton>
+
+        <!-- 视频列表 -->
         <div
           v-for="video in videoList"
           :key="video.id"
           class="video-card"
           :class="{ selected: selectedVideoId === video.id }"
           @click="selectVideo(video)"
+          role="button"
+          :aria-label="`选择视频: ${video.fileName}`"
         >
           <div class="video-thumbnail">
             <img
               :src="getVideoPreviewUrl(video) || defaultCover"
               :alt="video.fileName"
               @error="handleImageError"
+              loading="lazy"
             />
             <div class="video-duration">{{ formatDuration(video.duration) }}</div>
             <div class="video-selected-mark" v-if="selectedVideoId === video.id">
@@ -40,7 +67,9 @@
             </div>
           </div>
           <div class="video-info">
-            <div class="video-title" :title="video.fileName">{{ video.fileName }}</div>
+            <div class="video-title" :title="video.fileName">
+              <span class="title-text">{{ video.fileName }}</span>
+            </div>
             <div class="video-meta">
               <span class="meta-item">
                 <VideoCameraOutlined />
@@ -56,8 +85,22 @@
 
         <!-- 空状态 -->
         <div v-if="!loading && videoList.length === 0" class="empty-state">
-          <PictureOutlined class="empty-icon" />
-          <p>{{ searchKeyword ? '未找到匹配的视频' : '暂无视频，请先上传视频' }}</p>
+          <div class="empty-illustration">
+            <div class="empty-icon-wrapper">
+              <PictureOutlined class="empty-icon" />
+            </div>
+            <div class="empty-text">
+              <h3 class="empty-title">
+                {{ searchKeyword ? '未找到匹配的视频' : '暂无视频' }}
+              </h3>
+              <p class="empty-description">
+                {{ searchKeyword ? '尝试使用不同的关键词搜索' : '请先上传视频文件' }}
+              </p>
+              <a-button v-if="searchKeyword" type="link" @click="clearSearch" class="clear-search-btn">
+                <CloseOutlined /> 清除搜索条件
+              </a-button>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -89,7 +132,14 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { message } from 'ant-design-vue'
-import { CheckOutlined, PictureOutlined, VideoCameraOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
+import {
+  CheckOutlined,
+  PictureOutlined,
+  VideoCameraOutlined,
+  ClockCircleOutlined,
+  SearchOutlined,
+  CloseOutlined
+} from '@ant-design/icons-vue'
 import { MaterialService } from '@/api/material'
 
 const props = defineProps({
@@ -101,7 +151,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:open', 'select'])
 
-// 状态管理
 const visible = computed({
   get: () => props.open,
   set: (val) => emit('update:open', val)
@@ -116,10 +165,8 @@ const currentPage = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 
-// 默认封面
 const defaultCover = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjExMCIgdmlld0JveD0iMCAwIDIwMCAxMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTEwIiBmaWxsPSIjMzc0MTUxIi8+CjxwYXRoIGQ9Ik04NSA0NUwxMTUgNjVMMTA1IDg1TDc1IDc1TDg1IDQ1WiIgZmlsbD0iIzU3MjY1MSIvPgo8L3N2Zz4K'
 
-// 模态框标题
 const modalTitle = '选择视频'
 
 // 获取视频列表
@@ -148,13 +195,17 @@ const fetchVideoList = async () => {
   }
 }
 
-// 搜索
 const handleSearch = () => {
   currentPage.value = 1
   fetchVideoList()
 }
 
-// 分页变化
+const clearSearch = () => {
+  searchKeyword.value = ''
+  currentPage.value = 1
+  fetchVideoList()
+}
+
 const handlePageChange = (page, size) => {
   currentPage.value = page
   if (size) {
@@ -163,26 +214,21 @@ const handlePageChange = (page, size) => {
   fetchVideoList()
 }
 
-// 每页数量变化
 const handlePageSizeChange = (_current, size) => {
-  // _current 参数未使用，但需要保留以匹配事件处理器签名
   currentPage.value = 1
   pageSize.value = size
   fetchVideoList()
 }
 
-// 选择视频
 const selectVideo = (video) => {
   selectedVideoId.value = video.id
   selectedVideo.value = video
 }
 
-// 图片加载错误处理
 const handleImageError = (event) => {
   event.target.src = defaultCover
 }
 
-// 格式化时长
 const formatDuration = (seconds) => {
   if (!seconds) return '--:--'
   const minutes = Math.floor(seconds / 60)
@@ -190,7 +236,6 @@ const formatDuration = (seconds) => {
   return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`
 }
 
-// 格式化文件大小
 const formatFileSize = (bytes) => {
   if (!bytes) return '0 B'
   const units = ['B', 'KB', 'MB', 'GB']
@@ -203,32 +248,25 @@ const formatFileSize = (bytes) => {
   return `${size.toFixed(1)} ${units[unitIndex]}`
 }
 
-// 获取视频预览URL（优先使用base64，然后是URL）
 const getVideoPreviewUrl = (video) => {
-  // 优先使用 coverBase64（如果存在）
   if (video.coverBase64) {
-    // 确保 base64 有正确的前缀
     if (!video.coverBase64.startsWith('data:')) {
       return `data:image/jpeg;base64,${video.coverBase64}`
     }
     return video.coverBase64
   }
 
-  // 其次使用 previewUrl
   if (video.previewUrl) {
     return video.previewUrl
   }
 
-  // 最后使用 coverUrl
   if (video.coverUrl) {
     return video.coverUrl
   }
 
-  // 返回默认封面
   return defaultCover
 }
 
-// 取消
 const handleCancel = () => {
   visible.value = false
   selectedVideoId.value = null
@@ -236,7 +274,6 @@ const handleCancel = () => {
   searchKeyword.value = ''
 }
 
-// 确认
 const handleConfirm = () => {
   if (!selectedVideo.value) {
     message.warning('请选择一个视频')
@@ -247,9 +284,10 @@ const handleConfirm = () => {
   handleCancel()
 }
 
-// 监听visible变化
-watch(() => props.open, (newVal) => {
-  if (newVal) {
+// 监听modal打开
+watch(() => props.open, (isOpen) => {
+  if (isOpen) {
+    videoList.value = []
     selectedVideoId.value = null
     selectedVideo.value = null
     currentPage.value = 1
@@ -265,16 +303,58 @@ watch(() => props.open, (newVal) => {
   gap: 16px;
 }
 
+/* 搜索栏样式 */
 .search-bar {
   padding: 16px;
-  background: rgba(0, 0, 0, 0.2);
+  background: #f9fafb;
   border-radius: 8px;
 }
 
-.search-input {
-  width: 100%;
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
+.search-icon {
+  position: absolute;
+  left: 12px;
+  z-index: 100;
+  color: #9ca3af;
+  font-size: 16px;
+}
+
+.search-input :deep(.ant-input) {
+  padding-left: 36px;
+  padding-right: 12px;
+  height: 40px;
+  background: #ffffff;
+  border-radius: 6px;
+  color: #111827;
+  font-size: 14px;
+}
+
+.search-input :deep(.ant-input-group),
+.search-input :deep(.ant-input-group-wrapper),
+.search-input :deep(.ant-input-group-addon) {
+  display: block;
+}
+
+.search-input :deep(.ant-input-group-addon) {
+  display: none;
+}
+
+.search-input :deep(.ant-input):focus,
+.search-input :deep(.ant-input-affix-wrapper-focused) {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.search-input :deep(.ant-input::placeholder) {
+  color: #9ca3af;
+}
+
+/* 视频网格样式 */
 .video-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -284,33 +364,57 @@ watch(() => props.open, (newVal) => {
   padding: 4px;
 }
 
+.video-grid::-webkit-scrollbar {
+  width: 6px;
+}
+
+.video-grid::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 3px;
+}
+
+.video-grid::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.video-grid::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* 视频卡片样式 */
 .video-card {
-  background: rgba(0, 0, 0, 0.3);
-  border: 2px solid rgba(59, 130, 246, 0.2);
-  border-radius: 12px;
+  background: #ffffff;
+  border: 3px solid transparent;
+  border-radius: 8px;
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all 0.2s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .video-card:hover {
-  border-color: rgba(59, 130, 246, 0.5);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  border-color: #3b82f6;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
 }
 
 .video-card.selected {
   border-color: #3B82F6;
-  background: rgba(59, 130, 246, 0.1);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
 }
 
+.video-card:focus-visible {
+  border-color: #3B82F6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+/* 缩略图样式 */
 .video-thumbnail {
   position: relative;
   width: 100%;
   height: 112px;
   overflow: hidden;
-  background: #374151;
+  background: #f3f4f6;
 }
 
 .video-thumbnail img {
@@ -325,8 +429,8 @@ watch(() => props.open, (newVal) => {
   right: 8px;
   background: rgba(0, 0, 0, 0.8);
   color: #fff;
-  padding: 2px 6px;
-  border-radius: 4px;
+  padding: 4px 8px;
+  border-radius: 6px;
   font-size: 12px;
   font-weight: 600;
 }
@@ -346,15 +450,16 @@ watch(() => props.open, (newVal) => {
   font-size: 14px;
 }
 
+/* 信息区域样式 */
 .video-info {
-  padding: 12px;
+  padding: 14px;
 }
 
 .video-title {
   font-size: 14px;
   font-weight: 600;
-  color: #fff;
-  margin-bottom: 8px;
+  color: #111827;
+  margin-bottom: 10px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -364,7 +469,7 @@ watch(() => props.open, (newVal) => {
   display: flex;
   gap: 12px;
   font-size: 12px;
-  color: #94a3b8;
+  color: #6b7280;
 }
 
 .meta-item {
@@ -373,6 +478,7 @@ watch(() => props.open, (newVal) => {
   gap: 4px;
 }
 
+/* 空状态样式 */
 .empty-state {
   grid-column: 1 / -1;
   display: flex;
@@ -380,27 +486,185 @@ watch(() => props.open, (newVal) => {
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
-  color: #94a3b8;
-}
-
-.empty-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
   color: #6b7280;
 }
 
+.empty-illustration {
+  text-align: center;
+}
+
+.empty-icon-wrapper {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 16px;
+  background: #f3f4f6;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-icon {
+  font-size: 36px;
+  color: #9ca3af;
+}
+
+.empty-text {
+  max-width: 400px;
+}
+
+.empty-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin: 0 0 8px 0;
+}
+
+.empty-description {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0;
+}
+
+.clear-search-btn {
+  margin-top: 12px;
+  color: #3b82f6;
+  font-weight: 500;
+}
+
+.clear-search-btn:hover {
+  color: #60a5fa;
+}
+
+/* 分页样式 */
 .pagination-wrapper {
   display: flex;
   justify-content: center;
   padding: 16px 0;
-  border-top: 1px solid rgba(59, 130, 246, 0.1);
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  border-radius: 8px;
+  margin-top: 8px;
 }
 
+/* 底部操作栏样式 */
 .modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
-  padding-top: 16px;
-  border-top: 1px solid rgba(59, 130, 246, 0.1);
+  padding: 16px 20px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  border-radius: 8px;
+  margin-top: 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .video-grid {
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 12px;
+  }
+
+  .video-thumbnail {
+    height: 100px;
+  }
+
+  .video-info {
+    padding: 10px;
+  }
+
+  .video-title {
+    font-size: 13px;
+  }
+
+  .video-meta {
+    gap: 8px;
+    font-size: 11px;
+  }
+
+  .search-bar {
+    padding: 12px;
+  }
+
+  .modal-footer {
+    padding: 12px 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .video-grid {
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: 10px;
+  }
+
+  .video-thumbnail {
+    height: 90px;
+  }
+
+  .video-info {
+    padding: 8px;
+  }
+
+  .search-input :deep(.ant-input) {
+    height: 36px;
+    font-size: 13px;
+  }
+
+  .modal-footer .ant-btn {
+    height: 32px;
+    padding: 0 12px;
+    font-size: 13px;
+  }
+}
+
+/* 骨架屏样式 */
+.video-card-skeleton {
+  background: #ffffff;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.skeleton-thumbnail {
+  width: 100%;
+  height: 112px;
+  background: #f3f4f6;
+}
+
+.skeleton-content {
+  padding: 14px;
+}
+
+.skeleton-title {
+  margin-bottom: 10px;
+}
+
+.skeleton-meta :deep(.ant-skeleton-paragraph > li) {
+  height: 16px;
+  width: 60px;
+  background: #f3f4f6;
+  border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+  .skeleton-thumbnail {
+    height: 100px;
+  }
+  .skeleton-content {
+    padding: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .skeleton-thumbnail {
+    height: 90px;
+  }
+  .skeleton-content {
+    padding: 8px;
+  }
+  .skeleton-meta :deep(.ant-skeleton-paragraph > li) {
+    width: 50px;
+  }
 }
 </style>

frontend/app/web-gold/src/stores/user.js

@@ -110,7 +110,7 @@ export const useUserStore = defineStore('user', () => {
     userId,
     nickname,
     avatar,
-    wechat: wechat.value,
+    wechat,
     balance,
     vipLevel,
     credits,

frontend/app/web-gold/src/views/auth/Login.vue

@@ -224,15 +224,13 @@ async function handleSmsLogin(event) {
 
     // 更新用户登录状态
     const userInfo = info?.userInfo || {}
-    await userStore.loginWithPhone({
-      profile: {
-        userId: String(userInfo.id || userInfo.userId || smsForm.mobile),
-        nickname: userInfo.nickname || userInfo.username || '用户',
-        avatar: userInfo.avatar || '',
-        balance: userInfo.balance ?? 0,
-        vipLevel: userInfo.vipLevel ?? 0,
-        credits: userInfo.credits ?? 0,
-      }
+    userStore.login({
+      userId: String(userInfo.id || userInfo.userId || smsForm.mobile),
+      nickname: userInfo.nickname || userInfo.username || '用户',
+      avatar: userInfo.avatar || '',
+      balance: userInfo.balance ?? 0,
+      vipLevel: userInfo.vipLevel ?? 0,
+      credits: userInfo.credits ?? 0,
     })
 
     // 获取完整的用户信息
@@ -240,10 +238,7 @@ async function handleSmsLogin(event) {
 
     message.success('登录成功')
 
-    // 获取redirect参数，跳转到之前的页面或默认首页
-    router.push({
-      name: '对标分析'
-    })
+    router.push({ name: '对标分析' })
   } catch (error) {
     if (error?.response?.data?.message) {
       message.error(error.response.data.message)
@@ -537,6 +532,8 @@ onBeforeUnmount(() => {
   border: none;
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
   transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
 }
 
 .login-btn:hover {