-
Notifications
You must be signed in to change notification settings - Fork 63
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
54306e5
commit 8562c7f
Showing
9 changed files
with
232 additions
and
106 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { Button, Form, Grid, Modal } from 'semantic-ui-react'; | ||
| import { API, showError, showSuccess } from '../helpers'; | ||
| import { marked } from 'marked'; | ||
|
|
||
| const OtherSetting = () => { | ||
| let [inputs, setInputs] = useState({ | ||
| Footer: '', | ||
| Notice: '', | ||
| About: '' | ||
| }); | ||
| let originInputs = {}; | ||
| let [loading, setLoading] = useState(false); | ||
| const [showUpdateModal, setShowUpdateModal] = useState(false); | ||
| const [updateData, setUpdateData] = useState({ | ||
| tag_name: '', | ||
| 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); | ||
| originInputs = newInputs; | ||
| } else { | ||
| showError(message); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| getOptions().then(); | ||
| }, []); | ||
|
|
||
| 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 handleInputChange = async (e, { name, value }) => { | ||
| setInputs((inputs) => ({ ...inputs, [name]: value })); | ||
| }; | ||
|
|
||
| const submitNotice = async () => { | ||
| await updateOption('Notice', inputs.Notice); | ||
| }; | ||
|
|
||
| const submitFooter = async () => { | ||
| await updateOption('Footer', inputs.Footer); | ||
| }; | ||
|
|
||
| const submitAbout = async () => { | ||
| await updateOption('About', inputs.About); | ||
| }; | ||
|
|
||
| const openGitHubRelease = () => { | ||
| window.location = | ||
| 'https://github.com/songquanpeng/gin-template/releases/latest'; | ||
| }; | ||
|
|
||
| const checkUpdate = async () => { | ||
| const res = await API.get( | ||
| 'https://api.github.com/repos/songquanpeng/gin-template/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); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Grid columns={1}> | ||
| <Grid.Column> | ||
| <Form loading={loading}> | ||
| <Form.Button onClick={checkUpdate}>检查更新</Form.Button> | ||
| <Form.Group widths='equal'> | ||
| <Form.TextArea | ||
| label='公告' | ||
| placeholder='在此输入新的公告内容' | ||
| value={inputs.Notice} | ||
| name='Notice' | ||
| onChange={handleInputChange} | ||
| style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }} | ||
| /> | ||
| </Form.Group> | ||
| <Form.Button onClick={submitNotice}>保存公告</Form.Button> | ||
| <Form.Group widths='equal'> | ||
| <Form.TextArea | ||
| label='关于' | ||
| placeholder='在此输入新的关于内容，支持 Markdown & HTML 代码' | ||
| value={inputs.About} | ||
| name='About' | ||
| onChange={handleInputChange} | ||
| style={{ minHeight: 150, fontFamily: 'JetBrains Mono, Consolas' }} | ||
| /> | ||
| </Form.Group> | ||
| <Form.Button onClick={submitAbout}>保存关于</Form.Button> | ||
| <Form.Group widths='equal'> | ||
| <Form.Input | ||
| label='页脚' | ||
| placeholder='在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码' | ||
| value={inputs.Footer} | ||
| name='Footer' | ||
| onChange={handleInputChange} | ||
| /> | ||
| </Form.Group> | ||
| <Form.Button onClick={submitFooter}> | ||
| 设置页脚 | ||
| </Form.Button> | ||
| </Form> | ||
| </Grid.Column> | ||
| <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> | ||
| </Grid> | ||
| ); | ||
| }; | ||
|
|
||
| export default OtherSetting; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,47 @@ | ||
| import React from 'react'; | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { Header, Segment } from 'semantic-ui-react'; | ||
| import { API, showError } from '../../helpers'; | ||
| import { marked } from 'marked'; | ||
|
|
||
| const About = () => { | ||
| const [about, setAbout] = useState(''); | ||
|
|
||
| const displayAbout = async () => { | ||
| const res = await API.get('/api/about'); | ||
| const { success, message, data } = res.data; | ||
| if (success) { | ||
| let HTMLAbout = marked.parse(data); | ||
| localStorage.setItem('about', HTMLAbout); | ||
| setAbout(HTMLAbout); | ||
| } else { | ||
| showError(message); | ||
| setAbout('加载关于内容失败...'); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| displayAbout().then(); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <Segment> | ||
| { | ||
| about === '' ? <> | ||
| <Header as='h3'>关于</Header> | ||
| <p>可在设置页面设置关于内容，支持 HTML & Markdown</p> | ||
| 项目仓库地址： | ||
| <a href="https://github.com/songquanpeng/gin-template"> | ||
| https://github.com/songquanpeng/gin-template | ||
| </a> | ||
| </> : <> | ||
| <div dangerouslySetInnerHTML={{ __html: about}}></div> | ||
| </> | ||
| } | ||
| </Segment> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const About = () => ( | ||
| <> | ||
| <Segment> | ||
| <Header as="h3">关于</Header> | ||
| GitHub:{' '} | ||
| <a href="https://github.com/songquanpeng/gin-template"> | ||
| https://github.com/songquanpeng/gin-template | ||
| </a> | ||
| </Segment> | ||
| </> | ||
| ); | ||
|
|
||
| export default About; |
Oops, something went wrong.