Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 3x 3x 8x 8x 8x 8x 8x 3x 3x 3x 3x 8x 3x 8x 1x 1x 1x 1x | import React, { ChangeEvent, ReactElement, useState } from 'react';
import { Input, Space, Tooltip } from 'antd';
import { SERVER_URL } from '@config/base';
import { CheckCircleOutlined, } from '@ant-design/icons';
function setBackendAddr(backendUrl: string): void {
localStorage.setItem('backendUrl', backendUrl);
window.location.assign("/login");
}
const padding = <span style={{ paddingRight: "0.5rem" }} />;
const separate = <span className="footer-separator"> | </span>;
const div = <>{padding}{separate} {padding}</>;
const msg = "直接输入后端地址";
const singleSelector = (protocol: string, host: string, port: number, tenant: string, text: string): ReactElement => {
const linkUrl = `${protocol}://${tenant}.${host}:${port}`;
const hint = `设置后端为 ${linkUrl}`;
return (<Tooltip
title={hint}
placement="bottom"
>
<span
title={hint}
style={{ cursor: "pointer" }}
onClick={(): void => {
setBackendAddr(linkUrl);
}} >
{text}
</span>
{padding}
</Tooltip>);
};
const selector = (protocol: string, host: string, port: number, last?: boolean): ReactElement => {
return (<>
{singleSelector(protocol, host, port, "muyan-server", host.toUpperCase())}
{(last !== true) && div}
</>);
};
// Define the types for the props
interface SetBackendComponentProps {
onSetCallback: () => void;
}
const SetBackendComponent: React.FC<SetBackendComponentProps> = ({ onSetCallback }): ReactElement => {
const [value, setValue] = useState(SERVER_URL);
const onChange = (appSlug: ChangeEvent<HTMLInputElement>): void => {
setValue(appSlug.target.value);
};
const onClick = (): void => {
setBackendAddr(value);
// Call the onSetCallback when the backend URL is set
onSetCallback();
};
return (
<div className="set-front">
{padding}
<Tooltip title={msg}>
<Input
style={{ width: '350px', marginRight: "0.5rem" }}
value={value}
onChange={onChange}
/>
</Tooltip>
{padding}
<Tooltip
title={`设置后端为 ${value}`}
>
<CheckCircleOutlined onClick={onClick} />
</Tooltip>
<br />
<Space
size={4}
style={{
paddingTop: '10px',
margin: 'auto',
textAlign: 'center',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}>
{selector("https", "lowcode.ltd", 443, false)}
{selector("https", "muyan.io", 443, false)}
{selector("https", "muyan.app", 443, true)}
</Space>
</div>
);
};
export default SetBackendComponent;
|