Skip to content

phsl / new-api

Go to a project
Commit a361c5c0 by Calcium-Ion Committed by GitHub
Options

Merge pull request #96 from QuentinHsu/refactor-other-setting 

refactor(OtherSetting): change UI, improve interaction
parents c420eff2 bb45bf2f
Showing with 153 additions and 86 deletions
web/src/components/OtherSetting.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Button, Divider, Form, Grid, Header, Message, Modal } from 'semantic-ui-react'; import { Col, Row , Form, Button, Banner } from '@douyinfe/semi-ui';
import { API, showError, showSuccess } from '../helpers'; import { API, showError, showSuccess } from '../helpers';
import { marked } from 'marked'; import { marked } from 'marked';
const OtherSetting = () => { const OtherSetting = () => {
let [inputs, setInputs] = useState({ let [inputs, setInputs] = useState({
Footer: '',
Notice: '', Notice: '',
About: '',
SystemName: '', SystemName: '',
Logo: '', Logo: '',
Footer: '',
About: '',
HomePageContent: '' HomePageContent: ''
}); });
let [loading, setLoading] = useState(false); let [loading, setLoading] = useState(false);
...@@ -19,25 +19,6 @@ const OtherSetting = () => { ...@@ -19,25 +19,6 @@ const OtherSetting = () => {
content: '' content: ''
}); });
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);
} else {
showError(message);
}
};
useEffect(() => {
getOptions().then();
}, []);
const updateOption = async (key, value) => { const updateOption = async (key, value) => {
setLoading(true); setLoading(true);
...@@ -54,34 +35,106 @@ const OtherSetting = () => { ...@@ -54,34 +35,106 @@ const OtherSetting = () => {
setLoading(false); setLoading(false);
}; };
const handleInputChange = async (e, { name, value }) => { 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 })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
// 通用设置
const formAPISettingGeneral = useRef();
// 通用设置 - Notice
const submitNotice = async () => { const submitNotice = async () => {
try {
setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: true }));
await updateOption('Notice', inputs.Notice); await updateOption('Notice', inputs.Notice);
showSuccess('公告已更新');
} catch (error) {
console.error("公告更新失败", error);
showError("公告更新失败")
} finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
}
}; };
// 个性化设置
const submitFooter = async () => { const formAPIPersonalization = useRef();
await updateOption('Footer', inputs.Footer); // 个性化设置 - SystemName
};
const submitSystemName = async () => { const submitSystemName = async () => {
try {
setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: true }));
await updateOption('SystemName', inputs.SystemName); await updateOption('SystemName', inputs.SystemName);
showSuccess('系统名称已更新');
} catch (error) {
console.error("系统名称更新失败", error);
showError("系统名称更新失败")
} finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, SystemName: false }));
}
}; };
// 个性化设置 - Logo
const submitLogo = async () => { const submitLogo = async () => {
try {
setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: true }));
await updateOption('Logo', inputs.Logo); 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 () => { const submitAbout = async () => {
try {
setLoadingInput((loadingInput) => ({ ...loadingInput, About: true }));
await updateOption('About', inputs.About); await updateOption('About', inputs.About);
showSuccess('关于内容已更新');
} catch (error) {
console.error("关于内容更新失败", error);
showError("关于内容更新失败");
} finally {
setLoadingInput((loadingInput) => ({ ...loadingInput, About: false }));
}
}; };
// 个性化设置 - 页脚
const submitOption = async (key) => { const submitFooter = async () => {
await updateOption(key, inputs[key]); 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 = () => { const openGitHubRelease = () => {
window.location = window.location =
'https://github.com/songquanpeng/one-api/releases/latest'; 'https://github.com/songquanpeng/one-api/releases/latest';
...@@ -102,82 +155,96 @@ const OtherSetting = () => { ...@@ -102,82 +155,96 @@ const OtherSetting = () => {
setShowUpdateModal(true); 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 ( return (
<Grid columns={1}> <Row >
<Grid.Column> <Col span={24}>
<Form loading={loading}> {/* 通用设置 */}
<Header as='h3'>通用设置</Header> <Form values={inputs} getFormApi={formAPI => formAPISettingGeneral.current = formAPI} style={{marginBottom: 15}}>
{/*<Form.Button onClick={checkUpdate}>检查更新</Form.Button>*/} <Form.Section text={'通用设置'}>
<Form.Group widths='equal'>
<Form.TextArea <Form.TextArea
label='公告' label={'公告'}
placeholder='在此输入新的公告内容，支持 Markdown & HTML 代码' placeholder={'在此输入新的公告内容，支持 Markdown & HTML 代码'}
value={inputs.Notice} field={'Notice'}
name='Notice'
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }} style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
/> />
</Form.Group> <Button onClick={submitNotice} loading={loadingInput['Notice']}>设置公告</Button>
<Form.Button onClick={submitNotice}>保存公告</Form.Button> </Form.Section>
<Divider /> </Form>
<Header as='h3'>个性化设置</Header> {/* 个性化设置 */}
<Form.Group widths='equal'> <Form values={inputs} getFormApi={formAPI => formAPIPersonalization.current = formAPI} style={{marginBottom: 15}}>
<Form.Section text={'个性化设置'}>
<Form.Input <Form.Input
label='系统名称' label={'系统名称'}
placeholder='在此输入系统名称' placeholder={'在此输入系统名称'}
value={inputs.SystemName} field={'SystemName'}
name='SystemName'
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> <Button onClick={submitSystemName} loading={loadingInput['SystemName']}>设置系统名称</Button>
<Form.Button onClick={submitSystemName}>设置系统名称</Form.Button>
<Form.Group widths='equal'>
<Form.Input <Form.Input
label='Logo 图片地址' label={'Logo 图片地址'}
placeholder='在此输入 Logo 图片地址' placeholder={'在此输入 Logo 图片地址'}
value={inputs.Logo} field={'Logo'}
name='Logo'
type='url'
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> <Button onClick={submitLogo} loading={loadingInput['Logo']}>设置 Logo</Button>
<Form.Button onClick={submitLogo}>设置 Logo</Form.Button>
<Form.Group widths='equal'>
<Form.TextArea <Form.TextArea
label='首页内容' label={'首页内容'}
placeholder='在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页。' placeholder={'在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页。'}
value={inputs.HomePageContent} field={'HomePageContent'}
name='HomePageContent'
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }} style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
/> />
</Form.Group> <Button onClick={() => submitOption('HomePageContent')} loading={loadingInput['HomePageContent']}>设置首页内容</Button>
<Form.Button onClick={() => submitOption('HomePageContent')}>保存首页内容</Form.Button>
<Form.Group widths='equal'>
<Form.TextArea <Form.TextArea
label='关于' label={'关于'}
placeholder='在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。' placeholder={'在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面。'}
value={inputs.About} field={'About'}
name='About'
onChange={handleInputChange} onChange={handleInputChange}
style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }} style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }}
/> />
</Form.Group> <Button onClick={submitAbout} loading={loadingInput['About']}>设置关于</Button>
<Form.Button onClick={submitAbout}>保存关于</Form.Button> {/* */}
<Message>移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。</Message> <Banner
<Form.Group widths='equal'> fullMode={false}
type="info"
description="移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。"
closeIcon={null}
style={{ marginTop: 15 }}
/>
<Form.Input <Form.Input
label='页脚' label={'页脚'}
placeholder='在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码' placeholder={'在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码'}
value={inputs.Footer} field={'Footer'}
name='Footer'
onChange={handleInputChange} onChange={handleInputChange}
/> />
</Form.Group> <Button onClick={submitFooter} loading={loadingInput['Footer']}>设置页脚</Button>
<Form.Button onClick={submitFooter}>设置页脚</Form.Button> </Form.Section>
</Form> </Form>
</Grid.Column> </Col>
{/*<Modal*/} {/*<Modal*/}
{/* onClose={() => setShowUpdateModal(false)}*/} {/* onClose={() => setShowUpdateModal(false)}*/}
{/* onOpen={() => setShowUpdateModal(true)}*/} {/* onOpen={() => setShowUpdateModal(true)}*/}
...@@ -200,7 +267,7 @@ const OtherSetting = () => { ...@@ -200,7 +267,7 @@ const OtherSetting = () => {
{/* />*/} {/* />*/}
{/* </Modal.Actions>*/} {/* </Modal.Actions>*/}
{/*</Modal>*/} {/*</Modal>*/}
</Grid> </Row>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment