mirror of
https://github.com/linux-do/new-api.git
synced 2025-09-20 17:26:38 +08:00
316 lines
10 KiB
JavaScript
316 lines
10 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Banner, Button, Col, Form, Row } from '@douyinfe/semi-ui';
|
|
import { API, showError, showSuccess } from '../helpers';
|
|
import { marked } from 'marked';
|
|
|
|
const OtherSetting = () => {
|
|
let [inputs, setInputs] = useState({
|
|
Notice: '',
|
|
SystemName: '',
|
|
Logo: '',
|
|
Footer: '',
|
|
About: '',
|
|
HomePageContent: '',
|
|
});
|
|
let [loading, setLoading] = useState(false);
|
|
const [showUpdateModal, setShowUpdateModal] = useState(false);
|
|
const [updateData, setUpdateData] = useState({
|
|
tag_name: '',
|
|
content: '',
|
|
});
|
|
|
|
const updateOption = async (key, value) => {
|
|
setLoading(true);
|
|
const res = await API.put('/api/option/', {
|
|
key,
|
|
value,
|
|
});
|
|
const { success, message } = res.data;
|
|
if (success) {
|
|
setInputs((inputs) => ({ ...inputs, [key]: value }));
|
|
} else {
|
|
showError(message);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const [loadingInput, setLoadingInput] = useState({
|
|
Notice: false,
|
|
SystemName: false,
|
|
Logo: false,
|
|
HomePageContent: false,
|
|
About: false,
|
|
Footer: false,
|
|
});
|
|
const handleInputChange = async (value, e) => {
|
|
const name = e.target.id;
|
|
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
|
};
|
|
|
|
// 通用设置
|
|
const formAPISettingGeneral = useRef();
|
|
// 通用设置 - Notice
|
|
const submitNotice = async () => {
|
|
try {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: true }));
|
|
await updateOption('Notice', inputs.Notice);
|
|
showSuccess('公告已更新');
|
|
} catch (error) {
|
|
console.error('公告更新失败', error);
|
|
showError('公告更新失败');
|
|
} finally {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
|
|
}
|
|
};
|
|
// 个性化设置
|
|
const formAPIPersonalization = useRef();
|
|
// 个性化设置 - SystemName
|
|
const submitSystemName = async () => {
|
|
try {
|
|
setLoadingInput((loadingInput) => ({
|
|
...loadingInput,
|
|
SystemName: true,
|
|
}));
|
|
await updateOption('SystemName', inputs.SystemName);
|
|
showSuccess('系统名称已更新');
|
|
} catch (error) {
|
|
console.error('系统名称更新失败', error);
|
|
showError('系统名称更新失败');
|
|
} finally {
|
|
setLoadingInput((loadingInput) => ({
|
|
...loadingInput,
|
|
SystemName: false,
|
|
}));
|
|
}
|
|
};
|
|
|
|
// 个性化设置 - Logo
|
|
const submitLogo = async () => {
|
|
try {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: true }));
|
|
await updateOption('Logo', inputs.Logo);
|
|
showSuccess('Logo 已更新');
|
|
} catch (error) {
|
|
console.error('Logo 更新失败', error);
|
|
showError('Logo 更新失败');
|
|
} finally {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: false }));
|
|
}
|
|
};
|
|
// 个性化设置 - 首页内容
|
|
const submitOption = async (key) => {
|
|
try {
|
|
setLoadingInput((loadingInput) => ({
|
|
...loadingInput,
|
|
HomePageContent: true,
|
|
}));
|
|
await updateOption(key, inputs[key]);
|
|
showSuccess('首页内容已更新');
|
|
} catch (error) {
|
|
console.error('首页内容更新失败', error);
|
|
showError('首页内容更新失败');
|
|
} finally {
|
|
setLoadingInput((loadingInput) => ({
|
|
...loadingInput,
|
|
HomePageContent: false,
|
|
}));
|
|
}
|
|
};
|
|
// 个性化设置 - 关于
|
|
const submitAbout = async () => {
|
|
try {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, About: true }));
|
|
await updateOption('About', inputs.About);
|
|
showSuccess('关于内容已更新');
|
|
} catch (error) {
|
|
console.error('关于内容更新失败', error);
|
|
showError('关于内容更新失败');
|
|
} finally {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, About: false }));
|
|
}
|
|
};
|
|
// 个性化设置 - 页脚
|
|
const submitFooter = async () => {
|
|
try {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: true }));
|
|
await updateOption('Footer', inputs.Footer);
|
|
showSuccess('页脚内容已更新');
|
|
} catch (error) {
|
|
console.error('页脚内容更新失败', error);
|
|
showError('页脚内容更新失败');
|
|
} finally {
|
|
setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: false }));
|
|
}
|
|
};
|
|
|
|
const openGitHubRelease = () => {
|
|
window.location = 'https://github.com/songquanpeng/one-api/releases/latest';
|
|
};
|
|
|
|
const checkUpdate = async () => {
|
|
const res = await API.get(
|
|
'https://api.github.com/repos/songquanpeng/one-api/releases/latest',
|
|
);
|
|
const { tag_name, body } = res.data;
|
|
if (tag_name === process.env.REACT_APP_VERSION) {
|
|
showSuccess(`已是最新版本:${tag_name}`);
|
|
} else {
|
|
setUpdateData({
|
|
tag_name: tag_name,
|
|
content: marked.parse(body),
|
|
});
|
|
setShowUpdateModal(true);
|
|
}
|
|
};
|
|
const getOptions = async () => {
|
|
const res = await API.get('/api/option/');
|
|
const { success, message, data } = res.data;
|
|
if (success) {
|
|
let newInputs = {};
|
|
data.forEach((item) => {
|
|
if (item.key in inputs) {
|
|
newInputs[item.key] = item.value;
|
|
}
|
|
});
|
|
setInputs(newInputs);
|
|
formAPISettingGeneral.current.setValues(newInputs);
|
|
formAPIPersonalization.current.setValues(newInputs);
|
|
} else {
|
|
showError(message);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getOptions();
|
|
}, []);
|
|
|
|
return (
|
|
<Row>
|
|
<Col span={24}>
|
|
{/* 通用设置 */}
|
|
<Form
|
|
values={inputs}
|
|
getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
|
|
style={{ marginBottom: 15 }}
|
|
>
|
|
<Form.Section text={'通用设置'}>
|
|
<Form.TextArea
|
|
label={'公告'}
|
|
placeholder={'在此输入新的公告内容,支持 Markdown & HTML 代码'}
|
|
field={'Notice'}
|
|
onChange={handleInputChange}
|
|
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
|
|
autosize={{ minRows: 6, maxRows: 12 }}
|
|
/>
|
|
<Button onClick={submitNotice} loading={loadingInput['Notice']}>
|
|
设置公告
|
|
</Button>
|
|
</Form.Section>
|
|
</Form>
|
|
{/* 个性化设置 */}
|
|
<Form
|
|
values={inputs}
|
|
getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
|
|
style={{ marginBottom: 15 }}
|
|
>
|
|
<Form.Section text={'个性化设置'}>
|
|
<Form.Input
|
|
label={'系统名称'}
|
|
placeholder={'在此输入系统名称'}
|
|
field={'SystemName'}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<Button
|
|
onClick={submitSystemName}
|
|
loading={loadingInput['SystemName']}
|
|
>
|
|
设置系统名称
|
|
</Button>
|
|
<Form.Input
|
|
label={'Logo 图片地址'}
|
|
placeholder={'在此输入 Logo 图片地址'}
|
|
field={'Logo'}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<Button onClick={submitLogo} loading={loadingInput['Logo']}>
|
|
设置 Logo
|
|
</Button>
|
|
<Form.TextArea
|
|
label={'首页内容'}
|
|
placeholder={
|
|
'在此输入首页内容,支持 Markdown & HTML 代码,设置后首页的状态信息将不再显示。如果输入的是一个链接,则会使用该链接作为 iframe 的 src 属性,这允许你设置任意网页作为首页。'
|
|
}
|
|
field={'HomePageContent'}
|
|
onChange={handleInputChange}
|
|
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
|
|
autosize={{ minRows: 6, maxRows: 12 }}
|
|
/>
|
|
<Button
|
|
onClick={() => submitOption('HomePageContent')}
|
|
loading={loadingInput['HomePageContent']}
|
|
>
|
|
设置首页内容
|
|
</Button>
|
|
<Form.TextArea
|
|
label={'关于'}
|
|
placeholder={
|
|
'在此输入新的关于内容,支持 Markdown & HTML 代码。如果输入的是一个链接,则会使用该链接作为 iframe 的 src 属性,这允许你设置任意网页作为关于页面。'
|
|
}
|
|
field={'About'}
|
|
onChange={handleInputChange}
|
|
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
|
|
autosize={{ minRows: 6, maxRows: 12 }}
|
|
/>
|
|
<Button onClick={submitAbout} loading={loadingInput['About']}>
|
|
设置关于
|
|
</Button>
|
|
{/* */}
|
|
<Banner
|
|
fullMode={false}
|
|
type='info'
|
|
description='移除 One API 的版权标识必须首先获得授权,项目维护需要花费大量精力,如果本项目对你有意义,请主动支持本项目。'
|
|
closeIcon={null}
|
|
style={{ marginTop: 15 }}
|
|
/>
|
|
<Form.Input
|
|
label={'页脚'}
|
|
placeholder={
|
|
'在此输入新的页脚,留空则使用默认页脚,支持 HTML 代码'
|
|
}
|
|
field={'Footer'}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<Button onClick={submitFooter} loading={loadingInput['Footer']}>
|
|
设置页脚
|
|
</Button>
|
|
</Form.Section>
|
|
</Form>
|
|
</Col>
|
|
{/*<Modal*/}
|
|
{/* onClose={() => setShowUpdateModal(false)}*/}
|
|
{/* onOpen={() => setShowUpdateModal(true)}*/}
|
|
{/* open={showUpdateModal}*/}
|
|
{/*>*/}
|
|
{/* <Modal.Header>新版本:{updateData.tag_name}</Modal.Header>*/}
|
|
{/* <Modal.Content>*/}
|
|
{/* <Modal.Description>*/}
|
|
{/* <div dangerouslySetInnerHTML={{ __html: updateData.content }}></div>*/}
|
|
{/* </Modal.Description>*/}
|
|
{/* </Modal.Content>*/}
|
|
{/* <Modal.Actions>*/}
|
|
{/* <Button onClick={() => setShowUpdateModal(false)}>关闭</Button>*/}
|
|
{/* <Button*/}
|
|
{/* content='详情'*/}
|
|
{/* onClick={() => {*/}
|
|
{/* setShowUpdateModal(false);*/}
|
|
{/* openGitHubRelease();*/}
|
|
{/* }}*/}
|
|
{/* />*/}
|
|
{/* </Modal.Actions>*/}
|
|
{/*</Modal>*/}
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default OtherSetting;
|