fix all eslint error

AccountCenter/src/_mock.ts

@@ -21,69 +21,6 @@ const avatars = [
   'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', // Webpack
 ];
 
-const getNotice = [
-  {
-    id: 'xxx1',
-    title: titles[0],
-    logo: avatars[0],
-    description: '那是一种内在的东西，他们到达不了，也无法触及的',
-    updatedAt: new Date(),
-    member: '科学搬砖组',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx2',
-    title: titles[1],
-    logo: avatars[1],
-    description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
-    updatedAt: new Date('2017-07-24'),
-    member: '全组都是吴彦祖',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx3',
-    title: titles[2],
-    logo: avatars[2],
-    description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
-    updatedAt: new Date(),
-    member: '中二少女团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx4',
-    title: titles[3],
-    logo: avatars[3],
-    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
-    updatedAt: new Date('2017-07-23'),
-    member: '程序员日常',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx5',
-    title: titles[4],
-    logo: avatars[4],
-    description: '凛冬将至',
-    updatedAt: new Date('2017-07-23'),
-    member: '高逼格设计天团',
-    href: '',
-    memberLink: '',
-  },
-  {
-    id: 'xxx6',
-    title: titles[5],
-    logo: avatars[5],
-    description: '生命就像一盒巧克力，结果往往出人意料',
-    updatedAt: new Date('2017-07-23'),
-    member: '骗你来学计算机',
-    href: '',
-    memberLink: '',
-  },
-];
-
 const covers = [
   'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
   'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',

AccountCenter/src/components/Projects/index.tsx

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import moment from 'moment';
 import AvatarList from '../AvatarList';
-import { ListItemDataType } from '../../data';
+import { ListItemDataType } from '../../data.d';
 import { ModalState } from '../../model';
 import styles from './index.less';
 

AccountCenter/src/index.tsx

@@ -93,6 +93,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
     tabKey: 'articles',
   };
 
+  public input: Input | null | undefined = undefined;
+
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -138,8 +140,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
     });
   };
 
-  public input: Input | null | undefined;
-
   renderChildrenByTabKey = (tabKey: BLOCK_NAME_CAMEL_CASEState['tabKey']) => {
     if (tabKey === 'projects') {
       return <Projects />;

AccountSettings/src/components/base.tsx

@@ -72,6 +72,8 @@ interface BaseViewProps extends FormComponentProps {
   currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
 }))
 class BaseView extends Component<BaseViewProps> {
+  view: HTMLDivElement | undefined = undefined;
+
   componentDidMount() {
     this.setBaseInfo();
   }
@@ -113,8 +115,6 @@ class BaseView extends Component<BaseViewProps> {
     });
   };
 
-  view: HTMLDivElement | undefined;
-
   render() {
     const {
       form: { getFieldDecorator },

AccountSettings/src/index.tsx

@@ -34,6 +34,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,
   PAGE_NAME_UPPER_CAMEL_CASEState
 > {
+  main: HTMLDivElement | undefined = undefined;
+
   constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     super(props);
     const menuMap = {
@@ -109,8 +111,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     });
   };
 
-  main: HTMLDivElement | undefined;
-
   renderChildren = () => {
     const { selectKey } = this.state;
     switch (selectKey) {

DashboardAnalysis/package.json

@@ -12,23 +12,27 @@
     "dev": "umi dev"
   },
   "dependencies": {
+    "@ant-design/pro-layout": "^4.5.5",
     "@antv/data-set": "^0.10.2",
     "antd": "^3.16.3",
     "bizcharts": "^3.5.3-beta.0",
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
-    "dva": "^2.4.0",
+    "classnames": "^2.2.6",
+    "dva": "^2.4.0", 
+    "@types/lodash.debounce": "^4.0.6",
+    "lodash.debounce": "^4.0.8",
     "moment": "^2.22.2",
     "numeral": "^2.0.6",
     "react": "^16.6.3",
     "react-fittext": "^1.0.0",
     "redux": "^4.0.1",
+    "umi-plugin-react": "^1.7.2",
     "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "@types/numeral": "^0.0.25",
     "umi": "^2.6.9",
-    "umi-plugin-block-dev": "^1.1.0",
-    "umi-plugin-react": "^1.7.2"
+    "umi-plugin-block-dev": "^1.1.0"
   },
   "blockConfig": {
     "specVersion": "0.1"

DashboardAnalysis/src/_mock.ts

 import moment from 'moment';
-import { IAnalysisData, IRadarData, IVisitData } from './data.d';
+import { AnalysisData, RadarData, VisitDataType } from './data.d';
 
 // mock data
-const visitData: IVisitData[] = [];
+const visitData: VisitDataType[] = [];
 const beginDay = new Date().getTime();
 
 const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
@@ -159,7 +159,7 @@ const radarOriginData = [
   },
 ];
 
-const radarData: IRadarData[] = [];
+const radarData: RadarData[] = [];
 const radarTitleMap = {
   ref: '引用',
   koubei: '口碑',
@@ -179,7 +179,7 @@ radarOriginData.forEach(item => {
   });
 });
 
-const getFakeChartData: IAnalysisData = {
+const getFakeChartData: AnalysisData = {
   visitData,
   visitData2,
   salesData,

DashboardAnalysis/src/components/Charts/Bar/index.tsx

 import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
 
-import Bind from 'lodash-decorators/bind';
-import Debounce from 'lodash-decorators/debounce';
+import Debounce from 'lodash.debounce';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 
-export interface IBarProps {
+export interface BarProps {
   title: React.ReactNode;
   color?: string;
   padding?: [number, number, number, number];
@@ -21,7 +20,7 @@ export interface IBarProps {
 }
 
 class Bar extends Component<
-  IBarProps,
+  BarProps,
   {
     autoHideXLabels: boolean;
   }
@@ -30,29 +29,11 @@ class Bar extends Component<
     autoHideXLabels: false,
   };
 
-  root: HTMLDivElement | undefined;
+  root: HTMLDivElement | undefined = undefined;
 
-  node: HTMLDivElement | undefined;
+  node: HTMLDivElement | undefined = undefined;
 
-  componentDidMount() {
-    window.addEventListener('resize', this.resize, { passive: true });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
-
-  handleRoot = (n: HTMLDivElement) => {
-    this.root = n;
-  };
-
-  handleRef = (n: HTMLDivElement) => {
-    this.node = n;
-  };
-
-  @Bind()
-  @Debounce(400)
-  resize() {
+  resize = Debounce(() => {
     if (!this.node || !this.node.parentNode) {
       return;
     }
@@ -75,8 +56,24 @@ class Bar extends Component<
         autoHideXLabels: false,
       });
     }
+  }, 500);
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resize, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
   }
 
+  handleRoot = (n: HTMLDivElement) => {
+    this.root = n;
+  };
+
+  handleRef = (n: HTMLDivElement) => {
+    this.node = n;
+  };
+
   render() {
     const {
       height = 1,
@@ -120,8 +117,8 @@ class Bar extends Component<
             <Axis
               name="x"
               title={false}
-              label={autoHideXLabels ? false : {}}
-              tickLine={autoHideXLabels ? false : {}}
+              label={autoHideXLabels ? undefined : {}}
+              tickLine={autoHideXLabels ? undefined : {}}
             />
             <Axis name="y" min={0} />
             <Tooltip showTitle={false} crosshairs={false} />

DashboardAnalysis/src/components/Charts/ChartCard/index.tsx

@@ -8,7 +8,7 @@ type totalType = () => React.ReactNode;
 
 const renderTotal = (total?: number | totalType | React.ReactNode) => {
   if (!total) {
-    return;
+    return null;
   }
   let totalDom;
   switch (typeof total) {
@@ -24,7 +24,7 @@ const renderTotal = (total?: number | totalType | React.ReactNode) => {
   return totalDom;
 };
 
-export interface IChartCardProps extends CardProps {
+export interface ChartCardProps extends CardProps {
   title: React.ReactNode;
   action?: React.ReactNode;
   total?: React.ReactNode | number | (() => React.ReactNode | number);
@@ -34,7 +34,7 @@ export interface IChartCardProps extends CardProps {
   style?: React.CSSProperties;
 }
 
-class ChartCard extends React.Component<IChartCardProps> {
+class ChartCard extends React.Component<ChartCardProps> {
   renderContent = () => {
     const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
     if (loading) {

DashboardAnalysis/src/components/Charts/Field/index.tsx

 import React from 'react';
 import styles from './index.less';
 
-export interface IFieldProps {
+export interface FieldProps {
   label: React.ReactNode;
   value: React.ReactNode;
   style?: React.CSSProperties;
 }
 
-const Field: React.SFC<IFieldProps> = ({ label, value, ...rest }) => (
+const Field: React.SFC<FieldProps> = ({ label, value, ...rest }) => (
   <div className={styles.field} {...rest}>
     <span className={styles.label}>{label}</span>
     <span className={styles.number}>{value}</span>

DashboardAnalysis/src/components/Charts/Gauge/index.tsx

@@ -5,7 +5,7 @@ import autoHeight from '../autoHeight';
 
 const { Arc, Html, Line } = Guide;
 
-export interface IGaugeProps {
+export interface GaugeProps {
   title: React.ReactNode;
   color?: string;
   height?: number;
@@ -31,148 +31,149 @@ const defaultFormatter = (val: string): string => {
   }
 };
 
-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',
-      },
-    });
-  },
-});
+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',
+        },
+      });
+    },
+  });
+}
 
-class Gauge extends React.Component<IGaugeProps> {
-  render() {
-    const {
-      title,
-      height = 1,
-      percent,
-      forceFit = true,
-      formatter = defaultFormatter,
-      color = '#2F9CFF',
-      bgColor = '#F0F2F5',
-    } = this.props;
-    const cols = {
-      value: {
-        type: 'linear',
-        min: 0,
-        max: 10,
-        tickCount: 6,
-        nice: true,
-      },
-    };
-    const renderHtml = () => `
+const Gauge: React.FC<GaugeProps> = props => {
+  const {
+    title,
+    height = 1,
+    percent,
+    forceFit = true,
+    formatter = defaultFormatter,
+    color = '#2F9CFF',
+    bgColor = '#F0F2F5',
+  } = props;
+  const cols = {
+    value: {
+      type: 'linear',
+      min: 0,
+      max: 10,
+      tickCount: 6,
+      nice: true,
+    },
+  };
+  const data = [{ value: percent / 10 }];
+  const renderHtml = () => `
     <div style="width: 300px;text-align: center;font-size: 12px!important;">
       <p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
       <p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
         ${(data[0].value * 10).toFixed(2)}%
       </p>
     </div>`;
-    const data = [{ value: percent / 10 }];
-    const textStyle: {
-      fontSize: number;
-      fill: string;
-      textAlign: 'center';
-    } = {
-      fontSize: 12,
-      fill: 'rgba(0, 0, 0, 0.65)',
-      textAlign: 'center',
-    };
-    return (
-      <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
-        <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
-        <Axis name="1" line={undefined} />
-        <Axis
-          line={undefined}
-          tickLine={undefined}
-          subTickLine={undefined}
-          name="value"
-          zIndex={2}
-          label={{
-            offset: -12,
-            formatter,
-            textStyle,
+  const textStyle: {
+    fontSize: number;
+    fill: string;
+    textAlign: 'center';
+  } = {
+    fontSize: 12,
+    fill: 'rgba(0, 0, 0, 0.65)',
+    textAlign: 'center',
+  };
+
+  return (
+    <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
+      <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
+      <Axis name="1" line={undefined} />
+      <Axis
+        line={undefined}
+        tickLine={undefined}
+        subTickLine={undefined}
+        name="value"
+        zIndex={2}
+        label={{
+          offset: -12,
+          formatter,
+          textStyle,
+        }}
+      />
+      <Guide>
+        <Line
+          start={[3, 0.905]}
+          end={[3, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 2,
           }}
         />
-        <Guide>
-          <Line
-            start={[3, 0.905]}
-            end={[3, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 2,
-            }}
-          />
-          <Line
-            start={[5, 0.905]}
-            end={[5, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 3,
-            }}
-          />
-          <Line
-            start={[7, 0.905]}
-            end={[7, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: undefined,
-              lineWidth: 3,
-            }}
-          />
-          <Arc
-            start={[0, 0.965]}
-            end={[10, 0.965]}
-            style={{
-              stroke: bgColor,
-              lineWidth: 10,
-            }}
-          />
-          <Arc
-            start={[0, 0.965]}
-            end={[data[0].value, 0.965]}
-            style={{
-              stroke: color,
-              lineWidth: 10,
-            }}
-          />
-          <Html position={['50%', '95%']} html={renderHtml()} />
-        </Guide>
-        <Geom
-          line={false}
-          type="point"
-          position="value*1"
-          shape="pointer"
-          color={color}
-          active={false}
+        <Line
+          start={[5, 0.905]}
+          end={[5, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 3,
+          }}
         />
-      </Chart>
-    );
-  }
-}
+        <Line
+          start={[7, 0.905]}
+          end={[7, 0.85]}
+          lineStyle={{
+            stroke: color,
+            lineDash: undefined,
+            lineWidth: 3,
+          }}
+        />
+        <Arc
+          start={[0, 0.965]}
+          end={[10, 0.965]}
+          style={{
+            stroke: bgColor,
+            lineWidth: 10,
+          }}
+        />
+        <Arc
+          start={[0, 0.965]}
+          end={[data[0].value, 0.965]}
+          style={{
+            stroke: color,
+            lineWidth: 10,
+          }}
+        />
+        <Html position={['50%', '95%']} html={renderHtml()} />
+      </Guide>
+      <Geom
+        line={false}
+        type="point"
+        position="value*1"
+        shape="pointer"
+        color={color}
+        active={false}
+      />
+    </Chart>
+  );
+};
 
 export default autoHeight()(Gauge);

DashboardAnalysis/src/components/Charts/MiniArea/index.tsx

-import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
+import { Axis, Chart, Geom, Tooltip, AxisProps } from 'bizcharts';
 
 import React from 'react';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 
-export interface IAxis {
-  title: any;
-  line: any;
-  gridAlign: any;
-  labels: any;
-  tickLine: any;
-  grid: any;
-}
-
-export interface IMiniAreaProps {
+export interface MiniAreaProps {
   color?: string;
   height?: number;
   borderColor?: string;
   line?: boolean;
   animate?: boolean;
-  xAxis?: IAxis;
+  xAxis?: AxisProps;
   forceFit?: boolean;
-  scale?: { x: any; y: any };
-  yAxis?: IAxis;
+  scale?: {
+    x?: {
+      tickCount: number;
+    };
+    y?: {
+      tickCount: number;
+    };
+  };
+  yAxis?: Partial<AxisProps>;
   borderWidth?: number;
   data: {
     x: number | string;
@@ -30,105 +28,103 @@ export interface IMiniAreaProps {
   }[];
 }
 
-class MiniArea extends React.Component<IMiniAreaProps> {
-  render() {
-    const {
-      height = 1,
-      data = [],
-      forceFit = true,
-      color = 'rgba(24, 144, 255, 0.2)',
-      borderColor = '#1089ff',
-      scale = { x: {}, y: {} },
-      borderWidth = 2,
-      line,
-      xAxis,
-      yAxis,
-      animate = true,
-    } = this.props;
+const MiniArea: React.FC<MiniAreaProps> = props => {
+  const {
+    height = 1,
+    data = [],
+    forceFit = true,
+    color = 'rgba(24, 144, 255, 0.2)',
+    borderColor = '#1089ff',
+    scale = { x: {}, y: {} },
+    borderWidth = 2,
+    line,
+    xAxis,
+    yAxis,
+    animate = true,
+  } = props;
 
-    const padding: [number, number, number, number] = [36, 5, 30, 5];
+  const padding: [number, number, number, number] = [36, 5, 30, 5];
 
-    const scaleProps = {
-      x: {
-        type: 'cat',
-        range: [0, 1],
-        ...scale!.x,
-      },
-      y: {
-        min: 0,
-        ...scale!.y,
-      },
-    };
+  const scaleProps = {
+    x: {
+      type: 'cat',
+      range: [0, 1],
+      ...scale.x,
+    },
+    y: {
+      min: 0,
+      ...scale.y,
+    },
+  };
 
-    const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
-      'x*y',
-      (x: string, y: string) => ({
-        name: x,
-        value: y,
-      }),
-    ];
+  const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
+    'x*y',
+    (x: string, y: string) => ({
+      name: x,
+      value: y,
+    }),
+  ];
 
-    const chartHeight = height + 54;
+  const chartHeight = height + 54;
 
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          {height > 0 && (
-            <Chart
-              animate={animate}
-              scale={scaleProps}
-              height={chartHeight}
-              forceFit={forceFit}
-              data={data}
-              padding={padding}
-            >
-              <Axis
-                key="axis-x"
-                name="x"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...xAxis}
-              />
-              <Axis
-                key="axis-y"
-                name="y"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...yAxis}
-              />
-              <Tooltip showTitle={false} crosshairs={false} />
+  return (
+    <div className={styles.miniChart} style={{ height }}>
+      <div className={styles.chartContent}>
+        {height > 0 && (
+          <Chart
+            animate={animate}
+            scale={scaleProps}
+            height={chartHeight}
+            forceFit={forceFit}
+            data={data}
+            padding={padding}
+          >
+            <Axis
+              key="axis-x"
+              name="x"
+              label={undefined}
+              line={undefined}
+              tickLine={undefined}
+              grid={undefined}
+              {...xAxis}
+            />
+            <Axis
+              key="axis-y"
+              name="y"
+              label={undefined}
+              line={undefined}
+              tickLine={undefined}
+              grid={undefined}
+              {...yAxis}
+            />
+            <Tooltip showTitle={false} crosshairs={false} />
+            <Geom
+              type="area"
+              position="x*y"
+              color={color}
+              tooltip={tooltip}
+              shape="smooth"
+              style={{
+                fillOpacity: 1,
+              }}
+            />
+            {line ? (
               <Geom
-                type="area"
+                type="line"
                 position="x*y"
-                color={color}
-                tooltip={tooltip}
                 shape="smooth"
-                style={{
-                  fillOpacity: 1,
-                }}
+                color={borderColor}
+                size={borderWidth}
+                tooltip={false}
               />
-              {line ? (
-                <Geom
-                  type="line"
-                  position="x*y"
-                  shape="smooth"
-                  color={borderColor}
-                  size={borderWidth}
-                  tooltip={false}
-                />
-              ) : (
-                <span style={{ display: 'none' }} />
-              )}
-            </Chart>
-          )}
-        </div>
+            ) : (
+              <span style={{ display: 'none' }} />
+            )}
+          </Chart>
+        )}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default autoHeight()(MiniArea);

DashboardAnalysis/src/components/Charts/MiniBar/index.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 
-export interface IMiniBarProps {
+export interface MiniBarProps {
   color?: string;
   height?: number;
   data: {
@@ -15,48 +15,40 @@ export interface IMiniBarProps {
   style?: React.CSSProperties;
 }
 
-class MiniBar extends React.Component<IMiniBarProps> {
-  render() {
-    const { height = 0, forceFit = true, color = '#1890FF', data = [] } = this.props;
-
-    const scale = {
-      x: {
-        type: 'cat',
-      },
-      y: {
-        min: 0,
-      },
-    };
-
-    const padding: [number, number, number, number] = [36, 5, 30, 5];
-
-    const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
-      'x*y',
-      (x: string, y: string) => ({
-        name: x,
-        value: y,
-      }),
-    ];
-
-    // for tooltip not to be hide
-    const chartHeight = height + 54;
-
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          <Chart
-            scale={scale}
-            height={chartHeight}
-            forceFit={forceFit}
-            data={data}
-            padding={padding}
-          >
-            <Tooltip showTitle={false} crosshairs={false} />
-            <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
-          </Chart>
-        </div>
+const MiniBar: React.FC<MiniBarProps> = props => {
+  const { height = 0, forceFit = true, color = '#1890FF', data = [] } = props;
+
+  const scale = {
+    x: {
+      type: 'cat',
+    },
+    y: {
+      min: 0,
+    },
+  };
+
+  const padding: [number, number, number, number] = [36, 5, 30, 5];
+
+  const tooltip: [string, (...args: any[]) => { name?: string; value: string }] = [
+    'x*y',
+    (x: string, y: string) => ({
+      name: x,
+      value: y,
+    }),
+  ];
+
+  // for tooltip not to be hide
+  const chartHeight = height + 54;
+
+  return (
+    <div className={styles.miniChart} style={{ height }}>
+      <div className={styles.chartContent}>
+        <Chart scale={scale} height={chartHeight} forceFit={forceFit} data={data} padding={padding}>
+          <Tooltip showTitle={false} crosshairs={false} />
+          <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
+        </Chart>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 export default autoHeight()(MiniBar);

DashboardAnalysis/src/components/Charts/MiniProgress/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip } from 'antd';
 import styles from './index.less';
 
-export interface IMiniProgressProps {
+export interface MiniProgressProps {
   target: number;
   targetLabel?: string;
   color?: string;
@@ -11,31 +11,31 @@ export interface IMiniProgressProps {
   style?: React.CSSProperties;
 }
 
-const MiniProgress: React.SFC<IMiniProgressProps> = ({
+const MiniProgress: React.SFC<MiniProgressProps> = ({
   targetLabel,
   target,
   color = 'rgb(19, 194, 194)',
   strokeWidth,
   percent,
 }) => (
-    <div className={styles.miniProgress}>
-      <Tooltip title={targetLabel}>
-        <div className={styles.target} style={{ left: target ? `${target}%` : undefined }}>
-          <span style={{ backgroundColor: color || undefined }} />
-          <span style={{ backgroundColor: color || undefined }} />
-        </div>
-      </Tooltip>
-      <div className={styles.progressWrap}>
-        <div
-          className={styles.progress}
-          style={{
-            backgroundColor: color || undefined,
-            width: percent ? `${percent}%` : undefined,
-            height: strokeWidth || undefined,
-          }}
-        />
+  <div className={styles.miniProgress}>
+    <Tooltip title={targetLabel}>
+      <div className={styles.target} style={{ left: target ? `${target}%` : undefined }}>
+        <span style={{ backgroundColor: color || undefined }} />
+        <span style={{ backgroundColor: color || undefined }} />
       </div>
+    </Tooltip>
+    <div className={styles.progressWrap}>
+      <div
+        className={styles.progress}
+        style={{
+          backgroundColor: color || undefined,
+          width: percent ? `${percent}%` : undefined,
+          height: strokeWidth || undefined,
+        }}
+      />
     </div>
-  );
+  </div>
+);
 
 export default MiniProgress;

DashboardAnalysis/src/components/Charts/Pie/index.tsx

 import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
 
-import Bind from 'lodash-decorators/bind';
 import { DataView } from '@antv/data-set';
-import Debounce from 'lodash-decorators/debounce';
+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 interface IPieProps {
+export interface PieProps {
   animate?: boolean;
   color?: string;
   colors?: string[];
@@ -35,21 +34,46 @@ export interface IPieProps {
   valueFormat?: (value: string) => string | React.ReactNode;
   subTitle?: React.ReactNode;
 }
-interface IPieState {
+interface PieState {
   legendData: { checked: boolean; x: string; color: string; percent: number; y: string }[];
   legendBlock: boolean;
 }
-class Pie extends Component<IPieProps, IPieState> {
-  state: IPieState = {
+class Pie extends Component<PieProps, PieState> {
+  state: PieState = {
     legendData: [],
     legendBlock: false,
   };
 
-  requestRef: number | undefined;
+  requestRef: number | undefined = undefined;
 
-  root!: HTMLDivElement;
+  root: HTMLDivElement | undefined = undefined;
 
-  chart: G2.Chart | undefined;
+  chart: G2.Chart | undefined = undefined;
+
+  // for window resize auto responsive legend
+  resize = Debounce(() => {
+    const { hasLegend } = this.props;
+    const { legendBlock } = this.state;
+    if (!hasLegend || !this.root) {
+      window.removeEventListener('resize', this.resize);
+      return;
+    }
+    if (
+      this.root &&
+      this.root.parentNode &&
+      (this.root.parentNode as HTMLElement).clientWidth <= 380
+    ) {
+      if (!legendBlock) {
+        this.setState({
+          legendBlock: true,
+        });
+      }
+    } else if (legendBlock) {
+      this.setState({
+        legendBlock: false,
+      });
+    }
+  }, 400);
 
   componentDidMount() {
     window.addEventListener(
@@ -61,7 +85,7 @@ class Pie extends Component<IPieProps, IPieState> {
     );
   }
 
-  componentDidUpdate(preProps: IPieProps) {
+  componentDidUpdate(preProps: PieProps) {
     const { data } = this.props;
     if (data !== preProps.data) {
       // because of charts data create when rendered
@@ -93,7 +117,7 @@ class Pie extends Component<IPieProps, IPieState> {
     if (!this.chart) return;
     const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
     if (!geom) return;
-    const items = geom.get('dataArray') || []; // 获取图形对应的
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
 
     const legendData = items.map((item: { color: any; _origin: any }[]) => {
       /* eslint no-underscore-dangle:0 */
@@ -130,33 +154,6 @@ class Pie extends Component<IPieProps, IPieState> {
     });
   };
 
-  // for window resize auto responsive legend
-  @Bind()
-  @Debounce(300)
-  resize() {
-    const { hasLegend } = this.props;
-    const { legendBlock } = this.state;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (
-      this.root &&
-      this.root.parentNode &&
-      (this.root.parentNode as HTMLElement).clientWidth <= 380
-    ) {
-      if (!legendBlock) {
-        this.setState({
-          legendBlock: true,
-        });
-      }
-    } else if (legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
-  }
-
   render() {
     const {
       valueFormat,

DashboardAnalysis/src/components/Charts/TagCloud/index.tsx

 import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
 
-import Bind from 'lodash-decorators/bind';
 import DataSet from '@antv/data-set';
-import Debounce from 'lodash-decorators/debounce';
+import Debounce from 'lodash.debounce';
 import classNames from 'classnames';
 import autoHeight from '../autoHeight';
 import styles from './index.less';
@@ -13,7 +12,7 @@ import styles from './index.less';
 
 const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
 
-export interface ITagCloudProps {
+export interface TagCloudProps {
   data: {
     name: string;
     value: number;
@@ -23,26 +22,26 @@ export interface ITagCloudProps {
   style?: React.CSSProperties;
 }
 
-interface ITagCloudState {
+interface TagCloudState {
   dv: any;
   height?: number;
   width: number;
 }
 
-class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
+class TagCloud extends Component<TagCloudProps, TagCloudState> {
   state = {
     dv: null,
     height: 0,
     width: 0,
   };
 
-  isUnmount!: boolean;
+  isUnmount: boolean = false;
 
-  requestRef!: number;
+  requestRef: number = 0;
 
-  root: HTMLDivElement | undefined;
+  root: HTMLDivElement | undefined = undefined;
 
-  imageMask: HTMLImageElement | undefined;
+  imageMask: HTMLImageElement | undefined = undefined;
 
   componentDidMount() {
     requestAnimationFrame(() => {
@@ -52,7 +51,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     window.addEventListener('resize', this.resize, { passive: true });
   }
 
-  componentDidUpdate(preProps?: ITagCloudProps) {
+  componentDidUpdate(preProps?: TagCloudProps) {
     const { data } = this.props;
     if (preProps && JSON.stringify(preProps.data) !== JSON.stringify(data)) {
       this.renderChart(this.props);
@@ -84,7 +83,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       origin?: any;
       color?: any;
     }) {
-      return Object.assign({}, cfg.style, {
+      return {
+        ...cfg.style,
         fillOpacity: cfg.opacity,
         fontSize: cfg.origin._origin.size,
         rotate: cfg.origin._origin.rotate,
@@ -93,7 +93,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
         fontFamily: cfg.origin._origin.font,
         fill: cfg.color,
         textBaseline: 'Alphabetic',
-      });
+      };
     }
 
     (Shape as any).registerShape('point', 'cloud', {
@@ -103,18 +103,17 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       ) {
         const attrs = getTextAttrs(cfg);
         return container.addShape('text', {
-          attrs: Object.assign(attrs, {
+          attrs: {
+            ...attrs,
             x: cfg.x,
             y: cfg.y,
-          }),
+          },
         });
       },
     });
   };
 
-  @Bind()
-  @Debounce(500)
-  renderChart(nextProps: ITagCloudProps) {
+  renderChart = Debounce((nextProps: TagCloudProps) => {
     // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
     const { data, height } = nextProps || this.props;
 
@@ -141,8 +140,8 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
           return 0;
         },
         fontSize(d: { value: number }) {
-          // eslint-disable-next-line
-          return Math.pow((d.value - min) / (max - min), 2) * (17.5 - 5) + 5;
+          const size = ((d.value - min) / (max - min)) ** 2;
+          return size * (17.5 - 5) + 5;
         },
       });
 
@@ -166,7 +165,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     } else {
       onload();
     }
-  }
+  }, 500);
 
   render() {
     const { className, height } = this.props;

DashboardAnalysis/src/components/Charts/TimelineChart/index.tsx

@@ -6,7 +6,7 @@ import Slider from 'bizcharts-plugin-slider';
 import autoHeight from '../autoHeight';
 import styles from './index.less';
 
-export interface ITimelineChartProps {
+export interface TimelineChartProps {
   data: {
     x: number;
     y1: number;
@@ -20,115 +20,113 @@ export interface ITimelineChartProps {
   borderWidth?: number;
 }
 
-class TimelineChart extends React.Component<ITimelineChartProps> {
-  render() {
-    const {
-      title,
-      height = 400,
-      padding = [60, 20, 40, 40] as [number, number, number, number],
-      titleMap = {
-        y1: 'y1',
-        y2: 'y2',
-      },
-      borderWidth = 2,
-      data: sourceData,
-    } = this.props;
+const TimelineChart: React.FC<TimelineChartProps> = props => {
+  const {
+    title,
+    height = 400,
+    padding = [60, 20, 40, 40] as [number, number, number, number],
+    titleMap = {
+      y1: 'y1',
+      y2: 'y2',
+    },
+    borderWidth = 2,
+    data: sourceData,
+  } = props;
+
+  const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
 
-    const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
+  data.sort((a, b) => a.x - b.x);
 
-    data.sort((a, b) => a.x - b.x);
+  let max;
+  if (data[0] && data[0].y1 && data[0].y2) {
+    max = Math.max(
+      [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
+      [...data].sort((a, b) => b.y2 - a.y2)[0].y2,
+    );
+  }
 
-    let max;
-    if (data[0] && data[0].y1 && data[0].y2) {
-      max = Math.max(
-        [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
-        [...data].sort((a, b) => b.y2 - a.y2)[0].y2,
-      );
-    }
+  const ds = new DataSet({
+    state: {
+      start: data[0].x,
+      end: data[data.length - 1].x,
+    },
+  });
 
-    const ds = new DataSet({
-      state: {
-        start: data[0].x,
-        end: data[data.length - 1].x,
+  const dv = ds.createView();
+  dv.source(data)
+    .transform({
+      type: 'filter',
+      callback: (obj: { x: string }) => {
+        const date = obj.x;
+        return date <= ds.state.end && date >= ds.state.start;
+      },
+    })
+    .transform({
+      type: 'map',
+      callback(row: { y1: string; y2: string }) {
+        const newRow = { ...row };
+        newRow[titleMap.y1] = row.y1;
+        newRow[titleMap.y2] = row.y2;
+        return newRow;
       },
+    })
+    .transform({
+      type: 'fold',
+      fields: [titleMap.y1, titleMap.y2], // 展开字段集
+      key: 'key', // key字段
+      value: 'value', // value字段
     });
 
-    const dv = ds.createView();
-    dv.source(data)
-      .transform({
-        type: 'filter',
-        callback: (obj: { x: string }) => {
-          const date = obj.x;
-          return date <= ds.state.end && date >= ds.state.start;
-        },
-      })
-      .transform({
-        type: 'map',
-        callback(row: { y1: string; y2: string }) {
-          const newRow = { ...row };
-          newRow[titleMap.y1] = row.y1;
-          newRow[titleMap.y2] = row.y2;
-          return newRow;
-        },
-      })
-      .transform({
-        type: 'fold',
-        fields: [titleMap.y1, titleMap.y2], // 展开字段集
-        key: 'key', // key字段
-        value: 'value', // value字段
-      });
+  const timeScale = {
+    type: 'time',
+    tickInterval: 60 * 60 * 1000,
+    mask: 'HH:mm',
+    range: [0, 1],
+  };
 
-    const timeScale = {
-      type: 'time',
-      tickInterval: 60 * 60 * 1000,
-      mask: 'HH:mm',
-      range: [0, 1],
-    };
+  const cols = {
+    x: timeScale,
+    value: {
+      max,
+      min: 0,
+    },
+  };
 
-    const cols = {
-      x: timeScale,
-      value: {
-        max,
-        min: 0,
-      },
-    };
+  const SliderGen = () => (
+    <Slider
+      padding={[0, padding[1] + 20, 0, padding[3]]}
+      width="auto"
+      height={26}
+      xAxis="x"
+      yAxis="y1"
+      scales={{ x: timeScale }}
+      data={data}
+      start={ds.state.start}
+      end={ds.state.end}
+      backgroundChart={{ type: 'line' }}
+      onChange={({ startValue, endValue }: { startValue: string; endValue: string }) => {
+        ds.setState('start', startValue);
+        ds.setState('end', endValue);
+      }}
+    />
+  );
 
-    const SliderGen = () => (
-      <Slider
-        padding={[0, padding[1] + 20, 0, padding[3]]}
-        width="auto"
-        height={26}
-        xAxis="x"
-        yAxis="y1"
-        scales={{ x: timeScale }}
-        data={data}
-        start={ds.state.start}
-        end={ds.state.end}
-        backgroundChart={{ type: 'line' }}
-        onChange={({ startValue, endValue }: { startValue: string; endValue: string }) => {
-          ds.setState('start', startValue);
-          ds.setState('end', endValue);
-        }}
-      />
-    );
-
-    return (
-      <div className={styles.timelineChart} style={{ height: height + 30 }}>
-        <div>
-          {title && <h4>{title}</h4>}
-          <Chart height={height} padding={padding} data={dv} scale={cols} forceFit>
-            <Axis name="x" />
-            <Tooltip />
-            <Legend name="key" position="top" />
-            <Geom type="line" position="x*value" size={borderWidth} color="key" />
-          </Chart>
-          <div style={{ marginRight: -20 }}>
-            <SliderGen />
-          </div>
+  return (
+    <div className={styles.timelineChart} style={{ height: height + 30 }}>
+      <div>
+        {title && <h4>{title}</h4>}
+        <Chart height={height} padding={padding} data={dv} scale={cols} forceFit>
+          <Axis name="x" />
+          <Tooltip />
+          <Legend name="key" position="top" />
+          <Geom type="line" position="x*value" size={borderWidth} color="key" />
+        </Chart>
+        <div style={{ marginRight: -20 }}>
+          <SliderGen />
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default autoHeight()(TimelineChart);

DashboardAnalysis/src/components/Charts/WaterWave/index.tsx

@@ -7,7 +7,7 @@ import styles from './index.less';
 /* eslint no-mixed-operators: 0 */
 // riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
 
-export interface IWaterWaveProps {
+export interface WaterWaveProps {
   title: React.ReactNode;
   color?: string;
   height?: number;
@@ -15,16 +15,16 @@ export interface IWaterWaveProps {
   style?: React.CSSProperties;
 }
 
-class WaterWave extends Component<IWaterWaveProps> {
+class WaterWave extends Component<WaterWaveProps> {
   state = {
     radio: 1,
   };
 
   timer: number = 0;
 
-  root: HTMLDivElement | undefined | null;
+  root: HTMLDivElement | undefined | null = null;
 
-  node: HTMLCanvasElement | undefined | null;
+  node: HTMLCanvasElement | undefined | null = null;
 
   componentDidMount() {
     this.renderChart();
@@ -38,7 +38,7 @@ class WaterWave extends Component<IWaterWaveProps> {
     );
   }
 
-  componentDidUpdate(props: IWaterWaveProps) {
+  componentDidUpdate(props: WaterWaveProps) {
     const { percent } = this.props;
     if (props.percent !== percent) {
       // 不加这个会造成绘制缓慢

DashboardAnalysis/src/components/Charts/autoHeight.tsx

@@ -6,7 +6,8 @@ export type IReactComponent<P = any> =
   | React.ClassicComponentClass<P>;
 
 function computeHeight(node: HTMLDivElement) {
-  node.style.height = '100%';
+  const { style } = node;
+  style.height = '100%';
   const totalHeight = parseInt(`${getComputedStyle(node).height}`, 10);
   const padding =
     parseInt(`${getComputedStyle(node).paddingTop}`, 10) +
@@ -14,7 +15,7 @@ function computeHeight(node: HTMLDivElement) {
   return totalHeight - padding;
 }
 
-function getAutoHeight(n: HTMLDivElement) {
+function getAutoHeight(n: HTMLDivElement | undefined) {
   if (!n) {
     return 0;
   }
@@ -30,26 +31,25 @@ function getAutoHeight(n: HTMLDivElement) {
   return height;
 }
 
-interface IAutoHeightProps {
+interface AutoHeightProps {
   height?: number;
 }
 
 function autoHeight() {
-  return function<P extends IAutoHeightProps> (
+  return <P extends AutoHeightProps>(
     WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
-  ): React.ComponentClass<P> {
-    class AutoHeightComponent extends React.Component<P & IAutoHeightProps> {
+  ): React.ComponentClass<P> => {
+    class AutoHeightComponent extends React.Component<P & AutoHeightProps> {
       state = {
         computedHeight: 0,
       };
 
-      root!: HTMLDivElement;
+      root: HTMLDivElement | undefined = undefined;
 
       componentDidMount() {
         const { height } = this.props;
         if (!height) {
           let h = getAutoHeight(this.root);
-          // eslint-disable-next-line
           this.setState({ computedHeight: h });
           if (h < 1) {
             h = getAutoHeight(this.root);

DashboardAnalysis/src/components/IntroduceRow.tsx

@@ -3,14 +3,12 @@ import { Col, Icon, Row, Tooltip } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import React from 'react';
 import numeral from 'numeral';
-import Charts from './Charts';
-import { IVisitData } from '../data.d';
+import { ChartCard, MiniArea, MiniBar, MiniProgress, Field } from './Charts';
+import { VisitDataType } from '../data.d';
 import Trend from './Trend';
 import Yuan from '../utils/Yuan';
 import styles from '../style.less';
 
-const { ChartCard, MiniArea, MiniBar, MiniProgress, Field } = Charts;
-
 const topColResponsiveProps = {
   xs: 24,
   sm: 12,
@@ -20,7 +18,7 @@ const topColResponsiveProps = {
   style: { marginBottom: 24 },
 };
 
-const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: IVisitData[] }) => (
+const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: VisitDataType[] }) => (
   <Row gutter={24}>
     <Col {...topColResponsiveProps}>
       <ChartCard

DashboardAnalysis/src/components/OfflineData.tsx

 import { Card, Col, Row, Tabs } from 'antd';
 import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React from 'react';
-import { IOfflineChartData, IOfflineData } from '../data';
+import { OfflineChartData, OfflineDataType } from '../data.d';
 
-import Charts from './Charts';
+import { TimelineChart, Pie } from './Charts';
 import NumberInfo from './NumberInfo';
 import styles from '../style.less';
 
-const { TimelineChart, Pie } = Charts;
-
 const CustomTab = ({
   data,
   currentTabKey: currentKey,
 }: {
-  data: IOfflineData;
+  data: OfflineDataType;
   currentTabKey: string;
 }) => (
   <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
@@ -55,8 +53,8 @@ const OfflineData = ({
 }: {
   activeKey: string;
   loading: boolean;
-  offlineData: IOfflineData[];
-  offlineChartData: IOfflineChartData[];
+  offlineData: OfflineDataType[];
+  offlineChartData: OfflineChartData[];
   handleTabChange: (activeKey: string) => void;
 }) => (
   <Card loading={loading} className={styles.offlineCard} bordered={false} style={{ marginTop: 32 }}>

DashboardAnalysis/src/components/ProportionSales.tsx

@@ -3,13 +3,11 @@ import { Card, Radio } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import { RadioChangeEvent } from 'antd/es/radio';
 import React from 'react';
-import { ISalesData } from '../data';
-import Charts from './Charts';
+import { VisitDataType } from '../data.d';
+import { Pie } from './Charts';
 import Yuan from '../utils/Yuan';
 import styles from '../style.less';
 
-const { Pie } = Charts;
-
 const ProportionSales = ({
   dropdownGroup,
   salesType,
@@ -20,7 +18,7 @@ const ProportionSales = ({
   loading: boolean;
   dropdownGroup: React.ReactNode;
   salesType: 'all' | 'online' | 'stores';
-  salesPieData: ISalesData[];
+  salesPieData: VisitDataType[];
   handleChangeSalesType?: (e: RadioChangeEvent) => void;
 }) => (
   <Card

DashboardAnalysis/src/components/SalesCard.tsx

@@ -4,12 +4,10 @@ import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import { RangePickerValue } from 'antd/es/date-picker/interface';
 import React from 'react';
 import numeral from 'numeral';
-import { ISalesData } from '../data';
-import Charts from './Charts';
+import { VisitDataType } from '../data.d';
+import { Bar } from './Charts';
 import styles from '../style.less';
 
-const { Bar } = Charts;
-
 const { RangePicker } = DatePicker;
 const { TabPane } = Tabs;
 
@@ -31,7 +29,7 @@ const SalesCard = ({
 }: {
   rangePickerValue: RangePickerValue;
   isActive: (key: 'today' | 'week' | 'month' | 'year') => string;
-  salesData: ISalesData[];
+  salesData: VisitDataType[];
   loading: boolean;
   handleRangePickerChange: (dates: RangePickerValue, dateStrings: [string, string]) => void;
   selectDate: (key: 'today' | 'week' | 'month' | 'year') => void;

DashboardAnalysis/src/components/TopSearch.tsx

@@ -2,15 +2,13 @@ import { Card, Col, Icon, Row, Table, Tooltip } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import React from 'react';
 import numeral from 'numeral';
-import { ISearchData, IVisitData2 } from '../data';
+import { SearchDataType, VisitDataType } from '../data.d';
 
-import Charts from './Charts';
+import { MiniArea } from './Charts';
 import NumberInfo from './NumberInfo';
 import Trend from './Trend';
 import styles from '../style.less';
 
-const { MiniArea } = Charts;
-
 const columns = [
   {
     title: <FormattedMessage id="BLOCK_NAME.table.rank" defaultMessage="Rank" />,
@@ -52,9 +50,9 @@ const TopSearch = ({
   dropdownGroup,
 }: {
   loading: boolean;
-  visitData2: IVisitData2[];
+  visitData2: VisitDataType[];
   dropdownGroup: React.ReactNode;
-  searchData: ISearchData[];
+  searchData: SearchDataType[];
 }) => (
   <Card
     loading={loading}

DashboardAnalysis/src/components/Trend/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';
 
-export interface ITrendProps {
+export interface TrendProps {
   colorful?: boolean;
   flag: 'up' | 'down';
   style?: React.CSSProperties;
@@ -11,7 +11,7 @@ export interface ITrendProps {
   className?: string;
 }
 
-const Trend: React.SFC<ITrendProps> = ({
+const Trend: React.SFC<TrendProps> = ({
   colorful = true,
   reverseColor = false,
   flag,

DashboardAnalysis/src/data.d.ts

-export interface IVisitData {
+export interface VisitDataType {
   x: string;
   y: number;
 }
 
-export interface IVisitData2 {
-  x: string;
-  y: number;
-}
-
-export interface ISalesData {
-  x: string;
-  y: number;
-}
-
-export interface ISearchData {
+export interface SearchDataType {
   index: number;
   keyword: string;
   count: number;
@@ -21,47 +11,32 @@ export interface ISearchData {
   status: number;
 }
 
-export interface IOfflineData {
+export interface OfflineDataType {
   name: string;
   cvr: number;
 }
 
-export interface IOfflineChartData {
+export interface OfflineChartData {
   x: any;
   y1: number;
   y2: number;
 }
 
-export interface ISalesTypeData {
-  x: string;
-  y: number;
-}
-
-export interface ISalesTypeDataOnline {
-  x: string;
-  y: number;
-}
-
-export interface ISalesTypeDataOffline {
-  x: string;
-  y: number;
-}
-
-export interface IRadarData {
+export interface RadarData {
   name: string;
   label: string;
   value: number;
 }
 
-export interface IAnalysisData {
-  visitData: IVisitData[];
-  visitData2: IVisitData2[];
-  salesData: ISalesData[];
-  searchData: ISearchData[];
-  offlineData: IOfflineData[];
-  offlineChartData: IOfflineChartData[];
-  salesTypeData: ISalesTypeData[];
-  salesTypeDataOnline: ISalesTypeDataOnline[];
-  salesTypeDataOffline: ISalesTypeDataOffline[];
-  radarData: IRadarData[];
+export interface AnalysisData {
+  visitData: VisitDataType[];
+  visitData2: VisitDataType[];
+  salesData: VisitDataType[];
+  searchData: SearchDataType[];
+  offlineData: OfflineDataType[];
+  offlineChartData: OfflineChartData[];
+  salesTypeData: VisitDataType[];
+  salesTypeDataOnline: VisitDataType[];
+  salesTypeDataOffline: VisitDataType[];
+  radarData: RadarData[];
 }

DashboardAnalysis/src/index.tsx

@@ -7,8 +7,8 @@ import { RadioChangeEvent } from 'antd/es/radio';
 import { RangePickerValue } from 'antd/es/date-picker/interface';
 import { connect } from 'dva';
 import PageLoading from './components/PageLoading';
-import { IAnalysisData } from './data.d';
 import { getTimeDistance } from './utils/utils';
+import { AnalysisData } from './data.d';
 import styles from './style.less';
 
 const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
@@ -18,7 +18,7 @@ const ProportionSales = React.lazy(() => import('./components/ProportionSales'))
 const OfflineData = React.lazy(() => import('./components/OfflineData'));
 
 interface BLOCK_NAME_CAMEL_CASEProps {
-  BLOCK_NAME_CAMEL_CASE: IAnalysisData;
+  BLOCK_NAME_CAMEL_CASE: AnalysisData;
   dispatch: Dispatch<any>;
   loading: boolean;
 }
@@ -53,9 +53,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     rangePickerValue: getTimeDistance('year'),
   };
 
-  reqRef!: number;
+  reqRef: number = 0;
 
-  timeoutId!: number;
+  timeoutId: number = 0;
 
   componentDidMount() {
     const { dispatch } = this.props;

DashboardAnalysis/src/model.tsx

 import { AnyAction, Reducer } from 'redux';
 
 import { EffectsCommandMap } from 'dva';
-import { IAnalysisData } from './data.d';
+import { AnalysisData } from './data.d';
 import { fakeChartData } from './service';
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IAnalysisData) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: AnalysisData) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: IAnalysisData;
+  state: AnalysisData;
   effects: {
     fetch: Effect;
     fetchSalesData: Effect;
   };
   reducers: {
-    save: Reducer<IAnalysisData>;
-    clear: Reducer<IAnalysisData>;
+    save: Reducer<AnalysisData>;
+    clear: Reducer<AnalysisData>;
   };
 }
 

DashboardAnalysis/src/utils/Yuan.tsx

@@ -6,7 +6,7 @@ import { yuan } from '../components/Charts';
 export default class Yuan extends React.Component<{
   children: React.ReactText;
 }> {
-  main: HTMLSpanElement | undefined | null;
+  main: HTMLSpanElement | undefined | null = null;
 
   componentDidMount() {
     this.renderToHtml();

DashboardMonitor/package.json

@@ -27,11 +27,11 @@
     "umi": "^2.6.9",
     "umi-plugin-block-dev": "^1.0.0",
     "umi-plugin-react": "^1.7.2",
-    "umi-request": "^1.0.0"
+    "umi-request": "^1.0.0",
+    "mockjs": "^1.0.1-beta3"
   },
   "devDependencies": {
-    "@types/numeral": "^0.0.25",
-    "mockjs": "^1.0.1-beta3"
+    "@types/numeral": "^0.0.25"
   },
   "license": "ISC",
   "blockConfig": {

DashboardMonitor/src/components/ActiveChart/index.tsx

@@ -24,6 +24,10 @@ export default class ActiveChart extends Component {
     activeData: getActiveData(),
   };
 
+  timer: number | undefined = undefined;
+
+  requestRef: number | undefined = undefined;
+
   componentDidMount() {
     this.loopData();
   }
@@ -50,10 +54,6 @@ export default class ActiveChart extends Component {
     });
   };
 
-  timer: number | undefined;
-
-  requestRef: number | undefined;
-
   render() {
     const { activeData = [] } = this.state;
 

DashboardMonitor/src/components/Charts/MiniArea/index.tsx

@@ -43,8 +43,6 @@ const MiniArea: React.FC<MiniAreaProps> = props => {
     animate = true,
   } = props;
 
-  console.log(props);
-
   const padding: [number, number, number, number] = [36, 5, 30, 5];
 
   const scaleProps = {

DashboardMonitor/src/components/Charts/Pie/index.tsx

@@ -44,6 +44,12 @@ class Pie extends Component<PieProps, PieState> {
     legendBlock: false,
   };
 
+  chart: G2.Chart | undefined = undefined;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  requestRef: number | undefined = 0;
+
   // for window resize auto responsive legend
   resize = Debounce(() => {
     const { hasLegend } = this.props;
@@ -149,12 +155,6 @@ class Pie extends Component<PieProps, PieState> {
     });
   };
 
-  root!: HTMLDivElement;
-
-  chart: G2.Chart | undefined;
-
-  requestRef: number | undefined;
-
   render() {
     const {
       valueFormat,

DashboardMonitor/src/components/Charts/TagCloud/index.tsx

@@ -35,6 +35,14 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
     width: 0,
   };
 
+  requestRef: number = 0;
+
+  isUnmount: boolean = false;
+
+  root: HTMLDivElement | undefined = undefined;
+
+  imageMask: HTMLImageElement | undefined = undefined;
+
   componentDidMount() {
     requestAnimationFrame(() => {
       this.initTagCloud();
@@ -75,7 +83,8 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
       origin?: any;
       color?: any;
     }) {
-      return Object.assign({}, cfg.style, {
+      return {
+        ...cfg.style,
         fillOpacity: cfg.opacity,
         fontSize: cfg.origin._origin.size,
         rotate: cfg.origin._origin.rotate,
@@ -84,7 +93,7 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
         fontFamily: cfg.origin._origin.font,
         fill: cfg.color,
         textBaseline: 'Alphabetic',
-      });
+      };
     }
 
     (Shape as any).registerShape('point', 'cloud', {
@@ -94,23 +103,16 @@ class TagCloud extends Component<TagCloudProps, TagCloudState> {
       ) {
         const attrs = getTextAttrs(cfg);
         return container.addShape('text', {
-          attrs: Object.assign(attrs, {
+          attrs: {
+            ...attrs,
             x: cfg.x,
             y: cfg.y,
-          }),
+          },
         });
       },
     });
   };
 
-  isUnmount!: boolean;
-
-  requestRef!: number;
-
-  root: HTMLDivElement | undefined;
-
-  imageMask: HTMLImageElement | undefined;
-
   renderChart = Debounce((nextProps: TagCloudProps) => {
     // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
     const { data, height } = nextProps || this.props;

DashboardWorkplace/src/components/Radar/autoHeight.tsx

@@ -15,7 +15,7 @@ function computeHeight(node: HTMLDivElement) {
   return totalHeight - padding;
 }
 
-function getAutoHeight(n: HTMLDivElement) {
+function getAutoHeight(n: HTMLDivElement | undefined) {
   if (!n) {
     return 0;
   }
@@ -44,6 +44,8 @@ function autoHeight() {
         computedHeight: 0,
       };
 
+      root: HTMLDivElement | undefined = undefined;
+
       componentDidMount() {
         const { height } = this.props;
         if (!height) {
@@ -60,8 +62,6 @@ function autoHeight() {
         this.root = node;
       };
 
-      root!: HTMLDivElement;
-
       render() {
         const { height } = this.props;
         const { computedHeight } = this.state;

DashboardWorkplace/src/components/Radar/index.tsx

@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import autoHeight from './autoHeight';
 import styles from './index.less';
 
-export interface IRadarProps {
+export interface RadarProps {
   title?: React.ReactNode;
   height?: number;
   padding?: [number, number, number, number];
@@ -21,7 +21,7 @@ export interface IRadarProps {
   tickCount?: number;
   style?: React.CSSProperties;
 }
-interface IRadarState {
+interface RadarState {
   legendData: {
     checked: boolean;
     name: string;
@@ -31,20 +31,20 @@ interface IRadarState {
   }[];
 }
 /* eslint react/no-danger:0 */
-class Radar extends Component<IRadarProps, IRadarState> {
-  state: IRadarState = {
+class Radar extends Component<RadarProps, RadarState> {
+  state: RadarState = {
     legendData: [],
   };
 
-  chart: G2.Chart | undefined;
+  chart: G2.Chart | undefined = undefined;
 
-  node: HTMLDivElement | undefined;
+  node: HTMLDivElement | undefined = undefined;
 
   componentDidMount() {
     this.getLegendData();
   }
 
-  componentDidUpdate(preProps: IRadarProps) {
+  componentDidUpdate(preProps: RadarProps) {
     const { data } = this.props;
     if (data !== preProps.data) {
       this.getLegendData();
@@ -60,10 +60,10 @@ class Radar extends Component<IRadarProps, IRadarState> {
     if (!this.chart) return;
     const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
     if (!geom) return;
-    const items = geom.get('dataArray') || []; // 获取图形对应的
+    const items = (geom as any).get('dataArray') || []; // 获取图形对应的
 
     const legendData = items.map((item: { color: any; _origin: any }[]) => {
-      // eslint-disable-next-line
+      // eslint-disable-next-line no-underscore-dangle
       const origins = item.map(t => t._origin);
       const result = {
         name: origins[0].name,

DashboardWorkplace/src/model.ts

 import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-import { Activeties, CurrentUser, Notice, RadarData } from './data.d';
+import { ActivitiesType, CurrentUser, NoticeType, RadarDataType } from './data.d';
 import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service';
 
 export interface ModalState {
   currentUser: Partial<CurrentUser>;
-  projectNotice: Notice[];
-  activities: Activeties[];
-  radarData: RadarData[];
+  projectNotice: NoticeType[];
+  activities: ActivitiesType[];
+  radarData: RadarDataType[];
 }
 
 export type Effect = (

Exception403/package.json

@@ -11,12 +11,13 @@
     "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception403"
   },
   "dependencies": {
+    "antd": "^3.19.5",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "react": "^16.6.3",
-    "umi-request": "^1.0.4",
     "umi": "^2.6.8",
-    "umi-plugin-react": "^1.7.2"
+    "umi-plugin-react": "^1.7.2",
+    "umi-request": "^1.0.4"
   },
   "devDependencies": {
     "umi-plugin-block-dev": "^1.3.0"

Exception403/src/components/Exception/index.tsx

-import * as H from 'history';
-
 import React, { createElement } from 'react';
 
 import { Button } from 'antd';
@@ -10,8 +8,8 @@ import styles from './index.less';
 
 export interface ExceptionProps<
   L = {
-    to: H.LocationDescriptor;
-    href?: H.LocationDescriptor;
+    to: string;
+    href?: string;
     replace?: boolean;
     innerRef?: (node: HTMLAnchorElement | null) => void;
   }

Exception404/package.json

@@ -11,13 +11,15 @@
     "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception404"
   },
   "dependencies": {
-    "react": "^16.6.3",
+    "antd": "^3.19.5",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
-    "umi-request": "^1.0.0-beta.1"
+    "react": "^16.6.3",
+    "umi-plugin-react": "^1.7.2",
+    "umi-request": "^1.0.8"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",

Exception404/src/components/Exception/index.tsx

-import * as H from 'history';
-
 import React, { createElement } from 'react';
 
 import { Button } from 'antd';
@@ -10,8 +8,8 @@ import styles from './index.less';
 
 export interface ExceptionProps<
   L = {
-    to: H.LocationDescriptor;
-    href?: H.LocationDescriptor;
+    to: string;
+    href?: string;
     replace?: boolean;
     innerRef?: (node: HTMLAnchorElement | null) => void;
   }

Exception500/package.json

@@ -11,13 +11,15 @@
     "url": "https://github.com/ant-design/pro-blocks/tree/master/Exception500"
   },
   "dependencies": {
-    "react": "^16.6.3",
+    "antd": "^3.19.5",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
-    "umi-request": "^1.0.0-beta.1"
+    "react": "^16.6.3",
+    "umi-plugin-react": "^1.7.2",
+    "umi-request": "^1.0.8"
   },
   "devDependencies": {
     "umi": "^2.6.9",
-    "umi-plugin-react": "^1.7.2",
     "umi-plugin-block-dev": "^1.0.0"
   },
   "license": "MIT",

Exception500/src/components/Exception/index.tsx

-import * as H from 'history';
-
 import React, { createElement } from 'react';
 
 import { Button } from 'antd';
@@ -10,8 +8,8 @@ import styles from './index.less';
 
 export interface ExceptionProps<
   L = {
-    to: H.LocationDescriptor;
-    href?: H.LocationDescriptor;
+    to: string;
+    href?: string;
     replace?: boolean;
     innerRef?: (node: HTMLAnchorElement | null) => void;
   }

FormAdvancedForm/src/components/TableForm.tsx

@@ -202,7 +202,7 @@ class TableForm extends PureComponent<TableFormProps, TableFormState> {
 
   handleFieldChange(e: React.ChangeEvent<HTMLInputElement>, fieldName: string, key: string) {
     const { data = [] } = this.state;
-    const newData = data.map(item => ({ ...item }));
+    const newData = [...data];
     const target = this.getRowByKey(key, newData);
     if (target) {
       target[fieldName] = e.target.value;
@@ -246,13 +246,21 @@ class TableForm extends PureComponent<TableFormProps, TableFormState> {
     this.clickedCancel = true;
     e.preventDefault();
     const { data = [] } = this.state;
-    const newData = data.map(item => ({ ...item }));
-    const target = this.getRowByKey(key, newData);
-    if (this.cacheOriginData[key]) {
-      Object.assign(target, this.cacheOriginData[key]);
-      delete this.cacheOriginData[key];
-    }
-    target.editable = false;
+    const newData = [...data];
+    newData.map(item => {
+      if (item.key === key) {
+        if (this.cacheOriginData[key]) {
+          delete this.cacheOriginData[key];
+          return {
+            ...item,
+            ...this.cacheOriginData[key],
+            editable: false,
+          };
+        }
+      }
+      return item;
+    });
+
     this.setState({ data: newData });
     this.clickedCancel = false;
   }

FormAdvancedForm/src/model.ts

@@ -3,16 +3,14 @@ import { EffectsCommandMap } from 'dva';
 import { message } from 'antd';
 import { fakeSubmitForm } from './service';
 
-export interface ModalState {}
-
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: ModalState;
+  state: {};
   effects: {
     submitAdvancedForm: Effect;
   };

FormBasicForm/src/model.ts

@@ -3,16 +3,14 @@ import { EffectsCommandMap } from 'dva';
 import { message } from 'antd';
 import { fakeSubmitForm } from './service';
 
-export interface ModalState {}
-
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
+  effects: EffectsCommandMap & { select: <T>(func: (state: {}) => T) => T },
 ) => void;
 
 export interface ModelType {
   namespace: string;
-  state: ModalState;
+  state: {};
   effects: {
     submitRegularForm: Effect;
   };

FormStepForm/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@ant-design/pro-layout": "^4.5.5",
     "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "nzh": "^1.0.3",
     "react": "^16.6.3",

ListBasicList/src/_mock.ts

@@ -126,7 +126,7 @@ function postFakeList(req: { body: any }, res: { json: (arg0: BasicListItemDataT
     case 'update':
       result.forEach((item, i) => {
         if (item.id === id) {
-          result[i] = Object.assign(item, body);
+          result[i] = { ...item, ...body };
         }
       });
       break;

ListBasicList/src/index.tsx

@@ -70,6 +70,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     wrapperCol: { span: 13 },
   };
 
+  addBtn: HTMLButtonElement | undefined | null = undefined;
+
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -136,8 +138,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     });
   };
 
-  addBtn: HTMLButtonElement | undefined | null;
-
   render() {
     const {
       BLOCK_NAME_CAMEL_CASE: { list },

ListSearch/src/index.tsx

@@ -36,7 +36,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
   };
 
   handleFormSubmit = (value: string) => {
-    // tslint:disable-next-line: no-console
     console.log(value);
   };
 

ListSearchApplications/src/index.tsx

@@ -200,7 +200,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
 }
 
 const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
-  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
+  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     // 表单项变化时请求数据
     // 模拟查询表单生效
     dispatch({

ListSearchArticles/src/index.tsx

@@ -235,7 +235,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
 }
 
 const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
-  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
+  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     // 表单项变化时请求数据
     // 模拟查询表单生效
     dispatch({

ListSearchProjects/src/index.tsx

@@ -145,7 +145,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
 }
 
 const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
-  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
+  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     // 表单项变化时请求数据
     // 模拟查询表单生效
     dispatch({

ListTableList/src/_mock.ts

@@ -137,8 +137,7 @@ function postRule(
     case 'update':
       tableListDataSource = tableListDataSource.map(item => {
         if (item.key === key) {
-          Object.assign(item, { desc, name });
-          return item;
+          return { ...item, desc, name };
         }
         return item;
       });

UserLogin/package.json

@@ -12,13 +12,15 @@
   },
   "dependencies": {
     "antd": "^3.16.3",
+    "classnames": "^2.2.6",
     "dva": "^2.4.0",
     "moment": "^2.22.2",
+    "omit.js": "^1.0.2",
     "qs": "^6.7.0",
     "react": "^16.6.3",
     "redux": "^4.0.1",
-    "umi-request": "^1.0.0",
-    "umi-plugin-react": "^1.3.0"
+    "umi-plugin-react": "^1.3.0",
+    "umi-request": "^1.0.0"
   },
   "devDependencies": {
     "@types/qs": "^6.5.3",

UserLogin/src/components/Login/LoginContext.tsx

 import { createContext } from 'react';
 
-export interface ILoginContext {
+export interface LoginContextProps {
   tabUtil?: {
     addTab: (id: string) => void;
     removeTab: (id: string) => void;
@@ -8,6 +8,6 @@ export interface ILoginContext {
   updateActive?: (activeItem: { [key: string]: string } | string) => void;
 }
 
-const LoginContext: React.Context<ILoginContext> = createContext({});
+const LoginContext: React.Context<LoginContextProps> = createContext({});
 
 export default LoginContext;

UserLogin/src/components/Login/LoginItem.tsx

@@ -4,14 +4,19 @@ import React, { Component } from 'react';
 import { FormComponentProps } from 'antd/es/form';
 import omit from 'omit.js';
 import ItemMap from './map';
-import LoginContext, { ILoginContext } from './LoginContext';
+import LoginContext, { LoginContextProps } from './LoginContext';
 import styles from './index.less';
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 export type WrappedLoginItemProps = Omit<LoginItemProps, 'form' | 'type' | 'updateActive'>;
 export type LoginItemKeyType = keyof typeof ItemMap;
-export type LoginItemType = { [K in keyof typeof ItemMap]: React.FC<WrappedLoginItemProps> };
+export interface LoginItemType {
+  UserName: React.FC<WrappedLoginItemProps>;
+  Password: React.FC<WrappedLoginItemProps>;
+  Mobile: React.FC<WrappedLoginItemProps>;
+  Captcha: React.FC<WrappedLoginItemProps>;
+}
 
 export interface LoginItemProps {
   name?: string;
@@ -24,7 +29,7 @@ export interface LoginItemProps {
   countDown?: number;
   getCaptchaButtonText?: string;
   getCaptchaSecondText?: string;
-  updateActive?: ILoginContext['updateActive'];
+  updateActive?: LoginContextProps['updateActive'];
   type?: string;
   defaultValue?: string;
   form?: FormComponentProps['form'];
@@ -45,7 +50,7 @@ class WrapFormItem extends Component<LoginItemProps, LoginItemState> {
     getCaptchaSecondText: 'second',
   };
 
-  interval: number | undefined;
+  interval: number | undefined = undefined;
 
   constructor(props: LoginItemProps) {
     super(props);

UserLogin/src/components/Login/LoginTab.tsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { TabPaneProps } from 'antd/es/tabs';
 import { Tabs } from 'antd';
-import LoginContext, { ILoginContext } from './LoginContext';
+import LoginContext, { LoginContextProps } from './LoginContext';
 
 const { TabPane } = Tabs;
 
@@ -15,11 +15,11 @@ const generateId = (() => {
 })();
 
 interface LoginTabProps extends TabPaneProps {
-  tabUtil: ILoginContext['tabUtil'];
+  tabUtil: LoginContextProps['tabUtil'];
 }
 
 class LoginTab extends Component<LoginTabProps> {
-  uniqueId: string;
+  uniqueId: string = '';
 
   constructor(props: LoginTabProps) {
     super(props);

UserLogin/src/components/Login/index.tsx

@@ -2,8 +2,8 @@ import { Form, Tabs } from 'antd';
 import React, { Component } from 'react';
 import { FormComponentProps } from 'antd/es/form';
 import classNames from 'classnames';
-import LoginContext, { ILoginContext } from './LoginContext';
-import LoginItem, { LoginItemProps, LoginItemType } from './LoginItem';
+import LoginContext, { LoginContextProps } from './LoginContext';
+import LoginItem, { LoginItemProps } from './LoginItem';
 
 import LoginSubmit from './LoginSubmit';
 import LoginTab from './LoginTab';
@@ -68,7 +68,7 @@ class Login extends Component<LoginProps, LoginState> {
     );
   };
 
-  getContext: () => ILoginContext = () => {
+  getContext: () => LoginContextProps = () => {
     const { form } = this.props;
     const { tabs = [] } = this.state;
     return {

UserLogin/src/index.tsx

@@ -49,6 +49,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,
   PAGE_NAME_UPPER_CAMEL_CASEState
 > {
+  loginForm: FormComponentProps['form'] | undefined | null = undefined;
+
   state: PAGE_NAME_UPPER_CAMEL_CASEState = {
     type: 'account',
     autoLogin: true,
@@ -60,8 +62,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     });
   };
 
-  loginForm: FormComponentProps['form'] | undefined | null;
-
   handleSubmit = (err: any, values: FromDataType) => {
     const { type } = this.state;
     if (!err) {

UserRegister/src/index.tsx

@@ -92,6 +92,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     prefix: '86',
   };
 
+  interval: number | undefined = undefined;
+
   componentDidUpdate() {
     const { BLOCK_NAME_CAMEL_CASE, form } = this.props;
     const account = form.getFieldValue('mail');
@@ -195,8 +197,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     });
   };
 
-  interval: number | undefined;
-
   renderPasswordProgress = () => {
     const { form } = this.props;
     const value = form.getFieldValue('password');

package.json

@@ -4,11 +4,11 @@
     "dev": "cross-env PAGES_PATH='DashboardMonitor/src' umi dev",
     "start": "umi dev",
     "lint-staged": "lint-staged",
-    "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
+    "lint": "npm run lint:js && npm run lint:style",
     "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty  ./ && npm run lint:style",
     "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./",
-    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
+    "lint:style": "stylelint --fix '**/*.less' --syntax less",
     "prettier": "prettier -c --write **/*",
     "format-imports": "import-sort --write '**/*.{js,jsx,ts,tsx}'"
   },
@@ -53,7 +53,7 @@
     "umi-plugin-block-dev": "^2.1.11",
     "umi-plugin-react": "^1.7.6",
     "umi-request": "^1.0.0",
-    "@umijs/fabric": "^1.0.4",
+    "@umijs/fabric": "^1.0.5",
     "import-sort-cli": "^6.0.0",
     "import-sort-parser-babylon": "^6.0.0",
     "import-sort-parser-typescript": "^6.0.0",

typings.d.ts

@@ -10,7 +10,7 @@ declare module '*.gif';
 declare module '*.bmp';
 declare module '*.tiff';
 
-let var APP_TYPE: string;
+declare module 'bizcharts-plugin-slider';
 
 declare module 'react-fittext';
 declare module '@antv/data-set';