🔗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

web/src/components/layout/Footer.js

@@ -81,14 +81,12 @@ const FooterBar = () => {
           <Typography.Text className="text-sm !text-semi-color-text-1">© {currentYear} {systemName}. {t('版权所有')}</Typography.Text>
         </div>
 
-        {isDemoSiteMode && (
-          <div className="text-sm">
-            <span className="!text-semi-color-text-1">{t('设计与开发由')} </span>
-            <span className="!text-semi-color-primary">Douyin FE</span>
-            <span className="!text-semi-color-text-1"> & </span>
-            <a href="https://github.com/QuantumNous" target="_blank" rel="noreferrer" className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors">QuantumNous</a>
-          </div>
-        )}
+        <div className="text-sm">
+          <span className="!text-semi-color-text-1">{t('设计与开发由')} </span>
+          <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 font-medium">New API</a>
+          <span className="!text-semi-color-text-1"> & </span>
+          <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-semi-color-primary hover:!text-semi-color-primary-hover transition-colors font-medium">One API</a>
+        </div>
       </div>
     </footer>
   ), [logo, systemName, t, currentYear, isDemoSiteMode]);

web/src/i18n/locales/en.json

@@ -1404,8 +1404,12 @@
   "演示站点": "Demo Site",
   "页面未找到，请检查您的浏览器地址是否正确": "Page not found, please check if your browser address is correct",
   "New API项目仓库地址：": "New API project repository address: ",
-  "NewAPI © {{currentYear}} QuantumNous | 基于 One API v0.5.4 © 2023 JustSong。": "NewAPI © {{currentYear}} QuantumNous | Based on One API v0.5.4 © 2023 JustSong.",
-  "本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。": "This project is licensed under the MIT License and must be used in compliance with the Apache-2.0 License.",
+  "© {{currentYear}}": "© {{currentYear}}",
+  "| 基于": " | Based on ",
+  "© 2023 JustSong。": "© 2023 JustSong.",
+  "本项目根据": "This project is licensed under the ",
+  "授权，需在遵守": " and must be used in compliance with the ",
+  "的前提下使用。": ".",
   "管理员暂时未设置任何关于内容": "The administrator has not set any custom About content yet",
   "早上好": "Good morning",
   "中午好": "Good afternoon",

web/src/pages/About/index.js

@@ -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>
   );