change some files from js to typescript

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({

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'
-
+import {ISystem} from '../../store/system'
-const Config = inject('system')(observer((props:any) =>{
+const Config = inject('system')(observer((props:{system:ISystem} & any) =>{
-    let {system} = props
+    let {system}:{system:ISystem} = props
     return (
         <>
             <ConfigProvider locale={system.locale==='zh_CN' ? zhCN : enGB}>

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 (

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) =>{
+import {ISystem} from '../../store/system'
-    let {system} = props 
+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'

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' 
-
+import {ISystem} from '../../store/system'
-const BreadcrumbWrapper = inject('system')(observer((props) =>{ 
+const BreadcrumbWrapper = inject('system')(observer((props:{system:ISystem}) =>{ 
     let location = useLocation()
     let pathname = location.pathname.split('/')
     return (

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' 
+import {ISystem} from '../../store/system'
+const DrawerWrapper = inject('system')(observer((props:{system:ISystem} & any) =>{
+    let {system}:{system:ISystem} = props
     
-const DrawerWrapper = inject('system')(observer((props) =>{
-    let {system} = props
     let primary = (color:ColorResult)=>{
         system.setPrimary(color.hex)
         modifyVars(system.dark, color.hex)

ui/src/layouts/Header/index.tsx

@@ -2,18 +2,17 @@ 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
+    let {system, user}:{system:ISystem,user:IUser} = props
-
-    const isMobile = useMediaQuery({
-        query: '(max-device-width: 991px)'
-    })
     
     const onClickLogout = ()=>{
         removeToken()
@@ -33,7 +32,7 @@ const HeaderWrapper = inject('system', 'user')(observer((props) =>{
         <>
             <Header>
                 {
-                    isMobile ? 
+                    isMobile() ? 
                         <>dsa</>
                         :
                         <div className={style.header}>
@@ -67,7 +66,7 @@ const HeaderWrapper = inject('system', 'user')(observer((props) =>{
                                 <div>
                                     <Popover className={`${style.pointer}`} placement="bottomRight" content={userPopover}>
                                         <Badge dot>
-                                            <Avatar icon="user" src={user.info.avatar}/>
+                                            <Avatar icon="user" src={user.avatar}/>
                                         </Badge>
                                     </Popover>
                                 </div>

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(
         <div className={style.logo}>

ui/src/library/locale/zh_CN.ts

@@ -1,5 +1,5 @@
-import {localeData} from './index' 
+import { localeData } from './index'
-const zhCN:localeData = {
+const zhCN: localeData = {
     home: '主页',
     dashboard: '仪表盘',
     chart: '图表',

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)

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())
-    
-// }

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 = () => {
-let App = inject('system')(observer((props:any) => {
     //npm install --save rc-form-hooks
     // 
     useEffect(() => {
@@ -32,6 +30,6 @@ let App = inject('system')(observer((props:any) => {
             
         </>
     )
-}))
+}
 
 export default App

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,13 +24,11 @@ let Index = inject('system')(observer((props:any) => {
         }
         return () => {}
     })
-    const isDesktop = useMediaQuery({
+
-        query: '(min-device-width: 992px)'
-    })
    
     return (
         <Layout className={`${style.app} ${system.dark?style.dark:''}`}>
-            {isDesktop && 
+            {isDesktop() && 
                 <Sider collapsed={system.collapsed}>
                     <MenuWrapper routers={Routers}/>
                 </Sider>
@@ -46,4 +42,4 @@ let Index = inject('system')(observer((props:any) => {
     )
 }))
 
-export default withRouter(Index)
+export default withRouter(Index as any)

ui/src/pages/Login/index.jsx

@@ -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

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<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

ui/src/pages/Responsive.js

@@ -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
-}

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) => <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
+}

ui/src/store/index.ts

@@ -1,6 +1,10 @@
-import system from './system'
+import {ISystem,system} from './system'
-import user from './user'
+import {IUser,user} from './user'
 
+export interface IStore {
+    user: IUser,
+    system: ISystem
+} 
 export default {
     system,
     user

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() {
         
@@ -44,4 +61,4 @@ class System{
     }
 }
 
-export default new System()
+export let system = new System()

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) => {
+    setInfo = (info:IUser) => {
-        this.info = info
+        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()

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',

ui/src/styles/theme/index.ts

@@ -2,19 +2,22 @@
 import dark from './dark'
 import light from './light'
 
-const darkTheme = {}
+export type theme = {
-const lightTheme = {}
+    [key:string]:string
+}
+const darkTheme:theme = {}
+const lightTheme:theme = {}
 
-let Light = (primary) => {
+let Light = (primary:string) => {
-    Object.keys(light).forEach((key) => {
+    Object.keys(light).forEach((key:string) => {
         lightTheme[`${key}`] = light[key]
     })
     lightTheme['@primary-color'] = primary
     return lightTheme
 }
 
-let Dark = (primary) => {
+let Dark = (primary:string) => {
-    Object.keys(dark).forEach((key) => {
+    Object.keys(dark).forEach((key:string) => {
         darkTheme[`${key}`] = dark[key]
     })
     darkTheme['@primary-color'] = primary

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",