;
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 | 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.js';
5 |
6 | /* eslint-disable import/no-mutable-exports */
7 | let CURRENT = 'NULL';
8 |
9 | Authorized.Secured = Secured;
10 | Authorized.AuthorizedRoute = AuthorizedRoute;
11 | Authorized.check = check;
12 |
13 | /**
14 | * use authority or getAuthority
15 | * @param {string|()=>String} currentAuthority
16 | */
17 | const renderAuthorize = currentAuthority => {
18 | if (currentAuthority) {
19 | if (currentAuthority.constructor.name === 'Function') {
20 | CURRENT = currentAuthority();
21 | }
22 | if (currentAuthority.constructor.name === 'String') {
23 | CURRENT = currentAuthority;
24 | }
25 | } else {
26 | CURRENT = 'NULL';
27 | }
28 | return Authorized;
29 | };
30 |
31 | export { CURRENT };
32 | export default renderAuthorize;
33 |
--------------------------------------------------------------------------------
/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` | - |
29 | | noMatch | 权限异常渲染元素，权限判断不通过时展示 | ReactNode | - |
30 |
31 | ### Authorized.AuthorizedRoute
32 |
33 | | 参数 | 说明 | 类型 | 默认值 |
34 | |----------|------------------------------------------|-------------|-------|
35 | | authority | 准入权限/权限判断 | `string | array | Promise | (currentAuthority) => boolean` | - |
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` | - |
47 | | error | 权限异常时渲染元素 | ReactNode | {
9 | constructor(props: IAvatarItemProps);
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/AvatarList/demo/simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基础样例
5 | en-US: Basic Usage
6 | ---
7 |
8 | Simplest of usage.
9 |
10 | ````jsx
11 | import AvatarList from 'ant-design-pro/lib/AvatarList';
12 |
13 | ReactDOM.render(
14 |
15 |
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import AvatarItem from './AvatarItem';
3 |
4 | export interface IAvatarListProps {
5 | size?: 'large' | 'small' | 'mini' | 'default';
6 | style?: React.CSSProperties;
7 | children: React.ReactElement | Array>;
8 | }
9 |
10 | export default class AvatarList extends React.Component {
11 | public static Item: typeof AvatarItem;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: AvatarList
3 | order: 1
4 | cols: 1
5 | ---
6 |
7 | A list of user's avatar for project or group member list frequently. If a large or small AvatarList is desired, set the `size` property to either `large` or `small` and `mini` respectively. Omit the `size` property for a AvatarList with the default size.
8 |
9 | ## API
10 |
11 | ### AvatarList
12 |
13 | | Property | Description | Type | Default |
14 | |----------|------------------------------------------|-------------|-------|
15 | | size | size of list | `large`、`small` 、`mini`, `default` | `default` |
16 |
17 | ### AvatarList.Item
18 |
19 | | Property | Description | Type | Default |
20 | |----------|------------------------------------------|-------------|-------|
21 | | tips | title tips for avatar item | ReactNode\/string | - |
22 | | src | the address of the image for an image avatar | string | - |
23 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip, Avatar } from 'antd';
3 | import classNames from 'classnames';
4 |
5 | import styles from './index.less';
6 |
7 | const AvatarList = ({ children, size, ...other }) => {
8 | const childrenWithProps = React.Children.map(children, child =>
9 | React.cloneElement(child, {
10 | size,
11 | })
12 | );
13 |
14 | return (
15 |
18 | );
19 | };
20 |
21 | const Item = ({ src, size, tips, onClick = () => {} }) => {
22 | const cls = classNames(styles.avatarItem, {
23 | [styles.avatarItemLarge]: size === 'large',
24 | [styles.avatarItemSmall]: size === 'small',
25 | [styles.avatarItemMini]: size === 'mini',
26 | });
27 |
28 | return (
29 |
30 | {tips ? (
31 |
32 |
34 | ) : (
35 |
38 | );
39 | };
40 |
41 | AvatarList.Item = Item;
42 |
43 | export default AvatarList;
44 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .avatarList {
4 | display: inline-block;
5 | ul {
6 | display: inline-block;
7 | margin-left: 8px;
8 | font-size: 0;
9 | }
10 | }
11 |
12 | .avatarItem {
13 | display: inline-block;
14 | font-size: @font-size-base;
15 | margin-left: -8px;
16 | width: @avatar-size-base;
17 | height: @avatar-size-base;
18 | :global {
19 | .ant-avatar {
20 | border: 1px solid #fff;
21 | }
22 | }
23 | }
24 |
25 | .avatarItemLarge {
26 | width: @avatar-size-lg;
27 | height: @avatar-size-lg;
28 | }
29 |
30 | .avatarItemSmall {
31 | width: @avatar-size-sm;
32 | height: @avatar-size-sm;
33 | }
34 |
35 | .avatarItemMini {
36 | width: 20px;
37 | height: 20px;
38 | :global {
39 | .ant-avatar {
40 | width: 20px;
41 | height: 20px;
42 | line-height: 20px;
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/AvatarList/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: AvatarList
3 | subtitle: 用户头像列表
4 | order: 1
5 | cols: 1
6 | ---
7 |
8 | 一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
9 |
10 | ## API
11 |
12 | ### AvatarList
13 |
14 | | 参数 | 说明 | 类型 | 默认值 |
15 | |----------|------------------------------------------|-------------|-------|
16 | | size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` |
17 |
18 | ### AvatarList.Item
19 |
20 | | 参数 | 说明 | 类型 | 默认值 |
21 | |----------|------------------------------------------|-------------|-------|
22 | | tips | 头像展示文案 | ReactNode\/string | - |
23 | | src | 头像图片连接 | string | - |
24 |
--------------------------------------------------------------------------------
/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 | export interface IChartCardProps {
3 | title: React.ReactNode;
4 | action?: React.ReactNode;
5 | total?: React.ReactNode | function | number;
6 | footer?: React.ReactNode;
7 | contentHeight?: number;
8 | avatar?: React.ReactNode;
9 | style?: React.CSSProperties;
10 | }
11 |
12 | export default class ChartCard extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/components/Charts/ChartCard/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Card, Spin } 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 | const ChartCard = ({
23 | loading = false,
24 | contentHeight,
25 | title,
26 | avatar,
27 | action,
28 | total,
29 | footer,
30 | children,
31 | ...rest
32 | }) => {
33 | const content = (
34 |
35 |
40 |
{avatar}
41 |
42 |
43 | {title}
44 | {action}
45 |
46 | {renderTotal(total)}
47 |
48 |
49 | {children && (
50 |
53 | )}
54 | {footer && (
55 |
60 | {footer}
61 |
62 | )}
63 |
68 | {
69 |
70 | {content}
71 |
72 | }
73 |
74 | );
75 | };
76 |
77 | export default ChartCard;
78 |
--------------------------------------------------------------------------------
/src/components/Charts/ChartCard/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .chartCard {
4 | position: relative;
5 | .chartTop {
6 | position: relative;
7 | overflow: hidden;
8 | width: 100%;
9 | }
10 | .chartTopMargin {
11 | margin-bottom: 12px;
12 | }
13 | .chartTopHasMargin {
14 | margin-bottom: 20px;
15 | }
16 | .metaWrap {
17 | float: left;
18 | }
19 | .avatar {
20 | position: relative;
21 | top: 4px;
22 | float: left;
23 | margin-right: 20px;
24 | img {
25 | border-radius: 100%;
26 | }
27 | }
28 | .meta {
29 | color: @text-color-secondary;
30 | font-size: @font-size-base;
31 | line-height: 22px;
32 | height: 22px;
33 | }
34 | .action {
35 | cursor: pointer;
36 | position: absolute;
37 | top: 0;
38 | right: 0;
39 | }
40 | .total {
41 | overflow: hidden;
42 | text-overflow: ellipsis;
43 | word-break: break-all;
44 | white-space: nowrap;
45 | color: @heading-color;
46 | margin-top: 4px;
47 | margin-bottom: 0;
48 | font-size: 30px;
49 | line-height: 38px;
50 | height: 38px;
51 | }
52 | .content {
53 | margin-bottom: 12px;
54 | position: relative;
55 | width: 100%;
56 | }
57 | .contentFixed {
58 | position: absolute;
59 | left: 0;
60 | bottom: 0;
61 | width: 100%;
62 | }
63 | .footer {
64 | border-top: 1px solid @border-color-split;
65 | padding-top: 9px;
66 | margin-top: 8px;
67 | & > * {
68 | position: relative;
69 | }
70 | }
71 | .footerMargin {
72 | margin-top: 20px;
73 | }
74 | }
75 |
76 | .spin :global(.ant-spin-container) {
77 | overflow: visible;
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/Charts/Field/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IFieldProps {
3 | label: React.ReactNode;
4 | value: React.ReactNode;
5 | style?: React.CSSProperties;
6 | }
7 |
8 | export default class Field extends React.Component {}
9 |
--------------------------------------------------------------------------------
/src/components/Charts/Field/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import styles from './index.less';
4 |
5 | const Field = ({ label, value, ...rest }) => (
6 |
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;
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 | export default 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 |
46 |
47 |
{}
11 |
--------------------------------------------------------------------------------
/src/components/Charts/MiniProgress/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Tooltip } from 'antd';
3 |
4 | import styles from './index.less';
5 |
6 | const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
7 |
8 |
9 |
10 |
13 |
14 |
24 |
{}
21 |
--------------------------------------------------------------------------------
/src/components/Charts/Pie/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .pie {
4 | position: relative;
5 | .chart {
6 | position: relative;
7 | }
8 | &.hasLegend .chart {
9 | width: ~'calc(100% - 240px)';
10 | }
11 | .legend {
12 | position: absolute;
13 | right: 0;
14 | min-width: 200px;
15 | top: 50%;
16 | transform: translateY(-50%);
17 | margin: 0 20px;
18 | list-style: none;
19 | padding: 0;
20 | li {
21 | cursor: pointer;
22 | margin-bottom: 16px;
23 | height: 22px;
24 | line-height: 22px;
25 | &:last-child {
26 | margin-bottom: 0;
27 | }
28 | }
29 | }
30 | .dot {
31 | border-radius: 8px;
32 | display: inline-block;
33 | margin-right: 8px;
34 | position: relative;
35 | top: -1px;
36 | height: 8px;
37 | width: 8px;
38 | }
39 | .line {
40 | background-color: @border-color-split;
41 | display: inline-block;
42 | margin-right: 8px;
43 | width: 1px;
44 | height: 16px;
45 | }
46 | .legendTitle {
47 | color: @text-color;
48 | }
49 | .percent {
50 | color: @text-color-secondary;
51 | }
52 | .value {
53 | position: absolute;
54 | right: 0;
55 | }
56 | .title {
57 | margin-bottom: 8px;
58 | }
59 | .total {
60 | position: absolute;
61 | left: 50%;
62 | top: 50%;
63 | text-align: center;
64 | height: 62px;
65 | transform: translate(-50%, -50%);
66 | & > h4 {
67 | color: @text-color-secondary;
68 | font-size: 14px;
69 | line-height: 22px;
70 | height: 22px;
71 | margin-bottom: 8px;
72 | font-weight: normal;
73 | }
74 | & > p {
75 | color: @heading-color;
76 | display: block;
77 | font-size: 1.2em;
78 | height: 32px;
79 | line-height: 32px;
80 | white-space: nowrap;
81 | }
82 | }
83 | }
84 |
85 | .legendBlock {
86 | &.hasLegend .chart {
87 | width: 100%;
88 | margin: 0 0 32px 0;
89 | }
90 | .legend {
91 | position: relative;
92 | transform: none;
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/Charts/Radar/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IRadarProps {
3 | title?: React.ReactNode;
4 | height: number;
5 | padding?: [number, number, number, number];
6 | hasLegend?: boolean;
7 | data: Array<{
8 | name: string;
9 | label: string;
10 | value: string;
11 | }>;
12 | style?: React.CSSProperties;
13 | }
14 |
15 | export default class Radar extends React.Component {}
16 |
--------------------------------------------------------------------------------
/src/components/Charts/Radar/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .radar {
4 | .legend {
5 | margin-top: 16px;
6 | .legendItem {
7 | position: relative;
8 | text-align: center;
9 | cursor: pointer;
10 | color: @text-color-secondary;
11 | line-height: 22px;
12 | p {
13 | margin: 0;
14 | }
15 | h6 {
16 | color: @heading-color;
17 | padding-left: 16px;
18 | font-size: 24px;
19 | line-height: 32px;
20 | margin-top: 4px;
21 | margin-bottom: 0;
22 | }
23 | &:after {
24 | background-color: @border-color-split;
25 | position: absolute;
26 | top: 8px;
27 | right: 0;
28 | height: 40px;
29 | width: 1px;
30 | content: '';
31 | }
32 | }
33 | > :last-child .legendItem:after {
34 | display: none;
35 | }
36 | .dot {
37 | border-radius: 6px;
38 | display: inline-block;
39 | margin-right: 6px;
40 | position: relative;
41 | top: -1px;
42 | height: 6px;
43 | width: 6px;
44 | }
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/Charts/TagCloud/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface ITagCloudProps {
3 | data: Array<{
4 | name: string;
5 | value: number;
6 | }>;
7 | height: number;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class TagCloud extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/Charts/TagCloud/index.less:
--------------------------------------------------------------------------------
1 | .tagCloud {
2 | overflow: hidden;
3 | canvas {
4 | transform: scale(0.25);
5 | transform-origin: 0 0;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/Charts/TimelineChart/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface ITimelineChartProps {
3 | data: Array<{
4 | x: string;
5 | y1: string;
6 | y2: string;
7 | }>;
8 | titleMap: { y1: string; y2: string };
9 | padding?: [number, number, number, number];
10 | height?: number;
11 | style?: React.CSSProperties;
12 | }
13 |
14 | export default class TimelineChart extends React.Component {}
15 |
--------------------------------------------------------------------------------
/src/components/Charts/TimelineChart/index.less:
--------------------------------------------------------------------------------
1 | .timelineChart {
2 | background: #fff;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Charts/WaterWave/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IWaterWaveProps {
3 | title: React.ReactNode;
4 | color?: string;
5 | height: number;
6 | percent: number;
7 | style?: React.CSSProperties;
8 | }
9 |
10 | export default class WaterWave extends React.Component {}
11 |
--------------------------------------------------------------------------------
/src/components/Charts/WaterWave/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .waterWave {
4 | display: inline-block;
5 | position: relative;
6 | transform-origin: left;
7 | .text {
8 | position: absolute;
9 | left: 0;
10 | top: 32px;
11 | text-align: center;
12 | width: 100%;
13 | span {
14 | color: @text-color-secondary;
15 | font-size: 14px;
16 | line-height: 22px;
17 | }
18 | h4 {
19 | color: @heading-color;
20 | line-height: 32px;
21 | font-size: 24px;
22 | }
23 | }
24 | .waterWaveCanvasWrapper {
25 | transform: scale(0.5);
26 | transform-origin: 0 0;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Charts/autoHeight.js:
--------------------------------------------------------------------------------
1 | /* eslint eqeqeq: 0 */
2 | import React from 'react';
3 |
4 | function computeHeight(node) {
5 | const totalHeight = parseInt(getComputedStyle(node).height, 10);
6 | const padding =
7 | parseInt(getComputedStyle(node).paddingTop, 10) +
8 | parseInt(getComputedStyle(node).paddingBottom, 10);
9 | return totalHeight - padding;
10 | }
11 |
12 | function getAutoHeight(n) {
13 | if (!n) {
14 | return 0;
15 | }
16 |
17 | let node = n;
18 |
19 | let height = computeHeight(node);
20 |
21 | while (!height) {
22 | node = node.parentNode;
23 | if (node) {
24 | height = computeHeight(node);
25 | } else {
26 | break;
27 | }
28 | }
29 |
30 | return height;
31 | }
32 |
33 | const autoHeight = () => WrappedComponent => {
34 | return class extends React.Component {
35 | state = {
36 | computedHeight: 0,
37 | };
38 |
39 | componentDidMount() {
40 | const { height } = this.props;
41 | if (!height) {
42 | const h = getAutoHeight(this.root);
43 | // eslint-disable-next-line
44 | this.setState({ computedHeight: h });
45 | }
46 | }
47 |
48 | handleRoot = node => {
49 | this.root = node;
50 | };
51 |
52 | render() {
53 | const { height } = this.props;
54 | const { computedHeight } = this.state;
55 | const h = height || computedHeight;
56 | return (
57 | {h > 0 &&
58 | );
59 | }
60 | };
61 | };
62 |
63 | export default autoHeight;
64 |
--------------------------------------------------------------------------------
/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 | (
42 | now.y + pre, 0))
45 | }}
46 | />
47 | )}
48 | data={salesPieData}
49 | valueFormat={val =>
57 |
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 |
13 |
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 | export {
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 |
--------------------------------------------------------------------------------
/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/CountDown/demo/simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 基本
5 | en-US: Basic
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 简单的倒计时组件使用。
11 |
12 | ## en-US
13 |
14 | The simplest usage.
15 |
16 | ````jsx
17 | import CountDown from 'ant-design-pro/lib/CountDown';
18 |
19 | const targetTime = new Date().getTime() + 3900000;
20 |
21 | ReactDOM.render(
22 | {}
10 |
--------------------------------------------------------------------------------
/src/components/CountDown/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CountDown
3 | cols: 1
4 | order: 3
5 | ---
6 |
7 | Simple CountDown Component.
8 |
9 | ## API
10 |
11 | | Property | Description | Type | Default |
12 | |----------|------------------------------------------|-------------|-------|
13 | | format | Formatter of time | Function(time) | |
14 | | target | Target time | Date | - |
15 | | onEnd | Countdown to the end callback | funtion | -|
16 |
--------------------------------------------------------------------------------
/src/components/CountDown/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: CountDown
3 | subtitle: 倒计时
4 | cols: 1
5 | order: 3
6 | ---
7 |
8 | 倒计时组件。
9 |
10 | ## API
11 |
12 | | 参数 | 说明 | 类型 | 默认值 |
13 | |----------|------------------------------------------|-------------|-------|
14 | | format | 时间格式化显示 | Function(time) | |
15 | | target | 目标时间 | Date | - |
16 | | onEnd | 倒计时结束回调 | funtion | -|
17 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/Description.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export default class Description extends React.Component<
4 | {
5 | term: React.ReactNode;
6 | style?: React.CSSProperties;
7 | },
8 | any
9 | > {}
10 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/Description.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import classNames from 'classnames';
4 | import { Col } from 'antd';
5 | import styles from './index.less';
6 | import responsive from './responsive';
7 |
8 | const Description = ({ term, column, className, children, ...restProps }) => {
9 | const clsString = classNames(styles.description, className);
10 | return (
11 | {term}
}
13 | {children && {children}
}
14 |
15 | );
16 | };
17 |
18 | Description.defaultProps = {
19 | term: '',
20 | };
21 |
22 | Description.propTypes = {
23 | term: PropTypes.node,
24 | };
25 |
26 | export default Description;
27 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/DescriptionList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import { Row } from 'antd';
4 | import styles from './index.less';
5 |
6 | export default ({
7 | className,
8 | title,
9 | col = 3,
10 | layout = 'horizontal',
11 | gutter = 32,
12 | children,
13 | size,
14 | ...restProps
15 | }) => {
16 | const clsString = classNames(styles.descriptionList, styles[layout], className, {
17 | [styles.small]: size === 'small',
18 | [styles.large]: size === 'large',
19 | });
20 | const column = col > 4 ? 4 : col;
21 | return (
22 |
23 | {title ?
{title}
: null}
24 |
25 | {React.Children.map(children, child => React.cloneElement(child, { column }))}
26 |
27 |
15 |
16 | A free, open source, cross-platform,
17 | graphical web browser developed by the
18 | Mozilla Corporation and hundreds of
19 | volunteers.
20 |
21 |
22 | A free, open source, cross-platform,
23 | graphical web browser developed by the
24 | Mozilla Corporation and hundreds of
25 | volunteers.
26 |
27 |
28 | A free, open source, cross-platform,
29 | graphical web browser developed by the
30 | Mozilla Corporation and hundreds of
31 | volunteers.
32 |
33 |
34 | , mountNode);
35 | ````
36 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/demo/vertical.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title: Vertical
4 | ---
5 |
6 | 垂直布局。
7 |
8 | ````jsx
9 | import DescriptionList from 'ant-design-pro/lib/DescriptionList';
10 |
11 | const { Description } = DescriptionList;
12 |
13 | ReactDOM.render(
14 |
15 |
16 | A free, open source, cross-platform,
17 | graphical web browser developed by the
18 | Mozilla Corporation and hundreds of
19 | volunteers.
20 |
21 |
22 | A free, open source, cross-platform,
23 | graphical web browser developed by the
24 | Mozilla Corporation and hundreds of
25 | volunteers.
26 |
27 |
28 | A free, open source, cross-platform,
29 | graphical web browser developed by the
30 | Mozilla Corporation and hundreds of
31 | volunteers.
32 |
33 |
34 | , mountNode);
35 | ````
36 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Description from './Description';
3 |
4 | export interface IDescriptionListProps {
5 | layout?: 'horizontal' | 'vertical';
6 | col?: number;
7 | title: React.ReactNode;
8 | gutter?: number;
9 | size?: 'large' | 'small';
10 | style?: React.CSSProperties;
11 | }
12 |
13 | export default class DescriptionList extends React.Component {
14 | public static Description: typeof Description;
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.js:
--------------------------------------------------------------------------------
1 | import DescriptionList from './DescriptionList';
2 | import Description from './Description';
3 |
4 | DescriptionList.Description = Description;
5 | export default DescriptionList;
6 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .descriptionList {
4 | // offset the padding-bottom of last row
5 | :global {
6 | .ant-row {
7 | margin-bottom: -16px;
8 | overflow: hidden;
9 | }
10 | }
11 |
12 | .title {
13 | font-size: 14px;
14 | color: @heading-color;
15 | font-weight: 500;
16 | margin-bottom: 16px;
17 | }
18 |
19 | .term {
20 | line-height: 22px;
21 | padding-bottom: 16px;
22 | margin-right: 8px;
23 | color: @heading-color;
24 | white-space: nowrap;
25 | display: table-cell;
26 |
27 | &:after {
28 | content: ':';
29 | margin: 0 8px 0 2px;
30 | position: relative;
31 | top: -0.5px;
32 | }
33 | }
34 |
35 | .detail {
36 | line-height: 22px;
37 | width: 100%;
38 | padding-bottom: 16px;
39 | color: @text-color;
40 | display: table-cell;
41 | }
42 |
43 | &.small {
44 | // offset the padding-bottom of last row
45 | :global {
46 | .ant-row {
47 | margin-bottom: -8px;
48 | }
49 | }
50 | .title {
51 | margin-bottom: 12px;
52 | color: @text-color;
53 | }
54 | .term,
55 | .detail {
56 | padding-bottom: 8px;
57 | }
58 | }
59 |
60 | &.large {
61 | .title {
62 | font-size: 16px;
63 | }
64 | }
65 |
66 | &.vertical {
67 | .term {
68 | padding-bottom: 8px;
69 | display: block;
70 | }
71 |
72 | .detail {
73 | display: block;
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: DescriptionList
4 | zh-CN: DescriptionList
5 | subtitle: 描述列表
6 | cols: 1
7 | order: 4
8 | ---
9 |
10 | 成组展示多个只读字段，常见于详情页的信息展示。
11 |
12 | ## API
13 |
14 | ### DescriptionList
15 |
16 | | 参数 | 说明 | 类型 | 默认值 |
17 | |----------|------------------------------------------|-------------|-------|
18 | | layout | 布局方式 | Enum{'horizontal', 'vertical'} | 'horizontal' |
19 | | col | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定 | number(0 < col <= 4) | 3 |
20 | | title | 列表标题 | ReactNode | - |
21 | | gutter | 列表项间距，单位为 `px` | number | 32 |
22 | | size | 列表型号，可以设置为 `large` `small` | Enum{'large', 'small'} | - |
23 |
24 | #### 响应式规则
25 |
26 | | 窗口宽度 | 展示列数 |
27 | |---------------------|---------------------------------------------|
28 | | `≥768px` | `col` |
29 | | `≥576px` | `col < 2 ? col : 2` |
30 | | `<576px` | `1` |
31 |
32 | ### DescriptionList.Description
33 |
34 | | 参数 | 说明 | 类型 | 默认值 |
35 | |----------|------------------------------------------|-------------|-------|
36 | | term | 列表项标题 | ReactNode | - |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/src/components/DescriptionList/responsive.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 1: { xs: 24 },
3 | 2: { xs: 24, sm: 12 },
4 | 3: { xs: 24, sm: 12, md: 8 },
5 | 4: { xs: 24, sm: 12, md: 6 },
6 | };
7 |
--------------------------------------------------------------------------------
/src/components/EditableItem/index.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Input, Icon } from 'antd';
3 | import styles from './index.less';
4 |
5 | export default class EditableItem extends PureComponent {
6 | state = {
7 | value: this.props.value,
8 | editable: false,
9 | };
10 | handleChange = e => {
11 | const { value } = e.target;
12 | this.setState({ value });
13 | };
14 | check = () => {
15 | this.setState({ editable: false });
16 | if (this.props.onChange) {
17 | this.props.onChange(this.state.value);
18 | }
19 | };
20 | edit = () => {
21 | this.setState({ editable: true });
22 | };
23 | render() {
24 | const { value, editable } = this.state;
25 | return (
26 |
27 | {editable ? (
28 |
29 |
32 | ) : (
33 |
34 | {value || ' '}
35 |
37 | )}
38 |
25 | {links.map(link =>
26 | createElement(
27 | linkElement,
28 | {
29 | key: `linkGroup-item-${link.id || link.title}`,
30 | to: link.href,
31 | href: link.href,
32 | },
33 | link.title
34 | )
35 | )}
36 | {
37 |
38 | 添加
39 |
40 | }
41 |
42 | );
43 | }
44 | }
45 |
46 | export default EditableLinkGroup;
47 |
--------------------------------------------------------------------------------
/src/components/EditableLinkGroup/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .linkGroup {
4 | padding: 20px 0 8px 24px;
5 | font-size: 0;
6 | & > a {
7 | color: @text-color;
8 | display: inline-block;
9 | font-size: @font-size-base;
10 | margin-bottom: 13px;
11 | width: 25%;
12 | &:hover {
13 | color: @primary-color;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/demo/line.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title: 按照行数省略
4 | ---
5 |
6 | 通过设置 `lines` 属性指定最大行数，如果超过这个行数的文本会自动截取。但是在这种模式下所有 `children` 将会被转换成纯文本。
7 |
8 | 并且注意在这种模式下，外容器需要有指定的宽度（或设置自身宽度）。
9 |
10 | ````jsx
11 | import Ellipsis from 'ant-design-pro/lib/Ellipsis';
12 |
13 | const article = There were injuries alleged in three cases in 2015 , and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
;
14 |
15 | ReactDOM.render(
16 |
17 | {article}
18 |
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/demo/number.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 按照字符数省略
4 | ---
5 |
6 | 通过设置 `length` 属性指定文本最长长度，如果超过这个长度会自动截取。
7 |
8 | ````jsx
9 | import Ellipsis from 'ant-design-pro/lib/Ellipsis';
10 |
11 | const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
12 |
13 | ReactDOM.render(
14 |
15 | {article}
16 |
Show Tooltip
17 | {article}
18 |
19 | , mountNode);
20 | ````
21 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IEllipsisProps {
3 | tooltip?: boolean;
4 | length?: number;
5 | lines?: number;
6 | style?: React.CSSProperties;
7 | className?: string;
8 | }
9 |
10 | export default class Ellipsis extends React.Component {}
11 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.less:
--------------------------------------------------------------------------------
1 | .ellipsis {
2 | overflow: hidden;
3 | display: inline-block;
4 | word-break: break-all;
5 | width: 100%;
6 | }
7 |
8 | .lines {
9 | position: relative;
10 | .shadow {
11 | display: block;
12 | position: relative;
13 | color: transparent;
14 | opacity: 0;
15 | z-index: -999;
16 | }
17 | }
18 |
19 | .lineClamp {
20 | position: relative;
21 | overflow: hidden;
22 | text-overflow: ellipsis;
23 | display: -webkit-box;
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/Ellipsis/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: Ellipsis
4 | zh-CN: Ellipsis
5 | subtitle: 文本自动省略号
6 | cols: 1
7 | order: 10
8 | ---
9 |
10 | 文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
11 |
12 | ## API
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | tooltip | 移动到文本展示完整内容的提示 | boolean | -
17 | length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | -
18 | lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1`
19 |
--------------------------------------------------------------------------------
/src/components/Exception/demo/403.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title: 403
4 | ---
5 |
6 | 403 页面，配合自定义操作。
7 |
8 | ````jsx
9 | import Exception from 'ant-design-pro/lib/Exception';
10 | import { Button } from 'antd';
11 |
12 | const actions = (
13 |
14 | 回到首页
15 | 查看详情
16 |
17 | );
18 | ReactDOM.render(
19 | {}
13 |
--------------------------------------------------------------------------------
/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 | export default ({ className, linkElement = 'a', type, title, desc, img, actions, ...rest }) => {
8 | const pageType = type in config ? type : '404';
9 | const clsString = classNames(styles.exception, className);
10 | return (
11 |
12 |
18 |
19 |
{title || config[pageType].title}
20 |
{desc || config[pageType].desc}
21 |
22 | {actions ||
23 | createElement(
24 | linkElement,
25 | {
26 | to: '/',
27 | href: '/',
28 | },
29 | 返回首页
30 | )}
31 |
32 |
33 |
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 | Cancel
40 | Submit
41 |
42 |
{}
8 |
--------------------------------------------------------------------------------
/src/components/FooterToolbar/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: FooterToolbar
3 | cols: 1
4 | order: 6
5 | ---
6 |
7 | A toolbar fixed at the bottom.
8 |
9 | ## Usage
10 |
11 | It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages.
12 |
13 | ## API
14 |
15 | Property | Description | Type | Default
16 | ---------|-------------|------|--------
17 | children | toolbar content, align to the right | ReactNode | -
18 | extra | extra information, align to the left | ReactNode | -
--------------------------------------------------------------------------------
/src/components/FooterToolbar/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import classNames from 'classnames';
3 | import styles from './index.less';
4 |
5 | export default class FooterToolbar extends Component {
6 | render() {
7 | const { children, className, extra, ...restProps } = this.props;
8 | return (
9 |
10 |
{extra}
11 |
{children}
12 |
Copyright
;
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 | title: React.ReactNode;
5 | href: string;
6 | blankTarget?: boolean;
7 | }>;
8 | copyright?: React.ReactNode;
9 | style?: React.CSSProperties;
10 | }
11 |
12 | export default class GlobalFooter extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/components/GlobalFooter/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import styles from './index.less';
4 |
5 | export default ({ className, links, copyright }) => {
6 | const clsString = classNames(styles.globalFooter, className);
7 | return (
8 |
9 | {links && (
10 |
17 | )}
18 | {copyright &&
{copyright}
}
19 |
22 | {
26 | console.log('input', value); // eslint-disable-line
27 | }}
28 | onPressEnter={(value) => {
29 | console.log('enter', value); // eslint-disable-line
30 | }}
31 | />
32 |
33 | , mountNode);
34 | ````
35 |
--------------------------------------------------------------------------------
/src/components/HeaderSearch/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IHeaderSearchProps {
3 | placeholder?: string;
4 | dataSource?: string[];
5 | onSearch?: (value: string) => void;
6 | onChange?: (value: string) => void;
7 | onPressEnter?: (value: string) => void;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class HeaderSearch extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/components/HeaderSearch/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .headerSearch {
4 | :global(.anticon-search) {
5 | cursor: pointer;
6 | font-size: 16px;
7 | }
8 | .input {
9 | transition: width 0.3s, margin-left 0.3s;
10 | width: 0;
11 | background: transparent;
12 | border-radius: 0;
13 | :global(.ant-select-selection) {
14 | background: transparent;
15 | }
16 | input {
17 | border: 0;
18 | padding-left: 0;
19 | padding-right: 0;
20 | box-shadow: none !important;
21 | }
22 | &,
23 | &:hover,
24 | &:focus {
25 | border-bottom: 1px solid @border-color-base;
26 | }
27 | &.show {
28 | width: 210px;
29 | margin-left: 8px;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/HeaderSearch/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: HeaderSearch
4 | zh-CN: HeaderSearch
5 | subtitle: 顶部搜索框
6 | cols: 1
7 | order: 8
8 | ---
9 |
10 | 通常作为全局搜索的入口，放置在导航工具条右侧。
11 |
12 | ## API
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | placeholder | 占位文字 | string | -
17 | dataSource | 当前提示内容列表 | string[] | -
18 | onSearch | 选择某项或按下回车时的回调 | function(value) | -
19 | onChange | 输入搜索字符的回调 | function(value) | -
20 | onPressEnter | 按下回车时的回调 | function(value) | -
21 | defaultOpen | 输入框首次显示是否打开 | boolean | false
22 |
--------------------------------------------------------------------------------
/src/components/ImageWrapper/index.js:
--------------------------------------------------------------------------------
1 | // index.js
2 | import React from 'react';
3 | import styles from './index.less'; // import style in css modules way
4 |
5 | export default ({ src, desc, style }) => (
6 |
7 |
8 | {desc &&
{desc}
}
9 |
12 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/components/Login/LoginTab.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Tabs } from 'antd';
4 |
5 | const { TabPane } = Tabs;
6 |
7 | const generateId = (() => {
8 | let i = 0;
9 | return (prefix = '') => {
10 | i += 1;
11 | return `${prefix}${i}`;
12 | };
13 | })();
14 |
15 | export default class LoginTab extends Component {
16 | static __ANT_PRO_LOGIN_TAB = true;
17 | static contextTypes = {
18 | tabUtil: PropTypes.object,
19 | };
20 | constructor(props) {
21 | super(props);
22 | this.uniqueId = generateId('login-tab-');
23 | }
24 | componentWillMount() {
25 | if (this.context.tabUtil) {
26 | this.context.tabUtil.addTab(this.uniqueId);
27 | }
28 | }
29 | render() {
30 | return {}
15 |
16 | export interface LoginItemProps {
17 | name?: string;
18 | rules?: any[];
19 | style?: React.CSSProperties;
20 | onGetCaptcha?: () => void;
21 | }
22 |
23 | export class LoginItem extends React.Component {}
24 |
25 | export default class Login extends React.Component {
26 | static Tab: typeof Tab;
27 | static UserName: typeof LoginItem;
28 | static Password: typeof LoginItem;
29 | static Mobile: typeof LoginItem;
30 | static Captcha: typeof LoginItem;
31 | static Submit: typeof Button;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/Login/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Login
3 | cols: 1
4 | order: 15
5 | ---
6 |
7 | Support multiple common ways of login with built-in controls. You can choose your own combinations and use with your custom controls.
8 |
9 | ## API
10 |
11 | ### Login
12 |
13 | Property | Description | Type | Default
14 | ----|------|-----|------
15 | defaultActiveKey | default key to activate the tab panel | String | -
16 | onTabChange | callback on changing tabs | (key) => void | -
17 | onSubmit | callback on submit | (err, values) => void | -
18 |
19 | ### Login.Tab
20 |
21 | Property | Description | Type | Default
22 | ----|------|-----|------
23 | key | key of the tab | String | -
24 | tab | displayed text of the tab | ReactNode | -
25 |
26 | ### Login.UserName
27 |
28 | Property | Description | Type | Default
29 | ----|------|-----|------
30 | name | name of the control, also the key of the submitted data | String | -
31 | rules | validation rules, same with [option.rules](getFieldDecorator(id, options)) in Form getFieldDecorator(id, options) | object[] | -
32 |
33 | Apart from the above properties, Login.Username also support all properties of antd.Input, together with the default values of basic settings, such as _placeholder_, _size_ and _prefix_. All of these default values can be over-written.
34 |
35 | ### Login.Password, Login.Mobile are the same as Login.UserName
36 |
37 | ### Login.Captcha
38 |
39 | Property | Description | Type | Default
40 | ----|------|-----|------
41 | onGetCaptcha | callback on getting a new Captcha | () => void | -
42 |
43 | Apart from the above properties, _Login.Captcha_ support the same properties with _Login.UserName_.
44 |
45 | ### Login.Submit
46 |
47 | Support all properties of _antd.Button_.
--------------------------------------------------------------------------------
/src/components/Login/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .login {
4 | .tabs {
5 | padding: 0 2px;
6 | margin: 0 -2px;
7 | :global {
8 | .ant-tabs-tab {
9 | font-size: 16px;
10 | line-height: 24px;
11 | }
12 | .ant-input-affix-wrapper .ant-input:not(:first-child) {
13 | padding-left: 34px;
14 | }
15 | }
16 | }
17 |
18 | :global {
19 | .ant-tabs .ant-tabs-bar {
20 | border-bottom: 0;
21 | margin-bottom: 24px;
22 | text-align: center;
23 | }
24 |
25 | .ant-form-item {
26 | margin-bottom: 24px;
27 | }
28 | }
29 |
30 | .prefixIcon {
31 | font-size: @font-size-base;
32 | color: @disabled-color;
33 | }
34 |
35 | .getCaptcha {
36 | display: block;
37 | width: 100%;
38 | }
39 |
40 | .submit {
41 | width: 100%;
42 | margin-top: 24px;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/Login/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Login
3 | subtitle: 登录
4 | cols: 1
5 | order: 15
6 | ---
7 |
8 | 支持多种登录方式切换，内置了几种常见的登录控件，可以灵活组合，也支持和自定义控件配合使用。
9 |
10 | ## API
11 |
12 | ### Login
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | defaultActiveKey | 默认激活 tab 面板的 key | String | -
17 | onTabChange | 切换页签时的回调 | (key) => void | -
18 | onSubmit | 点击提交时的回调 | (err, values) => void | -
19 |
20 | ### Login.Tab
21 |
22 | 参数 | 说明 | 类型 | 默认值
23 | ----|------|-----|------
24 | key | 对应选项卡的 key | String | -
25 | tab | 选项卡头显示文字 | ReactNode | -
26 |
27 | ### Login.UserName
28 |
29 | 参数 | 说明 | 类型 | 默认值
30 | ----|------|-----|------
31 | name | 控件标记，提交数据中同样以此为 key | String | -
32 | rules | 校验规则，同 Form getFieldDecorator(id, options) 中 [option.rules 的规则](getFieldDecorator(id, options)) | object[] | -
33 |
34 | 除上述属性以外，Login.UserName 还支持 antd.Input 的所有属性，并且自带默认的基础配置，包括 `placeholder` `size` `prefix` 等，这些基础配置均可被覆盖。
35 |
36 | ### Login.Password、Login.Mobile 同 Login.UserName
37 |
38 | ### Login.Captcha
39 |
40 | 参数 | 说明 | 类型 | 默认值
41 | ----|------|-----|------
42 | onGetCaptcha | 点击获取校验码的回调 | () => void | -
43 |
44 | 除上述属性以外，Login.Captcha 支持的属性与 Login.UserName 相同。
45 |
46 | ### Login.Submit
47 |
48 | 支持 antd.Button 的所有属性。
49 |
--------------------------------------------------------------------------------
/src/components/Login/map.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Input, Icon } from 'antd';
3 | import styles from './index.less';
4 |
5 | const map = {
6 | UserName: {
7 | component: Input,
8 | props: {
9 | size: 'large',
10 | prefix: {}
20 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/NoticeList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Avatar, List } from 'antd';
3 | import classNames from 'classnames';
4 | import styles from './NoticeList.less';
5 |
6 | export default function NoticeList({
7 | data = [],
8 | onClick,
9 | onClear,
10 | title,
11 | locale,
12 | emptyText,
13 | emptyImage,
14 | }) {
15 | if (data.length === 0) {
16 | return (
17 |
18 | {emptyImage ?
: null}
19 |
{emptyText || locale.emptyText}
20 |
25 |
26 | {data.map((item, i) => {
27 | const itemCls = classNames(styles.item, {
28 | [styles.read]: item.read,
29 | });
30 | return (
31 | onClick(item)}>
32 |
37 | {item.title}
38 |
{item.extra}
39 |
43 |
44 | {item.description}
45 |
46 |
{item.datetime}
47 |
51 | );
52 | })}
53 |
54 |
55 | {locale.clear}
56 | {title}
57 |
58 |
{
27 | public static Tab: typeof NoticeIconTab;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .popover {
4 | width: 336px;
5 | :global(.ant-popover-inner-content) {
6 | padding: 0;
7 | }
8 | }
9 |
10 | .noticeButton {
11 | cursor: pointer;
12 | display: inline-block;
13 | transition: all 0.3s;
14 | }
15 |
16 | .icon {
17 | font-size: 16px;
18 | padding: 4px;
19 | }
20 |
21 | .tabs {
22 | :global {
23 | .ant-tabs-nav-scroll {
24 | text-align: center;
25 | }
26 | .ant-tabs-bar {
27 | margin-bottom: 4px;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/NoticeIcon/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: NoticeIcon
4 | zh-CN: NoticeIcon
5 | subtitle: 通知菜单
6 | cols: 1
7 | order: 9
8 | ---
9 |
10 | 用在导航工具栏上，作为整个产品统一的通知中心。
11 |
12 | ## API
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | count | 图标上的消息总数 | number | -
17 | loading | 弹出卡片加载状态 | boolean | false
18 | onClear | 点击清空按钮的回调 | function(tabTitle) | -
19 | onItemClick | 点击列表项的回调 | function(item, tabProps) | -
20 | onTabChange | 切换页签的回调 | function(tabTitle) | -
21 | popupAlign | 弹出卡片的位置配置 | Object [alignConfig](https://github.com/yiminghe/dom-align#alignconfig-object-details) | -
22 | onPopupVisibleChange | 弹出卡片显隐的回调 | function(visible) | -
23 | popupVisible | 控制弹层显隐 | boolean | -
24 | locale | 默认文案 | Object | `{ emptyText: '暂无数据', clear: '清空' }`
25 |
26 | ### NoticeIcon.Tab
27 |
28 | 参数 | 说明 | 类型 | 默认值
29 | ----|------|-----|------
30 | title | 消息分类的页签标题 | string | -
31 | list | 列表数据，格式参照下表 | Array | `[]`
32 | emptyText | 针对每个 Tab 定制空数据文案 | ReactNode | -
33 | emptyImage | 针对每个 Tab 定制空数据图片 | string | -
34 |
35 | ### Tab data
36 |
37 | 参数 | 说明 | 类型 | 默认值
38 | ----|------|-----|------
39 | avatar | 头像图片链接 | string | -
40 | title | 标题 | ReactNode | -
41 | description | 描述信息 | ReactNode | -
42 | datetime | 时间戳 | ReactNode | -
43 | extra | 额外信息，在列表项右上角 | ReactNode | -
44 |
--------------------------------------------------------------------------------
/src/components/NumberInfo/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 演示
4 | ---
5 |
6 | 各种数据文案的展现方式。
7 |
8 | ````jsx
9 | import NumberInfo from 'ant-design-pro/lib/NumberInfo';
10 | import numeral from 'numeral';
11 |
12 | ReactDOM.render(
13 |
14 | 本周访问}
16 | total={numeral(12321).format('0,0')}
17 | status="up"
18 | subTotal={17.1}
19 | />
20 |
21 | , mountNode);
22 | ````
23 |
--------------------------------------------------------------------------------
/src/components/NumberInfo/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface INumberInfoProps {
3 | title?: React.ReactNode | string;
4 | subTitle?: React.ReactNode | string;
5 | total?: React.ReactNode | string;
6 | status?: 'up' | 'down';
7 | theme?: string;
8 | gap?: number;
9 | subTotal?: number;
10 | style?: React.CSSProperties;
11 | }
12 |
13 | export default class NumberInfo extends React.Component {}
14 |
--------------------------------------------------------------------------------
/src/components/NumberInfo/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon } from 'antd';
3 | import classNames from 'classnames';
4 | import styles from './index.less';
5 |
6 | export default ({ theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest }) => (
7 |
13 | {title &&
{title}
}
14 | {subTitle &&
{subTitle}
}
15 |
16 |
17 | {total}
18 | {suffix && {suffix} }
19 |
20 | {(status || subTotal) && (
21 |
22 | {subTotal}
23 | {status &&
25 | )}
26 |
27 |
13 |
段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
14 |
25 |
30 |
31 |
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 | }
19 |
20 | export default class PageHeader extends React.Component {}
21 |
--------------------------------------------------------------------------------
/src/components/PageHeader/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: PageHeader
4 | zh-CN: PageHeader
5 | subtitle: 页头
6 | cols: 1
7 | order: 11
8 | ---
9 |
10 | 页头用来声明页面的主题，包含了用户所关注的最重要的信息，使用户可以快速理解当前页面是什么以及它的功能。
11 |
12 | ## API
13 |
14 | | 参数 | 说明 | 类型 | 默认值 |
15 | |----------|------------------------------------------|-------------|-------|
16 | | title | title 区域 | ReactNode | - |
17 | | logo | logo区域 | ReactNode | - |
18 | | action | 操作区，位于 title 行的行尾 | ReactNode | - |
19 | | content | 内容区 | ReactNode | - |
20 | | extraContent | 额外内容区，位于content的右侧 | ReactNode | - |
21 | | breadcrumbList | 面包屑数据，配置了此属性时 `routes` `params` `location` `breadcrumbNameMap` 无效 | array<{title: ReactNode, href?: string}> | - |
22 | | routes | 面包屑相关属性，router 的路由栈信息 | object[] | - |
23 | | params | 面包屑相关属性，路由的参数 | object | - |
24 | | location | 面包屑相关属性，当前的路由信息 | object | - |
25 | | breadcrumbNameMap | 面包屑相关属性，路由的地址-名称映射表 | object | - |
26 | | tabList | tab 标题列表 | array<{key: string, tab: ReactNode}> | - |
27 | | tabActiveKey | 当前高亮的 tab 项 | string | - |
28 | | tabDefaultActiveKey | 默认高亮的 tab 项 | string | 第一项 |
29 | | onTabChange | 切换面板的回调 | (key) => void | - |
30 | | linkElement | 定义链接的元素，默认为 `a`，可传入 react-router 的 Link | string\|ReactElement | - |
31 |
32 | > 面包屑的配置方式有三种，一是直接配置 `breadcrumbList`，二是结合 `react-router@2` `react-router@3`，配置 `routes` 及 `params` 实现，类似 [面包屑 Demo](https://ant.design/components/breadcrumb-cn/#components-breadcrumb-demo-router)，三是结合 `react-router@4`，配置 `location` `breadcrumbNameMap`，优先级依次递减，脚手架中使用最后一种。 对于后两种用法，你也可以将 `routes` `params` 及 `location` `breadcrumbNameMap` 放到 context 中，组件会自动获取。
33 |
--------------------------------------------------------------------------------
/src/components/PageHeader/index.test.js:
--------------------------------------------------------------------------------
1 | import { getBreadcrumb } from './index';
2 | import { urlToList } from '../_utils/pathTools';
3 |
4 | const routerData = {
5 | '/dashboard/analysis': {
6 | name: '分析页',
7 | },
8 | '/userinfo': {
9 | name: '用户列表',
10 | },
11 | '/userinfo/:id': {
12 | name: '用户信息',
13 | },
14 | '/userinfo/:id/addr': {
15 | name: '收货订单',
16 | },
17 | };
18 | describe('test getBreadcrumb', () => {
19 | it('Simple url', () => {
20 | expect(getBreadcrumb(routerData, '/dashboard/analysis').name).toEqual('分析页');
21 | });
22 | it('Parameters url', () => {
23 | expect(getBreadcrumb(routerData, '/userinfo/2144').name).toEqual('用户信息');
24 | });
25 | it('The middle parameter url', () => {
26 | expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual('收货订单');
27 | });
28 | it('Loop through the parameters', () => {
29 | const urlNameList = urlToList('/userinfo/2144/addr').map(url => {
30 | return getBreadcrumb(routerData, url).name;
31 | });
32 | expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']);
33 | });
34 |
35 | it('a path', () => {
36 | const urlNameList = urlToList('/userinfo').map(url => {
37 | return getBreadcrumb(routerData, url).name;
38 | });
39 | expect(urlNameList).toEqual(['用户列表']);
40 | });
41 | it('Secondary path', () => {
42 | const urlNameList = urlToList('/userinfo/2144').map(url => {
43 | return getBreadcrumb(routerData, url).name;
44 | });
45 | expect(urlNameList).toEqual(['用户列表', '用户信息']);
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/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 |
返回修改 ;
29 |
30 | ReactDOM.render(
31 | 标题}
15 | description={结果描述
}
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:
22 |
{iconMap[type]}
23 |
{title}
24 | {description &&
{description}
}
25 | {extra &&
{extra}
}
26 | {actions &&
{actions}
}
27 |
{
14 | props.onCollapse(true);
15 | }}
16 | width="256px"
17 | >
18 |
20 | ) : (
21 |
14 | {title && (
15 |
16 | {title}
17 |
18 | )}
19 |
{children}
20 |
{}
9 |
--------------------------------------------------------------------------------
/src/components/TagSelect/demo/expandable.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title: 可展开和收起
4 | ---
5 |
6 | 使用 `expandable` 属性，让标签组可以收起，避免过高。
7 |
8 | ````jsx
9 | import TagSelect from 'ant-design-pro/lib/TagSelect';
10 |
11 | function handleFormSubmit(checkedValue) {
12 | console.log(checkedValue);
13 | }
14 |
15 | ReactDOM.render(
16 |
17 | 类目一
18 | 类目二
19 | 类目三
20 | 类目四
21 | 类目五
22 | 类目六
23 | 类目七
24 | 类目八
25 | 类目九
26 | 类目十
27 | 类目十一
28 | 类目十二
29 |
30 | , mountNode);
31 | ````
32 |
--------------------------------------------------------------------------------
/src/components/TagSelect/demo/simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 基础样例
4 | ---
5 |
6 | 结合 `Tag` 的 `TagSelect` 组件，方便的应用于筛选类目的业务场景中。
7 |
8 | ````jsx
9 | import TagSelect from 'ant-design-pro/lib/TagSelect';
10 |
11 | function handleFormSubmit(checkedValue) {
12 | console.log(checkedValue);
13 | }
14 |
15 | ReactDOM.render(
16 |
17 | 类目一
18 | 类目二
19 | 类目三
20 | 类目四
21 | 类目五
22 | 类目六
23 |
24 | , mountNode);
25 | ````
26 |
--------------------------------------------------------------------------------
/src/components/TagSelect/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import TagSelectOption from './TagSelectOption';
3 |
4 | export interface ITagSelectProps {
5 | onChange?: (value: string[]) => void;
6 | expandable?: boolean;
7 | value?: string[] | number[];
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export default class TagSelect extends React.Component {
12 | public static Option: typeof TagSelectOption;
13 | private children:
14 | | React.ReactElement
15 | | Array>;
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/TagSelect/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .tagSelect {
4 | user-select: none;
5 | margin-left: -8px;
6 | position: relative;
7 | overflow: hidden;
8 | max-height: 32px;
9 | line-height: 32px;
10 | transition: all 0.3s;
11 | :global {
12 | .ant-tag {
13 | padding: 0 8px;
14 | margin-right: 24px;
15 | font-size: @font-size-base;
16 | }
17 | }
18 | &.expanded {
19 | transition: all 0.3s;
20 | max-height: 200px;
21 | }
22 | .trigger {
23 | position: absolute;
24 | top: 0;
25 | right: 0;
26 | i {
27 | font-size: 12px;
28 | }
29 | }
30 | &.hasExpandTag {
31 | padding-right: 50px;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/TagSelect/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: TagSelect
4 | zh-CN: TagSelect
5 | subtitle: 标签选择器
6 | cols: 1
7 | order: 13
8 | ---
9 |
10 | 可进行多选，带折叠收起和展开更多功能，常用于对列表进行筛选。
11 |
12 | ## API
13 |
14 | ### TagSelect
15 |
16 | | 参数 | 说明 | 类型 | 默认值 |
17 | |----------|------------------------------------------|-------------|-------|
18 | | value |选中的项 |string[] \| number[] | |
19 | | defaultValue |默认选中的项 |string[] \| number[] | |
20 | | onChange | 标签选择的回调函数 | Function(checkedTags) | |
21 | | expandable | 是否展示 `展开/收起` 按钮 | Boolean | false |
22 |
23 |
24 | ### TagSelectOption
25 |
26 | | 参数 | 说明 | 类型 | 默认值 |
27 | |----------|------------------------------------------|-------------|-------|
28 | | value | TagSelect的值 | string\| number | - |
29 | | children | tag的内容 | string \| ReactNode | - |
30 |
--------------------------------------------------------------------------------
/src/components/Trend/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 演示
4 | ---
5 |
6 | 在数值背后添加一个小图标来标识涨跌情况。
7 |
8 | ````jsx
9 | import Trend from 'ant-design-pro/lib/Trend';
10 |
11 | ReactDOM.render(
12 |
13 | 12%
14 | 11%
15 |
16 | , mountNode);
17 | ````
18 |
--------------------------------------------------------------------------------
/src/components/Trend/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface ITrendProps {
4 | colorful?: boolean;
5 | flag: 'up' | 'down';
6 | style?: React.CSSProperties;
7 | }
8 |
9 | export default class Trend extends React.Component {}
10 |
--------------------------------------------------------------------------------
/src/components/Trend/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icon } from 'antd';
3 | import classNames from 'classnames';
4 | import styles from './index.less';
5 |
6 | const Trend = ({ colorful = true, flag, children, className, ...rest }) => {
7 | const classString = classNames(
8 | styles.trendItem,
9 | {
10 | [styles.trendItemGrey]: !colorful,
11 | },
12 | className
13 | );
14 | return (
15 |
16 | {children}
17 | {flag && (
18 |
19 |
21 | )}
22 |
23 | );
24 | };
25 |
26 | export default Trend;
27 |
--------------------------------------------------------------------------------
/src/components/Trend/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .trendItem {
4 | display: inline-block;
5 | font-size: @font-size-base;
6 | line-height: 22px;
7 |
8 | .up,
9 | .down {
10 | margin-left: 4px;
11 | position: relative;
12 | top: 1px;
13 | i {
14 | font-size: 12px;
15 | transform: scale(0.83);
16 | }
17 | }
18 | .up {
19 | color: @red-6;
20 | }
21 | .down {
22 | color: @green-6;
23 | top: -1px;
24 | }
25 |
26 | &.trendItemGrey .up,
27 | &.trendItemGrey .down {
28 | color: @text-color;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/Trend/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: Trend
4 | zh-CN: Trend
5 | subtitle: 趋势标记
6 | cols: 1
7 | order: 14
8 | ---
9 |
10 | 趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
11 |
12 | ## API
13 |
14 | ```html
15 | 50%
16 | ```
17 |
18 | | 参数 | 说明 | 类型 | 默认值 |
19 | |----------|------------------------------------------|-------------|-------|
20 | | colorful | 是否彩色标记 | Boolean | true |
21 | | flag | 上升下降标识：`up|down` | string | - |
22 |
--------------------------------------------------------------------------------
/src/components/_utils/pathTools.js:
--------------------------------------------------------------------------------
1 | // /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id']
2 | export function urlToList(url) {
3 | const urllist = url.split('/').filter(i => i);
4 | return urllist.map((urlItem, index) => {
5 | return `/${urllist.slice(0, index + 1).join('/')}`;
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/_utils/pathTools.test.js:
--------------------------------------------------------------------------------
1 | import { urlToList } from './pathTools';
2 |
3 | describe('test urlToList', () => {
4 | it('A path', () => {
5 | expect(urlToList('/userinfo')).toEqual(['/userinfo']);
6 | });
7 | it('Secondary path', () => {
8 | expect(urlToList('/userinfo/2144')).toEqual(['/userinfo', '/userinfo/2144']);
9 | });
10 | it('Three paths', () => {
11 | expect(urlToList('/userinfo/2144/addr')).toEqual([
12 | '/userinfo',
13 | '/userinfo/2144',
14 | '/userinfo/2144/addr',
15 | ]);
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/src/e2e/home.e2e.js:
--------------------------------------------------------------------------------
1 | import puppeteer from 'puppeteer';
2 |
3 | describe('Homepage', () => {
4 | it('it should have logo text', async () => {
5 | const browser = await puppeteer.launch();
6 | const page = await browser.newPage();
7 | await page.goto('http://localhost:8000');
8 | await page.waitForSelector('h1');
9 | const text = await page.evaluate(() => document.body.innerHTML);
10 | expect(text).toContain('Ant Tabs ');
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();
9 | });
10 |
11 | beforeEach(async () => {
12 | page = await browser.newPage();
13 | await page.goto('http://localhost:8000/#/user/login');
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.type('#userName', 'mockuser');
21 | await page.type('#password', 'wrong_password');
22 | await page.click('button[type="submit"]');
23 | await page.waitForSelector('.ant-alert-error'); // should display error
24 | });
25 |
26 | it('should login successfully', async () => {
27 | await page.type('#userName', 'admin');
28 | await page.type('#password', '888888');
29 | await page.click('button[type="submit"]');
30 | await page.waitForSelector('.ant-layout-sider h1'); // should display error
31 | const text = await page.evaluate(() => document.body.innerHTML);
32 | expect(text).toContain('Ant Tabs ');
33 | });
34 |
35 | afterAll(() => browser.close());
36 | });
37 |
--------------------------------------------------------------------------------
/src/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ant Tabs
9 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import '@babel/polyfill';
2 | import 'url-polyfill';
3 | import dva from 'dva';
4 |
5 | import createHistory from 'history/createHashHistory';
6 | // user BrowserHistory
7 | // import createHistory from 'history/createBrowserHistory';
8 | import createLoading from 'dva-loading';
9 | import 'moment/locale/zh-cn';
10 | import './rollbar';
11 |
12 | import './index.less';
13 | // 1. Initialize
14 | const app = dva({
15 | history: createHistory(),
16 | });
17 |
18 | // 2. Plugins
19 | app.use(createLoading());
20 |
21 | // 3. Register global model
22 | app.model(require('./models/global').default);
23 |
24 | // 4. Router
25 | app.router(require('./router').default);
26 |
27 | // 5. Start
28 | app.start('#root');
29 |
30 | export default app._store; // eslint-disable-line
31 |
--------------------------------------------------------------------------------
/src/layouts/BlankLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export default props =>
;
4 |
--------------------------------------------------------------------------------
/src/layouts/PageHeaderLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'dva/router';
3 | import PageHeader from '../components/PageHeader';
4 | import styles from './PageHeaderLayout.less';
5 |
6 | export default ({ children, wrapperClassName, top, ...restProps }) => (
7 |
8 | {top}
9 |
10 | {children ?
{children}
: null}
11 |
22 |
23 |
24 |
32 |
33 |
34 | );
35 | }
36 |
37 | export default RouterConfig;
38 |
--------------------------------------------------------------------------------
/src/routes/Component/Hooks.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import {Card, Button } from 'antd';
3 | function Hooks(props) {
4 | // Declare a new state variable, which we'll call "count"
5 | // console.log(props);
6 | const [count, setCount] = useState(0)
7 | const [width, setWithd] = useState(window.innerWidth);
8 | // Similar to componentDidMount and componentDidUpdate:
9 | useEffect(() => {
10 | // Update the document title using the browser API
11 | document.title = `You clicked ${count} times`;
12 | const handleResize = ()=>{
13 | setWithd(window.innerWidth);
14 | }
15 | window.addEventListener('resize', handleResize);
16 |
17 | // return () => (document.title = "前端精读");
18 |
19 | },[width]);
20 |
21 | return (
22 |
23 |
24 |
25 |
窗口宽度{ width }px
26 |
You clicked {count} times
27 |
setCount(count + 1)}>
28 | Click me
29 |
30 |
32 |
7 |
8 |
21 |
22 |
35 |
36 | );
37 |
--------------------------------------------------------------------------------
/src/routes/Component/Test.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/routes/Dashboard/Monitor.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .mapChart {
5 | padding-top: 24px;
6 | height: 457px;
7 | text-align: center;
8 | img {
9 | display: inline-block;
10 | max-width: 100%;
11 | max-height: 437px;
12 | }
13 | }
14 |
15 | .pieCard :global(.pie-stat) {
16 | font-size: 24px !important;
17 | }
18 |
19 | @media screen and (max-width: @screen-lg) {
20 | .mapChart {
21 | height: auto;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/routes/Exception/403.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link } from 'dva/router';
3 | import Exception from 'components/Exception';
4 |
5 | export default () => (
6 |
27 |
28 | this.triggerError(401)}>
29 | 触发401
30 |
31 | this.triggerError(403)}>
32 | 触发403
33 |
34 | this.triggerError(500)}>
35 | 触发500
36 |
37 | this.triggerError(404)}>
38 | 触发404
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/routes/Forms/StepForm/Step3.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import { connect } from 'dva';
3 | import { Button, Row, Col } from 'antd';
4 | import { routerRedux } from 'dva/router';
5 | import Result from 'components/Result';
6 | import styles from './style.less';
7 |
8 | class Step3 extends React.PureComponent {
9 | render() {
10 | const { dispatch, data } = this.props;
11 | const onFinish = () => {
12 | dispatch(routerRedux.push('/form/step-form'));
13 | };
14 | const information = (
15 |
16 |
17 |
22 |
23 |
28 |
29 |
34 |
35 | {data.amount} 元
40 |
41 |
42 |
43 | );
44 | const actions = (
45 |
46 |
47 | 再转一笔
48 |
49 | 查看账单
50 |
51 | );
52 | return (
53 |
34 |
35 |
36 |
37 |
41 |
42 | {getRoutes(match.path, routerData).map(item => (
43 |
53 |
54 |
55 |
56 | );
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/routes/Forms/StepForm/style.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .stepForm {
4 | margin: 40px auto 0;
5 | max-width: 500px;
6 | }
7 |
8 | .stepFormText {
9 | margin-bottom: 24px;
10 | :global {
11 | .ant-form-item-label,
12 | .ant-form-item-control {
13 | line-height: 22px;
14 | }
15 | }
16 | }
17 |
18 | .result {
19 | margin: 0 auto;
20 | max-width: 560px;
21 | padding: 24px 0 8px;
22 | }
23 |
24 | .desc {
25 | padding: 0 56px;
26 | color: @text-color-secondary;
27 | h3 {
28 | font-size: 16px;
29 | margin: 0 0 12px 0;
30 | color: @text-color-secondary;
31 | line-height: 32px;
32 | }
33 | h4 {
34 | margin: 0 0 4px 0;
35 | color: @text-color-secondary;
36 | font-size: 14px;
37 | line-height: 22px;
38 | }
39 | p {
40 | margin-top: 0;
41 | margin-bottom: 12px;
42 | line-height: 22px;
43 | }
44 | }
45 |
46 | @media screen and (max-width: @screen-md) {
47 | .desc {
48 | padding: 0;
49 | }
50 | }
51 |
52 | .information {
53 | line-height: 22px;
54 | :global {
55 | .ant-row:not(:last-child) {
56 | margin-bottom: 24px;
57 | }
58 | }
59 | .label {
60 | color: @heading-color;
61 | text-align: right;
62 | padding-right: 8px;
63 | }
64 | }
65 |
66 | .money {
67 | font-family: 'Helvetica Neue', sans-serif;
68 | font-weight: 500;
69 | font-size: 20px;
70 | line-height: 14px;
71 | }
72 |
73 | .uppercase {
74 | font-size: 12px;
75 | }
76 |
--------------------------------------------------------------------------------
/src/routes/Forms/style.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .card {
4 | margin-bottom: 24px;
5 | }
6 |
7 | .heading {
8 | font-size: 14px;
9 | line-height: 22px;
10 | margin: 0 0 16px 0;
11 | }
12 |
13 | .steps:global(.ant-steps) {
14 | max-width: 750px;
15 | margin: 16px auto;
16 | }
17 |
18 | .errorIcon {
19 | cursor: pointer;
20 | color: @error-color;
21 | margin-right: 24px;
22 | i {
23 | margin-right: 4px;
24 | }
25 | }
26 |
27 | .errorPopover {
28 | :global {
29 | .ant-popover-inner-content {
30 | padding: 0;
31 | max-height: 290px;
32 | overflow: auto;
33 | min-width: 256px;
34 | }
35 | }
36 | }
37 |
38 | .errorListItem {
39 | list-style: none;
40 | border-bottom: 1px solid @border-color-split;
41 | padding: 8px 16px;
42 | cursor: pointer;
43 | transition: all 0.3s;
44 | &:hover {
45 | background: @primary-1;
46 | }
47 | &:last-child {
48 | border: 0;
49 | }
50 | .errorIcon {
51 | color: @error-color;
52 | float: left;
53 | margin-top: 4px;
54 | margin-right: 12px;
55 | padding-bottom: 22px;
56 | }
57 | .errorField {
58 | font-size: 12px;
59 | color: @text-color-secondary;
60 | margin-top: 2px;
61 | }
62 | }
63 |
64 | .editable {
65 | td {
66 | padding-top: 13px !important;
67 | padding-bottom: 12.5px !important;
68 | }
69 | }
70 |
71 | // custom footer for fixed footer toolbar
72 | .advancedForm + div {
73 | padding-bottom: 64px;
74 | }
75 |
76 | .advancedForm {
77 | :global {
78 | .ant-form .ant-row:last-child .ant-form-item {
79 | margin-bottom: 24px;
80 | }
81 | .ant-table td {
82 | transition: none !important;
83 | }
84 | }
85 | }
86 |
87 | .optional {
88 | color: @text-color-secondary;
89 | font-style: normal;
90 | }
91 |
--------------------------------------------------------------------------------
/src/routes/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 |
3 | export default class Home extends Component {
4 | constructor(props){
5 | super(props);
6 |
7 | }
8 | componentDidMount() {
9 |
10 | }
11 |
12 | render() {
13 |
14 | return (
15 |
16 |
欢迎使用多标签Ant-Tabs
17 |
18 | );
19 | }
20 | }
21 |
22 |
--------------------------------------------------------------------------------
/src/routes/Libraries/BraftEditor.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react'
2 | import BraftEditor from 'braft-editor'
3 | import 'braft-editor/dist/index.css'
4 | import { Card } from 'antd';
5 |
6 | export default class BasicDemo extends Component {
7 | constructor(props){
8 | super(props);
9 |
10 | this.state = {
11 | editorState: BraftEditor.createEditorState('Hello World! MY Github 欢迎 Start（https://github.com/kuhami/react-ant-pro） 😉
'), // 设置编辑器初始内容
12 | outputHTML: '
'
13 | }
14 | }
15 |
16 | componentDidMount () {
17 | this.isLivinig = true
18 | // 3秒后更改编辑器内容
19 | // setTimeout(this.setEditorContentAsync, 3000)
20 | }
21 |
22 | componentWillUnmount () {
23 | this.isLivinig = false
24 | }
25 |
26 | handleChange = (editorState) => {
27 | this.setState({
28 | editorState: editorState,
29 | outputHTML: editorState.toHTML()
30 | })
31 | }
32 |
33 | setEditorContentAsync = () => {
34 | this.isLivinig && this.setState({
35 | editorState: BraftEditor.createEditorState('你好，世界!
')
36 | })
37 | }
38 |
39 | render () {
40 |
41 | const { editorState, outputHTML } = this.state
42 | const title = 富文本编译器（braft-editor）
43 | return (
44 |
45 |
46 |
51 | 输出内容
52 | {outputHTML}
53 |
54 | )
55 |
56 | }
57 |
58 | }
--------------------------------------------------------------------------------
/src/routes/Libraries/Drag/Basic.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 | import {render} from 'react-dom';
3 | import { Card } from 'antd';
4 | import {SortableContainer, SortableElement} from 'react-sortable-hoc';
5 | import arrayMove from 'array-move';
6 |
7 | const SortableItem = SortableElement(({value}) =>
{value} );
8 | const SortableList = SortableContainer(({items}) => {
9 | return (
10 |
11 | {items.map((value, index) => (
12 |
15 | );
16 | });
17 | export default class Basic extends Component {
18 | constructor(props){
19 | super(props);
20 | this.state = {
21 | items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
22 | }
23 | }
24 | componentDidMount() {
25 |
26 | }
27 | onSortEnd = ({oldIndex, newIndex}) => {
28 | this.setState(({items}) => ({
29 | items: arrayMove(items, oldIndex, newIndex),
30 | }));
31 | };
32 | render() {
33 | const title = 拖拽（react-sortable-hoc）
34 | return (
35 | );
37 | }
38 | }
39 |
40 |
--------------------------------------------------------------------------------
/src/routes/Libraries/Drag/Collections.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 | import {render} from 'react-dom';
3 | import { Card } from 'antd';
4 | import {sortableContainer, sortableElement} from 'react-sortable-hoc';
5 | import arrayMove from 'array-move';
6 |
7 | const SortableItem = sortableElement(({value}) => {value} );
8 |
9 | const SortableContainer = sortableContainer(({children}) => {
10 | return {children}
;
11 | });
12 | export default class Collections extends Component {
13 | constructor(props){
14 | super(props);
15 | this.state = {
16 | collections: [[0, 1, 2], [0, 1, 2, 3, 4], [0, 1, 2]],
17 | }
18 | }
19 |
20 | onSortEnd = ({oldIndex, newIndex, collection}) => {
21 | this.setState(({collections}) => {
22 | const newCollections = [...collections];
23 |
24 | newCollections[collection] = arrayMove(
25 | collections[collection],
26 | oldIndex,
27 | newIndex,
28 | );
29 |
30 | return {collections: newCollections};
31 | });
32 | };
33 | render() {
34 | const {collections} = this.state;
35 | return (
36 |
37 | {collections.map((items, index) => (
38 |
39 | LIST {index}
40 |
41 | {items.map((item, i) => (
42 |
50 |
51 | ))}
52 |
53 | );
54 | }
55 | }
56 |
57 |
--------------------------------------------------------------------------------
/src/routes/Libraries/Drag/DragHandle.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 | import {render} from 'react-dom';
3 | import { Card } from 'antd';
4 | import {
5 | sortableContainer,
6 | sortableElement,
7 | sortableHandle,} from 'react-sortable-hoc';
8 | import arrayMove from 'array-move';
9 |
10 | const DragHandles = sortableHandle(() => ::++:: );
11 |
12 | const SortableItem = sortableElement(({value}) => (
13 |
14 |
17 | ));
18 |
19 | const SortableContainer = sortableContainer(({children}) => {
20 | return ;
21 | });
22 | export default class DragHandle extends Component {
23 | constructor(props){
24 | super(props);
25 | this.state = {
26 | items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
27 | }
28 | }
29 |
30 | onSortEnd = ({oldIndex, newIndex}) => {
31 | this.setState(({items}) => ({
32 | items: arrayMove(items, oldIndex, newIndex),
33 | }));
34 | };
35 | render() {
36 | const {items} = this.state;
37 | return (
38 |
39 | {items.map((value, index) => (
40 |
43 | );
44 | }
45 | }
--------------------------------------------------------------------------------
/src/routes/Libraries/Drag/index.js:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 | import {render} from 'react-dom';
3 | import { Row,Card,Col } from 'antd';
4 | import Basic from './Basic.js'//DragHandle.js
5 | import Collections from './Collections.js'
6 | import DragHandle from './DragHandle.js'
7 |
8 | export default class Drag extends Component {
9 | constructor(props){
10 | super(props);
11 | this.state = {
12 | items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
13 | }
14 | }
15 | componentDidMount() {
16 |
17 | }
18 |
19 | render() {
20 |
21 | return (
22 |
);
32 | }
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/src/routes/List/Applications.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .filterCardList {
5 | margin-bottom: -24px;
6 | :global {
7 | .ant-card-meta-content {
8 | margin-top: 0;
9 | }
10 | // disabled white space
11 | .ant-card-meta-avatar {
12 | font-size: 0;
13 | }
14 | .ant-card-actions {
15 | background: #f7f9fa;
16 | }
17 | .ant-list .ant-list-item-content-single {
18 | max-width: 100%;
19 | }
20 | }
21 | .cardInfo {
22 | .clearfix();
23 | margin-top: 16px;
24 | margin-left: 40px;
25 | & > div {
26 | position: relative;
27 | text-align: left;
28 | float: left;
29 | width: 50%;
30 | p {
31 | line-height: 32px;
32 | font-size: 24px;
33 | margin: 0;
34 | }
35 | p:first-child {
36 | color: @text-color-secondary;
37 | font-size: 12px;
38 | line-height: 20px;
39 | margin-bottom: 4px;
40 | }
41 | }
42 | }
43 | }
44 |
45 | .wan {
46 | position: relative;
47 | top: -2px;
48 | font-size: @font-size-base;
49 | font-style: normal;
50 | line-height: 20px;
51 | margin-left: 2px;
52 | }
53 |
--------------------------------------------------------------------------------
/src/routes/List/Articles.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .listContent {
5 | .description {
6 | line-height: 22px;
7 | max-width: 720px;
8 | }
9 | .extra {
10 | color: @text-color-secondary;
11 | margin-top: 16px;
12 | line-height: 22px;
13 | & > :global(.ant-avatar) {
14 | vertical-align: top;
15 | margin-right: 8px;
16 | width: 20px;
17 | height: 20px;
18 | position: relative;
19 | top: 1px;
20 | }
21 | & > em {
22 | color: @disabled-color;
23 | font-style: normal;
24 | margin-left: 16px;
25 | }
26 | }
27 | }
28 | a.listItemMetaTitle {
29 | color: @heading-color;
30 | }
31 | .listItemExtra {
32 | width: 272px;
33 | height: 1px;
34 | }
35 | .selfTrigger {
36 | margin-left: 12px;
37 | }
38 |
39 | @media screen and (max-width: @screen-xs) {
40 | .selfTrigger {
41 | display: block;
42 | margin-left: 0;
43 | }
44 | .listContent {
45 | .extra {
46 | & > em {
47 | display: block;
48 | margin-left: 0;
49 | margin-top: 8px;
50 | }
51 | }
52 | }
53 | }
54 | @media screen and (max-width: @screen-md) {
55 | .selfTrigger {
56 | display: block;
57 | margin-left: 0;
58 | }
59 | }
60 | @media screen and (max-width: @screen-lg) {
61 | .listItemExtra {
62 | width: 0;
63 | height: 1px;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/routes/List/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { routerRedux, Route, Switch } from 'dva/router';
3 | import { connect } from 'dva';
4 | import { Input } from 'antd';
5 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
6 | import { getRoutes } from '../../utils/utils';
7 |
8 | @connect()
9 | export default class SearchList extends Component {
10 | handleTabChange = key => {
11 | const { dispatch, match } = this.props;
12 | switch (key) {
13 | case 'articles':
14 | dispatch(routerRedux.push(`${match.url}/articles`));
15 | break;
16 | case 'applications':
17 | dispatch(routerRedux.push(`${match.url}/applications`));
18 | break;
19 | case 'projects':
20 | dispatch(routerRedux.push(`${match.url}/projects`));
21 | break;
22 | default:
23 | break;
24 | }
25 | };
26 |
27 | render() {
28 | const tabList = [
29 | {
30 | key: 'articles',
31 | tab: '文章',
32 | },
33 | {
34 | key: 'applications',
35 | tab: '应用',
36 | },
37 | {
38 | key: 'projects',
39 | tab: '项目',
40 | },
41 | ];
42 |
43 | const mainSearch = (
44 |
45 |
53 | );
54 |
55 | const { match, routerData, location } = this.props;
56 | const routes = getRoutes(match.path, routerData);
57 |
58 | return (
59 |
66 |
67 | {routes.map(item => (
68 |
71 |
72 | );
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/routes/List/Projects.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 | @import '../../utils/utils.less';
3 |
4 | .coverCardList {
5 | margin-bottom: -24px;
6 |
7 | .card {
8 | :global {
9 | .ant-card-meta-title {
10 | margin-bottom: 4px;
11 | & > a {
12 | color: @heading-color;
13 | display: inline-block;
14 | max-width: 100%;
15 | }
16 | }
17 | .ant-card-meta-description {
18 | height: 44px;
19 | line-height: 22px;
20 | overflow: hidden;
21 | }
22 | }
23 |
24 | &:hover {
25 | :global {
26 | .ant-card-meta-title > a {
27 | color: @primary-color;
28 | }
29 | }
30 | }
31 | }
32 |
33 | .cardItemContent {
34 | display: flex;
35 | margin-top: 16px;
36 | margin-bottom: -4px;
37 | line-height: 20px;
38 | height: 20px;
39 | & > span {
40 | color: @text-color-secondary;
41 | flex: 1;
42 | font-size: 12px;
43 | }
44 | .avatarList {
45 | flex: 0 1 auto;
46 | }
47 | }
48 | .cardList {
49 | margin-top: 24px;
50 | }
51 |
52 | :global {
53 | .ant-list .ant-list-item-content-single {
54 | max-width: 100%;
55 | }
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/routes/List/TableList.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 | white-space: nowrap;
34 | margin-bottom: 24px;
35 | }
36 | }
37 |
38 | @media screen and (max-width: @screen-lg) {
39 | .tableListForm :global(.ant-form-item) {
40 | margin-right: 24px;
41 | }
42 | }
43 |
44 | @media screen and (max-width: @screen-md) {
45 | .tableListForm :global(.ant-form-item) {
46 | margin-right: 8px;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/routes/Profile/AdvancedProfile.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .headerList {
4 | margin-bottom: 4px;
5 | }
6 |
7 | .tabsCard {
8 | :global {
9 | .ant-card-head {
10 | padding: 0 16px;
11 | }
12 | }
13 | }
14 |
15 | .noData {
16 | color: @disabled-color;
17 | text-align: center;
18 | line-height: 64px;
19 | font-size: 16px;
20 | i {
21 | font-size: 24px;
22 | margin-right: 16px;
23 | position: relative;
24 | top: 3px;
25 | }
26 | }
27 |
28 | .heading {
29 | color: @heading-color;
30 | font-size: 20px;
31 | }
32 |
33 | .stepDescription {
34 | font-size: 14px;
35 | position: relative;
36 | left: 38px;
37 | & > div {
38 | margin-top: 8px;
39 | margin-bottom: 4px;
40 | }
41 | }
42 |
43 | .textSecondary {
44 | color: @text-color-secondary;
45 | }
46 |
47 | @media screen and (max-width: @screen-sm) {
48 | .stepDescription {
49 | left: 8px;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/routes/Profile/BasicProfile.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .title {
4 | color: @heading-color;
5 | font-size: 16px;
6 | font-weight: 500;
7 | margin-bottom: 16px;
8 | }
9 |
--------------------------------------------------------------------------------
/src/routes/Result/Error.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import { Button, Icon, Card } from 'antd';
3 | import Result from 'components/Result';
4 | import PageHeaderLayout from '../../layouts/PageHeaderLayout';
5 |
6 | const extra = (
7 |
8 |
16 | 您提交的内容有如下错误：
17 |
18 |
24 |
30 |
31 | );
32 |
33 | const actions = 返回修改 ;
34 |
35 | export default () => (
36 |
37 |
38 |
47 |
48 | );
49 |
--------------------------------------------------------------------------------
/src/routes/Result/Success.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import Success from './Success';
4 |
5 | it('renders with Result', () => {
6 | const wrapper = shallow(
23 |
28 | 你的账户：{location.state ? location.state.account : 'AntDesign@example.com'} 注册成功
29 | 
5 | 
31 |
46 |
53 | , mountNode);
54 | ````
55 |
56 |
76 |
--------------------------------------------------------------------------------
/src/components/PageHeader/demo/simple.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 3
3 | title: Simple
4 | ---
5 |
6 | 简单的页头。
7 |
8 | ````jsx
9 | import PageHeader from 'ant-design-pro/lib/PageHeader';
10 |
11 | const breadcrumbList = [{
12 | title: '一级菜单',
13 | href: '/',
14 | }, {
15 | title: '二级菜单',
16 | href: '/',
17 | }, {
18 | title: '三级菜单',
19 | }];
20 |
21 | ReactDOM.render(
22 |
23 |
25 | , mountNode);
26 | ````
27 |
28 |
33 |
--------------------------------------------------------------------------------
/src/components/PageHeader/demo/structure.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: Structure
4 | ---
5 |
6 | 基本结构，具备响应式布局功能，主要断点为 768px 和 576px，拖动窗口改变大小试试看。
7 |
8 | ````jsx
9 | import PageHeader from 'ant-design-pro/lib/PageHeader';
10 |
11 | const breadcrumbList = [{
12 | title: '面包屑',
13 | }];
14 |
15 | const tabList = [{
16 | key: '1',
17 | tab: '页签一',
18 | }, {
19 | key: '2',
20 | tab: '页签二',
21 | }, {
22 | key: '3',
23 | tab: '页签三',
24 | }];
25 |
26 | ReactDOM.render(
27 |
28 | }
31 | logo={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 | }
19 |
20 | export default class PageHeader extends React.Component
14 |
26 | );
27 |
28 | const actions = ;
29 |
30 | ReactDOM.render(
31 |
15 | 您提交的内容有如下错误：
16 |
17 |
18 |
21 |
22 |
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
22 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Result/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .result {
4 | text-align: center;
5 | width: 72%;
6 | margin: 0 auto;
7 |
8 | .icon {
9 | font-size: 72px;
10 | line-height: 72px;
11 | margin-bottom: 24px;
12 |
13 | & > .success {
14 | color: @success-color;
15 | }
16 |
17 | & > .error {
18 | color: @error-color;
19 | }
20 | }
21 |
22 | .title {
23 | font-size: 24px;
24 | color: @heading-color;
25 | font-weight: 500;
26 | line-height: 32px;
27 | margin-bottom: 16px;
28 | }
29 |
30 | .description {
31 | font-size: 14px;
32 | line-height: 22px;
33 | color: @text-color-secondary;
34 | margin-bottom: 24px;
35 | }
36 |
37 | .extra {
38 | background: #fafafa;
39 | padding: 24px 40px;
40 | border-radius: @border-radius-sm;
41 | text-align: left;
42 | }
43 |
44 | .actions {
45 | margin-top: 32px;
46 |
47 | button:not(:last-child) {
48 | margin-right: 8px;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/Result/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: Result
4 | zh-CN: Result
5 | subtitle: 处理结果
6 | cols: 1
7 | order: 12
8 | ---
9 |
10 | 结果页用于对用户进行的一系列任务处理结果进行反馈。
11 |
12 | ## API
13 |
14 | | 参数 | 说明 | 类型 | 默认值 |
15 | |----------|------------------------------------------|-------------|-------|
16 | | type | 类型，不同类型自带对应的图标 | Enum {'success', 'error'} | - |
17 | | title | 标题 | ReactNode | - |
18 | | description | 结果描述 | ReactNode | - |
19 | | extra | 补充信息，有默认的灰色背景 | ReactNode | - |
20 | | actions | 操作建议，推荐放置跳转链接，按钮组等 | ReactNode | - |
21 |
--------------------------------------------------------------------------------
/src/components/SiderMenu/SilderMenu.test.js:
--------------------------------------------------------------------------------
1 | import { getMeunMatcheys } from './SiderMenu';
2 |
3 | const meun = ['/dashboard', '/userinfo', '/dashboard/name', '/userinfo/:id', '/userinfo/:id/info'];
4 |
5 | describe('test meun match', () => {
6 | it('simple path', () => {
7 | expect(getMeunMatcheys(meun, '/dashboard')).toEqual(['/dashboard']);
8 | });
9 | it('error path', () => {
10 | expect(getMeunMatcheys(meun, '/dashboardname')).toEqual([]);
11 | });
12 |
13 | it('Secondary path', () => {
14 | expect(getMeunMatcheys(meun, '/dashboard/name')).toEqual(['/dashboard/name']);
15 | });
16 |
17 | it('Parameter path', () => {
18 | expect(getMeunMatcheys(meun, '/userinfo/2144')).toEqual(['/userinfo/:id']);
19 | });
20 |
21 | it('three parameter path', () => {
22 | expect(getMeunMatcheys(meun, '/userinfo/2144/info')).toEqual(['/userinfo/:id/info']);
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/src/components/SiderMenu/index.js:
--------------------------------------------------------------------------------
1 | import 'rc-drawer-menu/assets/index.css';
2 | import React from 'react';
3 | import DrawerMenu from 'rc-drawer-menu';
4 | import SiderMenu from './SiderMenu';
5 |
6 | export default props =>
7 | props.isMobile ? (
8 | {iconMap[type]}
23 | {title}
24 | {description && {description}}
25 | {extra && {extra}}
26 | {actions && {actions}}
27 |
14 | {title && (
15 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/components/StandardFormRow/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .standardFormRow {
4 | border-bottom: 1px dashed @border-color-split;
5 | padding-bottom: 16px;
6 | margin-bottom: 16px;
7 | display: flex;
8 | :global {
9 | .ant-form-item {
10 | margin-right: 24px;
11 | }
12 | .ant-form-item-label label {
13 | color: @text-color;
14 | margin-right: 0;
15 | }
16 | .ant-form-item-label,
17 | .ant-form-item-control {
18 | padding: 0;
19 | line-height: 32px;
20 | }
21 | }
22 | .label {
23 | color: @heading-color;
24 | font-size: @font-size-base;
25 | margin-right: 24px;
26 | flex: 0 0 auto;
27 | text-align: right;
28 | & > span {
29 | display: inline-block;
30 | height: 32px;
31 | line-height: 32px;
32 | &:after {
33 | content: '：';
34 | }
35 | }
36 | }
37 | .content {
38 | flex: 1 1 0;
39 | :global {
40 | .ant-form-item:last-child {
41 | margin-right: 0;
42 | }
43 | }
44 | }
45 | }
46 |
47 | .standardFormRowLast {
48 | border: none;
49 | padding-bottom: 0;
50 | margin-bottom: 0;
51 | }
52 |
53 | .standardFormRowBlock {
54 | :global {
55 | .ant-form-item,
56 | div.ant-form-item-control-wrapper {
57 | display: block;
58 | }
59 | }
60 | }
61 |
62 | .standardFormRowGrid {
63 | :global {
64 | .ant-form-item,
65 | div.ant-form-item-control-wrapper {
66 | display: block;
67 | }
68 | .ant-form-item-label {
69 | float: left;
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/StandardTable/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .standardTable {
4 | :global {
5 | .ant-table-pagination {
6 | margin-top: 24px;
7 | }
8 | }
9 |
10 | .tableAlert {
11 | margin-bottom: 16px;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/TagSelect/TagSelectOption.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface ITagSelectOptionProps {
4 | value: string | number;
5 | style?: React.CSSProperties;
6 | }
7 |
8 | export default class TagSelectOption extends React.Component
16 | {title}
17 |
18 | )}
19 | {children}
20 |
13 |
16 | , mountNode);
17 | ````
18 |
--------------------------------------------------------------------------------
/src/components/Trend/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface ITrendProps {
4 | colorful?: boolean;
5 | flag: 'up' | 'down';
6 | style?: React.CSSProperties;
7 | }
8 |
9 | export default class Trend extends React.Component
16 | {children}
17 | {flag && (
18 |
19 |
23 | );
24 | };
25 |
26 | export default Trend;
27 |
--------------------------------------------------------------------------------
/src/components/Trend/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .trendItem {
4 | display: inline-block;
5 | font-size: @font-size-base;
6 | line-height: 22px;
7 |
8 | .up,
9 | .down {
10 | margin-left: 4px;
11 | position: relative;
12 | top: 1px;
13 | i {
14 | font-size: 12px;
15 | transform: scale(0.83);
16 | }
17 | }
18 | .up {
19 | color: @red-6;
20 | }
21 | .down {
22 | color: @green-6;
23 | top: -1px;
24 | }
25 |
26 | &.trendItemGrey .up,
27 | &.trendItemGrey .down {
28 | color: @text-color;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/Trend/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: Trend
4 | zh-CN: Trend
5 | subtitle: 趋势标记
6 | cols: 1
7 | order: 14
8 | ---
9 |
10 | 趋势符号，标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。
11 |
12 | ## API
13 |
14 | ```html
15 | 
快速开始
17 | 
产品简介
20 | 
产品文档
23 |