🔗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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user