Merge remote-tracking branch 'origin/alpha' into alpha

web/src/components/auth/OAuth2Callback.js

@@ -1,15 +1,16 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Spin, Typography, Space } from '@douyinfe/semi-ui';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { API, showError, showSuccess, updateAPI, setUserData } from '../../helpers';
 import { UserContext } from '../../context/User';
+import Loading from '../common/Loading';
 
 const OAuth2Callback = (props) => {
+  const { t } = useTranslation();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const [userState, userDispatch] = useContext(UserContext);
-  const [prompt, setPrompt] = useState('处理中...');
-  const [processing, setProcessing] = useState(true);
+  const [prompt, setPrompt] = useState(t('处理中...'));
 
   let navigate = useNavigate();
 
@@ -20,25 +21,25 @@ const OAuth2Callback = (props) => {
     const { success, message, data } = res.data;
     if (success) {
       if (message === 'bind') {
-        showSuccess('绑定成功！');
-        navigate('/setting');
+        showSuccess(t('绑定成功！'));
+        navigate('/console/setting');
       } else {
         userDispatch({ type: 'login', payload: data });
         localStorage.setItem('user', JSON.stringify(data));
         setUserData(data);
         updateAPI();
-        showSuccess('登录成功！');
-        navigate('/token');
+        showSuccess(t('登录成功！'));
+        navigate('/console/token');
       }
     } else {
       showError(message);
       if (count === 0) {
-        setPrompt(`操作失败，重定向至登录界面中...`);
-        navigate('/setting'); // in case this is failed to bind GitHub
+        setPrompt(t('操作失败，重定向至登录界面中...'));
+        navigate('/console/setting'); // in case this is failed to bind GitHub
         return;
       }
       count++;
-      setPrompt(`出现错误，第 ${count} 次重试中...`);
+      setPrompt(t('出现错误，第 ${count} 次重试中...', { count }));
       await new Promise((resolve) => setTimeout(resolve, count * 2000));
       await sendCode(code, state, count);
     }
@@ -50,17 +51,7 @@ const OAuth2Callback = (props) => {
     sendCode(code, state, 0).then();
   }, []);
 
-  return (
-    <div className="flex items-center justify-center min-h-[300px] w-full bg-white rounded-lg shadow p-6">
-      <Space vertical align="center">
-        <Spin size="large" spinning={processing}>
-          <div className="min-h-[200px] min-w-[200px] flex items-center justify-center">
-            <Typography.Text type="secondary">{prompt}</Typography.Text>
-          </div>
-        </Spin>
-      </Space>
-    </div>
-  );
+  return <Loading prompt={prompt} />;
 };
 
 export default OAuth2Callback;

web/src/components/layout/Footer.js

@@ -40,36 +40,36 @@ const FooterBar = () => {
             <div className="text-left">
               <p className="!text-semi-color-text-0 font-semibold mb-5">{t('关于我们')}</p>
               <div className="flex flex-col gap-4">
-                <a href="https://docs.newapi.pro/wiki/project-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('关于项目')}</a>
-                <a href="https://docs.newapi.pro/support/community-interaction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('联系我们')}</a>
-                <a href="https://docs.newapi.pro/wiki/features-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('功能特性')}</a>
+                <a href="https://docs.newapi.pro/wiki/project-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('关于项目')}</a>
+                <a href="https://docs.newapi.pro/support/community-interaction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('联系我们')}</a>
+                <a href="https://docs.newapi.pro/wiki/features-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('功能特性')}</a>
               </div>
             </div>
 
             <div className="text-left">
               <p className="!text-semi-color-text-0 font-semibold mb-5">{t('文档')}</p>
               <div className="flex flex-col gap-4">
-                <a href="https://docs.newapi.pro/getting-started/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('快速开始')}</a>
-                <a href="https://docs.newapi.pro/installation/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('安装指南')}</a>
-                <a href="https://docs.newapi.pro/api/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">{t('API 文档')}</a>
+                <a href="https://docs.newapi.pro/getting-started/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('快速开始')}</a>
+                <a href="https://docs.newapi.pro/installation/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('安装指南')}</a>
+                <a href="https://docs.newapi.pro/api/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('API 文档')}</a>
               </div>
             </div>
 
             <div className="text-left">
               <p className="!text-semi-color-text-0 font-semibold mb-5">{t('相关项目')}</p>
               <div className="flex flex-col gap-4">
-                <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">One API</a>
-                <a href="https://github.com/novicezk/midjourney-proxy" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">Midjourney-Proxy</a>
-                <a href="https://github.com/Deeptrain-Community/chatnio" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">chatnio</a>
-                <a href="https://github.com/Calcium-Ion/neko-api-key-tool" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">neko-api-key-tool</a>
+                <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">One API</a>
+                <a href="https://github.com/novicezk/midjourney-proxy" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">Midjourney-Proxy</a>
+                <a href="https://github.com/Deeptrain-Community/chatnio" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">chatnio</a>
+                <a href="https://github.com/Calcium-Ion/neko-api-key-tool" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">neko-api-key-tool</a>
               </div>
             </div>
 
             <div className="text-left">
               <p className="!text-semi-color-text-0 font-semibold mb-5">{t('基于New API的项目')}</p>
               <div className="flex flex-col gap-4">
-                <a href="https://github.com/Calcium-Ion/new-api-horizon" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">new-api-horizon</a>
-                {/* <a href="https://github.com/VoAPI/VoAPI" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1 hover:!text-semi-color-primary transition-colors">VoAPI</a> */}
+                <a href="https://github.com/Calcium-Ion/new-api-horizon" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">new-api-horizon</a>
+                {/* <a href="https://github.com/VoAPI/VoAPI" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">VoAPI</a> */}
               </div>
             </div>
           </div>
@@ -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 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 font-medium">One API</a>
+        </div>
       </div>
     </footer>
   ), [logo, systemName, t, currentYear, isDemoSiteMode]);

web/src/i18n/locales/en.json

@@ -1404,8 +1404,13 @@
   "演示站点": "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 ",
+  "MIT许可证": "MIT License",
+  "Apache-2.0协议": "Apache-2.0 License",
+  "本项目根据": "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",
@@ -1531,6 +1536,7 @@
   "关闭公告": "Close Notice",
   "搜索条件": "Search Conditions",
   "加载中...": "Loading...",
+  "正在跳转...": "Redirecting...",
   "暂无公告": "No Notice",
   "操练场": "Playground",
   "欢迎使用，请完成以下设置以开始使用系统": "Welcome to use, please complete the following settings to start using the system",

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,65 @@ 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"
+      >
         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"
+        >
+          NewAPI
+        </a> {t('© {{currentYear}}', { currentYear })} <a
+          href="https://github.com/QuantumNous"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="!text-semi-color-primary"
+        >
+          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"
+        >
+          One API v0.5.4
+        </a> © 2023 <a
+          href="https://github.com/songquanpeng"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="!text-semi-color-primary"
+        >
+          JustSong
+        </a>
       </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"
+        >
+          {t('MIT许可证')}
+        </a>
+        {t('授权，需在遵守')}
+        <a
+          href="https://github.com/QuantumNous/new-api/blob/main/LICENSE"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="!text-semi-color-primary"
+        >
+          {t('Apache-2.0协议')}
+        </a>
+        {t('的前提下使用。')}
       </p>
     </div>
   );

web/src/pages/Channel/EditChannel.js

@@ -846,7 +846,7 @@ const EditChannel = (props) => {
                     className="!rounded-lg font-mono"
                   />
                   <Text
-                    className="text-blue-500 cursor-pointer mt-1 block"
+                    className="!text-semi-color-primary cursor-pointer mt-1 block"
                     onClick={() => handleInputChange('model_mapping', JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2))}
                   >
                     {t('填入模板')}
@@ -940,7 +940,7 @@ const EditChannel = (props) => {
                       className="!rounded-lg font-mono"
                     />
                     <Text
-                      className="text-blue-500 cursor-pointer mt-1 block"
+                      className="!text-semi-color-primary cursor-pointer mt-1 block"
                       onClick={() => handleInputChange('other', JSON.stringify(REGION_EXAMPLE, null, 2))}
                     >
                       {t('填入模板')}
@@ -1062,7 +1062,7 @@ const EditChannel = (props) => {
                   />
                   <div className="flex gap-2 mt-1">
                     <Text
-                      className="text-blue-500 cursor-pointer"
+                      className="!text-semi-color-primary cursor-pointer"
                       onClick={() => {
                         handleInputChange(
                           'setting',
@@ -1073,10 +1073,10 @@ const EditChannel = (props) => {
                       {t('填入模板')}
                     </Text>
                     <Text
-                      className="text-blue-500 cursor-pointer"
+                      className="!text-semi-color-primary cursor-pointer"
                       onClick={() => {
                         window.open(
-                          'https://github.com/Calcium-Ion/new-api/blob/main/docs/channel/other_setting.md',
+                          'https://github.com/QuantumNous/new-api/blob/main/docs/channel/other_setting.md',
                         );
                       }}
                     >
@@ -1146,7 +1146,7 @@ const EditChannel = (props) => {
                     className="!rounded-lg font-mono"
                   />
                   <Text
-                    className="text-blue-500 cursor-pointer mt-1 block"
+                    className="!text-semi-color-primary cursor-pointer mt-1 block"
                     onClick={() => {
                       handleInputChange(
                         'status_code_mapping',

web/src/pages/Chat/index.js

@@ -1,9 +1,11 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTokenKeys } from '../../hooks/useTokenKeys';
-import { Banner, Layout } from '@douyinfe/semi-ui';
+import { Spin } from '@douyinfe/semi-ui';
 import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 const ChatPage = () => {
+  const { t } = useTranslation();
   const { id } = useParams();
   const { keys, serverAddress, isLoading } = useTokenKeys(id);
 
@@ -40,12 +42,17 @@ const ChatPage = () => {
       allow='camera;microphone'
     />
   ) : (
-    <div>
-      <Layout>
-        <Layout.Header>
-          <Banner description={'正在跳转......'} type={'warning'} />
-        </Layout.Header>
-      </Layout>
+    <div className="fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000]">
+      <div className="flex flex-col items-center">
+        <Spin
+          size="large"
+          spinning={true}
+          tip={null}
+        />
+        <span className="whitespace-nowrap mt-2 text-center" style={{ color: 'var(--semi-color-primary)' }}>
+          {t('正在跳转...')}
+        </span>
+      </div>
     </div>
   );
 };