diff --git a/frontend/src/index.css b/frontend/src/index.css index 74bfbb9..60f50a1 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -872,3 +872,139 @@ body::after { .ant-table-wrapper .ant-table-pagination.ant-pagination.app-global-pagination .ant-pagination-options-quick-jumper { margin-inline-start: 12px; } + +/* 智能会议专属全局加载动画 */ +.ai-meeting-loader { + position: fixed; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: var(--app-bg-main); + z-index: 9999; + overflow: hidden; +} + +.ai-meeting-loader-backdrop { + position: absolute; + inset: 0; + background-image: var(--app-bg-overlay); + background-size: var(--app-bg-overlay-size); + opacity: 0.2; + pointer-events: none; +} + +.ai-meeting-loader-content { + position: relative; + z-index: 10; + display: flex; + flex-direction: column; + align-items: center; + gap: 32px; +} + +/* AI 语音识别核心 */ +.ai-audio-core { + position: relative; + width: 120px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; +} + +/* 扩散光波 */ +.ai-ring { + position: absolute; + border-radius: 50%; + border: 1px solid var(--app-primary-color); + animation: ai-ring-expand 3s cubic-bezier(0.16, 1, 0.3, 1) infinite; + opacity: 0; +} +.ai-ring:nth-child(1) { animation-delay: 0s; } +.ai-ring:nth-child(2) { animation-delay: 1s; } +.ai-ring:nth-child(3) { animation-delay: 2s; } + +/* 中心发光体 */ +.ai-core-glow { + position: absolute; + width: 60px; + height: 60px; + border-radius: 50%; + background: radial-gradient(circle, var(--app-primary-color) 0%, transparent 70%); + opacity: 0.4; + animation: ai-core-pulse 2s ease-in-out infinite alternate; +} + +/* 语音频谱 */ +.ai-spectrum { + display: flex; + align-items: center; + gap: 4px; + z-index: 2; +} + +.ai-bar { + width: 4px; + background: var(--app-primary-color); + border-radius: 2px; + animation: ai-wave-bounce 1s ease-in-out infinite alternate; + box-shadow: 0 0 8px var(--app-primary-color); +} +.ai-bar:nth-child(1) { height: 16px; animation-duration: 0.7s; } +.ai-bar:nth-child(2) { height: 32px; animation-duration: 0.9s; } +.ai-bar:nth-child(3) { height: 48px; animation-duration: 1.1s; } +.ai-bar:nth-child(4) { height: 32px; animation-duration: 0.8s; } +.ai-bar:nth-child(5) { height: 16px; animation-duration: 1.0s; } + +/* 文字区域 */ +.ai-meeting-text { + text-align: center; + display: flex; + flex-direction: column; + gap: 8px; +} + +.ai-platform-name { + font-size: 24px; + font-weight: 600; + color: var(--app-text-main); + letter-spacing: 2px; + text-transform: uppercase; + background: linear-gradient(90deg, var(--app-text-main) 0%, var(--app-primary-color) 50%, var(--app-text-main) 100%); + background-size: 200% auto; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: ai-shine-text 3s linear infinite; +} + +.ai-loading-status { + font-size: 12px; + font-weight: 500; + color: var(--app-primary-color); + letter-spacing: 4px; + text-transform: uppercase; + opacity: 0.8; + animation: ai-blink 1.5s ease-in-out infinite alternate; +} + +@keyframes ai-ring-expand { + 0% { width: 40px; height: 40px; opacity: 0.8; border-width: 2px; } + 100% { width: 200px; height: 200px; opacity: 0; border-width: 0px; } +} +@keyframes ai-core-pulse { + 0% { transform: scale(0.8); opacity: 0.3; } + 100% { transform: scale(1.5); opacity: 0.6; } +} +@keyframes ai-wave-bounce { + 0% { transform: scaleY(0.3); opacity: 0.6; } + 100% { transform: scaleY(1); opacity: 1; } +} +@keyframes ai-shine-text { + to { background-position: 200% center; } +} +@keyframes ai-blink { + 0% { opacity: 0.4; } + 100% { opacity: 1; text-shadow: 0 0 8px rgba(22, 119, 255, 0.4); } +} diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index 7318601..8e7874c 100644 --- a/frontend/src/routes/index.tsx +++ b/frontend/src/routes/index.tsx @@ -9,7 +9,43 @@ const ResetPassword = lazy(() => import("@/pages/auth/reset-password")); const MeetingPreview = lazy(() => import("@/pages/business/MeetingPreview")); function RouteFallback() { - return