90 lines
2.7 KiB
JavaScript
90 lines
2.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
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 = () => {
|
|
const { t } = useTranslation();
|
|
const [about, setAbout] = useState('');
|
|
const [aboutLoaded, setAboutLoaded] = useState(false);
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
const displayAbout = async () => {
|
|
setAbout(localStorage.getItem('about') || '');
|
|
const res = await API.get('/api/about');
|
|
const { success, message, data } = res.data;
|
|
if (success) {
|
|
let aboutContent = data;
|
|
if (!data.startsWith('https://')) {
|
|
aboutContent = marked.parse(data);
|
|
}
|
|
setAbout(aboutContent);
|
|
localStorage.setItem('about', aboutContent);
|
|
} else {
|
|
showError(message);
|
|
setAbout(t('加载关于内容失败...'));
|
|
}
|
|
setAboutLoaded(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
displayAbout().then();
|
|
}, []);
|
|
|
|
const emptyStyle = {
|
|
padding: '24px'
|
|
};
|
|
|
|
const customDescription = (
|
|
<div style={{ textAlign: 'center' }}>
|
|
<p>{t('可在设置页面设置关于内容，支持 HTML & Markdown')}</p>
|
|
{t('New API项目仓库地址：')}
|
|
<Link to='https://github.com/QuantumNous/new-api' target="_blank">
|
|
https://github.com/QuantumNous/new-api
|
|
</Link>
|
|
<p>
|
|
{t('NewAPI © {{currentYear}} QuantumNous | 基于 One API v0.5.4 © 2023 JustSong。', { currentYear })}
|
|
</p>
|
|
<p>
|
|
{t('本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。')}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{aboutLoaded && about === '' ? (
|
|
<div className="flex justify-center items-center h-screen p-8">
|
|
<Empty
|
|
image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
|
|
darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
|
|
description={t('管理员暂时未设置任何关于内容')}
|
|
style={emptyStyle}
|
|
>
|
|
{customDescription}
|
|
</Empty>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{about.startsWith('https://') ? (
|
|
<iframe
|
|
src={about}
|
|
style={{ width: '100%', height: '100vh', border: 'none' }}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{ fontSize: 'larger' }}
|
|
dangerouslySetInnerHTML={{ __html: about }}
|
|
></div>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default About;
|