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
This commit is contained in:
@@ -31,6 +31,12 @@ export interface versionResponse{
|
|||||||
coreUpgrades: string[];
|
coreUpgrades: string[];
|
||||||
codeName: string;
|
codeName: string;
|
||||||
};
|
};
|
||||||
|
introduction_en?: {
|
||||||
|
releaseDate: string;
|
||||||
|
upgradePosition: string;
|
||||||
|
coreUpgrades: string[];
|
||||||
|
codeName: string;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
// 首页数据统计
|
// 首页数据统计
|
||||||
export const getDashboardData = `/home-page/workspaces`
|
export const getDashboardData = `/home-page/workspaces`
|
||||||
|
|||||||
@@ -77,7 +77,8 @@ const TopCardList: FC<{data?: DataResponse}> = ({ data }) => {
|
|||||||
|
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
{item.key === 'spaces' && String(data?.active_workspaces)}
|
{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>
|
||||||
<div className='rb:flex rb:flex-col rb:items-start'>
|
<div className='rb:flex rb:flex-col rb:items-start'>
|
||||||
{item.key === 'models' ? (
|
{item.key === 'models' ? (
|
||||||
|
|||||||
@@ -4,29 +4,32 @@
|
|||||||
* @Author: yujiangping
|
* @Author: yujiangping
|
||||||
* @Date: 2026-01-12 16:34:59
|
* @Date: 2026-01-12 16:34:59
|
||||||
* @LastEditors: yujiangping
|
* @LastEditors: yujiangping
|
||||||
* @LastEditTime: 2026-01-13 19:14:30
|
* @LastEditTime: 2026-01-16 13:00:22
|
||||||
*/
|
*/
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button, Divider } from 'antd';
|
import { Divider } from 'antd';
|
||||||
// import arrowRight from '@/assets/images/index/arrow_right.svg'
|
// import arrowRight from '@/assets/images/index/arrow_right.svg'
|
||||||
import { getVersion, type versionResponse } from '@/api/common'
|
import { getVersion, type versionResponse } from '@/api/common'
|
||||||
|
|
||||||
const GuideCard: React.FC = () => {
|
const GuideCard: React.FC = () => {
|
||||||
const { t } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const [versionInfo, setVersionInfo] = useState<versionResponse | null>(null);
|
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(() => {
|
useEffect(() => {
|
||||||
const fetchVersion = async () => {
|
const fetchVersion = async () => {
|
||||||
try {
|
try {
|
||||||
setLoading(true);
|
|
||||||
const response = await getVersion();
|
const response = await getVersion();
|
||||||
setVersionInfo(response);
|
setVersionInfo(response);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch version:', error);
|
console.error('Failed to fetch version:', error);
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -41,27 +44,30 @@ const GuideCard: React.FC = () => {
|
|||||||
{versionInfo?.version}
|
{versionInfo?.version}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='rb:flex rb:flex-col rb:text-[#5B6167]'>
|
<div className='rb:flex rb:flex-col rb:max-h-[420px] rb:overflow-y-auto rb:text-[#5B6167]'>
|
||||||
{versionInfo && (<>
|
{versionInfo && (() => {
|
||||||
<div className='rb:flex rb:items-center rb:gap-2 rb:text-sm rb:text-[#5B6167] rb:leading-5 '>
|
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]'>
|
<span className='rb:text-xs rb:text-[#5B6167]'>
|
||||||
{t('version.releaseDate')}: {versionInfo.introduction?.releaseDate}
|
{t('version.releaseDate')}: {introduction.releaseDate}
|
||||||
</span>
|
</span>
|
||||||
<Divider type='vertical' />
|
<Divider type='vertical' />
|
||||||
<span className='rb:text-xs rb:text-[#5B6167]'>
|
<span className='rb:text-xs rb:text-[#5B6167]'>
|
||||||
{t('version.name')}: {versionInfo.introduction?.codeName}
|
{t('version.name')}: {introduction.codeName}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className='rb:text-sm rb:text-[#5B6167] rb:leading-5 rb:mt-2 '>
|
<p className='rb:text-sm rb:text-[#5B6167] rb:leading-5 rb:mt-2 '>
|
||||||
{versionInfo.introduction?.upgradePosition}
|
{introduction.upgradePosition}
|
||||||
</p>
|
</p>
|
||||||
{versionInfo.introduction?.coreUpgrades?.map((item,index) => (
|
{introduction.coreUpgrades?.map((item: string, index: number) => (
|
||||||
<p className='rb:text-sm rb:text-[#5B6167] rb:leading-5'>
|
<p key={index} className='rb:text-sm rb:text-[#5B6167] rb:leading-5'>
|
||||||
{index + 1}. {item}
|
{index + 1}. {item}
|
||||||
</p>
|
</p>
|
||||||
))}
|
))}
|
||||||
</>)}
|
</>) : null;
|
||||||
|
})()}
|
||||||
{/* {loading ? (
|
{/* {loading ? (
|
||||||
t('index.loading')
|
t('index.loading')
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
Reference in New Issue
Block a user