diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js index a18aa60f..58b05c83 100644 --- a/ui/.eslintrc.js +++ b/ui/.eslintrc.js @@ -1,6 +1,6 @@ module.exports = { "env": { - "browser": true, + "browser": true, "es6": true }, "extends": [ diff --git a/ui/package.json b/ui/package.json index f0ce37ce..6ab606bd 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/components/ConfigProvider/index.js b/ui/src/components/ConfigProvider/index.tsx similarity index 59% rename from ui/src/components/ConfigProvider/index.js rename to ui/src/components/ConfigProvider/index.tsx index ff56ce53..36fbeccd 100644 --- a/ui/src/components/ConfigProvider/index.js +++ b/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 ( <> - + {props.children} diff --git a/ui/src/components/Intl/index.js b/ui/src/components/Intl/index.tsx similarity index 100% rename from ui/src/components/Intl/index.js rename to ui/src/components/Intl/index.tsx diff --git a/ui/src/components/Languages/index.module.less b/ui/src/components/Languages/index.module.less index 432082a8..3a1118f6 100644 --- a/ui/src/components/Languages/index.module.less +++ b/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); diff --git a/ui/src/components/Languages/index.js b/ui/src/components/Languages/index.tsx similarity index 88% rename from ui/src/components/Languages/index.js rename to ui/src/components/Languages/index.tsx index 4534fe09..84e7abe8 100644 --- a/ui/src/components/Languages/index.js +++ b/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 ( diff --git a/ui/src/layouts/Breadcrumb/index.js b/ui/src/layouts/Breadcrumb/index.tsx similarity index 100% rename from ui/src/layouts/Breadcrumb/index.js rename to ui/src/layouts/Breadcrumb/index.tsx diff --git a/ui/src/layouts/Content/index.js b/ui/src/layouts/Content/index.js index a0a90ab1..39ec005d 100644 --- a/ui/src/layouts/Content/index.js +++ b/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, diff --git a/ui/src/layouts/Drawer/index.js b/ui/src/layouts/Drawer/index.tsx similarity index 88% rename from ui/src/layouts/Drawer/index.js rename to ui/src/layouts/Drawer/index.tsx index 39d9acd7..dde4dd21 100644 --- a/ui/src/layouts/Drawer/index.js +++ b/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 { modifyVars } from '@library/utils/modifyVars' -import Languages from '@components/Languages' +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 - let primary = (color)=>{ + let primary = (color:ColorResult)=>{ system.setPrimary(color.hex) modifyVars(system.dark, color.hex) // modifyVars({'@primary-color': color.hex}) diff --git a/ui/src/layouts/Logo/index.js b/ui/src/layouts/Logo/index.tsx similarity index 100% rename from ui/src/layouts/Logo/index.js rename to ui/src/layouts/Logo/index.tsx diff --git a/ui/src/layouts/Menu/index.js b/ui/src/layouts/Menu/index.js index 9bb8887f..2741f6a0 100644 --- a/ui/src/layouts/Menu/index.js +++ b/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 diff --git a/ui/src/library/locale/en_US.js b/ui/src/library/locale/en_US.ts similarity index 79% rename from ui/src/library/locale/en_US.js rename to ui/src/library/locale/en_US.ts index 3655f9e3..caa48eb5 100644 --- a/ui/src/library/locale/en_US.js +++ b/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', diff --git a/ui/src/library/locale/index.js b/ui/src/library/locale/index.js deleted file mode 100644 index 8d89bf97..00000000 --- a/ui/src/library/locale/index.js +++ /dev/null @@ -1,8 +0,0 @@ - -import zhCN from '@library/locale/zh_CN' // 中文 -import enUS from '@library/locale/en_US' // 英文 - -export default { - 'en': enUS, - 'zh': zhCN -} \ No newline at end of file diff --git a/ui/src/library/locale/index.ts b/ui/src/library/locale/index.ts new file mode 100644 index 00000000..bc324a0b --- /dev/null +++ b/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 diff --git a/ui/src/library/locale/zh_CN.js b/ui/src/library/locale/zh_CN.ts similarity index 79% rename from ui/src/library/locale/zh_CN.js rename to ui/src/library/locale/zh_CN.ts index dca31e16..504d08c7 100644 --- a/ui/src/library/locale/zh_CN.js +++ b/ui/src/library/locale/zh_CN.ts @@ -1,4 +1,5 @@ -const zhCN = { +import {localeData} from './index' +const zhCN:localeData = { home: '主页', dashboard: '仪表盘', chart: '图表', diff --git a/ui/src/library/routes/index.js b/ui/src/library/routes/index.ts similarity index 52% rename from ui/src/library/routes/index.js rename to ui/src/library/routes/index.ts index 7fd72952..3fd61b92 100644 --- a/ui/src/library/routes/index.js +++ b/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 Charts = React.lazy(() => import('@pages/Index/Charts')) +const Dashboard = React.lazy(() => import('../../pages/Index/Dashboard')) +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', diff --git a/ui/src/library/routes/modules/Demo.js b/ui/src/library/routes/modules/Demo.ts similarity index 61% rename from ui/src/library/routes/modules/Demo.js rename to ui/src/library/routes/modules/Demo.ts index 7a245464..5cae71cd 100644 --- a/ui/src/library/routes/modules/Demo.js +++ b/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 B = React.lazy(() => import('@pages/Index/Demo/B')) +const A = React.lazy(() => import('../../../pages/Index/Demo/A')) +const B = React.lazy(() => import('../../../pages/Index/Demo/B')) const Demo = [ { diff --git a/ui/src/library/routes/modules/Element.js b/ui/src/library/routes/modules/Element.ts similarity index 62% rename from ui/src/library/routes/modules/Element.js rename to ui/src/library/routes/modules/Element.ts index b79a51de..2edd30c5 100644 --- a/ui/src/library/routes/modules/Element.js +++ b/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 Paginations = React.lazy(() => import('@pages/Index/Elements/Paginations')) -const DatePickers = React.lazy(() => import('@pages/Index/Elements/DatePickers')) -const Icons = React.lazy(() => import('@pages/Index/Elements/Icons')) +const Accordion = React.lazy(() => import('../../../pages/Index/Elements/Accordion')) +const Paginations = React.lazy(() => import('../../../pages/Index/Elements/Paginations')) +const DatePickers = React.lazy(() => import('../../../pages/Index/Elements/DatePickers')) +const Icons = React.lazy(() => import('../../../pages/Index/Elements/Icons')) const Demo = [ { diff --git a/ui/src/library/utils/auth.js b/ui/src/library/utils/auth.ts similarity index 84% rename from ui/src/library/utils/auth.js rename to ui/src/library/utils/auth.ts index a60371b4..2ff0558d 100644 --- a/ui/src/library/utils/auth.js +++ b/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) -} \ No newline at end of file +} \ No newline at end of file diff --git a/ui/src/library/utils/http.js b/ui/src/library/utils/http.ts similarity index 87% rename from ui/src/library/utils/http.js rename to ui/src/library/utils/http.ts index 3e68acfc..d7950b48 100644 --- a/ui/src/library/utils/http.js +++ b/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 => { diff --git a/ui/src/library/utils/http/index.js b/ui/src/library/utils/http/index.ts similarity index 81% rename from ui/src/library/utils/http/index.js rename to ui/src/library/utils/http/index.ts index 962f331e..2d6f0f6b 100644 --- a/ui/src/library/utils/http/index.js +++ b/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 = { - 200: '服务器成功返回请求的数据。', - 201: '新建或修改数据成功。', - 202: '一个请求已经进入后台排队(异步任务)。', - 204: '删除数据成功。', - 400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。', - 401: '用户没有权限(令牌、用户名、密码错误)。', - 403: '用户得到授权,但是访问是被禁止的。', - 404: '发出的请求针对的是不存在的记录,服务器没有进行操作。', - 406: '请求的格式不可得。', - 410: '请求的资源被永久删除,且不会再得到的。', - 422: '当创建一个对象时,发生一个验证错误。', - 500: '服务器发生错误,请检查服务器。', - 502: '网关错误。', - 503: '服务不可用,服务器暂时过载或维护。', - 504: '网关超时。' +type tCodeMessage = { + [key:number]:string +} + +const codeMessage:tCodeMessage = { + 200:'服务器成功返回请求的数据', + 202:'一个请求已经进入后台排队(异步任务)。', + 204:'删除数据成功。', + 400:'发出的请求有错误,服务器没有进行新建或修改数据的操作。', + 401:'用户没有权限(令牌、用户名、密码错误)。', + 403:'用户得到授权,但是访问是被禁止的。', + 404:'发出的请求针对的是不存在的记录,服务器没有进行操作。', + 406:'请求的格式不可得。', + 410:'请求的资源被永久删除,且不会再得到的。', + 422:'当创建一个对象时,发生一个验证错误。', + 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) diff --git a/ui/src/library/utils/localStorage.js b/ui/src/library/utils/localStorage.ts similarity index 51% rename from ui/src/library/utils/localStorage.js rename to ui/src/library/utils/localStorage.ts index 2a64cea6..513c7c68 100644 --- a/ui/src/library/utils/localStorage.js +++ b/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){ - return JSON.parse(localStorage.getItem(adminKey+key)) + get(key:string){ + return JSON.parse(localStorage.getItem(adminKey+key)!) }, - remove(key){ + remove(key:string){ localStorage.removeItem(adminKey+key) } -} +} export default storage \ No newline at end of file diff --git a/ui/src/library/utils/modifyVars.js b/ui/src/library/utils/modifyVars.ts similarity index 75% rename from ui/src/library/utils/modifyVars.js rename to ui/src/library/utils/modifyVars.ts index 8aaa8c79..86ad8e19 100644 --- a/ui/src/library/utils/modifyVars.js +++ b/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)) diff --git a/ui/src/library/utils/validate.js b/ui/src/library/utils/validate.ts similarity index 91% rename from ui/src/library/utils/validate.js rename to ui/src/library/utils/validate.ts index d525077f..36c8db0b 100644 --- a/ui/src/library/utils/validate.js +++ b/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{ diff --git a/ui/src/pages/Responsive.js b/ui/src/pages/Responsive.js index d3e75d4f..b0553e90 100644 --- a/ui/src/pages/Responsive.js +++ b/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 => const Mobile = props => diff --git a/ui/src/serviceWorker.js b/ui/src/serviceWorker.ts similarity index 96% rename from ui/src/serviceWorker.js rename to ui/src/serviceWorker.ts index c7bd0cf5..9676bfef 100644 --- a/ui/src/serviceWorker.js +++ b/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 => { diff --git a/ui/typings/externals.d.ts b/ui/typings/externals.d.ts index 28614534..c2757470 100644 --- a/ui/typings/externals.d.ts +++ b/ui/typings/externals.d.ts @@ -1 +1,6 @@ -declare module '*.less' \ No newline at end of file +declare module '*.less' + + +declare interface Window { + less: any; +} diff --git a/ui/yarn.lock b/ui/yarn.lock index 1782ba79..6122c4a0 100644 --- a/ui/yarn.lock +++ b/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": - version "13.1.6" - resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.6.tgz#076028d0b0400be8105b89a0a55550c86684ffec" - integrity sha512-Jg1F+bmxcpENHP23sVKkNuU3uaxPnsBMW0cLjleiikFKomJQbsn0Cqk2yDvQArqzZN6ABfBkZ0To7pQ8sLdWDg== +"@types/node@^13.1.7": + version "13.1.7" + resolved "https://registry.yarnpkg.com/@types/node/-/node-13.1.7.tgz#db51d28b8dfacfe4fb2d0da88f5eb0a2eca00675" + 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"