import React , { Fragment , useEffect , useState } from 'react' ; import { Button , Row , Input , Form , message , Typography , Steps , Select , } from 'antd' ; import config from '@/utils/config' ; import { history } from 'umi' ; import styles from './index.less' ; import { request } from '@/utils/http' ; const FormItem = Form . Item ; const { Step } = Steps ; const { Option } = Select ; const { Link } = Typography ; const Initialization = ( ) => { const [ loading , setLoading ] = useState ( false ) ; const [ current , setCurrent ] = React . useState ( 0 ) ; const [ fields , setFields ] = useState < any [ ] > ( [ ] ) ; const next = ( ) => { setCurrent ( current + 1 ) ; } ; const prev = ( ) => { setCurrent ( current - 1 ) ; } ; const submitAccountSetting = ( values ) => { setLoading ( true ) ; request . put ( `${ config . apiPrefix }user/init` , { data : { username : values . username , password : values . password , } , } ) . then ( ( data ) => { if ( data . code === 200 ) { next ( ) ; } else { message . error ( data . message ) ; } } ) . finally ( ( ) => setLoading ( false ) ) ; } ; const submitNotification = ( values ) => { setLoading ( true ) ; request . put ( `${ config . apiPrefix }user/notification/init` , { data : { ... values , } , } ) . then ( ( _data ) => { if ( _data && _data . code === 200 ) { next ( ) ; } else { message . error ( _data . message ) ; } } ) . finally ( ( ) => setLoading ( false ) ) ; } ; const notificationModeChange = ( value ) => { const _fields = ( config . notificationModeMap as any ) [ value ] ; setFields ( _fields || [ ] ) ; } ; useEffect ( ( ) => { localStorage . removeItem ( config . authKey ) ; } , [ ] ) ; const steps = [ { title : '欢迎使用' , content : ( < div className = { styles . top } style = { { marginTop : 100 } } > < div className = { styles . header } > < span className = { styles . title } > 欢迎使用青龙控制面板 < /span> < /div> < div className = { styles . action } > < Button type = "primary" onClick = { ( ) => { next ( ) ; } } > 开始安装 < /Button> < /div> < /div>), } , { title : '通知设置' , content : ( < Form onFinish = { submitNotification } layout = "vertical" > < Form . Item label = "通知方式" name = "type" rules = { [ { required : true , message : '请选择通知方式' } ] } style = { { maxWidth : 350 } } > < Select onChange = { notificationModeChange } placeholder = "请选择通知方式" > { config . notificationModes . filter ( ( x ) => x . value !== 'closed' ) . map ( ( x ) => ( < Option value = { x . value } > { x . label } < /Option>))} < /Select> < /Form.Item> { fields . map ( ( x ) => ( < Form . Item label = { x . label } name = { x . label } extra = { x . tip } rules = { [ { required : x . required } ] } style = { { maxWidth : 400 } } > < Input . TextArea autoSize = { true } placeholder = { `请输入${ x . label }` } / > < /Form.Item>))} < Button type = "primary" htmlType = "submit" loading = { loading } > 保存 < /Button> < Button type = "link" htmlType = "button" onClick = { ( ) => next ( ) } > 跳过 < /Button> < /Form>), } , { title : '账户设置' , content : ( < Form onFinish = { submitAccountSetting } layout = "vertical" > < Form . Item label = "用户名" name = "username" rules = { [ { required : true } ] } style = { { maxWidth : 350 } } > < Input placeholder = "用户名" / > < /Form.Item> < Form . Item label = "密码" name = "password" rules = { [ { required : true } , { pattern : /^(?!admin$).*$/ , message : '密码不能为admin' , } , ] } hasFeedback style = { { maxWidth : 350 } } > < Input type = "password" placeholder = "密码" / > < /Form.Item> < Form . Item name = "confirm" label = "确认密码" dependencies = { [ 'password' ] } hasFeedback style = { { maxWidth : 350 } } rules = { [ { required : true , } , ( { getFieldValue } ) => ( { validator ( _ , value ) { if ( ! value || getFieldValue ( 'password' ) === value ) { return Promise . resolve ( ) ; } return Promise . reject ( new Error ( '您输入的两个密码不匹配！' ) ) ; } , } ) , ] } > < Input . Password placeholder = "确认密码" / > < /Form.Item> < Button type = "primary" htmlType = "submit" loading = { loading } > 提交 < /Button> < /Form>), } , { title : '完成安装' , content : ( < div className = { styles . top } style = { { marginTop : 80 } } > < div className = { styles . header } > < span className = { styles . title } > 恭喜安装完成 ！ < /span> < Link href = "https://github.com/whyour/qinglong" target = "_blank" > Github < /Link> < Link href = "https://t.me/jiao_long" target = "_blank" > Telegram频道 < /Link> < /div> < div style = { { marginTop : 16 } } > < Button type = "primary" onClick = { ( ) => { history . push ( '/login' ) ; } } > 去登录 < /Button> < /div> < /div>), } , ] ; return ( < div className = { styles . container } > < div className = { styles . top } > < div className = { styles . header } > < img alt = "logo" className = { styles . logo } src = "https://pic.imgdb.cn/item/61acd0dd2ab3f51d912b1986.png" / > < span className = { styles . title } > 初始化配置 < /span> < /div> < /div> < div className = { styles . main } > < Steps current = { current } direction = "vertical" size = "small" className = { styles [ 'ant-steps' ] } > { steps . map ( ( item ) => ( < Step key = { item . title } title = { item . title } / > ) ) } < /Steps> < div className = { styles [ 'steps-container' ] } > { steps [ current ] . content } < /div> < /div> < /div>); } ; export default Initialization ;