fix(web): improve version card content rendering with HTML support

- Add parseContent method to handle newline and HTML tag conversion
- Update upgradePosition paragraph to use dangerouslySetInnerHTML for proper HTML rendering
- Update coreUpgrades list items to render HTML content instead of plain text
- Improve code formatting and readability with consistent className styling
- Enable proper display of formatted content with line breaks and HTML elements in version information
This commit is contained in:
yujiangping
2026-01-23 19:17:16 +08:00
parent d56e168df9
commit 14946d9a1d

View File

@@ -4,7 +4,7 @@
* @Author: yujiangping
* @Date: 2026-01-12 16:34:59
* @LastEditors: yujiangping
* @LastEditTime: 2026-01-16 15:38:35
* @LastEditTime: 2026-01-23 19:07:36
*/
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -23,6 +23,13 @@ const GuideCard: React.FC = () => {
return currentLang === 'zh' ? versionInfo.introduction : (versionInfo.introduction_en || versionInfo.introduction);
};
// 解析换行符和HTML的方法
const parseContent = (text: string) => {
if (!text) return '';
// 将 \n 转换为 <br/> 标签
return text.replace(/\\n/g, '<br/>');
};
useEffect(() => {
const fetchVersion = async () => {
try {
@@ -58,13 +65,16 @@ const GuideCard: React.FC = () => {
{t('version.name')}: {introduction.codeName}
</span>
</div>
<p className='rb:text-sm rb:text-[#5B6167] rb:leading-5 rb:mt-2 '>
{introduction.upgradePosition}
</p>
<p
className='rb:text-sm rb:text-[#5B6167] rb:leading-5 rb:mt-2'
dangerouslySetInnerHTML={{ __html: introduction.upgradePosition }}
/>
{introduction.coreUpgrades?.map((item: string, index: number) => (
<p key={index} className='rb:text-sm rb:text-[#5B6167] rb:leading-5'>
{index + 1}. {item}
</p>
<p
key={index}
className='rb:text-sm rb:text-[#5B6167] rb:leading-5'
dangerouslySetInnerHTML={{ __html: item }}
/>
))}
</>) : null;
})()}