change some files from js to typescript

ui/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
     "env": {
-        "browser": true,
+        "browser": true, 
         "es6": true
     },
     "extends": [

ui/package.json

@@ -7,14 +7,17 @@
     "@antv/data-set": "^0.10.2",
     "@antv/g2plot": "^0.11.5",
     "@types/jest": "^24.0.25",
-    "@types/node": "^13.1.6",
+    "@types/js-cookie": "^2.2.4",
+    "@types/node": "^13.1.7",
+    "@types/qs": "^6.9.0",
     "@types/react": "^16.9.17",
+    "@types/react-color": "^3.0.1",
     "@types/react-dom": "^16.9.4",
     "@types/react-responsive": "^8.0.2",
     "@types/react-router-dom": "^5.1.2",
     "antd": "3.26.6",
     "antd-dayjs-webpack-plugin": "^0.0.7",
-    "axios": "^0.19.0", 
+    "axios": "^0.19.0",
     "babel-plugin-import": "^1.12.2",
     "bizcharts": "^3.5.6",
     "customize-cra": "^0.9.1",

ui/src/components/ConfigProvider/index.tsx

@@ -4,14 +4,11 @@ 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) =>{
+const Config = inject('system')(observer((props:any) =>{
     let {system} = props
-    let antdLocale = {}
-    antdLocale['zh_CN'] = zhCN
-    antdLocale['en_GB'] = enGB
     return (
         <>
-            <ConfigProvider locale={antdLocale[system.locale]}>
+            <ConfigProvider locale={system.locale=='zh_CN' ? zhCN : enGB}>
                 {props.children}
             </ConfigProvider>
         </>

ui/src/components/Languages/index.module.less

@@ -2,7 +2,7 @@
 
 .languages{
     display: flex;
-    &>div{
+    &>div{ 
         position: relative;
         cursor: pointer;
         box-shadow: 0px 0px 4px 1px rgba(220, 223, 225, 0.5);

ui/src/components/Languages/index.tsx

@@ -2,14 +2,15 @@ import React from 'react'
 import { Icon } from 'antd'
 import { inject, observer } from 'mobx-react'
 import style from './index.module.less'
+import System from '../../store/system'
 const Languages = inject('system')(observer((props) =>{
-    let {system} = props
+    let {system} = props 
     
     const IconFont = Icon.createFromIconfontCN({
         scriptUrl: '//at.alicdn.com/t/font_1585712_tvew52du1cn.js'
     })
 
-    function setLocale(locale){
+    function setLocale(locale:string){
         system.setLocale(locale)
     }
     return (

ui/src/layouts/Content/index.js

@@ -1,8 +1,8 @@
 import React, { Suspense, useState, useEffect } from 'react'
 import { Layout, BackTop } from 'antd'
-import BreadcrumbWrapper from '@layouts/Breadcrumb'
+import BreadcrumbWrapper from '../Breadcrumb'
 import { Route } from 'react-router-dom'
-import { isEmpty } from '@library/utils/validate'
+import { isEmpty } from '../../library/utils/validate'
 const { Content } = Layout
 // import {
 //     TransitionGroup,

ui/src/layouts/Drawer/index.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 import { Drawer, Row, Switch } from 'antd'
 import { inject, observer } from 'mobx-react'
 import style from './index.module.less'
-import { CirclePicker } from 'react-color'
+import { CirclePicker,ColorResult } from 'react-color'
-import { modifyVars } from '@library/utils/modifyVars'
+import { modifyVars } from '../../library/utils/modifyVars'
-import Languages from '@components/Languages'
+import Languages from '../../components/Languages'
 import { FormattedMessage as Message } from 'react-intl' 
 
 const DrawerWrapper = inject('system')(observer((props) =>{
     let {system} = props
-    let primary = (color)=>{
+    let primary = (color:ColorResult)=>{
         system.setPrimary(color.hex)
         modifyVars(system.dark, color.hex)
         // modifyVars({'@primary-color': color.hex})

ui/src/layouts/Menu/index.js

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom'
 import {  Menu, Icon } from 'antd'
 import { Link } from 'react-router-dom'
 import { inject, observer } from 'mobx-react'
-import { isEmpty } from '@library/utils/validate'
+import { isEmpty } from '../../library/utils/validate'
 import style from './index.module.less'
 import { FormattedMessage as Message } from 'react-intl' 
 const { SubMenu } = Menu

ui/src/library/locale/en_US.ts

@@ -1,4 +1,5 @@
-const enUS = {
+import {localeData} from './index' 
+const enUS:localeData = {
     home: 'Home',
     dashboard: 'Dashboard',
     chart: 'Chart',

ui/src/library/locale/index.js

@@ -1,8 +0,0 @@
-
-import zhCN from '@library/locale/zh_CN'     // 中文
-import enUS from '@library/locale/en_US'     // 英文
-
-export default {
-    'en': enUS,
-    'zh': zhCN
-}

ui/src/library/locale/index.ts

@@ -0,0 +1,17 @@
+
+import zhCN from './zh_CN'     // 中文
+import enUS from './en_US'     // 英文
+
+export type localeData = {
+    [key:string]:string
+}
+
+type localeAll = {
+    [key:string]:localeData
+}
+
+const localeAllData:localeAll =  {
+    'en': enUS,
+    'zh': zhCN
+}
+export default localeAllData

ui/src/library/locale/zh_CN.ts

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

ui/src/library/routes/index.ts

@@ -1,10 +1,17 @@
 import React from 'react'
-import Element from '@library/routes/modules/Element'
+import Element from '../routes/modules/Element'
 
-const Dashboard = React.lazy(() => import('@pages/Index/Dashboard'))
+const Dashboard = React.lazy(() => import('../../pages/Index/Dashboard'))
-const Charts = React.lazy(() => import('@pages/Index/Charts'))
+const Charts = React.lazy(() => import('../../pages/Index/Charts'))
 
-const Routers = [
+export type Router = {
+    path: string,
+    title: string,
+    icon: string,
+    component?: any,
+    children?:any
+}
+const Routers:Router[] = [
     {
         path: '/home/dashboard',
         title: 'dashboard',

ui/src/library/routes/modules/Demo.ts

@@ -1,6 +1,6 @@
 import React from 'react'
-const A = React.lazy(() => import('@pages/Index/Demo/A'))
+const A = React.lazy(() => import('../../../pages/Index/Demo/A'))
-const B = React.lazy(() => import('@pages/Index/Demo/B'))
+const B = React.lazy(() => import('../../../pages/Index/Demo/B'))
 
 const Demo = [
     {

ui/src/library/routes/modules/Element.ts

@@ -1,9 +1,9 @@
 import React from 'react'
 
-const Accordion = React.lazy(() => import('@pages/Index/Elements/Accordion'))
+const Accordion = React.lazy(() => import('../../../pages/Index/Elements/Accordion'))
-const Paginations = React.lazy(() => import('@pages/Index/Elements/Paginations'))
+const Paginations = React.lazy(() => import('../../../pages/Index/Elements/Paginations'))
-const DatePickers = React.lazy(() => import('@pages/Index/Elements/DatePickers'))
+const DatePickers = React.lazy(() => import('../../../pages/Index/Elements/DatePickers'))
-const Icons = React.lazy(() => import('@pages/Index/Elements/Icons'))
+const Icons = React.lazy(() => import('../../../pages/Index/Elements/Icons'))
 
 const Demo = [
     {

ui/src/library/utils/auth.ts

@@ -6,10 +6,10 @@ export function getToken() {
     return Cookies.get(TokenKey)
 }
 
-export function setToken(token) {
+export function setToken(token:string) {
     return Cookies.set(TokenKey, token)
 }
 
 export function removeToken() {
     return Cookies.remove(TokenKey)
-}
+} 

ui/src/library/utils/http.ts

@@ -2,11 +2,11 @@ import axios from 'axios'
 
 if (process.env.NODE_ENV === 'production') {
     axios.defaults.baseURL = 'https://www.baidu.com'
-}else{
+}else{ 
     axios.defaults.baseURL = 'https://www.production.com'
-}   
+}  
 
-let loadingInstance = null //这里是loading
+// let loadingInstance = null //这里是loading
 //使用create方法创建axios实例
 export const Service = axios.create({
     timeout: 7000, // 请求超时时间
@@ -21,7 +21,7 @@ Service.interceptors.request.use(config => {
 })
 // 添加响应拦截器
 Service.interceptors.response.use(response => {
-    loadingInstance.close()
+    // loadingInstance.close()
     // console.log(response)
     return response.data
 }, error => {

ui/src/library/utils/http/index.ts

@@ -1,23 +1,27 @@
 import axios from 'axios'
 import {message} from 'antd'
 import QS from 'qs'
+import {AxiosResponse} from 'axios'
 
-const codeMessage = {
+type tCodeMessage = {
-    200: '服务器成功返回请求的数据。',
+    [key:number]:string
-    201: '新建或修改数据成功。',
+}
-    202: '一个请求已经进入后台排队（异步任务）。',
+
-    204: '删除数据成功。',
+const codeMessage:tCodeMessage = {
-    400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+    200:'服务器成功返回请求的数据',
-    401: '用户没有权限（令牌、用户名、密码错误）。',
+    202:'一个请求已经进入后台排队（异步任务）。',
-    403: '用户得到授权，但是访问是被禁止的。',
+    204:'删除数据成功。',
-    404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+    400:'发出的请求有错误，服务器没有进行新建或修改数据的操作。',
-    406: '请求的格式不可得。',
+    401:'用户没有权限（令牌、用户名、密码错误）。',
-    410: '请求的资源被永久删除，且不会再得到的。',
+    403:'用户得到授权，但是访问是被禁止的。',
-    422: '当创建一个对象时，发生一个验证错误。',
+    404:'发出的请求针对的是不存在的记录，服务器没有进行操作。',
-    500: '服务器发生错误，请检查服务器。',
+    406:'请求的格式不可得。',
-    502: '网关错误。',
+    410:'请求的资源被永久删除，且不会再得到的。',
-    503: '服务不可用，服务器暂时过载或维护。',
+    422:'当创建一个对象时，发生一个验证错误。',
-    504: '网关超时。'
+    500:'服务器发生错误，请检查服务器。',
+    502:'网关错误。',
+    503:'服务不可用，服务器暂时过载或维护。',
+    504:'网关超时。'
 }
 
 // 全局的默认值
@@ -121,7 +125,7 @@ axios.interceptors.response.use(
  * @param {Function} errorBack [请求时失败回调方法] 
  * @param {Function} finallyBack [无论有无异常都会执行回调方法] 
  */
-export async function get(url, params, successBack = function(){}, errorBack = function(){}, finallyBack = function(){}){  
+export async function get(url:string, params:AxiosResponse, successBack = function(res:any){}, errorBack = function(err:any){}, finallyBack = function(){}){  
     try {
         const res = await axios.get(url, params)
         successBack(res.data)
@@ -140,7 +144,7 @@ export async function get(url, params, successBack = function(){}, errorBack = f
  * @param {Function} errorBack [请求时失败回调方法] 
  * @param {Function} finallyBack [无论有无异常都会执行回调方法] 
  */
-export async function post(url, params, successBack = function(){}, errorBack = function(){}, finallyBack = function(){}) {    
+export async function post(url:string, params:AxiosResponse, successBack = function(res:any){}, errorBack = function(err:any){}, finallyBack = function(){}) {    
     try {
         const res = await axios.post(url, QS.stringify(params))
         successBack(res.data)

ui/src/library/utils/localStorage.ts

@@ -1,13 +1,13 @@
 let adminKey = 'admin-'
 const storage = {
-    set(key, value){
+    set(key:string, value:any){
         localStorage.setItem(adminKey+key, JSON.stringify(value))
     },
-    get(key){
+    get(key:string){
-        return JSON.parse(localStorage.getItem(adminKey+key))
+        return JSON.parse(localStorage.getItem(adminKey+key)!)
     },
-    remove(key){
+    remove(key:string){
         localStorage.removeItem(adminKey+key)
     }
-}
+} 
 export default storage

ui/src/library/utils/modifyVars.ts

@@ -1,6 +1,6 @@
-import {Light, Dark} from '@styles/theme'
+import {Light, Dark} from '../../styles/theme'
 
-export function modifyVars(model, primary){
+export function modifyVars(model:boolean, primary:string){
     //window.less.modifyVars(vars)
     if(model){
         window.less.modifyVars(Dark(primary))

ui/src/library/utils/validate.ts

@@ -3,7 +3,7 @@
  * @param {*} value 
  * @returns {Boolean}
  */
-export function isEmpty(value){
+export function isEmpty(value:any){
     if(value === null || value === '' || value === 'undefined' || value === undefined || value === 'null' || value.length === 0){
         return true
     } else{

ui/src/pages/Responsive.js

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react'
-import {Responsive, useMediaQuery} from 'react-responsive'
+import {Responsive, useMediaQuery} from 'react-responsive' 
 
 const Desktop = props => <Responsive {...props} minWidth={768} />
 const Mobile = props => <Responsive {...props} maxWidth={767} />

ui/src/serviceWorker.ts

@@ -20,7 +20,7 @@ const isLocalhost = Boolean(
     )
 );
 
-export function register(config) {
+export function register(config:any) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
@@ -54,7 +54,7 @@ export function register(config) {
   }
 }
 
-function registerValidSW(swUrl, config) {
+function registerValidSW(swUrl:string, config:any) {
   navigator.serviceWorker
     .register(swUrl)
     .then(registration => {
@@ -98,7 +98,7 @@ function registerValidSW(swUrl, config) {
     });
 }
 
-function checkValidServiceWorker(swUrl, config) {
+function checkValidServiceWorker(swUrl:string, config:any) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
     .then(response => {

ui/typings/externals.d.ts

@@ -1 +1,6 @@
-declare module '*.less'
+declare module '*.less'
+
+
+declare interface Window {
+    less: any;
+}

ui/yarn.lock

@@ -1714,15 +1714,20 @@
   dependencies:
     jest-diff "^24.3.0"
 
+"@types/js-cookie@^2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.4.tgz#f79720b4755aa197c2e15e982e2f438f5748e348"
+  integrity sha512-WTfSE1Eauak/Nrg6cA9FgPTFvVawejsai6zXoq0QYTQ3mxONeRtGhKxa7wMlUzWWmzrmTeV+rwLjHgsCntdrsA==
+
 "@types/json-schema@^7.0.3":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
   integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
-"@types/node@^13.1.6":
+"@types/node@^13.1.7":
-  version "13.1.6"
+  version "13.1.7"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.6.tgz#076028d0b0400be8105b89a0a55550c86684ffec"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.7.tgz#db51d28b8dfacfe4fb2d0da88f5eb0a2eca00675"
-  integrity sha512-Jg1F+bmxcpENHP23sVKkNuU3uaxPnsBMW0cLjleiikFKomJQbsn0Cqk2yDvQArqzZN6ABfBkZ0To7pQ8sLdWDg==
+  integrity sha512-HU0q9GXazqiKwviVxg9SI/+t/nAsGkvLDkIdxz+ObejG2nX6Si00TeLqHMoS+a/1tjH7a8YpKVQwtgHuMQsldg==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -1739,6 +1744,18 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/qs@^6.9.0":
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.0.tgz#2a5fa918786d07d3725726f7f650527e1cfeaffd"
+  integrity sha512-c4zji5CjWv1tJxIZkz1oUtGcdOlsH3aza28Nqmm+uNDWBRHoMsjooBEN4czZp1V3iXPihE/VRUOBqg+4Xq0W4g==
+
+"@types/react-color@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.1.tgz#5433e2f503ea0e0831cbc6fd0c20f8157d93add0"
+  integrity sha512-J6mYm43Sid9y+OjZ7NDfJ2VVkeeuTPNVImNFITgQNXodHteKfl/t/5pAR5Z9buodZ2tCctsZjgiMlQOpfntakw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@^16.9.4":
   version "16.9.4"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"