712 lines
15 KiB
Vue
712 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, onMounted, watch } from 'vue'
|
|
import { useUserStore } from '../stores/user'
|
|
import { useThemeStore } from '../stores/theme'
|
|
|
|
const userStore = useUserStore()
|
|
const themeStore = useThemeStore()
|
|
const isAuthenticated = computed(() => userStore.isAuthenticated)
|
|
const isDarkTheme = computed(() => themeStore.isDarkTheme)
|
|
|
|
const emit = defineEmits(['openAuth'])
|
|
|
|
const openAuthModal = (mode: 'login' | 'register') => {
|
|
emit('openAuth', mode)
|
|
}
|
|
|
|
// 切换主题并添加动画效果
|
|
const toggleTheme = () => {
|
|
themeStore.toggleTheme()
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 确保组件挂载时主题已被正确应用
|
|
document.documentElement.setAttribute('data-theme', themeStore.currentTheme)
|
|
})
|
|
|
|
// 监听主题变化更新UI
|
|
watch(
|
|
() => themeStore.currentTheme,
|
|
(newTheme) => {
|
|
document.documentElement.setAttribute('data-theme', newTheme)
|
|
},
|
|
)
|
|
|
|
// 平台信息相关
|
|
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>
|
|
<div class="home-view">
|
|
<section class="hero-section">
|
|
<!-- 主题切换按钮 -->
|
|
<div class="theme-toggle">
|
|
<button
|
|
class="theme-toggle-button"
|
|
@click="toggleTheme"
|
|
:title="isDarkTheme ? '切换到浅色模式' : '切换到深色模式'"
|
|
>
|
|
<svg
|
|
v-if="isDarkTheme"
|
|
class="theme-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<!-- 太阳图标 -->
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
class="theme-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<!-- 月亮图标 -->
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">
|
|
<span class="accent">tradus</span>
|
|
<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>
|
|
</div>
|
|
<div class="hero-actions" v-else>
|
|
<RouterLink to="/ai-agents" class="btn btn-primary">开始使用</RouterLink>
|
|
</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%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0));
|
|
}
|
|
|
|
.hero-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.hero-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* background: radial-gradient(circle at top right, rgba(51, 85, 255, 0.03), transparent 70%); */
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 1.8rem;
|
|
font-weight: 800;
|
|
margin-bottom: 0.3rem;
|
|
font-family:
|
|
'SF Pro Display',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
sans-serif;
|
|
letter-spacing: -0.5px;
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.accent {
|
|
font-size: 3.2rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--color-accent) 0%, #2244ee 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
font-family:
|
|
'SF Pro Display',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
sans-serif;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1rem;
|
|
color: var(--color-text-secondary);
|
|
font-weight: 400;
|
|
font-family:
|
|
'SF Pro Display',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
sans-serif;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
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 {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
justify-content: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 160px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #3355ff;
|
|
color: white;
|
|
border: none;
|
|
box-shadow: 0 4px 6px rgba(51, 85, 255, 0.1);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #2244ee;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 12px rgba(51, 85, 255, 0.2);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: rgba(51, 85, 255, 0.1);
|
|
color: #3355ff;
|
|
border: none;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: rgba(51, 85, 255, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.discord-link {
|
|
margin-top: 4rem;
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.discord-link:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.discord-text {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
color: #6c757d;
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 8px;
|
|
background-color: rgba(108, 117, 125, 0.1);
|
|
}
|
|
|
|
.discord-text:hover {
|
|
color: #3355ff;
|
|
background-color: rgba(51, 85, 255, 0.1);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.discord-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.btn-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.free-tag {
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -40px;
|
|
background-color: #ff3355;
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
box-shadow: 0 2px 4px rgba(255, 51, 85, 0.3);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.platform-stats {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.875rem 1.75rem;
|
|
font-size: 1rem;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.home-view {
|
|
padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0));
|
|
}
|
|
|
|
.page-footer {
|
|
padding: 0.8rem 0 3rem;
|
|
}
|
|
|
|
.partnership-content {
|
|
padding: 0.3rem 0.8rem;
|
|
}
|
|
|
|
.powered-text {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.deepseek-name {
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero-section {
|
|
padding: 3rem 1rem;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 0.8rem;
|
|
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 {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.free-tag {
|
|
top: -8px;
|
|
right: -30px;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.home-view {
|
|
padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0));
|
|
}
|
|
|
|
.page-footer {
|
|
padding: 0.8rem 0 4rem;
|
|
bottom: env(safe-area-inset-bottom, 1.5rem);
|
|
}
|
|
|
|
.partnership-content {
|
|
padding: 0.3rem 0.7rem;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.powered-text {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.deepseek-name {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.theme-toggle {
|
|
top: 16px;
|
|
right: 16px;
|
|
}
|
|
|
|
.theme-toggle-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.theme-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
/* 删除底部悬浮的模型支持信息样式 */
|
|
.model-support-footer {
|
|
display: none;
|
|
}
|
|
|
|
/* 页面底部样式 */
|
|
.page-footer {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: env(safe-area-inset-bottom, 1rem);
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1rem 0 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 主题切换按钮样式 */
|
|
.theme-toggle {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.theme-toggle-button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--color-bg-secondary);
|
|
color: var(--color-text-secondary);
|
|
transition: all 0.3s ease;
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.theme-toggle-button:hover {
|
|
background-color: var(--color-accent-light);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.theme-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* 特殊的浏览器兼容处理 */
|
|
@supports (padding: max(0px)) {
|
|
.home-view {
|
|
padding-bottom: max(7rem, calc(4rem + env(safe-area-inset-bottom, 1.5rem)));
|
|
}
|
|
|
|
.page-footer {
|
|
bottom: max(2rem, env(safe-area-inset-bottom, 2rem));
|
|
}
|
|
}
|
|
</style>
|