update
This commit is contained in:
aaron
parent
2475a3bba5
commit
0c0ea54d18
@ -5,7 +5,7 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
image: tradus-web:1.3.8
|
||||
image: tradus-web:1.3.9
|
||||
container_name: tradus-web
|
||||
ports:
|
||||
- '6000:80'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { useUserStore } from '../stores/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
@ -10,6 +10,88 @@ const emit = defineEmits(['openAuth'])
|
||||
const openAuthModal = (mode: 'login' | 'register') => {
|
||||
emit('openAuth', mode)
|
||||
}
|
||||
|
||||
// 平台信息相关
|
||||
const apiBaseUrl =
|
||||
import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'
|
||||
|
||||
// 实际数据和显示数据分开管理
|
||||
const platformInfo = ref({
|
||||
user_count: 0,
|
||||
question_count: 0,
|
||||
})
|
||||
// 用于动画显示的数据
|
||||
const displayUserCount = ref(0)
|
||||
const displayQuestionCount = ref(0)
|
||||
const isLoading = ref(true)
|
||||
const animationDuration = 1500 // 动画持续时间（毫秒）
|
||||
const displayMultiplier = 8 // 显示数据的倍数
|
||||
|
||||
// 格式化数字显示 - 修改为直接显示完整数字
|
||||
const formatNumber = (num: number): string => {
|
||||
// 将小数部分去除，只显示整数
|
||||
return Math.floor(num).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
// 开始数字动画
|
||||
const animateNumbers = () => {
|
||||
const startTime = Date.now()
|
||||
const initialUserCount = 0
|
||||
const initialQuestionCount = 0
|
||||
// 显示数据乘以倍数
|
||||
const targetUserCount = platformInfo.value.user_count * displayMultiplier
|
||||
const targetQuestionCount = platformInfo.value.question_count * displayMultiplier
|
||||
|
||||
// 使用requestAnimationFrame来实现平滑动画
|
||||
const updateNumbers = () => {
|
||||
const currentTime = Date.now()
|
||||
const elapsedTime = currentTime - startTime
|
||||
const progress = Math.min(elapsedTime / animationDuration, 1)
|
||||
|
||||
// 使用缓动函数让动画更自然
|
||||
const easedProgress = easeOutCubic(progress)
|
||||
|
||||
displayUserCount.value = initialUserCount + (targetUserCount - initialUserCount) * easedProgress
|
||||
displayQuestionCount.value =
|
||||
initialQuestionCount + (targetQuestionCount - initialQuestionCount) * easedProgress
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateNumbers)
|
||||
} else {
|
||||
// 确保最终显示精确的值
|
||||
displayUserCount.value = targetUserCount
|
||||
displayQuestionCount.value = targetQuestionCount
|
||||
}
|
||||
}
|
||||
|
||||
updateNumbers()
|
||||
}
|
||||
|
||||
// 缓动函数 - 慢速结束
|
||||
const easeOutCubic = (x: number): number => {
|
||||
return 1 - Math.pow(1 - x, 3)
|
||||
}
|
||||
|
||||
// 获取平台信息
|
||||
const fetchPlatformInfo = async () => {
|
||||
try {
|
||||
isLoading.value = true
|
||||
const response = await fetch(`${apiBaseUrl}/platform/info`)
|
||||
if (response.ok) {
|
||||
platformInfo.value = await response.json()
|
||||
isLoading.value = false
|
||||
// 数据加载完成后启动动画
|
||||
animateNumbers()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取平台信息失败:', error)
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchPlatformInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -21,6 +103,18 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
<span class="free-tag">测试版</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">基于AI大语言模型的投研智能体</p>
|
||||
|
||||
<!-- 平台统计信息 - 只显示调用次数 -->
|
||||
<div class="platform-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value" :class="{ shimmer: isLoading }">
|
||||
<span v-if="isLoading">-</span>
|
||||
<span v-else class="animated-number">{{ formatNumber(displayQuestionCount) }}</span>
|
||||
</div>
|
||||
<div class="stat-label">智能体调用次数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-actions" v-if="!isAuthenticated">
|
||||
<button class="btn btn-primary" @click="openAuthModal('login')">登录</button>
|
||||
<button class="btn btn-secondary" @click="openAuthModal('register')">注册</button>
|
||||
@ -30,26 +124,42 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页面底部的DeepSeek大模型支持信息 -->
|
||||
<footer class="page-footer">
|
||||
<div class="deepseek-partnership">
|
||||
<div class="partnership-content">
|
||||
<span class="powered-text">由</span>
|
||||
<div class="deepseek-logo">
|
||||
<span class="deepseek-name">DeepSeek</span>
|
||||
</div>
|
||||
<span class="powered-text">大语言模型提供支持</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-view {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 6rem 2rem;
|
||||
padding: 4rem 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
@ -113,7 +223,68 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
sans-serif;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
margin: 0 auto 4rem;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
/* 平台统计信息样式 */
|
||||
.platform-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto 2rem;
|
||||
max-width: 400px;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 1;
|
||||
font-family:
|
||||
'SF Pro Display',
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
min-height: 2.2rem; /* 防止高度变化导致布局跳动 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 加载效果 */
|
||||
.shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-bg-secondary) 0%,
|
||||
rgba(51, 85, 255, 0.2) 50%,
|
||||
var(--color-bg-secondary) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
@ -226,6 +397,15 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
}
|
||||
}
|
||||
|
||||
.animated-number {
|
||||
display: inline-block;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.animated-number:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 4rem 1.5rem;
|
||||
@ -237,7 +417,19 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.platform-stats {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@ -245,6 +437,22 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
font-size: 1rem;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
.partnership-content {
|
||||
padding: 0.3rem 0.8rem;
|
||||
}
|
||||
|
||||
.powered-text {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.deepseek-name {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@ -258,7 +466,20 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.platform-stats {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
@ -279,5 +500,74 @@ const openAuthModal = (mode: 'login' | 'register') => {
|
||||
right: -30px;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
.partnership-content {
|
||||
padding: 0.3rem 0.7rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.powered-text {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.deepseek-name {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除底部悬浮的模型支持信息样式 */
|
||||
.model-support-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面底部样式 */
|
||||
.page-footer {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Deepseek合作信息样式 - 更小版本 */
|
||||
.deepseek-partnership {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.partnership-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.4rem 1rem;
|
||||
background-color: rgba(0, 102, 255, 0.05);
|
||||
border: 1px solid rgba(0, 102, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.powered-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.deepseek-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.deepseek-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
background: linear-gradient(135deg, #00aeff 0%, #0066ff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user