File size: 5,888 Bytes
d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c d145f59 d8e9b2c | 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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | import React, { useState } from 'react';
import { API, isMobile, showError, showSuccess } from '../../helpers';
import {
Button,
Input,
SideSheet,
Space,
Spin,
Typography,
Card,
Tag
} from '@douyinfe/semi-ui';
import {
IconUser,
IconSave,
IconClose,
IconKey,
IconUserAdd,
} from '@douyinfe/semi-icons';
import { useTranslation } from 'react-i18next';
const { Text, Title } = Typography;
const AddUser = (props) => {
const { t } = useTranslation();
const originInputs = {
username: '',
display_name: '',
password: '',
};
const [inputs, setInputs] = useState(originInputs);
const [loading, setLoading] = useState(false);
const { username, display_name, password } = inputs;
const handleInputChange = (name, value) => {
setInputs((inputs) => ({ ...inputs, [name]: value }));
};
const submit = async () => {
setLoading(true);
if (inputs.username === '' || inputs.password === '') {
setLoading(false);
showError(t('用户名和密码不能为空！'));
return;
}
const res = await API.post(`/api/user/`, inputs);
const { success, message } = res.data;
if (success) {
showSuccess(t('用户账户创建成功！'));
setInputs(originInputs);
props.refresh();
props.handleClose();
} else {
showError(message);
}
setLoading(false);
};
const handleCancel = () => {
props.handleClose();
};
return (
<>
<SideSheet
placement={'left'}
title={
<Space>
<Tag color="green" shape="circle">{t('新建')}</Tag>
<Title heading={4} className="m-0">
{t('添加用户')}
</Title>
</Space>
}
headerStyle={{
borderBottom: '1px solid var(--semi-color-border)',
padding: '24px'
}}
bodyStyle={{
backgroundColor: 'var(--semi-color-bg-0)',
padding: '0'
}}
visible={props.visible}
width={isMobile() ? '100%' : 600}
footer={
<div className="flex justify-end bg-white">
<Space>
<Button
theme="solid"
size="large"
className="!rounded-full"
onClick={submit}
icon={<IconSave />}
loading={loading}
>
{t('提交')}
</Button>
<Button
theme="light"
size="large"
className="!rounded-full"
type="primary"
onClick={handleCancel}
icon={<IconClose />}
>
{t('取消')}
</Button>
</Space>
</div>
}
closeIcon={null}
onCancel={() => handleCancel()}
>
<Spin spinning={loading}>
<div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0">
<div className="flex items-center mb-4 p-6 rounded-xl" style={{
background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
position: 'relative'
}}>
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
<div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
</div>
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
<IconUserAdd size="large" style={{ color: '#ffffff' }} />
</div>
<div className="relative">
<Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('用户信息')}</Text>
<div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('创建新用户账户')}</div>
</div>
</div>
<div className="space-y-4">
<div>
<Text strong className="block mb-2">{t('用户名')}</Text>
<Input
placeholder={t('请输入用户名')}
onChange={(value) => handleInputChange('username', value)}
value={username}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconUser />}
showClear
required
/>
</div>
<div>
<Text strong className="block mb-2">{t('显示名称')}</Text>
<Input
placeholder={t('请输入显示名称')}
onChange={(value) => handleInputChange('display_name', value)}
value={display_name}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconUser />}
showClear
/>
</div>
<div>
<Text strong className="block mb-2">{t('密码')}</Text>
<Input
type="password"
placeholder={t('请输入密码')}
onChange={(value) => handleInputChange('password', value)}
value={password}
autoComplete="off"
size="large"
className="!rounded-lg"
prefix={<IconKey />}
required
/>
</div>
</div>
</Card>
</div>
</Spin>
</SideSheet>
</>
);
};
export default AddUser;
|