43 |
46 | )
47 | }
48 | ```
49 |
50 | 4. 在`src/pages/` 目录中新增 `secondary/index.js` 文件。
51 |
52 | ```javascript
53 | import React from 'react'
54 |
55 | export default ({ children }) => {
56 | return Secondary
44 | {children} 45 |Secondary page Content
57 | }
58 | ```
59 |
60 | 5. 最后，启动开发模式 `npm run start`，打开 [http://localhost:7000/secondary/](http://localhost:7000/secondary/)，你将看到 `secondary` 布局的页面。
61 |
--------------------------------------------------------------------------------
/docs/zh-cn/request.md:
--------------------------------------------------------------------------------
1 | # HTTP请求
2 |
3 | 本项目使用了axios提供http请求服务，文件在src/utils/request.js
4 |
5 | ## 自定义Header
6 |
7 | 为了提供鉴权、修改cookie等服务，可以手动修改Header
8 |
9 | ```
10 | axios.defaults.headers.common['Authorization'] = 'token'
11 | ```
12 |
13 | 或者
14 |
15 | ```
16 | // 添加请求拦截器
17 | axios.interceptors.request.use(function (config) {
18 | // 在发送请求之前做些什么
19 | config.headers.token = window.localStorage.getItem('token');
20 | return config;
21 | }, function (error) {
22 | return Promise.reject(error);
23 | });
24 | ```
--------------------------------------------------------------------------------
/docs/zh-cn/router.md:
--------------------------------------------------------------------------------
1 | # 路由
2 |
3 | 本项目中采用约定式路由
4 |
5 | 参考[umi 路由](https://umijs.org/zh/guide/router.html)
6 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | testURL: 'http://localhost:8000',
3 | }
4 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Antd-Admin",
3 | "start_url": ".",
4 | "display": "standalone",
5 | "background_color": "#fff",
6 | "description": "A front-end solution for enterprise applications built upon Ant Design and UmiJS",
7 | "icons": [{
8 | "src": "logo/logo@96.png",
9 | "sizes": "72x72"
10 | },
11 | {
12 | "src": "logo/logo@128.png",
13 | "sizes": "128x128"
14 | },
15 | {
16 | "src": "logo/logo@144.png",
17 | "sizes": "144x144"
18 | },
19 | {
20 | "src": "logo/logo@152.png",
21 | "sizes": "152x152"
22 | },
23 | {
24 | "src": "logo/logo@192.png",
25 | "sizes": "192x192"
26 | },
27 | {
28 | "src": "logo/logo@384.png",
29 | "sizes": "384x384"
30 | },
31 | {
32 | "src": "logo/logo@512.png",
33 | "sizes": "512x512"
34 | }
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/mock/_utils.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Query objects that specify keys and values in an array where all values are objects.
3 | * @param {array} array An array where all values are objects, like [{key:1},{key:2}].
4 | * @param {string} key The key of the object that needs to be queried.
5 | * @param {string} value The value of the object that needs to be queried.
6 | * @return {object|undefined} Return frist object when query success.
7 | */
8 | export function queryArray(array, key, value) {
9 | if (!Array.isArray(array)) {
10 | return
11 | }
12 | return array.filter(_ => _[key] === value)
13 | }
14 |
15 | export function randomNumber(min, max) {
16 | return Math.floor(Math.random() * (max - min) + min)
17 | }
18 |
19 | export function randomAvatar() {
20 | const avatarList = [
21 | 'photo-1549492864-2ec7d66ffb04.jpeg',
22 | 'photo-1480535339474-e083439a320d.jpeg',
23 | 'photo-1523419409543-a5e549c1faa8.jpeg',
24 | 'photo-1519648023493-d82b5f8d7b8a.jpeg',
25 | 'photo-1523307730650-594bc63f9d67.jpeg',
26 | 'photo-1522962506050-a2f0267e4895.jpeg',
27 | 'photo-1489779162738-f81aed9b0a25.jpeg',
28 | 'photo-1534308143481-c55f00be8bd7.jpeg',
29 | 'photo-1519336555923-59661f41bb45.jpeg',
30 | 'photo-1551438632-e8c7d9a5d1b7.jpeg',
31 | 'photo-1525879000488-bff3b1c387cf.jpeg',
32 | 'photo-1487412720507-e7ab37603c6f.jpeg',
33 | 'photo-1510227272981-87123e259b17.jpeg'
34 | ]
35 | return `//image.zuiidea.com/${avatarList[randomNumber(0, avatarList.length - 1)]}?imageView2/1/w/200/h/200/format/webp/q/75|imageslim`
36 | }
37 |
38 | export const Constant = {
39 | ApiPrefix: '/api/v1',
40 | NotFound: {
41 | message: 'Not Found',
42 | documentation_url: '',
43 | },
44 | Color: {
45 | green: '#64ea91',
46 | blue: '#8fc9fb',
47 | purple: '#d897eb',
48 | red: '#f69899',
49 | yellow: '#f8c82e',
50 | peach: '#f797d6',
51 | borderBase: '#e5e5e5',
52 | borderSplit: '#f4f4f4',
53 | grass: '#d6fbb5',
54 | sky: '#c1e0fc',
55 | },
56 | }
57 |
58 | export Mock from 'mockjs'
59 | export qs from 'qs'
60 |
--------------------------------------------------------------------------------
/mock/dashboard.js:
--------------------------------------------------------------------------------
1 | import { Mock, Constant } from './_utils'
2 |
3 | const { ApiPrefix, Color } = Constant
4 |
5 | const Dashboard = Mock.mock({
6 | 'sales|8': [
7 | {
8 | 'name|+1': 2008,
9 | 'Clothes|200-500': 1,
10 | 'Food|180-400': 1,
11 | 'Electronics|300-550': 1,
12 | },
13 | ],
14 | cpu: {
15 | 'usage|50-600': 1,
16 | space: 825,
17 | 'cpu|40-90': 1,
18 | 'data|20': [
19 | {
20 | 'cpu|20-80': 1,
21 | },
22 | ],
23 | },
24 | browser: [
25 | {
26 | name: 'Google Chrome',
27 | percent: 43.3,
28 | status: 1,
29 | },
30 | {
31 | name: 'Mozilla Firefox',
32 | percent: 33.4,
33 | status: 2,
34 | },
35 | {
36 | name: 'Apple Safari',
37 | percent: 34.6,
38 | status: 3,
39 | },
40 | {
41 | name: 'Internet Explorer',
42 | percent: 12.3,
43 | status: 4,
44 | },
45 | {
46 | name: 'Opera Mini',
47 | percent: 3.3,
48 | status: 1,
49 | },
50 | {
51 | name: 'Chromium',
52 | percent: 2.53,
53 | status: 1,
54 | },
55 | ],
56 | user: {
57 | name: 'github',
58 | sales: 3241,
59 | sold: 3556,
60 | },
61 | 'completed|12': [
62 | {
63 | 'name|+1': 2008,
64 | 'Task complete|200-1000': 1,
65 | 'Cards Complete|200-1000': 1,
66 | },
67 | ],
68 | 'comments|5': [
69 | {
70 | name: '@last',
71 | 'status|1-3': 1,
72 | content: '@sentence',
73 | avatar() {
74 | return Mock.Random.image(
75 | '48x48',
76 | Mock.Random.color(),
77 | '#757575',
78 | 'png',
79 | this.name.substr(0, 1)
80 | )
81 | },
82 | date() {
83 | return `2016-${Mock.Random.date('MM-dd')} ${Mock.Random.time(
84 | 'HH:mm:ss'
85 | )}`
86 | },
87 | },
88 | ],
89 | 'recentSales|36': [
90 | {
91 | 'id|+1': 1,
92 | name: '@last',
93 | 'status|1-4': 1,
94 | date() {
95 | return `${Mock.Random.integer(2015, 2016)}-${Mock.Random.date(
96 | 'MM-dd'
97 | )} ${Mock.Random.time('HH:mm:ss')}`
98 | },
99 | 'price|10-200.1-2': 1,
100 | },
101 | ],
102 | quote: {
103 | name: 'Joho Doe',
104 | title: 'Graphic Designer',
105 | content:
106 | "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
107 | avatar:
108 | '//cdn.antd-admin.zuiidea.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
109 | },
110 | numbers: [
111 | {
112 | icon: 'pay-circle-o',
113 | color: Color.green,
114 | title: 'Online Review',
115 | number: 2781,
116 | },
117 | {
118 | icon: 'team',
119 | color: Color.blue,
120 | title: 'New Customers',
121 | number: 3241,
122 | },
123 | {
124 | icon: 'message',
125 | color: Color.purple,
126 | title: 'Active Projects',
127 | number: 253,
128 | },
129 | {
130 | icon: 'shopping-cart',
131 | color: Color.red,
132 | title: 'Referrals',
133 | number: 4324,
134 | },
135 | ],
136 | })
137 |
138 | module.exports = {
139 | [`GET ${ApiPrefix}/dashboard`](req, res) {
140 | res.json(Dashboard)
141 | },
142 | }
143 |
--------------------------------------------------------------------------------
/mock/post.js:
--------------------------------------------------------------------------------
1 | import { Mock, Constant } from './_utils'
2 |
3 | const { ApiPrefix } = Constant
4 |
5 | let postId = 0
6 | const database = Mock.mock({
7 | 'data|100': [
8 | {
9 | id() {
10 | postId += 1
11 | return postId + 10000
12 | },
13 | 'status|1-2': 1,
14 | title: '@title',
15 | author: '@last',
16 | categories: '@word',
17 | tags: '@word',
18 | 'views|10-200': 1,
19 | 'comments|10-200': 1,
20 | visibility: () => {
21 | return Mock.mock(
22 | '@pick(["Public",' + '"Password protected", ' + '"Private"])'
23 | )
24 | },
25 | date: '@dateTime',
26 | image() {
27 | return Mock.Random.image(
28 | '100x100',
29 | Mock.Random.color(),
30 | '#757575',
31 | 'png',
32 | this.author.substr(0, 1)
33 | )
34 | },
35 | },
36 | ],
37 | }).data
38 |
39 | module.exports = {
40 | [`GET ${ApiPrefix}/posts`](req, res) {
41 | const { query } = req
42 | let { pageSize, page, ...other } = query
43 | pageSize = pageSize || 10
44 | page = page || 1
45 |
46 | let newData = database
47 | for (let key in other) {
48 | if ({}.hasOwnProperty.call(other, key)) {
49 | newData = newData.filter(item => {
50 | if ({}.hasOwnProperty.call(item, key)) {
51 | return (
52 | String(item[key])
53 | .trim()
54 | .indexOf(decodeURI(other[key]).trim()) > -1
55 | )
56 | }
57 | return true
58 | })
59 | }
60 | }
61 |
62 | res.status(200).json({
63 | data: newData.slice((page - 1) * pageSize, page * pageSize),
64 | total: newData.length,
65 | })
66 | },
67 | }
68 |
--------------------------------------------------------------------------------
/mock/route.js:
--------------------------------------------------------------------------------
1 | import { Constant } from './_utils'
2 | const { ApiPrefix } = Constant
3 |
4 | const database = [
5 | {
6 | id: '1',
7 | icon: 'dashboard',
8 | name: 'Dashboard',
9 | zh: {
10 | name: '仪表盘'
11 | },
12 | 'pt-br': {
13 | name: 'Dashboard'
14 | },
15 | route: '/dashboard',
16 | },
17 | {
18 | id: '2',
19 | breadcrumbParentId: '1',
20 | name: 'Users',
21 | zh: {
22 | name: '用户管理'
23 | },
24 | 'pt-br': {
25 | name: 'Usuário'
26 | },
27 | icon: 'user',
28 | route: '/user',
29 | },
30 | {
31 | id: '7',
32 | breadcrumbParentId: '1',
33 | name: 'Posts',
34 | zh: {
35 | name: '用户管理'
36 | },
37 | 'pt-br': {
38 | name: 'Posts'
39 | },
40 | icon: 'shopping-cart',
41 | route: '/post',
42 | },
43 | {
44 | id: '21',
45 | menuParentId: '-1',
46 | breadcrumbParentId: '2',
47 | name: 'User Detail',
48 | zh: {
49 | name: '用户详情'
50 | },
51 | 'pt-br': {
52 | name: 'Detalhes do usuário'
53 | },
54 | route: '/user/:id',
55 | },
56 | {
57 | id: '3',
58 | breadcrumbParentId: '1',
59 | name: 'Request',
60 | zh: {
61 | name: 'Request'
62 | },
63 | 'pt-br': {
64 | name: 'Requisição'
65 | },
66 | icon: 'api',
67 | route: '/request',
68 | },
69 | {
70 | id: '4',
71 | breadcrumbParentId: '1',
72 | name: 'UI Element',
73 | zh: {
74 | name: 'UI组件'
75 | },
76 | 'pt-br': {
77 | name: 'Elementos UI'
78 | },
79 | icon: 'camera-o',
80 | },
81 | {
82 | id: '45',
83 | breadcrumbParentId: '4',
84 | menuParentId: '4',
85 | name: 'Editor',
86 | zh: {
87 | name: 'Editor'
88 | },
89 | 'pt-br': {
90 | name: 'Editor'
91 | },
92 | icon: 'edit',
93 | route: '/editor',
94 | },
95 | {
96 | id: '5',
97 | breadcrumbParentId: '1',
98 | name: 'Charts',
99 | zh: {
100 | name: 'Charts'
101 | },
102 | 'pt-br': {
103 | name: 'Graficos'
104 | },
105 | icon: 'code-o',
106 | },
107 | {
108 | id: '51',
109 | breadcrumbParentId: '5',
110 | menuParentId: '5',
111 | name: 'ECharts',
112 | zh: {
113 | name: 'ECharts'
114 | },
115 | 'pt-br': {
116 | name: 'ECharts'
117 | },
118 | icon: 'line-chart',
119 | route: '/chart/ECharts',
120 | },
121 | {
122 | id: '52',
123 | breadcrumbParentId: '5',
124 | menuParentId: '5',
125 | name: 'HighCharts',
126 | zh: {
127 | name: 'HighCharts'
128 | },
129 | 'pt-br': {
130 | name: 'HighCharts'
131 | },
132 | icon: 'bar-chart',
133 | route: '/chart/highCharts',
134 | },
135 | {
136 | id: '53',
137 | breadcrumbParentId: '5',
138 | menuParentId: '5',
139 | name: 'Rechartst',
140 | zh: {
141 | name: 'Rechartst'
142 | },
143 | 'pt-br': {
144 | name: 'Rechartst'
145 | },
146 | icon: 'area-chart',
147 | route: '/chart/Recharts',
148 | },
149 | ]
150 |
151 | module.exports = {
152 | [`GET ${ApiPrefix}/routes`](req, res) {
153 | res.status(200).json(database)
154 | },
155 | }
156 |
--------------------------------------------------------------------------------
/public/america.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
64 |
--------------------------------------------------------------------------------
/public/china.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
24 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/public/logo/logo@128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@128.png
--------------------------------------------------------------------------------
/public/logo/logo@144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@144.png
--------------------------------------------------------------------------------
/public/logo/logo@152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@152.png
--------------------------------------------------------------------------------
/public/logo/logo@192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@192.png
--------------------------------------------------------------------------------
/public/logo/logo@384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@384.png
--------------------------------------------------------------------------------
/public/logo/logo@512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@512.png
--------------------------------------------------------------------------------
/public/logo/logo@72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@72.png
--------------------------------------------------------------------------------
/public/logo/logo@96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zuiidea/antd-admin/67fc31a00892215e2d9971a91aa300e33ba48321/public/logo/logo@96.png
--------------------------------------------------------------------------------
/public/portugal.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
--------------------------------------------------------------------------------
/scripts/translate.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Youdao Translate, My private account is for testing purposes only.
3 | * Please go to the official account to apply for an account. Thank you for your cooperation.
4 | * APP ID：055c2d71f9a05214
5 | * Secret key：ZcpuQxQW3NkQeKVkqrXIKQYXH57g2KuN
6 | */
7 |
8 | /* eslint-disable */
9 | const md5 = require('md5')
10 | const qs = require('qs')
11 | const fs = require('fs')
12 | const path = require('path')
13 | const axios = require('axios')
14 | const jsonFormat = require('json-format')
15 | const { i18n } = require('../src/utils/config')
16 | const { languages, defaultLanguage } = i18n
17 |
18 | const locales = {}
19 |
20 | languages.forEach(item => {
21 | locales[item.key] = require(`../src/locales/${item.key}/messages.json`)
22 | })
23 |
24 | const youdao = ({ q, from, to }) =>
25 | new Promise((resolve, reject) => {
26 | {
27 | const appid = '055c2d71f9a05214'
28 | const appse = 'ZcpuQxQW3NkQeKVkqrXIKQYXH57g2KuN'
29 | const salt = Date.now()
30 |
31 | const sign = md5(appid + q + salt + appse)
32 | const query = qs.stringify({
33 | q,
34 | from,
35 | to,
36 | appKey: appid,
37 | salt,
38 | sign,
39 | })
40 |
41 | axios.get(`http://openapi.youdao.com/api?${query}`).then(({ data }) => {
42 | if (data.query && data.translation[0]) {
43 | resolve(data.translation[0])
44 | } else {
45 | resolve(q)
46 | }
47 | })
48 | }
49 | })
50 |
51 | const transform = async ({ from, to, locales, outputPath }) => {
52 | for (const key in locales[from]) {
53 | if (locales[to][key]) {
54 | console.log(`add to skip: ${key}`)
55 | } else {
56 | let res = key
57 | let way = 'youdao'
58 | if (key.indexOf('/') !== 0) {
59 | const reg = '{([^{}]*)}'
60 | const tasks = key
61 | .match(new RegExp(`${reg}|((?<=(${reg}|^)).*?(?=(${reg}|$)))`, 'g'))
62 | .map(item => {
63 | if (new RegExp(reg).test(item)) {
64 | return Promise.resolve(item)
65 | }
66 | return youdao({
67 | q: item,
68 | from,
69 | to,
70 | })
71 | })
72 |
73 | res = (await Promise.all(tasks)).join('')
74 | } else {
75 | res = `/${to + key}`
76 | way = 'link'
77 | }
78 | if (res !== key) {
79 | locales[to][key] = res
80 | console.log(`${way}: ${from} -> ${to}: ${key} -> ${res}`)
81 | } else {
82 | console.log(`same: ${from} -> ${to}: ${key}`)
83 | }
84 | }
85 | }
86 | await fs.writeFileSync(
87 | path.resolve(__dirname, outputPath),
88 | jsonFormat(locales[to], {
89 | type: 'space',
90 | size: 2,
91 | })
92 | )
93 | }
94 | ;(async () => {
95 | const tasks = languages
96 | .map(item => ({
97 | from: defaultLanguage,
98 | to: item.key,
99 | }))
100 | .filter(item => item.from !== item.to)
101 |
102 | for (const item of tasks) {
103 | console.log(`start: ${item.from} -> ${item.to}`)
104 | await transform({
105 | from: item.from,
106 | to: item.to,
107 | locales,
108 | outputPath: `../src/locales/${item.to}/messages.json`,
109 | })
110 | console.log(`completed: ${item.from} -> ${item.to}`)
111 | }
112 |
113 | console.log('All translations have been completed.')
114 | })()
115 |
--------------------------------------------------------------------------------
/src/components/DropOption/DropOption.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { BarsOutlined, DownOutlined } from '@ant-design/icons'
4 | import { Dropdown, Button, Menu } from 'antd'
5 |
6 | const DropOption = ({
7 | onMenuClick,
8 | menuOptions = [],
9 | buttonStyle,
10 | dropdownProps,
11 | }) => {
12 | const menu = menuOptions.map(item => (
13 |
9 | {labelArray.length > 0 && (
10 |
20 | )
21 | }
22 |
23 | FilterItem.propTypes = {
24 | label: PropTypes.string,
25 | children: PropTypes.element.isRequired,
26 | }
27 |
28 | export default FilterItem
29 |
--------------------------------------------------------------------------------
/src/components/FilterItem/FilterItem.less:
--------------------------------------------------------------------------------
1 | .filterItem {
2 | display: flex;
3 | justify-content: space-between;
4 |
5 | .labelWrap {
6 | width: 64px;
7 | line-height: 28px;
8 | margin-right: 12px;
9 | justify-content: space-between;
10 | display: flex;
11 | overflow: hidden;
12 | }
13 |
14 | .item {
15 | flex: 1;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/FilterItem/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "FilterItem",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./FilterItem.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/GlobalFooter/index.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | export interface GlobalFooterProps {
3 | links?: Array<{
4 | key?: string;
5 | title: React.ReactNode;
6 | href: string;
7 | blankTarget?: boolean;
8 | }>;
9 | copyright?: React.ReactNode;
10 | style?: React.CSSProperties;
11 | className?: string;
12 | }
13 |
14 | export default class GlobalFooter extends React.Component
11 | {labelArray.map((item, index) => (
12 |
13 | {item}
14 |
15 | ))}
16 |
17 | )}
18 | {children}
19 |
35 |
40 |
41 |
36 | 
37 | {!collapsed &&
39 | {config.siteName}
} 38 |
42 |
48 |
56 |
57 | {!collapsed && (
58 |
59 |
60 | Switch Theme
62 |
63 |
73 | )}
74 |
14 |
19 | )
20 | }
21 |
22 | Loader.propTypes = {
23 | spinning: PropTypes.bool,
24 | fullScreen: PropTypes.bool,
25 | }
26 |
27 | export default Loader
28 |
--------------------------------------------------------------------------------
/src/components/Loader/Loader.less:
--------------------------------------------------------------------------------
1 | .loader {
2 | background-color: #fff;
3 | width: 100%;
4 | position: absolute;
5 | top: 0;
6 | bottom: 0;
7 | left: 0;
8 | z-index: 100000;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | opacity: 1;
13 | text-align: center;
14 |
15 | &.fullScreen {
16 | position: fixed;
17 | }
18 |
19 | .warpper {
20 | width: 100px;
21 | height: 100px;
22 | display: inline-flex;
23 | flex-direction: column;
24 | justify-content: space-around;
25 | }
26 |
27 | .inner {
28 | width: 40px;
29 | height: 40px;
30 | margin: 0 auto;
31 | text-indent: -12345px;
32 | border-top: 1px solid rgba(0, 0, 0, 0.08);
33 | border-right: 1px solid rgba(0, 0, 0, 0.08);
34 | border-bottom: 1px solid rgba(0, 0, 0, 0.08);
35 | border-left: 1px solid rgba(0, 0, 0, 0.7);
36 | border-radius: 50%;
37 | z-index: 100001;
38 |
39 | :local {
40 | animation: spinner 600ms infinite linear;
41 | }
42 | }
43 |
44 | .text {
45 | width: 100px;
46 | height: 20px;
47 | text-align: center;
48 | font-size: 12px;
49 | letter-spacing: 4px;
50 | color: #000;
51 | }
52 |
53 | &.hidden {
54 | z-index: -1;
55 | opacity: 0;
56 | transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
57 | }
58 | }
59 | @keyframes spinner {
60 | 0% {
61 | transform: rotate(0deg);
62 | }
63 |
64 | 100% {
65 | transform: rotate(360deg);
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/Loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Loader",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Loader.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Page/Page.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import classnames from 'classnames'
4 | import Loader from '../Loader'
5 | import styles from './Page.less'
6 |
7 | export default class Page extends Component {
8 | render() {
9 | const { className, children, loading = false, inner = false } = this.props
10 | const loadingStyle = {
11 | height: 'calc(100vh - 184px)',
12 | overflow: 'hidden',
13 | }
14 | return (
15 |
15 |
16 |
18 | LOADING
17 |
21 | {loading ?
24 | )
25 | }
26 | }
27 |
28 | Page.propTypes = {
29 | className: PropTypes.string,
30 | children: PropTypes.node,
31 | loading: PropTypes.bool,
32 | inner: PropTypes.bool,
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/Page/Page.less:
--------------------------------------------------------------------------------
1 | @import '~themes/vars.less';
2 |
3 | .contentInner {
4 | background: #fff;
5 | padding: 24px;
6 | box-shadow: @shadow-1;
7 | min-height: ~'calc(100vh - 230px)';
8 | position: relative;
9 | }
10 |
11 | @media (max-width: 767px) {
12 | .contentInner {
13 | padding: 12px;
14 | min-height: ~'calc(100vh - 160px)';
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Page/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Page",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Page.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/ScrollBar/index.js:
--------------------------------------------------------------------------------
1 | import ScrollBar from 'react-perfect-scrollbar'
2 | import 'react-perfect-scrollbar/dist/css/styles.css'
3 | import './index.less'
4 |
5 | export default ScrollBar
6 |
--------------------------------------------------------------------------------
/src/components/ScrollBar/index.less:
--------------------------------------------------------------------------------
1 | :global {
2 | .ps--active-x > .ps__rail-x,
3 | .ps--active-y > .ps__rail-y {
4 | background-color: transparent;
5 | }
6 |
7 | .ps__rail-x:hover > .ps__thumb-x,
8 | .ps__rail-x:focus > .ps__thumb-x {
9 | height: 8px;
10 | }
11 |
12 | .ps__rail-y:hover > .ps__thumb-y,
13 | .ps__rail-y:focus > .ps__thumb-y {
14 | width: 8px;
15 | }
16 |
17 | .ps__rail-y,
18 | .ps__rail-x {
19 | z-index: 9;
20 | }
21 |
22 | .ps__thumb-y {
23 | width: 4px;
24 | right: 4px;
25 | }
26 |
27 | .ps__thumb-x {
28 | height: 4px;
29 | bottom: 4px;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Editor from './Editor'
2 | import FilterItem from './FilterItem'
3 | import DropOption from './DropOption'
4 | import Loader from './Loader'
5 | import ScrollBar from './ScrollBar'
6 | import GlobalFooter from './GlobalFooter'
7 | import Ellipsis from './Ellipsis'
8 | import * as MyLayout from './Layout/index.js'
9 | import Page from './Page'
10 |
11 | export { MyLayout, Editor, GlobalFooter, Ellipsis, FilterItem, DropOption, Loader, Page, ScrollBar }
12 |
--------------------------------------------------------------------------------
/src/e2e/login.e2e.js:
--------------------------------------------------------------------------------
1 | import puppeteer from 'puppeteer'
2 |
3 | describe('Login', () => {
4 | let browser
5 | let page
6 |
7 | beforeAll(async () => {
8 | browser = await puppeteer.launch({ args: ['--no-sandbox'] })
9 | })
10 |
11 | beforeEach(async () => {
12 | page = await browser.newPage()
13 | await page.goto('http://localhost:8000/en/login', {
14 | waitUntil: 'networkidle2',
15 | })
16 | })
17 |
18 | afterEach(() => page.close())
19 |
20 | it('should login with failure', async () => {
21 | await page.waitFor(selector => !!document.querySelector('#username'), {
22 | timeout: 3000,
23 | })
24 | await page.type('#username', 'wrong_user')
25 | await page.type('#password', 'wrong_password')
26 | await page.click('button[type="button"]')
27 | await page.waitForSelector('.anticon-close-circle') // should display error
28 | })
29 |
30 | it('should login successfully', async () => {
31 | await page.waitForSelector('#username', { timeout: 3000 })
32 | await page.type('#username', 'admin')
33 | await page.type('#password', 'admin')
34 | await page.click('button[type="button"]')
35 | await page.waitForSelector('.ant-layout-footer')
36 | const text = await page.evaluate(() => document.body.innerHTML)
37 | expect(text).toContain('Ant Design Admin')
38 | })
39 |
40 | afterAll(() => browser.close())
41 | })
42 |
--------------------------------------------------------------------------------
/src/layouts/BaseLayout.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent, Fragment } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { connect } from 'umi'
4 | import { Helmet } from 'react-helmet'
5 | import { Loader } from 'components'
6 | import { queryLayout } from 'utils'
7 | import NProgress from 'nprogress'
8 | import config from 'utils/config'
9 | import { withRouter } from 'umi'
10 |
11 | import PublicLayout from './PublicLayout'
12 | import PrimaryLayout from './PrimaryLayout'
13 | import './BaseLayout.less'
14 |
15 | const LayoutMap = {
16 | primary: PrimaryLayout,
17 | public: PublicLayout,
18 | }
19 |
20 | @withRouter
21 | @connect(({ loading }) => ({ loading }))
22 | class BaseLayout extends PureComponent {
23 | previousPath = ''
24 |
25 | render() {
26 | const { loading, children, location } = this.props
27 | const Container = LayoutMap[queryLayout(config.layouts, location.pathname)]
28 |
29 | const currentPath = location.pathname + location.search
30 | if (currentPath !== this.previousPath) {
31 | NProgress.start()
32 | }
33 |
34 | if (!loading.global) {
35 | NProgress.done()
36 | this.previousPath = currentPath
37 | }
38 |
39 | return (
40 |
9 |
12 | 404 Not Found
11 |
82 |
100 | )
101 | }
102 | }
103 |
104 | export default ChartShowLoadingComponent
105 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/ChartWithEventComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactEcharts from 'echarts-for-react'
3 |
4 | const ChartWithEventComponent = () => {
5 | const onChartReady = echart => {
6 | /* eslint-disable */
7 | console.log('echart is ready', echart)
8 | }
9 | const onChartLegendselectchanged = (param, echart) => {
10 | console.log(param, echart)
11 | }
12 | const onChartClick = (param, echart) => {
13 | console.log(param, echart)
14 | }
15 | const getOtion = () => {
16 | const option = {
17 | title: {
18 | text: '某站点用户访问来源',
19 | subtext: '纯属虚构',
20 | x: 'center',
21 | },
22 | tooltip: {
23 | trigger: 'item',
24 | formatter: '{a}
83 |
88 |
99 |
96 | {code}
97 |
98 | {b} : {c} ({d}%)', 25 | }, 26 | legend: { 27 | orient: 'vertical', 28 | left: 'left', 29 | data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'], 30 | }, 31 | series: [ 32 | { 33 | name: '访问来源', 34 | type: 'pie', 35 | radius: '55%', 36 | center: ['50%', '60%'], 37 | data: [ 38 | { value: 335, name: '直接访问' }, 39 | { value: 310, name: '邮件营销' }, 40 | { value: 234, name: '联盟广告' }, 41 | { value: 135, name: '视频广告' }, 42 | { value: 1548, name: '搜索引擎' }, 43 | ], 44 | itemStyle: { 45 | emphasis: { 46 | shadowBlur: 10, 47 | shadowOffsetX: 0, 48 | shadowColor: 'rgba(0, 0, 0, 0.5)', 49 | }, 50 | }, 51 | }, 52 | ], 53 | } 54 | return option 55 | } 56 | 57 | let onEvents = { 58 | click: onChartClick, 59 | legendselectchanged: onChartLegendselectchanged, 60 | } 61 | let code = 62 | 'let onEvents = {\n' + 63 | " 'click': onChartClick,\n" + 64 | " 'legendselectchanged': onChartLegendselectchanged\n" + 65 | '}\n\n' + 66 | '
74 |
92 | )
93 | }
94 |
95 | export default ChartWithEventComponent
96 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/EchartsComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import SimpleChartComponent from './SimpleChartComponent'
5 | import ChartWithEventComponent from './ChartWithEventComponent'
6 | import ThemeChartComponent from './ThemeChartComponent'
7 | import ChartShowLoadingComponent from './ChartShowLoadingComponent'
8 | import ChartAPIComponent from './ChartAPIComponent'
9 | import DynamicChartComponent from './DynamicChartComponent'
10 | import MapChartComponent from './MapChartComponent'
11 |
12 | // v1.2.0 add 7 demo.
13 | import AirportCoordComponent from './AirportCoordComponent'
14 | import CalendarComponent from './CalendarComponent'
15 | import GaugeComponent from './GaugeComponent'
16 | import GCalendarComponent from './GCalendarComponent'
17 | import GraphComponent from './GraphComponent'
18 | import LunarCalendarComponent from './LunarCalendarComponent'
19 | import TreemapComponent from './TreemapComponent'
20 | import LiquidfillComponent from './LiquidfillComponent'
21 | import BubbleGradientComponent from './BubbleGradientComponent'
22 | import TransparentBar3DComPonent from './TransparentBar3DComPonent'
23 |
24 | const EchartsComponent = ({ type }) => {
25 | if (type === 'simple') return
75 |
80 |
91 |
88 | {code}
89 |
90 |
64 |
73 | )
74 | }
75 |
76 | export default GCalendarComponent
77 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/LiquidfillComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactEcharts from 'echarts-for-react'
3 |
4 | require('echarts-liquidfill')
5 |
6 | const LiquidfillComponent = () => {
7 | const option = {
8 | series: [
9 | {
10 | type: 'liquidFill',
11 | data: [0.6],
12 | },
13 | ],
14 | }
15 | return (
16 |
65 |
66 |
72 |
17 |
29 | )
30 | }
31 |
32 | export default LiquidfillComponent
33 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/MainPageComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import AdSense from 'react-adsense'
3 | import { Link } from 'umi'
4 | import DynamicChartComponent from './DynamicChartComponent.js'
5 |
6 | const MainPageComponent = () => {
7 | return (
8 |
18 |
19 |
28 |
9 |
50 | )
51 | }
52 |
53 | export default MainPageComponent
54 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/ModuleLoadChartComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactEcharts from 'echarts-for-react'
3 |
4 | const ModuleLoadChartComponent = () => {
5 | const option = {
6 | title: { text: 'ECharts 入门示例' },
7 | tooltip: {},
8 | xAxis: {
9 | data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
10 | },
11 | yAxis: {},
12 | series: [
13 | {
14 | name: '销量',
15 | type: 'bar',
16 | data: [5, 20, 36, 10, 10, 20],
17 | },
18 | ],
19 | }
20 |
21 | let code =
22 | 'echarts-for-react {this.props.params.type}
10 |11 | {' '} 12 | A very simple echarts(v3.0) wrapper for React.{' '} 13 | 14 | hustcc/echarts-for-react 15 | 16 |
17 | 18 |21 | Simple demo | 22 | Echarts loading | 23 | Echarts API | 24 | Echarts events | 25 | Echarts theme | 26 | Dynamic chart | 27 | Map chart 28 |
29 |30 | New 31 | : 32 | Airport | 33 | Graph | 34 | Calendar | 35 | Treemap | 36 | Gauge | 37 | GCalendar | 38 | Lunar | 39 | Liquidfill 40 |
41 | {this.props.children ||44 | Get it on GitHub!{' '} 45 | 46 | hustcc/echarts-for-react 47 | 48 |
49 |
29 |
52 | )
53 | }
54 |
55 | export default ModuleLoadChartComponent
56 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/SimpleChartComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactEcharts from 'echarts-for-react'
3 | import './theme/macarons.js'
4 |
5 | const SimpleChartComponent = () => {
6 | const option = {
7 | title: {
8 | text: '堆叠区域图',
9 | },
10 | tooltip: {
11 | trigger: 'axis',
12 | },
13 | legend: {
14 | data: ['邮件营销', '联盟广告', '视频广告'],
15 | },
16 | toolbox: {
17 | feature: {
18 | saveAsImage: {},
19 | },
20 | },
21 | grid: {
22 | left: '3%',
23 | right: '4%',
24 | bottom: '3%',
25 | containLabel: true,
26 | },
27 | xAxis: [
28 | {
29 | type: 'category',
30 | boundaryGap: false,
31 | data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
32 | },
33 | ],
34 | yAxis: [
35 | {
36 | type: 'value',
37 | },
38 | ],
39 | series: [
40 | {
41 | name: '邮件营销',
42 | type: 'line',
43 | stack: '总量',
44 | areaStyle: { normal: {} },
45 | data: [120, 132, 101, 134, 90, 230, 210],
46 | },
47 | {
48 | name: '联盟广告',
49 | type: 'line',
50 | stack: '总量',
51 | areaStyle: { normal: {} },
52 | data: [220, 182, 191, 234, 290, 330, 310],
53 | },
54 | {
55 | name: '视频广告',
56 | type: 'line',
57 | stack: '总量',
58 | areaStyle: { normal: {} },
59 | data: [150, 232, 201, 154, 190, 330, 410],
60 | },
61 | ],
62 | }
63 | let code =
64 | '
30 |
36 |
51 |
48 | {code}
49 |
50 |
70 |
87 | )
88 | }
89 |
90 | export default SimpleChartComponent
91 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/ThemeChartComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactEcharts from 'echarts-for-react'
3 |
4 | import * as echarts from 'echarts'
5 |
6 | const ThemeChartComponent = () => {
7 | const option = {
8 | title: {
9 | text: '阶梯瀑布图',
10 | subtext: 'From ExcelHome',
11 | sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5',
12 | },
13 | tooltip: {
14 | trigger: 'axis',
15 | axisPointer: {
16 | // 坐标轴指示器，坐标轴触发有效
17 | type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
18 | },
19 | },
20 | legend: {
21 | data: ['支出', '收入'],
22 | },
23 | grid: {
24 | left: '3%',
25 | right: '4%',
26 | bottom: '3%',
27 | containLabel: true,
28 | },
29 | xAxis: {
30 | type: 'category',
31 | splitLine: { show: false },
32 | data: [
33 | '11月1日',
34 | '11月2日',
35 | '11月3日',
36 | '11月4日',
37 | '11月5日',
38 | '11月6日',
39 | '11月7日',
40 | '11月8日',
41 | '11月9日',
42 | '11月10日',
43 | '11月11日',
44 | ],
45 | },
46 | yAxis: {
47 | type: 'value',
48 | },
49 | series: [
50 | {
51 | name: '辅助',
52 | type: 'bar',
53 | stack: '总量',
54 | itemStyle: {
55 | normal: {
56 | barBorderColor: 'rgba(0,0,0,0)',
57 | color: 'rgba(0,0,0,0)',
58 | },
59 | emphasis: {
60 | barBorderColor: 'rgba(0,0,0,0)',
61 | color: 'rgba(0,0,0,0)',
62 | },
63 | },
64 | data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
65 | },
66 | {
67 | name: '收入',
68 | type: 'bar',
69 | stack: '总量',
70 | label: {
71 | normal: {
72 | show: true,
73 | position: 'top',
74 | },
75 | },
76 | data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
77 | },
78 | {
79 | name: '支出',
80 | type: 'bar',
81 | stack: '总量',
82 | label: {
83 | normal: {
84 | show: true,
85 | position: 'bottom',
86 | },
87 | },
88 | data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
89 | },
90 | ],
91 | }
92 |
93 | echarts.registerTheme('my_theme', {
94 | backgroundColor: '#f4cccc',
95 | })
96 |
97 | let code =
98 | "echarts.registerTheme('my_theme', {\n" +
99 | " backgroundColor: '#f4cccc'\n" +
100 | '});\n\n' +
101 | '
71 |
75 |
86 |
83 | {code}
84 |
85 |
106 |
124 | )
125 | }
126 |
127 | export default ThemeChartComponent
128 |
--------------------------------------------------------------------------------
/src/pages/chart/ECharts/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Radio } from 'antd'
3 | import { Page } from 'components'
4 | import EchartsComponent from './EchartsComponent'
5 | import styles from './index.less'
6 |
7 | const RadioGroup = Radio.Group
8 |
9 | const chartList = [
10 | {
11 | label: 'SimpleChart',
12 | value: 'simple',
13 | },
14 | {
15 | label: 'ChartShowLoading',
16 | value: 'loading',
17 | },
18 | {
19 | label: 'ChartAPI',
20 | value: 'api',
21 | },
22 | {
23 | label: 'ChartWithEvent',
24 | value: 'events',
25 | },
26 | {
27 | label: 'ThemeChart',
28 | value: 'theme',
29 | },
30 | {
31 | label: 'DynamicChart',
32 | value: 'dynamic',
33 | },
34 | {
35 | label: 'MapChart',
36 | value: 'map',
37 | },
38 | {
39 | label: 'AirportCoord',
40 | value: 'airport',
41 | },
42 | {
43 | label: 'Graph',
44 | value: 'graph',
45 | },
46 | {
47 | label: 'Calendar',
48 | value: 'calendar',
49 | },
50 | {
51 | label: 'Treemap',
52 | value: 'treemap',
53 | },
54 | {
55 | label: 'Gauge',
56 | value: 'gauge',
57 | },
58 | {
59 | label: 'GCalendar',
60 | value: 'gcalendar',
61 | },
62 | {
63 | label: 'LunarCalendar',
64 | value: 'lunar',
65 | },
66 | {
67 | label: 'Liquidfill',
68 | value: 'liquid',
69 | },
70 | {
71 | label: 'BubbleGradient',
72 | value: 'BubbleGradientComponent',
73 | },
74 | {
75 | label: 'TransparentBar3D',
76 | value: 'TransparentBar3DComPonent',
77 | },
78 | ]
79 |
80 | class Chart extends React.Component {
81 | constructor() {
82 | super()
83 | this.state = {
84 | type: '',
85 | }
86 | this.handleRadioGroupChange = this.handleRadioGroupChange.bind(this)
87 | }
88 | handleRadioGroupChange(e) {
89 | this.setState({
90 | type: e.target.value,
91 | })
92 | }
93 | render() {
94 | return (
95 |
107 |
113 |
123 |
120 | {code}
121 |
122 |
102 |
104 |
105 | All demos from{' '}
106 |
107 | https://github.com/hustcc/echarts-for-react
108 |
109 |
110 |
13 |
14 |
18 | )
19 |
20 | Container.propTypes = {
21 | children: PropTypes.element.isRequired,
22 | ratio: PropTypes.number,
23 | minHeight: PropTypes.number,
24 | maxHeight: PropTypes.number,
25 | }
26 |
27 | export default Container
28 |
--------------------------------------------------------------------------------
/src/pages/chart/Recharts/Container.less:
--------------------------------------------------------------------------------
1 | .container {
2 | width: 100%;
3 | position: relative;
4 | display: inline-block;
5 |
6 | :global {
7 | .recharts-responsive-container {
8 | width: e('calc(100% + 56px)') !important;
9 | margin-left: -32px;
10 | }
11 | }
12 | }
13 |
14 | .content {
15 | position: absolute;
16 | left: 0;
17 | right: 0;
18 | top: 0;
19 | bottom: 0;
20 | }
21 |
--------------------------------------------------------------------------------
/src/pages/chart/Recharts/ReChartsComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 |
4 | import AreaChartComponent from './AreaChartComponent'
5 | import BarChartComponent from './BarChartComponent'
6 | import LineChartComponent from './LineChartComponent'
7 |
8 | const ReChartsComponent = ({ type }) => {
9 | if (type === 'areaChart') return
15 | {children}
16 |
17 |
46 |
48 |
46 |
48 |
41 |
48 | ),
49 | },
50 | ]
51 | return (
52 | {it.name}
42 |{it.content}
43 |
44 | {status[it.status].text}
45 | {it.date}
46 |
47 |
53 | key < 3)}
59 | />
60 |
61 | )
62 | }
63 |
64 | Comments.propTypes = {
65 | data: PropTypes.array,
66 | }
67 |
68 | export default Comments
69 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/comments.less:
--------------------------------------------------------------------------------
1 | @import '~themes/vars';
2 |
3 | .comments {
4 | :global .ant-table-thead > tr > th {
5 | background: #fff;
6 | border-bottom: solid 1px @border-color-base;
7 | }
8 |
9 | .avatar {
10 | width: 48px;
11 | height: 48px;
12 | background-position: center;
13 | background-size: cover;
14 | border-radius: 50%;
15 | background: #f8f8f8;
16 | display: inline-block;
17 | }
18 |
19 | .content {
20 | text-align: left;
21 | color: #757575;
22 | }
23 |
24 | .date {
25 | color: #a3a3a3;
26 | line-height: 30px;
27 | }
28 |
29 | .daterow {
30 | display: flex;
31 | justify-content: space-between;
32 | }
33 |
34 | .name {
35 | font-size: 14px;
36 | color: #474747;
37 | text-align: left;
38 | }
39 |
40 | .avatarcolumn {
41 | vertical-align: top;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/completed.less:
--------------------------------------------------------------------------------
1 | @import '~themes/vars';
2 |
3 | .sales {
4 | .title {
5 | margin-left: 32px;
6 | font-size: 16px;
7 | }
8 | }
9 |
10 | .radiusdot {
11 | width: 12px;
12 | height: 12px;
13 | margin-right: 8px;
14 | border-radius: 50%;
15 | display: inline-block;
16 | }
17 |
18 | .legend {
19 | text-align: right;
20 | color: #999;
21 | font-size: 14px;
22 |
23 | li {
24 | height: 48px;
25 | line-height: 48px;
26 | display: inline-block;
27 |
28 | & + li {
29 | margin-left: 24px;
30 | }
31 | }
32 | }
33 |
34 | .tooltip {
35 | background: #fff;
36 | padding: 20px;
37 | font-size: 14px;
38 |
39 | .tiptitle {
40 | font-weight: 700;
41 | font-size: 16px;
42 | margin-bottom: 8px;
43 | }
44 |
45 | .tipitem {
46 | height: 32px;
47 | line-height: 32px;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/pages/dashboard/components/cpu.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Color } from 'utils'
4 | import CountUp from 'react-countup'
5 | import {
6 | LineChart,
7 | Line,
8 | XAxis,
9 | YAxis,
10 | CartesianGrid,
11 | ResponsiveContainer,
12 | } from 'recharts'
13 | import styles from './cpu.less'
14 |
15 | const countUpProps = {
16 | start: 0,
17 | duration: 2.75,
18 | useEasing: true,
19 | useGrouping: true,
20 | separator: ',',
21 | }
22 |
23 | function Cpu({ usage = 0, space = 0, cpu = 0, data }) {
24 | return (
25 |