mirror of
https://github.com/zuiidea/antd-admin.git
synced 2026-10-20 08:16:39 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 baorong
|
9989aa4de5 | ||
|
baorong
|
f983533d59 | ||
|
baorong
|
2182759d47 | ||
|
baorong
|
4d1851ddd2 | ||
|
baorong
|
0d82eca735 | ||
|
baorong
|
cfb6b271ee | ||
|
baorong
|
0b97964457 | ||
|
baorong
|
edfbfcf5db | ||
|
baorong
|
e5172432df | ||
|
baorong
|
741b04f120 | ||
|
baorong
|
83f2cc1344 | ||
|
baorong
|
152556d582 | ||
|
Baorong Li
|
67fc31a008 | ||
|
Baocang Nie
|
23eace8350 | ||
|
Baorong
|
93817e4840 | ||
|
Baorong
|
bb97d982e4 | ||
|
Baorong Li
|
700f58015d | ||
|
XyanZhang
|
872ce3a825 | ||
|
XyanZhang
|
385b31e7bb | ||
|
Baorong Li
|
3d66a616ff | ||
|
superlbr
|
b7e18a1214 | ||
|
Baorong Li
|
3b0bae9c70 | ||
|
Baorong Li
|
8b9343a320 | ||
|
vagusx
|
8618c75459 | ||
|
vagusx
|
711d2077e2 | ||
|
vagusx
|
b25646b033 | ||
|
vagusx
|
02bf7784b1 | ||
|
Baorong Li
|
c164d60643 | ||
|
leijialiang
|
1bd4cfe73c | ||
|
superlbr
|
f4e1eeb21c | ||
|
superlbr
|
4b5fe62014 | ||
|
superlbr
|
36c2be61ae | ||
|
superlbr
|
e9206a9448 | ||
|
superlbr
|
0bf28879c4 | ||
|
superlbr
|
7c936712b9 | ||
|
Baorong Li
|
e32a19fe3b | ||
|
Baorong Li
|
c6382c6221 |
@@ -5,6 +5,13 @@ const path = require('path')
|
||||
const lessToJs = require('less-vars-to-js')
|
||||
const isDevelopment = process.env.NODE_ENV === 'development'
|
||||
|
||||
const { theme } = require('antd')
|
||||
|
||||
const mapToken = theme.defaultAlgorithm(theme.defaultSeed)
|
||||
const v4Token = Object.fromEntries(
|
||||
Object.entries(mapToken).map(([k, v]) => [k, typeof v === 'string' ? v : String(v)])
|
||||
)
|
||||
|
||||
// how to speed compile: https://umijs.org/guide/boost-compile-speed
|
||||
export default {
|
||||
// IMPORTANT! change next line to yours or delete. And hide in dev
|
||||
@@ -16,7 +23,7 @@ export default {
|
||||
themes: resolve(__dirname, './src/themes'),
|
||||
utils: resolve(__dirname, './src/utils'),
|
||||
},
|
||||
antd: {},
|
||||
antd: false,
|
||||
// a lower cost way to genereate sourcemap, default is cheap-module-source-map, could save 60% time in dev hotload
|
||||
devtool: 'eval',
|
||||
dva: { immer: true },
|
||||
@@ -61,17 +68,20 @@ export default {
|
||||
pathRewrite: { '^/api/v1/weather': '/v3/weather' },
|
||||
},
|
||||
},
|
||||
targets: { ie: 9 },
|
||||
// Theme for antd
|
||||
// https://ant.design/docs/react/customize-theme
|
||||
theme: lessToJs(
|
||||
theme: {
|
||||
...v4Token,
|
||||
...lessToJs(
|
||||
fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
|
||||
),
|
||||
)
|
||||
},
|
||||
webpack5: {},
|
||||
mfsu: {},
|
||||
chainWebpack: function (config, { webpack }) {
|
||||
config.merge({
|
||||
!isDevelopment && config.merge({
|
||||
optimization: {
|
||||
minimize: true,
|
||||
minimize: false,
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
minSize: 30000,
|
||||
@@ -81,7 +91,7 @@ export default {
|
||||
react: {
|
||||
name: 'react',
|
||||
priority: 20,
|
||||
test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/,
|
||||
test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
|
||||
},
|
||||
antd: {
|
||||
name: 'antd',
|
||||
|
||||
@@ -65,6 +65,7 @@ npm run start
|
||||
|
||||
4. 启动完成后打开浏览器访问 [http://localhost:7000](http://localhost:7000)，如果需要更改启动端口，可在 `.env` 文件中配置。
|
||||
|
||||
5. 登录账号有2个，一个账号admin 密码admin;另一个账号guest 密码guest
|
||||
|
||||
> 更多信息请参考 [使用文档](https://doc.antd-admin.zuiidea.com/#/zh-cn/)。
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ An excellent front-end solution for enterprise applications.
|
||||
</div>
|
||||
|
||||
- Preview - [https://antd-admin.zuiidea.com](https://antd-admin.zuiidea.com)
|
||||
- Documentation - [https://doc.antd-admin.zuiidea.com](https://doc.antd-admin.zuiidea.com)
|
||||
- Documentation - [https://superlbr.gitee.io/antd-admin](https://superlbr.gitee.io/antd-admin)
|
||||
- FAQ - [https://doc.antd-admin.zuiidea.com/#/faq](https://doc.antd-admin.zuiidea.com/#/faq)
|
||||
- ChangeLog - [https://doc.antd-admin.zuiidea.com/#/change-log](https://doc.antd-admin.zuiidea.com/#/change-log)
|
||||
|
||||
@@ -65,6 +65,7 @@ npm run start
|
||||
|
||||
4. After the startup is complete, open a browser and visit [http://localhost:7000](http://localhost:7000), If you need to change the startup port, you can configure it in the `.env` file.
|
||||
|
||||
5. For login page, there're two account. Username: admin Password: admin / Username: guest Password: guest
|
||||
|
||||
> More instructions at [documentation](https://doc.antd-admin.zuiidea.com)。
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { formatter } from "@lingui/format-json"
|
||||
|
||||
export default {
|
||||
fallbackLocales: {
|
||||
default: "en",
|
||||
},
|
||||
sourceLocale: "en",
|
||||
locales: ["en", "zh", "pt-br"],
|
||||
catalogs: [
|
||||
{
|
||||
path: "src/locales/{locale}/messages",
|
||||
include: [
|
||||
"src/pages",
|
||||
"src/layouts",
|
||||
"src/components",
|
||||
"src/layouts",
|
||||
],
|
||||
},
|
||||
],
|
||||
format: formatter({ style: "minimal" }),
|
||||
}
|
||||
+63
-58
@@ -1,71 +1,82 @@
|
||||
{
|
||||
"name": "antd-admin",
|
||||
"version": "5.3.0",
|
||||
"version": "5.5.0",
|
||||
"license": "MIT",
|
||||
"description": "An admin dashboard application demo built upon Ant Design and UmiJS",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.2.2",
|
||||
"@lingui/react": "^3.7.0",
|
||||
"antd": "^4.0.0",
|
||||
"axios": "^0.21.0",
|
||||
"classnames": "^2.2.6",
|
||||
"@ant-design/icons": "^4.8.3",
|
||||
"@lingui/react": "^5.0.0",
|
||||
"@rc-component/picker": "^1.9.0",
|
||||
"antd": "^6.0.0",
|
||||
"axios": "^1.0.0",
|
||||
"classnames": "^2.5.1",
|
||||
"d3-shape": "^2.1.0",
|
||||
"dayjs": "^1.11.10",
|
||||
"draft-js": "^0.11.7",
|
||||
"draftjs-to-html": "^0.9.0",
|
||||
"draftjs-to-html": "^0.9.1",
|
||||
"draftjs-to-markdown": "^0.6.0",
|
||||
"dva-model-extend": "^0.1.2",
|
||||
"echarts": "^5.0.0",
|
||||
"echarts-for-react": "^3.0.0",
|
||||
"echarts-gl": "^2.0.2",
|
||||
"echarts-liquidfill": "^3.0.0",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts-for-react": "^3.0.2",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"enquire-js": "^0.2.1",
|
||||
"highcharts-exporting": "^0.1.7",
|
||||
"highcharts-more": "^0.1.7",
|
||||
"highcharts": "^11.2.0",
|
||||
"highcharts-react-official": "^3.2.3",
|
||||
"json-format": "^1.0.1",
|
||||
"lodash": "^4.17.11",
|
||||
"md5": "^2.2.1",
|
||||
"lodash": "^4.17.21",
|
||||
"make-plural": "^7.3.0",
|
||||
"md5": "^2.3.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "^6.1.0",
|
||||
"prop-types": "^15.7.0",
|
||||
"qs": "^6.9.0",
|
||||
"path-to-regexp": "^6.2.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"qs": "^6.12.0",
|
||||
"react": "^18.2.0",
|
||||
"react-adsense": "^0.1.0",
|
||||
"react-countup": "^4.2.0",
|
||||
"react-draft-wysiwyg": "^1.13.0",
|
||||
"react-helmet": "^6.0.0",
|
||||
"react-highcharts": "^16.1.0",
|
||||
"react-perfect-scrollbar": "^1.5.0",
|
||||
"recharts": "^2.0.0-beta.3",
|
||||
"store": "^2.0.0"
|
||||
"react-countup": "^4.4.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-draft-wysiwyg": "^1.15.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-perfect-scrollbar": "^1.5.8",
|
||||
"recharts": "^2.12.4",
|
||||
"store": "^2.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-react": "^7.12.13",
|
||||
"@lingui/cli": "^3.7.0",
|
||||
"@lingui/macro": "^3.7.2",
|
||||
"@umijs/preset-react": "^1.4.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-plugin-dev-expression": "^0.2.1",
|
||||
"babel-plugin-import": "^1.13.3",
|
||||
"babel-plugin-macros": "^3.0.1",
|
||||
"babel-plugin-module-resolver": "^4.0.0",
|
||||
"cross-env": "^7.0.0",
|
||||
"eslint": "^7.0.0",
|
||||
"@babel/core": "^7.29.0",
|
||||
"@babel/preset-react": "^7.24.1",
|
||||
"@lingui/cli": "^5.0.0",
|
||||
"@lingui/core": "^5.0.0",
|
||||
"@lingui/format-json": "^5.9.1",
|
||||
"@umijs/preset-react": "^1.8.32",
|
||||
"@lingui/macro": "^5.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-dev-expression": "^0.2.3",
|
||||
"babel-plugin-import": "^1.13.8",
|
||||
"babel-plugin-macros": "^3.1.0",
|
||||
"babel-plugin-module-resolver": "^4.1.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-react-app": "^6.0.0",
|
||||
"eslint-plugin-flowtype": "^5.1.0",
|
||||
"eslint-plugin-import": "^2.18.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.2.1",
|
||||
"eslint-plugin-react": "^7.14.0",
|
||||
"eslint-plugin-react-hooks": "^4.0.0",
|
||||
"husky": "^4.2.0",
|
||||
"eslint-plugin-flowtype": "^5.10.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.8.0",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"husky": "^4.3.8",
|
||||
"less-vars-to-js": "^1.3.0",
|
||||
"lint-staged": "^10.0.0",
|
||||
"puppeteer-core": "^24.37.2",
|
||||
"lint-staged": "^10.5.4",
|
||||
"mockjs": "^1.1.0",
|
||||
"module": "^1.2.5",
|
||||
"prettier": "^2.0.0",
|
||||
"stylelint": "^13.2.0",
|
||||
"stylelint-config-prettier": "^8.0.0",
|
||||
"prettier": "^2.8.8",
|
||||
"stylelint": "^13.13.1",
|
||||
"stylelint-config-prettier": "^8.0.2",
|
||||
"stylelint-config-standard": "^21.0.0",
|
||||
"typescript": "^4.2.3",
|
||||
"umi": "^3.2.0"
|
||||
"typescript": "^4.9.5",
|
||||
"umi": "^3.5.41"
|
||||
},
|
||||
"overrides": {
|
||||
"@babel/core": "^7.29.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
@@ -102,24 +113,18 @@
|
||||
"src/layouts"
|
||||
]
|
||||
}
|
||||
],
|
||||
"format": "minimal",
|
||||
"extractBabelOptions": {
|
||||
"presets": [
|
||||
"@umijs/babel-preset-umi",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"scripts": {
|
||||
"analyze": "cross-env ANALYZE=1 umi build",
|
||||
"build": "umi build",
|
||||
"build": "cross-env NODE_OPTIONS=--openssl-legacy-provider umi build",
|
||||
"check:model": "umi dva list model",
|
||||
"lint:js": "eslint --ext .js src",
|
||||
"lint:style": "stylelint \"src/**/*.less\" --syntax less",
|
||||
"start": "umi dev",
|
||||
"start": "cross-env NODE_OPTIONS=--openssl-legacy-provider umi dev",
|
||||
"test": "cross-env BABELRC=none umi test",
|
||||
"prettier": "prettier --write 'src/**/*.{js,less}'",
|
||||
"test:e2e": "node ./src/e2e/run-puppeteer.js",
|
||||
"precommit": "lint-staged",
|
||||
"add-locale": "lingui add-locale",
|
||||
"extract": "lingui extract",
|
||||
|
||||
@@ -9,14 +9,10 @@ const DropOption = ({
|
||||
buttonStyle,
|
||||
dropdownProps,
|
||||
}) => {
|
||||
const menu = menuOptions.map(item => (
|
||||
<Menu.Item key={item.key}>{item.name}</Menu.Item>
|
||||
))
|
||||
const items = menuOptions.map(item => ({ key: item.key, label: item.name }))
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
|
||||
{...dropdownProps}
|
||||
>
|
||||
<Dropdown overlay={<Menu onClick={onMenuClick} items={items} />} {...dropdownProps}>
|
||||
<Button style={{ border: 'none', ...buttonStyle }}>
|
||||
<BarsOutlined style={{ marginRight: 2 }} />
|
||||
<DownOutlined />
|
||||
|
||||
@@ -40,7 +40,9 @@ export const cutStrByFullLength = (str = '', maxLength) => {
|
||||
|
||||
const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
|
||||
if (tooltip) {
|
||||
const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
|
||||
const base = tooltip === true ? {} : { ...tooltip };
|
||||
const styleProp = overlayStyle ? { styles: { root: overlayStyle } } : {};
|
||||
const props = { ...base, ...styleProp, title };
|
||||
return <Tooltip {...props}>{children}</Tooltip>;
|
||||
}
|
||||
return children;
|
||||
@@ -63,17 +65,17 @@ const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other })
|
||||
}
|
||||
|
||||
const spanAttrs = tooltip ? {} : { ...other };
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: (
|
||||
<span {...spanAttrs}>
|
||||
{displayText}
|
||||
{tail}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: (
|
||||
<span {...spanAttrs}>
|
||||
{displayText}
|
||||
{tail}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
export default class Ellipsis extends Component {
|
||||
|
||||
@@ -13,6 +13,7 @@ const GlobalFooter = ({ className, links, copyright }) => {
|
||||
key={link.key}
|
||||
title={link.key}
|
||||
target={link.blankTarget ? '_blank' : '_self'}
|
||||
rel={link.blankTarget ? 'noreferrer noopener' : undefined}
|
||||
href={link.href}
|
||||
>
|
||||
{link.title}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
/* @import '~antd/lib/style/themes/default.less'; */
|
||||
|
||||
.globalFooter {
|
||||
margin: 48px 0 24px 0;
|
||||
|
||||
@@ -2,37 +2,32 @@ import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Breadcrumb } from 'antd'
|
||||
import { Link, withRouter } from 'umi'
|
||||
import { t } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import iconMap from 'utils/iconMap'
|
||||
const { pathToRegexp } = require('path-to-regexp')
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import { queryAncestors } from 'utils'
|
||||
import styles from './Bread.less'
|
||||
|
||||
@withRouter
|
||||
class Bread extends PureComponent {
|
||||
generateBreadcrumbs = (paths) => {
|
||||
return paths.map((item, key) => {
|
||||
const content = item && (
|
||||
<Fragment>
|
||||
{item.icon && (
|
||||
<span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>
|
||||
)}
|
||||
{item.name}
|
||||
</Fragment>
|
||||
)
|
||||
generateBreadcrumbItems = paths => {
|
||||
return paths
|
||||
.map((item, key) => {
|
||||
if (!item) return null
|
||||
|
||||
return (
|
||||
item && (
|
||||
<Breadcrumb.Item key={key}>
|
||||
{paths.length - 1 !== key ? (
|
||||
<Link to={item.route || '#'}>{content}</Link>
|
||||
) : (
|
||||
content
|
||||
)}
|
||||
</Breadcrumb.Item>
|
||||
const content = (
|
||||
<Fragment>
|
||||
{item.icon && <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>}
|
||||
{item.name}
|
||||
</Fragment>
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
return ({
|
||||
key: item.id || key,
|
||||
title: paths.length - 1 !== key ? <Link to={item.route || '#'}>{content}</Link> : content,
|
||||
})
|
||||
})
|
||||
.filter(Boolean)
|
||||
}
|
||||
render() {
|
||||
const { routeList, location } = this.props
|
||||
@@ -49,15 +44,13 @@ class Bread extends PureComponent {
|
||||
routeList[0],
|
||||
{
|
||||
id: 404,
|
||||
name: t`Not Found`,
|
||||
name: i18n._('Not Found'),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Breadcrumb className={styles.bread}>
|
||||
{this.generateBreadcrumbs(paths)}
|
||||
</Breadcrumb>
|
||||
)
|
||||
const items = this.generateBreadcrumbItems(paths)
|
||||
|
||||
return <Breadcrumb className={styles.bread} items={items} />
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -8,14 +8,14 @@ import {
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { getLocale, setLocale } from 'utils'
|
||||
import moment from 'moment'
|
||||
import dayjs from 'dayjs'
|
||||
import classnames from 'classnames'
|
||||
import config from 'config'
|
||||
import styles from './Header.less'
|
||||
|
||||
const { SubMenu } = Menu
|
||||
|
||||
|
||||
class Header extends PureComponent {
|
||||
handleClickMenu = e => {
|
||||
@@ -32,26 +32,29 @@ class Header extends PureComponent {
|
||||
onAllNotificationsRead,
|
||||
} = this.props
|
||||
|
||||
const rightContent = [
|
||||
<Menu key="user" mode="horizontal" onClick={this.handleClickMenu}>
|
||||
<SubMenu
|
||||
title={
|
||||
<Fragment>
|
||||
<span style={{ color: '#999', marginRight: 4 }}>
|
||||
<Trans>Hi,</Trans>
|
||||
</span>
|
||||
<span>{username}</span>
|
||||
<Avatar style={{ marginLeft: 8 }} src={avatar} />
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
<Menu.Item key="SignOut">
|
||||
<Trans>Sign out</Trans>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>,
|
||||
const userMenuItems = [
|
||||
{
|
||||
key: 'user',
|
||||
label: (
|
||||
<Fragment>
|
||||
<span style={{ color: '#999', marginRight: 4 }}>
|
||||
{i18n._('Hi,')}
|
||||
</span>
|
||||
<span>{username}</span>
|
||||
<Avatar style={{ marginLeft: 8 }} src={avatar} />
|
||||
</Fragment>
|
||||
),
|
||||
children: [
|
||||
{
|
||||
key: 'SignOut',
|
||||
label: i18n._('Sign out'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const rightContent = [<Menu key="user" mode="horizontal" onClick={this.handleClickMenu} items={userMenuItems} />]
|
||||
|
||||
if (config.i18n) {
|
||||
const { languages } = config.i18n
|
||||
const language = getLocale()
|
||||
@@ -59,6 +62,22 @@ class Header extends PureComponent {
|
||||
item => item.key === language
|
||||
)
|
||||
|
||||
const languageItems = [
|
||||
{
|
||||
key: 'language',
|
||||
label: <Avatar size="small" src={currentLanguage.flag} />,
|
||||
children: languages.map(item => ({
|
||||
key: item.key,
|
||||
label: (
|
||||
<>
|
||||
<Avatar size="small" style={{ marginRight: 8 }} src={item.flag} />
|
||||
{item.title}
|
||||
</>
|
||||
),
|
||||
})),
|
||||
},
|
||||
]
|
||||
|
||||
rightContent.unshift(
|
||||
<Menu
|
||||
key="language"
|
||||
@@ -67,20 +86,8 @@ class Header extends PureComponent {
|
||||
setLocale(data.key)
|
||||
}}
|
||||
mode="horizontal"
|
||||
>
|
||||
<SubMenu title={<Avatar size="small" src={currentLanguage.flag} />}>
|
||||
{languages.map(item => (
|
||||
<Menu.Item key={item.key}>
|
||||
<Avatar
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
src={item.flag}
|
||||
/>
|
||||
{item.title}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
items={languageItems}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -97,7 +104,7 @@ class Header extends PureComponent {
|
||||
itemLayout="horizontal"
|
||||
dataSource={notifications}
|
||||
locale={{
|
||||
emptyText: <Trans>You have viewed all notifications.</Trans>,
|
||||
emptyText: i18n._('You have viewed all notifications.'),
|
||||
}}
|
||||
renderItem={item => (
|
||||
<List.Item className={styles.notificationItem}>
|
||||
@@ -107,7 +114,7 @@ class Header extends PureComponent {
|
||||
{item.title}
|
||||
</Ellipsis>
|
||||
}
|
||||
description={moment(item.date).fromNow()}
|
||||
description={dayjs(item.date).fromNow()}
|
||||
/>
|
||||
<RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
|
||||
</List.Item>
|
||||
@@ -118,7 +125,7 @@ class Header extends PureComponent {
|
||||
onClick={onAllNotificationsRead}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
<Trans>Clear notifications</Trans>
|
||||
{i18n._('Clear notifications')}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
@@ -141,6 +148,7 @@ class Header extends PureComponent {
|
||||
[styles.fixed]: fixed,
|
||||
[styles.collapsed]: collapsed,
|
||||
})}
|
||||
style={{height: 72, backgroundColor: 'white', paddingInline: 0}}
|
||||
id="layoutHeader"
|
||||
>
|
||||
<div
|
||||
|
||||
@@ -27,6 +27,8 @@
|
||||
:global {
|
||||
.ant-menu-submenu-title {
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal {
|
||||
|
||||
@@ -7,7 +7,7 @@ import { arrayToTree, queryAncestors } from 'utils'
|
||||
import iconMap from 'utils/iconMap'
|
||||
import store from 'store'
|
||||
|
||||
const { SubMenu } = Menu
|
||||
// Use `items` prop for Menu (avoid JSX children like Menu.Item/SubMenu)
|
||||
|
||||
@withRouter
|
||||
class SiderMenu extends PureComponent {
|
||||
@@ -34,31 +34,30 @@ class SiderMenu extends PureComponent {
|
||||
store.set('openKeys', newOpenKeys)
|
||||
}
|
||||
|
||||
generateMenus = data => {
|
||||
generateMenuItems = data => {
|
||||
return data.map(item => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<SubMenu
|
||||
key={item.id}
|
||||
title={
|
||||
<Fragment>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
{this.generateMenus(item.children)}
|
||||
</SubMenu>
|
||||
)
|
||||
return {
|
||||
key: item.id,
|
||||
label: (
|
||||
<Fragment>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</Fragment>
|
||||
),
|
||||
children: this.generateMenuItems(item.children),
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Menu.Item key={item.id}>
|
||||
|
||||
return {
|
||||
key: item.id,
|
||||
label: (
|
||||
<NavLink to={item.route || '#'}>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</NavLink>
|
||||
</Menu.Item>
|
||||
)
|
||||
),
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -91,6 +90,8 @@ class SiderMenu extends PureComponent {
|
||||
openKeys: this.state.openKeys,
|
||||
}
|
||||
|
||||
const items = this.generateMenuItems(menuTree)
|
||||
|
||||
return (
|
||||
<Menu
|
||||
mode="inline"
|
||||
@@ -104,10 +105,9 @@ class SiderMenu extends PureComponent {
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
items={items}
|
||||
{...menuProps}
|
||||
>
|
||||
{this.generateMenus(menuTree)}
|
||||
</Menu>
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Switch, Layout } from 'antd'
|
||||
import { t } from "@lingui/macro"
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { BulbOutlined } from '@ant-design/icons'
|
||||
import ScrollBar from '../ScrollBar'
|
||||
import { config } from 'utils'
|
||||
@@ -28,7 +27,7 @@ class Sider extends PureComponent {
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onBreakpoint={!isMobile && onCollapseChange}
|
||||
onBreakpoint={!isMobile ? onCollapseChange : (broken) => {}}
|
||||
className={styles.sider}
|
||||
>
|
||||
<div className={styles.brand}>
|
||||
@@ -58,7 +57,7 @@ class Sider extends PureComponent {
|
||||
<div className={styles.switchTheme}>
|
||||
<span>
|
||||
<BulbOutlined />
|
||||
<Trans>Switch Theme</Trans>
|
||||
{i18n._('Switch Theme')}
|
||||
</span>
|
||||
<Switch
|
||||
onChange={onThemeChange.bind(
|
||||
@@ -66,8 +65,8 @@ class Sider extends PureComponent {
|
||||
theme === 'dark' ? 'light' : 'dark'
|
||||
)}
|
||||
defaultChecked={theme === 'dark'}
|
||||
checkedChildren={t`Dark`}
|
||||
unCheckedChildren={t`Light`}
|
||||
checkedChildren={i18n._('Dark')}
|
||||
unCheckedChildren={i18n._('Light')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import puppeteer from 'puppeteer'
|
||||
|
||||
describe('Login', () => {
|
||||
let browser
|
||||
let page
|
||||
|
||||
beforeAll(async () => {
|
||||
browser = await puppeteer.launch({ args: ['--no-sandbox'] })
|
||||
})
|
||||
|
||||
beforeEach(async () => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('http://localhost:8000/en/login', {
|
||||
waitUntil: 'networkidle2',
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(() => page.close())
|
||||
|
||||
it('should login with failure', async () => {
|
||||
await page.waitFor(selector => !!document.querySelector('#username'), {
|
||||
timeout: 3000,
|
||||
})
|
||||
await page.type('#username', 'wrong_user')
|
||||
await page.type('#password', 'wrong_password')
|
||||
await page.click('button[type="button"]')
|
||||
await page.waitForSelector('.anticon-close-circle') // should display error
|
||||
})
|
||||
|
||||
it('should login successfully', async () => {
|
||||
await page.waitForSelector('#username', { timeout: 3000 })
|
||||
await page.type('#username', 'admin')
|
||||
await page.type('#password', 'admin')
|
||||
await page.click('button[type="button"]')
|
||||
await page.waitForSelector('.ant-layout-footer')
|
||||
const text = await page.evaluate(() => document.body.innerHTML)
|
||||
expect(text).toContain('Ant Design Admin')
|
||||
})
|
||||
|
||||
afterAll(() => browser.close())
|
||||
})
|
||||
@@ -0,0 +1,26 @@
|
||||
#!/usr/bin/env node
|
||||
const puppeteer = require('puppeteer-core');
|
||||
|
||||
(async () => {
|
||||
// Use CHROME_PATH env var if provided, otherwise default macOS Chrome path
|
||||
const executablePath = process.env.CHROME_PATH || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
|
||||
const url = process.env.E2E_URL || 'http://localhost:7000';
|
||||
|
||||
try {
|
||||
const browser = await puppeteer.launch({
|
||||
executablePath,
|
||||
headless: true,
|
||||
args: ['--no-sandbox', '--disable-setuid-sandbox'],
|
||||
});
|
||||
const page = await browser.newPage();
|
||||
await page.goto(url, { waitUntil: 'networkidle2' });
|
||||
const title = await page.title();
|
||||
console.log('E2E: page title =>', title);
|
||||
await browser.close();
|
||||
if (!/antd-admin/i.test(title)) process.exit(1);
|
||||
process.exit(0);
|
||||
} catch (err) {
|
||||
console.error('E2E error:', err);
|
||||
process.exit(1);
|
||||
}
|
||||
})();
|
||||
@@ -1,13 +1,11 @@
|
||||
/* global window */
|
||||
/* global document */
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { withRouter } from 'umi'
|
||||
import { connect } from 'umi'
|
||||
import { MyLayout, GlobalFooter } from 'components'
|
||||
import { BackTop, Layout, Drawer } from 'antd'
|
||||
import { Drawer, FloatButton, Layout } from 'antd';
|
||||
import { enquireScreen, unenquireScreen } from 'enquire-js'
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import { config, getLocale } from 'utils'
|
||||
import Error from '../pages/404'
|
||||
import styles from './PrimaryLayout.less'
|
||||
@@ -112,17 +110,17 @@ class PrimaryLayout extends PureComponent {
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
(<Fragment>
|
||||
<Layout>
|
||||
{isMobile ? (
|
||||
<Drawer
|
||||
maskClosable
|
||||
mask={{ closable: true }}
|
||||
closable={false}
|
||||
onClose={onCollapseChange.bind(this, !collapsed)}
|
||||
visible={!collapsed}
|
||||
open={!collapsed}
|
||||
placement="left"
|
||||
width={200}
|
||||
style={{
|
||||
rootStyle={{
|
||||
padding: 0,
|
||||
height: '100vh',
|
||||
}}
|
||||
@@ -142,7 +140,7 @@ class PrimaryLayout extends PureComponent {
|
||||
<Bread routeList={newRouteList} />
|
||||
{hasPermission ? children : <Error />}
|
||||
</Content>
|
||||
<BackTop
|
||||
<FloatButton.BackTop
|
||||
className={styles.backTop}
|
||||
target={() => document.querySelector('#primaryLayout')}
|
||||
/>
|
||||
@@ -152,8 +150,8 @@ class PrimaryLayout extends PureComponent {
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
</Fragment>
|
||||
)
|
||||
</Fragment>)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export default ({ children }) => {
|
||||
return children
|
||||
}
|
||||
const PublicLayout = ({ children }) => children
|
||||
|
||||
export default PublicLayout
|
||||
|
||||
+51
-41
@@ -4,75 +4,85 @@ import { ConfigProvider } from 'antd'
|
||||
import { i18n } from "@lingui/core"
|
||||
import { I18nProvider } from '@lingui/react'
|
||||
import { getLocale } from 'utils'
|
||||
import config from 'utils/config'
|
||||
import { zh, en, pt } from 'make-plural/plurals'
|
||||
import zh_CN from 'antd/lib/locale-provider/zh_CN'
|
||||
import en_US from 'antd/lib/locale-provider/en_US'
|
||||
import pt_BR from 'antd/lib/locale-provider/pt_BR'
|
||||
import enMessages from '../locales/en/messages.json'
|
||||
import zhMessages from '../locales/zh/messages.json'
|
||||
import ptMessages from '../locales/pt-br/messages.json'
|
||||
import zhCN from 'antd/locale/zh_CN'
|
||||
import enUS from 'antd/locale/en_US'
|
||||
import ptBR from 'antd/locale/pt_BR'
|
||||
|
||||
import BaseLayout from './BaseLayout'
|
||||
|
||||
const plurals = {
|
||||
zh,
|
||||
en,
|
||||
'pt-br': pt,
|
||||
i18n.loadLocaleData({
|
||||
en: { plurals: en },
|
||||
zh: { plurals: zh },
|
||||
'pt-br': { plurals: pt }
|
||||
})
|
||||
|
||||
// Activate the default language synchronously so I18nProvider doesn't render `null` in dev.
|
||||
// Avoid activating the user-selected language here because its messages may not be loaded yet.
|
||||
const configuredDefault = (config && config.i18n && config.i18n.defaultLanguage) || 'en'
|
||||
const _catalogs = {
|
||||
en: enMessages,
|
||||
zh: zhMessages,
|
||||
'pt-br': ptMessages,
|
||||
}
|
||||
try {
|
||||
const initialCatalog = _catalogs[configuredDefault]
|
||||
if (initialCatalog) {
|
||||
i18n.load(configuredDefault, initialCatalog)
|
||||
}
|
||||
i18n.activate(configuredDefault)
|
||||
} catch (e) {
|
||||
// ignore activation errors during bootstrap
|
||||
}
|
||||
|
||||
// antd
|
||||
const languages = {
|
||||
zh: zh_CN,
|
||||
en: en_US,
|
||||
'pt-br': pt_BR,
|
||||
zh: zhCN,
|
||||
en: enUS,
|
||||
'pt-br': ptBR
|
||||
}
|
||||
const { defaultLanguage } = i18n
|
||||
|
||||
// remove unused defaultLanguage
|
||||
|
||||
@withRouter
|
||||
class Layout extends Component {
|
||||
state = {
|
||||
}
|
||||
|
||||
language = defaultLanguage
|
||||
|
||||
componentDidMount() {
|
||||
const language = getLocale()
|
||||
this.language = language
|
||||
language && this.loadCatalog(language)
|
||||
let language = getLocale()
|
||||
if (!languages[language]) language = configuredDefault
|
||||
this.loadCatalog(language).catch(() => {})
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
const language = getLocale()
|
||||
const preLanguage = this.language
|
||||
loadCatalog = async (lan) => {
|
||||
const language = lan || i18n.defaultLanguage
|
||||
try {
|
||||
const catalogModule = await import(`../locales/${language}/messages.json`)
|
||||
const catalog = catalogModule && catalogModule.default ? catalogModule.default : catalogModule
|
||||
|
||||
if (preLanguage !== language && !languages[language]) {
|
||||
language && this.loadCatalog(language)
|
||||
this.language = language
|
||||
return false
|
||||
i18n.load(language, catalog)
|
||||
i18n.activate(language)
|
||||
} catch (err) {
|
||||
// If loading fails, fall back to default language and log a warning.
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(`Failed to load messages for locale "${language}":`, err)
|
||||
}
|
||||
this.language = language
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
loadCatalog = async language => {
|
||||
const catalog = await import(
|
||||
`../locales/${language}/messages.json`
|
||||
)
|
||||
|
||||
i18n.load(language, catalog)
|
||||
i18n.activate(language)
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children } = this.props
|
||||
|
||||
let language = getLocale()
|
||||
// If the language pack is not loaded or is loading, use the default language
|
||||
if (!languages[language]) language = defaultLanguage
|
||||
|
||||
i18n.loadLocaleData(language, { plurals: plurals[language] })
|
||||
i18n.load(language, languages[language])
|
||||
i18n.activate(language)
|
||||
if (!languages[language]) language = configuredDefault
|
||||
|
||||
return (
|
||||
<ConfigProvider locale={language}>
|
||||
<ConfigProvider locale={languages[language]}>
|
||||
<I18nProvider i18n={i18n}>
|
||||
<BaseLayout>{children}</BaseLayout>
|
||||
</I18nProvider>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"Password": "Password",
|
||||
"/dashboard": "/dashboard",
|
||||
"Add Param": "Add Param",
|
||||
"Address": "Address",
|
||||
@@ -26,7 +27,6 @@
|
||||
"Not Found": "Not Found",
|
||||
"Operation": "Operation",
|
||||
"Params": "Params",
|
||||
"Password": "Password",
|
||||
"Phone": "Phone",
|
||||
"Pick an address": "Pick an address",
|
||||
"Please pick an address": "Please pick an address",
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"Password": "Senha",
|
||||
"/dashboard": "/dashboard",
|
||||
"Add Param": "Add Parametro",
|
||||
"Address": "Endereço",
|
||||
@@ -26,7 +27,6 @@
|
||||
"Not Found": "Não Encontrado",
|
||||
"Operation": "Operation",
|
||||
"Params": "Parametros",
|
||||
"Password": "Senha",
|
||||
"Phone": "Fone",
|
||||
"Pick an address": "Escolha um endereço",
|
||||
"Please pick an address": "Por favor, escolha um endereço",
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"Password": "密码",
|
||||
"/dashboard": "/zh/dashboard",
|
||||
"Add Param": "添加参数",
|
||||
"Address": "地址",
|
||||
@@ -26,7 +27,6 @@
|
||||
"Not Found": "未找到",
|
||||
"Operation": "操作",
|
||||
"Params": "参数",
|
||||
"Password": "密码",
|
||||
"Phone": "电话",
|
||||
"Pick an address": "选择地址",
|
||||
"Please pick an address": "选择地址",
|
||||
|
||||
+5
-5
@@ -1,9 +1,7 @@
|
||||
/* global window */
|
||||
|
||||
import { history } from 'umi'
|
||||
import { stringify } from 'qs'
|
||||
import store from 'store'
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import { ROLE_TYPE } from 'utils/constant'
|
||||
import { queryLayout } from 'utils'
|
||||
import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
|
||||
@@ -20,7 +18,7 @@ const goDashboard = () => {
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
const appModel = {
|
||||
namespace: 'app',
|
||||
state: {
|
||||
routeList: [
|
||||
@@ -69,7 +67,7 @@ export default {
|
||||
|
||||
cancelRequest.forEach((value, key) => {
|
||||
if (value.pathname !== window.location.pathname) {
|
||||
value.cancel(CANCEL_REQUEST_MESSAGE)
|
||||
value.abort(CANCEL_REQUEST_MESSAGE)
|
||||
cancelRequest.delete(key)
|
||||
}
|
||||
})
|
||||
@@ -158,3 +156,5 @@ export default {
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default appModel
|
||||
|
||||
@@ -1,321 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('./map/js/china.js')
|
||||
|
||||
const AirportCoordComponent = () => {
|
||||
let geoCoordMap = {
|
||||
上海: [121.4648, 31.2891],
|
||||
东莞: [113.8953, 22.901],
|
||||
东营: [118.7073, 37.5513],
|
||||
中山: [113.4229, 22.478],
|
||||
临汾: [111.4783, 36.1615],
|
||||
临沂: [118.3118, 35.2936],
|
||||
丹东: [124.541, 40.4242],
|
||||
丽水: [119.5642, 28.1854],
|
||||
乌鲁木齐: [87.9236, 43.5883],
|
||||
佛山: [112.8955, 23.1097],
|
||||
保定: [115.0488, 39.0948],
|
||||
兰州: [103.5901, 36.3043],
|
||||
包头: [110.3467, 41.4899],
|
||||
北京: [116.4551, 40.2539],
|
||||
北海: [109.314, 21.6211],
|
||||
南京: [118.8062, 31.9208],
|
||||
南宁: [108.479, 23.1152],
|
||||
南昌: [116.0046, 28.6633],
|
||||
南通: [121.1023, 32.1625],
|
||||
厦门: [118.1689, 24.6478],
|
||||
台州: [121.1353, 28.6688],
|
||||
合肥: [117.29, 32.0581],
|
||||
呼和浩特: [111.4124, 40.4901],
|
||||
咸阳: [108.4131, 34.8706],
|
||||
哈尔滨: [127.9688, 45.368],
|
||||
唐山: [118.4766, 39.6826],
|
||||
嘉兴: [120.9155, 30.6354],
|
||||
大同: [113.7854, 39.8035],
|
||||
大连: [122.2229, 39.4409],
|
||||
天津: [117.4219, 39.4189],
|
||||
太原: [112.3352, 37.9413],
|
||||
威海: [121.9482, 37.1393],
|
||||
宁波: [121.5967, 29.6466],
|
||||
宝鸡: [107.1826, 34.3433],
|
||||
宿迁: [118.5535, 33.7775],
|
||||
常州: [119.4543, 31.5582],
|
||||
广州: [113.5107, 23.2196],
|
||||
廊坊: [116.521, 39.0509],
|
||||
延安: [109.1052, 36.4252],
|
||||
张家口: [115.1477, 40.8527],
|
||||
徐州: [117.5208, 34.3268],
|
||||
德州: [116.6858, 37.2107],
|
||||
惠州: [114.6204, 23.1647],
|
||||
成都: [103.9526, 30.7617],
|
||||
扬州: [119.4653, 32.8162],
|
||||
承德: [117.5757, 41.4075],
|
||||
拉萨: [91.1865, 30.1465],
|
||||
无锡: [120.3442, 31.5527],
|
||||
日照: [119.2786, 35.5023],
|
||||
昆明: [102.9199, 25.4663],
|
||||
杭州: [119.5313, 29.8773],
|
||||
枣庄: [117.323, 34.8926],
|
||||
柳州: [109.3799, 24.9774],
|
||||
株洲: [113.5327, 27.0319],
|
||||
武汉: [114.3896, 30.6628],
|
||||
汕头: [117.1692, 23.3405],
|
||||
江门: [112.6318, 22.1484],
|
||||
沈阳: [123.1238, 42.1216],
|
||||
沧州: [116.8286, 38.2104],
|
||||
河源: [114.917, 23.9722],
|
||||
泉州: [118.3228, 25.1147],
|
||||
泰安: [117.0264, 36.0516],
|
||||
泰州: [120.0586, 32.5525],
|
||||
济南: [117.1582, 36.8701],
|
||||
济宁: [116.8286, 35.3375],
|
||||
海口: [110.3893, 19.8516],
|
||||
淄博: [118.0371, 36.6064],
|
||||
淮安: [118.927, 33.4039],
|
||||
深圳: [114.5435, 22.5439],
|
||||
清远: [112.9175, 24.3292],
|
||||
温州: [120.498, 27.8119],
|
||||
渭南: [109.7864, 35.0299],
|
||||
湖州: [119.8608, 30.7782],
|
||||
湘潭: [112.5439, 27.7075],
|
||||
滨州: [117.8174, 37.4963],
|
||||
潍坊: [119.0918, 36.524],
|
||||
烟台: [120.7397, 37.5128],
|
||||
玉溪: [101.9312, 23.8898],
|
||||
珠海: [113.7305, 22.1155],
|
||||
盐城: [120.2234, 33.5577],
|
||||
盘锦: [121.9482, 41.0449],
|
||||
石家庄: [114.4995, 38.1006],
|
||||
福州: [119.4543, 25.9222],
|
||||
秦皇岛: [119.2126, 40.0232],
|
||||
绍兴: [120.564, 29.7565],
|
||||
聊城: [115.9167, 36.4032],
|
||||
肇庆: [112.1265, 23.5822],
|
||||
舟山: [122.2559, 30.2234],
|
||||
苏州: [120.6519, 31.3989],
|
||||
莱芜: [117.6526, 36.2714],
|
||||
菏泽: [115.6201, 35.2057],
|
||||
营口: [122.4316, 40.4297],
|
||||
葫芦岛: [120.1575, 40.578],
|
||||
衡水: [115.8838, 37.7161],
|
||||
衢州: [118.6853, 28.8666],
|
||||
西宁: [101.4038, 36.8207],
|
||||
西安: [109.1162, 34.2004],
|
||||
贵阳: [106.6992, 26.7682],
|
||||
连云港: [119.1248, 34.552],
|
||||
邢台: [114.8071, 37.2821],
|
||||
邯郸: [114.4775, 36.535],
|
||||
郑州: [113.4668, 34.6234],
|
||||
鄂尔多斯: [108.9734, 39.2487],
|
||||
重庆: [107.7539, 30.1904],
|
||||
金华: [120.0037, 29.1028],
|
||||
铜川: [109.0393, 35.1947],
|
||||
银川: [106.3586, 38.1775],
|
||||
镇江: [119.4763, 31.9702],
|
||||
长春: [125.8154, 44.2584],
|
||||
长沙: [113.0823, 28.2568],
|
||||
长治: [112.8625, 36.4746],
|
||||
阳泉: [113.4778, 38.0951],
|
||||
青岛: [120.4651, 36.3373],
|
||||
韶关: [113.7964, 24.7028],
|
||||
}
|
||||
|
||||
let BJData = [
|
||||
[{ name: '北京' }, { name: '上海', value: 95 }],
|
||||
[{ name: '北京' }, { name: '广州', value: 90 }],
|
||||
[{ name: '北京' }, { name: '大连', value: 80 }],
|
||||
[{ name: '北京' }, { name: '南宁', value: 70 }],
|
||||
[{ name: '北京' }, { name: '南昌', value: 60 }],
|
||||
[{ name: '北京' }, { name: '拉萨', value: 50 }],
|
||||
[{ name: '北京' }, { name: '长春', value: 40 }],
|
||||
[{ name: '北京' }, { name: '包头', value: 30 }],
|
||||
[{ name: '北京' }, { name: '重庆', value: 20 }],
|
||||
[{ name: '北京' }, { name: '常州', value: 10 }],
|
||||
]
|
||||
|
||||
let SHData = [
|
||||
[{ name: '上海' }, { name: '包头', value: 95 }],
|
||||
[{ name: '上海' }, { name: '昆明', value: 90 }],
|
||||
[{ name: '上海' }, { name: '广州', value: 80 }],
|
||||
[{ name: '上海' }, { name: '郑州', value: 70 }],
|
||||
[{ name: '上海' }, { name: '长春', value: 60 }],
|
||||
[{ name: '上海' }, { name: '重庆', value: 50 }],
|
||||
[{ name: '上海' }, { name: '长沙', value: 40 }],
|
||||
[{ name: '上海' }, { name: '北京', value: 30 }],
|
||||
[{ name: '上海' }, { name: '丹东', value: 20 }],
|
||||
[{ name: '上海' }, { name: '大连', value: 10 }],
|
||||
]
|
||||
|
||||
let GZData = [
|
||||
[{ name: '广州' }, { name: '福州', value: 95 }],
|
||||
[{ name: '广州' }, { name: '太原', value: 90 }],
|
||||
[{ name: '广州' }, { name: '长春', value: 80 }],
|
||||
[{ name: '广州' }, { name: '重庆', value: 70 }],
|
||||
[{ name: '广州' }, { name: '西安', value: 60 }],
|
||||
[{ name: '广州' }, { name: '成都', value: 50 }],
|
||||
[{ name: '广州' }, { name: '常州', value: 40 }],
|
||||
[{ name: '广州' }, { name: '北京', value: 30 }],
|
||||
[{ name: '广州' }, { name: '北海', value: 20 }],
|
||||
[{ name: '广州' }, { name: '海口', value: 10 }],
|
||||
]
|
||||
|
||||
let planePath =
|
||||
'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
|
||||
|
||||
let convertData = function(data) {
|
||||
let res = []
|
||||
for (let i = 0; i < data.length; i += 1) {
|
||||
let dataItem = data[i]
|
||||
let fromCoord = geoCoordMap[dataItem[0].name]
|
||||
let toCoord = geoCoordMap[dataItem[1].name]
|
||||
if (fromCoord && toCoord) {
|
||||
res.push({
|
||||
fromName: dataItem[0].name,
|
||||
toName: dataItem[1].name,
|
||||
coords: [fromCoord, toCoord],
|
||||
})
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
let color = ['#a6c84c', '#ffa022', '#46bee9']
|
||||
let series = []
|
||||
;[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach((item, i) => {
|
||||
series.push(
|
||||
{
|
||||
name: `${item[0]} Top10`,
|
||||
type: 'lines',
|
||||
zlevel: 1,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0.7,
|
||||
color: '#fff',
|
||||
symbolSize: 3,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 0,
|
||||
curveness: 0.2,
|
||||
},
|
||||
},
|
||||
data: convertData(item[1]),
|
||||
},
|
||||
{
|
||||
name: `${item[0]} Top10`,
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolSize: 10,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 6,
|
||||
trailLength: 0,
|
||||
symbol: planePath,
|
||||
symbolSize: 15,
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
width: 1,
|
||||
opacity: 0.6,
|
||||
curveness: 0.2,
|
||||
},
|
||||
},
|
||||
data: convertData(item[1]),
|
||||
},
|
||||
{
|
||||
name: `${item[0]} Top10`,
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
zlevel: 2,
|
||||
rippleEffect: {
|
||||
brushType: 'stroke',
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
},
|
||||
},
|
||||
symbolSize(val) {
|
||||
return val[2] / 8
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
data: item[1].map(dataItem => {
|
||||
return {
|
||||
name: dataItem[1].name,
|
||||
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
|
||||
}
|
||||
}),
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
let option = {
|
||||
backgroundColor: '#404a59',
|
||||
title: {
|
||||
text: '模拟迁徙',
|
||||
subtext: '数据纯属虚构',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'bottom',
|
||||
left: 'right',
|
||||
data: ['北京 Top10', '上海 Top10', '广州 Top10'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
selectedMode: 'single',
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#323c48',
|
||||
borderColor: '#404a59',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2a333d',
|
||||
},
|
||||
},
|
||||
},
|
||||
series,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> render a airport chart. </label>
|
||||
<ReactEcharts
|
||||
option={option}
|
||||
style={{ height: '700px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AirportCoordComponent
|
||||
@@ -88,8 +88,8 @@ const option = {
|
||||
symbolSize(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter(param) {
|
||||
return param.data[3]
|
||||
@@ -98,21 +98,19 @@ const option = {
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -122,8 +120,8 @@ const option = {
|
||||
symbolSize(data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter(param) {
|
||||
return param.data[3]
|
||||
@@ -132,21 +130,19 @@ const option = {
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@@ -29,23 +29,19 @@ class ChartAPIComponent extends React.Component {
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}预期',
|
||||
},
|
||||
emphasis: {
|
||||
formatter: '{b}预期',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{b}预期: {c}%',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
opacity: 0.7,
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: '访问' },
|
||||
@@ -62,24 +58,20 @@ class ChartAPIComponent extends React.Component {
|
||||
width: '80%',
|
||||
maxSize: '80%',
|
||||
label: {
|
||||
normal: {
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
position: 'inside',
|
||||
formatter: '{c}%',
|
||||
color: '#fff',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
position: 'inside',
|
||||
formatter: '{b}实际: {c}%',
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
opacity: 0.5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
data: [
|
||||
{ value: 30, name: '访问' },
|
||||
|
||||
@@ -29,13 +29,15 @@ class ChartShowLoadingComponent extends React.Component {
|
||||
},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: '销售（sales）', max: 6500 },
|
||||
{ name: '销售（sales）', max: 7000 },
|
||||
{ name: '管理（Administration）', max: 16000 },
|
||||
{ name: '信息技术（Information Techology）', max: 30000 },
|
||||
{ name: '客服（Customer Support）', max: 38000 },
|
||||
{ name: '研发（Development）', max: 52000 },
|
||||
{ name: '市场（Marketing）', max: 25000 },
|
||||
],
|
||||
splitNumber: 5,
|
||||
alignTicks: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
@@ -3,14 +3,22 @@ import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
const ChartWithEventComponent = () => {
|
||||
const onChartReady = echart => {
|
||||
/* eslint-disable */
|
||||
console.log('echart is ready', echart)
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('echart is ready', echart)
|
||||
}
|
||||
}
|
||||
const onChartLegendselectchanged = (param, echart) => {
|
||||
console.log(param, echart)
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(param, echart)
|
||||
}
|
||||
}
|
||||
const onChartClick = (param, echart) => {
|
||||
console.log(param, echart)
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(param, echart)
|
||||
}
|
||||
}
|
||||
const getOtion = () => {
|
||||
const option = {
|
||||
@@ -41,8 +49,9 @@ const ChartWithEventComponent = () => {
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' },
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
itemStyle: {},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
|
||||
@@ -4,6 +4,7 @@ import ReactEcharts from 'echarts-for-react'
|
||||
class DynamicChartComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.echartsRef = React.createRef()
|
||||
this.timeTicket = null
|
||||
this.count = 51
|
||||
|
||||
@@ -99,6 +100,7 @@ class DynamicChartComponent extends React.Component {
|
||||
name: '价格',
|
||||
max: 20,
|
||||
min: 0,
|
||||
alignTicks: false,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
},
|
||||
{
|
||||
@@ -107,6 +109,7 @@ class DynamicChartComponent extends React.Component {
|
||||
name: '预购量',
|
||||
max: 1200,
|
||||
min: 0,
|
||||
alignTicks: false,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
},
|
||||
],
|
||||
@@ -117,9 +120,7 @@ class DynamicChartComponent extends React.Component {
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 4,
|
||||
},
|
||||
borderRadius: 4,
|
||||
},
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay(idx) {
|
||||
@@ -193,17 +194,13 @@ class DynamicChartComponent extends React.Component {
|
||||
|
||||
render() {
|
||||
let code =
|
||||
"<ReactEcharts ref='echartsInstance' \n" +
|
||||
"<ReactEcharts ref={this.echartsRef} \n" +
|
||||
' option={this.state.option} />\n'
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label> use React state to render dynamic chart</label>
|
||||
<ReactEcharts
|
||||
ref="echarts_react"
|
||||
option={this.state.option}
|
||||
style={{ height: 400 }}
|
||||
/>
|
||||
<ReactEcharts ref={this.echartsRef} option={this.state.option} style={{ height: 400 }} />
|
||||
<label> code below: use state of react to render dynamic chart</label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
|
||||
@@ -7,10 +7,8 @@ import ThemeChartComponent from './ThemeChartComponent'
|
||||
import ChartShowLoadingComponent from './ChartShowLoadingComponent'
|
||||
import ChartAPIComponent from './ChartAPIComponent'
|
||||
import DynamicChartComponent from './DynamicChartComponent'
|
||||
import MapChartComponent from './MapChartComponent'
|
||||
|
||||
// v1.2.0 add 7 demo.
|
||||
import AirportCoordComponent from './AirportCoordComponent'
|
||||
// removed MapChartComponent and AirportCoordComponent
|
||||
import CalendarComponent from './CalendarComponent'
|
||||
import GaugeComponent from './GaugeComponent'
|
||||
import GCalendarComponent from './GCalendarComponent'
|
||||
@@ -28,8 +26,7 @@ const EchartsComponent = ({ type }) => {
|
||||
if (type === 'events') return <ChartWithEventComponent />
|
||||
if (type === 'theme') return <ThemeChartComponent />
|
||||
if (type === 'dynamic') return <DynamicChartComponent />
|
||||
if (type === 'map') return <MapChartComponent />
|
||||
if (type === 'airport') return <AirportCoordComponent />
|
||||
// map and airport chart types removed
|
||||
if (type === 'graph') return <GraphComponent />
|
||||
if (type === 'calendar') return <CalendarComponent />
|
||||
if (type === 'treemap') return <TreemapComponent />
|
||||
|
||||
@@ -37,13 +37,10 @@ class GaugeComponent extends React.Component {
|
||||
},
|
||||
axisLabel: {
|
||||
// 坐标轴小标记
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
axisTick: {
|
||||
// 坐标轴小标记
|
||||
@@ -89,11 +86,9 @@ class GaugeComponent extends React.Component {
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 5,
|
||||
offsetCenter: [0, '50%'], // x, y，单位px
|
||||
textStyle: {
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
data: [{ value: 40, name: 'km/h' }],
|
||||
},
|
||||
@@ -118,13 +113,10 @@ class GaugeComponent extends React.Component {
|
||||
},
|
||||
axisLabel: {
|
||||
// 坐标轴小标记
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
axisTick: {
|
||||
// 坐标轴小标记
|
||||
@@ -172,11 +164,9 @@ class GaugeComponent extends React.Component {
|
||||
width: 80,
|
||||
height: 30,
|
||||
offsetCenter: [25, '20%'], // x, y，单位px
|
||||
textStyle: {
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
},
|
||||
data: [{ value: 1.5, name: 'x1000 r/min' }],
|
||||
},
|
||||
@@ -211,13 +201,10 @@ class GaugeComponent extends React.Component {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
formatter(v) {
|
||||
switch (`${v}`) {
|
||||
case '0':
|
||||
@@ -280,13 +267,10 @@ class GaugeComponent extends React.Component {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
// 属性lineStyle控制线条样式
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
},
|
||||
fontWeight: 'bolder',
|
||||
color: '#fff',
|
||||
shadowColor: '#fff', // 默认透明
|
||||
shadowBlur: 10,
|
||||
formatter(v) {
|
||||
switch (`${v}`) {
|
||||
case '0':
|
||||
|
||||
@@ -1325,10 +1325,8 @@ const GraphComponent = () => {
|
||||
layout: 'force',
|
||||
animation: false,
|
||||
label: {
|
||||
normal: {
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
},
|
||||
position: 'right',
|
||||
formatter: '{b}',
|
||||
},
|
||||
draggable: true,
|
||||
data: webkitDep.nodes.map((node, idx) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('echarts-liquidfill')
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-liquidfill'
|
||||
|
||||
const LiquidfillComponent = () => {
|
||||
const option = {
|
||||
@@ -17,6 +17,7 @@ const LiquidfillComponent = () => {
|
||||
<div className="parent">
|
||||
<label>render a Liquidfill chart:</label>
|
||||
<ReactEcharts
|
||||
echarts={echarts}
|
||||
option={option}
|
||||
style={{
|
||||
height: '400px',
|
||||
|
||||
@@ -430,16 +430,12 @@ const LunarCalendarComponent = () => {
|
||||
coordinateSystem: 'calendar',
|
||||
symbolSize: 1,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
let d = echarts.number.parseDate(params.value[0])
|
||||
return `${d.getDate()}\n\n${params.value[2]}\n\n`
|
||||
},
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
},
|
||||
show: true,
|
||||
formatter(params) {
|
||||
let d = echarts.number.parseDate(params.value[0])
|
||||
return `${d.getDate()}\n\n${params.value[2]}\n\n`
|
||||
},
|
||||
color: '#000',
|
||||
},
|
||||
data: lunarData,
|
||||
},
|
||||
@@ -448,17 +444,13 @@ const LunarCalendarComponent = () => {
|
||||
coordinateSystem: 'calendar',
|
||||
symbolSize: 1,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return `\n\n\n${params.value[3] || ''}`
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
color: '#a00',
|
||||
},
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return `\n\n\n${params.value[3] || ''}`
|
||||
},
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
color: '#a00',
|
||||
},
|
||||
data: lunarData,
|
||||
},
|
||||
|
||||
@@ -1,209 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactEcharts from 'echarts-for-react'
|
||||
|
||||
require('./map/js/china.js')
|
||||
|
||||
class MapChartComponent extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.timeTicket = null
|
||||
const randomData = () => {
|
||||
return Math.round(Math.random() * 1000)
|
||||
}
|
||||
const option = {
|
||||
title: {
|
||||
text: 'iphone销量',
|
||||
subtext: '纯属虚构',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['iphone3', 'iphone4', 'iphone5'],
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 2500,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'], // 文本，默认为数值文本
|
||||
calculable: true,
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'iphone3',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
roam: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: randomData() },
|
||||
{ name: '天津', value: randomData() },
|
||||
{ name: '上海', value: randomData() },
|
||||
{ name: '重庆', value: randomData() },
|
||||
{ name: '河北', value: randomData() },
|
||||
{ name: '河南', value: randomData() },
|
||||
{ name: '云南', value: randomData() },
|
||||
{ name: '辽宁', value: randomData() },
|
||||
{ name: '黑龙江', value: randomData() },
|
||||
{ name: '湖南', value: randomData() },
|
||||
{ name: '安徽', value: randomData() },
|
||||
{ name: '山东', value: randomData() },
|
||||
{ name: '新疆', value: randomData() },
|
||||
{ name: '江苏', value: randomData() },
|
||||
{ name: '浙江', value: randomData() },
|
||||
{ name: '江西', value: randomData() },
|
||||
{ name: '湖北', value: randomData() },
|
||||
{ name: '广西', value: randomData() },
|
||||
{ name: '甘肃', value: randomData() },
|
||||
{ name: '山西', value: randomData() },
|
||||
{ name: '内蒙古', value: randomData() },
|
||||
{ name: '陕西', value: randomData() },
|
||||
{ name: '吉林', value: randomData() },
|
||||
{ name: '福建', value: randomData() },
|
||||
{ name: '贵州', value: randomData() },
|
||||
{ name: '广东', value: randomData() },
|
||||
{ name: '青海', value: randomData() },
|
||||
{ name: '西藏', value: randomData() },
|
||||
{ name: '四川', value: randomData() },
|
||||
{ name: '宁夏', value: randomData() },
|
||||
{ name: '海南', value: randomData() },
|
||||
{ name: '台湾', value: randomData() },
|
||||
{ name: '香港', value: randomData() },
|
||||
{ name: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'iphone4',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: randomData() },
|
||||
{ name: '天津', value: randomData() },
|
||||
{ name: '上海', value: randomData() },
|
||||
{ name: '重庆', value: randomData() },
|
||||
{ name: '河北', value: randomData() },
|
||||
{ name: '安徽', value: randomData() },
|
||||
{ name: '新疆', value: randomData() },
|
||||
{ name: '浙江', value: randomData() },
|
||||
{ name: '江西', value: randomData() },
|
||||
{ name: '山西', value: randomData() },
|
||||
{ name: '内蒙古', value: randomData() },
|
||||
{ name: '吉林', value: randomData() },
|
||||
{ name: '福建', value: randomData() },
|
||||
{ name: '广东', value: randomData() },
|
||||
{ name: '西藏', value: randomData() },
|
||||
{ name: '四川', value: randomData() },
|
||||
{ name: '宁夏', value: randomData() },
|
||||
{ name: '香港', value: randomData() },
|
||||
{ name: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'iphone5',
|
||||
type: 'map',
|
||||
mapType: 'china',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: '北京', value: randomData() },
|
||||
{ name: '天津', value: randomData() },
|
||||
{ name: '上海', value: randomData() },
|
||||
{ name: '广东', value: randomData() },
|
||||
{ name: '台湾', value: randomData() },
|
||||
{ name: '香港', value: randomData() },
|
||||
{ name: '澳门', value: randomData() },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
this.state = {
|
||||
option,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
this.timeTicket = setInterval(() => {
|
||||
const { option } = this.state
|
||||
const r = new Date().getSeconds()
|
||||
option.title.text = `iphone销量${r}`
|
||||
option.series[0].name = `iphone销量${r}`
|
||||
option.legend.data[0] = `iphone销量${r}`
|
||||
this.setState({ option })
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.timeTicket) {
|
||||
clearInterval(this.timeTicket)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let code =
|
||||
"require('echarts/map/js/china.js'); \n" +
|
||||
'<ReactEcharts \n' +
|
||||
' option={this.state.option || {}} \n' +
|
||||
" style={{height: '350px', width: '100%'}} \n" +
|
||||
" className='react_for_echarts' />"
|
||||
return (
|
||||
<div className="examples">
|
||||
<div className="parent">
|
||||
<label>
|
||||
{' '}
|
||||
render a china map. <strong>MAP charts</strong>:{' '}
|
||||
</label>
|
||||
<ReactEcharts
|
||||
option={this.state.option}
|
||||
style={{ height: '500px', width: '100%' }}
|
||||
className="react_for_echarts"
|
||||
/>
|
||||
<label> code below: </label>
|
||||
<pre>
|
||||
<code>{code}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MapChartComponent
|
||||
@@ -41,21 +41,21 @@ const SimpleChartComponent = () => {
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
areaStyle: {},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
areaStyle: {},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
areaStyle: { normal: {} },
|
||||
areaStyle: {},
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -52,12 +52,12 @@ const ThemeChartComponent = () => {
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
emphasis: {
|
||||
barBorderColor: 'rgba(0,0,0,0)',
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
color: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
@@ -68,10 +68,8 @@ const ThemeChartComponent = () => {
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
show: true,
|
||||
position: 'top',
|
||||
},
|
||||
data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
|
||||
},
|
||||
@@ -80,10 +78,8 @@ const ThemeChartComponent = () => {
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
},
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
},
|
||||
data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
|
||||
},
|
||||
|
||||
@@ -264,10 +264,8 @@ const option = {
|
||||
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
},
|
||||
fontSize: 16,
|
||||
borderWidth: 1,
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
@@ -276,10 +274,8 @@ const option = {
|
||||
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900',
|
||||
},
|
||||
fontSize: 20,
|
||||
color: '#900',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900',
|
||||
|
||||
@@ -190,26 +190,20 @@ const TreemapComponent = () => {
|
||||
return [
|
||||
{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0,
|
||||
gapWidth: 5,
|
||||
},
|
||||
borderWidth: 0,
|
||||
gapWidth: 5,
|
||||
},
|
||||
},
|
||||
{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
},
|
||||
gapWidth: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
colorSaturation: [0.35, 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
gapWidth: 1,
|
||||
borderColorSaturation: 0.6,
|
||||
},
|
||||
gapWidth: 1,
|
||||
borderColorSaturation: 0.6,
|
||||
},
|
||||
},
|
||||
]
|
||||
@@ -248,9 +242,7 @@ const TreemapComponent = () => {
|
||||
formatter: '{b}',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#fff',
|
||||
},
|
||||
borderColor: '#fff',
|
||||
},
|
||||
levels: getLevelOption(),
|
||||
data: diskData,
|
||||
|
||||
@@ -31,14 +31,6 @@ const chartList = [
|
||||
label: 'DynamicChart',
|
||||
value: 'dynamic',
|
||||
},
|
||||
{
|
||||
label: 'MapChart',
|
||||
value: 'map',
|
||||
},
|
||||
{
|
||||
label: 'AirportCoord',
|
||||
value: 'airport',
|
||||
},
|
||||
{
|
||||
label: 'Graph',
|
||||
value: 'graph',
|
||||
@@ -101,7 +93,7 @@ class Chart extends React.Component {
|
||||
<div className={styles.chart}>
|
||||
<EchartsComponent type={this.state.type} />
|
||||
</div>
|
||||
<div style={{ pading: 24, marginTop: 24 }}>
|
||||
<div style={{ padding: 24, marginTop: 24 }}>
|
||||
All demos from{' '}
|
||||
<a href="https://github.com/hustcc/echarts-for-react">
|
||||
https://github.com/hustcc/echarts-for-react
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,32 +1,6 @@
|
||||
/* global define */
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// eslint-disable-line
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory) // eslint-disable-line
|
||||
} else if (
|
||||
typeof exports === 'object' &&
|
||||
typeof exports.nodeName !== 'string'
|
||||
) {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
})(this, (exports, echarts) => {
|
||||
let log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
/* eslint-disable */
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
let colorPalette = [
|
||||
let colorPalette = [
|
||||
'#2ec7c9',
|
||||
'#b6a2de',
|
||||
'#5ab1ef',
|
||||
@@ -53,10 +27,8 @@
|
||||
color: colorPalette,
|
||||
|
||||
title: {
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
color: '#008acd',
|
||||
},
|
||||
fontWeight: 'normal',
|
||||
color: '#008acd',
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
@@ -66,9 +38,7 @@
|
||||
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: colorPalette[0],
|
||||
},
|
||||
borderColor: colorPalette[0],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -135,8 +105,10 @@
|
||||
color: '#008acd',
|
||||
},
|
||||
controlStyle: {
|
||||
normal: { color: '#008acd' },
|
||||
emphasis: { color: '#008acd' },
|
||||
color: '#008acd',
|
||||
},
|
||||
emphasis: {
|
||||
controlStyle: { color: '#008acd' },
|
||||
},
|
||||
symbol: 'emptyCircle',
|
||||
symbolSize: 3,
|
||||
@@ -150,13 +122,11 @@
|
||||
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
lineStyle: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
lineStyle: {
|
||||
color: '#d87a80',
|
||||
color0: '#2ec7c9',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -167,19 +137,13 @@
|
||||
},
|
||||
|
||||
map: {
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#d87a80',
|
||||
},
|
||||
},
|
||||
},
|
||||
label: { color: '#d87a80' },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#fe994e',
|
||||
},
|
||||
},
|
||||
@@ -215,5 +179,10 @@
|
||||
},
|
||||
}
|
||||
|
||||
if (echarts && typeof echarts.registerTheme === 'function') {
|
||||
echarts.registerTheme('macarons', theme)
|
||||
})
|
||||
} else {
|
||||
// Console may be used only to report theme registration failure; suppress lint here
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof console !== 'undefined' && console.error) console.error('ECharts is not loaded, failed to register macarons theme')
|
||||
}
|
||||
|
||||
@@ -1,32 +1,6 @@
|
||||
/* global define */
|
||||
;(function(root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// eslint-disable-line
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports', 'echarts'], factory) // eslint-disable-line
|
||||
} else if (
|
||||
typeof exports === 'object' &&
|
||||
typeof exports.nodeName !== 'string'
|
||||
) {
|
||||
// CommonJS
|
||||
factory(exports, require('echarts'))
|
||||
} else {
|
||||
// Browser globals
|
||||
factory({}, root.echarts)
|
||||
}
|
||||
})(this, (exports, echarts) => {
|
||||
let log = function(msg) {
|
||||
if (typeof console !== 'undefined') {
|
||||
/* eslint-disable */
|
||||
console && console.error && console.error(msg)
|
||||
}
|
||||
}
|
||||
if (!echarts) {
|
||||
log('ECharts is not Loaded')
|
||||
return
|
||||
}
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
let colorPalette = [
|
||||
let colorPalette = [
|
||||
'#c12e34',
|
||||
'#e6b600',
|
||||
'#0098d9',
|
||||
@@ -41,9 +15,7 @@
|
||||
color: colorPalette,
|
||||
|
||||
title: {
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
@@ -52,9 +24,7 @@
|
||||
|
||||
toolbox: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
borderColor: '#06467c',
|
||||
},
|
||||
borderColor: '#06467c',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -73,23 +43,19 @@
|
||||
color: '#005eaa',
|
||||
},
|
||||
controlStyle: {
|
||||
normal: {
|
||||
color: '#005eaa',
|
||||
borderColor: '#005eaa',
|
||||
},
|
||||
color: '#005eaa',
|
||||
borderColor: '#005eaa',
|
||||
},
|
||||
},
|
||||
|
||||
candlestick: {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#c12e34',
|
||||
color0: '#2b821d',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#c12e34',
|
||||
color0: '#2b821d',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#c12e34',
|
||||
color0: '#2b821d',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -99,24 +65,14 @@
|
||||
},
|
||||
|
||||
map: {
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: '#c12e34',
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#c12e34',
|
||||
},
|
||||
},
|
||||
},
|
||||
label: { color: '#c12e34' },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: '#eee',
|
||||
areaColor: '#ddd',
|
||||
},
|
||||
emphasis: {
|
||||
label: { color: '#c12e34' },
|
||||
itemStyle: {
|
||||
areaColor: '#e6b600',
|
||||
},
|
||||
},
|
||||
@@ -138,9 +94,7 @@
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'auto',
|
||||
},
|
||||
color: 'auto',
|
||||
},
|
||||
splitLine: {
|
||||
length: 12,
|
||||
@@ -154,9 +108,7 @@
|
||||
color: 'auto',
|
||||
},
|
||||
title: {
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
color: '#333',
|
||||
},
|
||||
detail: {
|
||||
textStyle: {
|
||||
@@ -165,5 +117,10 @@
|
||||
},
|
||||
},
|
||||
}
|
||||
if (echarts && typeof echarts.registerTheme === 'function') {
|
||||
echarts.registerTheme('shine', theme)
|
||||
})
|
||||
} else {
|
||||
// Console may be used only to report theme registration failure; suppress lint here
|
||||
// eslint-disable-next-line no-console
|
||||
if (typeof console !== 'undefined' && console.error) console.error('ECharts is not loaded, failed to register shine theme')
|
||||
}
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import React from 'react'
|
||||
import ReactHighcharts from 'react-highcharts'
|
||||
import HighchartsExporting from 'highcharts-exporting'
|
||||
import HighchartsMore from 'highcharts-more'
|
||||
import Highcharts from 'highcharts'
|
||||
import HighchartsMore from 'highcharts/highcharts-more'
|
||||
import Exporting from 'highcharts/modules/exporting'
|
||||
import Accessibility from 'highcharts/modules/accessibility'
|
||||
import HighchartsReact from 'highcharts-react-official'
|
||||
|
||||
HighchartsMore(ReactHighcharts.Highcharts)
|
||||
HighchartsExporting(ReactHighcharts.Highcharts)
|
||||
HighchartsMore(Highcharts)
|
||||
Exporting(Highcharts)
|
||||
Accessibility(Highcharts)
|
||||
|
||||
const config = {
|
||||
chart: {
|
||||
@@ -47,7 +50,7 @@ const config = {
|
||||
}
|
||||
|
||||
const HighMoreComponent = () => {
|
||||
return <ReactHighcharts config={config} />
|
||||
return <HighchartsReact highcharts={Highcharts} options={config} />
|
||||
}
|
||||
|
||||
export default HighMoreComponent
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from 'react'
|
||||
import ReactHighmaps from 'react-highcharts/ReactHighmaps.src'
|
||||
import Highcharts from 'highcharts/highmaps'
|
||||
import Accessibility from 'highcharts/modules/accessibility'
|
||||
import HighchartsReact from 'highcharts-react-official'
|
||||
import maps from './mapdata/europe'
|
||||
|
||||
const config = {
|
||||
@@ -75,7 +77,9 @@ const config = {
|
||||
],
|
||||
}
|
||||
|
||||
Accessibility(Highcharts)
|
||||
|
||||
const HighmapsComponent = () => {
|
||||
return <ReactHighmaps config={config} />
|
||||
return <HighchartsReact highcharts={Highcharts} constructorType={'mapChart'} options={config} />
|
||||
}
|
||||
export default HighmapsComponent
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from 'react'
|
||||
import ReactHighstock from 'react-highcharts/ReactHighstock.src'
|
||||
import Highcharts from 'highcharts/highstock'
|
||||
import Accessibility from 'highcharts/modules/accessibility'
|
||||
import HighchartsReact from 'highcharts-react-official'
|
||||
|
||||
const data = [
|
||||
[1220832000000, 22.56],
|
||||
@@ -93,7 +95,15 @@ const config = {
|
||||
}
|
||||
|
||||
const HighstockComponent = () => {
|
||||
return <ReactHighstock config={config} />
|
||||
return (
|
||||
<HighchartsReact
|
||||
highcharts={Highcharts}
|
||||
constructorType={'stockChart'}
|
||||
options={config}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Accessibility(Highcharts)
|
||||
|
||||
export default HighstockComponent
|
||||
|
||||
@@ -8,11 +8,7 @@ import styles from './numberCard.less'
|
||||
|
||||
function NumberCard({ icon, color, title, number, countUp }) {
|
||||
return (
|
||||
<Card
|
||||
className={styles.numberCard}
|
||||
bordered={false}
|
||||
bodyStyle={{ padding: 10 }}
|
||||
>
|
||||
<Card className={styles.numberCard} variant="shadow" styles={{ body: { padding: 10 } }}>
|
||||
<span className={styles.iconWarp} style={{ color }}>
|
||||
{iconMap[icon]}
|
||||
</span>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import moment from 'moment'
|
||||
import dayjs from 'dayjs'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table, Tag } from 'antd'
|
||||
import { Color } from 'utils'
|
||||
@@ -38,7 +38,7 @@ function RecentSales({ data }) {
|
||||
{
|
||||
title: 'DATE',
|
||||
dataIndex: 'date',
|
||||
render: text => moment(text).format('YYYY-MM-DD'),
|
||||
render: text => dayjs(text).format('YYYY-MM-DD'),
|
||||
},
|
||||
{
|
||||
title: 'PRICE',
|
||||
|
||||
@@ -37,7 +37,7 @@ function User({ avatar, username, sales = 0, sold = 0 }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.footer}>
|
||||
<Button type="ghost" size="large">
|
||||
<Button size="large">
|
||||
View Profile
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -20,9 +20,11 @@ import styles from './index.less'
|
||||
import store from 'store'
|
||||
|
||||
const bodyStyle = {
|
||||
bodyStyle: {
|
||||
height: 432,
|
||||
background: '#fff',
|
||||
styles: {
|
||||
body: {
|
||||
height: 432,
|
||||
background: '#fff',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -63,9 +65,11 @@ class Dashboard extends PureComponent {
|
||||
{numberCards}
|
||||
<Col lg={18} md={24}>
|
||||
<Card
|
||||
bordered={false}
|
||||
bodyStyle={{
|
||||
padding: '24px 36px 24px 0',
|
||||
variant="shadow"
|
||||
styles={{
|
||||
body: {
|
||||
padding: '24px 36px 24px 0',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Sales data={sales} />
|
||||
@@ -75,12 +79,14 @@ class Dashboard extends PureComponent {
|
||||
<Row gutter={24}>
|
||||
<Col lg={24} md={12}>
|
||||
<Card
|
||||
bordered={false}
|
||||
variant="shadow"
|
||||
className={styles.weather}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: Color.blue,
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: Color.blue,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Weather
|
||||
@@ -91,12 +97,14 @@ class Dashboard extends PureComponent {
|
||||
</Col>
|
||||
<Col lg={24} md={12}>
|
||||
<Card
|
||||
bordered={false}
|
||||
variant="shadow"
|
||||
className={styles.quote}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: Color.peach,
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: Color.peach,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ScrollBar>
|
||||
@@ -107,12 +115,12 @@ class Dashboard extends PureComponent {
|
||||
</Row>
|
||||
</Col>
|
||||
<Col lg={12} md={24}>
|
||||
<Card bordered={false} {...bodyStyle}>
|
||||
<Card variant="shadow" {...bodyStyle}>
|
||||
<RecentSales data={recentSales} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={12} md={24}>
|
||||
<Card bordered={false} {...bodyStyle}>
|
||||
<Card variant="shadow" {...bodyStyle}>
|
||||
<ScrollBar>
|
||||
<Comments data={comments} />
|
||||
</ScrollBar>
|
||||
@@ -120,21 +128,23 @@ class Dashboard extends PureComponent {
|
||||
</Col>
|
||||
<Col lg={24} md={24}>
|
||||
<Card
|
||||
bordered={false}
|
||||
bodyStyle={{
|
||||
padding: '24px 36px 24px 0',
|
||||
variant="shadow"
|
||||
styles={{
|
||||
body: {
|
||||
padding: '24px 36px 24px 0',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Completed data={completed} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={8} md={24}>
|
||||
<Card bordered={false} {...bodyStyle}>
|
||||
<Card variant="shadow" {...bodyStyle}>
|
||||
<Browser data={browser} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={8} md={24}>
|
||||
<Card bordered={false} {...bodyStyle}>
|
||||
<Card variant="shadow" {...bodyStyle}>
|
||||
<ScrollBar>
|
||||
<Cpu {...cpu} />
|
||||
</ScrollBar>
|
||||
@@ -142,8 +152,8 @@ class Dashboard extends PureComponent {
|
||||
</Col>
|
||||
<Col lg={8} md={24}>
|
||||
<Card
|
||||
bordered={false}
|
||||
bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}
|
||||
variant="shadow"
|
||||
styles={{ ...bodyStyle.styles, body: { ...bodyStyle.styles.body, padding: 0 } }}
|
||||
>
|
||||
<User {...user} avatar={avatar} username={username} />
|
||||
</Card>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { parse } from 'qs'
|
||||
import modelExtend from 'dva-model-extend'
|
||||
import api from 'api'
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import { model } from 'utils/model'
|
||||
|
||||
const { queryDashboard, queryWeather } = api
|
||||
|
||||
+2
-2
@@ -1,10 +1,10 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import { Redirect } from 'umi'
|
||||
import { t } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
|
||||
class Index extends PureComponent {
|
||||
render() {
|
||||
return <Redirect to={t`/dashboard`} />
|
||||
return <Redirect to={i18n._('/dashboard')} />
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,8 +4,7 @@ import { connect } from 'umi'
|
||||
import { Button, Row, Input, Form } from 'antd'
|
||||
import { GlobalFooter } from 'components'
|
||||
import { GithubOutlined } from '@ant-design/icons'
|
||||
import { t } from "@lingui/macro"
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { setLocale } from 'utils'
|
||||
import config from 'utils/config'
|
||||
|
||||
@@ -55,15 +54,12 @@ class Login extends PureComponent {
|
||||
<FormItem name="username"
|
||||
rules={[{ required: true }]} hasFeedback>
|
||||
<Input
|
||||
placeholder={t`Username`}
|
||||
placeholder={i18n._('Username')}
|
||||
autoComplete="username"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="password"
|
||||
rules={[{ required: true }]} hasFeedback>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder={t`Password`}
|
||||
/>
|
||||
<FormItem name="password" rules={[{ required: true }]} hasFeedback>
|
||||
<Input type="password" placeholder={i18n._('Password')} required autoComplete="current-password" />
|
||||
</FormItem>
|
||||
<Row>
|
||||
<Button
|
||||
@@ -71,15 +67,15 @@ class Login extends PureComponent {
|
||||
htmlType="submit"
|
||||
loading={loading.effects.login}
|
||||
>
|
||||
<Trans>Sign in</Trans>
|
||||
{i18n._('Sign in')}
|
||||
</Button>
|
||||
<p>
|
||||
<span className="margin-right">
|
||||
<Trans>Username</Trans>
|
||||
{i18n._('Username')}
|
||||
：guest
|
||||
</span>
|
||||
<span>
|
||||
<Trans>Password</Trans>
|
||||
{i18n._('Password')}
|
||||
：guest
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { history } from 'umi'
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import api from 'api'
|
||||
|
||||
const { loginUser } = api
|
||||
|
||||
export default {
|
||||
const loginModel = {
|
||||
namespace: 'login',
|
||||
|
||||
state: {},
|
||||
@@ -35,3 +35,5 @@ export default {
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default loginModel
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import { Table, Avatar } from 'antd'
|
||||
import { t } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { Ellipsis } from 'components'
|
||||
import styles from './List.less'
|
||||
|
||||
@@ -9,12 +9,12 @@ class List extends PureComponent {
|
||||
const { ...tableProps } = this.props
|
||||
const columns = [
|
||||
{
|
||||
title: t`Image`,
|
||||
title: i18n._('Image'),
|
||||
dataIndex: 'image',
|
||||
render: text => <Avatar shape="square" src={text} />,
|
||||
},
|
||||
{
|
||||
title: t`Title`,
|
||||
title: i18n._('Title'),
|
||||
dataIndex: 'title',
|
||||
render: text => (
|
||||
<Ellipsis tooltip length={30}>
|
||||
@@ -23,31 +23,31 @@ class List extends PureComponent {
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t`Author`,
|
||||
title: i18n._('Author'),
|
||||
dataIndex: 'author',
|
||||
},
|
||||
{
|
||||
title: t`Categories`,
|
||||
title: i18n._('Categories'),
|
||||
dataIndex: 'categories',
|
||||
},
|
||||
{
|
||||
title: t`Tags`,
|
||||
title: i18n._('Tags'),
|
||||
dataIndex: 'tags',
|
||||
},
|
||||
{
|
||||
title: t`Visibility`,
|
||||
title: i18n._('Visibility'),
|
||||
dataIndex: 'visibility',
|
||||
},
|
||||
{
|
||||
title: t`Comments`,
|
||||
title: i18n._('Comments'),
|
||||
dataIndex: 'comments',
|
||||
},
|
||||
{
|
||||
title: t`Views`,
|
||||
title: i18n._('Views'),
|
||||
dataIndex: 'views',
|
||||
},
|
||||
{
|
||||
title: t`Publish Date`,
|
||||
title: i18n._('Publish Date'),
|
||||
dataIndex: 'date',
|
||||
},
|
||||
]
|
||||
@@ -57,7 +57,7 @@ class List extends PureComponent {
|
||||
{...tableProps}
|
||||
pagination={{
|
||||
...tableProps.pagination,
|
||||
showTotal: total => t`Total ${total} Items`,
|
||||
showTotal: total => i18n._('Total {total} Items', { total }),
|
||||
}}
|
||||
bordered
|
||||
scroll={{ x: 1200 }}
|
||||
|
||||
+16
-17
@@ -4,11 +4,11 @@ import { connect } from 'umi'
|
||||
import { Tabs } from 'antd'
|
||||
import { history } from 'umi'
|
||||
import { stringify } from 'qs'
|
||||
import { t } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { Page } from 'components'
|
||||
import List from './components/List'
|
||||
|
||||
const { TabPane } = Tabs
|
||||
// use `items` prop instead of Tabs.TabPane
|
||||
|
||||
const EnumPostStatus = {
|
||||
UNPUBLISH: 1,
|
||||
@@ -62,21 +62,20 @@ class Post extends PureComponent {
|
||||
? String(EnumPostStatus.UNPUBLISH)
|
||||
: String(EnumPostStatus.PUBLISHED)
|
||||
}
|
||||
onTabClick={this.handleTabClick}
|
||||
>
|
||||
<TabPane
|
||||
tab={t`Publised`}
|
||||
key={String(EnumPostStatus.PUBLISHED)}
|
||||
>
|
||||
<List {...this.listProps} />
|
||||
</TabPane>
|
||||
<TabPane
|
||||
tab={t`Unpublished`}
|
||||
key={String(EnumPostStatus.UNPUBLISH)}
|
||||
>
|
||||
<List {...this.listProps} />
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
onChange={this.handleTabClick}
|
||||
items={[
|
||||
{
|
||||
key: String(EnumPostStatus.PUBLISHED),
|
||||
label: i18n._('Publised'),
|
||||
children: <List {...this.listProps} />,
|
||||
},
|
||||
{
|
||||
key: String(EnumPostStatus.UNPUBLISH),
|
||||
label: i18n._('Unpublished'),
|
||||
children: <List {...this.listProps} />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import modelExtend from 'dva-model-extend'
|
||||
import api from 'api'
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import { pageModel } from 'utils/model'
|
||||
|
||||
const { queryPostList } = api
|
||||
|
||||
@@ -4,7 +4,7 @@ import { apiPrefix } from 'utils/config'
|
||||
import { Row, Col, Select, Form, Input, Button, List, Tag, Checkbox } from 'antd'
|
||||
import classnames from 'classnames'
|
||||
import { CloseOutlined } from '@ant-design/icons'
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import api from '@/services/api'
|
||||
import { Page } from 'components'
|
||||
|
||||
@@ -72,7 +72,10 @@ class RequestPage extends React.Component {
|
||||
})
|
||||
})
|
||||
.catch(errorInfo => {
|
||||
console.log(errorInfo)
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(errorInfo)
|
||||
}
|
||||
/*
|
||||
errorInfo:
|
||||
{
|
||||
@@ -189,7 +192,7 @@ class RequestPage extends React.Component {
|
||||
onClick={this.handleVisible}
|
||||
size="large"
|
||||
>
|
||||
<Trans>Params</Trans>
|
||||
{i18n._('Params')}
|
||||
</Button>
|
||||
</InputGroup>
|
||||
|
||||
@@ -199,7 +202,7 @@ class RequestPage extends React.Component {
|
||||
style={{ width: 100 }}
|
||||
onClick={this.handleRequest}
|
||||
>
|
||||
<Trans>Send</Trans>
|
||||
{i18n._('Send')}
|
||||
</Button>
|
||||
</Row>
|
||||
<Form ref={this.formRef} name="control-ref" >
|
||||
@@ -242,7 +245,7 @@ class RequestPage extends React.Component {
|
||||
|
||||
<Row style={{ marginTop: 8 }}>
|
||||
<Button onClick={this.handleAddField}>
|
||||
<Trans>Add Param</Trans>
|
||||
{i18n._('Add Param')}
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import api from 'api'
|
||||
|
||||
const { queryUser } = api
|
||||
|
||||
export default {
|
||||
const userDetailModel = {
|
||||
namespace: 'userDetail',
|
||||
|
||||
state: {
|
||||
@@ -48,3 +48,5 @@ export default {
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default userDetailModel
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import moment from 'moment'
|
||||
import dayjs from 'dayjs'
|
||||
import { FilterItem } from 'components'
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { t } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { Button, Row, Col, DatePicker, Form, Input, Cascader } from 'antd'
|
||||
import city from 'utils/city'
|
||||
|
||||
@@ -30,8 +29,8 @@ class Filter extends Component {
|
||||
const { createTime } = fields
|
||||
if (createTime && createTime.length) {
|
||||
fields.createTime = [
|
||||
moment(createTime[0]).format('YYYY-MM-DD'),
|
||||
moment(createTime[1]).format('YYYY-MM-DD'),
|
||||
dayjs(createTime[0]).format('YYYY-MM-DD'),
|
||||
dayjs(createTime[1]).format('YYYY-MM-DD'),
|
||||
]
|
||||
}
|
||||
return fields
|
||||
@@ -72,10 +71,10 @@ class Filter extends Component {
|
||||
|
||||
let initialCreateTime = []
|
||||
if (filter.createTime && filter.createTime[0]) {
|
||||
initialCreateTime[0] = moment(filter.createTime[0])
|
||||
initialCreateTime[0] = dayjs(filter.createTime[0])
|
||||
}
|
||||
if (filter.createTime && filter.createTime[1]) {
|
||||
initialCreateTime[1] = moment(filter.createTime[1])
|
||||
initialCreateTime[1] = dayjs(filter.createTime[1])
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -84,9 +83,9 @@ class Filter extends Component {
|
||||
<Col {...ColProps} xl={{ span: 4 }} md={{ span: 8 }}>
|
||||
<Form.Item name="name">
|
||||
<Search
|
||||
placeholder={t`Search Name`}
|
||||
onSearch={this.handleSubmit}
|
||||
/>
|
||||
placeholder={i18n._('Search Name')}
|
||||
onSearch={this.handleSubmit}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col
|
||||
@@ -99,7 +98,7 @@ class Filter extends Component {
|
||||
<Cascader
|
||||
style={{ width: '100%' }}
|
||||
options={city}
|
||||
placeholder={t`Please pick an address`}
|
||||
placeholder={i18n._('Please pick an address')}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
@@ -110,7 +109,7 @@ class Filter extends Component {
|
||||
sm={{ span: 12 }}
|
||||
id="createTimeRangePicker"
|
||||
>
|
||||
<FilterItem label={t`CreateTime`}>
|
||||
<FilterItem label={i18n._('CreateTime')}>
|
||||
<Form.Item name="createTime">
|
||||
<RangePicker
|
||||
style={{ width: '100%' }}
|
||||
@@ -131,14 +130,14 @@ class Filter extends Component {
|
||||
className="margin-right"
|
||||
onClick={this.handleSubmit}
|
||||
>
|
||||
<Trans>Search</Trans>
|
||||
{i18n._('Search')}
|
||||
</Button>
|
||||
<Button onClick={this.handleReset}>
|
||||
<Trans>Reset</Trans>
|
||||
{i18n._('Reset')}
|
||||
</Button>
|
||||
</div>
|
||||
<Button type="ghost" onClick={onAdd}>
|
||||
<Trans>Create</Trans>
|
||||
<Button onClick={onAdd}>
|
||||
{i18n._('Create')}
|
||||
</Button>
|
||||
</Row>
|
||||
</Col>
|
||||
|
||||
@@ -2,8 +2,7 @@ import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table, Modal, Avatar } from 'antd'
|
||||
import { DropOption } from 'components'
|
||||
import { t } from "@lingui/macro"
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { Link } from 'umi'
|
||||
import styles from './List.less'
|
||||
|
||||
@@ -17,7 +16,7 @@ class List extends PureComponent {
|
||||
onEditItem(record)
|
||||
} else if (e.key === '2') {
|
||||
confirm({
|
||||
title: t`Are you sure delete this record?`,
|
||||
title: i18n._('Are you sure delete this record?'),
|
||||
onOk() {
|
||||
onDeleteItem(record.id)
|
||||
},
|
||||
@@ -30,7 +29,7 @@ class List extends PureComponent {
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: <Trans>Avatar</Trans>,
|
||||
title: i18n._('Avatar'),
|
||||
dataIndex: 'avatar',
|
||||
key: 'avatar',
|
||||
width: '7%',
|
||||
@@ -38,51 +37,51 @@ class List extends PureComponent {
|
||||
render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
|
||||
},
|
||||
{
|
||||
title: <Trans>Name</Trans>,
|
||||
title: i18n._('Name'),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
|
||||
},
|
||||
{
|
||||
title: <Trans>NickName</Trans>,
|
||||
title: i18n._('NickName'),
|
||||
dataIndex: 'nickName',
|
||||
key: 'nickName',
|
||||
},
|
||||
{
|
||||
title: <Trans>Age</Trans>,
|
||||
title: i18n._('Age'),
|
||||
dataIndex: 'age',
|
||||
width: '6%',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: <Trans>Gender</Trans>,
|
||||
title: i18n._('Gender'),
|
||||
dataIndex: 'isMale',
|
||||
key: 'isMale',
|
||||
width: '7%',
|
||||
render: text => <span>{text ? 'Male' : 'Female'}</span>,
|
||||
render: text => <span>{text ? i18n._('Male') : i18n._('Female')}</span>,
|
||||
},
|
||||
{
|
||||
title: <Trans>Phone</Trans>,
|
||||
title: i18n._('Phone'),
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: <Trans>Email</Trans>,
|
||||
title: i18n._('Email'),
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
title: <Trans>Address</Trans>,
|
||||
title: i18n._('Address'),
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
},
|
||||
{
|
||||
title: <Trans>CreateTime</Trans>,
|
||||
title: i18n._('CreateTime'),
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
},
|
||||
{
|
||||
title: <Trans>Operation</Trans>,
|
||||
title: i18n._('Operation'),
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: '8%',
|
||||
@@ -91,8 +90,8 @@ class List extends PureComponent {
|
||||
<DropOption
|
||||
onMenuClick={e => this.handleMenuClick(record, e)}
|
||||
menuOptions={[
|
||||
{ key: '1', name: t`Update` },
|
||||
{ key: '2', name: t`Delete` },
|
||||
{ key: '1', name: i18n._('Update') },
|
||||
{ key: '2', name: i18n._('Delete') },
|
||||
]}
|
||||
/>
|
||||
)
|
||||
@@ -105,7 +104,7 @@ class List extends PureComponent {
|
||||
{...tableProps}
|
||||
pagination={{
|
||||
...tableProps.pagination,
|
||||
showTotal: total => t`Total ${total} Items`,
|
||||
showTotal: total => i18n._('Total {total} Items', { total }),
|
||||
}}
|
||||
className={styles.table}
|
||||
bordered
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Form, Input, InputNumber, Radio, Modal, Cascader } from 'antd'
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import city from 'utils/city'
|
||||
import { t } from "@lingui/macro"
|
||||
|
||||
const FormItem = Form.Item
|
||||
|
||||
@@ -32,7 +31,10 @@ class UserModal extends PureComponent {
|
||||
onOk(data)
|
||||
})
|
||||
.catch(errorInfo => {
|
||||
console.log(errorInfo)
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(errorInfo)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -43,46 +45,46 @@ class UserModal extends PureComponent {
|
||||
<Modal {...modalProps} onOk={this.handleOk}>
|
||||
<Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
|
||||
<FormItem name='name' rules={[{ required: true }]}
|
||||
label={t`Name`} hasFeedback {...formItemLayout}>
|
||||
label={i18n._('Name')} hasFeedback {...formItemLayout}>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem name='nickName' rules={[{ required: true }]}
|
||||
label={t`NickName`} hasFeedback {...formItemLayout}>
|
||||
label={i18n._('NickName')} hasFeedback {...formItemLayout}>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem name='isMale' rules={[{ required: true }]}
|
||||
label={t`Gender`} hasFeedback {...formItemLayout}>
|
||||
label={i18n._('Gender')} hasFeedback {...formItemLayout}>
|
||||
<Radio.Group>
|
||||
<Radio value>
|
||||
<Trans>Male</Trans>
|
||||
{i18n._('Male')}
|
||||
</Radio>
|
||||
<Radio value={false}>
|
||||
<Trans>Female</Trans>
|
||||
{i18n._('Female')}
|
||||
</Radio>
|
||||
</Radio.Group>
|
||||
</FormItem>
|
||||
<FormItem name='age' label={t`Age`} hasFeedback {...formItemLayout}>
|
||||
<FormItem name='age' label={i18n._('Age')} hasFeedback {...formItemLayout}>
|
||||
<InputNumber min={18} max={100} />
|
||||
</FormItem>
|
||||
<FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: t`The input is not valid phone!`, }]}
|
||||
label={t`Phone`} hasFeedback {...formItemLayout}>
|
||||
<FormItem name='phone' rules={[{ required: true, pattern: /^1[34578]\d{9}$/, message: i18n._('The input is not valid phone!'), }]}
|
||||
label={i18n._('Phone')} hasFeedback {...formItemLayout}>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, message: t`The input is not valid E-mail!`, }]}
|
||||
label={t`Email`} hasFeedback {...formItemLayout}>
|
||||
<FormItem name='email' rules={[{ required: true, pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ , message: i18n._('The input is not valid E-mail!'), }]}
|
||||
label={i18n._('Email')} hasFeedback {...formItemLayout}>
|
||||
<Input />
|
||||
</FormItem>
|
||||
<FormItem name='address' rules={[{ required: true, }]}
|
||||
label={t`Address`} hasFeedback {...formItemLayout}>
|
||||
label={i18n._('Address')} hasFeedback {...formItemLayout}>
|
||||
<Cascader
|
||||
style={{ width: '100%' }}
|
||||
options={city}
|
||||
placeholder={t`Pick an address`}
|
||||
placeholder={i18n._('Pick an address')}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
|
||||
import { history } from 'umi'
|
||||
import { connect } from 'umi'
|
||||
import { Row, Col, Button, Popconfirm } from 'antd'
|
||||
import { t } from "@lingui/macro"
|
||||
import { i18n } from '@lingui/core'
|
||||
import { Page } from 'components'
|
||||
import { stringify } from 'qs'
|
||||
import List from './components/List'
|
||||
@@ -49,16 +49,16 @@ class User extends PureComponent {
|
||||
|
||||
get modalProps() {
|
||||
const { dispatch, user, loading } = this.props
|
||||
const { currentItem, modalVisible, modalType } = user
|
||||
const { currentItem, modalOpen, modalType } = user
|
||||
|
||||
return {
|
||||
item: modalType === 'create' ? {} : currentItem,
|
||||
visible: modalVisible,
|
||||
destroyOnClose: true,
|
||||
maskClosable: false,
|
||||
open: modalOpen,
|
||||
destroyOnHidden: true,
|
||||
mask: { closable: false },
|
||||
confirmLoading: loading.effects[`user/${modalType}`],
|
||||
title: `${
|
||||
modalType === 'create' ? t`Create User` : t`Update User`
|
||||
modalType === 'create' ? i18n._('Create User') : i18n._('Update User')
|
||||
}`,
|
||||
centered: true,
|
||||
onOk: data => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import modelExtend from 'dva-model-extend'
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import api from 'api'
|
||||
import { pageModel } from 'utils/model'
|
||||
|
||||
@@ -16,7 +16,7 @@ export default modelExtend(pageModel, {
|
||||
|
||||
state: {
|
||||
currentItem: {},
|
||||
modalVisible: false,
|
||||
modalOpen: false,
|
||||
modalType: 'create',
|
||||
selectedRowKeys: [],
|
||||
},
|
||||
@@ -100,11 +100,11 @@ export default modelExtend(pageModel, {
|
||||
|
||||
reducers: {
|
||||
showModal(state, { payload }) {
|
||||
return { ...state, ...payload, modalVisible: true }
|
||||
return { ...state, ...payload, modalOpen: true }
|
||||
},
|
||||
|
||||
hideModal(state) {
|
||||
return { ...state, modalVisible: false }
|
||||
return { ...state, modalOpen: false }
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
import { message } from 'antd'
|
||||
|
||||
export default {
|
||||
const onErrorHandler = {
|
||||
onError(e, a) {
|
||||
e.preventDefault()
|
||||
if (e.message) {
|
||||
message.error(e.message)
|
||||
} else {
|
||||
/* eslint-disable */
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default onErrorHandler
|
||||
|
||||
+3
-1
@@ -1,4 +1,4 @@
|
||||
export default {
|
||||
const api = {
|
||||
queryRouteList: '/routes',
|
||||
|
||||
queryUserInfo: '/user',
|
||||
@@ -16,3 +16,5 @@ export default {
|
||||
|
||||
queryDashboard: '/dashboard',
|
||||
}
|
||||
|
||||
export default api
|
||||
|
||||
+25
-16
@@ -1,16 +1,25 @@
|
||||
// 本文件是对 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;
|
||||
// 本文件是对 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;
|
||||
|
||||
// Legacy token fallbacks (required by project's Less files)
|
||||
@primary-color: #1890ff;
|
||||
@success-color: #52c41a;
|
||||
@warning-color: #faad14;
|
||||
@error-color: #ff4d4f;
|
||||
@outline-fade: 20%;
|
||||
@text-color-secondary: fade(@text-color, 35%);
|
||||
@ease-in-out: ease-in-out;
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
@import '~antd/dist/reset.css';
|
||||
@import '~themes/vars.less';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
AreaChartOutlined,
|
||||
} from '@ant-design/icons'
|
||||
|
||||
export default {
|
||||
const iconMap = {
|
||||
'pay-circle-o': <PayCircleOutlined />,
|
||||
'shopping-cart': <ShoppingCartOutlined />,
|
||||
'camera-o': <CameraOutlined />,
|
||||
@@ -29,3 +29,5 @@ export default {
|
||||
api: <ApiOutlined />,
|
||||
edit: <EditOutlined />,
|
||||
}
|
||||
|
||||
export default iconMap
|
||||
|
||||
+12
-8
@@ -1,17 +1,21 @@
|
||||
import { cloneDeep } from 'lodash'
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/zh-cn'
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import store from 'store'
|
||||
import { i18n } from './config'
|
||||
import { i18n } from '@lingui/core'
|
||||
|
||||
import dayjs from 'dayjs'
|
||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||
import 'dayjs/locale/zh-cn'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
export classnames from 'classnames'
|
||||
export config from './config'
|
||||
export request from './request'
|
||||
export { Color } from './theme'
|
||||
|
||||
export const languages = i18n ? i18n.languages.map(item => item.key) : []
|
||||
export const defaultLanguage = i18n ? i18n.defaultLanguage : ''
|
||||
export const languages = i18n && i18n.languages ? i18n.languages.map(item => item.key) : []
|
||||
export const defaultLanguage = i18n && i18n.defaultLanguage ? i18n.defaultLanguage : 'en'
|
||||
|
||||
/**
|
||||
* Query objects that specify keys and values in an array where all values are objects.
|
||||
@@ -165,8 +169,8 @@ export function getLocale() {
|
||||
|
||||
export function setLocale(language) {
|
||||
if (getLocale() !== language) {
|
||||
moment.locale(language === 'zh' ? 'zh-cn' : language)
|
||||
dayjs.locale(language === 'zh' ? 'zh-cn' : language)
|
||||
store.set('locale', language)
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
const { pathToRegexp } = require("path-to-regexp")
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
|
||||
// strip known locale prefix (e.g. /zh, /en, /pt-br) before matching
|
||||
const stripLocale = (p) => p.replace(/^\/(en|zh|pt-br)(\/|$)/, '/')
|
||||
|
||||
describe('test pathToRegexp', () => {
|
||||
it('get right', () => {
|
||||
expect(pathToRegexp('/user').exec('/zh/user')).toEqual(
|
||||
expect(pathToRegexp('/user').exec(stripLocale('/zh/user'))).toEqual(
|
||||
pathToRegexp('/user').exec('/user')
|
||||
)
|
||||
expect(pathToRegexp('/user').exec('/user')).toEqual(
|
||||
pathToRegexp('/user').exec('/user')
|
||||
)
|
||||
|
||||
expect(pathToRegexp('/user/:id').exec('/zh/user/1')).toEqual(
|
||||
expect(pathToRegexp('/user/:id').exec(stripLocale('/zh/user/1'))).toEqual(
|
||||
pathToRegexp('/user/:id').exec('/user/1')
|
||||
)
|
||||
expect(pathToRegexp('/user/:id').exec('/user/1')).toEqual(
|
||||
|
||||
+12
-11
@@ -1,10 +1,9 @@
|
||||
import axios from 'axios'
|
||||
import { cloneDeep } from 'lodash'
|
||||
const { parse, compile } = require("path-to-regexp")
|
||||
import { parse, compile } from 'path-to-regexp'
|
||||
import { message } from 'antd'
|
||||
import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
|
||||
|
||||
const { CancelToken } = axios
|
||||
window.cancelRequest = new Map()
|
||||
|
||||
export default function request(options) {
|
||||
@@ -13,7 +12,7 @@ export default function request(options) {
|
||||
|
||||
try {
|
||||
let domain = ''
|
||||
const urlMatch = url.match(/[a-zA-z]+:\/\/[^/]*/)
|
||||
const urlMatch = url.match(/[A-Za-z]+:\/\/[^/]*/)
|
||||
if (urlMatch) {
|
||||
;[domain] = urlMatch
|
||||
url = url.slice(domain.length)
|
||||
@@ -33,11 +32,12 @@ export default function request(options) {
|
||||
}
|
||||
|
||||
options.url = url
|
||||
options.cancelToken = new CancelToken(cancel => {
|
||||
window.cancelRequest.set(Symbol(Date.now()), {
|
||||
pathname: window.location.pathname,
|
||||
cancel,
|
||||
})
|
||||
// Use AbortController signal for request cancellation (compatible with axios v2)
|
||||
const controller = new AbortController()
|
||||
options.signal = controller.signal
|
||||
window.cancelRequest.set(Symbol(Date.now()), {
|
||||
pathname: window.location.pathname,
|
||||
abort: reason => controller.abort(reason || CANCEL_REQUEST_MESSAGE),
|
||||
})
|
||||
|
||||
return axios(options)
|
||||
@@ -62,9 +62,10 @@ export default function request(options) {
|
||||
})
|
||||
})
|
||||
.catch(error => {
|
||||
const { response, message } = error
|
||||
const { response, message: errMsg, code, name } = error
|
||||
|
||||
if (String(message) === CANCEL_REQUEST_MESSAGE) {
|
||||
// axios v1 cancellation can surface as ERR_CANCELED / CanceledError or message matching our sentinel
|
||||
if (String(errMsg) === CANCEL_REQUEST_MESSAGE || code === 'ERR_CANCELED' || name === 'CanceledError') {
|
||||
return {
|
||||
success: false,
|
||||
}
|
||||
@@ -79,7 +80,7 @@ export default function request(options) {
|
||||
msg = data.message || statusText
|
||||
} else {
|
||||
statusCode = 600
|
||||
msg = error.message || 'Network Error'
|
||||
msg = errMsg || error.message || 'Network Error'
|
||||
}
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
Reference in New Issue
Block a user