From a74fbe85817b3d6ec6e7a69231f83cf7c107807a Mon Sep 17 00:00:00 2001 From: sunface Date: Thu, 16 Jan 2020 17:31:30 +0800 Subject: [PATCH] change some files from js to typescript --- ui/mocks/server.js | 1 - ui/src/components/ConfigProvider/index.tsx | 6 +- ui/src/components/Intl/index.tsx | 3 +- ui/src/components/Languages/index.tsx | 5 +- ui/src/{index.js => index.tsx} | 0 ui/src/layouts/Breadcrumb/index.tsx | 4 +- ui/src/layouts/Drawer/index.tsx | 7 +- ui/src/layouts/Header/index.tsx | 23 +++-- ui/src/layouts/Logo/index.tsx | 3 +- ui/src/library/locale/zh_CN.ts | 4 +- ui/src/library/utils/http/index.ts | 4 +- ui/src/library/utils/modifyVars.ts | 9 -- ui/src/pages/App/index.tsx | 6 +- ui/src/pages/Index/index.tsx | 20 ++-- ui/src/pages/Login/index.jsx | 106 --------------------- ui/src/pages/Login/index.tsx | 106 +++++++++++++++++++++ ui/src/pages/Responsive.js | 14 --- ui/src/pages/Responsive.tsx | 19 ++++ ui/src/store/index.ts | 10 +- ui/src/store/system.ts | 21 +++- ui/src/store/user.ts | 22 +++-- ui/src/styles/common.js | 0 ui/src/styles/theme/{dark.js => dark.ts} | 3 +- ui/src/styles/theme/{index.js => index.ts} | 15 +-- ui/src/styles/theme/{light.js => light.ts} | 3 +- 25 files changed, 220 insertions(+), 194 deletions(-) rename ui/src/{index.js => index.tsx} (100%) delete mode 100644 ui/src/pages/Login/index.jsx create mode 100644 ui/src/pages/Login/index.tsx delete mode 100644 ui/src/pages/Responsive.js create mode 100644 ui/src/pages/Responsive.tsx delete mode 100644 ui/src/styles/common.js rename ui/src/styles/theme/{dark.js => dark.ts} (95%) rename ui/src/styles/theme/{index.js => index.ts} (54%) rename ui/src/styles/theme/{light.js => light.ts} (99%) diff --git a/ui/mocks/server.js b/ui/mocks/server.js index aab93ac8..7b099126 100644 --- a/ui/mocks/server.js +++ b/ui/mocks/server.js @@ -27,7 +27,6 @@ server.post(`${API}/reg`, ({body:{username='', password=''}}, res) => { }) // 响应/mock/login,进行登录验证操作 server.post(`${API}/login`, ({body:{username='', password=''}}, res) => { - console.log(username), (username === 'admin' && password === '123456') ? setTimeout(() => { // 由于本地请求速度较快，不方便loading动效显示利用延时器，模拟真实服务器请求速度 res.jsonp({ diff --git a/ui/src/components/ConfigProvider/index.tsx b/ui/src/components/ConfigProvider/index.tsx index b410ddcb..92494066 100644 --- a/ui/src/components/ConfigProvider/index.tsx +++ b/ui/src/components/ConfigProvider/index.tsx @@ -3,9 +3,9 @@ import { ConfigProvider } from 'antd' import { inject, observer } from 'mobx-react' import zhCN from 'antd/es/locale/zh_CN' import enGB from 'antd/es/locale/en_GB' - -const Config = inject('system')(observer((props:any) =>{ - let {system} = props +import {ISystem} from '../../store/system' +const Config = inject('system')(observer((props:{system:ISystem} & any) =>{ + let {system}:{system:ISystem} = props return ( <> diff --git a/ui/src/components/Intl/index.tsx b/ui/src/components/Intl/index.tsx index 875055c8..5d77977a 100644 --- a/ui/src/components/Intl/index.tsx +++ b/ui/src/components/Intl/index.tsx @@ -3,8 +3,9 @@ import { inject, observer } from 'mobx-react' import { IntlProvider } from 'react-intl' /* react-intl imports */ import locale from '../../library/locale' +import {ISystem} from '../../store/system' -const Intl = inject('system')(observer((props) =>{ +const Intl = inject('system')(observer((props:{system:ISystem} & any) =>{ let {system} = props let messages = locale return ( diff --git a/ui/src/components/Languages/index.tsx b/ui/src/components/Languages/index.tsx index 5e073261..2c2e7a16 100644 --- a/ui/src/components/Languages/index.tsx +++ b/ui/src/components/Languages/index.tsx @@ -2,8 +2,9 @@ import React from 'react' import { Icon } from 'antd' import { inject, observer } from 'mobx-react' import style from './index.module.less' -const Languages = inject('system')(observer((props) =>{ - let {system} = props +import {ISystem} from '../../store/system' +const Languages = inject('system')(observer((props:{system:ISystem} & any) =>{ + let {system}:{system:ISystem} = props const IconFont = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1585712_tvew52du1cn.js' diff --git a/ui/src/index.js b/ui/src/index.tsx similarity index 100% rename from ui/src/index.js rename to ui/src/index.tsx diff --git a/ui/src/layouts/Breadcrumb/index.tsx b/ui/src/layouts/Breadcrumb/index.tsx index 8e91558e..418f4f8d 100644 --- a/ui/src/layouts/Breadcrumb/index.tsx +++ b/ui/src/layouts/Breadcrumb/index.tsx @@ -4,8 +4,8 @@ import { Breadcrumb } from 'antd' import style from './index.module.less' import { inject, observer } from 'mobx-react' import { FormattedMessage as Message } from 'react-intl' - -const BreadcrumbWrapper = inject('system')(observer((props) =>{ +import {ISystem} from '../../store/system' +const BreadcrumbWrapper = inject('system')(observer((props:{system:ISystem}) =>{ let location = useLocation() let pathname = location.pathname.split('/') return ( diff --git a/ui/src/layouts/Drawer/index.tsx b/ui/src/layouts/Drawer/index.tsx index dde4dd21..3954cd95 100644 --- a/ui/src/layouts/Drawer/index.tsx +++ b/ui/src/layouts/Drawer/index.tsx @@ -6,9 +6,10 @@ import { CirclePicker,ColorResult } from 'react-color' import { modifyVars } from '../../library/utils/modifyVars' import Languages from '../../components/Languages' import { FormattedMessage as Message } from 'react-intl' - -const DrawerWrapper = inject('system')(observer((props) =>{ - let {system} = props +import {ISystem} from '../../store/system' +const DrawerWrapper = inject('system')(observer((props:{system:ISystem} & any) =>{ + let {system}:{system:ISystem} = props + let primary = (color:ColorResult)=>{ system.setPrimary(color.hex) modifyVars(system.dark, color.hex) diff --git a/ui/src/layouts/Header/index.tsx b/ui/src/layouts/Header/index.tsx index 6a6702f0..a1aee6c5 100644 --- a/ui/src/layouts/Header/index.tsx +++ b/ui/src/layouts/Header/index.tsx @@ -2,19 +2,18 @@ import React from 'react' import { Layout, Icon, Badge, Avatar, Popover } from 'antd' import { useHistory } from 'react-router-dom' import { inject, observer } from 'mobx-react' -import { useMediaQuery } from 'react-responsive' import { removeToken } from '../../library/utils/auth' import style from './index.module.less' +import {IUser} from '../../store/user' +import {ISystem} from '../../store/system' +import {isMobile} from '../../pages/Responsive' + const { Header } = Layout -const HeaderWrapper = inject('system', 'user')(observer((props) =>{ +const HeaderWrapper = inject('system', 'user')(observer((props:{user:IUser,system:ISystem} & any) =>{ let history = useHistory() - let {system, user} = props - - const isMobile = useMediaQuery({ - query: '(max-device-width: 991px)' - }) - + let {system, user}:{system:ISystem,user:IUser} = props + const onClickLogout = ()=>{ removeToken() history.push('/login') @@ -33,14 +32,14 @@ const HeaderWrapper = inject('system', 'user')(observer((props) =>{ <>
{ - isMobile ? + isMobile() ? <>dsa :
{system.setCollapsed()}} />
-
+
{/* { -
+
- +
diff --git a/ui/src/layouts/Logo/index.tsx b/ui/src/layouts/Logo/index.tsx index 6e7654cc..afd1fd21 100644 --- a/ui/src/layouts/Logo/index.tsx +++ b/ui/src/layouts/Logo/index.tsx @@ -2,8 +2,9 @@ import React from 'react' import { Icon } from 'antd' import style from './index.module.less' import { inject, observer } from 'mobx-react' +import {ISystem} from '../../store/system' -let Logo = inject('system')(observer((props) => { +let Logo = inject('system')(observer((props:{system:ISystem}) => { let {system} = props return(
diff --git a/ui/src/library/locale/zh_CN.ts b/ui/src/library/locale/zh_CN.ts index 504d08c7..24707d78 100644 --- a/ui/src/library/locale/zh_CN.ts +++ b/ui/src/library/locale/zh_CN.ts @@ -1,5 +1,5 @@ -import {localeData} from './index' -const zhCN:localeData = { +import { localeData } from './index' +const zhCN: localeData = { home: '主页', dashboard: '仪表盘', chart: '图表', diff --git a/ui/src/library/utils/http/index.ts b/ui/src/library/utils/http/index.ts index 2d6f0f6b..61c32ffb 100644 --- a/ui/src/library/utils/http/index.ts +++ b/ui/src/library/utils/http/index.ts @@ -125,7 +125,7 @@ axios.interceptors.response.use( * @param {Function} errorBack [请求时失败回调方法] * @param {Function} finallyBack [无论有无异常都会执行回调方法] */ -export async function get(url:string, params:AxiosResponse, successBack = function(res:any){}, errorBack = function(err:any){}, finallyBack = function(){}){ +export async function get(url:string, params:any, successBack = function(res:AxiosResponse){}, errorBack = function(err:any){}, finallyBack = function(){}){ try { const res = await axios.get(url, params) successBack(res.data) @@ -144,7 +144,7 @@ export async function get(url:string, params:AxiosResponse, successBack = functi * @param {Function} errorBack [请求时失败回调方法] * @param {Function} finallyBack [无论有无异常都会执行回调方法] */ -export async function post(url:string, params:AxiosResponse, successBack = function(res:any){}, errorBack = function(err:any){}, finallyBack = function(){}) { +export async function post(url:string, params:any, successBack = function(res:AxiosResponse){}, errorBack = function(err:any){}, finallyBack = function(){}) { try { const res = await axios.post(url, QS.stringify(params)) successBack(res.data) diff --git a/ui/src/library/utils/modifyVars.ts b/ui/src/library/utils/modifyVars.ts index 86ad8e19..397d2c0a 100644 --- a/ui/src/library/utils/modifyVars.ts +++ b/ui/src/library/utils/modifyVars.ts @@ -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()) - -// } \ No newline at end of file diff --git a/ui/src/pages/App/index.tsx b/ui/src/pages/App/index.tsx index 80c9b747..6dce8877 100644 --- a/ui/src/pages/App/index.tsx +++ b/ui/src/pages/App/index.tsx @@ -1,14 +1,12 @@ import React, { useEffect } from 'react' import {Route, Switch, Redirect} from 'react-router-dom' -import { inject, observer } from 'mobx-react' import '@/styles/main.less' import Home from '../../pages/Index' import Login from '../../pages/Login' import ConfigProvider from '../../components/ConfigProvider' import Intl from '../../components/Intl' - -let App = inject('system')(observer((props:any) => { +let App = () => { //npm install --save rc-form-hooks // useEffect(() => { @@ -32,6 +30,6 @@ let App = inject('system')(observer((props:any) => { ) -})) +} export default App \ No newline at end of file diff --git a/ui/src/pages/Index/index.tsx b/ui/src/pages/Index/index.tsx index 2ffa9dca..02bde6a6 100644 --- a/ui/src/pages/Index/index.tsx +++ b/ui/src/pages/Index/index.tsx @@ -1,7 +1,6 @@ import React, { useEffect } from 'react' import { withRouter, useHistory } from 'react-router-dom' import { Layout } from 'antd' -import { useMediaQuery } from 'react-responsive' import style from './index.module.less' import { inject, observer } from 'mobx-react' import MenuWrapper from '../../layouts/Menu' @@ -11,14 +10,13 @@ import HeaderWrapper from '../../layouts/Header' import { getToken } from '../../library/utils/auth' import { isEmpty } from '../../library/utils/validate' import Routers from '../../library/routes' - +import {isDesktop} from '../../pages/Responsive' +import { ISystem } from '../../store/system' + const { Sider } = Layout -let Index = inject('system')(observer((props:any) => { +let Index = inject('system')(observer((props:{system:ISystem}) => { let {system} = props - // const isMobile = useMediaQuery({ - // query: '(max-device-width: 991px)' - // }) let history = useHistory() useEffect(() => { if(isEmpty(getToken())){ @@ -26,19 +24,17 @@ let Index = inject('system')(observer((props:any) => { } return () => {} }) - const isDesktop = useMediaQuery({ - query: '(min-device-width: 992px)' - }) + return ( - {isDesktop && + {isDesktop() && } - + @@ -46,4 +42,4 @@ let Index = inject('system')(observer((props:any) => { ) })) -export default withRouter(Index) \ No newline at end of file +export default withRouter(Index as any) \ No newline at end of file diff --git a/ui/src/pages/Login/index.jsx b/ui/src/pages/Login/index.jsx deleted file mode 100644 index c85f8a4d..00000000 --- a/ui/src/pages/Login/index.jsx +++ /dev/null @@ -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 ( -
-
- - {getFieldDecorator('username', { - initialValue: 'dsa', - rules: [{ required: true, message: '用户名不能为空' }] - })( - } - placeholder="Username" - /> - )} - - - {getFieldDecorator('password', { - initialValue: 'dsa', - rules: [{ required: true, message: '密码不能为空' }] - })( - } - type="password" - placeholder="Password" - /> - )} - - - - -
-
- ) -} -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 ( -
- -
- -
- -
- ) -})) - -export default Login \ No newline at end of file diff --git a/ui/src/pages/Login/index.tsx b/ui/src/pages/Login/index.tsx new file mode 100644 index 00000000..77a820e9 --- /dev/null +++ b/ui/src/pages/Login/index.tsx @@ -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) { + 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 ( +
+ +
+ + {getFieldDecorator('username', { + initialValue: 'dsa', + rules: [{ required: true, message: '用户名不能为空' }] + })( + } + placeholder="Username" + /> + )} + + + {getFieldDecorator('password', { + initialValue: 'dsa', + rules: [{ required: true, message: '密码不能为空' }] + })( + } + type="password" + placeholder="Password" + /> + )} + + + + +
+ +
+ ) +} +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 ( +
+
+ +
+
+ ) +})) + +export default Login \ No newline at end of file diff --git a/ui/src/pages/Responsive.js b/ui/src/pages/Responsive.js deleted file mode 100644 index b0553e90..00000000 --- a/ui/src/pages/Responsive.js +++ /dev/null @@ -1,14 +0,0 @@ -/* eslint-disable react-hooks/rules-of-hooks */ -import React from 'react' -import {Responsive, useMediaQuery} from 'react-responsive' - -const Desktop = props => -const Mobile = props => -const isMobile = useMediaQuery({ - query: '(max-device-width: 991px)' -}) -export { - Desktop, - Mobile, - isMobile -} diff --git a/ui/src/pages/Responsive.tsx b/ui/src/pages/Responsive.tsx new file mode 100644 index 00000000..e11d9896 --- /dev/null +++ b/ui/src/pages/Responsive.tsx @@ -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) => +const Mobile = (props:MediaQueryProps) => +const isMobile = () => useMediaQuery({ + query: '(max-device-width: 991px)' +}) +const isDesktop = () => useMediaQuery({ + query: '(min-device-width: 992px)' +}) +export { + Desktop, + Mobile, + isMobile, + isDesktop +} diff --git a/ui/src/store/index.ts b/ui/src/store/index.ts index 5f4947ef..1a2f104e 100644 --- a/ui/src/store/index.ts +++ b/ui/src/store/index.ts @@ -1,7 +1,11 @@ -import system from './system' -import user from './user' +import {ISystem,system} from './system' +import {IUser,user} from './user' +export interface IStore { + user: IUser, + system: ISystem +} export default { system, user -} \ No newline at end of file +} diff --git a/ui/src/store/system.ts b/ui/src/store/system.ts index bece8405..88836b4e 100644 --- a/ui/src/store/system.ts +++ b/ui/src/store/system.ts @@ -1,5 +1,22 @@ import { observable, action } from 'mobx' +export interface ISystem { + dark: boolean, + collapsed: boolean, + drawer: boolean, + mode: string, + theme: string, + primary: string, + locale: string, + lang: string, + + setDark?:any, + setCollapsed?:any, + setDrawer?:any, + setPrimary?:any, + setLocale?:any, + setLang?:any +} class System{ // constructor() { @@ -43,5 +60,5 @@ class System{ this.lang = lang } } - -export default new System() \ No newline at end of file + +export let system = new System() diff --git a/ui/src/store/user.ts b/ui/src/store/user.ts index 387a0c3e..e088aa54 100644 --- a/ui/src/store/user.ts +++ b/ui/src/store/user.ts @@ -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() \ No newline at end of file + +export let user = new User() \ No newline at end of file diff --git a/ui/src/styles/common.js b/ui/src/styles/common.js deleted file mode 100644 index e69de29b..00000000 diff --git a/ui/src/styles/theme/dark.js b/ui/src/styles/theme/dark.ts similarity index 95% rename from ui/src/styles/theme/dark.js rename to ui/src/styles/theme/dark.ts index a9460b02..5a80533d 100644 --- a/ui/src/styles/theme/dark.js +++ b/ui/src/styles/theme/dark.ts @@ -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', diff --git a/ui/src/styles/theme/index.js b/ui/src/styles/theme/index.ts similarity index 54% rename from ui/src/styles/theme/index.js rename to ui/src/styles/theme/index.ts index c891f13d..3f9d96df 100644 --- a/ui/src/styles/theme/index.js +++ b/ui/src/styles/theme/index.ts @@ -2,19 +2,22 @@ import dark from './dark' import light from './light' -const darkTheme = {} -const lightTheme = {} +export type theme = { + [key:string]:string +} +const darkTheme:theme = {} +const lightTheme:theme = {} -let Light = (primary) => { - Object.keys(light).forEach((key) => { +let Light = (primary:string) => { + Object.keys(light).forEach((key:string) => { lightTheme[`${key}`] = light[key] }) lightTheme['@primary-color'] = primary return lightTheme } -let Dark = (primary) => { - Object.keys(dark).forEach((key) => { +let Dark = (primary:string) => { + Object.keys(dark).forEach((key:string) => { darkTheme[`${key}`] = dark[key] }) darkTheme['@primary-color'] = primary diff --git a/ui/src/styles/theme/light.js b/ui/src/styles/theme/light.ts similarity index 99% rename from ui/src/styles/theme/light.js rename to ui/src/styles/theme/light.ts index ff41aea9..561dae3d 100644 --- a/ui/src/styles/theme/light.js +++ b/ui/src/styles/theme/light.ts @@ -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",