mirror of https://github.com/sunface/rust-course
sunface
5 years ago
parent
84444c72c8
commit
a74fbe8581
@ -1,18 +1,9 @@
|
||||
import {Light, Dark} from '../../styles/theme'
|
||||
|
||||
export function modifyVars(model:boolean, primary:string){
|
||||
//window.less.modifyVars(vars)
|
||||
if(model){
|
||||
window.less.modifyVars(Dark(primary))
|
||||
}else{
|
||||
window.less.modifyVars(Light(primary))
|
||||
}
|
||||
}
|
||||
|
||||
// export function modifyModel(model){
|
||||
// // let {dark, light} = theme
|
||||
// // let dark = Dark
|
||||
// // console.log(Dark())
|
||||
// // console.log(Light())
|
||||
|
||||
// }
|
||||
@ -1,106 +0,0 @@
|
||||
import React, {useState} from 'react'
|
||||
import { Button, Form, Input, Icon, message, Spin } from 'antd'
|
||||
import { useHistory} from 'react-router-dom'
|
||||
import style from './index.module.less'
|
||||
import { post } from '@http/index'
|
||||
import { setToken } from '@utils/auth'
|
||||
import storage from '@utils/localStorage'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
|
||||
function FormBox(props) {
|
||||
let { user } = props
|
||||
let history = useHistory()
|
||||
const [btnLoading, setBtnLoading] = useState(false)
|
||||
const { getFieldDecorator } = props.form
|
||||
function handleSubmit(e){
|
||||
e.preventDefault()
|
||||
props.form.validateFields((err, values) => {
|
||||
setBtnLoading(true)
|
||||
post('/api/login',
|
||||
{
|
||||
username:'admin',
|
||||
password: '123456'
|
||||
},
|
||||
function(res){
|
||||
if(res.err === 1){
|
||||
message.error(res.msg)
|
||||
}else{
|
||||
setToken(res.data.token)
|
||||
delete res.data.token
|
||||
storage.set('info', res.data)
|
||||
props.setloading(true)
|
||||
console.log(res.data)
|
||||
user.setInfo(res.data)
|
||||
setTimeout(() => {
|
||||
props.setloading(false)
|
||||
history.push('/home/dashboard')
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
function(err){
|
||||
console.log(err)
|
||||
message.error('ds')
|
||||
},
|
||||
function(){
|
||||
setBtnLoading(false)
|
||||
}
|
||||
)
|
||||
// if (!err) {
|
||||
// history.push("/index");
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form className="login-form">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('username', {
|
||||
initialValue: 'dsa',
|
||||
rules: [{ required: true, message: '用户名不能为空' }]
|
||||
})(
|
||||
<Input
|
||||
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
placeholder="Username"
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('password', {
|
||||
initialValue: 'dsa',
|
||||
rules: [{ required: true, message: '密码不能为空' }]
|
||||
})(
|
||||
<Input.Password
|
||||
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item labelAlign='right' labelCol={{span: 3, offset: 12}}>
|
||||
<Button onClick={handleSubmit} type="primary" shape="round" loading={btnLoading?true:false}>
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const FormBoxWrapper = Form.create({ name: 'normal_login' })(inject('user')(observer(FormBox)))
|
||||
|
||||
let Login = inject('user')(observer(() => {
|
||||
const [loading, setloading] = useState(false)
|
||||
//npm install --save rc-form-hooks
|
||||
// https://www.jianshu.com/p/fc59cb61f7cc
|
||||
return (
|
||||
<div className={style.app}>
|
||||
<Spin spinning={loading}>
|
||||
<div className={style.rectangle}>
|
||||
<FormBoxWrapper setloading={setloading}/>
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
|
||||
export default Login
|
||||
@ -0,0 +1,106 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Button, Form, Input, Icon, message, Spin } from 'antd'
|
||||
import {WrappedFormUtils} from 'antd/lib/form/Form'
|
||||
import { useHistory } from 'react-router-dom'
|
||||
import style from './index.module.less'
|
||||
import { post } from '../../library/utils/http/index'
|
||||
import { setToken } from '../../library/utils/auth'
|
||||
import storage from '../../library/utils/localStorage'
|
||||
import { inject, observer } from 'mobx-react'
|
||||
import { IUser } from '../../store/user'
|
||||
function FormBox(props: { user: IUser, form: WrappedFormUtils }) {
|
||||
const [loading, setloading] = useState(false)
|
||||
let { user } = props
|
||||
let history = useHistory()
|
||||
const [btnLoading, setBtnLoading] = useState(false)
|
||||
const { getFieldDecorator } = props.form
|
||||
function handleSubmit(e: React.FormEvent<HTMLElement>) {
|
||||
e.preventDefault()
|
||||
props.form.validateFields((err: any, values: any) => {
|
||||
setBtnLoading(true)
|
||||
post('/api/login',
|
||||
{
|
||||
username: 'admin',
|
||||
password: '123456'
|
||||
},
|
||||
function (res: any) {
|
||||
if (res.err === 1) {
|
||||
message.error(res.msg)
|
||||
} else {
|
||||
setToken(res.data.token)
|
||||
delete res.data.token
|
||||
storage.set('info', res.data)
|
||||
setloading(true)
|
||||
user.setInfo(res.data)
|
||||
setTimeout(() => {
|
||||
setloading(false)
|
||||
history.push('/home/dashboard')
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
function (err: any) {
|
||||
console.log(err)
|
||||
message.error('ds')
|
||||
},
|
||||
function () {
|
||||
setBtnLoading(false)
|
||||
}
|
||||
)
|
||||
// if (!err) {
|
||||
// history.push("/index");
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Spin spinning={loading}>
|
||||
<Form className="login-form">
|
||||
<Form.Item>
|
||||
{getFieldDecorator('username', {
|
||||
initialValue: 'dsa',
|
||||
rules: [{ required: true, message: '用户名不能为空' }]
|
||||
})(
|
||||
<Input
|
||||
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
placeholder="Username"
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('password', {
|
||||
initialValue: 'dsa',
|
||||
rules: [{ required: true, message: '密码不能为空' }]
|
||||
})(
|
||||
<Input.Password
|
||||
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item labelAlign='right' labelCol={{ span: 3, offset: 12 }}>
|
||||
<Button onClick={handleSubmit} type="primary" shape="round" loading={btnLoading ? true : false}>
|
||||
登录
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const FormBoxWrapper = Form.create({ name: 'normal_login' })(inject('user')(observer(FormBox)))
|
||||
|
||||
let Login = inject('user')(observer(() => {
|
||||
//npm install --save rc-form-hooks
|
||||
// https://www.jianshu.com/p/fc59cb61f7cc
|
||||
return (
|
||||
<div className={style.app}>
|
||||
<div className={style.rectangle}>
|
||||
<FormBoxWrapper />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}))
|
||||
|
||||
export default Login
|
||||
@ -1,14 +0,0 @@
|
||||
/* eslint-disable react-hooks/rules-of-hooks */
|
||||
import React from 'react'
|
||||
import {Responsive, useMediaQuery} from 'react-responsive'
|
||||
|
||||
const Desktop = props => <Responsive {...props} minWidth={768} />
|
||||
const Mobile = props => <Responsive {...props} maxWidth={767} />
|
||||
const isMobile = useMediaQuery({
|
||||
query: '(max-device-width: 991px)'
|
||||
})
|
||||
export {
|
||||
Desktop,
|
||||
Mobile,
|
||||
isMobile
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/* eslint-disable react-hooks/rules-of-hooks */
|
||||
import React from 'react'
|
||||
import {useMediaQuery,MediaQueryProps} from 'react-responsive'
|
||||
import MediaQuery from 'react-responsive'
|
||||
|
||||
const Desktop = (props:MediaQueryProps) => <MediaQuery {...props} minWidth={768} />
|
||||
const Mobile = (props:MediaQueryProps) => <MediaQuery {...props} maxWidth={767} />
|
||||
const isMobile = () => useMediaQuery({
|
||||
query: '(max-device-width: 991px)'
|
||||
})
|
||||
const isDesktop = () => useMediaQuery({
|
||||
query: '(min-device-width: 992px)'
|
||||
})
|
||||
export {
|
||||
Desktop,
|
||||
Mobile,
|
||||
isMobile,
|
||||
isDesktop
|
||||
}
|
||||
@ -1,18 +1,26 @@
|
||||
import { action, observable } from 'mobx'
|
||||
|
||||
type UserInfo = {
|
||||
export interface IUser {
|
||||
address: string,
|
||||
email: string,
|
||||
tel: string,
|
||||
avatar: string
|
||||
avatar: string,
|
||||
setInfo?: any,
|
||||
}
|
||||
class User{
|
||||
@observable info:UserInfo = {address:'',email:'',tel:'',avatar:''}
|
||||
@observable address = ''
|
||||
@observable email = ''
|
||||
@observable tel= ''
|
||||
@observable avatar = ''
|
||||
|
||||
|
||||
@action
|
||||
setInfo = (info:UserInfo) => {
|
||||
this.info = info
|
||||
setInfo = (info:IUser) => {
|
||||
this.address = info.address
|
||||
this.email = info.email
|
||||
this.tel = info.tel
|
||||
this.avatar = info.avatar
|
||||
}
|
||||
}
|
||||
|
||||
export default new User()
|
||||
export let user = new User()
|
||||
@ -1,7 +1,8 @@
|
||||
/* eslint-disable quotes */
|
||||
import {theme} from './index'
|
||||
let colors = require('@ant-design/colors')
|
||||
|
||||
let darkTheme = {
|
||||
let darkTheme:theme = {
|
||||
'@primary-color': '#0A53B0',
|
||||
'@layout-body-background': '#171717',
|
||||
'@background-color-base': '#262626',
|
||||
@ -1,5 +1,6 @@
|
||||
/* eslint-disable quotes */
|
||||
let lightTheme = {
|
||||
import {theme} from './index'
|
||||
let lightTheme:theme = {
|
||||
'@ant-prefix': "ant",
|
||||
'@iconfont-css-prefix': "anticon",
|
||||
'@primary-color': "@blue-6",
|
||||
Loading…
Reference in new issue