系统设置增加依赖代理和镜像设置

This commit is contained in:
whyour
2023-11-25 21:49:33 +08:00
parent 9b7d4cb8fe
commit 3777a4e7b4
13 changed files with 455 additions and 156 deletions
+147 -89
View File
@@ -4,6 +4,15 @@ import { Button, InputNumber, Form, message, Input, Alert } from 'antd';
import config from '@/utils/config';
import { request } from '@/utils/http';
import './index.less';
import Ansi from 'ansi-to-react';
import pick from 'lodash/pick';
const dataMap = {
'dependence-proxy': 'dependenceProxy',
'node-mirror': 'nodeMirror',
'python-mirror': 'pythonMirror',
'linux-mirror': 'linuxMirror',
};
const Dependence = () => {
const [systemConfig, setSystemConfig] = useState<{
@@ -13,6 +22,7 @@ const Dependence = () => {
linuxMirror?: string;
}>();
const [form] = Form.useForm();
const [log, setLog] = useState<string>('');
const getSystemConfig = () => {
request
@@ -27,9 +37,31 @@ const Dependence = () => {
});
};
const updateSystemConfig = () => {
const updateSystemConfigStream = (path: keyof typeof dataMap) => {
setLog('执行中...');
request
.put(`${config.apiPrefix}system/config`, systemConfig)
.put<string>(
`${config.apiPrefix}system/config/${path}`,
pick(systemConfig, dataMap[path]),
{
responseType: 'stream',
},
)
.then((res) => {
setLog(() => res);
})
.catch((error: any) => {
console.log(error);
});
};
const updateSystemConfig = (path: keyof typeof dataMap) => {
setLog('');
request
.put(
`${config.apiPrefix}system/config/${path}`,
pick(systemConfig, dataMap[path]),
)
.then(({ code, data }) => {
if (code === 200) {
message.success(intl.get('更新成功'));
@@ -45,94 +77,120 @@ const Dependence = () => {
}, []);
return (
<Form layout="vertical" form={form}>
<Form.Item
label={intl.get('代理')}
name="proxy"
extra={intl.get('代理与镜像源二选一即可')}
<div className="dependence-config-wrapper">
<Form layout="vertical" form={form}>
<Form.Item
label={intl.get('代理')}
name="proxy"
extra={intl.get('代理与镜像源二选一即可')}
>
<Input.Group compact>
<Input
placeholder={intl.get('代理地址, 支持HTTP(S)/SOCK5, ip:port')}
style={{ width: 330 }}
value={systemConfig?.dependenceProxy}
onChange={(e) => {
setSystemConfig({
...systemConfig,
dependenceProxy: e.target.value,
});
}}
/>
<Button
type="primary"
onClick={() => {
updateSystemConfig('dependence-proxy');
}}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
<Form.Item label={intl.get('Node 软件包镜像源')} name="node">
<Input.Group compact>
<Input
style={{ width: 330 }}
placeholder={intl.get('NPM 镜像源')}
value={systemConfig?.nodeMirror}
onChange={(e) => {
setSystemConfig({
...systemConfig,
nodeMirror: e.target.value,
});
}}
/>
<Button
type="primary"
onClick={() => {
updateSystemConfigStream('node-mirror');
}}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
<Form.Item label={intl.get('Python 软件包镜像源')} name="python">
<Input.Group compact>
<Input
style={{ width: 330 }}
placeholder={intl.get('PyPI 镜像源')}
value={systemConfig?.pythonMirror}
onChange={(e) => {
setSystemConfig({
...systemConfig,
pythonMirror: e.target.value,
});
}}
/>
<Button
type="primary"
onClick={() => {
updateSystemConfig('python-mirror');
}}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
<Form.Item label={intl.get('Linux 软件包镜像源')} name="linux">
<Input.Group compact>
<Input
style={{ width: 330 }}
placeholder={intl.get('alpine linux 镜像源')}
value={systemConfig?.linuxMirror}
onChange={(e) => {
setSystemConfig({
...systemConfig,
linuxMirror: e.target.value,
});
}}
/>
<Button
type="primary"
onClick={() => {
updateSystemConfigStream('linux-mirror');
}}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
</Form>
<pre
style={{
fontFamily: 'Source Code Pro',
zoom: 0.83,
maxHeight: '100%',
overflowY: 'auto'
}}
>
<Input.Group compact>
<Input
placeholder={intl.get('代理地址, 支持HTTP(S)/SOCK5')}
style={{ width: 330 }}
value={systemConfig?.dependenceProxy}
onChange={(e) => {
setSystemConfig({
...systemConfig,
dependenceProxy: e.target.value,
});
}}
/>
<Button
type="primary"
onClick={updateSystemConfig}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
<Form.Item label={intl.get('Node 软件包镜像源')} name="node">
<Input.Group compact>
<Input
style={{ width: 330 }}
placeholder={intl.get('NPM 镜像源')}
value={systemConfig?.nodeMirror}
onChange={(e) => {
setSystemConfig({ ...systemConfig, nodeMirror: e.target.value });
}}
/>
<Button
type="primary"
onClick={updateSystemConfig}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
<Form.Item label={intl.get('Python 软件包镜像源')} name="python">
<Input.Group compact>
<Input
style={{ width: 330 }}
placeholder={intl.get('PyPI 镜像源')}
value={systemConfig?.pythonMirror}
onChange={(e) => {
setSystemConfig({
...systemConfig,
pythonMirror: e.target.value,
});
}}
/>
<Button
type="primary"
onClick={updateSystemConfig}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
<Form.Item label={intl.get('Linux 软件包镜像源')} name="linux">
<Input.Group compact>
<Input
style={{ width: 330 }}
placeholder={intl.get('alpine linux 镜像源')}
value={systemConfig?.linuxMirror}
onChange={(e) => {
setSystemConfig({ ...systemConfig, linuxMirror: e.target.value });
}}
/>
<Button
type="primary"
onClick={updateSystemConfig}
style={{ width: 84 }}
>
{intl.get('确认')}
</Button>
</Input.Group>
</Form.Item>
</Form>
<Ansi>{log}</Ansi>
</pre>
</div>
);
};