Files
MemoryBear/web/src/views/Index/components/VersionCard.tsx
2026-04-02 10:37:02 +08:00

77 lines
2.6 KiB
TypeScript

/*
* @Description:
* @Version: 0.0.1
* @Author: yujiangping
* @Date: 2026-01-12 16:34:59
* @LastEditors: ZhaoYing
* @LastEditTime: 2026-04-02 10:36:37
*/
import React, { useEffect, useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Flex } from 'antd';
import { getVersion, type versionResponse } from '@/api/common'
import Empty from '@/components/Empty';
import { useI18n } from '@/store/locale';
import { formatDateTime } from '@/utils/format'
const VersionCard: React.FC = () => {
const { t } = useTranslation();
const { language } = useI18n()
const [versionInfo, setVersionInfo] = useState<versionResponse | null>(null);
// 获取当前语言对应的介绍信息
const introduction = useMemo(() => {
if (!versionInfo) return null;
return language === 'zh' ? versionInfo.introduction : (versionInfo.introduction_en || versionInfo.introduction);
}, [versionInfo, language])
useEffect(() => {
const fetchVersion = async () => {
try {
const response = await getVersion();
setVersionInfo(response);
} catch (error) {
console.error('Failed to fetch version:', error);
}
};
fetchVersion();
}, []);
return (
<div className='rb:w-full rb:p-3 rb:bg-white rb:rounded-xl rb:mt-3'>
<Flex gap={4} className="rb:mb-3">
<span className="rb:font-[MiSans-Bold] rb:font-bold rb:leading-5">{t('index.latestUpdate')}</span>
{versionInfo?.version &&
<span className='rb:text-[12px] rb:text-white rb:leading-4.25 rb:pt-px rb:pl-2 rb:pr-1.75 rb:bg-[#171719] rb:rounded-lg rb:rounded-bl-none '>
{versionInfo?.version}
</span>
}
</Flex>
{introduction
? (<>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:mt-1 rb:mb-2">
{t('version.releaseDate')}: {formatDateTime(introduction.releaseDate, 'YYYY-MM-DD')} | {t('version.name')}: {introduction.codeName}
</div>
<div className="rb:max-h-76 rb:overflow-y-auto">
<p
className='rb:text-[12px] rb:leading-4.5'
dangerouslySetInnerHTML={{ __html: introduction.upgradePosition?.replace(/\n/g, '<br>') }}
/>
{introduction.coreUpgrades?.map((item: string, index: number) => (
<p
key={index}
className='rb:text-[12px] rb:leading-4.5 rb:mt-2'
dangerouslySetInnerHTML={{ __html: item?.replace(/\n/g, '<br>') }}
/>
))}
</div>
</>)
: <Empty size={88} />
}
</div>
);
};
export default VersionCard;