unAccessible
,
+ // 增加一个 loading 的状态
+ childrenRender: (children, props) => {
+ // if (initialState?.loading) return {
+ setSearchMode(true);
+ if (searchMode && inputRef.current) {
+ inputRef.current.focus();
+ }
+ }}
+ onTransitionEnd={({ propertyName }) => {
+ if (propertyName === 'width' && !searchMode) {
+ if (onVisibleChange) {
+ onVisibleChange(searchMode);
+ }
+ }
+ }}
+ >
+ setValue(completeValue)}
+ >
+ {
+ if (e.key === 'Enter') {
+ if (restProps.onSearch) {
+ restProps.onSearch(value);
+ }
+ }
+ }}
+ onBlur={() => {
+ setSearchMode(false);
+ }}
+ />
+
+
+ );
+};
+
+export default HeaderSearch;
diff --git a/demo/src/components/NoticeIcon/NoticeIcon.tsx b/demo/src/components/NoticeIcon/NoticeIcon.tsx
new file mode 100644
index 00000000..7a530c05
--- /dev/null
+++ b/demo/src/components/NoticeIcon/NoticeIcon.tsx
@@ -0,0 +1,126 @@
+import { BellOutlined } from '@ant-design/icons';
+import { Badge, Spin, Tabs } from 'antd';
+import useMergedState from 'rc-util/es/hooks/useMergedState';
+import React from 'react';
+import classNames from 'classnames';
+import type { NoticeIconTabProps } from './NoticeList';
+import NoticeList from './NoticeList';
+import HeaderDropdown from '../HeaderDropdown';
+import styles from './index.less';
+
+const { TabPane } = Tabs;
+
+export type NoticeIconProps = {
+ count?: number;
+ bell?: React.ReactNode;
+ className?: string;
+ loading?: boolean;
+ onClear?: (tabName: string, tabKey: string) => void;
+ onItemClick?: (item: API.NoticeIconItem, tabProps: NoticeIconTabProps) => void;
+ onViewMore?: (tabProps: NoticeIconTabProps, e: MouseEvent) => void;
+ onTabChange?: (tabTile: string) => void;
+ style?: React.CSSProperties;
+ onPopupVisibleChange?: (visible: boolean) => void;
+ popupVisible?: boolean;
+ clearText?: string;
+ viewMoreText?: string;
+ clearClose?: boolean;
+ emptyImage?: string;
+ children?: React.ReactElement
+ 
+
+ );
+ }
+ return (
+
+ {emptyText}
+
+
+ className={styles.list}
+ dataSource={list}
+ renderItem={(item, i) => {
+ const itemCls = classNames(styles.item, {
+ [styles.read]: item.read,
+ });
+ // eslint-disable-next-line no-nested-ternary
+ const leftIcon = item.avatar ? (
+ typeof item.avatar === 'string' ? (
+ {
+ onClick?.(item);
+ }}
+ >
+
+ {item.title}
+
+ }
+ description={
+ {item.extra}
+
+
+ }
+ />
+
+ );
+ }}
+ />
+ {item.description}
+ {item.datetime}
+
+ {showClear ? (
+
+
+ );
+};
+
+export default NoticeList;
diff --git a/demo/src/components/NoticeIcon/index.less b/demo/src/components/NoticeIcon/index.less
new file mode 100644
index 00000000..a2e44f15
--- /dev/null
+++ b/demo/src/components/NoticeIcon/index.less
@@ -0,0 +1,35 @@
+@import (reference) '~antd/es/style/themes/index';
+
+.popover {
+ position: relative;
+ width: 336px;
+}
+
+.noticeButton {
+ display: inline-block;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+.icon {
+ padding: 4px;
+ vertical-align: middle;
+}
+
+.badge {
+ font-size: 16px;
+}
+
+.tabs {
+ :global {
+ .ant-tabs-nav-list {
+ margin: auto;
+ }
+
+ .ant-tabs-nav-scroll {
+ text-align: center;
+ }
+ .ant-tabs-nav {
+ margin-bottom: 0;
+ }
+ }
+}
diff --git a/demo/src/components/NoticeIcon/index.tsx b/demo/src/components/NoticeIcon/index.tsx
new file mode 100644
index 00000000..326a363b
--- /dev/null
+++ b/demo/src/components/NoticeIcon/index.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { Tag, message } from 'antd';
+import { groupBy } from 'lodash';
+import moment from 'moment';
+import { useModel, useRequest } from 'umi';
+import { getNotices } from '@/services/ant-design-pro/api';
+
+import NoticeIcon from './NoticeIcon';
+import styles from './index.less';
+
+export type GlobalHeaderRightProps = {
+ fetchingNotices?: boolean;
+ onNoticeVisibleChange?: (visible: boolean) => void;
+ onNoticeClear?: (tabName?: string) => void;
+};
+
+const getNoticeData = (notices: API.NoticeIconItem[]): Record
+ {clearText} {title}
+
+ ) : null}
+ {showViewMore ? (
+ {
+ if (onViewMore) {
+ onViewMore(e);
+ }
+ }}
+ >
+ {viewMoreText}
+
+ ) : null}
+ + Want to add more pages? Please refer to{' '} + + use block + + 。 +
+
+
+ {children}
+
+
+);
+
+const Welcome: React.FC = () => {
+ const intl = useIntl();
+
+ return (
+
+
+ );
+ return (
+
+
+ 活跃用户
+{activeUser}
+
+
+ 新增用户
+{newUser}
+
+
+
+
+ );
+};
+
+AvatarList.Item = Item;
+
+export default AvatarList;
diff --git a/demo/src/pages/account/center/components/Projects/index.less b/demo/src/pages/account/center/components/Projects/index.less
new file mode 100644
index 00000000..bfa61475
--- /dev/null
+++ b/demo/src/pages/account/center/components/Projects/index.less
@@ -0,0 +1,54 @@
+@import '~antd/es/style/themes/default.less';
+
+.coverCardList {
+ .card {
+ :global {
+ .ant-card-meta-title {
+ margin-bottom: 4px;
+ & > a {
+ display: inline-block;
+ max-width: 100%;
+ color: @heading-color;
+ }
+ }
+ .ant-card-meta-description {
+ height: 44px;
+ overflow: hidden;
+ line-height: 22px;
+ }
+ }
+
+ &:hover {
+ :global {
+ .ant-card-meta-title > a {
+ color: @primary-color;
+ }
+ }
+ }
+ }
+
+ .cardItemContent {
+ display: flex;
+ height: 20px;
+ margin-top: 16px;
+ margin-bottom: -4px;
+ line-height: 20px;
+ & > span {
+ flex: 1;
+ color: @text-color-secondary;
+ font-size: 12px;
+ }
+ .avatarList {
+ flex: 0 1 auto;
+ }
+ }
+ .cardList {
+ margin-top: 24px;
+ }
+
+ :global {
+ .ant-list .ant-list-item-content-single {
+ max-width: 100%;
+ }
+ }
+}
diff --git a/demo/src/pages/account/center/components/Projects/index.tsx b/demo/src/pages/account/center/components/Projects/index.tsx
new file mode 100644
index 00000000..a03c383d
--- /dev/null
+++ b/demo/src/pages/account/center/components/Projects/index.tsx
@@ -0,0 +1,49 @@
+import { Card, List } from 'antd';
+import { useRequest } from 'umi';
+import React from 'react';
+import moment from 'moment';
+import { queryFakeList } from '../../service';
+import AvatarList from '../AvatarList';
+import type { ListItemDataType } from '../../data.d';
+import styles from './index.less';
+
+const Projects: React.FC = () => {
+ // 获取tab列表数据
+ const { data: listData } = useRequest(() => {
+ return queryFakeList({
+ count: 30,
+ });
+ });
+
+ return (
+ - {childrenWithProps}
+ {moment(item.updatedAt).fromNow()}
+
+
+
+
+ {item.members.map((member) => (
+
+
+
+ {item.label}
+ ))}
+ {inputVisible && (
+
+ )}
+ {!inputVisible && (
+
+
+ )}
+
+ );
+};
+
+const Center: React.FC标签
+ {(tags || []).concat(newTags).map((item) => (
+
+
+ );
+ };
+
+ // 渲染tab切换
+ const renderChildrenByTabKey = (tabValue: tabKeyType) => {
+ if (tabValue === 'projects') {
+ return
+
+
+
+
+ )}
+
+ 
+
+ {renderUserInfo(currentUser)}
+ {currentUser.name}
+ {currentUser?.signature}
+
+
+ {currentUser.notice &&
+ currentUser.notice.map((item) => (
+
+
+ 团队
+ 头像
+
+ 
+
+
+
+
+
+ {loading ? null : (
+ <>
+
+ );
+};
+
+export default BaseView;
diff --git a/demo/src/pages/account/settings/components/binding.tsx b/demo/src/pages/account/settings/components/binding.tsx
new file mode 100644
index 00000000..002c4596
--- /dev/null
+++ b/demo/src/pages/account/settings/components/binding.tsx
@@ -0,0 +1,46 @@
+import { AlipayOutlined, DingdingOutlined, TaobaoOutlined } from '@ant-design/icons';
+import { List } from 'antd';
+import React, { Fragment } from 'react';
+
+const BindingView: React.FC = () => {
+ const getData = () => [
+ {
+ title: '绑定淘宝',
+ description: '当前未绑定淘宝账号',
+ actions: [绑定],
+ avatar:
+ dom[1],
+ }}
+ initialValues={{
+ ...currentUser,
+ phone: currentUser?.phone.split('-'),
+ }}
+ hideRequiredMark
+ >
+
+ {
+ return queryProvince().then(({ data }) => {
+ return data.map((item) => {
+ return {
+ label: item.name,
+ value: item.id,
+ };
+ });
+ });
+ }}
+ />
+
+ {({ province }) => {
+ return (
+ {
+ if (!province?.key) {
+ return [];
+ }
+ return queryCity(province.key || '').then(({ data }) => {
+ return data.map((item) => {
+ return {
+ label: item.name,
+ value: item.id,
+ };
+ });
+ });
+ }}
+ />
+ );
+ }}
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ - (
+
{
+ if (ref) {
+ dom.current = ref;
+ }
+ }}
+ >
+
+
+
+
+
+
+ {menuMap[initConfig.selectKey]}
+ {renderChildren()}
+
+
+ );
+ }
+}
+
+export default autoHeight()(Bar);
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less b/demo/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less
new file mode 100644
index 00000000..d7bf6dda
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/ChartCard/index.less
@@ -0,0 +1,75 @@
+@import '~antd/es/style/themes/default.less';
+
+.chartCard {
+ position: relative;
+ .chartTop {
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+ }
+ .chartTopMargin {
+ margin-bottom: 12px;
+ }
+ .chartTopHasMargin {
+ margin-bottom: 20px;
+ }
+ .metaWrap {
+ float: left;
+ }
+ .avatar {
+ position: relative;
+ top: 4px;
+ float: left;
+ margin-right: 20px;
+ img {
+ border-radius: 100%;
+ }
+ }
+ .meta {
+ height: 22px;
+ color: @text-color-secondary;
+ font-size: @font-size-base;
+ line-height: 22px;
+ }
+ .action {
+ position: absolute;
+ top: 4px;
+ right: 0;
+ line-height: 1;
+ cursor: pointer;
+ }
+ .total {
+ height: 38px;
+ margin-top: 4px;
+ margin-bottom: 0;
+ overflow: hidden;
+ color: @heading-color;
+ font-size: 30px;
+ line-height: 38px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+ }
+ .content {
+ position: relative;
+ width: 100%;
+ margin-bottom: 12px;
+ }
+ .contentFixed {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ }
+ .footer {
+ margin-top: 8px;
+ padding-top: 9px;
+ border-top: 1px solid @border-color-split;
+ & > * {
+ position: relative;
+ }
+ }
+ .footerMargin {
+ margin-top: 20px;
+ }
+}
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
new file mode 100644
index 00000000..e860582d
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/ChartCard/index.tsx
@@ -0,0 +1,97 @@
+import { Card } from 'antd';
+import type { CardProps } from 'antd/es/card';
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+type totalType = () => React.ReactNode;
+
+const renderTotal = (total?: number | totalType | React.ReactNode) => {
+ if (!total && total !== 0) {
+ return null;
+ }
+ let totalDom;
+ switch (typeof total) {
+ case 'undefined':
+ totalDom = null;
+ break;
+ case 'function':
+ totalDom =
+ {title &&
+
+
+ {title}
} +{total()}
;
+ break;
+ default:
+ totalDom = {total}
;
+ }
+ return totalDom;
+};
+
+export type ChartCardProps = {
+ title: React.ReactNode;
+ action?: React.ReactNode;
+ total?: React.ReactNode | number | (() => React.ReactNode | number);
+ footer?: React.ReactNode;
+ contentHeight?: number;
+ avatar?: React.ReactNode;
+ style?: React.CSSProperties;
+} & CardProps;
+
+class ChartCard extends React.Component
+
+ );
+ };
+
+ render() {
+ const {
+ loading = false,
+ contentHeight,
+ title,
+ avatar,
+ action,
+ total,
+ footer,
+ children,
+ ...rest
+ } = this.props;
+ return (
+
+
+ {children && (
+ {avatar}
+
+
+
+ {title}
+ {action}
+
+ {renderTotal(total)}
+
+
+ )}
+ {footer && (
+ {children}
+
+ {footer}
+
+ )}
+
+ {label}
+ {value}
+
+);
+
+export default Field;
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/Gauge/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/Gauge/index.tsx
new file mode 100644
index 00000000..b3e5047a
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/Gauge/index.tsx
@@ -0,0 +1,179 @@
+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+
+const { Arc, Html, Line } = Guide;
+
+export type GaugeProps = {
+ title: React.ReactNode;
+ color?: string;
+ height?: number;
+ bgColor?: number;
+ percent: number;
+ forceFit?: boolean;
+ style?: React.CSSProperties;
+ formatter: (value: string) => string;
+};
+
+const defaultFormatter = (val: string): string => {
+ switch (val) {
+ case '2':
+ return '差';
+ case '4':
+ return '中';
+ case '6':
+ return '良';
+ case '8':
+ return '优';
+ default:
+ return '';
+ }
+};
+
+if (Shape.registerShape) {
+ Shape.registerShape('point', 'pointer', {
+ drawShape(cfg: any, group: any) {
+ let point = cfg.points[0];
+ point = (this as any).parsePoint(point);
+ const center = (this as any).parsePoint({
+ x: 0,
+ y: 0,
+ });
+ group.addShape('line', {
+ attrs: {
+ x1: center.x,
+ y1: center.y,
+ x2: point.x,
+ y2: point.y,
+ stroke: cfg.color,
+ lineWidth: 2,
+ lineCap: 'round',
+ },
+ });
+ return group.addShape('circle', {
+ attrs: {
+ x: center.x,
+ y: center.y,
+ r: 6,
+ stroke: cfg.color,
+ lineWidth: 3,
+ fill: '#fff',
+ },
+ });
+ },
+ });
+}
+
+const Gauge: React.FC
+
`;
+ const textStyle: {
+ fontSize: number;
+ fill: string;
+ textAlign: 'center';
+ } = {
+ fontSize: 12,
+ fill: 'rgba(0, 0, 0, 0.65)',
+ textAlign: 'center',
+ };
+
+ return (
+ ${title}
+
+ ${(data[0].value * 10).toFixed(2)}%
+
+
+
+ );
+};
+
+export default autoHeight()(MiniArea);
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx
new file mode 100644
index 00000000..46be2760
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/MiniBar/index.tsx
@@ -0,0 +1,54 @@
+import { Chart, Geom, Tooltip } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+import styles from '../index.less';
+
+export type MiniBarProps = {
+ color?: string;
+ height?: number;
+ data: {
+ x: number | string;
+ y: number;
+ }[];
+ forceFit?: boolean;
+ style?: React.CSSProperties;
+};
+
+const MiniBar: React.FC
+ {height > 0 && (
+
+
+ )}
+
+
+
+ );
+};
+export default autoHeight()(MiniBar);
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx
new file mode 100644
index 00000000..ad0a2d2e
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/MiniProgress/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+import styles from './index.less';
+
+export type MiniProgressProps = {
+ target: number;
+ targetLabel?: string;
+ color?: string;
+ strokeWidth?: number;
+ percent?: number;
+ style?: React.CSSProperties;
+};
+
+const MiniProgress: React.FC
+
+
+
+
+
+
+
+);
+
+export default MiniProgress;
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
new file mode 100644
index 00000000..e996c1e3
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/Pie/index.tsx
@@ -0,0 +1,309 @@
+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import { DataView } from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import { Divider } from 'antd';
+import ReactFitText from 'react-fittext';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+export type PieProps = {
+ animate?: boolean;
+ color?: string;
+ colors?: string[];
+ selected?: boolean;
+ height?: number;
+ margin?: [number, number, number, number];
+ hasLegend?: boolean;
+ padding?: [number, number, number, number];
+ percent?: number;
+ data?: {
+ x: string | string;
+ y: number;
+ }[];
+ inner?: number;
+ lineWidth?: number;
+ forceFit?: boolean;
+ style?: React.CSSProperties;
+ className?: string;
+ total?: React.ReactNode | number | (() => React.ReactNode | number);
+ title?: React.ReactNode;
+ tooltip?: boolean;
+ valueFormat?: (value: string) => string | React.ReactNode;
+ subTitle?: React.ReactNode;
+};
+type PieState = {
+ legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
+ legendBlock: boolean;
+};
+class Pie extends Component
+
+
+
+
+
+
+
+
+
+
+ {hasLegend && (
+
+ );
+ }
+}
+
+export default autoHeight()(Pie);
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx
new file mode 100644
index 00000000..56e8df47
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/TagCloud/index.tsx
@@ -0,0 +1,212 @@
+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import DataSet from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-underscore-dangle: 0 */
+/* eslint no-param-reassign: 0 */
+
+const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
+
+export type TagCloudProps = {
+ data: {
+ name: string;
+ value: number;
+ }[];
+ height?: number;
+ className?: string;
+ style?: React.CSSProperties;
+};
+
+type TagCloudState = {
+ dv: any;
+ height?: number;
+ width: number;
+};
+
+class TagCloud extends Component
+
+ {!!tooltip &&
+
+ {(subTitle || total) && (
+
+
+ {subTitle &&
+ )}
+ {subTitle}
} + {/* eslint-disable-next-line */} + {total && ( +{typeof total === 'function' ? total() : total}
+ )}
+ -
+ {legendData.map((item, i) => (
+
- this.handleLegendClick(item, i)}>
+
+ {item.x}
+
+ + {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`} + + {valueFormat ? valueFormat(item.y) : item.y} +
+ ))}
+
+ {dv && (
+
+
+ )}
+
+ );
+ }
+}
+
+export default autoHeight()(TagCloud);
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
new file mode 100644
index 00000000..fa17bfa7
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/TimelineChart/index.tsx
@@ -0,0 +1,132 @@
+import { Axis, Chart, Geom, Legend, Tooltip } from 'bizcharts';
+
+import DataSet from '@antv/data-set';
+import React from 'react';
+import Slider from 'bizcharts-plugin-slider';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+export type TimelineChartProps = {
+ data: {
+ x: number;
+ y1: number;
+ y2: number;
+ }[];
+ title?: string;
+ titleMap: { y1: string; y2: string };
+ padding?: [number, number, number, number];
+ height?: number;
+ style?: React.CSSProperties;
+ borderWidth?: number;
+};
+
+const TimelineChart: React.FC
+
+ );
+};
+
+export default autoHeight()(TimelineChart);
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
new file mode 100644
index 00000000..a9b64110
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/WaterWave/index.tsx
@@ -0,0 +1,235 @@
+import React, { Component } from 'react';
+
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-return-assign: 0 */
+/* eslint no-mixed-operators: 0 */
+// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
+
+export type WaterWaveProps = {
+ title: React.ReactNode;
+ color?: string;
+ height?: number;
+ percent: number;
+ style?: React.CSSProperties;
+};
+
+class WaterWave extends Component
+ {title &&
+
+
+ {title}
} +
+
+ (this.root = n)}
+ style={{ transform: `scale(${radio})` }}
+ >
+
+ );
+ }
+}
+
+export default autoHeight()(WaterWave);
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/autoHeight.tsx b/demo/src/pages/dashboard/analysis/components/Charts/autoHeight.tsx
new file mode 100644
index 00000000..5ec7bf39
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/autoHeight.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+export type IReactComponent
+
+
+ {title && {title}}
+
+ {percent}%
+= + | React.StatelessComponent
+ | React.ComponentClass
+ | React.ClassicComponentClass
; + +function computeHeight(node: HTMLDivElement) { + const { style } = node; + style.height = '100%'; + const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10); + const padding = + parseInt(`${getComputedStyle(node).paddingTop}`, 10) + + parseInt(`${getComputedStyle(node).paddingBottom}`, 10); + return totalHeight - padding; +} + +function getAutoHeight(n: HTMLDivElement | undefined) { + if (!n) { + return 0; + } + + const node = n; + + let height = computeHeight(node); + const parentNode = node.parentNode as HTMLDivElement; + if (parentNode) { + height = computeHeight(parentNode); + } + + return height; +} + +type AutoHeightProps = { + height?: number; +}; + +function autoHeight() { + return
( + WrappedComponent: React.ComponentClass
| React.FC
, + ): React.ComponentClass
=> { + class AutoHeightComponent extends React.Component
{ + state = { + computedHeight: 0, + }; + + root: HTMLDivElement | undefined = undefined; + + componentDidMount() { + const { height } = this.props; + if (!height) { + let h = getAutoHeight(this.root); + this.setState({ computedHeight: h }); + if (h < 1) { + h = getAutoHeight(this.root); + this.setState({ computedHeight: h }); + } + } + } + + handleRoot = (node: HTMLDivElement) => { + this.root = node; + }; + + render() { + const { height } = this.props; + const { computedHeight } = this.state; + const h = height || computedHeight; + return ( +
+ {h > 0 &&
+ );
+ }
+ }
+ return AutoHeightComponent;
+ };
+}
+export default autoHeight;
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/index.less b/demo/src/pages/dashboard/analysis/components/Charts/index.less
new file mode 100644
index 00000000..190428bc
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/index.less
@@ -0,0 +1,19 @@
+.miniChart {
+ position: relative;
+ width: 100%;
+ .chartContent {
+ position: absolute;
+ bottom: -28px;
+ width: 100%;
+ > div {
+ margin: 0 -5px;
+ overflow: hidden;
+ }
+ }
+ .chartLoading {
+ position: absolute;
+ top: 16px;
+ left: 50%;
+ margin-left: -7px;
+ }
+}
diff --git a/demo/src/pages/dashboard/analysis/components/Charts/index.tsx b/demo/src/pages/dashboard/analysis/components/Charts/index.tsx
new file mode 100644
index 00000000..7ad687f0
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/Charts/index.tsx
@@ -0,0 +1,13 @@
+import numeral from 'numeral';
+import ChartCard from './ChartCard';
+import Field from './Field';
+
+const yuan = (val: number | string) => `¥ ${numeral(val).format('0,0')}`;
+
+const Charts = {
+ yuan,
+ ChartCard,
+ Field,
+};
+
+export { Charts as default, yuan, ChartCard, Field };
diff --git a/demo/src/pages/dashboard/analysis/components/IntroduceRow.tsx b/demo/src/pages/dashboard/analysis/components/IntroduceRow.tsx
new file mode 100644
index 00000000..cf0f3fd0
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/IntroduceRow.tsx
@@ -0,0 +1,135 @@
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { TinyArea, TinyColumn, Progress } from '@ant-design/charts';
+import { Col, Row, Tooltip } from 'antd';
+
+import numeral from 'numeral';
+import { ChartCard, Field } from './Charts';
+import type { DataItem } from '../data.d';
+import Trend from './Trend';
+import Yuan from '../utils/Yuan';
+import styles from '../style.less';
+
+const topColResponsiveProps = {
+ xs: 24,
+ sm: 12,
+ md: 12,
+ lg: 12,
+ xl: 6,
+ style: { marginBottom: 24 },
+};
+
+const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: DataItem[] }) => (
+
+
+ 周同比
+ 12%
+
+
+ 日同比
+ 11%
+
+
+ }
+ contentHeight={46}
+ >
+
+
+ {title && (
+
+);
+
+export default NumberInfo;
diff --git a/demo/src/pages/dashboard/analysis/components/OfflineData.tsx b/demo/src/pages/dashboard/analysis/components/OfflineData.tsx
new file mode 100644
index 00000000..eca987bd
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/OfflineData.tsx
@@ -0,0 +1,76 @@
+import { Card, Col, Row, Tabs } from 'antd';
+import { RingProgress, Line } from '@ant-design/charts';
+import type { OfflineDataType, DataItem } from '../data.d';
+
+import NumberInfo from './NumberInfo';
+import styles from '../style.less';
+
+const CustomTab = ({
+ data,
+ currentTabKey: currentKey,
+}: {
+ data: OfflineDataType;
+ currentTabKey: string;
+}) => (
+
+ {title}
+
+ )}
+ {subTitle && (
+
+ {subTitle}
+
+ )}
+
+
+ {total}
+ {suffix && {suffix}}
+
+ {(status || subTotal) && (
+
+ {subTotal}
+ {status && status === 'up' ?
+
+
+
+ ))}
+
+
+);
diff --git a/demo/src/pages/dashboard/analysis/components/ProportionSales.tsx b/demo/src/pages/dashboard/analysis/components/ProportionSales.tsx
new file mode 100644
index 00000000..f96d0ea1
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/components/ProportionSales.tsx
@@ -0,0 +1,76 @@
+import { Card, Radio, Typography } from 'antd';
+import numeral from 'numeral';
+import type { RadioChangeEvent } from 'antd/es/radio';
+import { Donut } from '@ant-design/charts';
+import type { DonutConfig } from '@ant-design/charts/es/donut';
+import React from 'react';
+import type { DataItem } from '../data.d';
+import styles from '../style.less';
+
+const { Text } = Typography;
+
+const ProportionSales = ({
+ dropdownGroup,
+ salesType,
+ loading,
+ salesPieData,
+ handleChangeSalesType,
+}: {
+ loading: boolean;
+ dropdownGroup: React.ReactNode;
+ salesType: 'all' | 'online' | 'stores';
+ salesPieData: DataItem[];
+ handleChangeSalesType?: (e: RadioChangeEvent) => void;
+}) => (
+
+
+ 全部渠道
+ 线上
+ 门店
+
+
+
+ }
+ >
+
+ 销售额
+ {
+ // eslint-disable-next-line no-underscore-dangle
+ return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`;
+ },
+ }}
+ statistic={
+ {
+ totalLabel: '销售额',
+ } as DonutConfig['statistic']
+ }
+ />
+
+
+
+
+ }
+ size="large"
+ tabBarStyle={{ marginBottom: 24 }}
+ >
+
+ selectDate('today')}>
+ 今日
+
+ selectDate('week')}>
+ 本周
+
+ selectDate('month')}>
+ 本月
+
+ selectDate('year')}>
+ 本年
+
+
+
+
+
+
+
+
+ 门店销售额排名
+-
+ {rankingListData.map((item, i) => (
+
- + + {i + 1} + + + {item.title} + + + {numeral(item.total).format('0,0')} + + + ))} +
+
+
+
+
+
+ 门店访问量排名
+-
+ {rankingListData.map((item, i) => (
+
- + + {i + 1} + + + {item.title} + + {numeral(item.total).format('0,0')} + + ))} +
+ {children}
+ {flag && (
+
+ {flag === 'up' ?
+ );
+};
+
+export default Trend;
diff --git a/demo/src/pages/dashboard/analysis/data.d.ts b/demo/src/pages/dashboard/analysis/data.d.ts
new file mode 100644
index 00000000..7604d10d
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/data.d.ts
@@ -0,0 +1,46 @@
+import { DataItem } from '@antv/g2plot/esm/interface/config';
+
+export { DataItem };
+
+export interface VisitDataType {
+ x: string;
+ y: number;
+}
+
+export type SearchDataType = {
+ index: number;
+ keyword: string;
+ count: number;
+ range: number;
+ status: number;
+};
+
+export type OfflineDataType = {
+ name: string;
+ cvr: number;
+};
+
+export interface OfflineChartData {
+ date: number;
+ type: number;
+ value: number;
+}
+
+export type RadarData = {
+ name: string;
+ label: string;
+ value: number;
+};
+
+export interface AnalysisData {
+ visitData: DataItem[];
+ visitData2: DataItem[];
+ salesData: DataItem[];
+ searchData: DataItem[];
+ offlineData: OfflineDataType[];
+ offlineChartData: DataItem[];
+ salesTypeData: DataItem[];
+ salesTypeDataOnline: DataItem[];
+ salesTypeDataOffline: DataItem[];
+ radarData: RadarData[];
+}
diff --git a/demo/src/pages/dashboard/analysis/index.tsx b/demo/src/pages/dashboard/analysis/index.tsx
new file mode 100644
index 00000000..331d7e6a
--- /dev/null
+++ b/demo/src/pages/dashboard/analysis/index.tsx
@@ -0,0 +1,162 @@
+import type { FC } from 'react';
+import { Suspense, useState } from 'react';
+import { EllipsisOutlined } from '@ant-design/icons';
+import { Col, Dropdown, Menu, Row } from 'antd';
+import { GridContent } from '@ant-design/pro-layout';
+import type { RadioChangeEvent } from 'antd/es/radio';
+import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
+import type moment from 'moment';
+import IntroduceRow from './components/IntroduceRow';
+import SalesCard from './components/SalesCard';
+import TopSearch from './components/TopSearch';
+import ProportionSales from './components/ProportionSales';
+import OfflineData from './components/OfflineData';
+import { useRequest } from 'umi';
+
+import { fakeChartData } from './service';
+import PageLoading from './components/PageLoading';
+import type { TimeType } from './components/SalesCard';
+import { getTimeDistance } from './utils/utils';
+import type { AnalysisData } from './data.d';
+import styles from './style.less';
+
+type RangePickerValue = RangePickerProps
+
+ );
+ }
+}
diff --git a/demo/src/pages/dashboard/monitor/components/Charts/Gauge/index.tsx b/demo/src/pages/dashboard/monitor/components/Charts/Gauge/index.tsx
new file mode 100644
index 00000000..a4975fa6
--- /dev/null
+++ b/demo/src/pages/dashboard/monitor/components/Charts/Gauge/index.tsx
@@ -0,0 +1,180 @@
+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
+import React from 'react';
+import autoHeight from '../autoHeight';
+
+const { Arc, Html, Line } = Guide;
+
+export type GaugeProps = {
+ title: React.ReactNode;
+ color?: string;
+ height?: number;
+ bgColor?: number;
+ percent: number;
+ forceFit?: boolean;
+ style?: React.CSSProperties;
+ formatter?: (value: string) => string;
+};
+
+const defaultFormatter = (val: string): string => {
+ switch (val) {
+ case '2':
+ return '差';
+ case '4':
+ return '中';
+ case '6':
+ return '良';
+ case '8':
+ return '优';
+ default:
+ return '';
+ }
+};
+
+if (Shape.registerShape) {
+ Shape.registerShape('point', 'pointer', {
+ drawShape(cfg: any, group: any) {
+ let point = cfg.points[0];
+ point = (this as any).parsePoint(point);
+ const center = (this as any).parsePoint({
+ x: 0,
+ y: 0,
+ });
+ group.addShape('line', {
+ attrs: {
+ x1: center.x,
+ y1: center.y,
+ x2: point.x,
+ y2: point.y,
+ stroke: cfg.color,
+ lineWidth: 2,
+ lineCap: 'round',
+ },
+ });
+ return group.addShape('circle', {
+ attrs: {
+ x: center.x,
+ y: center.y,
+ r: 6,
+ stroke: cfg.color,
+ lineWidth: 3,
+ fill: '#fff',
+ },
+ });
+ },
+ });
+}
+
+const Gauge: React.FC
+
+ {activeData && (
+
+
+ )}
+ {activeData && (
+
+
+ {[...activeData].sort()[activeData.length - 1].y + 200} 亿元
+{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元
+
+
+
+
+
+
+
+ 00:00
+ {activeData[Math.floor(activeData.length / 2)].x}
+ {activeData[activeData.length - 1].x}
+
+ )}
+
+
`;
+
+ const textStyle: {
+ fontSize: number;
+ fill: string;
+ textAlign: 'center';
+ } = {
+ fontSize: 12,
+ fill: 'rgba(0, 0, 0, 0.65)',
+ textAlign: 'center',
+ };
+ return (
+ ${title}
+
+ ${(data[0].value * 10).toFixed(2)}%
+
+
+
+ );
+};
+
+export default autoHeight()(MiniArea);
diff --git a/demo/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx b/demo/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
new file mode 100644
index 00000000..520c5c57
--- /dev/null
+++ b/demo/src/pages/dashboard/monitor/components/Charts/Pie/index.tsx
@@ -0,0 +1,310 @@
+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import { DataView } from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import { Divider } from 'antd';
+import ReactFitText from 'react-fittext';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+export type PieProps = {
+ animate?: boolean;
+ color?: string;
+ colors?: string[];
+ selected?: boolean;
+ height?: number;
+ margin?: [number, number, number, number];
+ hasLegend?: boolean;
+ padding?: [number, number, number, number];
+ percent?: number;
+ data?: {
+ x: string | string;
+ y: number;
+ }[];
+ inner?: number;
+ lineWidth?: number;
+ forceFit?: boolean;
+ style?: React.CSSProperties;
+ className?: string;
+ total?: React.ReactNode | number | (() => React.ReactNode | number);
+ title?: React.ReactNode;
+ tooltip?: boolean;
+ valueFormat?: (value: string) => string | React.ReactNode;
+ subTitle?: React.ReactNode;
+};
+type PieState = {
+ legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
+ legendBlock: boolean;
+};
+class Pie extends Component
+ {height > 0 && (
+
+
+ )}
+
+
+
+
+
+ {hasLegend && (
+
+ );
+ }
+}
+
+export default autoHeight()(Pie);
diff --git a/demo/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx b/demo/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx
new file mode 100644
index 00000000..f3ee5192
--- /dev/null
+++ b/demo/src/pages/dashboard/monitor/components/Charts/TagCloud/index.tsx
@@ -0,0 +1,211 @@
+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
+import React, { Component } from 'react';
+
+import DataSet from '@antv/data-set';
+import Debounce from 'lodash.debounce';
+import classNames from 'classnames';
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-underscore-dangle: 0 */
+/* eslint no-param-reassign: 0 */
+
+const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
+
+export type TagCloudProps = {
+ data: {
+ name: string;
+ value: string;
+ }[];
+ height?: number;
+ className?: string;
+ style?: React.CSSProperties;
+};
+
+type TagCloudState = {
+ dv: any;
+ height?: number;
+ width: number;
+};
+
+class TagCloud extends Component
+
+ {!!tooltip &&
+
+ {(subTitle || total) && (
+
+
+ {subTitle &&
+ )}
+ {subTitle}
} + {/* eslint-disable-next-line */} + {total && ( +{typeof total === 'function' ? total() : total}
+ )}
+ -
+ {legendData.map((item, i) => (
+
- this.handleLegendClick(item, i)}>
+
+ {item.x}
+
+ + {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`} + + {valueFormat ? valueFormat(item.y) : item.y} +
+ ))}
+
+ {dv && (
+
+
+ )}
+
+ );
+ }
+}
+
+export default autoHeight()(TagCloud);
diff --git a/demo/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx b/demo/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
new file mode 100644
index 00000000..a9b64110
--- /dev/null
+++ b/demo/src/pages/dashboard/monitor/components/Charts/WaterWave/index.tsx
@@ -0,0 +1,235 @@
+import React, { Component } from 'react';
+
+import autoHeight from '../autoHeight';
+import styles from './index.less';
+
+/* eslint no-return-assign: 0 */
+/* eslint no-mixed-operators: 0 */
+// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
+
+export type WaterWaveProps = {
+ title: React.ReactNode;
+ color?: string;
+ height?: number;
+ percent: number;
+ style?: React.CSSProperties;
+};
+
+class WaterWave extends Component (this.root = n)}
+ style={{ transform: `scale(${radio})` }}
+ >
+
+ );
+ }
+}
+
+export default autoHeight()(WaterWave);
diff --git a/demo/src/pages/dashboard/monitor/components/Charts/autoHeight.tsx b/demo/src/pages/dashboard/monitor/components/Charts/autoHeight.tsx
new file mode 100644
index 00000000..f37acace
--- /dev/null
+++ b/demo/src/pages/dashboard/monitor/components/Charts/autoHeight.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+export type IReactComponent
+
+
+ {title && {title}}
+
+ {percent}%
+= + | React.StatelessComponent
+ | React.ComponentClass
+ | React.ClassicComponentClass
; + +function computeHeight(node: HTMLDivElement) { + const { style } = node; + style.height = '100%'; + const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10); + const padding = + parseInt(`${getComputedStyle(node).paddingTop}`, 10) + + parseInt(`${getComputedStyle(node).paddingBottom}`, 10); + return totalHeight - padding; +} + +function getAutoHeight(n: HTMLDivElement) { + if (!n) { + return 0; + } + + const node = n; + + let height = computeHeight(node); + const parentNode = node.parentNode as HTMLDivElement; + if (parentNode) { + height = computeHeight(parentNode); + } + + return height; +} + +type AutoHeightProps = { + height?: number; +}; + +function autoHeight() { + return
( + WrappedComponent: React.ComponentClass
| React.FC
, + ): React.ComponentClass
=> { + class AutoHeightComponent extends React.Component
{ + state = { + computedHeight: 0, + }; + + root: HTMLDivElement | null = null; + + componentDidMount() { + const { height } = this.props; + if (!height && this.root) { + let h = getAutoHeight(this.root); + this.setState({ computedHeight: h }); + if (h < 1) { + h = getAutoHeight(this.root); + this.setState({ computedHeight: h }); + } + } + } + + handleRoot = (node: HTMLDivElement) => { + this.root = node; + }; + + render() { + const { height } = this.props; + const { computedHeight } = this.state; + const h = height || computedHeight; + return ( +
+ {h > 0 &&
+ );
+ }
+ }
+ return AutoHeightComponent;
+ };
+}
+export default autoHeight;
diff --git a/demo/src/pages/dashboard/monitor/components/Map/index.tsx b/demo/src/pages/dashboard/monitor/components/Map/index.tsx
new file mode 100644
index 00000000..ff9d924f
--- /dev/null
+++ b/demo/src/pages/dashboard/monitor/components/Map/index.tsx
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { HeatmapLayer, MapboxScene, PointLayer } from '@antv/l7-react';
+import { PageLoading } from '@ant-design/pro-layout';
+
+const colors = ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'];
+export default class Map extends React.Component {
+ state = {
+ data: null,
+ grid: null,
+ loading: false,
+ };
+
+ public async componentDidMount() {
+ const [geoData, gridData] = await Promise.all([
+ fetch(
+ 'https://gw.alipayobjects.com/os/bmw-prod/c5dba875-b6ea-4e88-b778-66a862906c93.json',
+ ).then((d) => d.json()),
+ fetch(
+ 'https://gw.alipayobjects.com/os/bmw-prod/8990e8b4-c58e-419b-afb9-8ea3daff2dd1.json',
+ ).then((d) => d.json()),
+ ]);
+ this.setState({
+ data: geoData,
+ grid: gridData,
+ loading: true,
+ });
+ }
+
+ public render() {
+ const { data, grid, loading } = this.state;
+ return loading === false ? (
+
+
+
+
+ {links.map((link) =>
+ createElement(
+ linkElement,
+ {
+ key: `linkGroup-item-${link.id || link.title}`,
+ to: link.href,
+ href: link.href,
+ },
+ link.title,
+ ),
+ )}
+
+
+ );
+};
+
+EditableLinkGroup.defaultProps = {
+ links: [],
+ onAdd: () => {},
+ linkElement: 'a',
+};
+
+export default EditableLinkGroup;
diff --git a/demo/src/pages/dashboard/workplace/components/Radar/autoHeight.tsx b/demo/src/pages/dashboard/workplace/components/Radar/autoHeight.tsx
new file mode 100644
index 00000000..5ec7bf39
--- /dev/null
+++ b/demo/src/pages/dashboard/workplace/components/Radar/autoHeight.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+export type IReactComponent= + | React.StatelessComponent
+ | React.ComponentClass
+ | React.ClassicComponentClass
; + +function computeHeight(node: HTMLDivElement) { + const { style } = node; + style.height = '100%'; + const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10); + const padding = + parseInt(`${getComputedStyle(node).paddingTop}`, 10) + + parseInt(`${getComputedStyle(node).paddingBottom}`, 10); + return totalHeight - padding; +} + +function getAutoHeight(n: HTMLDivElement | undefined) { + if (!n) { + return 0; + } + + const node = n; + + let height = computeHeight(node); + const parentNode = node.parentNode as HTMLDivElement; + if (parentNode) { + height = computeHeight(parentNode); + } + + return height; +} + +type AutoHeightProps = { + height?: number; +}; + +function autoHeight() { + return
( + WrappedComponent: React.ComponentClass
| React.FC
, + ): React.ComponentClass
=> { + class AutoHeightComponent extends React.Component
{ + state = { + computedHeight: 0, + }; + + root: HTMLDivElement | undefined = undefined; + + componentDidMount() { + const { height } = this.props; + if (!height) { + let h = getAutoHeight(this.root); + this.setState({ computedHeight: h }); + if (h < 1) { + h = getAutoHeight(this.root); + this.setState({ computedHeight: h }); + } + } + } + + handleRoot = (node: HTMLDivElement) => { + this.root = node; + }; + + render() { + const { height } = this.props; + const { computedHeight } = this.state; + const h = height || computedHeight; + return ( +
+ {h > 0 &&
+ );
+ }
+ }
+ return AutoHeightComponent;
+ };
+}
+export default autoHeight;
diff --git a/demo/src/pages/dashboard/workplace/components/Radar/index.tsx b/demo/src/pages/dashboard/workplace/components/Radar/index.tsx
new file mode 100644
index 00000000..f7b8596a
--- /dev/null
+++ b/demo/src/pages/dashboard/workplace/components/Radar/index.tsx
@@ -0,0 +1,219 @@
+import { Axis, Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import { Col, Row } from 'antd';
+import React, { Component } from 'react';
+
+import autoHeight from './autoHeight';
+import styles from './index.less';
+
+export type RadarProps = {
+ title?: React.ReactNode;
+ height?: number;
+ padding?: [number, number, number, number];
+ hasLegend?: boolean;
+ data: {
+ name: string;
+ label: string;
+ value: string | number;
+ }[];
+ colors?: string[];
+ animate?: boolean;
+ forceFit?: boolean;
+ tickCount?: number;
+ style?: React.CSSProperties;
+};
+type RadarState = {
+ legendData: {
+ checked: boolean;
+ name: string;
+ color: string;
+ percent: number;
+ value: string;
+ }[];
+};
+/* eslint react/no-danger:0 */
+class Radar extends Component
+ {title &&
+
+ {hasLegend && (
+
+ {legendData.map((item, i) => (
+
+ )}
+
+ );
+ }
+}
+
+export default autoHeight()(Radar);
diff --git a/demo/src/pages/dashboard/workplace/data.d.ts b/demo/src/pages/dashboard/workplace/data.d.ts
new file mode 100644
index 00000000..e96271ec
--- /dev/null
+++ b/demo/src/pages/dashboard/workplace/data.d.ts
@@ -0,0 +1,111 @@
+import { DataItem } from '@antv/g2plot/esm/interface/config';
+
+export { DataItem };
+
+export interface TagType {
+ key: string;
+ label: string;
+}
+
+export type SearchDataType = {
+ index: number;
+ keyword: string;
+ count: number;
+ range: number;
+ status: number;
+};
+
+export type OfflineDataType = {
+ name: string;
+ cvr: number;
+};
+
+export interface RadarData {
+ name: string;
+ label: string;
+ value: number;
+}
+
+export type AnalysisData = {
+ visitData: VisitDataType[];
+ visitData2: VisitDataType[];
+ salesData: VisitDataType[];
+ searchData: SearchDataType[];
+ offlineData: OfflineDataType[];
+ offlineChartData: OfflineChartData[];
+ salesTypeData: VisitDataType[];
+ salesTypeDataOnline: VisitDataType[];
+ salesTypeDataOffline: VisitDataType[];
+ radarData: DataItem[];
+};
+
+export type GeographicType = {
+ province: {
+ label: string;
+ key: string;
+ };
+ city: {
+ label: string;
+ key: string;
+ };
+};
+
+export type NoticeType = {
+ id: string;
+ title: string;
+ logo: string;
+ description: string;
+ updatedAt: string;
+ member: string;
+ href: string;
+ memberLink: string;
+};
+
+export type CurrentUser = {
+ name: string;
+ avatar: string;
+ userid: string;
+ notice: NoticeType[];
+ email: string;
+ signature: string;
+ title: string;
+ group: string;
+ tags: TagType[];
+ notifyCount: number;
+ unreadCount: number;
+ country: string;
+ geographic: GeographicType;
+ address: string;
+ phone: string;
+};
+
+export type Member = {
+ avatar: string;
+ name: string;
+ id: string;
+};
+
+export type ActivitiesType = {
+ id: string;
+ updatedAt: string;
+ user: {
+ name: string;
+ avatar: string;
+ };
+ group: {
+ name: string;
+ link: string;
+ };
+ project: {
+ name: string;
+ link: string;
+ };
+
+ template: string;
+};
+
+export type RadarDataType = {
+ label: string;
+ name: string;
+ value: number;
+};
diff --git a/demo/src/pages/dashboard/workplace/index.tsx b/demo/src/pages/dashboard/workplace/index.tsx
new file mode 100644
index 00000000..701e64a1
--- /dev/null
+++ b/demo/src/pages/dashboard/workplace/index.tsx
@@ -0,0 +1,242 @@
+import type { FC } from 'react';
+import { Avatar, Card, Col, List, Skeleton, Row, Statistic } from 'antd';
+import { Radar } from '@ant-design/charts';
+
+import { Link, useRequest } from 'umi';
+import { PageContainer } from '@ant-design/pro-layout';
+import moment from 'moment';
+import EditableLinkGroup from './components/EditableLinkGroup';
+import styles from './style.less';
+import type { ActivitiesType, CurrentUser } from './data.d';
+import { queryProjectNotice, queryActivities, fakeChartData } from './service';
+
+const links = [
+ {
+ title: '操作一',
+ href: '',
+ },
+ {
+ title: '操作二',
+ href: '',
+ },
+ {
+ title: '操作三',
+ href: '',
+ },
+ {
+ title: '操作四',
+ href: '',
+ },
+ {
+ title: '操作五',
+ href: '',
+ },
+ {
+ title: '操作六',
+ href: '',
+ },
+];
+
+const PageHeaderContent: FC<{ currentUser: Partial{title}
} +
+
+
+ ))}
+ + + {item.name} +
+{item.value}
+
+
+ );
+};
+
+const ExtraContent: FC
+
+
+
+
+ 早安，
+ {currentUser.name}
+ ，祝你开心每一天！
+
+
+ {currentUser.title} |{currentUser.group}
+
+
+
+);
+
+const Workplace: FC = () => {
+ const { loading: projectLoading, data: projectNotice = [] } = useRequest(queryProjectNotice);
+ const { loading: activitiesLoading, data: activities = [] } = useRequest(queryActivities);
+ const { data } = useRequest(fakeChartData);
+
+ const renderActivities = (item: ActivitiesType) => {
+ const events = item.template.split(/@\{([^{}]*)\}/gi).map((key) => {
+ if (item[key]) {
+ return (
+
+ {item[key].name}
+
+ );
+ }
+ return key;
+ });
+ return (
+
+
+
+
+
+
+
+ {item.member || ''}
+ {item.updatedAt && (
+
+ {moment(item.updatedAt).fromNow()}
+
+ )}
+
+
+
+
+
+ {projectNotice.map((item) => (
+
+
+
+
+
+
+
diff --git a/demo/src/pages/editor/flow/common/IconFont/index.ts b/demo/src/pages/editor/flow/common/IconFont/index.ts
new file mode 100644
index 00000000..987647c0
--- /dev/null
+++ b/demo/src/pages/editor/flow/common/IconFont/index.ts
@@ -0,0 +1,7 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const IconFont = createFromIconfontCN({
+ scriptUrl: 'https://at.alicdn.com/t/font_1101588_01zniftxm9yp.js',
+});
+
+export default IconFont;
diff --git a/demo/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx b/demo/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
new file mode 100644
index 00000000..c5cc4e50
--- /dev/null
+++ b/demo/src/pages/editor/flow/components/EditorContextMenu/FlowContextMenu.tsx
@@ -0,0 +1,34 @@
+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
+import MenuItem from './MenuItem';
+import styles from './index.less';
+
+const FlowContextMenu = () => (
+
+ 
+
+
+
+
+
+
+
+
+ 
+ Ant Design
+
+
+ Ant Design
+
+
+
+
+
+
+ {err.errors[0]}
+ {fieldLabels[key]}
+
+
+
+
+ 说明
+转账到支付宝账户
++ 如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 +
+转账到银行卡
++ 如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 +
+
+ {title}
+
+);
+
+const ListContent = ({
+ data: { owner, createdAt, percent, status },
+}: {
+ data: BasicListItemDataType;
+}) => (
+ {value}
+ {bordered && } +
+
+);
+
+export const BasicList: FC = () => {
+ const [done, setDone] = useState
+ Owner
+
+ {owner}
+
+ 开始时间
+
+ {moment(createdAt).format('YYYY-MM-DD HH:mm')}
+
+
+
+
+
+ 全部
+ 进行中
+ 等待中
+
+ ({})} />
+
+ );
+
+ const MoreBtn: React.FC<{
+ item: BasicListItemDataType;
+ }> = ({ item }) => (
+
+
+
+
+
+ );
+};
+
+export default BasicList;
diff --git a/demo/src/pages/list/basic-list/service.ts b/demo/src/pages/list/basic-list/service.ts
new file mode 100644
index 00000000..4aa8f8d8
--- /dev/null
+++ b/demo/src/pages/list/basic-list/service.ts
@@ -0,0 +1,50 @@
+import { request } from 'umi';
+import type { BasicListItemDataType } from './data.d';
+
+type ParamsType = {
+ count?: number;
+} & Partial
+
+
+
+
+
+
+
+
+ - (
+
+
+ );
+
+ const extraContent = (
+ + 段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态， + 提供跨越设计与开发的体验解决方案。 +
+ +
{' '}
+ 快速开始
+ 
{' '}
+ 产品简介
+ 
{' '}
+ 产品文档
+
+ 
+
+ );
+ const nullData: Partial
+
+ >
+ rowKey="id"
+ loading={loading}
+ grid={{
+ gutter: 16,
+ xs: 1,
+ sm: 2,
+ md: 3,
+ lg: 3,
+ xl: 4,
+ xxl: 4,
+ }}
+ dataSource={[nullData, ...list]}
+ renderItem={(item) => {
+ if (item && item.id) {
+ return (
+
+ 操作一, 操作二]}
+ >
+
+ {item.description}
+
+ }
+ />
+
+
+ );
+ }
+ return (
+
+
+
+ );
+ }}
+ />
+
+
+ {title && (
+
+ );
+};
+
+export default StandardFormRow;
diff --git a/demo/src/pages/list/search/applications/components/TagSelect/index.less b/demo/src/pages/list/search/applications/components/TagSelect/index.less
new file mode 100644
index 00000000..f366c587
--- /dev/null
+++ b/demo/src/pages/list/search/applications/components/TagSelect/index.less
@@ -0,0 +1,34 @@
+@import '~antd/es/style/themes/default.less';
+
+.tagSelect {
+ position: relative;
+ max-height: 32px;
+ margin-left: -8px;
+ overflow: hidden;
+ line-height: 32px;
+ transition: all 0.3s;
+ user-select: none;
+ :global {
+ .ant-tag {
+ margin-right: 24px;
+ padding: 0 8px;
+ font-size: @font-size-base;
+ }
+ }
+ &.expanded {
+ max-height: 200px;
+ transition: all 0.3s;
+ }
+ .trigger {
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ span.anticon {
+ font-size: 12px;
+ }
+ }
+ &.hasExpandTag {
+ padding-right: 50px;
+ }
+}
diff --git a/demo/src/pages/list/search/applications/components/TagSelect/index.tsx b/demo/src/pages/list/search/applications/components/TagSelect/index.tsx
new file mode 100644
index 00000000..5f10efd4
--- /dev/null
+++ b/demo/src/pages/list/search/applications/components/TagSelect/index.tsx
@@ -0,0 +1,142 @@
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { useBoolean, useControllableValue } from 'ahooks';
+import { Tag } from 'antd';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import React from 'react';
+import styles from './index.less';
+
+const { CheckableTag } = Tag;
+
+export interface TagSelectOptionProps {
+ value: string | number;
+ style?: React.CSSProperties;
+ checked?: boolean;
+ onChange?: (value: string | number, state: boolean) => void;
+}
+
+const TagSelectOption: React.FC
+ {title}
+
+ )}
+ {children}
+
+ {hideCheckAll ? null : (
+
+ {selectAllText}
+
+ )}
+ {children &&
+ React.Children.map(children, (child: TagSelectOptionElement) => {
+ if (isTagSelectOption(child)) {
+ return React.cloneElement(child, {
+ key: `tag-select-${child.props.value}`,
+ value: child.props.value,
+ checked: value && value.indexOf(child.props.value) > -1,
+ onChange: handleTagChange,
+ });
+ }
+ return child;
+ })}
+ {expandable && (
+ {
+ toggle();
+ }}
+ >
+ {expand ? (
+ <>
+ {collapseText}
+ );
+};
+
+TagSelect.Option = TagSelectOption;
+
+export default TagSelect;
diff --git a/demo/src/pages/list/search/applications/data.d.ts b/demo/src/pages/list/search/applications/data.d.ts
new file mode 100644
index 00000000..f39b0a60
--- /dev/null
+++ b/demo/src/pages/list/search/applications/data.d.ts
@@ -0,0 +1,33 @@
+export type Member = {
+ avatar: string;
+ name: string;
+ id: string;
+};
+
+export interface Params {
+ count: number;
+}
+
+export interface ListItemDataType {
+ id: string;
+ owner: string;
+ title: string;
+ avatar: string;
+ cover: string;
+ status: 'normal' | 'exception' | 'active' | 'success';
+ percent: number;
+ logo: string;
+ href: string;
+ body?: any;
+ updatedAt: number;
+ createdAt: number;
+ subDescription: string;
+ description: string;
+ activeUser: number;
+ newUser: number;
+ star: number;
+ like: number;
+ message: number;
+ content: string;
+ members: Member[];
+}
diff --git a/demo/src/pages/list/search/applications/index.tsx b/demo/src/pages/list/search/applications/index.tsx
new file mode 100644
index 00000000..abb16cac
--- /dev/null
+++ b/demo/src/pages/list/search/applications/index.tsx
@@ -0,0 +1,195 @@
+import {
+ DownloadOutlined,
+ EditOutlined,
+ EllipsisOutlined,
+ ShareAltOutlined,
+} from '@ant-design/icons';
+import { Avatar, Card, Col, Dropdown, Form, List, Menu, Row, Select, Tooltip } from 'antd';
+import numeral from 'numeral';
+import type { FC } from 'react';
+import React from 'react';
+import { useRequest } from 'umi';
+import StandardFormRow from './components/StandardFormRow';
+import TagSelect from './components/TagSelect';
+import type { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
+import styles from './style.less';
+
+const { Option } = Select;
+
+export function formatWan(val: number) {
+ const v = val * 1;
+ if (!v || Number.isNaN(v)) return '';
+
+ let result: React.ReactNode = val;
+ if (val > 10000) {
+ result = (
+
+ {Math.floor(val / 10000)}
+
+ 万
+
+
+ );
+ }
+ return result;
+}
+
+const formItemLayout = {
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 16 },
+ },
+};
+
+const CardInfo: React.FC<{
+ activeUser: React.ReactNode;
+ newUser: React.ReactNode;
+}> = ({ activeUser, newUser }) => (
+
+
+);
+
+export const Applications: FC
+
+ 活跃用户
+{activeUser}
+
+
+ 新增用户
+{newUser}
+
+
+
+
+
+
+ rowKey="id"
+ grid={{
+ gutter: 16,
+ xs: 1,
+ sm: 2,
+ md: 3,
+ lg: 3,
+ xl: 4,
+ xxl: 4,
+ }}
+ loading={loading}
+ dataSource={list}
+ renderItem={(item) => (
+
+
+
+ ,
+
+ ,
+
+ ,
+ ]}
+ >
+
+
+ )}
+ />
+
+ );
+};
+
+export default Applications;
diff --git a/demo/src/pages/list/search/applications/service.ts b/demo/src/pages/list/search/applications/service.ts
new file mode 100644
index 00000000..b6fb5712
--- /dev/null
+++ b/demo/src/pages/list/search/applications/service.ts
@@ -0,0 +1,10 @@
+import { request } from 'umi';
+import type { Params, ListItemDataType } from './data.d';
+
+export async function queryFakeList(
+ params: Params,
+): Promise<{ data: { list: ListItemDataType[] } }> {
+ return request('/api/fake_list', {
+ params,
+ });
+}
diff --git a/demo/src/pages/list/search/applications/style.less b/demo/src/pages/list/search/applications/style.less
new file mode 100644
index 00000000..3daa5c3e
--- /dev/null
+++ b/demo/src/pages/list/search/applications/style.less
@@ -0,0 +1,50 @@
+@import '~antd/es/style/themes/default.less';
+
+.filterCardList {
+ :global {
+ .ant-card-meta-content {
+ margin-top: 0;
+ }
+ // disabled white space
+ .ant-card-meta-avatar {
+ font-size: 0;
+ }
+
+ .ant-list .ant-list-item-content-single {
+ max-width: 100%;
+ }
+ }
+ .cardInfo {
+ margin-top: 16px;
+ margin-left: 40px;
+ zoom: 1;
+ &::before,
+ &::after {
+ display: table;
+ content: ' ';
+ }
+ &::after {
+ clear: both;
+ height: 0;
+ font-size: 0;
+ visibility: hidden;
+ }
+ & > div {
+ position: relative;
+ float: left;
+ width: 50%;
+ text-align: left;
+ p {
+ margin: 0;
+ font-size: 24px;
+ line-height: 32px;
+ }
+ p:first-child {
+ margin-bottom: 4px;
+ color: @text-color-secondary;
+ font-size: 12px;
+ line-height: 20px;
+ }
+ }
+ }
+}
diff --git a/demo/src/pages/list/search/applications/utils/utils.less b/demo/src/pages/list/search/applications/utils/utils.less
new file mode 100644
index 00000000..de1aa642
--- /dev/null
+++ b/demo/src/pages/list/search/applications/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+ position: relative;
+ max-height: @line * 1.5em;
+ margin-right: -1em;
+ padding-right: 1em;
+ overflow: hidden;
+ line-height: 1.5em;
+ text-align: justify;
+ &::before {
+ position: absolute;
+ right: 14px;
+ bottom: 0;
+ padding: 0 1px;
+ background: @bg;
+ content: '...';
+ }
+ &::after {
+ position: absolute;
+ right: 14px;
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ background: white;
+ content: '';
+ }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+ zoom: 1;
+ &::before,
+ &::after {
+ display: table;
+ content: ' ';
+ }
+ &::after {
+ clear: both;
+ height: 0;
+ font-size: 0;
+ visibility: hidden;
+ }
+}
diff --git a/demo/src/pages/list/search/articles/_mock.ts b/demo/src/pages/list/search/articles/_mock.ts
new file mode 100644
index 00000000..e3fd954b
--- /dev/null
+++ b/demo/src/pages/list/search/articles/_mock.ts
@@ -0,0 +1,119 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Request, Response } from 'express';
+import type { ListItemDataType } from './data.d';
+
+const titles = [
+ 'Alipay',
+ 'Angular',
+ 'Ant Design',
+ 'Ant Design Pro',
+ 'Bootstrap',
+ 'React',
+ 'Vue',
+ 'Webpack',
+];
+const avatars = [
+ 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', // Alipay
+ 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', // Angular
+ 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', // Ant Design
+ 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', // Ant Design Pro
+ 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', // Bootstrap
+ 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', // React
+ 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', // Vue
+ 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
+];
+
+const covers = [
+ 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
+ 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
+ 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
+ 'https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png',
+];
+const desc = [
+ '那是一种内在的东西， 他们到达不了，也无法触及的',
+ '希望是一个好东西，也许是最好的，好东西是不会消亡的',
+ '生命就像一盒巧克力，结果往往出人意料',
+ '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
+ '那时候我只会想自己想要什么，从不想自己拥有什么',
+];
+const user = [
+ '付小小',
+ '曲丽丽',
+ '林东东',
+ '周星星',
+ '吴加好',
+ '朱偏右',
+ '鱼酱',
+ '乐哥',
+ '谭小仪',
+ '仲尼',
+];
+
+function fakeList(count: number): ListItemDataType[] {
+ const list = [];
+ for (let i = 0; i < count; i += 1) {
+ list.push({
+ id: `fake-list-${Math.random().toString(36).slice(2, 6)}${i}`,
+ owner: user[i % 10],
+ title: titles[i % 8],
+ avatar: avatars[i % 8],
+ cover: parseInt(`${i / 4}`, 10) % 2 === 0 ? covers[i % 4] : covers[3 - (i % 4)],
+ status: ['active', 'exception', 'normal'][i % 3] as
+ | 'normal'
+ | 'exception'
+ | 'active'
+ | 'success',
+ percent: Math.ceil(Math.random() * 50) + 50,
+ logo: avatars[i % 8],
+ href: 'https://ant.design',
+ updatedAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+ createdAt: new Date(new Date().getTime() - 1000 * 60 * 60 * 2 * i).getTime(),
+ subDescription: desc[i % 5],
+ description:
+ '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
+ activeUser: Math.ceil(Math.random() * 100000) + 100000,
+ newUser: Math.ceil(Math.random() * 1000) + 1000,
+ star: Math.ceil(Math.random() * 100) + 100,
+ like: Math.ceil(Math.random() * 100) + 100,
+ message: Math.ceil(Math.random() * 10) + 10,
+ content:
+ '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
+ members: [
+ {
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
+ name: '曲丽丽',
+ id: 'member1',
+ },
+ {
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
+ name: '王昭君',
+ id: 'member2',
+ },
+ {
+ avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
+ name: '董娜娜',
+ id: 'member3',
+ },
+ ],
+ });
+ }
+
+ return list;
+}
+
+function getFakeList(req: Request, res: Response) {
+ const params: any = req.query;
+
+ const count = params.count * 1 || 20;
+
+ const result = fakeList(count);
+ return res.json({
+ data: {
+ list: result,
+ },
+ });
+}
+
+export default {
+ 'GET /api/fake_list': getFakeList,
+};
diff --git a/demo/src/pages/list/search/articles/components/ArticleListContent/index.less b/demo/src/pages/list/search/articles/components/ArticleListContent/index.less
new file mode 100644
index 00000000..eca0811c
--- /dev/null
+++ b/demo/src/pages/list/search/articles/components/ArticleListContent/index.less
@@ -0,0 +1,38 @@
+@import '~antd/es/style/themes/default.less';
+
+.listContent {
+ .description {
+ max-width: 720px;
+ line-height: 22px;
+ }
+ .extra {
+ margin-top: 16px;
+ color: @text-color-secondary;
+ line-height: 22px;
+ & > :global(.ant-avatar) {
+ position: relative;
+ top: 1px;
+ width: 20px;
+ height: 20px;
+ margin-right: 8px;
+ vertical-align: top;
+ }
+ & > em {
+ margin-left: 16px;
+ color: @disabled-color;
+ font-style: normal;
+ }
+ }
+}
+
+@media screen and (max-width: @screen-xs) {
+ .listContent {
+ .extra {
+ & > em {
+ display: block;
+ margin-top: 8px;
+ margin-left: 0;
+ }
+ }
+ }
+}
diff --git a/demo/src/pages/list/search/articles/components/ArticleListContent/index.tsx b/demo/src/pages/list/search/articles/components/ArticleListContent/index.tsx
new file mode 100644
index 00000000..b5734538
--- /dev/null
+++ b/demo/src/pages/list/search/articles/components/ArticleListContent/index.tsx
@@ -0,0 +1,29 @@
+import { Avatar } from 'antd';
+import React from 'react';
+import moment from 'moment';
+import styles from './index.less';
+
+type ArticleListContentProps = {
+ data: {
+ content: React.ReactNode;
+ updatedAt: number;
+ avatar: string;
+ owner: string;
+ href: string;
+ };
+};
+
+const ArticleListContent: React.FC+
+
+
+ {title && (
+
+ );
+};
+
+export default StandardFormRow;
diff --git a/demo/src/pages/list/search/articles/components/TagSelect/index.less b/demo/src/pages/list/search/articles/components/TagSelect/index.less
new file mode 100644
index 00000000..b174f042
--- /dev/null
+++ b/demo/src/pages/list/search/articles/components/TagSelect/index.less
@@ -0,0 +1,33 @@
+@import '~antd/es/style/themes/default.less';
+
+.tagSelect {
+ position: relative;
+ max-height: 32px;
+ margin-left: -8px;
+ overflow: hidden;
+ line-height: 32px;
+ transition: all 0.3s;
+ user-select: none;
+ :global {
+ .ant-tag {
+ margin-right: 24px;
+ padding: 0 8px;
+ font-size: @font-size-base;
+ }
+ }
+ &.expanded {
+ max-height: 200px;
+ transition: all 0.3s;
+ }
+ .trigger {
+ position: absolute;
+ top: 0;
+ right: 0;
+ span.anticon {
+ font-size: 12px;
+ }
+ }
+ &.hasExpandTag {
+ padding-right: 50px;
+ }
+}
diff --git a/demo/src/pages/list/search/articles/components/TagSelect/index.tsx b/demo/src/pages/list/search/articles/components/TagSelect/index.tsx
new file mode 100644
index 00000000..5f10efd4
--- /dev/null
+++ b/demo/src/pages/list/search/articles/components/TagSelect/index.tsx
@@ -0,0 +1,142 @@
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { useBoolean, useControllableValue } from 'ahooks';
+import { Tag } from 'antd';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import React from 'react';
+import styles from './index.less';
+
+const { CheckableTag } = Tag;
+
+export interface TagSelectOptionProps {
+ value: string | number;
+ style?: React.CSSProperties;
+ checked?: boolean;
+ onChange?: (value: string | number, state: boolean) => void;
+}
+
+const TagSelectOption: React.FC
+ {title}
+
+ )}
+ {children}
+
+ {hideCheckAll ? null : (
+
+ {selectAllText}
+
+ )}
+ {children &&
+ React.Children.map(children, (child: TagSelectOptionElement) => {
+ if (isTagSelectOption(child)) {
+ return React.cloneElement(child, {
+ key: `tag-select-${child.props.value}`,
+ value: child.props.value,
+ checked: value && value.indexOf(child.props.value) > -1,
+ onChange: handleTagChange,
+ });
+ }
+ return child;
+ })}
+ {expandable && (
+ {
+ toggle();
+ }}
+ >
+ {expand ? (
+ <>
+ {collapseText}
+ );
+};
+
+TagSelect.Option = TagSelectOption;
+
+export default TagSelect;
diff --git a/demo/src/pages/list/search/articles/data.d.ts b/demo/src/pages/list/search/articles/data.d.ts
new file mode 100644
index 00000000..0a4597c9
--- /dev/null
+++ b/demo/src/pages/list/search/articles/data.d.ts
@@ -0,0 +1,32 @@
+export type Member = {
+ avatar: string;
+ name: string;
+ id: string;
+};
+
+export interface Params {
+ count: number;
+}
+export interface ListItemDataType {
+ id: string;
+ owner: string;
+ title: string;
+ avatar: string;
+ cover: string;
+ status: 'normal' | 'exception' | 'active' | 'success';
+ percent: number;
+ logo: string;
+ href: string;
+ body?: any;
+ updatedAt: number;
+ createdAt: number;
+ subDescription: string;
+ description: string;
+ activeUser: number;
+ newUser: number;
+ star: number;
+ like: number;
+ message: number;
+ content: string;
+ members: Member[];
+}
diff --git a/demo/src/pages/list/search/articles/index.tsx b/demo/src/pages/list/search/articles/index.tsx
new file mode 100644
index 00000000..e61be81c
--- /dev/null
+++ b/demo/src/pages/list/search/articles/index.tsx
@@ -0,0 +1,224 @@
+import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
+import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd';
+import type { FC } from 'react';
+import React from 'react';
+import { useRequest } from 'umi';
+import ArticleListContent from './components/ArticleListContent';
+import StandardFormRow from './components/StandardFormRow';
+import TagSelect from './components/TagSelect';
+import type { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
+import styles from './style.less';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+
+const pageSize = 5;
+
+const Articles: FC = () => {
+ const [form] = Form.useForm();
+
+ const { data, reload, loading, loadMore, loadingMore } = useRequest(
+ () => {
+ return queryFakeList({
+ count: pageSize,
+ });
+ },
+ {
+ loadMore: true,
+ },
+ );
+
+ const list = data?.list || [];
+
+ const setOwner = () => {
+ form.setFieldsValue({
+ owner: ['wzj'],
+ });
+ };
+
+ const owners = [
+ {
+ id: 'wzj',
+ name: '我自己',
+ },
+ {
+ id: 'wjh',
+ name: '吴家豪',
+ },
+ {
+ id: 'zxx',
+ name: '周星星',
+ },
+ {
+ id: 'zly',
+ name: '赵丽颖',
+ },
+ {
+ id: 'ym',
+ name: '姚明',
+ },
+ ];
+
+ const IconText: React.FC<{
+ type: string;
+ text: React.ReactNode;
+ }> = ({ type, text }) => {
+ switch (type) {
+ case 'star-o':
+ return (
+
+
+
+
+ );
+
+ return (
+ <>
+
+
+ );
+};
+
+AvatarList.Item = Item;
+
+export default AvatarList;
diff --git a/demo/src/pages/list/search/projects/components/StandardFormRow/index.less b/demo/src/pages/list/search/projects/components/StandardFormRow/index.less
new file mode 100644
index 00000000..d619cd2c
--- /dev/null
+++ b/demo/src/pages/list/search/projects/components/StandardFormRow/index.less
@@ -0,0 +1,88 @@
+@import '~antd/es/style/themes/default.less';
+
+.standardFormRow {
+ display: flex;
+ width: 100%;
+ margin-bottom: 16px;
+ padding-bottom: 16px;
+ border-bottom: 1px dashed @border-color-split;
+ :global {
+ .ant-form-item,
+ .ant-legacy-form-item {
+ margin-right: 24px;
+ }
+ .ant-form-item-label,
+ .ant-legacy-form-item-label {
+ label {
+ margin-right: 0;
+ color: @text-color;
+ }
+ }
+ .ant-form-item-label,
+ .ant-legacy-form-item-label,
+ .ant-form-item-control,
+ .ant-legacy-form-item-control {
+ padding: 0;
+ line-height: 32px;
+ }
+ }
+ .label {
+ flex: 0 0 auto;
+ margin-right: 24px;
+ color: @heading-color;
+ font-size: @font-size-base;
+ text-align: right;
+ & > span {
+ display: inline-block;
+ height: 32px;
+ line-height: 32px;
+ &::after {
+ content: '：';
+ }
+ }
+ }
+ .content {
+ flex: 1 1 0;
+ :global {
+ .ant-form-item,
+ .ant-legacy-form-item {
+ &:last-child {
+ display: block;
+ margin-right: 0;
+ }
+ }
+ }
+ }
+}
+
+.standardFormRowLast {
+ margin-bottom: 0;
+ padding-bottom: 0;
+ border: none;
+}
+
+.standardFormRowBlock {
+ :global {
+ .ant-form-item,
+ .ant-legacy-form-item,
+ div.ant-form-item-control-wrapper,
+ div.ant-legacy-form-item-control-wrapper {
+ display: block;
+ }
+ }
+}
+
+.standardFormRowGrid {
+ :global {
+ .ant-form-item,
+ .ant-legacy-form-item,
+ div.ant-form-item-control-wrapper,
+ div.ant-legacy-form-item-control-wrapper {
+ display: block;
+ }
+ .ant-form-item-label,
+ .ant-legacy-form-item-label {
+ float: left;
+ }
+ }
+}
diff --git a/demo/src/pages/list/search/projects/components/StandardFormRow/index.tsx b/demo/src/pages/list/search/projects/components/StandardFormRow/index.tsx
new file mode 100644
index 00000000..fe4cb388
--- /dev/null
+++ b/demo/src/pages/list/search/projects/components/StandardFormRow/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './index.less';
+
+type StandardFormRowProps = {
+ title?: string;
+ last?: boolean;
+ block?: boolean;
+ grid?: boolean;
+ style?: React.CSSProperties;
+};
+
+const StandardFormRow: React.FC- {childrenWithProps}
+ {title && (
+
+ );
+};
+
+export default StandardFormRow;
diff --git a/demo/src/pages/list/search/projects/components/TagSelect/index.less b/demo/src/pages/list/search/projects/components/TagSelect/index.less
new file mode 100644
index 00000000..b174f042
--- /dev/null
+++ b/demo/src/pages/list/search/projects/components/TagSelect/index.less
@@ -0,0 +1,33 @@
+@import '~antd/es/style/themes/default.less';
+
+.tagSelect {
+ position: relative;
+ max-height: 32px;
+ margin-left: -8px;
+ overflow: hidden;
+ line-height: 32px;
+ transition: all 0.3s;
+ user-select: none;
+ :global {
+ .ant-tag {
+ margin-right: 24px;
+ padding: 0 8px;
+ font-size: @font-size-base;
+ }
+ }
+ &.expanded {
+ max-height: 200px;
+ transition: all 0.3s;
+ }
+ .trigger {
+ position: absolute;
+ top: 0;
+ right: 0;
+ span.anticon {
+ font-size: 12px;
+ }
+ }
+ &.hasExpandTag {
+ padding-right: 50px;
+ }
+}
diff --git a/demo/src/pages/list/search/projects/components/TagSelect/index.tsx b/demo/src/pages/list/search/projects/components/TagSelect/index.tsx
new file mode 100644
index 00000000..5f10efd4
--- /dev/null
+++ b/demo/src/pages/list/search/projects/components/TagSelect/index.tsx
@@ -0,0 +1,142 @@
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { useBoolean, useControllableValue } from 'ahooks';
+import { Tag } from 'antd';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import React from 'react';
+import styles from './index.less';
+
+const { CheckableTag } = Tag;
+
+export interface TagSelectOptionProps {
+ value: string | number;
+ style?: React.CSSProperties;
+ checked?: boolean;
+ onChange?: (value: string | number, state: boolean) => void;
+}
+
+const TagSelectOption: React.FC
+ {title}
+
+ )}
+ {children}
+
+ {hideCheckAll ? null : (
+
+ {selectAllText}
+
+ )}
+ {children &&
+ React.Children.map(children, (child: TagSelectOptionElement) => {
+ if (isTagSelectOption(child)) {
+ return React.cloneElement(child, {
+ key: `tag-select-${child.props.value}`,
+ value: child.props.value,
+ checked: value && value.indexOf(child.props.value) > -1,
+ onChange: handleTagChange,
+ });
+ }
+ return child;
+ })}
+ {expandable && (
+ {
+ toggle();
+ }}
+ >
+ {expand ? (
+ <>
+ {collapseText}
+ );
+};
+
+TagSelect.Option = TagSelectOption;
+
+export default TagSelect;
diff --git a/demo/src/pages/list/search/projects/data.d.ts b/demo/src/pages/list/search/projects/data.d.ts
new file mode 100644
index 00000000..0a4597c9
--- /dev/null
+++ b/demo/src/pages/list/search/projects/data.d.ts
@@ -0,0 +1,32 @@
+export type Member = {
+ avatar: string;
+ name: string;
+ id: string;
+};
+
+export interface Params {
+ count: number;
+}
+export interface ListItemDataType {
+ id: string;
+ owner: string;
+ title: string;
+ avatar: string;
+ cover: string;
+ status: 'normal' | 'exception' | 'active' | 'success';
+ percent: number;
+ logo: string;
+ href: string;
+ body?: any;
+ updatedAt: number;
+ createdAt: number;
+ subDescription: string;
+ description: string;
+ activeUser: number;
+ newUser: number;
+ star: number;
+ like: number;
+ message: number;
+ content: string;
+ members: Member[];
+}
diff --git a/demo/src/pages/list/search/projects/index.tsx b/demo/src/pages/list/search/projects/index.tsx
new file mode 100644
index 00000000..19eafebe
--- /dev/null
+++ b/demo/src/pages/list/search/projects/index.tsx
@@ -0,0 +1,135 @@
+import { Card, Col, Form, List, Row, Select, Typography } from 'antd';
+import moment from 'moment';
+import type { FC } from 'react';
+import { useRequest } from 'umi';
+import AvatarList from './components/AvatarList';
+import StandardFormRow from './components/StandardFormRow';
+import TagSelect from './components/TagSelect';
+import type { ListItemDataType } from './data.d';
+import { queryFakeList } from './service';
+import styles from './style.less';
+
+const { Option } = Select;
+const FormItem = Form.Item;
+const { Paragraph } = Typography;
+
+const getKey = (id: string, index: number) => `${id}-${index}`;
+
+const Projects: FC = () => {
+ const { data, loading, run } = useRequest((values: any) => {
+ console.log('form data', values);
+ return queryFakeList({
+ count: 8,
+ });
+ });
+
+ const list = data?.list || [];
+
+ const cardList = list && (
+
+ {moment(item.updatedAt).fromNow()}
+
+
+
+
+ {item.members.map((member, i) => (
+
+
+
+
+
+
+
+ );
+};
+
+export default Projects;
diff --git a/demo/src/pages/list/search/projects/service.ts b/demo/src/pages/list/search/projects/service.ts
new file mode 100644
index 00000000..fd1bcf6f
--- /dev/null
+++ b/demo/src/pages/list/search/projects/service.ts
@@ -0,0 +1,10 @@
+import { request } from 'umi';
+import type { Params, ListItemDataType } from './data';
+
+export async function queryFakeList(
+ params: Params,
+): Promise<{ data: { list: ListItemDataType[] } }> {
+ return request('/api/fake_list', {
+ params,
+ });
+}
diff --git a/demo/src/pages/list/search/projects/style.less b/demo/src/pages/list/search/projects/style.less
new file mode 100644
index 00000000..e2cf6787
--- /dev/null
+++ b/demo/src/pages/list/search/projects/style.less
@@ -0,0 +1,55 @@
+@import '~antd/es/style/themes/default.less';
+@import './utils/utils.less';
+
+.coverCardList {
+ .card {
+ :global {
+ .ant-card-meta-title {
+ margin-bottom: 4px;
+ & > a {
+ display: inline-block;
+ max-width: 100%;
+ color: @heading-color;
+ }
+ }
+ .ant-card-meta-description {
+ height: 44px;
+ overflow: hidden;
+ line-height: 22px;
+ }
+ }
+
+ &:hover {
+ :global {
+ .ant-card-meta-title > a {
+ color: @primary-color;
+ }
+ }
+ }
+ }
+
+ .cardItemContent {
+ display: flex;
+ height: 20px;
+ margin-top: 16px;
+ margin-bottom: -4px;
+ line-height: 20px;
+ & > span {
+ flex: 1;
+ color: @text-color-secondary;
+ font-size: 12px;
+ }
+ .avatarList {
+ flex: 0 1 auto;
+ }
+ }
+ .cardList {
+ margin-top: 24px;
+ }
+
+ :global {
+ .ant-list .ant-list-item-content-single {
+ max-width: 100%;
+ }
+ }
+}
diff --git a/demo/src/pages/list/search/projects/utils/utils.less b/demo/src/pages/list/search/projects/utils/utils.less
new file mode 100644
index 00000000..de1aa642
--- /dev/null
+++ b/demo/src/pages/list/search/projects/utils/utils.less
@@ -0,0 +1,50 @@
+.textOverflow() {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: break-all;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+ position: relative;
+ max-height: @line * 1.5em;
+ margin-right: -1em;
+ padding-right: 1em;
+ overflow: hidden;
+ line-height: 1.5em;
+ text-align: justify;
+ &::before {
+ position: absolute;
+ right: 14px;
+ bottom: 0;
+ padding: 0 1px;
+ background: @bg;
+ content: '...';
+ }
+ &::after {
+ position: absolute;
+ right: 14px;
+ width: 1em;
+ height: 1em;
+ margin-top: 0.2em;
+ background: white;
+ content: '';
+ }
+}
+
+// mixins for clearfix
+// ------------------------
+.clearfix() {
+ zoom: 1;
+ &::before,
+ &::after {
+ display: table;
+ content: ' ';
+ }
+ &::after {
+ clear: both;
+ height: 0;
+ font-size: 0;
+ visibility: hidden;
+ }
+}
diff --git a/demo/src/pages/list/table-list/_mock.ts b/demo/src/pages/list/table-list/_mock.ts
new file mode 100644
index 00000000..26724780
--- /dev/null
+++ b/demo/src/pages/list/table-list/_mock.ts
@@ -0,0 +1,177 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Request, Response } from 'express';
+import { parse } from 'url';
+import type { TableListItem, TableListParams } from './data.d';
+
+// mock tableListDataSource
+const genList = (current: number, pageSize: number) => {
+ const tableListDataSource: TableListItem[] = [];
+
+ for (let i = 0; i < pageSize; i += 1) {
+ const index = (current - 1) * 10 + i;
+ tableListDataSource.push({
+ key: index,
+ disabled: i % 6 === 0,
+ href: 'https://ant.design',
+ avatar: [
+ 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+ 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+ ][i % 2],
+ name: `TradeCode ${index}`,
+ owner: '曲丽丽',
+ desc: '这是一段描述',
+ callNo: Math.floor(Math.random() * 1000),
+ status: (Math.floor(Math.random() * 10) % 4).toString(),
+ updatedAt: new Date(),
+ createdAt: new Date(),
+ progress: Math.ceil(Math.random() * 100),
+ });
+ }
+ tableListDataSource.reverse();
+ return tableListDataSource;
+};
+
+let tableListDataSource = genList(1, 100);
+
+function getRule(req: Request, res: Response, u: string) {
+ let realUrl = u;
+ if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
+ realUrl = req.url;
+ }
+ const { current = 1, pageSize = 10 } = req.query;
+ const params = parse(realUrl, true).query as unknown as TableListParams;
+
+ let dataSource = [...tableListDataSource].slice(
+ ((current as number) - 1) * (pageSize as number),
+ (current as number) * (pageSize as number),
+ );
+ if (params.sorter) {
+ const sorter = JSON.parse(params.sorter as any);
+ dataSource = dataSource.sort((prev, next) => {
+ let sortNumber = 0;
+ Object.keys(sorter).forEach((key) => {
+ if (sorter[key] === 'descend') {
+ if (prev[key] - next[key] > 0) {
+ sortNumber += -1;
+ } else {
+ sortNumber += 1;
+ }
+ return;
+ }
+ if (prev[key] - next[key] > 0) {
+ sortNumber += 1;
+ } else {
+ sortNumber += -1;
+ }
+ });
+ return sortNumber;
+ });
+ }
+ if (params.filter) {
+ const filter = JSON.parse(params.filter as any) as Record{cardList}
+
+
+);
+
+const description = (
+
+
+ 曲丽丽
+
+
+);
+
+const desc2 = (
+ 2016-12-12 12:32
+
+
+ 周毛毛
+
+
+);
+
+const popoverContent = (
+
+ 催一下
+
+
+ 吴加号
+
+ 未响应 } />
+
+
+);
+
+const customDot = (dot: React.ReactNode, { status }: { status: string }) => {
+ if (status === 'process') {
+ return (
+
+ 耗时：2小时25分钟
+
+
+
+
+
+ {({ isMobile }) => (
+
+
+ )}
+
+
+
+
+ 付小小
+ 32943898021309809423
+ 3321944288191034921
+ 18112345678
+
+ 曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
+
+
+
+ 725
+ 2017-08-08
+
+ 某某数据
+
+
+
+ }
+ >
+ 725
+
+ 2017-08-08
+
+
+
+ 林东东
+ 1234567
+ XX公司 - YY部
+ 2017-08-08
+
+ 这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
+
+
+
+
+ Citrullus lanatus (Thunb.) Matsum. et
+ Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
+
+
+
+ 付小小
+ 1234568
+
+
+
+
+
+
+ {contentList[tabStatus.operationKey]}
+
+
+
+ 信息组
+退货商品
+ 退货进度
+
+ 您提交的内容有如下错误：
+
+
+
+
+
+);
+
+const desc2 = (
+
+ 曲丽丽
+
+ 2016-12-12 12:32
+
+
+);
+
+const content = (
+ <>
+
+ 周毛毛
+
+
+ +
+
+ );
+};
+
+export default Login;
diff --git a/demo/src/pages/user/register-result/index.tsx b/demo/src/pages/user/register-result/index.tsx
new file mode 100644
index 00000000..8b4fac58
--- /dev/null
+++ b/demo/src/pages/user/register-result/index.tsx
@@ -0,0 +1,42 @@
+import { Button, Result } from 'antd';
+import { Link } from 'umi';
+import React from 'react';
+import type { RouteChildrenProps } from 'react-router';
+
+import styles from './style.less';
+
+const actions = (
+
+ {SelectLang &&
+
+
+
+
+ {status === 'error' && loginType === 'account' && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export type LocationState = Record
+ 强度：强
+
+ ),
+ pass: (
+
+ 强度：中
+
+ ),
+ poor: (
+
+ 强度：太短
+
+ ),
+};
+
+const passwordProgressMap: {
+ ok: 'success';
+ pass: 'normal';
+ poor: 'exception';
+} = {
+ ok: 'success',
+ pass: 'normal',
+ poor: 'exception',
+};
+
+const Register: FC = () => {
+ const [count, setCount]: [number, any] = useState(0);
+ const [visible, setVisible]: [boolean, any] = useState(false);
+ const [prefix, setPrefix]: [string, any] = useState('86');
+ const [popover, setPopover]: [boolean, any] = useState(false);
+ const confirmDirty = false;
+ let interval: number | undefined;
+ const [form] = Form.useForm();
+
+ useEffect(
+ () => () => {
+ clearInterval(interval);
+ },
+ [interval],
+ );
+
+ const onGetCaptcha = () => {
+ let counts = 59;
+ setCount(counts);
+ interval = window.setInterval(() => {
+ counts -= 1;
+ setCount(counts);
+ if (counts === 0) {
+ clearInterval(interval);
+ }
+ }, 1000);
+ };
+
+ const getPasswordStatus = () => {
+ const value = form.getFieldValue('password');
+ if (value && value.length > 9) {
+ return 'ok';
+ }
+ if (value && value.length > 5) {
+ return 'pass';
+ }
+ return 'poor';
+ };
+
+ const { loading: submitting, run: register } = useRequest<{ data: StateType }>(fakeRegister, {
+ manual: true,
+ onSuccess: (data, params) => {
+ if (data.status === 'ok') {
+ message.success('注册成功！');
+ history.push({
+ pathname: '/user/register-result',
+ state: {
+ account: params.email,
+ },
+ });
+ }
+ },
+ });
+ const onFinish = (values: Store) => {
+ register(values);
+ };
+
+ const checkConfirm = (_: any, value: string) => {
+ const promise = Promise;
+ if (value && value !== form.getFieldValue('password')) {
+ return promise.reject('两次输入的密码不匹配!');
+ }
+ return promise.resolve();
+ };
+
+ const checkPassword = (_: any, value: string) => {
+ const promise = Promise;
+ // 没有值的情况
+ if (!value) {
+ setVisible(!!value);
+ return promise.reject('请输入密码!');
+ }
+ // 有值的情况
+ if (!visible) {
+ setVisible(!!value);
+ }
+ setPopover(!popover);
+ if (value.length < 6) {
+ return promise.reject('');
+ }
+ if (value && confirmDirty) {
+ form.validateFields(['confirm']);
+ }
+ return promise.resolve();
+ };
+
+ const changePrefix = (value: string) => {
+ setPrefix(value);
+ };
+
+ const renderPasswordProgress = () => {
+ const value = form.getFieldValue('password');
+ const passwordStatus = getPasswordStatus();
+ return value && value.length ? (
+
+
+ ) : null;
+ };
+
+ return (
+
+
+ );
+};
+export default Register;
diff --git a/demo/src/pages/user/register/service.ts b/demo/src/pages/user/register/service.ts
new file mode 100644
index 00000000..83801841
--- /dev/null
+++ b/demo/src/pages/user/register/service.ts
@@ -0,0 +1,22 @@
+import { request } from 'umi';
+
+export interface StateType {
+ status?: 'ok' | 'error';
+ currentAuthority?: 'user' | 'guest' | 'admin';
+}
+
+export interface UserRegisterParams {
+ mail: string;
+ password: string;
+ confirm: string;
+ mobile: string;
+ captcha: string;
+ prefix: string;
+}
+
+export async function fakeRegister(params: UserRegisterParams) {
+ return request('/api/register', {
+ method: 'POST',
+ data: params,
+ });
+}
diff --git a/demo/src/pages/user/register/style.less b/demo/src/pages/user/register/style.less
new file mode 100644
index 00000000..e13868f0
--- /dev/null
+++ b/demo/src/pages/user/register/style.less
@@ -0,0 +1,60 @@
+@import '~antd/es/style/themes/default.less';
+
+.main {
+ width: 368px;
+ margin: 0 auto;
+
+ h3 {
+ margin-bottom: 20px;
+ font-size: 16px;
+ }
+
+ .password {
+ margin-bottom: 24px;
+ :global {
+ .ant-form-item-explain {
+ display: none;
+ }
+ }
+ }
+
+ .getCaptcha {
+ display: block;
+ width: 100%;
+ }
+
+ .submit {
+ width: 50%;
+ }
+
+ .login {
+ float: right;
+ line-height: @btn-height-lg;
+ }
+}
+
+.success,
+.warning,
+.error {
+ transition: color 0.3s;
+}
+
+.success {
+ color: @success-color;
+}
+
+.warning {
+ color: @warning-color;
+}
+
+.error {
+ color: @error-color;
+}
+
+.progress-pass > .progress {
+ :global {
+ .ant-progress-bg {
+ background-color: @warning-color;
+ }
+ }
+}
diff --git a/demo/src/service-worker.js b/demo/src/service-worker.js
new file mode 100644
index 00000000..b86726cd
--- /dev/null
+++ b/demo/src/service-worker.js
@@ -0,0 +1,65 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-underscore-dangle */
+/* globals workbox */
+workbox.core.setCacheNameDetails({
+ prefix: 'antd-pro',
+ suffix: 'v5',
+});
+// Control all opened tabs ASAP
+workbox.clientsClaim();
+
+/**
+ * Use precaching list generated by workbox in build process.
+ * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.precaching
+ */
+workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
+
+/**
+ * Register a navigation route.
+ * https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route
+ */
+workbox.routing.registerNavigationRoute('/index.html');
+
+/**
+ * Use runtime cache:
+ * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.routing#.registerRoute
+ *
+ * Workbox provides all common caching strategies including CacheFirst, NetworkFirst etc.
+ * https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies
+ */
+
+/** Handle API requests */
+workbox.routing.registerRoute(/\/api\//, workbox.strategies.networkFirst());
+
+/** Handle third party requests */
+workbox.routing.registerRoute(
+ /^https:\/\/gw\.alipayobjects\.com\//,
+ workbox.strategies.networkFirst(),
+);
+workbox.routing.registerRoute(
+ /^https:\/\/cdnjs\.cloudflare\.com\//,
+ workbox.strategies.networkFirst(),
+);
+workbox.routing.registerRoute(/\/color.less/, workbox.strategies.networkFirst());
+
+/** Response to client after skipping waiting with MessageChannel */
+addEventListener('message', (event) => {
+ const replyPort = event.ports[0];
+ const message = event.data;
+ if (replyPort && message && message.type === 'skip-waiting') {
+ event.waitUntil(
+ self.skipWaiting().then(
+ () => {
+ replyPort.postMessage({
+ error: null,
+ });
+ },
+ (error) => {
+ replyPort.postMessage({
+ error,
+ });
+ },
+ ),
+ );
+ }
+});
diff --git a/demo/src/services/ant-design-pro/api.ts b/demo/src/services/ant-design-pro/api.ts
new file mode 100644
index 00000000..74fce0c3
--- /dev/null
+++ b/demo/src/services/ant-design-pro/api.ts
@@ -0,0 +1,85 @@
+// @ts-ignore
+/* eslint-disable */
+import { request } from 'umi';
+
+/** 获取当前的用户 GET /api/currentUser */
+export async function currentUser(options?: { [key: string]: any }) {
+ return request<{
+ data: API.CurrentUser;
+ }>('/api/currentUser', {
+ method: 'GET',
+ ...(options || {}),
+ });
+}
+
+/** 退出登录接口 POST /api/login/outLogin */
+export async function outLogin(options?: { [key: string]: any }) {
+ return request