143 lines
6.9 KiB
JavaScript
143 lines
6.9 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
||
import { Space, Switch, Alert, Typography, Form, Input, Radio, Tag } from 'antd';
|
||
import Styles from './web.module.less';
|
||
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
||
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
|
||
const { TextArea } = Input;
|
||
const { Text } = Typography;
|
||
export default function Email(props) {
|
||
const { passport, t, changeEnabled, updateConfig } = props;
|
||
const { id, type, enabled, stateColor } = passport;
|
||
const config = passport.config || {};
|
||
const [subject, setSubject] = useState(config?.subject || '');
|
||
const [eContentType, setEContentType] = useState('text');
|
||
const [text, setText] = useState(config?.text || '');
|
||
const [html, setHtml] = useState(config?.html || '');
|
||
const [emailCodeDuration, setEmailCodeDuration] = useState(config?.codeDuration || '');
|
||
const [emailDigit, setEmailDigit] = useState(config?.digit || '');
|
||
// editor 实例
|
||
const [editor, setEditor] = useState(null); // TS 语法
|
||
// 工具栏配置
|
||
const toolbarConfig = {}; // TS 语法
|
||
// 编辑器配置
|
||
const editorConfig = {
|
||
autoFocus: false,
|
||
placeholder: '请输入内容...',
|
||
};
|
||
// 及时销毁 editor
|
||
useEffect(() => {
|
||
return () => {
|
||
if (editor == null)
|
||
return;
|
||
editor.destroy();
|
||
setEditor(null);
|
||
};
|
||
}, [editor]);
|
||
useEffect(() => {
|
||
setSubject(config?.subject || '');
|
||
setText(config?.text || '');
|
||
setHtml(config?.html || '');
|
||
setEmailCodeDuration(config?.codeDuration || '');
|
||
setEmailDigit(config?.digit || '');
|
||
if (config?.html) {
|
||
setEContentType('html');
|
||
}
|
||
else {
|
||
setEContentType('text');
|
||
}
|
||
}, [config]);
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}}/>
|
||
</div>
|
||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
||
<Form.Item label="账号">
|
||
<Input type="text" value={config.account} disabled={true}/>
|
||
</Form.Item>
|
||
</Form>
|
||
{enabled &&
|
||
<div>
|
||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
||
<Form.Item label="邮件主题">
|
||
<Input placeholder="请输入邮件主题" type="text" value={subject} onChange={(e) => {
|
||
setSubject(e.target.value);
|
||
}} onBlur={() => {
|
||
if (subject !== config?.subject) {
|
||
updateConfig(id, config, 'subject', subject);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="邮件内容模板">
|
||
<>
|
||
<Space size={8} style={{ marginBottom: 8 }}>
|
||
<Radio.Group onChange={(e) => setEContentType(e.target.value)} value={eContentType}>
|
||
<Radio.Button value="text">纯文本</Radio.Button>
|
||
<Radio.Button value="html">HTML</Radio.Button>
|
||
</Radio.Group>
|
||
<Alert message={<div>
|
||
<span>请使用</span>
|
||
<Text mark> ${'{code}'}</Text>
|
||
<span>作为验证码占位符，</span>
|
||
<Text mark> ${'{duration}'}</Text>
|
||
<span>作为验证码有效时间占位符(包含单位分钟)。</span>
|
||
</div>} type="info"/>
|
||
</Space>
|
||
{eContentType === 'text' ? (<TextArea rows={6} value={text} onChange={(e) => {
|
||
setText(e.target.value);
|
||
}} onBlur={() => {
|
||
if (text !== config?.text) {
|
||
updateConfig(id, config, 'text', text);
|
||
}
|
||
}}/>) : (<div style={{ border: '1px solid #ccc' }}>
|
||
<Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" style={{ borderBottom: '1px solid #ccc' }}/>
|
||
<Editor defaultConfig={editorConfig} value={html} onCreated={setEditor} onChange={editor => {
|
||
setHtml(editor.getHtml());
|
||
updateConfig(id, config, 'html', editor.getHtml());
|
||
}} mode="default" style={{ height: '260px', overflowY: 'hidden' }}/>
|
||
</div>)}
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="验证码有效时间" tooltip="邮箱验证码发送有效时间，不填为5分钟">
|
||
<Input placeholder="请输入验证码有效时间" type="number" value={emailCodeDuration} min={0} onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val) {
|
||
setEmailCodeDuration(Number(val));
|
||
}
|
||
else {
|
||
setEmailCodeDuration('');
|
||
}
|
||
}} onBlur={() => {
|
||
if (Number(emailCodeDuration) > 0) {
|
||
updateConfig(id, config, 'codeDuration', emailCodeDuration);
|
||
}
|
||
else {
|
||
updateConfig(id, config, 'codeDuration', undefined);
|
||
}
|
||
}} suffix="分钟"/>
|
||
</Form.Item>
|
||
<Form.Item label="验证码位数" tooltip="邮箱验证码位数，可设置4~8位">
|
||
<Input placeholder="请输入验证码有效位数" type="number" value={emailDigit} min={4} max={8} onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val) {
|
||
setEmailDigit(Number(val));
|
||
}
|
||
else {
|
||
setEmailDigit('');
|
||
}
|
||
}} onBlur={() => {
|
||
if (Number(emailDigit) > 0) {
|
||
updateConfig(id, config, 'digit', emailDigit);
|
||
}
|
||
else {
|
||
updateConfig(id, config, 'digit', undefined);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
}
|