This commit is contained in:
aaron 2025-05-19 00:33:57 +08:00
parent 34ff339e7f
commit f1b8c0fa74
3 changed files with 170 additions and 36 deletions

View File

@ -5,7 +5,7 @@ services:
build: build:
context: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
image: tradus-web:1.3.0 image: tradus-web:1.3.1
container_name: tradus-web container_name: tradus-web
ports: ports:
- '6000:80' - '6000:80'

View File

@ -20,7 +20,7 @@ const openAuthModal = (mode: 'login' | 'register') => {
<span class="accent">tradus</span> <span class="accent">tradus</span>
<span class="free-tag">测试版</span> <span class="free-tag">测试版</span>
</h1> </h1>
<p class="hero-subtitle">基于AI大语言模型的智能投研助理</p> <p class="hero-subtitle">基于AI大语言模型的投研智能体</p>
<div class="hero-actions" v-if="!isAuthenticated"> <div class="hero-actions" v-if="!isAuthenticated">
<button class="btn btn-primary" @click="openAuthModal('login')">登录</button> <button class="btn btn-primary" @click="openAuthModal('login')">登录</button>
<button class="btn btn-secondary" @click="openAuthModal('register')">注册</button> <button class="btn btn-secondary" @click="openAuthModal('register')">注册</button>

View File

@ -120,6 +120,7 @@ const handleAnalysis = async () => {
return return
} }
//
showInitialView.value = false showInitialView.value = false
isAnalyzing.value = true isAnalyzing.value = true
analysisContent.value = '' analysisContent.value = ''
@ -290,7 +291,7 @@ watch(
</div> </div>
<div class="search-section"> <div class="search-section">
<div class="search-container" :class="{ 'is-analyzing': isAnalyzing }"> <div class="search-container">
<div class="input-wrapper"> <div class="input-wrapper">
<div class="input-container"> <div class="input-container">
<div class="input-area"> <div class="input-area">
@ -327,7 +328,7 @@ watch(
@click="handleAnalysis" @click="handleAnalysis"
:disabled="isAnalyzing || !symbolCode.trim()" :disabled="isAnalyzing || !symbolCode.trim()"
> >
{{ isAnalyzing ? '分析中...' : '开始分析' }} {{ isAnalyzing ? '正在跳转...' : '开始分析' }}
</button> </button>
</div> </div>
</div> </div>
@ -393,13 +394,16 @@ watch(
</div> </div>
<div v-if="isAnalyzing" class="analysis-status"> <div v-if="isAnalyzing" class="analysis-status">
<div class="progress-dots"> <div class="ai-progress">
<span></span> <div class="ai-brain">
<span></span> <span class="pulse-ring"></span>
<span></span> <span class="inner-circle"></span>
<span class="brain-wave left"></span>
<span class="brain-wave center"></span>
<span class="brain-wave right"></span>
</div>
</div> </div>
<div class="status-text"> <div class="status-text">
<!-- <div class="status-label">Agent 正在分析</div> -->
<div class="thought-text" v-if="currentThought">{{ currentThought }}</div> <div class="thought-text" v-if="currentThought">{{ currentThought }}</div>
</div> </div>
</div> </div>
@ -422,6 +426,10 @@ watch(
</template> </template>
<style scoped> <style scoped>
:root {
--color-accent-rgb: 51, 85, 255; /* 假设accent颜色为#3355ff */
}
.universal-analysis-view { .universal-analysis-view {
min-height: 100vh; min-height: 100vh;
height: 100vh; height: 100vh;
@ -595,52 +603,112 @@ watch(
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: 1.5rem;
text-align: center; text-align: center;
gap: 1rem; gap: 1.5rem;
margin-top: 1rem; margin-top: 1rem;
background: transparent;
border-radius: var(--border-radius);
} }
.progress-dots { .ai-progress {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 6px; padding: 5px;
}
.progress-dots span {
width: 8px;
height: 8px;
background-color: var(--color-accent);
border-radius: 50%; border-radius: 50%;
opacity: 0.3; background: transparent;
animation: pulse-dot 1s infinite;
} }
.progress-dots span:nth-child(2) { .ai-brain {
position: relative;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transform: translateZ(0); /* 启用硬件加速 */
z-index: 1;
}
.pulse-ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1.5px solid rgba(51, 85, 255, 0.6);
opacity: 0;
animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
z-index: 0;
}
.inner-circle {
position: absolute;
width: 60%;
height: 60%;
background-color: rgba(51, 85, 255, 0.7);
border-radius: 50%;
opacity: 0.7;
animation: pulse-core 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite alternate;
z-index: 2;
}
.brain-wave {
position: absolute;
width: 3px;
height: 8px;
background-color: rgba(51, 85, 255, 0.7);
border-radius: 1.5px;
animation: wave-animation 0.8s infinite ease-in-out;
z-index: 3;
}
.brain-wave.left {
animation-delay: 0;
left: -12px;
}
.brain-wave.center {
animation-delay: 0.2s; animation-delay: 0.2s;
left: 0px;
margin-left: -2px;
} }
.progress-dots span:nth-child(3) { .brain-wave.right {
animation-delay: 0.4s; animation-delay: 0.4s;
left: 12px;
} }
.status-text { .status-text {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 0.5rem; flex: 1;
}
.status-label {
font-weight: 500;
color: var(--color-accent);
font-size: 0.85rem;
} }
.thought-text { .thought-text {
font-size: 0.9rem; font-size: 0.95rem;
font-weight: 400;
color: var(--color-text-secondary); color: var(--color-text-secondary);
position: relative;
overflow: hidden;
padding-right: 0.5rem;
white-space: nowrap;
animation: thought-appear 0.4s ease forwards;
max-width: 100%;
transition: opacity 0.3s;
}
@keyframes thought-appear {
0% {
opacity: 0;
transform: translateY(3px);
}
100% {
opacity: 1;
transform: translateY(0);
}
} }
.analysis-container { .analysis-container {
@ -813,15 +881,41 @@ watch(
} }
} }
@keyframes pulse-dot { @keyframes pulse-ring {
0%, 0% {
100% { transform: scale(0.9);
transform: scale(1);
opacity: 0.3; opacity: 0.3;
} }
50% { 50% {
transform: scale(1.2); transform: scale(1.2);
opacity: 1; opacity: 0.15;
}
100% {
transform: scale(0.9);
opacity: 0.3;
}
}
@keyframes pulse-core {
0% {
transform: scale(0.9);
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 0.8;
}
}
@keyframes wave-animation {
0%,
100% {
height: 4px;
opacity: 0.3;
}
50% {
height: 12px;
opacity: 0.7;
} }
} }
@ -897,6 +991,20 @@ watch(
.common-analysis-container { .common-analysis-container {
padding: 0 1rem; padding: 0 1rem;
} }
.analysis-status {
padding: 1rem;
margin-top: 0.75rem;
}
.ai-progress {
transform: scale(0.9);
min-width: 32px;
}
.thought-text {
font-size: 0.85rem;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
@ -981,5 +1089,31 @@ watch(
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.3rem 0.6rem; padding: 0.3rem 0.6rem;
} }
.analysis-status {
padding: 0.75rem;
flex-direction: column;
gap: 0.75rem;
}
.ai-brain {
width: 32px;
height: 32px;
margin: 0 auto;
}
.brain-wave.left {
left: -8px;
}
.brain-wave.right {
left: 8px;
}
.thought-text {
font-size: 0.8rem;
text-align: center;
white-space: normal;
}
} }
</style> </style>