;
7 |
8 | export type IReactComponent =
9 | | React.StatelessComponent
10 | | React.ComponentClass
11 | | React.ClassicComponentClass
;
12 |
13 | interface Secured {
14 | (authority: authority, error?: React.ReactNode): (target: T) => T;
15 | }
16 |
17 | export interface AuthorizedRouteProps extends RouteProps {
18 | authority: authority;
19 | }
20 | export class AuthorizedRoute extends React.Component {}
21 |
22 | interface check {
23 | (
24 | authority: authority,
25 | target: T,
26 | Exception: S
27 | ): T | S;
28 | }
29 |
30 | export interface AuthorizedProps {
31 | authority: authority;
32 | noMatch?: React.ReactNode;
33 | }
34 |
35 | export class Authorized extends React.Component {
36 | static Secured: Secured;
37 | static AuthorizedRoute: typeof AuthorizedRoute;
38 | static check: check;
39 | }
40 |
41 | declare function renderAuthorize(currentAuthority: string): typeof Authorized;
42 |
43 | export default renderAuthorize;
44 |
--------------------------------------------------------------------------------
/src/components/Authorized/index.js:
--------------------------------------------------------------------------------
1 | import Authorized from './Authorized';
2 | import AuthorizedRoute from './AuthorizedRoute';
3 | import Secured from './Secured';
4 | import check from './CheckPermissions';
5 | import renderAuthorize from './renderAuthorize';
6 |
7 | Authorized.Secured = Secured;
8 | Authorized.AuthorizedRoute = AuthorizedRoute;
9 | Authorized.check = check;
10 |
11 | export default renderAuthorize(Authorized);
12 |
--------------------------------------------------------------------------------
/src/components/Authorized/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: Authorized
4 | zh-CN: Authorized
5 | subtitle: 权限
6 | cols: 1
7 | order: 15
8 | ---
9 |
10 | 权限组件，通过比对现有权限与准入权限，决定相关元素的展示。
11 |
12 | ## API
13 |
14 | ### RenderAuthorized
15 |
16 | `RenderAuthorized: (currentAuthority: string | () => string) => Authorized`
17 |
18 | 权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。
19 |
20 |
21 | ### Authorized
22 |
23 | 最基础的权限控制。
24 |
25 | | 参数 | 说明 | 类型 | 默认值 |
26 | |----------|------------------------------------------|-------------|-------|
27 | | children | 正常渲染的元素，权限判断通过时展示 | ReactNode | - |
28 | | authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
29 | | noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - |
30 |
31 | ### Authorized.AuthorizedRoute
32 |
33 | | 参数 | 说明 | 类型 | 默认值 |
34 | |----------|------------------------------------------|-------------|-------|
35 | | authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
36 | | redirectPath | 权限异常时重定向的页面路由 | string | - |
37 |
38 | 其余参数与 `Route` 相同。
39 |
40 | ### Authorized.Secured
41 |
42 | 注解方式，`@Authorized.Secured(authority, error)`
43 |
44 | | 参数 | 说明 | 类型 | 默认值 |
45 | |----------|------------------------------------------|-------------|-------|
46 | | authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
47 | | error | 权限异常时渲染元素 | ReactNode | |
48 |
49 | ### Authorized.check
50 |
51 | 函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)`
52 | 注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。
53 |
54 | | 参数 | 说明 | 类型 | 默认值 |
55 | |----------|------------------------------------------|-------------|-------|
56 | | authority | 准入权限/权限判断 | `string | Promise | (currentAuthority) => boolean | Promise` | - |
57 | | target | 权限判断通过时渲染的元素 | ReactNode | - |
58 | | Exception | 权限异常时渲染元素 | ReactNode | - |
59 |
--------------------------------------------------------------------------------
/src/components/Authorized/renderAuthorize.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-mutable-exports */
2 | let CURRENT = 'NULL';
3 | /**
4 | * use authority or getAuthority
5 | * @param {string|()=>String} currentAuthority
6 | */
7 | const renderAuthorize = Authorized => currentAuthority => {
8 | if (currentAuthority) {
9 | if (typeof currentAuthority === 'function') {
10 | CURRENT = currentAuthority();
11 | }
12 | if (
13 | Object.prototype.toString.call(currentAuthority) === '[object String]' ||
14 | Array.isArray(currentAuthority)
15 | ) {
16 | CURRENT = currentAuthority;
17 | }
18 | } else {
19 | CURRENT = 'NULL';
20 | }
21 | return Authorized;
22 | };
23 |
24 | export { CURRENT };
25 | export default Authorized => renderAuthorize(Authorized);
26 |
--------------------------------------------------------------------------------
/src/components/Charts/Bar/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IBarProps {
3 | title: React.ReactNode;
4 | color?: string;
5 | padding?: [number, number, number, number];
6 | height: number;
7 | data: Array<{
8 | x: string;
9 | y: number;
10 | }>;
11 | autoLabel?: boolean;
12 | style?: React.CSSProperties;
13 | }
14 |
15 | export default class Bar extends React.Component {}
16 |
--------------------------------------------------------------------------------
/src/components/Charts/ChartCard/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { CardProps } from 'antd/lib/card';
3 |
4 | export interface IChartCardProps extends CardProps {
5 | title: React.ReactNode;
6 | action?: React.ReactNode;
7 | total?: React.ReactNode | number | (() => React.ReactNode | number);
8 | footer?: React.ReactNode;
9 | contentHeight?: number;
10 | avatar?: React.ReactNode;
11 | style?: React.CSSProperties;
12 | }
13 |
14 | export default class ChartCard extends React.Component {}
15 |
--------------------------------------------------------------------------------
/src/components/Charts/ChartCard/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Card } from 'antd';
3 | import classNames from 'classnames';
4 |
5 | import styles from './index.less';
6 |
7 | const renderTotal = total => {
8 | let totalDom;
9 | switch (typeof total) {
10 | case 'undefined':
11 | totalDom = null;
12 | break;
13 | case 'function':
14 | totalDom = {total()}
;
15 | break;
16 | default:
17 | totalDom = {total}
;
18 | }
19 | return totalDom;
20 | };
21 |
22 | class ChartCard extends React.PureComponent {
23 | renderConnet = () => {
24 | const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
25 | if (loading) {
26 | return false;
27 | }
28 | return (
29 |
30 |
35 |
{avatar}
36 |
37 |
38 | {title}
39 | {action}
40 |
41 | {renderTotal(total)}
42 |
43 |
44 | {children && (
45 |
48 | )}
49 | {footer && (
50 |
55 | {footer}
56 |
57 | )}
58 |
7 | {label}
8 | {value}
9 |
10 | );
11 |
12 | export default Field;
13 |
--------------------------------------------------------------------------------
/src/components/Charts/Field/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .field {
4 | white-space: nowrap;
5 | overflow: hidden;
6 | text-overflow: ellipsis;
7 | margin: 0;
8 | span {
9 | font-size: @font-size-base;
10 | line-height: 22px;
11 | }
12 | span:last-child {
13 | margin-left: 8px;
14 | color: @heading-color;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Charts/Gauge/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IGaugeProps {
3 | title: React.ReactNode;
4 | color?: string;
5 | height: number;
6 | bgColor?: number;
7 | percent: number;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class Gauge extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniArea/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | // g2已经更新到3.0
4 | // 不带的写了
5 |
6 | export interface IAxis {
7 | title: any;
8 | line: any;
9 | gridAlign: any;
10 | labels: any;
11 | tickLine: any;
12 | grid: any;
13 | }
14 |
15 | export interface IMiniAreaProps {
16 | color?: string;
17 | height: number;
18 | borderColor?: string;
19 | line?: boolean;
20 | animate?: boolean;
21 | xAxis?: IAxis;
22 | yAxis?: IAxis;
23 | data: Array<{
24 | x: number | string;
25 | y: number;
26 | }>;
27 | }
28 |
29 | export default class MiniArea extends React.Component {}
30 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniBar/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IMiniBarProps {
3 | color?: string;
4 | height: number;
5 | data: Array<{
6 | x: number | string;
7 | y: number;
8 | }>;
9 | style?: React.CSSProperties;
10 | }
11 |
12 | export default class MiniBar extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniBar/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Chart, Tooltip, Geom } from 'bizcharts';
3 | import autoHeight from '../autoHeight';
4 | import styles from '../index.less';
5 |
6 | @autoHeight()
7 | class MiniBar extends React.Component {
8 | render() {
9 | const { height, forceFit = true, color = '#1890FF', data = [] } = this.props;
10 |
11 | const scale = {
12 | x: {
13 | type: 'cat',
14 | },
15 | y: {
16 | min: 0,
17 | },
18 | };
19 |
20 | const padding = [36, 5, 30, 5];
21 |
22 | const tooltip = [
23 | 'x*y',
24 | (x, y) => ({
25 | name: x,
26 | value: y,
27 | }),
28 | ];
29 |
30 | // for tooltip not to be hide
31 | const chartHeight = height + 54;
32 |
33 | return (
34 |
35 |
36 |
43 |
44 |
45 |
46 |
47 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
24 |
{h > 0 && }
58 | );
59 | }
60 | };
61 |
62 | export default autoHeight;
63 |
--------------------------------------------------------------------------------
/src/components/Charts/bizcharts.d.ts:
--------------------------------------------------------------------------------
1 | import * as BizChart from 'bizcharts';
2 |
3 | export = BizChart;
4 |
--------------------------------------------------------------------------------
/src/components/Charts/bizcharts.js:
--------------------------------------------------------------------------------
1 | import * as BizChart from 'bizcharts';
2 |
3 | export default BizChart;
4 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/bar.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 4
3 | title: 柱状图
4 | ---
5 |
6 | 通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。
7 |
8 | ````jsx
9 | import { Bar } from 'ant-design-pro/lib/Charts';
10 |
11 | const salesData = [];
12 | for (let i = 0; i < 12; i += 1) {
13 | salesData.push({
14 | x: `${i + 1}月`,
15 | y: Math.floor(Math.random() * 1000) + 200,
16 | });
17 | }
18 |
19 | ReactDOM.render(
20 |
25 | , mountNode);
26 | ````
27 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/chart-card.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title: 图表卡片
4 | ---
5 |
6 | 用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
7 |
8 | ```jsx
9 | import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
10 | import Trend from 'ant-design-pro/lib/Trend';
11 | import { Row, Col, Icon, Tooltip } from 'antd';
12 | import numeral from 'numeral';
13 |
14 | ReactDOM.render(
15 |
16 |
17 |
21 |
22 |
23 | }
24 | total={() => (
25 |
26 | )}
27 | footer={
28 |
29 | }
30 | contentHeight={46}
31 | >
32 |
33 | 周同比
34 |
35 | 12%
36 |
37 |
38 |
39 | 日环比
40 |
44 | 11%
45 |
46 |
47 |
48 |
49 |
50 |
58 | }
59 | action={
60 |
61 |
62 |
63 | }
64 | total={() => (
65 |
66 | )}
67 | footer={
68 |
69 | }
70 | />
71 |
72 |
73 |
81 | }
82 | action={
83 |
84 |
85 |
86 | }
87 | total={() => (
88 |
89 | )}
90 | />
91 |
92 |
,
93 | mountNode,
94 | );
95 | ```
96 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/gauge.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 7
3 | title: 仪表盘
4 | ---
5 |
6 | 仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。
7 |
8 | ````jsx
9 | import { Gauge } from 'ant-design-pro/lib/Charts';
10 |
11 | ReactDOM.render(
12 |
17 | , mountNode);
18 | ````
19 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/mini-area.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | col: 2
4 | title: 迷你区域图
5 | ---
6 |
7 | ````jsx
8 | import { MiniArea } from 'ant-design-pro/lib/Charts';
9 | import moment from 'moment';
10 |
11 | const visitData = [];
12 | const beginDay = new Date().getTime();
13 | for (let i = 0; i < 20; i += 1) {
14 | visitData.push({
15 | x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
16 | y: Math.floor(Math.random() * 100) + 10,
17 | });
18 | }
19 |
20 | ReactDOM.render(
21 |
27 | , mountNode);
28 | ````
29 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/mini-bar.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | col: 2
4 | title: 迷你柱状图
5 | ---
6 |
7 | 迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。
8 |
9 | ````jsx
10 | import { MiniBar } from 'ant-design-pro/lib/Charts';
11 | import moment from 'moment';
12 |
13 | const visitData = [];
14 | const beginDay = new Date().getTime();
15 | for (let i = 0; i < 20; i += 1) {
16 | visitData.push({
17 | x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
18 | y: Math.floor(Math.random() * 100) + 10,
19 | });
20 | }
21 |
22 | ReactDOM.render(
23 |
27 | , mountNode);
28 | ````
29 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/mini-pie.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 6
3 | title: 迷你饼状图
4 | ---
5 |
6 | 通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展
7 | 现更多业务场景。
8 |
9 | ```jsx
10 | import { Pie } from 'ant-design-pro/lib/Charts';
11 |
12 | ReactDOM.render(
13 | ,
14 | mountNode
15 | );
16 | ```
17 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/mini-progress.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 3
3 | title: 迷你进度条
4 | ---
5 |
6 | ````jsx
7 | import { MiniProgress } from 'ant-design-pro/lib/Charts';
8 |
9 | ReactDOM.render(
10 |
11 | , mountNode);
12 | ````
13 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/mix.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 图表套件组合展示
4 | ---
5 |
6 | 利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
7 |
8 | ````jsx
9 | import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
10 | import Trend from 'ant-design-pro/lib/Trend';
11 | import NumberInfo from 'ant-design-pro/lib/NumberInfo';
12 | import { Row, Col, Icon, Tooltip } from 'antd';
13 | import numeral from 'numeral';
14 | import moment from 'moment';
15 |
16 | const visitData = [];
17 | const beginDay = new Date().getTime();
18 | for (let i = 0; i < 20; i += 1) {
19 | visitData.push({
20 | x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
21 | y: Math.floor(Math.random() * 100) + 10,
22 | });
23 | }
24 |
25 | ReactDOM.render(
26 |
27 |
28 |
33 | 本周访问}
35 | total={numeral(12321).format('0,0')}
36 | status="up"
37 | subTotal={17.1}
38 | />
39 |
44 |
45 |
46 |
47 | }
50 | total={numeral(8846).format('0,0')}
51 | footer={}
52 | contentHeight={46}
53 | >
54 |
58 |
59 |
60 |
61 | }
64 | total="78%"
65 | footer={
66 |
67 |
68 | 周同比
69 | 12%
70 |
71 |
72 | 日环比
73 | 11%
74 |
75 |
76 | }
77 | contentHeight={46}
78 | >
79 |
80 |
81 |
82 |
83 | , mountNode);
84 | ````
85 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/pie.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 5
3 | title: 饼状图
4 | ---
5 |
6 | ```jsx
7 | import { Pie, yuan } from 'ant-design-pro/lib/Charts';
8 |
9 | const salesPieData = [
10 | {
11 | x: '家用电器',
12 | y: 4544,
13 | },
14 | {
15 | x: '食用酒水',
16 | y: 3321,
17 | },
18 | {
19 | x: '个护健康',
20 | y: 3113,
21 | },
22 | {
23 | x: '服饰箱包',
24 | y: 2341,
25 | },
26 | {
27 | x: '母婴产品',
28 | y: 1231,
29 | },
30 | {
31 | x: '其他',
32 | y: 1231,
33 | },
34 | ];
35 |
36 | ReactDOM.render(
37 | (
42 | now.y + pre, 0))
45 | }}
46 | />
47 | )}
48 | data={salesPieData}
49 | valueFormat={val => }
50 | height={294}
51 | />,
52 | mountNode,
53 | );
54 | ```
55 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/radar.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 7
3 | title: 雷达图
4 | ---
5 |
6 | ````jsx
7 | import { Radar, ChartCard } from 'ant-design-pro/lib/Charts';
8 |
9 | const radarOriginData = [
10 | {
11 | name: '个人',
12 | ref: 10,
13 | koubei: 8,
14 | output: 4,
15 | contribute: 5,
16 | hot: 7,
17 | },
18 | {
19 | name: '团队',
20 | ref: 3,
21 | koubei: 9,
22 | output: 6,
23 | contribute: 3,
24 | hot: 1,
25 | },
26 | {
27 | name: '部门',
28 | ref: 4,
29 | koubei: 1,
30 | output: 6,
31 | contribute: 5,
32 | hot: 7,
33 | },
34 | ];
35 | const radarData = [];
36 | const radarTitleMap = {
37 | ref: '引用',
38 | koubei: '口碑',
39 | output: '产量',
40 | contribute: '贡献',
41 | hot: '热度',
42 | };
43 | radarOriginData.forEach((item) => {
44 | Object.keys(item).forEach((key) => {
45 | if (key !== 'name') {
46 | radarData.push({
47 | name: item.name,
48 | label: radarTitleMap[key],
49 | value: item[key],
50 | });
51 | }
52 | });
53 | });
54 |
55 | ReactDOM.render(
56 |
57 |
62 |
63 | , mountNode);
64 | ````
65 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/tag-cloud.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 9
3 | title: 标签云
4 | ---
5 |
6 | 标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。
7 |
8 | ````jsx
9 | import { TagCloud } from 'ant-design-pro/lib/Charts';
10 |
11 | const tags = [];
12 | for (let i = 0; i < 50; i += 1) {
13 | tags.push({
14 | name: `TagClout-Title-${i}`,
15 | value: Math.floor((Math.random() * 50)) + 20,
16 | });
17 | }
18 |
19 | ReactDOM.render(
20 |
24 | , mountNode);
25 | ````
26 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/timeline-chart.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 9
3 | title: 带有时间轴的图表
4 | ---
5 |
6 | 使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。
7 |
8 | ````jsx
9 | import { TimelineChart } from 'ant-design-pro/lib/Charts';
10 |
11 | const chartData = [];
12 | for (let i = 0; i < 20; i += 1) {
13 | chartData.push({
14 | x: (new Date().getTime()) + (1000 * 60 * 30 * i),
15 | y1: Math.floor(Math.random() * 100) + 1000,
16 | y2: Math.floor(Math.random() * 100) + 10,
17 | });
18 | }
19 |
20 | ReactDOM.render(
21 |
26 | , mountNode);
27 | ````
28 |
--------------------------------------------------------------------------------
/src/components/Charts/demo/waterwave.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 8
3 | title: 水波图
4 | ---
5 |
6 | 水波图是一种比例的展示方式，可以更直观的展示关键值的占比。
7 |
8 | ````jsx
9 | import { WaterWave } from 'ant-design-pro/lib/Charts';
10 |
11 | ReactDOM.render(
12 |
13 |
18 |
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/Charts/g2.js:
--------------------------------------------------------------------------------
1 | // 全局 G2 设置
2 | import { track, setTheme } from 'bizcharts';
3 |
4 | track(false);
5 |
6 | const config = {
7 | defaultColor: '#1089ff',
8 | shape: {
9 | interval: {
10 | fillOpacity: 1,
11 | },
12 | },
13 | };
14 |
15 | setTheme(config);
16 |
--------------------------------------------------------------------------------
/src/components/Charts/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as numeral from 'numeral';
2 | export { default as ChartCard } from './ChartCard';
3 | export { default as Bar } from './Bar';
4 | export { default as Pie } from './Pie';
5 | export { default as Radar } from './Radar';
6 | export { default as Gauge } from './Gauge';
7 | export { default as MiniArea } from './MiniArea';
8 | export { default as MiniBar } from './MiniBar';
9 | export { default as MiniProgress } from './MiniProgress';
10 | export { default as Field } from './Field';
11 | export { default as WaterWave } from './WaterWave';
12 | export { default as TagCloud } from './TagCloud';
13 | export { default as TimelineChart } from './TimelineChart';
14 |
15 | declare const yuan: (value: number | string) => string;
16 |
17 | export { yuan };
18 |
--------------------------------------------------------------------------------
/src/components/Charts/index.js:
--------------------------------------------------------------------------------
1 | import numeral from 'numeral';
2 | import './g2';
3 | import ChartCard from './ChartCard';
4 | import Bar from './Bar';
5 | import Pie from './Pie';
6 | import Radar from './Radar';
7 | import Gauge from './Gauge';
8 | import MiniArea from './MiniArea';
9 | import MiniBar from './MiniBar';
10 | import MiniProgress from './MiniProgress';
11 | import Field from './Field';
12 | import WaterWave from './WaterWave';
13 | import TagCloud from './TagCloud';
14 | import TimelineChart from './TimelineChart';
15 |
16 | const yuan = val => `¥ ${numeral(val).format('0,0')}`;
17 |
18 | const Charts = {
19 | yuan,
20 | Bar,
21 | Pie,
22 | Gauge,
23 | Radar,
24 | MiniBar,
25 | MiniArea,
26 | MiniProgress,
27 | ChartCard,
28 | Field,
29 | WaterWave,
30 | TagCloud,
31 | TimelineChart,
32 | };
33 |
34 | export {
35 | Charts as default,
36 | yuan,
37 | Bar,
38 | Pie,
39 | Gauge,
40 | Radar,
41 | MiniBar,
42 | MiniArea,
43 | MiniProgress,
44 | ChartCard,
45 | Field,
46 | WaterWave,
47 | TagCloud,
48 | TimelineChart,
49 | };
50 |
--------------------------------------------------------------------------------
/src/components/Charts/index.less:
--------------------------------------------------------------------------------
1 | .miniChart {
2 | position: relative;
3 | width: 100%;
4 | .chartContent {
5 | position: absolute;
6 | bottom: -28px;
7 | width: 100%;
8 | > div {
9 | margin: 0 -5px;
10 | overflow: hidden;
11 | }
12 | }
13 | .chartLoading {
14 | position: absolute;
15 | top: 16px;
16 | left: 50%;
17 | margin-left: -7px;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/Exception/demo/403.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title:
4 | zh-CN: 403
5 | en-US: 403
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 403 页面，配合自定义操作。
11 |
12 | ## en-US
13 |
14 | 403 page with custom operations.
15 |
16 | ````jsx
17 | import Exception from 'ant-design-pro/lib/Exception';
18 | import { Button } from 'antd';
19 |
20 | const actions = (
21 |
22 |
23 |
24 |
25 | );
26 | ReactDOM.render(
27 |
28 | , mountNode);
29 | ````
30 |
--------------------------------------------------------------------------------
/src/components/Exception/demo/404.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 404
5 | en-US: 404
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 404 页面。
11 |
12 | ## en-US
13 |
14 | 404 page.
15 |
16 | ````jsx
17 | import Exception from 'ant-design-pro/lib/Exception';
18 |
19 | ReactDOM.render(
20 |
21 | , mountNode);
22 | ````
23 |
--------------------------------------------------------------------------------
/src/components/Exception/demo/500.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 500
5 | en-US: 500
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 500 页面。
11 |
12 | ## en-US
13 |
14 | 500 page.
15 |
16 | ````jsx
17 | import Exception from 'ant-design-pro/lib/Exception';
18 |
19 | ReactDOM.render(
20 |
21 | , mountNode);
22 | ````
23 |
--------------------------------------------------------------------------------
/src/components/Exception/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IExceptionProps {
3 | type?: '403' | '404' | '500';
4 | title?: React.ReactNode;
5 | desc?: React.ReactNode;
6 | img?: string;
7 | actions?: React.ReactNode;
8 | linkElement?: React.ReactNode;
9 | style?: React.CSSProperties;
10 | className?: string;
11 | backText?: React.ReactNode;
12 | redirect?: string;
13 | }
14 |
15 | export default class Exception extends React.Component {}
16 |
--------------------------------------------------------------------------------
/src/components/Exception/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Exception
3 | cols: 1
4 | order: 5
5 | ---
6 |
7 | Exceptions page is used to provide feedback on specific abnormal state. Usually, it contains an explanation of the error status, and provides users with suggestions or operations, to prevent users from feeling lost and confused.
8 |
9 | ## API
10 |
11 | Property | Description | Type | Default
12 | ---------|-------------|------|--------
13 | | backText | default return button text | ReactNode | back to home |
14 | type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | -
15 | title | title | ReactNode | -
16 | desc | supplementary description | ReactNode | -
17 | img | the url of background image | string | -
18 | actions | suggested operations, a default 'Home' link will show if not set | ReactNode | -
19 | linkElement | to specify the element of link | string\|ReactElement | 'a'
20 | redirect | redirect path | string | '/'
--------------------------------------------------------------------------------
/src/components/Exception/index.js:
--------------------------------------------------------------------------------
1 | import React, { createElement } from 'react';
2 | import classNames from 'classnames';
3 | import { Button } from 'antd';
4 | import config from './typeConfig';
5 | import styles from './index.less';
6 |
7 | class Exception extends React.PureComponent {
8 | static defaultProps = {
9 | backText: 'back to home',
10 | redirect: '/',
11 | };
12 |
13 | constructor(props) {
14 | super(props);
15 | this.state = {};
16 | }
17 |
18 | render() {
19 | const {
20 | className,
21 | backText,
22 | linkElement = 'a',
23 | type,
24 | title,
25 | desc,
26 | img,
27 | actions,
28 | redirect,
29 | ...rest
30 | } = this.props;
31 | const pageType = type in config ? type : '404';
32 | const clsString = classNames(styles.exception, className);
33 | return (
34 |
35 |
41 |
42 |
{title || config[pageType].title}
43 |
{desc || config[pageType].desc}
44 |
45 | {actions ||
46 | createElement(
47 | linkElement,
48 | {
49 | to: redirect,
50 | href: redirect,
51 | },
52 |
53 | )}
54 |
55 |
56 |
23 |
Content Content Content Content
24 |
Content Content Content Content
25 |
Content Content Content Content
26 |
Content Content Content Content
27 |
Content Content Content Content
28 |
Content Content Content Content
29 |
Content Content Content Content
30 |
Content Content Content Content
31 |
Content Content Content Content
32 |
Content Content Content Content
33 |
Content Content Content Content
34 |
Content Content Content Content
35 |
Content Content Content Content
36 |
Content Content Content Content
37 |
Content Content Content Content
38 |
39 |
40 |
41 |
42 |
42 |
{extra}
43 |
{children}
44 |
Copyright 2017 蚂蚁金服体验技术部出品
;
30 |
31 | ReactDOM.render(
32 |
36 | , mountNode);
37 | ````
38 |
--------------------------------------------------------------------------------
/src/components/GlobalFooter/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IGlobalFooterProps {
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 | }
12 |
13 | export default class GlobalFooter extends React.Component {}
14 |
--------------------------------------------------------------------------------
/src/components/GlobalFooter/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import styles from './index.less';
4 |
5 | const GlobalFooter = ({ className, links, copyright }) => {
6 | const clsString = classNames(styles.globalFooter, className);
7 | return (
8 |
9 | {links && (
10 |
22 | )}
23 | {copyright &&
{copyright}
}
24 |
29 | {isMobile && (
30 |
31 |
32 |
33 | )}
34 |
39 |
40 |
41 |
19 | {emptyImage ?
: null}
20 |
{emptyText || locale.emptyText}
21 |
26 |
27 | {data.map((item, i) => {
28 | const itemCls = classNames(styles.item, {
29 | [styles.read]: item.read,
30 | });
31 | // eslint-disable-next-line no-nested-ternary
32 | const leftIcon = item.avatar ? (
33 | typeof item.avatar === 'string' ? (
34 |
35 | ) : (
36 | item.avatar
37 | )
38 | ) : null;
39 |
40 | return (
41 | onClick(item)}>
42 | {leftIcon}}
45 | title={
46 |
47 | {item.title}
48 |
{item.extra}
49 |
53 |
54 | {item.description}
55 |
56 |
{item.datetime}
57 |
64 | {showClear ? (
65 |
66 | {locale.clear} {title}
67 |
68 | ) : null}
69 |
13 |
段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
14 |
25 |
30 |
31 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | );
45 |
46 | const extra = (
47 |
48 |
49 | 状态
50 | 待审批
51 |
52 |
53 | 订单金额
54 | ¥ 568.08
55 |
56 |
57 | );
58 |
59 | const breadcrumbList = [{
60 | title: '一级菜单',
61 | href: '/',
62 | }, {
63 | title: '二级菜单',
64 | href: '/',
65 | }, {
66 | title: '三级菜单',
67 | }];
68 |
69 | const tabList = [{
70 | key: 'detail',
71 | tab: '详情',
72 | }, {
73 | key: 'rule',
74 | tab: '规则',
75 | }];
76 |
77 | function onTabChange(key) {
78 | console.log(key);
79 | }
80 |
81 | ReactDOM.render(
82 |
83 |
}
86 | action={action}
87 | content={description}
88 | extraContent={extra}
89 | breadcrumbList={breadcrumbList}
90 | tabList={tabList}
91 | tabActiveKey="detail"
92 | onTabChange={onTabChange}
93 | />
94 |
logo
}
32 | action={action
}
33 | content={content
}
34 | extraContent={extraContent
}
35 | breadcrumbList={breadcrumbList}
36 | tabList={tabList}
37 | tabActiveKey="1"
38 | />
39 |
40 | , mountNode);
41 | ````
42 |
43 |
69 |
--------------------------------------------------------------------------------
/src/components/PageHeader/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IPageHeaderProps {
3 | title?: React.ReactNode | string;
4 | logo?: React.ReactNode | string;
5 | action?: React.ReactNode | string;
6 | content?: React.ReactNode;
7 | extraContent?: React.ReactNode;
8 | routes?: any[];
9 | params?: any;
10 | breadcrumbList?: Array<{ title: React.ReactNode; href?: string }>;
11 | tabList?: Array<{ key: string; tab: React.ReactNode }>;
12 | tabActiveKey?: string;
13 | tabDefaultActiveKey?: string;
14 | onTabChange?: (key: string) => void;
15 | tabBarExtraContent?: React.ReactNode;
16 | linkElement?: React.ReactNode;
17 | style?: React.CSSProperties;
18 | home?: React.ReactNode;
19 | wide?: boolean;
20 | hiddenBreadcrumb?:boolean;
21 | }
22 |
23 | export default class PageHeader extends React.Component {}
24 |
--------------------------------------------------------------------------------
/src/components/PageHeader/index.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Tabs, Skeleton } from 'antd';
3 | import classNames from 'classnames';
4 | import styles from './index.less';
5 | import BreadcrumbView from './breadcrumb';
6 |
7 | const { TabPane } = Tabs;
8 | export default class PageHeader extends PureComponent {
9 | onChange = key => {
10 | const { onTabChange } = this.props;
11 | if (onTabChange) {
12 | onTabChange(key);
13 | }
14 | };
15 |
16 | render() {
17 | const {
18 | title,
19 | logo,
20 | action,
21 | content,
22 | extraContent,
23 | tabList,
24 | className,
25 | tabActiveKey,
26 | tabDefaultActiveKey,
27 | tabBarExtraContent,
28 | loading = false,
29 | wide = false,
30 | hiddenBreadcrumb = false,
31 | } = this.props;
32 |
33 | const clsString = classNames(styles.pageHeader, className);
34 | const activeKeyProps = {};
35 | if (tabDefaultActiveKey !== undefined) {
36 | activeKeyProps.defaultActiveKey = tabDefaultActiveKey;
37 | }
38 | if (tabActiveKey !== undefined) {
39 | activeKeyProps.activeKey = tabActiveKey;
40 | }
41 | return (
42 |
43 |
44 |
51 | {hiddenBreadcrumb ? null : }
52 |
53 | {logo &&
{logo}
}
54 |
55 |
56 | {title &&
{title}
}
57 | {action &&
{action}
}
58 |
59 |
60 | {content &&
{content}
}
61 | {extraContent &&
{extraContent}
}
62 |
63 |
64 |
78 |
79 |
{children}
;
13 | }
14 | }
15 |
16 | export default connect(({ setting }) => ({
17 | contentWidth: setting.contentWidth,
18 | }))(GridContent);
19 |
--------------------------------------------------------------------------------
/src/components/PageHeaderWrapper/GridContent.less:
--------------------------------------------------------------------------------
1 | .main {
2 | width: 100%;
3 | height: 100%;
4 | min-height: 100%;
5 | transition: 0.3s;
6 | &.wide {
7 | max-width: 1200px;
8 | margin: 0 auto;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/PageHeaderWrapper/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FormattedMessage } from 'umi/locale';
3 | import Link from 'umi/link';
4 | import PageHeader from '@/components/PageHeader';
5 | import { connect } from 'dva';
6 | import GridContent from './GridContent';
7 | import styles from './index.less';
8 | import MenuContext from '@/layouts/MenuContext';
9 |
10 | const PageHeaderWrapper = ({ children, contentWidth, wrapperClassName, top, ...restProps }) => (
11 |
12 | {top}
13 |
14 | {value => (
15 | }
18 | {...value}
19 | key="pageheader"
20 | {...restProps}
21 | linkElement={Link}
22 | itemRender={item => {
23 | if (item.locale) {
24 | return ;
25 | }
26 | return item.name;
27 | }}
28 | />
29 | )}
30 |
31 | {children ? (
32 |
33 | {children}
34 |
35 | ) : null}
36 |
8 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/components/Result/demo/classic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title: Classic
4 | ---
5 |
6 | 典型结果页面。
7 |
8 | ````jsx
9 | import Result from 'ant-design-pro/lib/Result';
10 | import { Button, Row, Col, Icon, Steps } from 'antd';
11 |
12 | const { Step } = Steps;
13 |
14 | const desc1 = (
15 |
16 |
17 | 曲丽丽
18 |
19 |
20 |
2016-12-12 12:32
21 |
26 |
27 | 周毛毛
28 |
29 |
30 |
31 |
36 |
37 | 项目名称
38 |
39 |
40 |
41 | 项目 ID：
42 | 23421
43 |
44 |
45 | 负责人：
46 | 曲丽丽
47 |
48 |
49 | 生效时间：
50 | 2016-12-12 ~ 2017-12-12
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
64 |
65 |
66 |
67 |
68 | );
69 |
70 | ReactDOM.render(
71 |
79 | , mountNode);
80 | ````
81 |
--------------------------------------------------------------------------------
/src/components/Result/demo/error.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title: Failed
4 | ---
5 |
6 | 提交失败。
7 |
8 | ````jsx
9 | import Result from 'ant-design-pro/lib/Result';
10 | import { Button, Icon } from 'antd';
11 |
12 | const extra = (
13 |
14 |
15 | 您提交的内容有如下错误：
16 |
17 |
18 |
您的账户已被冻结
19 |
立即解冻
20 |
21 |
22 |
您的账户还不具备申请资格
23 |
立即升级
24 |
25 |
结果描述
}
16 | extra="其他补充信息，自带灰底效果"
17 | actions={操作建议，一般放置按钮组
}
18 | />
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/Result/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IResultProps {
3 | type: 'success' | 'error';
4 | title: React.ReactNode;
5 | description?: React.ReactNode;
6 | extra?: React.ReactNode;
7 | actions?: React.ReactNode;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class Result extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/Result/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { Icon } from 'antd';
4 | import styles from './index.less';
5 |
6 | export default function Result({
7 | className,
8 | type,
9 | title,
10 | description,
11 | extra,
12 | actions,
13 | ...restProps
14 | }) {
15 | const iconMap = {
16 | error: ,
17 | success: ,
18 | };
19 | const clsString = classNames(styles.result, className);
20 | return (
21 |
22 |
{iconMap[type]}
23 |
{title}
24 | {description &&
{description}
}
25 | {extra &&
{extra}
}
26 | {actions &&
{actions}
}
27 |
7 | {list.map(item => (
8 |
9 | onChange(item.key)}>
10 |
11 |
17 |
18 |
19 |
21 | ))}
22 |
13 | {check ? : ''}
14 |
15 | );
16 |
17 | const ThemeColor = ({ colors, title, value, onChange }) => {
18 | let colorList = colors;
19 | if (!colors) {
20 | colorList = [
21 | {
22 | key: 'dust',
23 | color: '#F5222D',
24 | },
25 | {
26 | key: 'volcano',
27 | color: '#FA541C',
28 | },
29 | {
30 | key: 'sunset',
31 | color: '#FAAD14',
32 | },
33 | {
34 | key: 'cyan',
35 | color: '#13C2C2',
36 | },
37 | {
38 | key: 'green',
39 | color: '#52C41A',
40 | },
41 | {
42 | key: 'daybreak',
43 | color: '#1890FF',
44 | },
45 | {
46 | key: 'geekblue',
47 | color: '#2F54EB',
48 | },
49 | {
50 | key: 'purple',
51 | color: '#722ED1',
52 | },
53 | ];
54 | }
55 | return (
56 |
57 |
{title}
58 |
59 | {colorList.map(({ key, color }) => (
60 |
61 | onChange && onChange(color)}
66 | />
67 |
68 | ))}
69 |
70 |
27 |
{
29 | this.maim = ref;
30 | }}
31 | className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
32 | >
33 |
34 |
35 |
36 |
37 |
Ant Design Pro
38 |
39 |
40 |
45 |
46 |
47 |
48 |
49 |
50 |
Ant Design Pro
');
11 | await page.close();
12 | browser.close();
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/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/user/login', { waitUntil: 'networkidle2' });
14 | await page.evaluate(() => window.localStorage.setItem('antd-pro-authority', 'guest'));
15 | });
16 |
17 | afterEach(() => page.close());
18 |
19 | it('should login with failure', async () => {
20 | await page.waitForSelector('#userName', {
21 | timeout: 2000,
22 | });
23 | await page.type('#userName', 'mockuser');
24 | await page.type('#password', 'wrong_password');
25 | await page.click('button[type="submit"]');
26 | await page.waitForSelector('.ant-alert-error'); // should display error
27 | });
28 |
29 | it('should login successfully', async () => {
30 | await page.waitForSelector('#userName', {
31 | timeout: 2000,
32 | });
33 | await page.type('#userName', 'admin');
34 | await page.type('#password', '888888');
35 | await page.click('button[type="submit"]');
36 | await page.waitForSelector('.ant-layout-sider h1'); // should display error
37 | const text = await page.evaluate(() => document.body.innerHTML);
38 | expect(text).toContain('Ant Design Pro
');
39 | });
40 |
41 | afterAll(() => browser.close());
42 | });
43 |
--------------------------------------------------------------------------------
/src/global.less:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #root {
4 | height: 100%;
5 | }
6 |
7 | .colorWeak {
8 | filter: invert(80%);
9 | }
10 |
11 | .ant-layout {
12 | min-height: 100vh;
13 | }
14 |
15 | canvas {
16 | display: block;
17 | }
18 |
19 | body {
20 | text-rendering: optimizeLegibility;
21 | -webkit-font-smoothing: antialiased;
22 | -moz-osx-font-smoothing: grayscale;
23 | }
24 |
25 | .globalSpin {
26 | width: 100%;
27 | margin: 40px 0 !important;
28 | }
29 |
30 | ul,
31 | ol {
32 | list-style: none;
33 | }
34 | .ant-modal-title {
35 | margin: 0;
36 | font-size: 16px;
37 | line-height: 22px;
38 | font-weight: 500;
39 | text-align: center;
40 | color: rgba(0, 0, 0, 0.85);
41 | }
42 |
--------------------------------------------------------------------------------
/src/layouts/BlankLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default props => ;
4 |
--------------------------------------------------------------------------------
/src/layouts/Footer.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import { Layout, Icon } from 'antd';
3 | import GlobalFooter from '@/components/GlobalFooter';
4 |
5 | const { Footer } = Layout;
6 | const FooterView = () => (
7 |
36 | );
37 | export default FooterView;
38 |
--------------------------------------------------------------------------------
/src/layouts/Header.less:
--------------------------------------------------------------------------------
1 | .fixedHeader {
2 | position: fixed;
3 | top: 0;
4 | right: 0;
5 | width: 100%;
6 | z-index: 9;
7 | transition: width 0.2s;
8 | }
9 |
--------------------------------------------------------------------------------
/src/layouts/MenuContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export default createContext();
4 |
--------------------------------------------------------------------------------
/src/layouts/UserLayout.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import { formatMessage } from 'umi/locale';
3 | import Link from 'umi/link';
4 | import { Icon } from 'antd';
5 | import GlobalFooter from '@/components/GlobalFooter';
6 | import SelectLang from '@/components/SelectLang';
7 | import styles from './UserLayout.less';
8 | import logo from '../assets/logo.svg';
9 |
10 | const links = [
11 | {
12 | key: 'help',
13 | title: formatMessage({ id: 'layout.user.link.help' }),
14 | href: '',
15 | },
16 | {
17 | key: 'privacy',
18 | title: formatMessage({ id: 'layout.user.link.privacy' }),
19 | href: '',
20 | },
21 | {
22 | key: 'terms',
23 | title: formatMessage({ id: 'layout.user.link.terms' }),
24 | href: '',
25 | },
26 | ];
27 |
28 | const copyright = (
29 |
30 | Copyright 2018 蚂蚁金服体验技术部出品
31 |
32 | );
33 |
34 | class UserLayout extends React.PureComponent {
35 | // @TODO title
36 | // getPageTitle() {
37 | // const { routerData, location } = this.props;
38 | // const { pathname } = location;
39 | // let title = 'Ant Design Pro';
40 | // if (routerData[pathname] && routerData[pathname].name) {
41 | // title = `${routerData[pathname].name} - Ant Design Pro`;
42 | // }
43 | // return title;
44 | // }
45 |
46 | render() {
47 | const { children } = this.props;
48 | return (
49 | // @TODO
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
Ant Design
60 |
61 |
62 |
Ant Design 是西湖区最具影响力的 Web 设计规范
63 |
64 | {children}
65 |
66 |
67 |
19 |
26 |
35 |
44 |
45 |
46 | );
47 | }
48 | }
49 |
50 | export default LinkComponent;
51 |
--------------------------------------------------------------------------------
/src/pages/Dashboard/Workplace.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '~@/utils/utils.less';
3 |
4 |
5 | .pageHeaderContent {
6 | display: flex;
7 | .avatar {
8 | flex: 0 1 72px;
9 | margin-bottom: 8px;
10 | & > span {
11 | border-radius: 72px;
12 | display: block;
13 | width: 72px;
14 | height: 72px;
15 | }
16 | }
17 | .content {
18 | position: relative;
19 | top: 4px;
20 | margin-left: 24px;
21 | flex: 1 1 auto;
22 | color: @text-color-secondary;
23 | line-height: 22px;
24 | .contentTitle {
25 | font-size: 20px;
26 | line-height: 28px;
27 | font-weight: 500;
28 | color: @heading-color;
29 | margin-bottom: 12px;
30 | }
31 | }
32 | }
33 |
34 | .extraContent {
35 | .clearfix();
36 | float: right;
37 | white-space: nowrap;
38 | .statItem {
39 | padding: 0 32px;
40 | position: relative;
41 | display: inline-block;
42 | > p:first-child {
43 | color: @text-color-secondary;
44 | font-size: @font-size-base;
45 | line-height: 22px;
46 | margin-bottom: 4px;
47 | }
48 | > p {
49 | color: @heading-color;
50 | font-size: 30px;
51 | line-height: 38px;
52 | margin: 0;
53 | > span {
54 | color: @text-color-secondary;
55 | font-size: 20px;
56 | }
57 | }
58 | &:after {
59 | background-color: @border-color-split;
60 | position: absolute;
61 | top: 8px;
62 | right: 0;
63 | width: 1px;
64 | height: 40px;
65 | content: '';
66 | }
67 | &:last-child {
68 | padding-right: 0;
69 | &:after {
70 | display: none;
71 | }
72 | }
73 | }
74 | }
75 |
76 |
77 | .datetime {
78 | color: @disabled-color;
79 | }
80 |
81 | @media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
82 | .activeCard {
83 | margin-bottom: 24px;
84 | }
85 | .extraContent {
86 | margin-left: -44px;
87 | .statItem {
88 | padding: 0 16px;
89 | }
90 | }
91 | }
92 |
93 | @media screen and (max-width: @screen-lg) {
94 | .activeCard {
95 | margin-bottom: 24px;
96 | }
97 | .extraContent {
98 | float: none;
99 | margin-right: 0;
100 | .statItem {
101 | padding: 0 16px;
102 | text-align: left;
103 | &:after {
104 | display: none;
105 | }
106 | }
107 | }
108 | }
109 |
110 | @media screen and (max-width: @screen-md) {
111 | .extraContent {
112 | margin-left: -16px;
113 | }
114 | }
115 |
116 | @media screen and (max-width: @screen-sm) {
117 | .pageHeaderContent {
118 | display: block;
119 | .content {
120 | margin-left: 0;
121 | }
122 | }
123 | .extraContent {
124 | .statItem {
125 | float: none;
126 | }
127 | }
128 | }
--------------------------------------------------------------------------------
/src/pages/Dashboard/models/activities.js:
--------------------------------------------------------------------------------
1 | import { queryActivities } from '@/services/api';
2 |
3 | export default {
4 | namespace: 'activities',
5 |
6 | state: {
7 | list: [],
8 | },
9 |
10 | effects: {
11 | *fetchList(_, { call, put }) {
12 | const response = yield call(queryActivities);
13 | yield put({
14 | type: 'saveList',
15 | payload: Array.isArray(response) ? response : [],
16 | });
17 | },
18 | },
19 |
20 | reducers: {
21 | saveList(state, action) {
22 | return {
23 | ...state,
24 | list: action.payload,
25 | };
26 | },
27 | },
28 | };
29 |
--------------------------------------------------------------------------------
/src/pages/Exception/403.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { formatMessage } from 'umi/locale';
3 | import Link from 'umi/link';
4 | import Exception from '@/components/Exception';
5 |
6 | const Exception403 = () => (
7 |
13 | );
14 |
15 | export default Exception403;
16 |
--------------------------------------------------------------------------------
/src/pages/Exception/404.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { formatMessage } from 'umi/locale';
3 | import Link from 'umi/link';
4 | import Exception from '@/components/Exception';
5 |
6 | const Exception404 = () => (
7 |
13 | );
14 |
15 | export default Exception404;
16 |
--------------------------------------------------------------------------------
/src/pages/Exception/500.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { formatMessage } from 'umi/locale';
3 | import Link from 'umi/link';
4 | import Exception from '@/components/Exception';
5 |
6 | const Exception500 = () => (
7 |
13 | );
14 |
15 | export default Exception500;
16 |
--------------------------------------------------------------------------------
/src/pages/Exception/TriggerException.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Button, Spin, Card } from 'antd';
3 | import { connect } from 'dva';
4 | import styles from './style.less';
5 |
6 | @connect(state => ({
7 | isloading: state.error.isloading,
8 | }))
9 | class TriggerException extends PureComponent {
10 | state = {
11 | isloading: false,
12 | };
13 |
14 | triggerError = code => {
15 | this.setState({
16 | isloading: true,
17 | });
18 | const { dispatch } = this.props;
19 | dispatch({
20 | type: 'error/query',
21 | payload: {
22 | code,
23 | },
24 | });
25 | };
26 |
27 | render() {
28 | const { isloading } = this.state;
29 | return (
30 |
31 |
32 |
35 |
38 |
41 |
44 |
45 |
46 | );
47 | }
48 | }
49 |
50 | export default TriggerException;
51 |
--------------------------------------------------------------------------------
/src/pages/Exception/models/error.js:
--------------------------------------------------------------------------------
1 | import queryError from '@/services/error';
2 |
3 | export default {
4 | namespace: 'error',
5 |
6 | state: {
7 | error: '',
8 | isloading: false,
9 | },
10 |
11 | effects: {
12 | *query({ payload }, { call, put }) {
13 | yield call(queryError, payload.code);
14 | yield put({
15 | type: 'trigger',
16 | payload: payload.code,
17 | });
18 | },
19 | },
20 |
21 | reducers: {
22 | trigger(state, action) {
23 | return {
24 | error: action.payload,
25 | };
26 | },
27 | },
28 | };
29 |
--------------------------------------------------------------------------------
/src/pages/Exception/style.less:
--------------------------------------------------------------------------------
1 | .trigger {
2 | background: 'red';
3 | :global(.ant-btn) {
4 | margin-right: 8px;
5 | margin-bottom: 12px;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/pages/Link/LinkComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input, Modal } from 'antd';
3 |
4 | class LinkComponent extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {};
8 | }
9 |
10 | componentDidMount() {}
11 |
12 | render() {
13 | const normalCenter = {
14 | textAlign: 'center',
15 | marginBottom: 20,
16 | };
17 | return (
18 |
19 |
26 |
35 |
44 |
53 |
62 |
71 |
72 |
73 | );
74 | }
75 | }
76 |
77 | export default LinkComponent;
78 |
--------------------------------------------------------------------------------
/src/pages/OtherUser/OtherUserComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input, Modal } from 'antd';
3 |
4 | class OtherUserComponent extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {};
8 | }
9 |
10 | componentDidMount() {}
11 |
12 | render() {
13 | const normalCenter = {
14 | textAlign: 'center',
15 | marginBottom: 20,
16 | };
17 | return (
18 |
19 |
26 |
35 |
44 |
53 |
62 |
71 |
72 |
73 | );
74 | }
75 | }
76 |
77 | export default OtherUserComponent;
78 |
--------------------------------------------------------------------------------
/src/pages/OtherUser/style.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '~@/utils/utils.less';
3 |
4 | .tableList {
5 | .tableListOperator {
6 | margin-bottom: 16px;
7 | button {
8 | margin-right: 8px;
9 | }
10 | }
11 | }
12 |
13 | .tableListForm {
14 | :global {
15 | .ant-form-item {
16 | margin-bottom: 24px;
17 | margin-right: 0;
18 | display: flex;
19 | > .ant-form-item-label {
20 | width: auto;
21 | line-height: 32px;
22 | padding-right: 8px;
23 | }
24 | .ant-form-item-control {
25 | line-height: 32px;
26 | }
27 | }
28 | .ant-form-item-control-wrapper {
29 | flex: 1;
30 | }
31 | }
32 | .submitButtons {
33 | display: block;
34 | white-space: nowrap;
35 | margin-bottom: 24px;
36 | }
37 | }
38 |
39 | @media screen and (max-width: @screen-lg) {
40 | .tableListForm :global(.ant-form-item) {
41 | margin-right: 24px;
42 | }
43 | }
44 |
45 | @media screen and (max-width: @screen-md) {
46 | .tableListForm :global(.ant-form-item) {
47 | margin-right: 8px;
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/pages/Tag/TagComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input, Modal } from 'antd';
3 |
4 | class TagComponent extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = {};
8 | }
9 |
10 | componentDidMount() {}
11 |
12 | render() {
13 | const normalCenter = {
14 | textAlign: 'center',
15 | marginBottom: 20,
16 | };
17 | return (
18 |
19 |
26 |
35 |
44 |
45 |
46 | );
47 | }
48 | }
49 |
50 | export default TagComponent;
51 |
--------------------------------------------------------------------------------
/src/pages/TimeAxis/TimeAxisComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input, Modal, Select, DatePicker } from 'antd';
3 | import { connect } from 'dva';
4 |
5 | const { RangePicker } = DatePicker;
6 |
7 | @connect(({ timeAxis }) => ({
8 | timeAxis,
9 | }))
10 | class TimeAxisComponent extends React.Component {
11 | constructor(props) {
12 | super(props);
13 | this.state = {
14 |
15 | };
16 | }
17 |
18 | checkUpdate(){
19 | const { changeType } = this.props;
20 | const { timeAxisDetail } = this.props.timeAxis;
21 | if (changeType) {
22 | this.setState({
23 | title: timeAxisDetail.title,
24 | state: timeAxisDetail.state,
25 | content: timeAxisDetail.content,
26 | });
27 | }
28 | }
29 |
30 |
31 |
32 | render() {
33 |
34 | const { TextArea } = Input;
35 | const normalCenter = {
36 | textAlign: 'center',
37 | marginBottom: 20,
38 | };
39 | return (
40 |
41 |
48 |
57 |
65 |
66 |
77 |
78 |
79 | );
80 | }
81 | }
82 |
83 | export default TimeAxisComponent;
84 |
--------------------------------------------------------------------------------
/src/pages/User/Login.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .main {
4 | width: 368px;
5 | margin: 0 auto;
6 | @media screen and (max-width: @screen-sm) {
7 | width: 95%;
8 | }
9 |
10 | .icon {
11 | font-size: 24px;
12 | color: rgba(0, 0, 0, 0.2);
13 | margin-left: 16px;
14 | vertical-align: middle;
15 | cursor: pointer;
16 | transition: color 0.3s;
17 |
18 | &:hover {
19 | color: @primary-color;
20 | }
21 | }
22 |
23 | .other {
24 | text-align: left;
25 | margin-top: 24px;
26 | line-height: 22px;
27 |
28 | .register {
29 | float: right;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/pages/User/Register.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .main {
4 | width: 368px;
5 | margin: 0 auto;
6 |
7 | :global {
8 | .ant-form-item {
9 | margin-bottom: 24px;
10 | }
11 | }
12 |
13 | h3 {
14 | font-size: 16px;
15 | margin-bottom: 20px;
16 | }
17 |
18 | .getCaptcha {
19 | display: block;
20 | width: 100%;
21 | }
22 |
23 | .submit {
24 | width: 50%;
25 | }
26 |
27 | .login {
28 | float: right;
29 | line-height: @btn-height-lg;
30 | }
31 | }
32 |
33 | .success,
34 | .warning,
35 | .error {
36 | transition: color 0.3s;
37 | }
38 |
39 | .success {
40 | color: @success-color;
41 | }
42 |
43 | .warning {
44 | color: @warning-color;
45 | }
46 |
47 | .error {
48 | color: @error-color;
49 | }
50 |
51 | .progress-pass > .progress {
52 | :global {
53 | .ant-progress-bg {
54 | background-color: @warning-color;
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/User/RegisterResult.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { formatMessage, FormattedMessage } from 'umi/locale';
3 | import { Button } from 'antd';
4 | import Link from 'umi/link';
5 | import Result from '@/components/Result';
6 | import styles from './RegisterResult.less';
7 |
8 | const actions = (
9 |
21 | );
22 |
23 | const RegisterResult = ({ location }) => (
24 |
29 |
33 |
34 | }
35 | description={formatMessage({ id: 'app.register-result.activation-email' })}
36 | actions={actions}
37 | style={{ marginTop: 56 }}
38 | />
39 | );
40 |
41 | export default RegisterResult;
42 |
--------------------------------------------------------------------------------
/src/pages/User/RegisterResult.less:
--------------------------------------------------------------------------------
1 | .registerResult {
2 | :global {
3 | .anticon {
4 | font-size: 64px;
5 | }
6 | }
7 | .title {
8 | margin-top: 32px;
9 | font-size: 20px;
10 | line-height: 28px;
11 | }
12 | .actions {
13 | margin-top: 40px;
14 | a + a {
15 | margin-left: 8px;
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/pages/User/models/register.js:
--------------------------------------------------------------------------------
1 | import { fakeRegister } from '@/services/api';
2 | import { setAuthority } from '@/utils/authority';
3 | import { reloadAuthorized } from '@/utils/Authorized';
4 |
5 | export default {
6 | namespace: 'register',
7 |
8 | state: {
9 | status: undefined,
10 | },
11 |
12 | effects: {
13 | *submit({ payload }, { call, put }) {
14 | const response = yield call(fakeRegister, payload);
15 | yield put({
16 | type: 'registerHandle',
17 | payload: response,
18 | });
19 | },
20 | },
21 |
22 | reducers: {
23 | registerHandle(state, { payload }) {
24 | setAuthority('user');
25 | reloadAuthorized();
26 | return {
27 | ...state,
28 | status: payload.status,
29 | };
30 | },
31 | },
32 | };
33 |
--------------------------------------------------------------------------------
/src/pages/document.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | react-blog-admin
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/services/error.js:
--------------------------------------------------------------------------------
1 | import request from '@/utils/request';
2 |
3 | export default async function queryError(code) {
4 | return request(`/api/${code}`);
5 | }
6 |
--------------------------------------------------------------------------------
/src/services/geographic.js:
--------------------------------------------------------------------------------
1 | import request from '@/utils/request';
2 |
3 | export async function queryProvince() {
4 | return request('/api/geographic/province');
5 | }
6 |
7 | export async function queryCity(province) {
8 | return request(`/api/geographic/city/${province}`);
9 | }
10 |
--------------------------------------------------------------------------------
/src/services/user.js:
--------------------------------------------------------------------------------
1 | import request from '@/utils/request';
2 |
3 | export async function query() {
4 | return request('/api/users');
5 | }
6 |
7 | export async function queryCurrent() {
8 | return request('/api/currentUser');
9 | }
10 |
--------------------------------------------------------------------------------
/src/utils/Authorized.js:
--------------------------------------------------------------------------------
1 | import RenderAuthorized from '@/components/Authorized';
2 | import { getAuthority } from './authority';
3 |
4 | let Authorized = RenderAuthorized(getAuthority()); // eslint-disable-line
5 |
6 | // Reload the rights component
7 | const reloadAuthorized = () => {
8 | Authorized = RenderAuthorized(getAuthority());
9 | };
10 |
11 | export { reloadAuthorized };
12 | export default Authorized;
13 |
--------------------------------------------------------------------------------
/src/utils/Yuan.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { yuan } from '@/components/Charts';
3 | /**
4 | * 减少使用 dangerouslySetInnerHTML
5 | */
6 | export default class Yuan extends React.PureComponent {
7 | componentDidMount() {
8 | this.rendertoHtml();
9 | }
10 |
11 | componentDidUpdate() {
12 | this.rendertoHtml();
13 | }
14 |
15 | rendertoHtml = () => {
16 | const { children } = this.props;
17 | if (this.main) {
18 | this.main.innerHTML = yuan(children);
19 | }
20 | };
21 |
22 | render() {
23 | return (
24 | {
26 | this.main = ref;
27 | }}
28 | />
29 | );
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/utils/authority.js:
--------------------------------------------------------------------------------
1 | // use localStorage to store the authority info, which might be sent from server in actual project.
2 | export function getAuthority(str) {
3 | // return localStorage.getItem('antd-pro-authority') || ['admin', 'user'];
4 | const authorityString =
5 | typeof str === 'undefined' ? localStorage.getItem('antd-pro-authority') : str;
6 | // authorityString could be admin, "admin", ["admin"]
7 | let authority;
8 | try {
9 | authority = JSON.parse(authorityString);
10 | } catch (e) {
11 | authority = authorityString;
12 | }
13 | if (typeof authority === 'string') {
14 | return [authority];
15 | }
16 | return authority || ['admin'];
17 | }
18 |
19 | export function setAuthority(authority) {
20 | const proAuthority = typeof authority === 'string' ? [authority] : authority;
21 | return localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));
22 | }
23 |
--------------------------------------------------------------------------------
/src/utils/authority.test.js:
--------------------------------------------------------------------------------
1 | import { getAuthority } from './authority';
2 |
3 | describe('getAuthority should be strong', () => {
4 | it('empty', () => {
5 | expect(getAuthority(null)).toEqual(['admin']); // default value
6 | });
7 | it('string', () => {
8 | expect(getAuthority('admin')).toEqual(['admin']);
9 | });
10 | it('array with double quotes', () => {
11 | expect(getAuthority('"admin"')).toEqual(['admin']);
12 | });
13 | it('array with single item', () => {
14 | expect(getAuthority('["admin"]')).toEqual(['admin']);
15 | });
16 | it('array with multiple items', () => {
17 | expect(getAuthority('["admin", "guest"]')).toEqual(['admin', 'guest']);
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/src/utils/domain.js:
--------------------------------------------------------------------------------
1 | let domain = 'https://biaochenxuying.cn/'; // 正式域名
2 | if (process.env.NODE_ENV === 'development') {
3 | // 开发环境下，本地地址
4 | domain = 'http://localhost:3001/';
5 | }
6 | export default domain;
7 |
--------------------------------------------------------------------------------
/src/utils/utils.less:
--------------------------------------------------------------------------------
1 | .textOverflow() {
2 | overflow: hidden;
3 | text-overflow: ellipsis;
4 | word-break: break-all;
5 | white-space: nowrap;
6 | }
7 |
8 | .textOverflowMulti(@line: 3, @bg: #fff) {
9 | overflow: hidden;
10 | position: relative;
11 | line-height: 1.5em;
12 | max-height: @line * 1.5em;
13 | text-align: justify;
14 | margin-right: -1em;
15 | padding-right: 1em;
16 | &:before {
17 | background: @bg;
18 | content: '...';
19 | padding: 0 1px;
20 | position: absolute;
21 | right: 14px;
22 | bottom: 0;
23 | }
24 | &:after {
25 | background: white;
26 | content: '';
27 | margin-top: 0.2em;
28 | position: absolute;
29 | right: 14px;
30 | width: 1em;
31 | height: 1em;
32 | }
33 | }
34 |
35 | // mixins for clearfix
36 | // ------------------------
37 | .clearfix() {
38 | zoom: 1;
39 | &:before,
40 | &:after {
41 | content: ' ';
42 | display: table;
43 | }
44 | &:after {
45 | clear: both;
46 | visibility: hidden;
47 | font-size: 0;
48 | height: 0;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/tests/fix_puppeteer.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | sudo apt-get update
4 | sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
5 | libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
6 | libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
7 | libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
8 | ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
9 |
--------------------------------------------------------------------------------
/tests/run-tests.js:
--------------------------------------------------------------------------------
1 | const { spawn } = require('child_process');
2 | const { kill } = require('cross-port-killer');
3 |
4 | const env = Object.create(process.env);
5 | env.BROWSER = 'none';
6 | env.TEST = true;
7 | // flag to prevent multiple test
8 | let once = false;
9 |
10 | const startServer = spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['start'], {
11 | env,
12 | });
13 |
14 | startServer.stderr.on('data', data => {
15 | // eslint-disable-next-line
16 | console.log(data.toString());
17 | });
18 |
19 | startServer.on('exit', () => {
20 | kill(process.env.PORT || 8000);
21 | });
22 |
23 | // eslint-disable-next-line
24 | console.log('Starting development server for e2e tests...');
25 | startServer.stdout.on('data', data => {
26 | // eslint-disable-next-line
27 | console.log(data.toString());
28 | if (!once && data.toString().indexOf('App running at') >= 0) {
29 | // eslint-disable-next-line
30 | once = true;
31 | console.log('Development server is started, ready to run tests.');
32 | const testCmd = spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['test'], {
33 | stdio: 'inherit',
34 | });
35 | testCmd.on('exit', code => {
36 | startServer.kill();
37 | process.exit(code);
38 | });
39 | }
40 | });
41 |
--------------------------------------------------------------------------------
快速开始
17 | 
产品简介
20 | 
产品文档
23 |