From 4365c8e95c97dc9e4cec2b6c4248fc5642090037 Mon Sep 17 00:00:00 2001
From: yujiangping <yujiangping@taofen8.com>
Date: Fri, 16 Jan 2026 13:35:01 +0800
Subject: [PATCH] feat(web): add multi-language support for version information

- Add English introduction field (introduction_en) to versionResponse interface in common.ts
- Implement language-aware version information retrieval in VersionCard component
- Add getIntroduction() function to return appropriate language version based on current i18n language
- Fix running_apps data key mapping to use direct key instead of total_ prefix in TopCardList
- Add max-height and overflow styling to version card content for better scrolling
- Remove unused loading state and Button import from VersionCard
- Add key prop to coreUpgrades list items for proper React rendering
- Support fallback to English introduction when current language version is unavailable
---
 web/src/api/common.ts                         |  6 ++
 .../Index/components/TopCardList/index.tsx    |  3 +-
 .../views/Index/components/VersionCard.tsx    | 62 ++++++++++---------
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/web/src/api/common.ts b/web/src/api/common.ts
index 01568640..2f6033d1 100644
--- a/web/src/api/common.ts
+++ b/web/src/api/common.ts
@@ -31,6 +31,12 @@ export interface versionResponse{
     coreUpgrades: string[];
     codeName: string;
   };
+  introduction_en?: {
+    releaseDate: string;
+    upgradePosition: string;
+    coreUpgrades: string[];
+    codeName: string;
+  };
 }
 // 首页数据统计
 export const getDashboardData = `/home-page/workspaces`
diff --git a/web/src/views/Index/components/TopCardList/index.tsx b/web/src/views/Index/components/TopCardList/index.tsx
index 273ce936..97ced240 100644
--- a/web/src/views/Index/components/TopCardList/index.tsx
+++ b/web/src/views/Index/components/TopCardList/index.tsx
@@ -77,7 +77,8 @@ const TopCardList: FC<{data?: DataResponse}> = ({ data }) => {
 
             <div className={styles.content}>
               {item.key === 'spaces' && String(data?.active_workspaces)}
-              {item.key !== 'spaces' && String(data?.[`total_${item.key}` as keyof DataResponse] || item.value || 0)}
+              {item.key === 'running_apps' &&  String(data?.[`${item.key}` as keyof DataResponse] || item.value || 0)}
+              {item.key !== 'spaces' && item.key !== 'running_apps' && String(data?.[`total_${item.key}` as keyof DataResponse] || item.value || 0)}
             </div>
             <div className='rb:flex rb:flex-col rb:items-start'>
                 {item.key === 'models' ? (
diff --git a/web/src/views/Index/components/VersionCard.tsx b/web/src/views/Index/components/VersionCard.tsx
index 7e632481..5cd94348 100644
--- a/web/src/views/Index/components/VersionCard.tsx
+++ b/web/src/views/Index/components/VersionCard.tsx
@@ -4,29 +4,32 @@
  * @Author: yujiangping
  * @Date: 2026-01-12 16:34:59
  * @LastEditors: yujiangping
- * @LastEditTime: 2026-01-13 19:14:30
+ * @LastEditTime: 2026-01-16 13:00:22
  */
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Divider } from 'antd';
+import { Divider } from 'antd';
 // import arrowRight from '@/assets/images/index/arrow_right.svg'
 import { getVersion, type versionResponse } from '@/api/common'
 
 const GuideCard: React.FC = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [versionInfo, setVersionInfo] = useState<versionResponse | null>(null);
-  const [loading, setLoading] = useState(false);
+
+  // 获取当前语言对应的介绍信息
+  const getIntroduction = () => {
+    if (!versionInfo) return null;
+    const currentLang = i18n.language;
+    return currentLang === 'zh' ? versionInfo.introduction : (versionInfo.introduction_en || versionInfo.introduction);
+  };
 
   useEffect(() => {
     const fetchVersion = async () => {
       try {
-        setLoading(true);
         const response = await getVersion();
         setVersionInfo(response);
       } catch (error) {
         console.error('Failed to fetch version:', error);
-      } finally {
-        setLoading(false);
       }
     };
 
@@ -41,27 +44,30 @@ const GuideCard: React.FC = () => {
               {versionInfo?.version}
             </span>
         </div>
-        <div className='rb:flex rb:flex-col rb:text-[#5B6167]'>
-            {versionInfo && (<>  
-              <div className='rb:flex rb:items-center rb:gap-2 rb:text-sm rb:text-[#5B6167] rb:leading-5 '>
-                 
-                  <span className='rb:text-xs rb:text-[#5B6167]'>
-                    {t('version.releaseDate')}: {versionInfo.introduction?.releaseDate}
-                  </span>
-                  <Divider type='vertical' />
-                  <span className='rb:text-xs rb:text-[#5B6167]'>
-                    {t('version.name')}: {versionInfo.introduction?.codeName}
-                  </span>
-              </div>
-              <p className='rb:text-sm rb:text-[#5B6167] rb:leading-5 rb:mt-2 '>  
-                  {versionInfo.introduction?.upgradePosition}
-              </p>
-              {versionInfo.introduction?.coreUpgrades?.map((item,index) => (
-                  <p className='rb:text-sm rb:text-[#5B6167] rb:leading-5'>
-                    {index + 1}. {item}
-                  </p>
-              ))}
-            </>)}
+        <div className='rb:flex rb:flex-col rb:max-h-[420px] rb:overflow-y-auto rb:text-[#5B6167]'>
+            {versionInfo && (() => {
+              const introduction = getIntroduction();
+              return introduction ? (<>  
+                <div className='rb:flex  rb:items-center rb:gap-2 rb:text-sm rb:text-[#5B6167] rb:leading-5 '>
+                   
+                    <span className='rb:text-xs rb:text-[#5B6167]'>
+                      {t('version.releaseDate')}: {introduction.releaseDate}
+                    </span>
+                    <Divider type='vertical' />
+                    <span className='rb:text-xs rb:text-[#5B6167]'>
+                      {t('version.name')}: {introduction.codeName}
+                    </span>
+                </div>
+                <p className='rb:text-sm rb:text-[#5B6167] rb:leading-5 rb:mt-2 '>  
+                    {introduction.upgradePosition}
+                </p>
+                {introduction.coreUpgrades?.map((item: string, index: number) => (
+                    <p key={index} className='rb:text-sm rb:text-[#5B6167] rb:leading-5'>
+                      {index + 1}. {item}
+                    </p>
+                ))}
+              </>) : null;
+            })()}
             {/* {loading ? (
               t('index.loading')
             ) : (