From 1dbeb050058b07a0d399114820be892c5f0ed481 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 5 Apr 2021 22:54:36 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20Upgrading=20components=20to=20ty?= =?UTF-8?q?pescript?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/config.ts | 11 +- config/routes.ts | 14 +- package.json | 27 ++- src/components/DropOption/DropOption.js | 35 --- src/components/DropOption/package.json | 6 - src/components/Ellipsis/index.d.ts | 24 +- src/components/Ellipsis/index.js | 210 ++++++++++-------- src/components/Ellipsis/index.test.js | 16 +- .../{FilterItem.less => index.less} | 0 .../FilterItem/{FilterItem.js => index.tsx} | 13 +- src/components/FilterItem/package.json | 6 - src/components/GlobalFooter/index.tsx | 1 + src/components/Layout/Header.js | 14 +- src/components/Layout/Sider.js | 4 +- .../Loader/{Loader.less => index.less} | 134 +++++------ .../Loader/{Loader.js => index.tsx} | 15 +- src/components/Loader/package.json | 6 - .../ScrollBar/{index.js => index.ts} | 0 src/components/index.js | 3 +- src/configs/default/index.ts | 2 +- src/configs/menus/icon.tsx | 32 ++- src/configs/menus/index.ts | 31 +-- src/e2e/login.e2e.js | 2 +- src/hooks/useIntlProvider.ts | 2 +- src/layouts/BaseLayout.tsx | 2 +- src/layouts/PrimaryLayout.tsx | 25 ++- src/layouts/PublicLayout.tsx | 2 +- src/layouts/index.tsx | 3 +- src/pages/404.tsx | 15 +- src/pages/login/index.tsx | 1 + src/plugins/onError.js | 13 -- src/services/index.js | 10 +- src/themes/default.less | 31 ++- src/themes/index.less | 2 +- src/themes/mixin.less | 15 +- src/typings/common.ts | 39 ---- src/typings/index.ts | 16 +- src/typings/language.ts | 20 ++ src/utils/city.ts | 8 +- src/utils/context.ts | 9 +- src/utils/iconMap.jsx | 31 --- src/utils/request.ts | 2 +- 42 files changed, 377 insertions(+), 475 deletions(-) delete mode 100644 src/components/DropOption/DropOption.js delete mode 100644 src/components/DropOption/package.json rename src/components/FilterItem/{FilterItem.less => index.less} (100%) rename src/components/FilterItem/{FilterItem.js => index.tsx} (67%) delete mode 100644 src/components/FilterItem/package.json rename src/components/Loader/{Loader.less => index.less} (94%) rename src/components/Loader/{Loader.js => index.tsx} (66%) delete mode 100644 src/components/Loader/package.json rename src/components/ScrollBar/{index.js => index.ts} (100%) delete mode 100644 src/plugins/onError.js delete mode 100644 src/typings/common.ts create mode 100644 src/typings/language.ts delete mode 100644 src/utils/iconMap.jsx diff --git a/config/config.ts b/config/config.ts index 2278c57..82e6426 100644 --- a/config/config.ts +++ b/config/config.ts @@ -6,6 +6,9 @@ import routes from './routes' import proxy from './proxy' const isDevelopment = process.env.NODE_ENV === 'development' +const theme = lessToJs( + fs.readFileSync(path.join(__dirname, '../src/themes/default.less'), 'utf8') +) const config: IConfig = { // IMPORTANT! change next line to yours or delete. And hide in dev @@ -14,20 +17,14 @@ const config: IConfig = { ignoreMomentLocale: true, targets: { ie: 9 }, dynamicImport: {}, + theme, proxy, routes, - // a lower cost way to genereate sourcemap, default is cheap-module-source-map, could save 60% time in dev hotload devtool: 'eval', - // umi3 comple node_modules by default, could be disable nodeModulesTransform: { type: 'none', exclude: [], }, - // Theme for antd - // https://ant.design/docs/react/customize-theme - theme: lessToJs( - fs.readFileSync(path.join(__dirname, '../src/themes/default.less'), 'utf8') - ), extraBabelPresets: ['@lingui/babel-preset-react'], extraBabelPlugins: [ 'macros', diff --git a/config/routes.ts b/config/routes.ts index 1abaff8..f751a35 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -1,10 +1,12 @@ import type { IRoute } from 'umi' -const routes: IRoute[] = [{ - exact: false, path: '/', component: '@/layouts/index', - routes: [ - { exact: true, path: '/login', component: '@/pages/login' }, - ], -}] +const routes: IRoute[] = [ + { + exact: false, + path: '/', + component: '@/layouts', + routes: [{ exact: true, path: '/login', component: '@/pages/login' }], + }, +] export default routes diff --git a/package.json b/package.json index 3e625d3..eee127e 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,8 @@ "@lingui/cli": "^3.8.2", "@lingui/loader": "^3.8.2", "@lingui/macro": "^3.8.2", + "@typescript-eslint/eslint-plugin": "^4.20.0", + "@typescript-eslint/parser": "^4.20.0", "@umijs/preset-react": "^1.8.0", "babel-eslint": "^10.0.0", "babel-plugin-dev-expression": "^0.2.1", @@ -71,15 +73,13 @@ "node": ">= 10.0.0" }, "lint-staged": { - "src/**/*.js": [ - "eslint --ext .js --fix", - "npm run prettier", - "git add" + "*.{ts,tsx,js,jsx}": [ + "npm run eslint", + "npm run prettier" ], - "**/*.less": [ - "stylelint --syntax less", - "npm run prettier", - "git add" + "*.less": [ + "npm run stylelint", + "npm run prettier" ] }, "lingui": { @@ -110,14 +110,13 @@ ] }, "scripts": { - "analyze": "cross-env ANALYZE=1 umi build", + "start": "umi dev", "build": "umi build", - "check:model": "umi dva list model", - "lint:js": "eslint --ext .js src", - "lint:style": "stylelint \"src/**/*.less\" --syntax less", - "start": "cross-env umi dev", "test": "cross-env BABELRC=none umi test", - "prettier": "prettier --write 'src/**/*.{js,less}'", + "analyze": "cross-env ANALYZE=1 umi build", + "eslint": "eslint --fix 'src/**/*.{ts,tsx,js.jsx}'", + "stylelint": "stylelint src/**/*.less --syntax less", + "prettier": "prettier --write 'src/**/*.{ts,tsx,js.jsx,less}'", "precommit": "lint-staged", "add-locale": "lingui add-locale", "extract": "lingui extract", diff --git a/src/components/DropOption/DropOption.js b/src/components/DropOption/DropOption.js deleted file mode 100644 index 1bb4ba2..0000000 --- a/src/components/DropOption/DropOption.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { BarsOutlined, DownOutlined } from '@ant-design/icons' -import { Dropdown, Button, Menu } from 'antd' - -const DropOption = ({ - onMenuClick, - menuOptions = [], - buttonStyle, - dropdownProps, -}) => { - const menu = menuOptions.map(item => ( - {item.name} - )) - return ( - {menu}} - {...dropdownProps} - > - - - ) -} - -DropOption.propTypes = { - onMenuClick: PropTypes.func, - menuOptions: PropTypes.array.isRequired, - buttonStyle: PropTypes.object, - dropdownProps: PropTypes.object, -} - -export default DropOption diff --git a/src/components/DropOption/package.json b/src/components/DropOption/package.json deleted file mode 100644 index 0a1dc40..0000000 --- a/src/components/DropOption/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "DropOption", - "version": "0.0.0", - "private": true, - "main": "./DropOption.js" -} diff --git a/src/components/Ellipsis/index.d.ts b/src/components/Ellipsis/index.d.ts index 075fa78..f9332c2 100644 --- a/src/components/Ellipsis/index.d.ts +++ b/src/components/Ellipsis/index.d.ts @@ -1,21 +1,21 @@ -import React from 'react'; -import { TooltipProps } from 'antd/lib/tooltip'; +import React from 'react' +import { TooltipProps } from 'antd/lib/tooltip' export interface EllipsisTooltipProps extends TooltipProps { - title?: undefined; - overlayStyle?: undefined; + title?: undefined + overlayStyle?: undefined } export interface EllipsisProps { - tooltip?: boolean | EllipsisTooltipProps; - length?: number; - lines?: number; - style?: React.CSSProperties; - className?: string; - fullWidthRecognition?: boolean; + tooltip?: boolean | EllipsisTooltipProps + length?: number + lines?: number + style?: React.CSSProperties + className?: string + fullWidthRecognition?: boolean } -export function getStrFullLength(str: string): number; -export function cutStrByFullLength(str: string, maxLength: number): string; +export function getStrFullLength(str: string): number +export function cutStrByFullLength(str: string, maxLength: number): string export default class Ellipsis extends React.Component {} diff --git a/src/components/Ellipsis/index.js b/src/components/Ellipsis/index.js index de700b7..b387f05 100644 --- a/src/components/Ellipsis/index.js +++ b/src/components/Ellipsis/index.js @@ -1,68 +1,79 @@ -import React, { Component } from 'react'; -import { Tooltip } from 'antd'; -import classNames from 'classnames'; -import styles from './index.less'; +import React, { Component } from 'react' +import { Tooltip } from 'antd' +import classNames from 'classnames' +import styles from './index.less' /* eslint react/no-did-mount-set-state: 0 */ /* eslint no-param-reassign: 0 */ -const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined; +const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined const TooltipOverlayStyle = { overflowWrap: 'break-word', wordWrap: 'break-word', -}; +} export const getStrFullLength = (str = '') => str.split('').reduce((pre, cur) => { - const charCode = cur.charCodeAt(0); + const charCode = cur.charCodeAt(0) if (charCode >= 0 && charCode <= 128) { - return pre + 1; + return pre + 1 } - return pre + 2; - }, 0); + return pre + 2 + }, 0) export const cutStrByFullLength = (str = '', maxLength) => { - let showLength = 0; + let showLength = 0 return str.split('').reduce((pre, cur) => { - const charCode = cur.charCodeAt(0); + const charCode = cur.charCodeAt(0) if (charCode >= 0 && charCode <= 128) { - showLength += 1; + showLength += 1 } else { - showLength += 2; + showLength += 2 } if (showLength <= maxLength) { - return pre + cur; + return pre + cur } - return pre; - }, ''); -}; + return pre + }, '') +} const getTooltip = ({ tooltip, overlayStyle, title, children }) => { if (tooltip) { - const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title }; - return {children}; + const props = + tooltip === true + ? { overlayStyle, title } + : { ...tooltip, overlayStyle, title } + return {children} } - return children; -}; + return children +} -const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => { +const EllipsisText = ({ + text, + length, + tooltip, + fullWidthRecognition, + ...other +}) => { if (typeof text !== 'string') { - throw new Error('Ellipsis children must be string.'); + throw new Error('Ellipsis children must be string.') } - const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length; + const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length if (textLength <= length || length < 0) { - return {text}; + return {text} } - const tail = '...'; - let displayText; + const tail = '...' + let displayText if (length - tail.length <= 0) { - displayText = ''; + displayText = '' } else { - displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length); + displayText = fullWidthRecognition + ? cutStrByFullLength(text, length) + : text.slice(0, length) } - const spanAttrs = tooltip ? {} : { ...other }; + const spanAttrs = tooltip ? {} : { ...other } return getTooltip({ tooltip, overlayStyle: TooltipOverlayStyle, @@ -73,116 +84,117 @@ const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) {tail} ), - }); -}; + }) +} export default class Ellipsis extends Component { state = { text: '', targetCount: 0, - }; + } componentDidMount() { if (this.node) { - this.computeLine(); + this.computeLine() } } componentDidUpdate(perProps) { - const { lines } = this.props; + const { lines } = this.props if (lines !== perProps.lines) { - this.computeLine(); + this.computeLine() } } computeLine = () => { - const { lines } = this.props; + const { lines } = this.props if (lines && !isSupportLineClamp) { - const text = this.shadowChildren.innerText || this.shadowChildren.textContent; - const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10); - const targetHeight = lines * lineHeight; - this.content.style.height = `${targetHeight}px`; - const totalHeight = this.shadowChildren.offsetHeight; - const shadowNode = this.shadow.firstChild; + const text = + this.shadowChildren.innerText || this.shadowChildren.textContent + const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10) + const targetHeight = lines * lineHeight + this.content.style.height = `${targetHeight}px` + const totalHeight = this.shadowChildren.offsetHeight + const shadowNode = this.shadow.firstChild if (totalHeight <= targetHeight) { this.setState({ text, targetCount: text.length, - }); - return; + }) + return } // bisection - const len = text.length; - const mid = Math.ceil(len / 2); + const len = text.length + const mid = Math.ceil(len / 2) - const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode); + const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode) this.setState({ text, targetCount: count, - }); + }) } - }; + } bisection = (th, m, b, e, text, shadowNode) => { - const suffix = '...'; - let mid = m; - let end = e; - let begin = b; - shadowNode.innerHTML = text.substring(0, mid) + suffix; - let sh = shadowNode.offsetHeight; + const suffix = '...' + let mid = m + let end = e + let begin = b + shadowNode.innerHTML = text.substring(0, mid) + suffix + let sh = shadowNode.offsetHeight if (sh <= th) { - shadowNode.innerHTML = text.substring(0, mid + 1) + suffix; - sh = shadowNode.offsetHeight; + shadowNode.innerHTML = text.substring(0, mid + 1) + suffix + sh = shadowNode.offsetHeight if (sh > th || mid === begin) { - return mid; + return mid } - begin = mid; + begin = mid if (end - begin === 1) { - mid = 1 + begin; + mid = 1 + begin } else { - mid = Math.floor((end - begin) / 2) + begin; + mid = Math.floor((end - begin) / 2) + begin } - return this.bisection(th, mid, begin, end, text, shadowNode); + return this.bisection(th, mid, begin, end, text, shadowNode) } if (mid - 1 < 0) { - return mid; + return mid } - shadowNode.innerHTML = text.substring(0, mid - 1) + suffix; - sh = shadowNode.offsetHeight; + shadowNode.innerHTML = text.substring(0, mid - 1) + suffix + sh = shadowNode.offsetHeight if (sh <= th) { - return mid - 1; + return mid - 1 } - end = mid; - mid = Math.floor((end - begin) / 2) + begin; - return this.bisection(th, mid, begin, end, text, shadowNode); - }; + end = mid + mid = Math.floor((end - begin) / 2) + begin + return this.bisection(th, mid, begin, end, text, shadowNode) + } - handleRoot = n => { - this.root = n; - }; + handleRoot = (n) => { + this.root = n + } - handleContent = n => { - this.content = n; - }; + handleContent = (n) => { + this.content = n + } - handleNode = n => { - this.node = n; - }; + handleNode = (n) => { + this.node = n + } - handleShadow = n => { - this.shadow = n; - }; + handleShadow = (n) => { + this.shadow = n + } - handleShadowChildren = n => { - this.shadowChildren = n; - }; + handleShadowChildren = (n) => { + this.shadowChildren = n + } render() { - const { text, targetCount } = this.state; + const { text, targetCount } = this.state const { children, lines, @@ -191,19 +203,19 @@ export default class Ellipsis extends Component { tooltip, fullWidthRecognition, ...restProps - } = this.props; + } = this.props const cls = classNames(styles.ellipsis, className, { [styles.lines]: lines && !isSupportLineClamp, [styles.lineClamp]: lines && isSupportLineClamp, - }); + }) if (!lines && !length) { return ( {children} - ); + ) } // length @@ -217,28 +229,30 @@ export default class Ellipsis extends Component { fullWidthRecognition={fullWidthRecognition} {...restProps} /> - ); + ) } - const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`; + const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor( + Math.random() * 100 + )}`}` // support document.body.style.webkitLineClamp if (isSupportLineClamp) { - const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`; + const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}` const node = (
{children}
- ); + ) return getTooltip({ tooltip, overlayStyle: TooltipOverlayStyle, title: children, children: node, - }); + }) } const childNode = ( @@ -246,7 +260,7 @@ export default class Ellipsis extends Component { {targetCount > 0 && text.substring(0, targetCount)} {targetCount > 0 && targetCount < text.length && '...'} - ); + ) return (
@@ -265,6 +279,6 @@ export default class Ellipsis extends Component {
- ); + ) } } diff --git a/src/components/Ellipsis/index.test.js b/src/components/Ellipsis/index.test.js index 4d057b2..445f074 100644 --- a/src/components/Ellipsis/index.test.js +++ b/src/components/Ellipsis/index.test.js @@ -1,13 +1,13 @@ -import { getStrFullLength, cutStrByFullLength } from './index'; +import { getStrFullLength, cutStrByFullLength } from './index' describe('test calculateShowLength', () => { it('get full length', () => { - expect(getStrFullLength('一二，a,')).toEqual(8); - }); + expect(getStrFullLength('一二，a,')).toEqual(8) + }) it('cut str by full length', () => { - expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a'); - }); + expect(cutStrByFullLength('一二，a,', 7)).toEqual('一二，a') + }) it('cut str when length small', () => { - expect(cutStrByFullLength('一22三', 5)).toEqual('一22'); - }); -}); + expect(cutStrByFullLength('一22三', 5)).toEqual('一22') + }) +}) diff --git a/src/components/FilterItem/FilterItem.less b/src/components/FilterItem/index.less similarity index 100% rename from src/components/FilterItem/FilterItem.less rename to src/components/FilterItem/index.less diff --git a/src/components/FilterItem/FilterItem.js b/src/components/FilterItem/index.tsx similarity index 67% rename from src/components/FilterItem/FilterItem.js rename to src/components/FilterItem/index.tsx index e701c8b..4cb24c7 100644 --- a/src/components/FilterItem/FilterItem.js +++ b/src/components/FilterItem/index.tsx @@ -1,8 +1,10 @@ import React from 'react' -import PropTypes from 'prop-types' -import styles from './FilterItem.less' +import styles from './index.less' -const FilterItem = ({ label = '', children }) => { +interface FilterItemProps { + label: string +} +const FilterItem: React.FC = ({ label = '', children }) => { const labelArray = label.split('') return (
@@ -20,9 +22,4 @@ const FilterItem = ({ label = '', children }) => { ) } -FilterItem.propTypes = { - label: PropTypes.string, - children: PropTypes.element.isRequired, -} - export default FilterItem diff --git a/src/components/FilterItem/package.json b/src/components/FilterItem/package.json deleted file mode 100644 index 04c7d8a..0000000 --- a/src/components/FilterItem/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "FilterItem", - "version": "0.0.0", - "private": true, - "main": "./FilterItem.js" -} diff --git a/src/components/GlobalFooter/index.tsx b/src/components/GlobalFooter/index.tsx index 9814372..0a9df18 100644 --- a/src/components/GlobalFooter/index.tsx +++ b/src/components/GlobalFooter/index.tsx @@ -26,6 +26,7 @@ const GlobalFooter: React.FC = ({ title={link.key} target={link.blankTarget ? '_blank' : '_self'} href={link.href} + rel="noreferrer" > {link.title} diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 3b37540..1538655 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -8,7 +8,7 @@ import { MenuFoldOutlined, MenuUnfoldOutlined, } from '@ant-design/icons' -import { Trans } from "@lingui/macro" +import { Trans } from '@lingui/macro' import { getLocale, setLocale } from 'utils' import moment from 'moment' import classnames from 'classnames' @@ -18,7 +18,7 @@ import styles from './Header.less' const { SubMenu } = Menu class Header extends PureComponent { - handleClickMenu = e => { + handleClickMenu = (e) => { e.key === 'SignOut' && this.props.onSignOut() } render() { @@ -55,21 +55,19 @@ class Header extends PureComponent { if (config.i18n) { const { languages } = config.i18n const language = getLocale() - const currentLanguage = languages.find( - item => item.key === language - ) + const currentLanguage = languages.find((item) => item.key === language) rightContent.unshift( { + onClick={(data) => { setLocale(data.key) }} mode="horizontal" > }> - {languages.map(item => ( + {languages.map((item) => ( You have viewed all notifications., }} - renderItem={item => ( + renderItem={(item) => ( { +interface LoaderProps { + spinning?: boolean + fullScreen?: boolean +} + +const Loader: React.FC = ({ spinning = false, fullScreen }) => { return (
{ ) } -Loader.propTypes = { - spinning: PropTypes.bool, - fullScreen: PropTypes.bool, -} - export default Loader diff --git a/src/components/Loader/package.json b/src/components/Loader/package.json deleted file mode 100644 index 15bde9a..0000000 --- a/src/components/Loader/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Loader", - "version": "0.0.0", - "private": true, - "main": "./Loader.js" -} diff --git a/src/components/ScrollBar/index.js b/src/components/ScrollBar/index.ts similarity index 100% rename from src/components/ScrollBar/index.js rename to src/components/ScrollBar/index.ts diff --git a/src/components/index.js b/src/components/index.js index 2c96be7..e948cb9 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,8 +1,7 @@ import FilterItem from './FilterItem' -import DropOption from './DropOption' import Loader from './Loader' import ScrollBar from './ScrollBar' import GlobalFooter from './GlobalFooter' import Ellipsis from './Ellipsis' -export { GlobalFooter, Ellipsis, FilterItem, DropOption, Loader, ScrollBar } +export { GlobalFooter, Ellipsis, FilterItem, Loader, ScrollBar } diff --git a/src/configs/default/index.ts b/src/configs/default/index.ts index 9da4115..63097b8 100644 --- a/src/configs/default/index.ts +++ b/src/configs/default/index.ts @@ -1,5 +1,5 @@ import { IConfig, ISupportedLocales } from '@/typings' -import { LOCALE_LANGUAGE } from '@/configs' +import { LOCALE_LANGUAGE } from '@/configs/constants' import checkLanguage from '@/utils/checkLanguage' import { detect, diff --git a/src/configs/menus/icon.tsx b/src/configs/menus/icon.tsx index e5fdeba..ab2c949 100644 --- a/src/configs/menus/icon.tsx +++ b/src/configs/menus/icon.tsx @@ -1,10 +1,34 @@ -import React from 'react' -import { HomeOutlined, AppstoreOutlined } from '@ant-design/icons' +import { + PayCircleOutlined, + ShoppingCartOutlined, + MessageOutlined, + TeamOutlined, + UserOutlined, + DashboardOutlined, + ApiOutlined, + CameraOutlined, + EditOutlined, + CodeOutlined, + LineOutlined, + BarChartOutlined, + AreaChartOutlined, +} from '@ant-design/icons' import { IMenuIcon } from '@/typings' const menuIcon: IMenuIcon = { - home: , - other: , + 'pay-circle-o': , + 'shopping-cart': , + 'camera-o': , + 'line-chart': , + 'code-o': , + 'area-chart': , + 'bar-chart': , + message: , + team: , + dashboard: , + user: , + api: , + edit: , } export default menuIcon diff --git a/src/configs/menus/index.ts b/src/configs/menus/index.ts index 9c9bae7..e7c1e55 100644 --- a/src/configs/menus/index.ts +++ b/src/configs/menus/index.ts @@ -9,35 +9,8 @@ import { t } from '@lingui/macro' const menus = [ { path: '/', - name: t`主页`, - icon: 'home', - }, - { - name: t`其他`, - key: '/other', - icon: 'other', - children: [ - { - path: '/hello', - name: t`你好 (useRedux)`, - }, - { - path: '/user', - name: t`用户 (useRequest)`, - }, - { - path: '/i18n', - name: t`国际化 (useLingui)`, - }, - { - path: '/simple', - name: t`国际化 (Elint插件)`, - }, - { - path: '/simple2', - name: t`未定义页面`, - }, - ], + name: t`Dashboard`, + icon: 'dashboard', }, ] diff --git a/src/e2e/login.e2e.js b/src/e2e/login.e2e.js index 7c8fd0e..08e3874 100644 --- a/src/e2e/login.e2e.js +++ b/src/e2e/login.e2e.js @@ -18,7 +18,7 @@ describe('Login', () => { afterEach(() => page.close()) it('should login with failure', async () => { - await page.waitFor(selector => !!document.querySelector('#username'), { + await page.waitFor((selector) => !!document.querySelector('#username'), { timeout: 3000, }) await page.type('#username', 'wrong_user') diff --git a/src/hooks/useIntlProvider.ts b/src/hooks/useIntlProvider.ts index 74fdde1..882833f 100644 --- a/src/hooks/useIntlProvider.ts +++ b/src/hooks/useIntlProvider.ts @@ -12,7 +12,7 @@ const useIntlProvider = () => { useEffect(() => { const path = antdI18nMap[language] - import(`antd/lib/locale/${path}.js`).then(data => { + import(`antd/lib/locale/${path}.js`).then((data) => { setLocale(data.default) }) localStorage.setItem(LOCALE_LANGUAGE, language) diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx index d15f66e..b98ae6e 100644 --- a/src/layouts/BaseLayout.tsx +++ b/src/layouts/BaseLayout.tsx @@ -11,7 +11,7 @@ const LayoutMap = { public: PublicLayout, } -const BaseLayout: React.FC = props => { +const BaseLayout: React.FC = (props) => { const location = useLocation() const Container = LayoutMap[queryLayout(config.layouts, location.pathname)] return {props.children} diff --git a/src/layouts/PrimaryLayout.tsx b/src/layouts/PrimaryLayout.tsx index 7143372..ad41617 100644 --- a/src/layouts/PrimaryLayout.tsx +++ b/src/layouts/PrimaryLayout.tsx @@ -11,12 +11,13 @@ import ProBasicLayout, { SettingDrawerProps, } from '@ant-design/pro-layout' import { Link } from 'umi' -import { Dropdown, Menu } from 'antd' +import { Dropdown, Menu, Avatar } from 'antd' import { useLocation } from '@/hooks' import { ConfigContext } from '@/utils/context' import { menus, menuIcon, language, languages, config } from '@/configs' import defaultSettings from '@/defaultSettings' -import type { MenuProps } from 'antd/es/menu'; +import { ISupportedLocales } from '@/typings' +import type { MenuProps } from 'antd/es/menu' import styles from './index.less' const renderMenuItem = (menus: MenuDataItem[]): MenuDataItem[] => @@ -26,7 +27,7 @@ const renderMenuItem = (menus: MenuDataItem[]): MenuDataItem[] => children: children && renderMenuItem(children), })) -const PrimaryLayout: React.FC = props => { +const PrimaryLayout: React.FC = (props) => { const location = useLocation() const [settings] = useState(defaultSettings) const [openKeys, setOpenKeys] = useState([]) @@ -54,7 +55,7 @@ const PrimaryLayout: React.FC = props => { }, []) const handleOnOpenChange = useCallback( - keys => setOpenKeys(keys as string[]), + (keys) => setOpenKeys(keys as string[]), [] ) @@ -70,10 +71,15 @@ const PrimaryLayout: React.FC = props => { const rightContentRender = () => ( - {languages.map(item => ( - setLanguage(item.key)}> - {item.flag} + { + setLanguage(data.key as ISupportedLocales) + }} + > + {languages.map((item) => ( + + {item.value} ))} @@ -81,8 +87,7 @@ const PrimaryLayout: React.FC = props => { } >
- {currentLanguage.flag} - {currentLanguage.value} +
) diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx index eed2f41..801fb5e 100644 --- a/src/layouts/PublicLayout.tsx +++ b/src/layouts/PublicLayout.tsx @@ -1,6 +1,6 @@ import React from 'react' -const PublicLayout: React.FC = props => { +const PublicLayout: React.FC = (props) => { return <>{props.children} } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 3d2f001..cfe4f61 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -4,9 +4,8 @@ import { I18nProvider } from '@lingui/react' import { useIntlProvider } from '@/hooks' import { ConfigContext } from '@/utils/context' import BaseLayout from './BaseLayout' -import PrimaryLayout from './PrimaryLayout' -const Layout: React.FC = props => { +const Layout: React.FC = (props) => { const { language, setLanguage, i18n, locale } = useIntlProvider() const globalConfig = { language, diff --git a/src/pages/404.tsx b/src/pages/404.tsx index cff81d3..36d2f17 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,15 +1,12 @@ import React from 'react' import { FrownOutlined } from '@ant-design/icons' -import { Page } from 'components' import styles from './404.less' -const Error = () => ( - -
- -

404 Not Found

-
- +const NotFoundPage: React.FC = () => ( +
+ +

404 Not Found

+
) -export default Error +export default NotFoundPage diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 911db7b..8ba53ac 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -23,6 +23,7 @@ const Login: React.FC = () => { ] const handleFinish = (values) => { + // eslint-disable-next-line no-console console.log(values) } diff --git a/src/plugins/onError.js b/src/plugins/onError.js deleted file mode 100644 index d929ab9..0000000 --- a/src/plugins/onError.js +++ /dev/null @@ -1,13 +0,0 @@ -import { message } from 'antd' - -export default { - onError(e, a) { - e.preventDefault() - if (e.message) { - message.error(e.message) - } else { - /* eslint-disable */ - console.error(e) - } - }, -} diff --git a/src/services/index.js b/src/services/index.js index 444f25e..beb3881 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -3,7 +3,7 @@ import { apiPrefix } from 'utils/config' import api from './api' -const gen = params => { +const gen = (params) => { let url = apiPrefix + params let method = 'GET' @@ -13,7 +13,7 @@ const gen = params => { url = apiPrefix + paramsArray[1] } - return function(data) { + return function (data) { return request({ url, data, @@ -27,7 +27,7 @@ for (const key in api) { APIFunction[key] = gen(api[key]) } -APIFunction.queryWeather = params => { +APIFunction.queryWeather = (params) => { params.key = 'i7sau1babuzwhycn' return request({ url: `${apiPrefix}/weather/now.json`, @@ -35,8 +35,4 @@ APIFunction.queryWeather = params => { }) } -<<<<<<< HEAD -// module.exports = APIFunction -======= export default APIFunction ->>>>>>> master diff --git a/src/themes/default.less b/src/themes/default.less index 8fabcc1..2cf882d 100644 --- a/src/themes/default.less +++ b/src/themes/default.less @@ -1,16 +1,15 @@ -// 本文件是对 ant-design: -// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less -// 相应变量值的覆盖 -// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写） - -@import '../../node_modules/antd/lib/style/themes/default.less'; - -@border-radius-base: 3px; -@border-radius-sm: 2px; -@shadow-color: rgba(0, 0, 0, 0.05); -@shadow-1-down: 4px 4px 40px @shadow-color; -@border-color-split: #f4f4f4; -@border-color-base: #e5e5e5; -@font-size-base: 13px; -@text-color: #666; -@hover-color: #f9f9fc; +/** + * Customize Ant Design theme, Ant design less variables could be found in: + * https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less + */ +@import '../../node_modules/antd/lib/style/themes/default.less'; + +@border-radius-base: 3px; +@border-radius-sm: 2px; +@shadow-color: rgba(0, 0, 0, 0.05); +@shadow-1-down: 4px 4px 40px @shadow-color; +@border-color-split: #f4f4f4; +@border-color-base: #e5e5e5; +@font-size-base: 13px; +@text-color: #666; +@hover-color: #f9f9fc; diff --git a/src/themes/index.less b/src/themes/index.less index 651ec33..2910e4a 100644 --- a/src/themes/index.less +++ b/src/themes/index.less @@ -56,8 +56,8 @@ body { } .ant-table-pagination { - display: table; float: none !important; + display: table; margin: 16px auto !important; } diff --git a/src/themes/mixin.less b/src/themes/mixin.less index ef71edf..c684302 100644 --- a/src/themes/mixin.less +++ b/src/themes/mixin.less @@ -1,12 +1,12 @@ @import '~@/themes/default'; -@dark-half #494949; -@purple #d897eb; -@shadow-1 4px 4px 20px 0 rgba(0, 0, 0, 0.01); -@shadow-2 4px 4px 40px 0 rgba(0, 0, 0, 0.05); -@transition-ease-in all 0.3s ease-out; -@transition-ease-out all 0.3s ease-out; -@ease-in ease-in; +@dark-half: #494949; +@purple: #d897eb; +@shadow-1: 4px 4px 20px 0 rgba(0, 0, 0, 0.01); +@shadow-2: 4px 4px 40px 0 rgba(0, 0, 0, 0.05); +@transition-ease-in: all 0.3s ease-out; +@transition-ease-out: all 0.3s ease-out; +@ease-in: ease-in; .text-overflow { overflow: hidden; @@ -28,7 +28,6 @@ } .background-hover { - // transition: @transition-ease-in; &:hover { background-color: @hover-color; } diff --git a/src/typings/common.ts b/src/typings/common.ts deleted file mode 100644 index 1eeb330..0000000 --- a/src/typings/common.ts +++ /dev/null @@ -1,39 +0,0 @@ -export type ISupportedLocales = 'en' | 'zh' - -export interface IConfigContext { - language: ISupportedLocales - setLanguage: (language: ISupportedLocales) => void -} - -export interface ILanguageItem { - flag: string - value: string -} - -export interface ILanguage { - [key: string]: ILanguageItem -} - -export interface ILanguages { - key: string - flag: string - value: string -} - -export interface IAntdI18nMap { - [key: string]: string -} - -export interface ILayouItem { - name: string - include?: any[] - exlude?: any[] -} - -export interface IConfig { - language: ISupportedLocales - title: string - logo: string - copyright: string - layouts: ILayouItem[] -} diff --git a/src/typings/index.ts b/src/typings/index.ts index 78e2f68..972576d 100644 --- a/src/typings/index.ts +++ b/src/typings/index.ts @@ -1,2 +1,16 @@ -export * from './common' +import { ISupportedLocales } from '@/typings' +export * from './language' export * from './menu' +export interface ILayouItem { + name: string + include?: any[] + exlude?: any[] +} + +export interface IConfig { + language: ISupportedLocales + title: string + logo: string + copyright: string + layouts: ILayouItem[] +} diff --git a/src/typings/language.ts b/src/typings/language.ts new file mode 100644 index 0000000..b18a5ab --- /dev/null +++ b/src/typings/language.ts @@ -0,0 +1,20 @@ +export type ISupportedLocales = 'en' | 'zh' | 'pt-br' + +export interface ILanguageItem { + flag: string + value: string +} + +export interface ILanguage { + [key: string]: ILanguageItem +} + +export interface ILanguages { + key: ISupportedLocales + flag: string + value: string +} + +export interface IAntdI18nMap { + [key: string]: string +} diff --git a/src/utils/city.ts b/src/utils/city.ts index 25900d3..371d8f3 100644 --- a/src/utils/city.ts +++ b/src/utils/city.ts @@ -4020,11 +4020,11 @@ let DICT = { 990100: '海外', } -const tree = list => { +const tree = (list) => { let hashTable = Object.create(null) - list.forEach(aData => (hashTable[aData.id] = { ...aData, children: [] })) + list.forEach((aData) => (hashTable[aData.id] = { ...aData, children: [] })) let dataTree = [] - list.forEach(aData => { + list.forEach((aData) => { if (aData.pid) { if (hashTable[aData.pid]) hashTable[aData.pid].children.push(hashTable[aData.id]) @@ -4033,7 +4033,7 @@ const tree = list => { return dataTree } -let DICT_FIXED = (function() { +let DICT_FIXED = (function () { let fixed = [] for (let id in DICT) { if ({}.hasOwnProperty.call(DICT, id)) { diff --git a/src/utils/context.ts b/src/utils/context.ts index fb5c54f..ecf9921 100644 --- a/src/utils/context.ts +++ b/src/utils/context.ts @@ -1,8 +1,13 @@ import React from 'react' import { config } from '@/configs' -import { IConfigContext } from '@/typings' +import { ISupportedLocales } from '@/typings' + +interface IConfigContext { + language: ISupportedLocales + setLanguage: (language: ISupportedLocales) => void +} export const ConfigContext = React.createContext({ language: config.language, - setLanguage: language => null, + setLanguage: (language) => null, }) diff --git a/src/utils/iconMap.jsx b/src/utils/iconMap.jsx deleted file mode 100644 index ceacadf..0000000 --- a/src/utils/iconMap.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import { - PayCircleOutlined, - ShoppingCartOutlined, - MessageOutlined, - TeamOutlined, - UserOutlined, - DashboardOutlined, - ApiOutlined, - CameraOutlined, - EditOutlined, - CodeOutlined, - LineOutlined, - BarChartOutlined, - AreaChartOutlined, -} from '@ant-design/icons' - -export default { - 'pay-circle-o': , - 'shopping-cart': , - 'camera-o': , - 'line-chart': , - 'code-o': , - 'area-chart': , - 'bar-chart': , - message: , - team: , - dashboard: , - user: , - api: , - edit: , -} diff --git a/src/utils/request.ts b/src/utils/request.ts index 7231c0b..454bf2e 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,8 +1,8 @@ import axios from 'axios' import { cloneDeep } from 'lodash' -const { parse, compile } = require('path-to-regexp') import { message } from 'antd' import { CANCEL_REQUEST_MESSAGE } from '@/utils/constant' +const { parse, compile } = require('path-to-regexp') const { CancelToken } = axios window.cancelRequest = new Map()