feat: 视频问题

2025-11-28 20:26:47 +08:00
parent 46b98e78e5
commit d9f3103304
26 changed files with 1582 additions and 1021 deletions
--- a/.claude/commands/ui.md
+++ b/.claude/commands/ui.md
@@ -0,0 +1,35 @@
+### 【CoT思维链】UI/UX全维度优化专家角色提示词  
+
+#### 角色设定  
+你是**资深UI/UX优化专家**，兼具前端视觉设计能力与用户体验逻辑思维，擅长从“用户需求-场景定位-视觉落地-交互闭环”全链路优化网页，尤其精通科技极简风格、企业级产品界面的设计逻辑。  
+
+#### 背景前提  
+当前待优化对象为**科技极简黑蓝紫风格的企业级AI工具登录页**，核心基调是“深空黑+冰川蓝+熏衣紫”，需适配左右布局，兼顾品牌展示与功能登录的双重需求。  
+
+#### CoT思维链引导任务  
+请按照以下思维步骤，逐步分析并输出优化方案：  
+
+1. **第一步：需求拆解与场景锚定**  
+   - 明确页面核心定位：企业级AI工具登录页的目标用户（企业员工/管理员）、使用场景（办公环境、多设备访问）、核心诉求（专业感/安全感/操作高效性）；  
+   - 梳理现有设计的核心要素：风格（科技极简）、配色（黑蓝紫）、布局（左右分栏）、交互（光点联动/输入框渐变/按钮反馈）、动画（鼠标联动/状态过渡）。  
+
+2. **第二步：现状问题诊断**  
+   - 视觉层面：检查配色对比度是否达标、元素层级是否清晰、品牌识别性是否足够；  
+   - 布局层面：验证左右分栏的空间分配合理性、响应式适配的流畅度、留白与内容密度的平衡；  
+   - 交互层面：分析现有反馈（输入框聚焦/按钮点击）是否明确、用户操作路径是否无歧义；  
+   - 动画层面：判断动态效果（光点联动）是否干扰核心操作、过渡动画是否自然且有目的性。  
+
+3. **第三步：分维度优化推导**  
+   - **配色优化**：基于科技极简风格，微调色彩明度/饱和度以提升可读性，补充辅助色规范；  
+   - **布局优化**：优化左右分栏的比例、内容对齐方式，强化移动端布局的适配逻辑；  
+   - **样式优化**：细化控件（输入框/按钮）的质感表现，统一视觉细节（圆角/阴影/描边）；  
+   - **交互优化**：增强操作反馈的层次感（hover/active/focus状态区分），补充无障碍交互设计；  
+   - **动画优化**：精简非必要动效，强化核心动效的目的性（如登录成功/失败的反馈动画）。  
+
+4. **第四步：方案验证与落地性**  
+   - 验证优化方案是否符合企业级产品的专业性定位；  
+   - 确保所有优化点可通过CSS/JS实现，兼顾性能与效果；  
+   - 检查多设备（PC/平板/手机）的适配一致性。  
+
+#### 输出要求  
+按“问题诊断→优化方案→代码落地建议”的结构输出，每个优化维度需说明“原设计不足+优化逻辑+具体实现方式”，并附关键代码片段或设计参数参考。
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -7,7 +7,9 @@
      "Bash(cat:*)",
      "Bash(node -e:*)",
      "Bash(git add:*)",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(git log:*)",
+      "Bash(xargs:*)"
    ],
    "deny": [],
    "ask": []
--- a/frontend/app/web-gold/src/api/http.js
+++ b/frontend/app/web-gold/src/api/http.js
@@ -6,7 +6,7 @@
 */

 import { createClientAxios } from '@gold/api/axios/client'
-import authService from '@/services/AuthService'
+import { refreshToken } from '@/api/auth'
 import router from '@/router'

 /**
@@ -29,16 +29,19 @@ export function createHttpClient(options = {}) {
        return
      }

-      // 默认处理：使用 AuthService 尝试刷新token
-      await authService.handleAuthError(
-        error,
-        () => {
-          // 刷新失败，使用router跳转，避免整页刷新
-          router.push('/login')
-        }
-      )
-      // 如果刷新成功，AuthService返回null，不跳转，不抛出错误
-      // 业务代码可以捕获这个错误并重试请求
+      // 默认处理：尝试刷新token
+      try {
+        await refreshToken()
+        // 刷新成功：标记错误已处理，token已更新
+        error._handled = true
+        error._tokenRefreshed = true
+        console.info('Token刷新成功，可以重试原请求')
+        // 不抛出错误，交给上层决定是否重试
+      } catch (refreshError) {
+        // 刷新失败：使用router跳转，避免整页刷新
+        console.error('刷新token失败:', refreshError)
+        router.push('/login')
+      }
    },
    on403: (error) => {
      // 403：没有权限，直接跳转到登录页
@@ -106,7 +109,7 @@ export default http
 *   console.error('请求失败:', error.message)
 * }
 *
- * 注意：当 401 发生时，AuthService 会自动尝试刷新 token。
+ * 注意：当 401 发生时，系统会自动尝试刷新 token。
 * 如果刷新成功，会使用相同的 http 实例重新发起请求，
 * 确保自定义拦截器被正确应用。
 */
--- a/frontend/app/web-gold/src/api/material.js
+++ b/frontend/app/web-gold/src/api/material.js
@@ -6,8 +6,8 @@
 import http from './http'
 import { API_BASE } from '@gold/config/api'

-// 统一使用 /api/tik 前缀，与 tikhub 保持一致
-const BASE_URL = `${API_BASE.APP}/api/tik/file`
+// 使用 webApi 前缀，确保能够被代理
+const BASE_URL = `${API_BASE.APP_TIK}/file`

 /**
 * 素材库 API 服务
@@ -104,7 +104,7 @@ export const MaterialService = {
 /**
 * 素材分组 API 服务
 */
-const GROUP_BASE_URL = `${API_BASE.APP}/api/tik/file/group`
+const GROUP_BASE_URL = `${API_BASE.APP_TIK}/file/group`

 export const MaterialGroupService = {
  /**
--- a/frontend/app/web-gold/src/components/material/MaterialBatchGroupModal.vue
+++ b/frontend/app/web-gold/src/components/material/MaterialBatchGroupModal.vue
@@ -0,0 +1,97 @@
+<template>
+  <a-modal
+    v-model:open="modalVisible"
+    title="批量分组"
+    centered
+    @ok="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="选择分组" required>
+        <a-select
+          v-model:value="selectedGroupId"
+          placeholder="请选择要添加到的分组"
+          style="width: 100%"
+        >
+          <a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
+            {{ group.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <div style="margin-top: 16px; padding: 12px; background: var(--color-bg-2); border-radius: var(--radius-card);">
+        <p style="margin: 0; font-size: 13px; color: var(--color-text-2);">
+          {{ groupingInfo }}
+        </p>
+      </div>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { message } from 'ant-design-vue'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false
+  },
+  groupList: {
+    type: Array,
+    default: () => []
+  },
+  // 可选的信息，组件会显示但不会强依赖
+  fileName: {
+    type: String,
+    default: ''
+  },
+  fileCount: {
+    type: Number,
+    default: 0
+  }
+})
+
+const emit = defineEmits(['update:open', 'confirm', 'cancel'])
+
+// 数据
+const selectedGroupId = ref(null)
+const modalVisible = ref(false)
+
+// 计算分组提示信息
+const groupingInfo = computed(() => {
+  if (props.fileName) {
+    return `将为文件 "${props.fileName}" 添加到选中的分组中`
+  }
+  if (props.fileCount > 0) {
+    return `将为 ${props.fileCount} 个文件添加到选中的分组中`
+  }
+  return '将为选中文件添加到选中的分组中'
+})
+
+// 监听 open 变化
+watch(() => props.open, (newVal) => {
+  modalVisible.value = newVal
+  if (!newVal) {
+    selectedGroupId.value = null
+  }
+})
+
+// 处理确认
+const handleConfirm = () => {
+  if (!selectedGroupId.value) {
+    message.warning('请选择分组')
+    return
+  }
+
+  emit('confirm', selectedGroupId.value)
+  handleCancel()
+}
+
+// 处理取消
+const handleCancel = () => {
+  modalVisible.value = false
+  selectedGroupId.value = null
+  emit('update:open', false)
+  emit('cancel')
+}
+</script>
--- a/frontend/app/web-gold/src/components/material/MaterialMixModal.vue
+++ b/frontend/app/web-gold/src/components/material/MaterialMixModal.vue
@@ -0,0 +1,258 @@
+<template>
+  <a-modal
+    v-model:open="modalVisible"
+    title="素材混剪"
+    centered
+    :confirm-loading="loading"
+    ok-text="提交混剪"
+    cancel-text="取消"
+    @ok="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <div class="mix-modal__summary">
+      <p>视频分组：{{ getGroupName(videoGroupId) || '未选择' }}</p>
+      <p>视频数量：{{ videoGroupFiles.length }} 个</p>
+      <p>背景音乐：{{ selectedBgMusic?.fileName || '未选择' }}</p>
+      <p style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
+        系统将根据文案自动生成配音并匹配视频片段
+      </p>
+    </div>
+    <a-form layout="vertical">
+      <a-form-item label="选择视频分组" required>
+        <a-select
+          v-model:value="videoGroupId"
+          placeholder="请选择视频分组"
+          style="width: 100%"
+          @change="handleVideoGroupChange"
+        >
+          <a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
+            {{ group.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item label="选择背景音乐" required>
+        <a-select
+          v-model:value="selectedBgMusic"
+          placeholder="请选择背景音乐"
+          style="width: 100%"
+          show-search
+          :filter-option="(input, option) => option.children.toLowerCase().includes(input.toLowerCase())"
+        >
+          <a-select-option v-for="audio in allAudioFiles" :key="audio.id" :value="audio.id">
+            {{ audio.fileName }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item label="视频标题" required>
+        <a-input v-model:value="mixForm.title" placeholder="请输入生成视频标题" />
+      </a-form-item>
+      <a-form-item label="文案内容" required>
+        <a-textarea
+          v-model:value="mixForm.text"
+          placeholder="请输入文案（每句话用句号分隔）"
+          :rows="4"
+        />
+        <div style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
+          文案将用于生成 TTS 配音，每句话对应一个视频片段
+        </div>
+      </a-form-item>
+      <a-form-item label="生成成片数量" required>
+        <a-input-number
+          v-model:value="mixForm.produceCount"
+          :min="1"
+          :max="10"
+          style="width: 100%"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive, watch, computed } from 'vue'
+import { message } from 'ant-design-vue'
+import { MaterialService } from '@/api/material'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  groupList: {
+    type: Array,
+    default: () => []
+  },
+  allAudioFiles: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update:open', 'confirm', 'cancel'])
+
+// 数据
+const modalVisible = ref(false)
+const videoGroupId = ref(null)
+const selectedBgMusic = ref(null)
+const videoGroupFiles = ref([])
+
+const mixForm = reactive({
+  title: '',
+  text: '',
+  produceCount: 1
+})
+
+// 获取分组名称
+const getGroupName = (groupId) => {
+  if (!groupId) return ''
+  const group = props.groupList.find(g => g.id === groupId)
+  return group?.name || ''
+}
+
+// 监听 open 变化
+watch(() => props.open, (newVal) => {
+  modalVisible.value = newVal
+  if (newVal) {
+    resetForm()
+    // 组件打开时，可以在这里加载音频文件，但最好由父组件传入
+  }
+})
+
+// 处理视频分组变化
+const handleVideoGroupChange = async (groupId) => {
+  console.log('[MaterialMixModal] handleVideoGroupChange called with groupId:', groupId)
+
+  if (!groupId) {
+    videoGroupFiles.value = []
+    console.log('[MaterialMixModal] groupId is empty, videoGroupFiles cleared')
+    return
+  }
+
+  console.log('[MaterialMixModal] Loading video files for group:', groupId)
+
+  try {
+    const res = await MaterialService.getFilePage({
+      pageNo: 1,
+      pageSize: 100,
+      groupId: groupId,
+      fileCategory: 'video'
+    })
+    if (res.code === 0) {
+      videoGroupFiles.value = res.data.list || []
+      console.log('[MaterialMixModal] Loaded video files:', videoGroupFiles.value.length, 'files')
+    } else {
+      console.error('[MaterialMixModal] Failed to load video files:', res.msg)
+      message.error(res.msg || '加载分组文件失败')
+    }
+  } catch (error) {
+    console.error('[MaterialMixModal] Error loading video files:', error)
+    message.error('加载分组文件失败')
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  mixForm.title = ''
+  mixForm.text = ''
+  mixForm.produceCount = 1
+  videoGroupId.value = null
+  selectedBgMusic.value = null
+  videoGroupFiles.value = []
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  resetForm
+})
+
+// 处理确认
+const handleConfirm = async () => {
+  const title = mixForm.title.trim()
+  const text = mixForm.text.trim()
+
+  if (!videoGroupId.value) {
+    message.warning('请选择视频分组')
+    return
+  }
+  if (!selectedBgMusic.value) {
+    message.warning('请选择背景音乐')
+    return
+  }
+  if (!title) {
+    message.warning('请输入视频标题')
+    return
+  }
+  if (!text) {
+    message.warning('请输入文案内容')
+    return
+  }
+
+  // 如果当前没有视频文件，重新加载一次
+  if (videoGroupFiles.value.length === 0) {
+    message.loading('正在加载视频文件...', 0)
+    await handleVideoGroupChange(videoGroupId.value)
+    message.destroy()
+  }
+
+  if (videoGroupFiles.value.length === 0) {
+    message.warning('所选分组下没有视频文件，请检查分组设置或更换分组')
+    return
+  }
+
+  // 提取视频URL和音频URL
+  const videoUrls = videoGroupFiles.value
+    .map(file => file?.fileUrl || file?.previewUrl)
+    .filter(Boolean)
+
+  const bgMusicUrls = [selectedBgMusic.value?.fileUrl || selectedBgMusic.value?.previewUrl].filter(Boolean)
+
+  if (videoUrls.length === 0) {
+    message.warning('视频分组中没有有效的视频文件')
+    return
+  }
+  if (bgMusicUrls.length === 0) {
+    message.warning('所选背景音乐无效')
+    return
+  }
+
+  const produceCount = Math.max(1, Math.min(10, Number(mixForm.produceCount) || 1))
+
+  emit('confirm', {
+    title,
+    text,
+    videoUrls,
+    bgMusicUrls,
+    produceCount
+  })
+}
+
+// 处理取消
+const handleCancel = () => {
+  modalVisible.value = false
+  emit('update:open', false)
+  emit('cancel')
+}
+</script>
+
+<style scoped>
+.mix-modal__summary {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: var(--color-bg-2);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-card);
+  font-size: 13px;
+  color: var(--color-text-2);
+}
+
+.mix-modal__summary p {
+  margin: 0;
+  line-height: 1.6;
+}
+</style>
--- a/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
+++ b/frontend/app/web-gold/src/components/material/MaterialUploadModal.vue
@@ -89,6 +89,10 @@ const props = defineProps({
  uploading: {
    type: Boolean,
    default: false
+  },
+  fileCategory: {
+    type: String,
+    default: 'video'
  }
 })

@@ -208,7 +212,9 @@ const handleConfirm = () => {
    return
  }

-  emit('confirm', filesWithCover, DEFAULT_FILE_CATEGORY)
+  // 使用传入的fileCategory，如果没有则使用默认值
+  const category = props.fileCategory || DEFAULT_FILE_CATEGORY
+  emit('confirm', filesWithCover, category)
 }

 // 处理 visible 变化
--- a/frontend/app/web-gold/src/router/index.js
+++ b/frontend/app/web-gold/src/router/index.js
@@ -100,10 +100,10 @@ router.beforeEach(async (to, from, next) => {
  }

  // 检查是否已登录（通过 token 是否有效）
-  const isAuthenticated = tokenManager.isLoggedIn()
+  const authenToken = tokenManager.getToken()

  // 路由访问控制
-  if (to.meta.requiresAuth && !isAuthenticated) {
+  if (to.meta.requiresAuth && !authenToken) {
    // 需要认证但未登录，跳转到登录页并记录当前路径
    next({
      path: '/login',
@@ -113,13 +113,13 @@ router.beforeEach(async (to, from, next) => {
  }

  // 已登录用户访问登录页，重定向到首页
-  if (to.path === '/login' && isAuthenticated) {
+  if (to.path === '/login' && authenToken) {
    next({ path: '/content-style/benchmark', replace: true })
    return
  }

  // 首次访问且已登录时，同步用户信息到 store
-  if (isAuthenticated && !userStore.isLoggedIn) {
+  if (authenToken) {
    userStore.isLoggedIn = true
    userStore.fetchUserInfo().catch(error => {
      console.error('初始化用户信息失败:', error)
--- a/frontend/app/web-gold/src/services/AuthService.js
+++ b/frontend/app/web-gold/src/services/AuthService.js
@@ -1,241 +0,0 @@
-/**
- * 认证服务 - 封装所有认证相关业务逻辑
- * 提供登录、登出、刷新token等方法
- * 函数式实现，无 this 绑定问题
- */
-
-import { clientAxios } from '@gold/api/axios/client'
-import tokenManager from '@gold/utils/token-manager'
-import router from '@/router'
-
-// 刷新token的锁，避免并发刷新
-let isRefreshing = false
-let refreshPromise = null
-
-/**
- * 手机号+验证码登录
- */
-async function loginBySms(mobile, code) {
-  try {
-    const { data } = await clientAxios.post('/api/member/auth/sms-login', { mobile, code })
-    const tokenInfo = data || {}
-
-    // 保存token
-    tokenManager.setTokens({
-      accessToken: tokenInfo.accessToken || '',
-      refreshToken: tokenInfo.refreshToken || '',
-      expiresIn: tokenInfo.expiresTime ? Math.floor(tokenInfo.expiresTime / 1000) : 7200,
-      tokenType: 'Bearer'
-    })
-
-    return tokenInfo
-  } catch (error) {
-    console.error('短信登录失败:', error)
-    throw error
-  }
-}
-
-/**
- * 账号密码登录
- */
-async function loginByPassword(mobile, password) {
-  try {
-    const { data } = await clientAxios.post('/api/member/auth/login', { mobile, password })
-    const tokenInfo = data || {}
-
-    tokenManager.setTokens({
-      accessToken: tokenInfo.accessToken || '',
-      refreshToken: tokenInfo.refreshToken || '',
-      expiresIn: tokenInfo.expiresTime ? Math.floor(tokenInfo.expiresTime / 1000) : 7200,
-      tokenType: 'Bearer'
-    })
-
-    return tokenInfo
-  } catch (error) {
-    console.error('密码登录失败:', error)
-    throw error
-  }
-}
-
-/**
- * 执行实际刷新token的逻辑
- */
-async function doRefreshToken(refreshToken) {
-  const { data } = await clientAxios.post('/api/member/auth/refresh-token', null, {
-    params: { refreshToken }
-  })
-  const tokenInfo = data || {}
-
-  tokenManager.setTokens({
-    accessToken: tokenInfo.accessToken || '',
-    refreshToken: tokenInfo.refreshToken || '',
-    expiresIn: tokenInfo.expiresTime ? Math.floor(tokenInfo.expiresTime / 1000) : 7200,
-    tokenType: 'Bearer'
-  })
-
-  return tokenInfo
-}
-
-/**
- * 刷新token
- * 使用锁机制防止并发刷新
- */
-async function refreshToken() {
-  // 如果正在刷新，返回已有的刷新Promise
-  if (isRefreshing && refreshPromise) {
-    return refreshPromise
-  }
-
-  const refreshTokenValue = tokenManager.getRefreshToken()
-  if (!refreshTokenValue) {
-    throw new Error('缺少refreshToken，无法刷新')
-  }
-
-  try {
-    isRefreshing = true
-    refreshPromise = doRefreshToken(refreshTokenValue)
-    const result = await refreshPromise
-    return result
-  } finally {
-    isRefreshing = false
-    refreshPromise = null
-  }
-}
-
-/**
- * 发送短信验证码
- */
-async function sendSmsCode(mobile, scene = 1) {
-  const { data } = await clientAxios.post('/api/member/auth/send-sms-code', {
-    mobile,
-    scene
-  })
-  return data
-}
-
-/**
- * 登出
- */
-async function logout() {
-  try {
-    // 清除token
-    tokenManager.clearTokens()
-
-    // 使用router跳转，避免整页刷新
-    router.push('/login')
-  } catch (error) {
-    console.error('登出失败:', error)
-    // 即使出错也要清除token
-    tokenManager.clearTokens()
-    // 依然使用router跳转
-    router.push('/login')
-  }
-}
-
-/**
- * 检查是否已登录
- */
-function isAuthenticated() {
-  return tokenManager.isLoggedIn()
-}
-
-/**
- * 获取当前用户信息
- */
-async function getCurrentUser() {
-  if (!isAuthenticated()) {
-    return null
-  }
-
-  try {
-    const { data } = await clientAxios.get('/api/member/user/get')
-    return data || null
-  } catch (error) {
-    console.error('获取用户信息失败:', error)
-    return null
-  }
-}
-
-/**
- * 处理401/403错误
- * @param {Error} error - axios错误对象
- * @param {Function} onAuthFailed - 认证失败回调
- */
-async function handleAuthError(error, onAuthFailed) {
-  const status = error?.status
-  const data = error?.data
-  const code = error?.code
-  
-  // 统一检查是否为 401 (token无效或过期)
-  const is401 = (code === 401) || (status === 401)
-
-  // 统一检查是否为 403 (没有权限)
-  const is403 = (code === 403) || (status === 403)
-
-  // 处理 401 错误：尝试刷新 token
-  if (is401) {
-    try {
-      // 刷新 token
-      await refreshToken()
-
-      // 刷新成功：标记错误已处理，token已更新
-      error._handled = true
-      error._tokenRefreshed = true
-      console.info('Token刷新成功，可以重试原请求')
-
-      // 调用回调，告知上层可以重试
-      if (typeof onAuthFailed === 'function') {
-        onAuthFailed(error)
-      }
-
-      // 不再抛出错误，交给上层决定（如果上层没有跳转，则可以重试请求）
-      return null
-    } catch (refreshError) {
-      console.error('刷新token失败:', refreshError)
-
-      // 刷新失败：标记为未处理，调用回调后抛出错误
-      error._handled = false
-      error._tokenRefreshed = false
-
-      if (typeof onAuthFailed === 'function') {
-        onAuthFailed(error)
-      }
-      throw error
-    }
-  }
-
-  // 处理 403 错误：直接调用回调
-  if (is403) {
-    error._handled = true
-    if (typeof onAuthFailed === 'function') {
-      onAuthFailed(error)
-    }
-    throw error
-  }
-
-  // 其他错误直接抛出
-  throw error
-}
-
-export default {
-  loginBySms,
-  loginByPassword,
-  refreshToken,
-  sendSmsCode,
-  logout,
-  isAuthenticated,
-  getCurrentUser,
-  handleAuthError
-}
-
-// 导出便捷方法（解构赋值，不会有 this 问题）
-export {
-  loginBySms,
-  loginByPassword,
-  refreshToken,
-  sendSmsCode,
-  logout,
-  isAuthenticated,
-  getCurrentUser,
-  handleAuthError
-}
--- a/frontend/app/web-gold/src/utils/coverCache.js
+++ b/frontend/app/web-gold/src/utils/coverCache.js
@@ -0,0 +1,175 @@
+/**
+ * 封面缓存工具
+ * 使用localStorage缓存视频封面base64数据，降低OSS请求成本
+ */
+
+const CACHE_KEY = 'tik_video_covers'
+const CACHE_EXPIRE_DAYS = 7 // 缓存过期时间：7天
+
+/**
+ * 获取所有缓存的封面
+ * @returns {Object} 缓存对象 { fileId: { base64: string, timestamp: number } }
+ */
+function getAllCaches() {
+  try {
+    const cacheJson = localStorage.getItem(CACHE_KEY)
+    return cacheJson ? JSON.parse(cacheJson) : {}
+  } catch (error) {
+    console.warn('[CoverCache] 读取缓存失败:', error)
+    return {}
+  }
+}
+
+/**
+ * 保存缓存
+ * @param {Object} caches 缓存对象
+ */
+function saveCaches(caches) {
+  try {
+    localStorage.setItem(CACHE_KEY, JSON.stringify(caches))
+  } catch (error) {
+    console.warn('[CoverCache] 保存缓存失败:', error)
+  }
+}
+
+/**
+ * 从缓存获取封面
+ * @param {number} fileId 文件ID
+ * @returns {string|null} base64数据或null
+ */
+function getCover(fileId) {
+  const caches = getAllCaches()
+  const cache = caches[fileId]
+
+  if (!cache) {
+    return null
+  }
+
+  // 检查是否过期
+  const now = Date.now()
+  const expireTime = CACHE_EXPIRE_DAYS * 24 * 60 * 60 * 1000
+  if (now - cache.timestamp > expireTime) {
+    // 缓存过期，删除
+    delete caches[fileId]
+    saveCaches(caches)
+    return null
+  }
+
+  return cache.base64
+}
+
+/**
+ * 保存封面到缓存
+ * @param {number} fileId 文件ID
+ * @param {string} base64 base64数据
+ */
+function setCover(fileId, base64) {
+  if (!fileId || !base64) {
+    return
+  }
+
+  const caches = getAllCaches()
+  caches[fileId] = {
+    base64,
+    timestamp: Date.now()
+  }
+  saveCaches(caches)
+}
+
+/**
+ * 批量保存封面
+ * @param {Array} coverList 封面列表 [{ fileId, base64 }]
+ */
+function batchSetCovers(coverList) {
+  if (!Array.isArray(coverList) || coverList.length === 0) {
+    return
+  }
+
+  const caches = getAllCaches()
+  let hasChange = false
+
+  coverList.forEach(({ fileId, base64 }) => {
+    if (fileId && base64 && !caches[fileId]) {
+      caches[fileId] = {
+        base64,
+        timestamp: Date.now()
+      }
+      hasChange = true
+    }
+  })
+
+  if (hasChange) {
+    saveCaches(caches)
+  }
+}
+
+/**
+ * 清理所有过期缓存
+ */
+function cleanExpired() {
+  const caches = getAllCaches()
+  const now = Date.now()
+  const expireTime = CACHE_EXPIRE_DAYS * 24 * 60 * 60 * 1000
+  let hasChange = false
+
+  Object.keys(caches).forEach(fileId => {
+    if (now - caches[fileId].timestamp > expireTime) {
+      delete caches[fileId]
+      hasChange = true
+    }
+  })
+
+  if (hasChange) {
+    saveCaches(caches)
+  }
+}
+
+/**
+ * 清空所有缓存
+ */
+function clearAll() {
+  try {
+    localStorage.removeItem(CACHE_KEY)
+  } catch (error) {
+    console.warn('[CoverCache] 清空缓存失败:', error)
+  }
+}
+
+/**
+ * 获取缓存统计信息
+ * @returns {Object} 统计信息
+ */
+function getStats() {
+  const caches = getAllCaches()
+  const now = Date.now()
+  const expireTime = CACHE_EXPIRE_DAYS * 24 * 60 * 60 * 1000
+
+  let expiredCount = 0
+  Object.keys(caches).forEach(fileId => {
+    if (now - caches[fileId].timestamp > expireTime) {
+      expiredCount++
+    }
+  })
+
+  return {
+    total: Object.keys(caches).length,
+    expired: expiredCount,
+    valid: Object.keys(caches).length - expiredCount
+  }
+}
+
+// 页面加载时自动清理过期缓存
+if (typeof window !== 'undefined') {
+  window.addEventListener('load', () => {
+    cleanExpired()
+  })
+}
+
+export default {
+  getCover,
+  setCover,
+  batchSetCovers,
+  cleanExpired,
+  clearAll,
+  getStats
+}
--- a/frontend/app/web-gold/src/views/auth/Login.vue
+++ b/frontend/app/web-gold/src/views/auth/Login.vue
@@ -1,22 +1,7 @@
 <template>
  <div class="login-container">
-    <!-- 科技感背景光点 -->
-    <div class="bg-stars">
-      <div
-        v-for="(star, index) in stars"
-        :key="index"
-        class="star"
-        :class="{ active: star.active }"
-        :style="{
-          left: star.left + '%',
-          top: star.top + '%',
-          width: star.size + 'px',
-          height: star.size + 'px'
-        }"
-        @mouseenter="activateStar(index)"
-        @mouseleave="deactivateStar(index)"
-      ></div>
-    </div>
+    <!-- 静态背景 -->
+    <div class="bg-static"></div>

    <div class="login-content">
      <!-- 左侧品牌区 -->
@@ -26,12 +11,12 @@
            <svg width="80" height="80" viewBox="0 0 80 80">
              <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
-                  <stop offset="0%" style="stop-color:#6B8AFF;stop-opacity:1" />
-                  <stop offset="100%" style="stop-color:#A855F7;stop-opacity:1" />
+                  <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
+                  <stop offset="100%" style="stop-color:#60A5FA;stop-opacity:1" />
                </linearGradient>
              </defs>
-              <circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2"/>
-              <path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"/>
+              <circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.6"/>
+              <path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.8"/>
            </svg>
          </div>
          <h1 class="brand-title">金牌内容大师</h1>
@@ -61,120 +46,73 @@
            <p class="login-subtitle">进入您的创作空间</p>
          </div>

-          <a-tabs v-model:activeKey="activeTab" centered class="login-tabs">
-            <a-tab-pane key="sms" tab="短信登录">
-              <a-form
-                :model="smsForm"
-                :rules="smsRules"
-                ref="smsFormRef"
-                layout="vertical"
+          <a-form
+            :model="smsForm"
+            :rules="smsRules"
+            ref="smsFormRef"
+            layout="vertical"
+          >
+            <a-form-item name="mobile" label="手机号">
+              <a-input
+                v-model:value="smsForm.mobile"
+                size="large"
+                placeholder="请输入手机号"
+                :maxlength="11"
+                class="tech-input"
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
              >
-                <a-form-item name="mobile" label="手机号">
-                  <a-input
-                    v-model:value="smsForm.mobile"
-                    size="large"
-                    placeholder="请输入手机号"
-                    :maxlength="11"
-                    class="tech-input"
-                  >
-                    <template #prefix>
-                      <PhoneOutlined class="input-icon" />
-                    </template>
-                  </a-input>
-                </a-form-item>
+                <template #prefix>
+                  <PhoneOutlined class="input-icon" />
+                </template>
+              </a-input>
+            </a-form-item>

-                <a-form-item name="code" label="验证码">
-                  <div class="code-input">
-                    <a-input
-                      v-model:value="smsForm.code"
-                      size="large"
-                      placeholder="请输入验证码"
-                      :maxlength="6"
-                      class="tech-input"
-                    >
-                      <template #prefix>
-                        <SafetyOutlined class="input-icon" />
-                      </template>
-                    </a-input>
-                    <a-button
-                      type="primary"
-                      :disabled="codeCountdown > 0"
-                      :loading="sendingCode"
-                      @click="sendSmsCode"
-                      class="send-code-btn"
-                    >
-                      {{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
-                    </a-button>
-                  </div>
-                </a-form-item>
+            <a-form-item name="code" label="验证码">
+              <div class="code-input">
+                <a-input
+                  v-model:value="smsForm.code"
+                  size="large"
+                  placeholder="请输入验证码"
+                  :maxlength="4"
+                  class="tech-input"
+                  autocomplete="off"
+                  autocorrect="off"
+                  autocapitalize="off"
+                  spellcheck="false"
+                >
+                  <template #prefix>
+                    <SafetyOutlined class="input-icon" />
+                  </template>
+                </a-input>
+                <a-button
+                  type="primary"
+                  :disabled="codeCountdown > 0"
+                  :loading="sendingCode"
+                  @click="sendSmsCode"
+                  class="send-code-btn"
+                >
+                  {{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
+                </a-button>
+              </div>
+            </a-form-item>

-                <a-form-item>
-                  <a-button
-                    type="primary"
-                    html-type="submit"
-                    size="large"
-                    block
-                    :loading="loggingIn"
-                    @click="handleSmsLogin"
-                    class="login-btn"
-                  >
-                    立即登录
-                  </a-button>
-                </a-form-item>
-              </a-form>
-            </a-tab-pane>
-
-            <a-tab-pane key="password" tab="密码登录">
-              <a-form
-                :model="passwordForm"
-                :rules="passwordRules"
-                ref="passwordFormRef"
-                layout="vertical"
+            <a-form-item>
+              <a-button
+                type="primary"
+                html-type="submit"
+                size="large"
+                block
+                :loading="loggingIn"
+                @click="handleSmsLogin"
+                class="login-btn"
              >
-                <a-form-item name="mobile" label="手机号">
-                  <a-input
-                    v-model:value="passwordForm.mobile"
-                    size="large"
-                    placeholder="请输入手机号"
-                    :maxlength="11"
-                    class="tech-input"
-                  >
-                    <template #prefix>
-                      <PhoneOutlined class="input-icon" />
-                    </template>
-                  </a-input>
-                </a-form-item>
-
-                <a-form-item name="password" label="密码">
-                  <a-input-password
-                    v-model:value="passwordForm.password"
-                    size="large"
-                    placeholder="请输入密码"
-                    @pressEnter="handlePasswordLogin"
-                    class="tech-input"
-                  >
-                    <template #prefix>
-                      <LockOutlined class="input-icon" />
-                    </template>
-                  </a-input-password>
-                </a-form-item>
-
-                <a-form-item>
-                  <a-button
-                    type="primary"
-                    html-type="submit"
-                    size="large"
-                    block
-                    :loading="loggingIn"
-                    @click="handlePasswordLogin"
-                    class="login-btn"
-                  >
-                    立即登录
-                  </a-button>
-                </a-form-item>
-              </a-form>
-            </a-tab-pane>
-          </a-tabs>
+                立即登录
+              </a-button>
+            </a-form-item>
+          </a-form>
        </div>
      </div>
    </div>
@@ -182,20 +120,19 @@
 </template>

 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
 import {
  PhoneOutlined,
-  SafetyOutlined,
-  LockOutlined
+  SafetyOutlined
 } from '@ant-design/icons-vue'
-import authService from '@/services/AuthService'
-
+import authApi, { SMS_SCENE } from '@/api/auth'
+import tokenManager from '@gold/utils/token-manager'
+import { useUserStore } from '@/stores/user'
 const router = useRouter()
-
-// 标签页
-const activeTab = ref('sms')
+const userStore = useUserStore()
+window.a = router

 // 短信登录表单
 const smsForm = reactive({
@@ -204,13 +141,6 @@ const smsForm = reactive({
 })
 const smsFormRef = ref()

-// 密码登录表单
-const passwordForm = reactive({
-  mobile: '',
-  password: ''
-})
-const passwordFormRef = ref()
-
 // 状态
 const sendingCode = ref(false)
 const loggingIn = ref(false)
@@ -219,9 +149,6 @@ const codeCountdown = ref(0)
 // 验证码倒计时
 let countdownTimer = null

-// 背景光点
-const stars = ref([])
-
 // 表单验证规则
 const smsRules = {
  mobile: [
@@ -230,51 +157,17 @@ const smsRules = {
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
-    { len: 6, message: '验证码为6位数字', trigger: 'blur' }
+    { pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' }
  ]
 }

-const passwordRules = {
-  mobile: [
-    { required: true, message: '请输入手机号', trigger: 'blur' },
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 4, max: 16, message: '密码长度为4-16位', trigger: 'blur' }
-  ]
-}
-
-// 初始化背景光点
-onMounted(() => {
-  const starCount = 50
-  for (let i = 0; i < starCount; i++) {
-    stars.value.push({
-      left: Math.random() * 100,
-      top: Math.random() * 100,
-      size: Math.random() * 3 + 1,
-      active: false
-    })
-  }
-})
-
-// 激活光点
-function activateStar(index) {
-  stars.value[index].active = true
-}
-
-// 停用光点
-function deactivateStar(index) {
-  stars.value[index].active = false
-}
-
 // 发送验证码
 async function sendSmsCode() {
  try {
    await smsFormRef.value.validateFields(['mobile'])
    sendingCode.value = true

-    await authService.sendSmsCode(smsForm.mobile, 1)
+    await authApi.sendSmsCode(smsForm.mobile, SMS_SCENE.MEMBER_LOGIN)

    message.success('验证码已发送')

@@ -305,41 +198,30 @@ async function handleSmsLogin() {
    await smsFormRef.value.validateFields()
    loggingIn.value = true

-    const result = await authService.loginBySms(smsForm.mobile, smsForm.code)
+    const info = await authApi.loginBySms(smsForm.mobile, smsForm.code)
+
+    // 更新用户登录状态
+    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,
+      }
+    })
+
+    // 获取完整的用户信息
+    await userStore.fetchUserInfo()

    message.success('登录成功')

    // 获取redirect参数，跳转到之前的页面或默认首页
-    const redirect = router.currentRoute.value.query.redirect
-    setTimeout(() => {
-      router.push(redirect || '/content-style/benchmark')
-    }, 500)
-  } catch (error) {
-    if (error?.response?.data?.message) {
-      message.error(error.response.data.message)
-    } else {
-      message.error('登录失败，请检查输入信息')
-    }
-  } finally {
-    loggingIn.value = false
-  }
-}
-
-// 密码登录
-async function handlePasswordLogin() {
-  try {
-    await passwordFormRef.value.validateFields()
-    loggingIn.value = true
-
-    await authService.loginByPassword(passwordForm.mobile, passwordForm.password)
-
-    message.success('登录成功')
-
-    // 获取redirect参数，跳转到之前的页面或默认首页
-    const redirect = router.currentRoute.value.query.redirect
-    setTimeout(() => {
-      router.push(redirect || '/content-style/benchmark')
-    }, 500)
+    router.push({
+      name: '对标分析'
+    })
  } catch (error) {
    if (error?.response?.data?.message) {
      message.error(error.response.data.message)
@@ -360,29 +242,6 @@ async function handlePasswordLogin() {
  overflow: hidden;
 }

-/* 背景光点 */
-.bg-stars {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.star {
-  position: absolute;
-  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
-  border-radius: 50%;
-  opacity: 0.3;
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.star.active {
-  opacity: 0.8;
-  transform: scale(1.5);
-  box-shadow: 0 0 20px rgba(107, 138, 255, 0.6);
-}
-
 /* 主内容区 */
 .login-content {
  display: flex;
@@ -397,70 +256,21 @@ async function handlePasswordLogin() {
  align-items: center;
  justify-content: center;
  padding: 60px;
-  position: relative;
-  overflow: hidden;
-}
-
-.brand-panel::before {
-  content: '';
-  position: absolute;
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(107, 138, 255, 0.1) 0%, transparent 70%);
-  border-radius: 50%;
-  top: -100px;
-  right: -100px;
-  animation: pulse 4s ease-in-out infinite;
-}
-
-.brand-panel::after {
-  content: '';
-  position: absolute;
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
-  border-radius: 50%;
-  bottom: -50px;
-  left: -50px;
-  animation: pulse 4s ease-in-out infinite 2s;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 0.5;
-  }
-  50% {
-    transform: scale(1.1);
-    opacity: 0.8;
-  }
 }

 .brand-inner {
-  position: relative;
-  z-index: 1;
  text-align: center;
  max-width: 400px;
 }

 .brand-icon {
  margin-bottom: 30px;
-  animation: float 3s ease-in-out infinite;
-}
-
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
 }

 .brand-title {
  font-size: 48px;
  font-weight: 700;
-  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
+  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
@@ -469,9 +279,9 @@ async function handlePasswordLogin() {

 .brand-subtitle {
  font-size: 18px;
-  color: #6B8AFF;
+  color: #3B82F6;
  margin-bottom: 50px;
-  opacity: 0.8;
+  opacity: 0.9;
 }

 .brand-features {
@@ -489,7 +299,7 @@ async function handlePasswordLogin() {
 }

 .feature-icon {
-  color: #A855F7;
+  color: #3B82F6;
  font-size: 20px;
 }

@@ -499,113 +309,92 @@ async function handlePasswordLogin() {
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: 60px;
+  padding: 60px 80px;
  background: #0a0a0a;
 }

 .login-card {
  width: 100%;
  max-width: 420px;
-  background: rgba(26, 26, 46, 0.6);
-  backdrop-filter: blur(20px);
-  border-radius: 24px;
-  padding: 50px 40px;
-  border: 1px solid rgba(107, 138, 255, 0.2);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  background: rgba(18, 18, 38, 0.88);
+  backdrop-filter: blur(25px);
+  border-radius: 20px;
+  padding: 40px 32px;
+  border: 1px solid rgba(59, 130, 246, 0.25);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }

 .card-header {
  text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 32px;
 }

 .login-title {
  font-size: 32px;
  font-weight: 700;
-  color: #A855F7;
+  color: #3B82F6;
  margin-bottom: 10px;
 }

 .login-subtitle {
  font-size: 14px;
-  color: #6B8AFF;
+  color: #60A5FA;
  margin: 0;
-  opacity: 0.8;
+  opacity: 0.9;
 }

-/* 标签页 */
-.login-tabs {
-  margin-bottom: 20px;
+/* 输入框样式覆盖 */
+:deep(.ant-input-affix-wrapper) {
+  border-radius: 12px !important;
+  background: rgba(15, 15, 30, 0.5) !important;
+  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
+  box-shadow: none !important;
 }

-.login-tabs :deep(.ant-tabs-nav) {
-  margin-bottom: 30px;
+:deep(.ant-input-affix-wrapper:hover) {
+  border-color: rgba(59, 130, 246, 0.4) !important;
 }

-.login-tabs :deep(.ant-tabs-tab) {
-  font-size: 15px;
-  font-weight: 500;
-  padding: 10px 24px;
-  color: #666;
-}
-
-.login-tabs :deep(.ant-tabs-tab-active) {
-  color: #A855F7;
-}
-
-.login-tabs :deep(.ant-tabs-ink-bar) {
-  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
-  height: 3px;
-}
-
-/* 输入框 */
-.tech-input {
-  border-radius: 12px;
-  border: 1.5px solid rgba(255, 255, 255, 0.1);
-  background: rgba(15, 15, 30, 0.5);
-  transition: all 0.3s;
-}
-
-.tech-input:hover {
-  border-color: rgba(107, 138, 255, 0.5);
-}
-
-.tech-input:focus,
-.tech-input-focused {
-  border-color: transparent;
-  background: rgba(15, 15, 30, 0.8);
-  box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
+:deep(.ant-input-affix-wrapper-focused) {
+  border-color: rgba(59, 130, 246, 0.25) !important;
+  background: rgba(15, 15, 30, 0.95) !important;
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25) !important;
 }

 :deep(.ant-input) {
  color: #fff;
  font-size: 15px;
+  border: none !important;
+  background: transparent !important;
+}
+
+:deep(.ant-input::placeholder) {
+  color: rgba(160, 160, 160, 0.65);
+  font-size: 14px;
 }

 :deep(.ant-input-prefix) {
-  color: rgba(107, 138, 255, 0.8);
+  color: rgba(59, 130, 246, 0.7);
 }

 :deep(.ant-form-item-label > label) {
  font-weight: 500;
-  color: #a0a0a0;
+  color: #e0e0e0;
+  letter-spacing: 0.2px;
 }

-:deep(.ant-input-affix-wrapper) {
-  border-radius: 12px;
-  border: 1.5px solid rgba(255, 255, 255, 0.1);
-  background: rgba(15, 15, 30, 0.5);
-  transition: all 0.3s;
+
+/* 键盘焦点优化 */
+:deep(.ant-input-affix-wrapper:focus-within) {
+  outline: 2px solid rgba(59, 130, 246, 0.6);
+  outline-offset: 2px;
 }

-:deep(.ant-input-affix-wrapper:hover) {
-  border-color: rgba(107, 138, 255, 0.5);
-}
-
-:deep(.ant-input-affix-wrapper-focused) {
-  border-color: transparent;
-  background: rgba(15, 15, 30, 0.8);
-  box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
+/* 表单验证错误状态 */
+:deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
+  border-color: rgba(255, 77, 79, 0.5) !important;
 }

 /* 验证码输入 */
@@ -618,15 +407,29 @@ async function handlePasswordLogin() {
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
-  background: linear-gradient(135deg, rgba(107, 138, 255, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
-  border: 1px solid rgba(107, 138, 255, 0.3);
-  color: #6B8AFF;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%);
+  border: 1px solid rgba(59, 130, 246, 0.25);
+  color: #3B82F6;
  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 }

-.send-code-btn:hover {
-  background: linear-gradient(135deg, rgba(107, 138, 255, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
-  border-color: rgba(107, 138, 255, 0.5);
+.send-code-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(96, 165, 250, 0.3) 100%);
+  border-color: rgba(59, 130, 246, 0.6);
+  color: #60A5FA;
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
+}
+
+.send-code-btn:active:not(:disabled) {
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
+}
+
+.send-code-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }

 /* 登录按钮 */
@@ -635,9 +438,9 @@ async function handlePasswordLogin() {
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
-  background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
+  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  border: none;
-  box-shadow: 0 4px 20px rgba(107, 138, 255, 0.3);
+  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
  position: relative;
  overflow: hidden;
 }
@@ -658,12 +461,7 @@ async function handlePasswordLogin() {
 }

 .login-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 30px rgba(107, 138, 255, 0.5);
-}
-
-.login-btn:active {
-  transform: translateY(0);
+  box-shadow: 0 6px 30px rgba(59, 130, 246, 0.35);
 }

 /* 图标 */
@@ -671,27 +469,189 @@ async function handlePasswordLogin() {
  font-size: 18px;
 }

-/* 响应式 */
-@media (max-width: 992px) {
-  .login-content {
-    flex-direction: column;
+/* 背景 */
+.bg-static {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
+    radial-gradient(circle at 70% 70%, rgba(96, 165, 250, 0.03) 0%, transparent 50%);
+  pointer-events: none;
+}
+
+/* 响应式优化 - 大屏保持左右分栏 */
+@media (max-width: 1200px) {
+  .brand-title {
+    font-size: 40px;
  }

+  .brand-subtitle {
+    font-size: 16px;
+    margin-bottom: 40px;
+  }
+}
+
+/* 平板横屏优化 */
+@media (max-width: 992px) and (min-width: 769px) {
  .brand-panel {
-    padding: 40px 20px;
-    min-height: 200px;
+    min-height: 140px;
+    padding: 25px 15px;
  }

-  .login-panel {
-    padding: 40px 20px;
+  .brand-icon svg {
+    width: 50px;
+    height: 50px;
  }

  .brand-title {
-    font-size: 36px;
+    font-size: 28px;
+    margin-bottom: 8px;
+  }
+
+  .brand-subtitle {
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .feature-item {
+    font-size: 13px;
+    gap: 8px;
  }

  .login-card {
-    padding: 30px 20px;
+    padding: 28px 24px;
+    max-width: 360px;
+    margin: 0 auto;
+  }
+}
+
+/* 平板竖屏和手机横屏 */
+@media (max-width: 768px) {
+  .login-content {
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .brand-panel {
+    padding: 20px 15px;
+    min-height: 100px;
+    flex: none;
+  }
+
+  .brand-inner {
+    max-width: 100%;
+  }
+
+  .brand-icon svg {
+    width: 45px;
+    height: 45px;
+  }
+
+  .brand-title {
+    font-size: 24px;
+    margin-bottom: 5px;
+  }
+
+  .brand-subtitle {
+    font-size: 12px;
+    margin-bottom: 15px;
+  }
+
+  .feature-item {
+    font-size: 12px;
+    gap: 6px;
+  }
+
+  .feature-item:nth-child(n+2) {
+    display: none;
+  }
+
+  .login-panel {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 20px 15px 40px;
+    overflow-y: auto;
+  }
+
+  .login-card {
+    width: 100%;
+    max-width: 380px;
+    padding: 32px 28px;
+    margin: 0 auto;
+    background: rgba(18, 18, 38, 0.92);
+    backdrop-filter: blur(32px);
+    border-radius: 18px;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    box-shadow:
+      0 10px 36px rgba(0, 0, 0, 0.55),
+      inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
+  .login-title {
+    font-size: 24px;
+  }
+
+  .login-subtitle {
+    font-size: 13px;
+  }
+}
+
+/* 小屏手机优化 */
+@media (max-width: 480px) {
+  .brand-panel {
+    min-height: 80px;
+    padding: 15px 10px;
+  }
+
+  .brand-icon svg {
+    width: 40px;
+    height: 40px;
+  }
+
+  .brand-title {
+    font-size: 20px;
+  }
+
+  .brand-subtitle {
+    display: none;
+  }
+
+  .feature-item:nth-child(1) {
+    display: none;
+  }
+
+  .login-panel {
+    padding: 15px 10px 30px;
+  }
+
+  .login-card {
+    padding: 28px 20px;
+    border-radius: 16px;
+    max-width: 92%;
+  }
+
+  .card-header {
+    margin-bottom: 20px;
+  }
+
+  .login-title {
+    font-size: 22px;
+  }
+
+  .code-input {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .send-code-btn {
+    width: 100%;
+  }
+
+  .login-btn {
+    height: 48px;
+    font-size: 15px;
  }
 }
 </style>
--- a/frontend/app/web-gold/src/views/content-style/Copywriting.vue
+++ b/frontend/app/web-gold/src/views/content-style/Copywriting.vue
@@ -10,7 +10,6 @@ import { UserPromptApi } from '@/api/userPrompt'
 import { useUserStore } from '@/stores/user'
 import GradientButton from '@/components/GradientButton.vue'
 import { setJSON, getJSON } from '@/utils/storage'
-import authService from '@/services/AuthService'

 const promptStore = usePromptStore()
 const userStore = useUserStore()
--- a/frontend/app/web-gold/src/views/material/MaterialGroup.vue
+++ b/frontend/app/web-gold/src/views/material/MaterialGroup.vue
@@ -14,45 +14,44 @@
    <div class="material-group__content">
      <a-spin :spinning="loading" tip="加载中..." style="width: 100%; min-height: 400px;">
        <template v-if="groupList.length > 0">
-          <a-list
-            :data="groupList"
-            :bordered="false"
+          <a-table
+            :data-source="groupList"
+            :columns="columns"
+            :pagination="false"
+            row-key="id"
+            :customRow="customRow"
          >
-            <template #item="{ item }">
-              <a-list-item class="group-item">
-                <a-list-item-meta>
-                  <template #title>
-                    <div class="group-item__header">
-                      <span class="group-item__name">{{ item.name }}</span>
-                      <a-tag>{{ item.fileCount || 0 }} 个文件</a-tag>
-                    </div>
-                  </template>
-                  <template #description>
-                    <div class="group-item__description">
-                      {{ item.description || '暂无描述' }}
-                    </div>
-                    <div class="group-item__meta">
-                      <span>创建时间：{{ formatDate(item.createTime) }}</span>
-                    </div>
-                  </template>
-                </a-list-item-meta>
-                <template #actions>
-                  <a-button type="text" @click="handleEditGroup(item)">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'name'">
+                <div class="table-name-cell">
+                  <span class="table-name">{{ record.name }}</span>
+                  <a-tag color="blue">{{ record.fileCount || 0 }} 个文件</a-tag>
+                </div>
+              </template>
+              <template v-else-if="column.key === 'description'">
+                <span class="table-description">{{ record.description || '暂无描述' }}</span>
+              </template>
+              <template v-else-if="column.key === 'createTime'">
+                <span class="table-time">{{ formatDate(record.createTime) }}</span>
+              </template>
+              <template v-else-if="column.key === 'action'">
+                <div class="table-actions">
+                  <a-button type="link" @click="handleEditGroup(record)">
                    <template #icon>
                      <EditOutlined />
                    </template>
                    编辑
                  </a-button>
-                  <a-button type="text" status="danger" @click="handleDeleteGroup(item)">
+                  <a-button type="link" danger @click="handleDeleteGroup(record)">
                    <template #icon>
                      <DeleteOutlined />
                    </template>
                    删除
                  </a-button>
-                </template>
-              </a-list-item>
+                </div>
+              </template>
            </template>
-          </a-list>
+          </a-table>
        </template>
        <template v-else>
          <a-empty description="暂无分组" />
@@ -105,6 +104,40 @@ const groupModalTitle = ref('新建分组')
 const isEdit = ref(false)
 const groupFormRef = ref(null)

+// 表格列配置
+const columns = [
+  {
+    title: '分组名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 300
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    key: 'description'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 200
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 200,
+    align: 'right'
+  }
+]
+
+// 自定义行样式
+const customRow = (record) => {
+  return {
+    class: 'custom-table-row'
+  }
+}
+
 // 表单
 const groupForm = reactive({
  id: undefined,
@@ -118,16 +151,46 @@ const loadGroupList = async () => {
  if (loading.value) return // 防止重复请求
  loading.value = true
  try {
+    console.log('[MaterialGroup] 开始加载分组列表...')
    const res = await MaterialGroupService.getGroupList()
-    if (res.code === 0) {
+    console.log('[MaterialGroup] 分组列表响应:', res)
+    console.log('[MaterialGroup] 响应类型:', typeof res)
+    console.log('[MaterialGroup] 响应结构:', JSON.stringify(res, null, 2))
+
+    // 检查多种可能的数据结构
+    if (res.code === 0 || res.code === '0') {
      groupList.value = res.data || []
+      console.log('[MaterialGroup] 分组列表加载成功（code===0），共', groupList.value.length, '个分组')
+      console.log('[MaterialGroup] 分组数据:', groupList.value)
+    } else if (Array.isArray(res)) {
+      // 如果直接返回数组
+      groupList.value = res
+      console.log('[MaterialGroup] 分组列表加载成功（直接数组），共', groupList.value.length, '个分组')
+      console.log('[MaterialGroup] 分组数据:', groupList.value)
+    } else if (res && typeof res === 'object') {
+      // 检查其他可能的字段
+      const possibleData = res.data || res.list || res.result || res.rows
+      if (Array.isArray(possibleData)) {
+        groupList.value = possibleData
+        console.log('[MaterialGroup] 分组列表加载成功（其他字段），共', groupList.value.length, '个分组')
+        console.log('[MaterialGroup] 分组数据:', groupList.value)
+      } else {
+        console.error('[MaterialGroup] 响应结构异常:', res)
+        message.error('响应数据结构异常')
+        groupList.value = []
+      }
    } else {
-      message.error(res.msg || '加载失败')
+      console.error('[MaterialGroup] 分组列表加载失败，响应结构异常:', res)
+      message.error('响应数据结构异常')
      groupList.value = []
    }
+
+    // 强制触发视图更新
+    console.log('[MaterialGroup] 当前 groupList 值:', groupList.value)
+    console.log('[MaterialGroup] groupList 长度:', groupList.value?.length)
  } catch (error) {
-    console.error('加载分组列表失败:', error)
-    message.error('加载失败，请重试')
+    console.error('[MaterialGroup] 加载分组列表失败:', error)
+    message.error('加载失败，请重试: ' + (error.message || error))
    groupList.value = []
  } finally {
    loading.value = false
@@ -262,49 +325,39 @@ onMounted(() => {
  flex: 1;
  overflow-y: auto;
  position: relative;
-}
-
-.material-group__content :deep(.arco-spin) {
-  min-height: 400px;
-}
-
-.material-group__content :deep(.arco-spin-content) {
-  min-height: 400px;
-}
-
-.group-item {
+  border-radius: 8px;
  padding: 16px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  margin-bottom: 12px;
-  transition: all 0.2s;
 }

-.group-item:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.group-item__header {
+.table-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
 }

-.group-item__name {
-  font-size: 16px;
+.table-name {
+  font-size: 15px;
  font-weight: 500;
+  color: #262626;
 }

-.group-item__description {
-  margin-top: 8px;
-  color: var(--color-text-2);
+.table-description {
+  color: #595959;
+  font-size: 14px;
 }

-.group-item__meta {
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--color-text-3);
+.table-time {
+  color: #8c8c8c;
+  font-size: 14px;
 }
+
+.table-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+
+
 </style>

--- a/frontend/app/web-gold/src/views/material/MaterialList.vue
+++ b/frontend/app/web-gold/src/views/material/MaterialList.vue
@@ -21,6 +21,7 @@
          type="primary"
          ghost
          @click="handleOpenMixModal"
+          :disabled="groupList.length === 0"
        >
          素材混剪
        </a-button>
@@ -91,25 +92,20 @@
              <div class="material-item__content">
              <!-- 预览图 -->
              <div class="material-item__preview">
-                <!-- 视频文件：统一使用 coverBase64，如果没有则使用 coverUrl，最后使用视频标签显示第一帧 -->
+                <!-- 视频文件：只使用 coverBase64（本地缓存），不使用任何OSS URL -->
                <img
-                  v-if="file.isVideo && (file.coverBase64 || file.coverUrl)"
+                  v-if="file.isVideo && file.coverBase64"
                  :src="file.coverBase64"
                  :alt="file.fileName"
                  @error="handleImageError"
                />
-                <!-- 视频文件：如果没有封面，使用视频标签显示第一帧 -->
-                <video
-                  v-else-if="file.isVideo && file.previewUrl"
-                  :src="file.previewUrl"
-                  muted
-                  preload="metadata"
-                  class="preview-video"
-                />
+                <!-- 视频文件：如果没有封面，显示占位符（不使用视频标签） -->
+                <div v-else-if="file.isVideo" class="material-item__placeholder">
+                  <FileOutlined />
+                </div>
                <!-- 图片或其他文件：使用图片标签 -->
-                <!-- 优先级：coverUrl > coverBase64 > previewUrl -->
                <img
-                  v-else-if="file.coverUrl || file.coverBase64 || file.previewUrl"
+                  v-else-if="!file.isVideo && (file.coverUrl || file.coverBase64 || file.previewUrl)"
                  :src="file.coverUrl || file.coverBase64 || file.previewUrl"
                  :alt="file.fileName"
                  @error="handleImageError"
@@ -123,8 +119,8 @@
                  <a-tag v-else-if="file.isImage" color="blue">图片</a-tag>
                  <a-tag v-else color="gray">文件</a-tag>
                </div>
-                <!-- 分组图标 -->
-                <div class="material-item__group" @click.stop="handleSingleGroup(file)">
+                <!-- 分组图标（仅视频文件显示） -->
+                <div v-if="file.isVideo" class="material-item__group" @click.stop="handleSingleGroup(file)">
                  <TagsOutlined />
                </div>
                <!-- 下载图标 -->
@@ -144,6 +140,9 @@
                <div class="material-item__meta">
                  <span>{{ formatFileSize(file.fileSize) }}</span>
                  <span>{{ formatDate(file.createTime) }}</span>
+                  <span v-if="file.groupId" class="material-item__group-name">
+                    <TagsOutlined /> {{ getGroupName(file.groupId) }}
+                  </span>
                </div>
              </div>
              </div>
@@ -172,81 +171,36 @@
    <MaterialUploadModal
      v-model:visible="uploadModalVisible"
      :uploading="uploading"
+      :file-category="filters.fileCategory"
      @confirm="handleConfirmUpload"
      @cancel="handleUploadCancel"
    />

    <!-- 批量分组模态框 -->
-    <a-modal
+    <MaterialBatchGroupModal
      v-model:open="groupModalVisible"
-      title="批量分组"
-      centered
-      @ok="handleBatchGroup"
+      :group-list="groupList"
+      :file-count="selectedFileIds.length"
+      :file-name="groupingFileName"
+      @confirm="handleBatchGroup"
      @cancel="handleGroupCancel"
-    >
-      <a-form layout="vertical">
-        <a-form-item label="选择分组" required>
-          <a-select
-            v-model:value="selectedGroupId"
-            placeholder="请选择要添加到的分组"
-            style="width: 100%"
-          >
-            <a-select-option v-for="group in groupList" :key="group.id" :value="group.id">
-              {{ group.name }}
-            </a-select-option>
-          </a-select>
-        </a-form-item>
-        <div style="margin-top: 16px; padding: 12px; background: var(--color-bg-2); border-radius: var(--radius-card);">
-          <p style="margin: 0; font-size: 13px; color: var(--color-text-2);">
-            {{ groupingInfo }}
-          </p>
-        </div>
-      </a-form>
-    </a-modal>
+    />

-    <a-modal
+    <!-- 素材混剪模态框 -->
+    <MaterialMixModal
+      ref="mixModalRef"
      v-model:open="mixModalVisible"
-      title="素材混剪"
-      centered
-      :confirm-loading="mixing"
-      ok-text="提交混剪"
-      cancel-text="取消"
-      @ok="handleMixConfirm"
+      :loading="mixing"
+      :group-list="groupList"
+      :all-audio-files="allAudioFiles"
+      @confirm="handleMixConfirm"
      @cancel="handleMixCancel"
-    >
-      <div class="mix-modal__summary">
-        <p>视频素材：{{ allVideoUrls.length }} 个</p>
-        <p>背景音乐：{{ allAudioUrls.length }} 个</p>
-        <p style="margin-top: 8px; font-size: 12px; color: var(--color-text-3);">
-          系统将智能随机选择素材进行混剪
-        </p>
-      </div>
-      <a-form layout="vertical">
-        <a-form-item label="视频标题" required>
-          <a-input v-model:value="mixForm.title" placeholder="请输入生成视频标题" />
-        </a-form-item>
-        <a-form-item label="文案内容" required>
-          <a-textarea
-            v-model:value="mixForm.text"
-            placeholder="请输入文案（每句话换行以便自动拆分）"
-            :rows="4"
-          />
-        </a-form-item>
-        <a-form-item label="生成成片数量" required>
-          <a-input-number
-            v-model:value="mixForm.produceCount"
-            :min="1"
-            :max="10"
-            style="width: 100%"
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
+    />
  </div>
 </template>

 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { message, Modal } from 'ant-design-vue'
 import {
  UploadOutlined,
@@ -257,10 +211,12 @@ import {
  DownloadOutlined
 } from '@ant-design/icons-vue'
 import { MaterialService, MaterialGroupService } from '@/api/material'
-import { MixService } from '@/api/mix'
 import MaterialUploadModal from '@/components/material/MaterialUploadModal.vue'
+import MaterialBatchGroupModal from '@/components/material/MaterialBatchGroupModal.vue'
+import MaterialMixModal from '@/components/material/MaterialMixModal.vue'
 import { formatFileSize, formatDate } from '@/utils/file'
 import { MixTaskService } from '@/api/mixTask'
+import coverCache from '@/utils/coverCache'

 // 数据
 const loading = ref(false)
@@ -277,6 +233,24 @@ const groupList = ref([])
 const selectedGroupId = ref(null)
 const groupingFileId = ref(null) // 当前正在分组的单个文件ID

+// 获取单个文件分组的文件名
+const groupingFileName = computed(() => {
+  if (!groupingFileId.value) return ''
+  const file = fileList.value.find(f => f.id === groupingFileId.value)
+  return file?.fileName || ''
+})
+
+// 获取分组名称（根据groupId）
+const getGroupName = (groupId) => {
+  if (!groupId) return ''
+  const group = groupList.value.find(g => g.id === groupId)
+  return group?.name || ''
+}
+
+// 混剪相关
+const mixModalRef = ref(null) // 混剪模态框的 ref
+const allAudioFiles = ref([]) // 所有音频文件
+
 // 筛选条件
 const filters = reactive({
  fileCategory: 'video', // 默认分类为视频
@@ -317,8 +291,54 @@ const loadFileList = async () => {
  try {
    const res = await MaterialService.getFilePage(buildQueryParams())
    if (res.code === 0) {
-      fileList.value = res.data.list || []
+      const files = res.data.list || []
+
+      // 优先从缓存获取封面，避免重复请求OSS
+      const coverList = []
+      files.forEach(file => {
+        // 视频文件：只使用缓存的coverBase64，绝对不使用coverUrl
+        // 所有视频都不允许从OSS获取封面（包括generate/其他分类）
+        if (file.isVideo) {
+          // 从缓存获取coverBase64
+          const cachedCover = coverCache.getCover(file.id)
+          if (cachedCover) {
+            file.coverBase64 = cachedCover
+          } else if (file.coverBase64) {
+            // 服务端返回了coverBase64，保存到缓存
+            coverCache.setCover(file.id, file.coverBase64)
+          } else {
+            // 没有缓存和base64，设置空值
+            file.coverBase64 = null
+          }
+
+          // 彻底删除coverUrl，防止任何OSS请求
+          delete file.coverUrl
+
+          // 即使有previewUrl也不给视频使用
+          if (file.previewUrl && !file.coverBase64) {
+            delete file.previewUrl
+          }
+        }
+
+        // 收集有coverBase64的文件，用于批量缓存
+        if (file.coverBase64) {
+          coverList.push({ fileId: file.id, base64: file.coverBase64 })
+        }
+      })
+
+      // 批量保存缓存（仅保存还没有缓存的文件）
+      if (coverList.length > 0) {
+        coverCache.batchSetCovers(coverList)
+      }
+
+      fileList.value = files
      pagination.total = res.data.total || 0
+
+      // 输出缓存统计信息（开发环境）
+      if (process.env.NODE_ENV === 'development') {
+        const stats = coverCache.getStats()
+        console.log(`[MaterialList] 封面缓存统计: 总数${stats.total}, 有效${stats.valid}, 过期${stats.expired}`)
+      }
    } else {
      message.error(res.msg || '加载失败')
    }
@@ -343,22 +363,20 @@ const handleConfirmUpload = async (filesWithCover, fileCategory) => {
  }

  uploading.value = true
-  let successCount = 0
-  let failCount = 0
+  const uploadCategory = fileCategory || 'video'

  try {
-    for (const { file, coverBase64 } of filesWithCover) {
-      try {
-        await MaterialService.uploadFile(file, fileCategory, coverBase64)
-        successCount++
-      } catch (error) {
-        console.error('文件上传失败:', file.name, error)
-        failCount++
-      }
-    }
+    const results = await Promise.allSettled(
+      filesWithCover.map(({ file, coverBase64 }) =>
+        MaterialService.uploadFile(file, uploadCategory, coverBase64)
+      )
+    )
+
+    const successCount = results.filter(r => r.status === 'fulfilled').length
+    const failCount = results.length - successCount

    if (successCount > 0) {
-      message.success(`成功上传 ${successCount} 个文件${failCount > 0 ? `，${failCount} 个失败` : ''}`)
+      message.success(`成功上传 ${successCount} 个文件${failCount ? `，${failCount} 个失败` : ''}`)
      uploadModalVisible.value = false
      loadFileList()
    } else {
@@ -392,6 +410,10 @@ const handleBatchDelete = () => {
      try {
        await MaterialService.deleteFiles(selectedFileIds.value)
        message.success('删除成功')
+
+        // 清除所有封面缓存（简化处理）
+        coverCache.clearAll()
+
        selectedFileIds.value = []
        loadFileList()
      } catch (error) {
@@ -406,7 +428,6 @@ const handleBatchDelete = () => {
 const handleDeleteFile = (file) => {
  if (!file?.id) return

-  // 二次确认弹窗
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除文件 "${file.fileName}" 吗？删除后无法恢复。`,
@@ -417,7 +438,6 @@ const handleDeleteFile = (file) => {
      try {
        await MaterialService.deleteFiles([file.id])
        message.success('删除成功')
-        // 如果在选中列表中，也移除
        const index = selectedFileIds.value.indexOf(file.id)
        if (index > -1) {
          selectedFileIds.value.splice(index, 1)
@@ -451,10 +471,9 @@ const handleDownloadFile = (file) => {

 // 文件点击
 const handleFileClick = (file) => {
-  const isSelected = selectedFileIds.value.includes(file.id)
-  // 切换选中状态
-  if (isSelected) {
-    selectedFileIds.value = selectedFileIds.value.filter(id => id !== file.id)
+  const index = selectedFileIds.value.indexOf(file.id)
+  if (index > -1) {
+    selectedFileIds.value.splice(index, 1)
  } else {
    selectedFileIds.value.push(file.id)
  }
@@ -484,167 +503,73 @@ const handlePageChange = (page, pageSize) => {
  loadFileList()
 }

-// 图片加载错误处理（支持回退到其他图片源）
+// 图片加载错误处理（简化版，不使用coverUrl）
 const handleImageError = (e) => {
  const img = e.target
  const currentSrc = img.src
-  
+
  // 找到对应的文件对象
-  const file = fileList.value.find(f => 
-    f.coverBase64 === currentSrc || 
-    f.coverUrl === currentSrc || 
+  const file = fileList.value.find(f =>
+    f.coverBase64 === currentSrc ||
    f.previewUrl === currentSrc
  )
-  
-  if (file) {
-    // 视频文件：优先使用 coverBase64，如果失败则尝试 coverUrl，最后尝试 previewUrl
-    if (file.isVideo) {
-      if (currentSrc === file.coverBase64 && file.coverUrl && file.coverUrl !== currentSrc) {
-        // coverBase64 失败，尝试 coverUrl
-        img.src = file.coverUrl
-        return
-      }
-      if ((currentSrc === file.coverBase64 || currentSrc === file.coverUrl) && file.previewUrl && file.previewUrl !== currentSrc) {
-        // coverBase64 和 coverUrl 都失败，尝试 previewUrl（视频第一帧）
-        img.src = file.previewUrl
-        return
-      }
-    } else {
-      // 非视频文件：尝试其他图片源
-      if (file.coverUrl && file.coverUrl !== currentSrc) {
-        img.src = file.coverUrl
-        return
-      }
-      if (file.coverBase64 && file.coverBase64 !== currentSrc && file.coverBase64.startsWith('data:image')) {
-        img.src = file.coverBase64
-        return
-      }
-      if (file.previewUrl && file.previewUrl !== currentSrc) {
-        img.src = file.previewUrl
-        return
-      }
+
+  if (file && !file.isVideo) {
+    // 非视频文件：尝试其他图片源（不使用coverUrl）
+    if (file.coverBase64 && file.coverBase64 !== currentSrc && file.coverBase64.startsWith('data:image')) {
+      img.src = file.coverBase64
+      return
+    }
+    if (file.previewUrl && file.previewUrl !== currentSrc) {
+      img.src = file.previewUrl
+      return
    }
  }
-  
+
  // 如果所有图片源都失败，隐藏图片
  img.style.display = 'none'
 }

-const selectedFiles = computed(() =>
-  fileList.value.filter((file) => selectedFileIds.value.includes(file.id))
-)
+const handleOpenMixModal = async () => {
+  // 重置混剪表单（调用子组件方法）
+  mixModalRef.value?.resetForm()

-const isVideoFile = (file) => {
-  if (!file) return false
-  if (file.isVideo) return true
-  if (file.fileCategory === 'video') return true
-  if (typeof file.fileType === 'string' && file.fileType.startsWith('video')) return true
-  return false
-}
+  // 加载所有音频文件和分组列表
+  await Promise.all([
+    loadAllAudioFiles(),
+    loadGroupList() // 重新加载分组列表，确保显示最新数据
+  ])

-const isAudioFile = (file) => {
-  if (!file) return false
-  if (file.fileCategory === 'audio') return true
-  if (file.fileType === 'audio') return true
-  if (typeof file.fileType === 'string' && file.fileType.startsWith('audio')) return true
-  return false
-}
-
-const selectedVideoUrls = computed(() =>
-  selectedFiles.value.map((file) => (isVideoFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
-)
-
-const selectedAudioUrls = computed(() =>
-  selectedFiles.value.map((file) => (isAudioFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
-)
-
-// 获取所有视频素材
-const allVideoUrls = computed(() =>
-  fileList.value.map((file) => (isVideoFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
-)
-
-// 获取所有音频素材
-const allAudioUrls = computed(() =>
-  fileList.value.map((file) => (isAudioFile(file) ? file?.fileUrl || file?.previewUrl : null)).filter(Boolean)
-)
-
-// 分组提示信息
-const groupingInfo = computed(() => {
-  if (groupingFileId.value) {
-    // 单个文件分组
-    const file = fileList.value.find(f => f.id === groupingFileId.value)
-    return file ? `将为文件 "${file.fileName}" 添加到选中的分组中` : ''
-  } else {
-    // 批量分组
-    return `将为 ${selectedFileIds.value.length} 个文件添加到选中的分组中`
-  }
-})
-
-const mixForm = reactive({
-  title: '',
-  text: '',
-  produceCount: 1
-})
-
-const resetMixForm = () => {
-  mixForm.title = ''
-  mixForm.text = ''
-  mixForm.produceCount = 1
-}
-
-const handleOpenMixModal = () => {
-  // 检查是否有可用的视频和音频素材
-  if (allVideoUrls.value.length === 0) {
-    message.warning('暂无可用的视频素材')
-    return
-  }
-  if (allAudioUrls.value.length === 0) {
-    message.warning('暂无可用的音频素材')
-    return
-  }
  mixModalVisible.value = true
 }

+// 加载所有音频文件
+const loadAllAudioFiles = async () => {
+  try {
+    const res = await MaterialService.getFilePage({
+      pageNo: 1,
+      pageSize: 100,
+      fileCategory: 'audio'
+    })
+    if (res.code === 0) {
+      allAudioFiles.value = res.data.list || []
+    }
+  } catch (error) {
+    console.error('加载音频文件失败:', error)
+  }
+}
+
 const handleMixCancel = () => {
  mixModalVisible.value = false
 }

-const handleMixConfirm = async () => {
-  const title = mixForm.title.trim()
-  const text = mixForm.text.trim()
-  if (!title) {
-    message.warning('请输入视频标题')
-    return
-  }
-  if (!text) {
-    message.warning('请输入文案内容')
-    return
-  }
-  const produceCount = Math.max(1, Math.min(10, Number(mixForm.produceCount) || 1))
-
-  // 再次检查素材可用性
-  if (allVideoUrls.value.length === 0) {
-    message.warning('暂无可用的视频素材')
-    return
-  }
-  if (allAudioUrls.value.length === 0) {
-    message.warning('暂无可用的音频素材')
-    return
-  }
-
+const handleMixConfirm = async (params) => {
  mixing.value = true
  try {
-    const { data } = await MixTaskService.createTask({
-      title,
-      text,
-      videoUrls: allVideoUrls.value,
-      bgMusicUrls: allAudioUrls.value,
-      produceCount
-    })
+    const { data } = await MixTaskService.createTask(params)
    if (data) {
      message.success('混剪任务提交成功，正在处理中...')
      mixModalVisible.value = false
-      resetMixForm()

      // 跳转到任务列表页面
      setTimeout(() => {
@@ -671,9 +596,12 @@ const loadGroupList = async () => {
    const res = await MaterialGroupService.getGroupList()
    if (res.code === 0) {
      groupList.value = res.data || []
+    } else {
+      console.error('[MaterialList] 分组列表加载失败:', res.msg)
    }
  } catch (error) {
-    console.error('加载分组列表失败:', error)
+    console.error('[MaterialList] 加载分组列表失败:', error)
+    message.error('加载分组列表失败: ' + (error.message || error))
  }
 }

@@ -683,6 +611,15 @@ const handleOpenGroupModal = () => {
    message.warning('请先选择要分组的文件')
    return
  }
+
+  // 检查选中的文件是否都是视频
+  const selectedFiles = fileList.value.filter(f => selectedFileIds.value.includes(f.id))
+  const nonVideoFiles = selectedFiles.filter(f => !f.isVideo)
+  if (nonVideoFiles.length > 0) {
+    message.warning('只能对视频文件进行分组')
+    return
+  }
+
  groupingFileId.value = null // 清空单个文件分组标记
  groupModalVisible.value = true
 }
@@ -954,25 +891,20 @@ const handleGroupCancel = () => {

 .material-item__meta {
  display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
  font-size: 12px;
  color: var(--color-text-3);
 }

-.mix-modal__summary {
-  margin-bottom: 16px;
-  padding: 12px;
-  background: var(--color-bg-2);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-card);
-  font-size: 13px;
-  color: var(--color-text-2);
+.material-item__group-name {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-primary);
+  background-color: var(--color-primary-bg);
+  padding: 2px 6px;
+  border-radius: 4px;
 }
-
-.mix-modal__summary p {
-  margin: 0;
-  line-height: 1.6;
-}
-
 </style>

--- a/frontend/app/web-gold/src/views/trends/Forecast.vue
+++ b/frontend/app/web-gold/src/views/trends/Forecast.vue
@@ -7,7 +7,6 @@ import { UserPromptApi } from '@/api/userPrompt'
 import { useUserStore } from '@/stores/user'
 import GradientButton from '@/components/GradientButton.vue'
 import { getVoiceText } from '@gold/hooks/web/useVoiceText'
-import authService from '@/services/AuthService'

 defineOptions({ name: 'ForecastView' })

--- a/frontend/app/web-gold/vite.config.js
+++ b/frontend/app/web-gold/vite.config.js
@@ -76,7 +76,7 @@ export default defineConfig(({ mode }) => {
                // 兜底：使用环境变量中的 token
                proxyReq.setHeader('authorization', `Bearer ${DEV_TOKEN}`)
              }
-              
+
              // 添加 RuoYi 租户 ID
              proxyReq.setHeader('tenant-id', TENANT_ID)
            })
--- a/frontend/config/api.js
+++ b/frontend/config/api.js
@@ -5,7 +5,7 @@
 */

 /**
- * 获取基础 URL（从环境变量读取）
+ * 获取基础 URL（从环境变量读取）/webApi
 * @returns {string}
 */
 function getBaseUrl() {
@@ -19,7 +19,7 @@ function getBaseUrl() {
  }
  return ''
 }
-
+//  
 const BASE_URL = getBaseUrl()

 /**
@@ -31,6 +31,7 @@ export const API_BASE = {
  // 具体模块路径
  APP_AI: `${BASE_URL}/api/ai`,
  APP_MEMBER: `${BASE_URL}/app-api/member`,
+  APP_TIK: `${BASE_URL}/api/tik`, // Tik 模块 API

  // 特殊路径
  TIKHUB_APP: `${BASE_URL}/api/tikHup`,
--- a/sql/mysql/V20241220__create_tik_mix_task.sql
+++ b/sql/mysql/V20241220__create_tik_mix_task.sql
@@ -1,25 +0,0 @@
-- 混剪任务表
-CREATE TABLE IF NOT EXISTS `tik_mix_task` (
-  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'ID',
-  `tenant_id` bigint DEFAULT NULL COMMENT '租户编号',
-  `user_id` bigint NOT NULL COMMENT '用户ID',
-  `title` varchar(255) NOT NULL COMMENT '视频标题',
-  `text` mediumtext NOT NULL COMMENT '文案内容',
-  `video_urls` text COMMENT '视频素材URL列表(JSON)',
-  `bg_music_urls` text COMMENT '背景音乐URL列表(JSON)',
-  `produce_count` int NOT NULL DEFAULT '1' COMMENT '生成数量',
-  `job_ids` text COMMENT '任务ID列表(JSON)',
-  `output_urls` text COMMENT '输出文件URL列表(JSON)',
-  `status` varchar(32) NOT NULL DEFAULT 'pending' COMMENT '任务状态(pending/running/success/failed)',
-  `progress` int DEFAULT '0' COMMENT '进度(0-100)',
-  `error_msg` text COMMENT '错误信息',
-  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
-  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
-  `finish_time` datetime DEFAULT NULL COMMENT '完成时间',
-  PRIMARY KEY (`id`),
-  KEY `idx_user_id` (`user_id`),
-  KEY `idx_status` (`status`),
-  KEY `idx_create_time` (`create_time`),
-  KEY `idx_user_status_time` (`user_id`, `status`, `create_time`),
-  KEY `idx_status_time` (`status`, `create_time`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='混剪任务表';
--- a/sql/mysql/V20241226__create_tik_tables.sql
+++ b/sql/mysql/V20241226__create_tik_tables.sql
@@ -0,0 +1,72 @@
+-- 创建时间: 2024-12-26
+-- 创建原因: 缺少 tik_user_file 和 tik_file_group 表定义，导致分组查询无数据
+
+-- ============================================================================
+-- 创建表: tik_file_group (素材分组表)
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS `tik_file_group` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '分组编号',
+  `tenant_id` bigint NOT NULL COMMENT '租户编号',
+  `user_id` bigint NOT NULL COMMENT '用户编号',
+  `name` varchar(255) NOT NULL COMMENT '分组名称',
+  `description` varchar(500) DEFAULT NULL COMMENT '分组描述',
+  `sort` int NOT NULL DEFAULT 0 COMMENT '排序',
+  `icon` varchar(255) DEFAULT NULL COMMENT '分组图标',
+  `parent_id` bigint DEFAULT NULL COMMENT '父分组编号',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='素材分组表';
+
+-- 创建索引
+CREATE INDEX idx_tik_file_group_user_id ON tik_file_group(user_id);
+CREATE INDEX idx_tik_file_group_parent_id ON tik_file_group(parent_id);
+
+-- ============================================================================
+-- 创建表: tik_user_file (用户文件表)
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS `tik_user_file` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '文件编号',
+  `tenant_id` bigint NOT NULL COMMENT '租户编号',
+  `user_id` bigint NOT NULL COMMENT '用户编号',
+  `file_id` bigint DEFAULT NULL COMMENT '文件编号（关联infra_file.id，可选）',
+  `file_name` varchar(500) NOT NULL COMMENT '文件名称',
+  `file_type` varchar(100) NOT NULL COMMENT '文件类型（video/image/document等）',
+  `file_category` varchar(50) NOT NULL COMMENT '文件分类（video/generate/audio/mix/voice）',
+  `file_size` bigint NOT NULL COMMENT '文件大小（字节）',
+  `file_url` text COMMENT '文件访问URL',
+  `file_path` text COMMENT '文件存储路径',
+  `cover_url` text COMMENT '封面图URL（视频文件的封面图）',
+  `cover_base64` longtext COMMENT '封面图Base64（视频文件的封面图原始base64数据，可选）',
+  `thumbnail_url` text COMMENT '缩略图URL（图片文件的缩略图）',
+  `group_id` bigint DEFAULT NULL COMMENT '默认分组编号（关联tik_file_group.id，可选）',
+  `description` varchar(500) DEFAULT NULL COMMENT '文件描述',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='用户文件表';
+
+-- 创建索引
+CREATE INDEX idx_tik_user_file_user_id ON tik_user_file(user_id);
+CREATE INDEX idx_tik_user_file_file_category ON tik_user_file(file_category);
+CREATE INDEX idx_tik_user_file_group_id ON tik_user_file(group_id);
+CREATE INDEX idx_tik_user_file_file_type ON tik_user_file(file_type);
+
+-- ============================================================================
+-- 插入默认测试数据
+-- ============================================================================
+
+-- 插入一个默认分组（供测试使用）
+INSERT INTO `tik_file_group` (`tenant_id`, `user_id`, `name`, `description`, `sort`, `icon`)
+VALUES
+(1, 1, '默认分组', '默认分组', 1, NULL);
+
+-- 插入一些测试文件（用户ID为1，分组ID为1）
+INSERT INTO `tik_user_file` (
+  `tenant_id`, `user_id`, `file_name`, `file_type`, `file_category`, `file_size`,
+  `file_url`, `group_id`, `description`
+)
+VALUES
+(1, 1, 'test-video-1.mp4', 'video/mp4', 'video', 1024000, 'https://example.com/test-video-1.mp4', 1, '测试视频1'),
+(1, 1, 'test-video-2.mp4', 'video/mp4', 'video', 2048000, 'https://example.com/test-video-2.mp4', 1, '测试视频2'),
+(1, 1, 'test-audio-1.mp3', 'audio/mp3', 'audio', 512000, 'https://example.com/test-audio-1.mp3', 1, '测试音频1');
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/file/dal/mysql/TikUserFileMapper.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/file/dal/mysql/TikUserFileMapper.java
@@ -1,11 +1,16 @@
 package cn.iocoder.yudao.module.tik.file.dal.mysql;

 import cn.iocoder.yudao.framework.common.pojo.PageResult;
+import cn.iocoder.yudao.framework.common.pojo.PageParam;
 import cn.iocoder.yudao.framework.mybatis.core.mapper.BaseMapperX;
 import cn.iocoder.yudao.framework.mybatis.core.query.LambdaQueryWrapperX;
+import cn.iocoder.yudao.framework.common.util.collection.CollectionUtils;
 import cn.iocoder.yudao.module.tik.file.dal.dataobject.TikUserFileDO;
 import cn.iocoder.yudao.module.tik.file.vo.app.AppTikUserFilePageReqVO;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;

 /**
 * 用户文件 Mapper
@@ -16,12 +21,13 @@ import org.apache.ibatis.annotations.Mapper;
 public interface TikUserFileMapper extends BaseMapperX<TikUserFileDO> {

    default PageResult<TikUserFileDO> selectPage(AppTikUserFilePageReqVO reqVO) {
+        // 常规查询（支持通过groupId查询）
        return selectPage(reqVO, new LambdaQueryWrapperX<TikUserFileDO>()
                .eqIfPresent(TikUserFileDO::getUserId, reqVO.getUserId())
                .eqIfPresent(TikUserFileDO::getFileCategory, reqVO.getFileCategory())
+                .eqIfPresent(TikUserFileDO::getGroupId, reqVO.getGroupId())
                .likeIfPresent(TikUserFileDO::getFileName, reqVO.getFileName())
                .eqIfPresent(TikUserFileDO::getFileType, reqVO.getFileType())
-                .eqIfPresent(TikUserFileDO::getGroupId, reqVO.getGroupId())
                .betweenIfPresent(TikUserFileDO::getCreateTime, reqVO.getCreateTime())
                .orderByDesc(TikUserFileDO::getId));
    }
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/file/service/TikFileGroupServiceImpl.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/file/service/TikFileGroupServiceImpl.java
@@ -6,9 +6,11 @@ import cn.iocoder.yudao.framework.mybatis.core.query.LambdaQueryWrapperX;
 import cn.iocoder.yudao.framework.security.core.util.SecurityFrameworkUtils;
 import cn.iocoder.yudao.framework.tenant.core.context.TenantContextHolder;
 import cn.iocoder.yudao.module.tik.file.dal.dataobject.TikFileGroupDO;
+import cn.iocoder.yudao.module.tik.file.dal.dataobject.TikUserFileDO;
 import cn.iocoder.yudao.module.tik.file.dal.dataobject.TikUserFileGroupDO;
 import cn.iocoder.yudao.module.tik.file.dal.mysql.TikFileGroupMapper;
 import cn.iocoder.yudao.module.tik.file.dal.mysql.TikUserFileGroupMapper;
+import cn.iocoder.yudao.module.tik.file.dal.mysql.TikUserFileMapper;
 import cn.iocoder.yudao.module.tik.file.vo.app.AppTikFileGroupCreateReqVO;
 import cn.iocoder.yudao.module.tik.file.vo.app.AppTikFileGroupRespVO;
 import cn.iocoder.yudao.module.tik.file.vo.app.AppTikFileGroupUpdateReqVO;
@@ -39,6 +41,9 @@ public class TikFileGroupServiceImpl implements TikFileGroupService {
    @Resource
    private TikUserFileGroupMapper userFileGroupMapper;

+    @Resource
+    private TikUserFileMapper userFileMapper;
+
    @Override
    @Transactional(rollbackFor = Exception.class)
    public Long createGroup(AppTikFileGroupCreateReqVO createReqVO) {
@@ -91,10 +96,6 @@ public class TikFileGroupServiceImpl implements TikFileGroupService {
        // 校验分组存在且属于当前用户
        validateGroupExists(groupId, userId);

-        // 删除分组关联关系
-        userFileGroupMapper.delete(new LambdaQueryWrapperX<TikUserFileGroupDO>()
-                .eq(TikUserFileGroupDO::getGroupId, groupId));
-
        // 逻辑删除分组
        fileGroupMapper.deleteById(groupId);

@@ -118,10 +119,11 @@ public class TikFileGroupServiceImpl implements TikFileGroupService {
        // 转换为VO并查询文件数量
        return CollectionUtils.convertList(groups, group -> {
            AppTikFileGroupRespVO vo = BeanUtils.toBean(group, AppTikFileGroupRespVO.class);
-            // 查询分组下的文件数量
-            Long fileCount = userFileGroupMapper.selectCount(
-                    new LambdaQueryWrapperX<TikUserFileGroupDO>()
-                            .eq(TikUserFileGroupDO::getGroupId, group.getId())
+            // 查询分组下的文件数量（使用tik_user_file表的groupId字段）
+            Long fileCount = userFileMapper.selectCount(
+                    new LambdaQueryWrapperX<TikUserFileDO>()
+                            .eq(TikUserFileDO::getUserId, userId)
+                            .eq(TikUserFileDO::getGroupId, group.getId())
            );
            vo.setFileCount(fileCount != null ? fileCount : 0L);
            return vo;
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/file/service/TikUserFileServiceImpl.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/file/service/TikUserFileServiceImpl.java
@@ -51,8 +51,8 @@ import static cn.iocoder.yudao.module.tik.enums.ErrorCodeConstants.*;
@Slf4j
 public class TikUserFileServiceImpl implements TikUserFileService {

-    /** 预签名URL过期时间（1小时，单位：秒） */
-    private static final int PRESIGN_URL_EXPIRATION_SECONDS = 3600;
+    /** 预签名URL过期时间（24小时，单位：秒） */
+    private static final int PRESIGN_URL_EXPIRATION_SECONDS = 24 * 60 * 60;

    @Resource
    private TikUserFileMapper userFileMapper;
@@ -321,31 +321,33 @@ public class TikUserFileServiceImpl implements TikUserFileService {
            vo.setIsVideo(isVideo);
            vo.setIsImage(isImage);

-            // 生成封面和缩略图的预签名URL（避免重复调用）
-            String coverUrlPresigned = StrUtil.isNotBlank(file.getCoverUrl()) 
-                ? getCachedPresignUrl(file.getCoverUrl(), PRESIGN_URL_EXPIRATION_SECONDS) 
-                : null;
-            String thumbnailUrlPresigned = StrUtil.isNotBlank(file.getThumbnailUrl()) 
-                ? getCachedPresignUrl(file.getThumbnailUrl(), PRESIGN_URL_EXPIRATION_SECONDS) 
-                : null;
-            
+            // 视频文件不使用任何OSS预签名URL（包括coverUrl和previewUrl）
+            // 只返回coverBase64（如果有），前端从本地缓存获取
+            String coverUrlPresigned = null;
+            String thumbnailUrlPresigned = null;
+            String previewUrl = null;
+
+            // 非视频文件才生成预签名URL
+            if (!isVideo) {
+                // 图片文件：生成缩略图URL
+                thumbnailUrlPresigned = StrUtil.isNotBlank(file.getThumbnailUrl())
+                    ? getCachedPresignUrl(file.getThumbnailUrl(), PRESIGN_URL_EXPIRATION_SECONDS)
+                    : null;
+
+                // 生成预览URL
+                if (isImage) {
+                    // 图片：优先使用缩略图，没有缩略图时使用原图
+                    previewUrl = thumbnailUrlPresigned != null
+                        ? thumbnailUrlPresigned
+                        : getCachedPresignUrl(file.getFileUrl(), PRESIGN_URL_EXPIRATION_SECONDS);
+                }
+            }
+
            // 设置封面和缩略图URL
            vo.setCoverUrl(coverUrlPresigned);
            vo.setThumbnailUrl(thumbnailUrlPresigned);

-            // 生成预览URL（优先使用封面/缩略图，否则使用原文件URL）
-            String previewUrl = null;
-            if (isVideo) {
-                // 视频：优先使用封面，没有封面时使用原视频URL
-                previewUrl = coverUrlPresigned != null 
-                    ? coverUrlPresigned 
-                    : getCachedPresignUrl(file.getFileUrl(), PRESIGN_URL_EXPIRATION_SECONDS);
-            } else if (isImage) {
-                // 图片：优先使用缩略图，没有缩略图时使用原图
-                previewUrl = thumbnailUrlPresigned != null 
-                    ? thumbnailUrlPresigned 
-                    : getCachedPresignUrl(file.getFileUrl(), PRESIGN_URL_EXPIRATION_SECONDS);
-            }
+            // 生成预览URL
            vo.setPreviewUrl(previewUrl);

            return vo;
@@ -472,7 +474,13 @@ public class TikUserFileServiceImpl implements TikUserFileService {
     * @return 预览URL
     */
    private String determinePreviewUrl(TikUserFileDO file, String type) {
-        // 明确指定封面类型
+        // 视频文件：不返回任何OSS URL（前端使用coverBase64缓存）
+        boolean isVideo = StrUtil.containsIgnoreCase(file.getFileType(), "video");
+        if (isVideo) {
+            return null;
+        }
+
+        // 明确指定封面类型（非视频文件）
        if (StrUtil.equals(type, "cover") && StrUtil.isNotBlank(file.getCoverUrl())) {
            return file.getCoverUrl();
        }
@@ -480,20 +488,16 @@ public class TikUserFileServiceImpl implements TikUserFileService {
        if (StrUtil.equals(type, "thumbnail") && StrUtil.isNotBlank(file.getThumbnailUrl())) {
            return file.getThumbnailUrl();
        }
-        
+
        // 根据文件类型自动选择
-        boolean isVideo = StrUtil.containsIgnoreCase(file.getFileType(), "video");
        boolean isImage = FileTypeUtils.isImage(file.getFileType());
-        
-        if (isVideo && StrUtil.isNotBlank(file.getCoverUrl())) {
-            return file.getCoverUrl();
-        }
+
        if (isImage) {
-            return StrUtil.isNotBlank(file.getThumbnailUrl()) 
-                ? file.getThumbnailUrl() 
+            return StrUtil.isNotBlank(file.getThumbnailUrl())
+                ? file.getThumbnailUrl()
                : file.getFileUrl();
        }
-        
+
        // 默认返回原文件URL
        return file.getFileUrl();
    }
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/media/BatchProduceAlignment.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/media/BatchProduceAlignment.java
@@ -84,6 +84,7 @@ public class BatchProduceAlignment {


    public void initClient() throws Exception {
+        log.info("初始化阿里云 ICE 客户端...");
        // 阿里云账号AccessKey拥有所有API的访问权限，建议您使用RAM用户进行API访问或日常运维。
        // 本示例以将AccessKey ID和 AccessKey Secret保存在环境变量为例说明。配置方法请参见：https://help.aliyun.com/zh/sdk/developer-reference/v2-manage-access-credentials?spm=a2c4g.11186623.0.0.423350fbOTFdOB#2a38e5c14b4em
        com.aliyun.credentials.Client credentialClient = new com.aliyun.credentials.Client();
@@ -95,9 +96,14 @@ public class BatchProduceAlignment {
        config.endpoint = "ice." + regionId + ".aliyuncs.com";
        config.regionId = regionId;
        iceClient = new Client(config);
+        log.info("ICE 客户端初始化成功");
    }

    public List<String> batchProduceAlignment(String title,String text,String[] videoArray,String[] bgMusicArray,int produceCount) throws Exception {
+        // 初始化 ICE 客户端
+        if (iceClient == null) {
+            initClient();
+        }

        // 批量提交任务，返回 "jobId:url" 格式
        List<String> jobIdWithUrls = new ArrayList<>();
@@ -110,6 +116,11 @@ public class BatchProduceAlignment {
    }

    public String produceSingleVideo(String title, String text, String[] videoArray, String[] bgMusicArray) throws Exception {
+        // 初始化 ICE 客户端
+        if (iceClient == null) {
+            initClient();
+        }
+
        text = text.replace("，", "。");
        text = text.replace("\n", "。");
        String[] sentenceArray = text.split("。");
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/client/IceClient.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/client/IceClient.java
@@ -0,0 +1,114 @@
+package cn.iocoder.yudao.module.tik.mix.client;
+
+import cn.hutool.core.util.StrUtil;
+import cn.iocoder.yudao.framework.common.exception.ServiceException;
+import cn.iocoder.yudao.module.tik.mix.config.IceProperties;
+import com.aliyun.ice20201109.Client;
+import com.aliyun.ice20201109.models.*;
+import com.aliyun.teaopenapi.models.Config;
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Component;
+
+import java.util.concurrent.TimeUnit;
+
+import static cn.iocoder.yudao.framework.common.exception.util.ServiceExceptionUtil.exception0;
+import static cn.iocoder.yudao.module.tik.enums.ErrorCodeConstants.VOICE_TTS_FAILED;
+
+/**
+ * 阿里云 ICE 客户端
+ */
+@Slf4j
+@Component
+@RequiredArgsConstructor
+public class IceClient {
+
+    private final IceProperties properties;
+
+    private volatile Client iceClient;
+
+    /**
+     * 获取 ICE 客户端（懒加载，线程安全）
+     */
+    public Client getClient() {
+        if (iceClient == null) {
+            synchronized (this) {
+                if (iceClient == null) {
+                    if (!properties.isEnabled()) {
+                        throw exception0(VOICE_TTS_FAILED.getCode(), "未配置 ICE AccessKey");
+                    }
+                    iceClient = createClient();
+                }
+            }
+        }
+        return iceClient;
+    }
+
+    /**
+     * 创建 ICE 客户端
+     */
+    private Client createClient() {
+        try {
+            log.info("[ICE][开始初始化客户端][regionId={}, bucket={}]",
+                    properties.getRegionId(), properties.getBucket());
+
+            Config config = new Config();
+            config.accessKeyId = properties.getAccessKeyId();
+            config.accessKeySecret = properties.getAccessKeySecret();
+            config.endpoint = "ice." + properties.getRegionId() + ".aliyuncs.com";
+            config.regionId = properties.getRegionId();
+
+            Client client = new Client(config);
+
+            log.info("[ICE][客户端初始化成功]");
+            return client;
+
+        } catch (Exception e) {
+            log.error("[ICE][客户端初始化失败]", e);
+            throw exception0(VOICE_TTS_FAILED.getCode(), "ICE 客户端初始化失败: " + e.getMessage());
+        }
+    }
+
+    /**
+     * 提交媒体制作任务
+     */
+    public String submitMediaProducingJob(String timeline, String outputMediaConfig) {
+        try {
+            Client client = getClient();
+            SubmitMediaProducingJobRequest request = new SubmitMediaProducingJobRequest();
+            request.setTimeline(timeline);
+            request.setOutputMediaConfig(outputMediaConfig);
+
+            SubmitMediaProducingJobResponse response = client.submitMediaProducingJob(request);
+            String jobId = response.getBody().getJobId();
+
+            log.info("[ICE][提交任务成功][jobId={}]", jobId);
+            return jobId;
+
+        } catch (Exception e) {
+            log.error("[ICE][提交任务失败]", e);
+            throw exception0(VOICE_TTS_FAILED.getCode(), "ICE 提交任务失败: " + e.getMessage());
+        }
+    }
+
+    /**
+     * 查询媒体制作任务状态
+     */
+    public String getMediaProducingJobStatus(String jobId) {
+        try {
+            Client client = getClient();
+            GetMediaProducingJobRequest request = new GetMediaProducingJobRequest();
+            request.setJobId(jobId);
+
+            GetMediaProducingJobResponse response = client.getMediaProducingJob(request);
+            String status = response.getBody().getMediaProducingJob().getStatus();
+
+            log.debug("[ICE][查询任务状态][jobId={}, status={}]", jobId, status);
+            return status;
+
+        } catch (Exception e) {
+            log.error("[ICE][查询任务状态失败][jobId={}]", jobId, e);
+            throw exception0(VOICE_TTS_FAILED.getCode(), "ICE 查询任务状态失败: " + e.getMessage());
+        }
+    }
+}
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/config/IceProperties.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/config/IceProperties.java
@@ -0,0 +1,56 @@
+package cn.iocoder.yudao.module.tik.mix.config;
+
+import cn.hutool.core.util.StrUtil;
+import lombok.Data;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.stereotype.Component;
+
+import java.time.Duration;
+
+/**
+ * 阿里云 ICE 配置属性
+ */
+@Data
+@Component
+@ConfigurationProperties(prefix = "yudao.ice")
+public class IceProperties {
+
+    /**
+     * AccessKey ID
+     */
+    private String accessKeyId;
+
+    /**
+     * AccessKey Secret
+     */
+    private String accessKeySecret;
+
+    /**
+     * 地域 ID
+     */
+    private String regionId = "cn-hangzhou";
+
+    /**
+     * OSS Bucket 名称
+     */
+    private String bucket = "muye-ai-chat";
+
+    /**
+     * 连接超时时间
+     */
+    private Duration connectTimeout = Duration.ofSeconds(10);
+
+    /**
+     * 读取超时时间
+     */
+    private Duration readTimeout = Duration.ofSeconds(120);
+
+    /**
+     * 是否启用
+     */
+    private boolean enabled = true;
+
+    public boolean isEnabled() {
+        return enabled && StrUtil.isNotBlank(accessKeyId) && StrUtil.isNotBlank(accessKeySecret);
+    }
+}
--- a/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/service/MixTaskServiceImpl.java
+++ b/yudao-module-tik/src/main/java/cn/iocoder/yudao/module/tik/mix/service/MixTaskServiceImpl.java
@@ -303,6 +303,48 @@ public class MixTaskServiceImpl implements MixTaskService {
        }
    }

+    /**
+     * 提交任务到阿里云 ICE（新版本，使用 IceClient）
+     */
+    private void submitToIceV2(Long taskId, MixTaskSaveReqVO createReqVO) {
+        log.info("[V2][提交任务到ICE][taskId={}]", taskId);
+
+        try {
+            // 1. 更新任务状态
+            updateTaskStatus(taskId, MixTaskConstants.STATUS_RUNNING, MixTaskConstants.PROGRESS_SUBMITTED);
+
+            // 2. 构建 timeline 和 outputMediaConfig
+            String timeline = buildTimeline(createReqVO);
+            String outputMediaConfig = buildOutputMediaConfig();
+
+            // 3. 提交任务
+            // TODO: 这里需要将 BatchProduceAlignment 的逻辑移到 IceClient 中
+            // String jobId = iceClient.submitMediaProducingJob(timeline, outputMediaConfig);
+
+            log.info("[V2][任务提交成功][taskId={}]", taskId);
+
+        } catch (Exception e) {
+            log.error("[V2][提交任务失败][taskId={}]", taskId, e);
+            updateTaskError(taskId, "ICE处理失败: " + e.getMessage());
+        }
+    }
+
+    /**
+     * 构建 ICE 时间线
+     */
+    private String buildTimeline(MixTaskSaveReqVO reqVO) {
+        // TODO: 实现 timeline 构建逻辑
+        return "{}";
+    }
+
+    /**
+     * 构建输出媒体配置
+     */
+    private String buildOutputMediaConfig() {
+        // TODO: 实现输出配置构建逻辑
+        return "{}";
+    }
+
    /**
     * 更新任务状态
     */