可令对口型

frontend/app/web-gold/src/api/kling.js

@@ -0,0 +1,109 @@
+/**
+ * 可灵数字人 API
+ */
+import request from './http'
+import { message } from "ant-design-vue"
+import { MaterialService } from './material'
+
+/**
+ * 人脸识别
+ */
+export function identifyFace(data) {
+  return request({
+    url: '/webApi/api/tik/kling/identify-face',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 创建口型同步任务
+ */
+export function createLipSyncTask(data) {
+  return request({
+    url: '/webApi/api/tik/kling/lip-sync/create',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 查询口型同步任务
+ */
+export function getLipSyncTask(taskId) {
+  return request({
+    url: `/webApi/api/tik/kling/lip-sync/${taskId}`,
+    method: 'get'
+  })
+}
+
+/**
+ * 创建可灵任务并识别（推荐方式）
+ */
+export async function createKlingTaskAndIdentify(file) {
+  try {
+    // 1. 提取视频封面
+    message.loading('正在提取视频封面...', 0)
+    let coverBase64 = null
+    try {
+      const { extractVideoCover } = await import('@/utils/video-cover')
+      const cover = await extractVideoCover(file, {
+        maxWidth: 800,
+        quality: 0.8
+      })
+      coverBase64 = cover.base64
+      console.log('视频封面提取成功')
+    } catch (coverError) {
+      console.warn('视频封面提取失败:', coverError)
+      // 封面提取失败不影响主流程
+    }
+    message.destroy()
+
+    // 2. 上传视频到OSS（包含封面）
+    message.loading('正在上传视频...', 0)
+    const uploadRes = await MaterialService.uploadFile(file, 'video', coverBase64)
+    message.destroy()
+
+    if (uploadRes.code !== 0) {
+      throw new Error(uploadRes.msg || '上传失败')
+    }
+
+    const fileId = uploadRes.data
+    console.log('文件上传成功，ID:', fileId, '封面长度:', coverBase64?.length || 0)
+
+    // 3. 获取公网播放URL
+    message.loading('正在生成播放链接...', 0)
+    const urlRes = await MaterialService.getVideoPlayUrl(fileId)
+    message.destroy()
+
+    if (urlRes.code !== 0) {
+      throw new Error(urlRes.msg || '获取播放链接失败')
+    }
+    
+    const videoUrl = urlRes.data
+    console.log('视频URL:', videoUrl)
+
+    // 4. 调用识别API
+    message.loading('正在识别视频中的人脸...', 0)
+    const identifyRes = await identifyFace({ video_url: videoUrl })
+    message.destroy()
+    
+    if (identifyRes.code !== 0) {
+      throw new Error(identifyRes.msg || '识别失败')
+    }
+    
+    return {
+      success: true,
+      data: {
+        fileId,
+        videoUrl,
+        sessionId: identifyRes.data.sessionId,
+        faceId: identifyRes.data.data.face_data[0].face_id || null
+      }
+    }
+  } catch (error) {
+    message.destroy()
+    console.error('可灵任务失败:', error)
+    throw error
+  }
+}

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

@@ -36,6 +36,7 @@ const items = computed(() => {
       title: '数字人',
       children: [
         { path: '/digital-human/voice-copy', label: '人声克隆', icon: 'mic' },
+        { path: "/digital-human/kling", label: "可灵数字人", icon: "user" },
         { path: '/digital-human/video', label: '数字人视频', icon: 'video' },
       ]
     },

frontend/app/web-gold/src/router/index.js

@@ -43,6 +43,7 @@ const routes = [
         name: '数字人',
         children: [
           { path: '', redirect: '/digital-human/voice-copy' },
+          { path: 'kling', name: '可灵数字人', component: () => import('../views/kling/IdentifyFace.vue') },
           { path: 'voice-copy', name: '人声克隆', component: () => import('../views/dh/VoiceCopy.vue') },
           { path: 'avatar', name: '生成数字人', component: () => import('../views/dh/Avatar.vue') },
           { path: 'video', name: '数字人视频', component: () => import('../views/dh/Video.vue') },

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

@@ -1,11 +1,20 @@
 <template>
   <div class="login-container">
-    <!-- 静态背景 -->
-    <div class="bg-static"></div>
+    <!-- 多层背景系统 -->
+    <div class="bg-layer-1"></div>
+    <div class="bg-grid"></div>
+    <div class="bg-blobs">
+      <div class="blob blob-1"></div>
+      <div class="blob blob-2"></div>
+      <div class="blob blob-3"></div>
+    </div>
+    <div class="bg-particles"></div>
 
     <div class="login-content">
       <!-- 左侧品牌区 -->
       <div class="brand-panel">
+        <!-- 扫描线 -->
+        <div class="scan-line"></div>
         <div class="brand-inner">
           <div class="brand-icon">
             <svg width="80" height="80" viewBox="0 0 80 80">
@@ -41,6 +50,8 @@
       <!-- 右侧登录区 -->
       <div class="login-panel">
         <div class="login-card">
+          <!-- 光线扫过效果 -->
+          <div class="card-shine"></div>
           <div class="card-header">
             <h2 class="login-title">欢迎登录</h2>
             <p class="login-subtitle">进入您的创作空间</p>
@@ -120,7 +131,7 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import { message } from 'ant-design-vue'
 import {
@@ -161,6 +172,27 @@ const smsRules = {
   ]
 }
 
+// 波纹点击效果
+function createRipple(event) {
+  const button = event.currentTarget
+  const ripple = document.createElement('span')
+  const rect = button.getBoundingClientRect()
+  const size = Math.max(rect.width, rect.height)
+  const x = event.clientX - rect.left - size / 2
+  const y = event.clientY - rect.top - size / 2
+
+  ripple.style.width = ripple.style.height = `${size}px`
+  ripple.style.left = `${x}px`
+  ripple.style.top = `${y}px`
+  ripple.classList.add('ripple')
+
+  button.appendChild(ripple)
+
+  ripple.addEventListener('animationend', () => {
+    ripple.remove()
+  })
+}
+
 // 发送验证码
 async function sendSmsCode() {
   try {
@@ -193,7 +225,10 @@ async function sendSmsCode() {
 }
 
 // 短信登录
-async function handleSmsLogin() {
+async function handleSmsLogin(event) {
+  // 添加波纹效果
+  createRipple(event)
+
   try {
     await smsFormRef.value.validateFields()
     loggingIn.value = true
@@ -232,58 +267,265 @@ async function handleSmsLogin() {
     loggingIn.value = false
   }
 }
+
+// 清理定时器
+onBeforeUnmount(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+  }
+})
 </script>
 
 <style scoped>
+/* ========== 容器与布局 ========== */
 .login-container {
   min-height: 100vh;
-  background: #0a0a0a;
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #0f0f1e 50%, #0a0a0a 100%);
   position: relative;
   overflow: hidden;
+  animation: fadeIn 0.8s ease-out;
 }
 
 /* 主内容区 */
 .login-content {
   display: flex;
   min-height: 100vh;
+  position: relative;
+  z-index: 1;
 }
 
-/* 左侧品牌区 */
+/* ========== 背景层系统 ========== */
+/* 第1层：基础渐变 - 已在container中实现 */
+
+/* 第2层：动态网格 */
+.bg-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes gridMove {
+  0% { background-position: 0 0; }
+  100% { background-position: 50px 50px; }
+}
+
+/* 第3层：装饰光斑 (Blob) */
+.bg-blobs {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.15;
+  animation: blobPulse 8s ease-in-out infinite;
+}
+
+.blob-1 {
+  width: 500px;
+  height: 500px;
+  background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
+  top: -10%;
+  left: -10%;
+  animation-delay: 0s;
+}
+
+.blob-2 {
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
+  bottom: -15%;
+  right: -10%;
+  animation-delay: 2s;
+}
+
+.blob-3 {
+  width: 350px;
+  height: 350px;
+  background: radial-gradient(circle, #06B6D4 0%, transparent 70%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation-delay: 4s;
+}
+
+@keyframes blobPulse {
+  0%, 100% {
+    transform: scale(1) translateY(0);
+    opacity: 0.15;
+  }
+  50% {
+    transform: scale(1.1) translateY(-20px);
+    opacity: 0.25;
+  }
+}
+
+/* 第4层：粒子效果 */
+.bg-particles {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.bg-particles::before,
+.bg-particles::after {
+  content: '';
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: rgba(59, 130, 246, 0.6);
+  border-radius: 50%;
+  box-shadow:
+    100px 200px 0 rgba(59, 130, 246, 0.4),
+    300px 400px 0 rgba(139, 92, 246, 0.4),
+    500px 100px 0 rgba(6, 182, 212, 0.3),
+    700px 500px 0 rgba(59, 130, 246, 0.5),
+    200px 600px 0 rgba(139, 92, 246, 0.3),
+    900px 300px 0 rgba(6, 182, 212, 0.4),
+    400px 50px 0 rgba(59, 130, 246, 0.3),
+    600px 700px 0 rgba(139, 92, 246, 0.5),
+    800px 150px 0 rgba(6, 182, 212, 0.3),
+    150px 450px 0 rgba(59, 130, 246, 0.4),
+    950px 600px 0 rgba(139, 92, 246, 0.3),
+    350px 250px 0 rgba(6, 182, 212, 0.5),
+    550px 550px 0 rgba(59, 130, 246, 0.3),
+    750px 50px 0 rgba(139, 92, 246, 0.4),
+    250px 350px 0 rgba(6, 182, 212, 0.3);
+  animation: particleFloat 15s linear infinite;
+}
+
+.bg-particles::after {
+  animation-delay: 7.5s;
+}
+
+@keyframes particleFloat {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+  10% { opacity: 0.6; }
+  90% { opacity: 0.6; }
+  100% {
+    transform: translateY(-100vh);
+    opacity: 0;
+  }
+}
+
+/* ========== 左侧品牌区 ========== */
 .brand-panel {
   flex: 1;
-  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
+  background:
+    radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
+    radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
+    linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f1e 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px;
+  position: relative;
+  overflow: hidden;
+  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
+}
+
+/* 扫描线 */
+.scan-line {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg,
+    transparent,
+    rgba(6, 182, 212, 0.8),
+    transparent
+  );
+  animation: scanLine 4s ease-in-out infinite;
+}
+
+@keyframes scanLine {
+  0% { top: -100%; }
+  100% { top: 200%; }
 }
 
 .brand-inner {
   text-align: center;
   max-width: 400px;
+  position: relative;
+  z-index: 1;
 }
 
+/* 品牌图标 */
 .brand-icon {
   margin-bottom: 30px;
+  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.4));
 }
 
+.brand-icon svg {
+  animation: iconRotate 20s linear infinite;
+}
+
+@keyframes iconRotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.brand-icon svg path,
+.brand-icon svg circle {
+  animation: pathPulse 2s ease-in-out infinite;
+}
+
+@keyframes pathPulse {
+  0%, 100% {
+    opacity: 0.8;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* 品牌标题 */
 .brand-title {
   font-size: 48px;
   font-weight: 700;
-  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
+  background: linear-gradient(
+    135deg,
+    #3B82F6 0%,
+    #8B5CF6 25%,
+    #06B6D4 50%,
+    #3B82F6 75%,
+    #8B5CF6 100%
+  );
+  background-size: 200% 100%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 15px;
+  animation: gradientFlow 4s linear infinite;
+}
+
+@keyframes gradientFlow {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
 }
 
 .brand-subtitle {
   font-size: 18px;
-  color: #3B82F6;
+  color: #06B6D4;
   margin-bottom: 50px;
   opacity: 0.9;
 }
 
+/* 特性列表 */
 .brand-features {
   display: flex;
   flex-direction: column;
@@ -296,45 +538,132 @@ async function handleSmsLogin() {
   gap: 12px;
   color: #a0a0a0;
   font-size: 16px;
+  position: relative;
+  padding-left: 35px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.feature-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #3B82F6, #06B6D4);
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.feature-item:hover::before {
+  width: 25px;
+}
+
+.feature-item:hover {
+  transform: translateX(10px);
+  color: #60A5FA;
 }
 
 .feature-icon {
   color: #3B82F6;
   font-size: 20px;
+  display: inline-block;
+  animation: iconBounce 2s ease-in-out infinite;
+  transition: all 0.3s ease;
 }
 
-/* 右侧登录区 */
+@keyframes iconBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+.feature-item:hover .feature-icon {
+  transform: scale(1.2) rotate(10deg) translateY(-5px);
+  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
+  animation: none;
+}
+
+/* ========== 右侧登录区 ========== */
 .login-panel {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px 80px;
-  background: #0a0a0a;
+  background: transparent;
 }
 
+/* 登录卡片 */
 .login-card {
   width: 100%;
   max-width: 420px;
-  background: rgba(18, 18, 38, 0.88);
+  background: rgba(18, 18, 38, 0.92);
+  -webkit-backdrop-filter: blur(25px);
   backdrop-filter: blur(25px);
   border-radius: 20px;
   padding: 40px 32px;
-  border: 1px solid rgba(59, 130, 246, 0.25);
+  position: relative;
+  overflow: hidden;
   box-shadow:
     0 12px 40px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(59, 130, 246, 0.1),
     inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
 }
 
+/* 渐变边框 */
+.login-card::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: 20px;
+  padding: 1px;
+  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #06B6D4 100%);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+/* 光线扫过 */
+.card-shine {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg,
+    transparent,
+    rgba(59, 130, 246, 0.1),
+    transparent
+  );
+  animation: cardShine 3s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes cardShine {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+@keyframes cardFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+/* 卡片标题区 */
 .card-header {
   text-align: center;
   margin-bottom: 32px;
+  animation: fadeInUp 0.6s ease-out 0.6s backwards;
 }
 
 .login-title {
   font-size: 32px;
   font-weight: 700;
-  color: #3B82F6;
+  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
   margin-bottom: 10px;
 }
 
@@ -345,12 +674,26 @@ async function handleSmsLogin() {
   opacity: 0.9;
 }
 
-/* 输入框样式覆盖 */
+/* ========== 输入框样式 ========== */
+:deep(.ant-form-item:nth-child(1)) {
+  animation: fadeInUp 0.6s ease-out 0.7s backwards;
+}
+
+:deep(.ant-form-item:nth-child(2)) {
+  animation: fadeInUp 0.6s ease-out 0.8s backwards;
+}
+
+:deep(.ant-form-item:nth-child(3)) {
+  animation: fadeInUp 0.6s ease-out 0.9s backwards;
+}
+
 :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;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  position: relative;
 }
 
 :deep(.ant-input-affix-wrapper:hover) {
@@ -358,9 +701,24 @@ async function handleSmsLogin() {
 }
 
 :deep(.ant-input-affix-wrapper-focused) {
-  border-color: rgba(59, 130, 246, 0.25) !important;
+  border-color: rgba(59, 130, 246, 0.6) !important;
   background: rgba(15, 15, 30, 0.95) !important;
-  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25) !important;
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 24px rgba(59, 130, 246, 0.2),
+    0 0 0 1px rgba(59, 130, 246, 0.4) !important;
+}
+
+/* 聚焦光晕 */
+:deep(.ant-input-affix-wrapper-focused)::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #3B82F6, #8B5CF6, #06B6D4);
+  opacity: 0.4;
+  z-index: -1;
+  filter: blur(8px);
 }
 
 :deep(.ant-input) {
@@ -385,19 +743,23 @@ async function handleSmsLogin() {
   letter-spacing: 0.2px;
 }
 
-
-/* 键盘焦点优化 */
 :deep(.ant-input-affix-wrapper:focus-within) {
-  outline: 2px solid rgba(59, 130, 246, 0.6);
-  outline-offset: 2px;
+  outline: none;
 }
 
 /* 表单验证错误状态 */
 :deep(.ant-form-item-has-error .ant-input-affix-wrapper) {
   border-color: rgba(255, 77, 79, 0.5) !important;
+  animation: shake 0.5s;
 }
 
-/* 验证码输入 */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+  20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+/* ========== 验证码输入 ========== */
 .code-input {
   display: flex;
   gap: 12px;
@@ -417,13 +779,15 @@ async function handleSmsLogin() {
 }
 
 .send-code-btn:hover:not(:disabled) {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(96, 165, 250, 0.3) 100%);
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
   border-color: rgba(59, 130, 246, 0.6);
   color: #60A5FA;
   box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
+  transform: translateY(-1px);
 }
 
 .send-code-btn:active:not(:disabled) {
+  transform: translateY(0);
   box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
 }
 
@@ -432,7 +796,7 @@ async function handleSmsLogin() {
   cursor: not-allowed;
 }
 
-/* 登录按钮 */
+/* ========== 登录按钮 ========== */
 .login-btn {
   height: 52px;
   font-size: 16px;
@@ -443,8 +807,10 @@ async function handleSmsLogin() {
   box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
   position: relative;
   overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* 光线扫过 */
 .login-btn::before {
   content: '';
   position: absolute;
@@ -452,8 +818,8 @@ async function handleSmsLogin() {
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.6s;
 }
 
 .login-btn:hover::before {
@@ -461,25 +827,78 @@ async function handleSmsLogin() {
 }
 
 .login-btn:hover {
-  box-shadow: 0 6px 30px rgba(59, 130, 246, 0.35);
+  background: linear-gradient(135deg, #FF6A30 0%, #3B82F6 100%);
+  box-shadow: 0 6px 30px rgba(255, 106, 48, 0.35);
+  transform: translateY(-2px);
 }
 
-/* 图标 */
+.login-btn:active {
+  transform: translateY(0);
+}
+
+/* 波纹效果 */
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  transform: scale(0);
+  animation: rippleEffect 0.6s ease-out;
+  pointer-events: none;
+}
+
+@keyframes rippleEffect {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+/* ========== 图标 ========== */
 .input-icon {
   font-size: 18px;
 }
 
-/* 背景 */
-.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;
+/* ========== 入场动画 ========== */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-/* 响应式优化 - 大屏保持左右分栏 */
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ========== 响应式适配 ========== */
+/* 大屏保持左右分栏 */
 @media (max-width: 1200px) {
   .brand-title {
     font-size: 40px;
@@ -532,6 +951,16 @@ async function handleSmsLogin() {
     height: 100vh;
   }
 
+  /* 移动端减少动画复杂度 */
+  .bg-grid {
+    animation: none;
+  }
+
+  .bg-particles,
+  .blob {
+    display: none;
+  }
+
   .brand-panel {
     padding: 20px 15px;
     min-height: 100px;
@@ -545,6 +974,7 @@ async function handleSmsLogin() {
   .brand-icon svg {
     width: 45px;
     height: 45px;
+    animation: none;
   }
 
   .brand-title {
@@ -587,6 +1017,7 @@ async function handleSmsLogin() {
     box-shadow:
       0 10px 36px rgba(0, 0, 0, 0.55),
       inset 0 1px 0 rgba(255, 255, 255, 0.06);
+    animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
   }
 
   .login-title {
@@ -654,4 +1085,15 @@ async function handleSmsLogin() {
     font-size: 15px;
   }
 }
+
+/* 减弱动画（用户偏好设置） */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
 </style>

frontend/app/web-gold/src/views/content-style/composables/useBenchmarkData.js

@@ -16,7 +16,7 @@ export function useBenchmarkData() {
     try {
       // 过滤掉不需要持久化的临时字段（如 _analyzing）
       const persistData = (data.value || []).map((item) => {
-        const rest = { ...(item || {}) }
+        const rest = { ...item }
         delete rest._analyzing
         return rest
       })