From 0c0ea54d180a8b7a7ca8283f226e9040422e6426 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Fri, 23 May 2025 14:43:16 +0800
Subject: [PATCH] update

---
 docker-compose.yml     |   2 +-
 src/views/HomeView.vue | 306 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 299 insertions(+), 9 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 3ba8142..f0d158a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -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'
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c26b5ed..5cefe4b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -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>