🔗feat(ui): Enhance About page with interactive project links and improve external link handling

**Changes:**
- Replace React Router `Link` components with native `<a>` tags for external links in About and Footer components
- Add clickable links for "NewAPI", "QuantumNous", and "One API v0.5.4" in the About page
- Link "NewAPI" to the main project repository (https://github.com/QuantumNous/new-api)
- Link "QuantumNous" to the organization page (https://github.com/QuantumNous)
- Link "One API v0.5.4" to the specific release page (https://github.com/songquanpeng/one-api/releases/tag/v0.5.4)
- Apply consistent styling with primary color theme and hover effects across all links
- Add proper security attributes (`rel="noopener noreferrer"`) to all external links

**i18n Updates:**
- Refactor i18n translation keys to support the new link structure
- Split the original copyright string into smaller, reusable translation keys
- Add new translation keys: `"© {{currentYear}}"` and `"| 基于"`
- Maintain backward compatibility for existing translations

**Benefits:**
- Improved user experience with direct access to relevant project resources
- Better SEO and link accessibility
- Consistent visual styling across all external links
- Enhanced security for external link navigation
- Proper separation of concerns between internal routing and external navigation
This commit is contained in:
Apple\Apple
2025-06-07 22:50:31 +08:00
parent e8f78c739c
commit e0cc13094f
3 changed files with 60 additions and 15 deletions

View File

@@ -3,7 +3,6 @@ import { API, showError } from '../../helpers';
import { marked } from 'marked';
import { Empty } from '@douyinfe/semi-ui';
import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
const About = () => {
@@ -42,14 +41,58 @@ const About = () => {
<div style={{ textAlign: 'center' }}>
<p>{t('可在设置页面设置关于内容,支持 HTML & Markdown')}</p>
{t('New API项目仓库地址')}
<Link to='https://github.com/QuantumNous/new-api' target="_blank">
<a
href='https://github.com/QuantumNous/new-api'
target="_blank"
rel="noopener noreferrer"
className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors"
>
https://github.com/QuantumNous/new-api
</Link>
</a>
<p>
{t('NewAPI © {{currentYear}} QuantumNous | 基于 One API v0.5.4 © 2023 JustSong。', { currentYear })}
<a
href="https://github.com/QuantumNous/new-api"
target="_blank"
rel="noopener noreferrer"
className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors"
>
NewAPI
</a> {t('© {{currentYear}}', { currentYear })} <a
href="https://github.com/QuantumNous"
target="_blank"
rel="noopener noreferrer"
className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors"
>
QuantumNous
</a> {t('| ')} <a
href="https://github.com/songquanpeng/one-api/releases/tag/v0.5.4"
target="_blank"
rel="noopener noreferrer"
className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors"
>
One API v0.5.4
</a> {t('© 2023 JustSong')}
</p>
<p>
{t('本项目根据MIT许可证授权需在遵守Apache-2.0协议的前提下使用。')}
{t('本项目根据')}
<a
href="https://github.com/songquanpeng/one-api/blob/v0.5.4/LICENSE"
target="_blank"
rel="noopener noreferrer"
className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors"
>
MIT许可证
</a>
{t('授权,需在遵守')}
<a
href="https://github.com/QuantumNous/new-api/blob/main/LICENSE"
target="_blank"
rel="noopener noreferrer"
className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors"
>
Apache-2.0协议
</a>
{t('的前提下使用。')}
</p>
</div>
);