Merge pull request #1 from ant-design/master

merge master

.prettierignore

-**/*.md
 **/*.svg
-**/*.ejs
-**/*.html
 package.json
 .umi
 .umi-production

.prettierrc

 {
   "singleQuote": true,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "printWidth": 100,
+  "proseWrap": "never",
   "overrides": [
     {
       "files": ".prettierrc",
-      "options": { "parser": "json" }
+      "options": {
+        "parser": "json"
+      }
     }
   ]
 }
\ No newline at end of file

.stylelintrc.json

 {
   "extends": [
     "stylelint-config-standard",
+    "stylelint-config-css-modules",
+    "stylelint-config-rational-order",
     "stylelint-config-prettier"
   ],
+  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
   "rules": {
-    "declaration-empty-line-before": null,
     "no-descending-specificity": null,
-    "selector-pseudo-class-no-unknown": null,
-    "selector-pseudo-element-colon-notation": null
+    "plugin/declaration-block-no-ignored-properties": true
   }
 }

AccountCenter/src/Center.less

 @import '~antd/lib/style/themes/default.less';
 
 .avatarHolder {
-  text-align: center;
   margin-bottom: 24px;
+  text-align: center;
 
   & > img {
     width: 104px;
@@ -11,19 +11,19 @@
   }
 
   .name {
+    margin-bottom: 4px;
+    color: @heading-color;
+    font-weight: 500;
     font-size: 20px;
     line-height: 28px;
-    font-weight: 500;
-    color: @heading-color;
-    margin-bottom: 4px;
   }
 }
 
 .detail {
   p {
+    position: relative;
     margin-bottom: 8px;
     padding-left: 26px;
-    position: relative;
 
     &:last-child {
       margin-bottom: 0;
@@ -32,10 +32,10 @@
 
   i {
     position: absolute;
-    height: 14px;
-    width: 14px;
-    left: 0;
     top: 4px;
+    left: 0;
+    width: 14px;
+    height: 14px;
     background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
 
     &.title {
@@ -54,9 +54,9 @@
 
 .tagsTitle,
 .teamTitle {
-  font-weight: 500;
-  color: @heading-color;
   margin-bottom: 12px;
+  color: @heading-color;
+  font-weight: 500;
 }
 
 .tags {
@@ -77,12 +77,12 @@
   a {
     display: block;
     margin-bottom: 24px;
-    color: @text-color;
-    transition: color 0.3s;
     overflow: hidden;
+    color: @text-color;
+    white-space: nowrap;
     text-overflow: ellipsis;
     word-break: break-all;
-    white-space: nowrap;
+    transition: color 0.3s;
 
     &:hover {
       color: @primary-color;

AccountCenter/src/data.d.ts

-export interface ITag {
+export interface itag {
   key: string;
   label: string;
 }
 
-export interface Province {
+export interface province {
   label: string;
   key: string;
 }
 
-export interface City {
+export interface city {
   label: string;
   key: string;
 }
 
-export interface Geographic {
+export interface geographic {
   province: Province;
   city: City;
 }
 
-export interface Notice {
+export interface notice {
   id: string;
   title: string;
   logo: string;
@@ -29,7 +29,7 @@ export interface Notice {
   memberLink: string;
 }
 
-export interface CurrentUser {
+export interface currentuser {
   name: string;
   avatar: string;
   userid: string;

AccountCenter/src/index.tsx

@@ -36,7 +36,7 @@ const operationTabList = [
 ];
 
 interface BLOCK_NAME_CAMEL_CASEProps extends RouteChildrenProps {
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   currentUser: CurrentUser;
   currentUserLoading: boolean;
 }
@@ -57,7 +57,7 @@ interface BLOCK_NAME_CAMEL_CASEState {
   }) => ({
     currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
     currentUserLoading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchCurrent'],
-  })
+  }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
   BLOCK_NAME_CAMEL_CASEProps,
@@ -65,7 +65,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
 > {
   static getDerivedStateFromProps(
     props: BLOCK_NAME_CAMEL_CASEProps,
-    state: BLOCK_NAME_CAMEL_CASEState
+    state: BLOCK_NAME_CAMEL_CASEState,
   ) {
     const { match, location } = props;
     const { tabKey } = state;
@@ -88,6 +88,8 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
     tabKey: 'articles',
   };
 
+  input: Input | null | undefined;
+
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({
@@ -108,8 +110,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
     this.setState({ inputVisible: true }, () => this.input && this.input.focus());
   };
 
-  input: Input | null | undefined;
-
   saveInputRef = (input: Input | null) => {
     this.input = input;
   };

AccountCenter/src/model.ts

@@ -11,7 +11,7 @@ import { AnyAction } from 'redux';
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
 ) => void;
 
 export interface ModelType {

AccountSettings/src/_mock.ts

@@ -7,7 +7,7 @@ function getProvince(req: any, res: { json: (arg0: { name: string; id: string }[
 
 function getCity(
   req: { params: { province: string | number } },
-  res: { json: (arg: any) => void }
+  res: { json: (arg: any) => void },
 ) {
   return res.json(city[req.params.province]);
 }

AccountSettings/src/components/BaseView.less

@@ -5,18 +5,18 @@
   padding-top: 12px;
 
   .left {
-    max-width: 448px;
     min-width: 224px;
+    max-width: 448px;
   }
   .right {
     flex: 1;
     padding-left: 104px;
     .avatar_title {
       height: 22px;
-      font-size: @font-size-base;
+      margin-bottom: 8px;
       color: @heading-color;
+      font-size: @font-size-base;
       line-height: 22px;
-      margin-bottom: 8px;
     }
     .avatar {
       width: 144px;
@@ -39,11 +39,11 @@
     flex-direction: column-reverse;
 
     .right {
-      padding: 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       max-width: 448px;
+      padding: 20px;
       .avatar_title {
         display: none;
       }

AccountSettings/src/components/GeographicView.less

@@ -2,12 +2,12 @@
 
 .row {
   .item {
-    max-width: 220px;
     width: 50%;
+    max-width: 220px;
   }
   .item:first-child {
-    margin-right: 8px;
     width: ~'calc(50% - 8px)';
+    margin-right: 8px;
   }
 }
 

AccountSettings/src/components/GeographicView.tsx

@@ -16,7 +16,7 @@ const nullSlectItem: SelectItem = {
 };
 
 interface GeographicViewProps {
-  dispatch?: Dispatch;
+  dispatch?: Dispatch<any>;
   province?: ProvinceData[];
   city?: CityData[];
   value?: {
@@ -44,28 +44,30 @@ interface GeographicViewProps {
       city,
       loading: loading.models.BLOCK_NAME_CAMEL_CASE,
     };
-  }
+  },
 )
 class GeographicView extends Component<GeographicViewProps> {
   componentDidMount = () => {
     const { dispatch } = this.props;
-    dispatch &&
+    if (dispatch) {
       dispatch({
         type: 'BLOCK_NAME_CAMEL_CASE/fetchProvince',
       });
+    }
   };
 
   componentDidUpdate(props: GeographicViewProps) {
     const { dispatch, value } = this.props;
 
     if (!props.value && !!value && !!value.province) {
-      dispatch &&
+      if (dispatch) {
         dispatch({
           type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
           payload: value.province.key,
         });
       }
     }
+  }
 
   getProvinceOption() {
     const { province } = this.props;
@@ -101,17 +103,18 @@ class GeographicView extends Component<GeographicViewProps> {
   selectProvinceItem = (item: SelectItem) => {
     const { dispatch, onChange } = this.props;
 
-    dispatch &&
+    if (dispatch) {
       dispatch({
         type: 'BLOCK_NAME_CAMEL_CASE/fetchCity',
         payload: item.key,
       });
-
-    onChange &&
+    }
+    if (onChange) {
       onChange({
         province: item,
         city: nullSlectItem,
       });
+    }
   };
 
   selectCityItem = (item: SelectItem) => {

AccountSettings/src/components/PhoneView.less

 @import '~antd/lib/style/themes/default.less';
 
 .area_code {
+  width: 30%;
   max-width: 128px;
   margin-right: 8px;
-  width: 30%;
 }
 .phone_number {
-  max-width: 312px;
   width: ~'calc(70% - 8px)';
+  max-width: 312px;
 }

AccountSettings/src/components/PhoneView.tsx

@@ -20,12 +20,14 @@ class PhoneView extends PureComponent<PhoneViewProps> {
           className={styles.area_code}
           value={values[0]}
           onChange={e => {
+            // tslint:disable-next-line: no-unused-expression
             onChange && onChange(`${e.target.value}-${values[1]}`);
           }}
         />
         <Input
           className={styles.phone_number}
           onChange={e => {
+            // tslint:disable-next-line: no-unused-expression
             onChange && onChange(`${values[0]}-${e.target.value}`);
           }}
           value={values[1]}

AccountSettings/src/components/base.tsx

@@ -39,7 +39,7 @@ const validatorGeographic = (
     province: SelectItem;
     city: SelectItem;
   },
-  callback: (message?: string) => void
+  callback: (message?: string) => void,
 ) => {
   const { province, city } = value;
   if (!province.key) {
@@ -70,6 +70,7 @@ interface BaseViewProps extends FormComponentProps {
   currentUser: BLOCK_NAME_CAMEL_CASE.currentUser,
 }))
 class BaseView extends Component<BaseViewProps> {
+  view: HTMLDivElement | undefined;
   componentDidMount() {
     this.setBaseInfo();
   }
@@ -96,7 +97,6 @@ class BaseView extends Component<BaseViewProps> {
     }
     return '';
   }
-  view: HTMLDivElement | undefined;
 
   getViewDom = (ref: HTMLDivElement) => {
     this.view = ref;
@@ -142,7 +142,7 @@ class BaseView extends Component<BaseViewProps> {
                 <Input.TextArea
                   placeholder={formatMessage({ id: 'BLOCK_NAME.basic.profile-placeholder' })}
                   rows={4}
-                />
+                />,
               )}
             </FormItem>
             <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.country' })}>
@@ -156,7 +156,7 @@ class BaseView extends Component<BaseViewProps> {
               })(
                 <Select style={{ maxWidth: 220 }}>
                   <Option value="China">中国</Option>
-                </Select>
+                </Select>,
               )}
             </FormItem>
             <FormItem label={formatMessage({ id: 'BLOCK_NAME.basic.geographic' })}>

AccountSettings/src/components/binding.tsx

@@ -8,7 +8,7 @@ class BindingView extends Component {
       title: formatMessage({ id: 'BLOCK_NAME.binding.taobao' }, {}),
       description: formatMessage({ id: 'BLOCK_NAME.binding.taobao-description' }, {}),
       actions: [
-        <a>
+        <a key="Bind">
           <FormattedMessage id="BLOCK_NAME.binding.bind" defaultMessage="Bind" />
         </a>,
       ],
@@ -18,7 +18,7 @@ class BindingView extends Component {
       title: formatMessage({ id: 'BLOCK_NAME.binding.alipay' }, {}),
       description: formatMessage({ id: 'BLOCK_NAME.binding.alipay-description' }, {}),
       actions: [
-        <a>
+        <a key="Bind">
           <FormattedMessage id="BLOCK_NAME.binding.bind" defaultMessage="Bind" />
         </a>,
       ],
@@ -28,7 +28,7 @@ class BindingView extends Component {
       title: formatMessage({ id: 'BLOCK_NAME.binding.dingding' }, {}),
       description: formatMessage({ id: 'BLOCK_NAME.binding.dingding-description' }, {}),
       actions: [
-        <a>
+        <a key="Bind">
           <FormattedMessage id="BLOCK_NAME.binding.bind" defaultMessage="Bind" />
         </a>,
       ],

AccountSettings/src/components/security.tsx

@@ -34,7 +34,7 @@ class SecurityView extends Component {
         </Fragment>
       ),
       actions: [
-        <a>
+        <a key="Modify">
           <FormattedMessage id="BLOCK_NAME.security.modify" defaultMessage="Modify" />
         </a>,
       ],
@@ -43,10 +43,10 @@ class SecurityView extends Component {
       title: formatMessage({ id: 'BLOCK_NAME.security.phone' }, {}),
       description: `${formatMessage(
         { id: 'BLOCK_NAME.security.phone-description' },
-        {}
+        {},
       )}：138****8293`,
       actions: [
-        <a>
+        <a key="Modify">
           <FormattedMessage id="BLOCK_NAME.security.modify" defaultMessage="Modify" />
         </a>,
       ],
@@ -55,7 +55,7 @@ class SecurityView extends Component {
       title: formatMessage({ id: 'BLOCK_NAME.security.question' }, {}),
       description: formatMessage({ id: 'BLOCK_NAME.security.question-description' }, {}),
       actions: [
-        <a>
+        <a key="Set">
           <FormattedMessage id="BLOCK_NAME.security.set" defaultMessage="Set" />
         </a>,
       ],
@@ -64,10 +64,10 @@ class SecurityView extends Component {
       title: formatMessage({ id: 'BLOCK_NAME.security.email' }, {}),
       description: `${formatMessage(
         { id: 'BLOCK_NAME.security.email-description' },
-        {}
+        {},
       )}：ant***sign.com`,
       actions: [
-        <a>
+        <a key="Modify">
           <FormattedMessage id="BLOCK_NAME.security.modify" defaultMessage="Modify" />
         </a>,
       ],
@@ -76,7 +76,7 @@ class SecurityView extends Component {
       title: formatMessage({ id: 'BLOCK_NAME.security.mfa' }, {}),
       description: formatMessage({ id: 'BLOCK_NAME.security.mfa-description' }, {}),
       actions: [
-        <a>
+        <a key="bind">
           <FormattedMessage id="BLOCK_NAME.security.bind" defaultMessage="Bind" />
         </a>,
       ],

AccountSettings/src/data.d.ts

-export interface ITag {
+export interface itag {
   key: string;
   label: string;
 }
 
-export interface Province {
+export interface province {
   label: string;
   key: string;
 }
 
-export interface City {
+export interface city {
   label: string;
   key: string;
 }
 
-export interface Geographic {
+export interface geographic {
   province: Province;
   city: City;
 }
-export interface ProvinceData {
+export interface provincedata {
   name: string;
   id: string;
 }
-export interface CityData {
+export interface citydata {
   province: string;
   name: string;
   id: string;
 }
-export interface Notice {
+export interface notice {
   id: string;
   title: string;
   logo: string;
@@ -37,7 +37,7 @@ export interface Notice {
   memberLink: string;
 }
 
-export interface CurrentUser {
+export interface currentuser {
   name: string;
   avatar: string;
   userid: string;

AccountSettings/src/index.tsx

@@ -13,7 +13,7 @@ import { CurrentUser } from './data';
 const { Item } = Menu;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   currentUser: CurrentUser;
 }
 
@@ -32,6 +32,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,
   PAGE_NAME_UPPER_CAMEL_CASEState
 > {
+  main: HTMLDivElement | undefined;
   constructor(props: PAGE_NAME_UPPER_CAMEL_CASEProps) {
     super(props);
     const menuMap = {
@@ -56,8 +57,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     };
   }
 
-  main: HTMLDivElement | undefined;
-
   componentDidMount() {
     const { dispatch } = this.props;
     dispatch({

AccountSettings/src/model.ts

@@ -13,7 +13,7 @@ export interface ModalState {
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
 ) => void;
 
 export interface ModelType {

AccountSettings/src/style.less

 @import '~antd/lib/style/themes/default.less';
 
 .main {
+  display: flex;
   width: 100%;
   height: 100%;
-  background-color: @body-background;
-  display: flex;
   padding-top: 16px;
   padding-bottom: 16px;
   overflow: auto;
+  background-color: @body-background;
   .leftMenu {
     width: 224px;
     border-right: @border-width-base @border-style-base @border-color-split;
@@ -22,16 +22,16 @@
   }
   .right {
     flex: 1;
-    padding-left: 40px;
-    padding-right: 40px;
     padding-top: 8px;
+    padding-right: 40px;
     padding-bottom: 8px;
+    padding-left: 40px;
     .title {
-      font-size: 20px;
+      margin-bottom: 12px;
       color: @heading-color;
-      line-height: 28px;
       font-weight: 500;
-      margin-bottom: 12px;
+      font-size: 20px;
+      line-height: 28px;
     }
   }
   :global {
@@ -48,19 +48,19 @@
   .ant-list-item-meta {
     // 账号绑定图标
     .taobao {
-      color: #ff4000;
       display: block;
+      color: #ff4000;
       font-size: 48px;
       line-height: 48px;
       border-radius: @border-radius-base;
     }
     .dingding {
-      background-color: #2eabff;
+      margin: 2px;
+      padding: 6px;
       color: #fff;
       font-size: 32px;
       line-height: 32px;
-      padding: 6px;
-      margin: 2px;
+      background-color: #2eabff;
       border-radius: @border-radius-base;
     }
     .alipay {

AdvancedForm/src/components/TableForm.tsx

@@ -4,9 +4,117 @@ import { isEqual } from 'lodash';
 import styles from '../style.less';
 
 class TableForm extends PureComponent {
+  static getDerivedStateFromProps(nextProps, preState) {
+    if (isEqual(nextProps.value, preState.value)) {
+      return null;
+    }
+    return {
+      data: nextProps.value,
+      value: nextProps.value,
+    };
+  }
   index = 0;
 
   cacheOriginData = {};
+  columns = [
+    {
+      title: '成员姓名',
+      dataIndex: 'name',
+      key: 'name',
+      width: '20%',
+      render: (text, record) => {
+        if (record.editable) {
+          return (
+            <Input
+              value={text}
+              autoFocus
+              onChange={e => this.handleFieldChange(e, 'name', record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
+              placeholder="成员姓名"
+            />
+          );
+        }
+        return text;
+      },
+    },
+    {
+      title: '工号',
+      dataIndex: 'workId',
+      key: 'workId',
+      width: '20%',
+      render: (text, record) => {
+        if (record.editable) {
+          return (
+            <Input
+              value={text}
+              onChange={e => this.handleFieldChange(e, 'workId', record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
+              placeholder="工号"
+            />
+          );
+        }
+        return text;
+      },
+    },
+    {
+      title: '所属部门',
+      dataIndex: 'department',
+      key: 'department',
+      width: '40%',
+      render: (text, record) => {
+        if (record.editable) {
+          return (
+            <Input
+              value={text}
+              onChange={e => this.handleFieldChange(e, 'department', record.key)}
+              onKeyPress={e => this.handleKeyPress(e, record.key)}
+              placeholder="所属部门"
+            />
+          );
+        }
+        return text;
+      },
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (text, record) => {
+        const { loading } = this.state;
+        if (!!record.editable && loading) {
+          return null;
+        }
+        if (record.editable) {
+          if (record.isNew) {
+            return (
+              <span>
+                <a onClick={e => this.saveRow(e, record.key)}>添加</a>
+                <Divider type="vertical" />
+                <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
+                  <a>删除</a>
+                </Popconfirm>
+              </span>
+            );
+          }
+          return (
+            <span>
+              <a onClick={e => this.saveRow(e, record.key)}>保存</a>
+              <Divider type="vertical" />
+              <a onClick={e => this.cancel(e, record.key)}>取消</a>
+            </span>
+          );
+        }
+        return (
+          <span>
+            <a onClick={e => this.toggleEditable(e, record.key)}>编辑</a>
+            <Divider type="vertical" />
+            <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
+              <a>删除</a>
+            </Popconfirm>
+          </span>
+        );
+      },
+    },
+  ];
 
   constructor(props) {
     super(props);
@@ -19,16 +127,6 @@ class TableForm extends PureComponent {
     };
   }
 
-  static getDerivedStateFromProps(nextProps, preState) {
-    if (isEqual(nextProps.value, preState.value)) {
-      return null;
-    }
-    return {
-      data: nextProps.value,
-      value: nextProps.value,
-    };
-  }
-
   getRowByKey(key, newData) {
     const { data } = this.state;
     return (newData || data).filter(item => item.key === key)[0];
@@ -132,115 +230,14 @@ class TableForm extends PureComponent {
     this.setState({ data: newData });
     this.clickedCancel = false;
   }
-
   render() {
-    const columns = [
-      {
-        title: '成员姓名',
-        dataIndex: 'name',
-        key: 'name',
-        width: '20%',
-        render: (text, record) => {
-          if (record.editable) {
-            return (
-              <Input
-                value={text}
-                autoFocus
-                onChange={e => this.handleFieldChange(e, 'name', record.key)}
-                onKeyPress={e => this.handleKeyPress(e, record.key)}
-                placeholder="成员姓名"
-              />
-            );
-          }
-          return text;
-        },
-      },
-      {
-        title: '工号',
-        dataIndex: 'workId',
-        key: 'workId',
-        width: '20%',
-        render: (text, record) => {
-          if (record.editable) {
-            return (
-              <Input
-                value={text}
-                onChange={e => this.handleFieldChange(e, 'workId', record.key)}
-                onKeyPress={e => this.handleKeyPress(e, record.key)}
-                placeholder="工号"
-              />
-            );
-          }
-          return text;
-        },
-      },
-      {
-        title: '所属部门',
-        dataIndex: 'department',
-        key: 'department',
-        width: '40%',
-        render: (text, record) => {
-          if (record.editable) {
-            return (
-              <Input
-                value={text}
-                onChange={e => this.handleFieldChange(e, 'department', record.key)}
-                onKeyPress={e => this.handleKeyPress(e, record.key)}
-                placeholder="所属部门"
-              />
-            );
-          }
-          return text;
-        },
-      },
-      {
-        title: '操作',
-        key: 'action',
-        render: (text, record) => {
-          const { loading } = this.state;
-          if (!!record.editable && loading) {
-            return null;
-          }
-          if (record.editable) {
-            if (record.isNew) {
-              return (
-                <span>
-                  <a onClick={e => this.saveRow(e, record.key)}>添加</a>
-                  <Divider type="vertical" />
-                  <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
-                    <a>删除</a>
-                  </Popconfirm>
-                </span>
-              );
-            }
-            return (
-              <span>
-                <a onClick={e => this.saveRow(e, record.key)}>保存</a>
-                <Divider type="vertical" />
-                <a onClick={e => this.cancel(e, record.key)}>取消</a>
-              </span>
-            );
-          }
-          return (
-            <span>
-              <a onClick={e => this.toggleEditable(e, record.key)}>编辑</a>
-              <Divider type="vertical" />
-              <Popconfirm title="是否要删除此行？" onConfirm={() => this.remove(record.key)}>
-                <a>删除</a>
-              </Popconfirm>
-            </span>
-          );
-        },
-      },
-    ];
-
     const { loading, data } = this.state;
 
     return (
       <Fragment>
         <Table
           loading={loading}
-          columns={columns}
+          columns={this.columns}
           dataSource={data}
           pagination={false}
           rowClassName={record => (record.editable ? styles.editable : '')}

AdvancedForm/src/index.tsx

@@ -59,7 +59,7 @@ const tableData = [
 ];
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   submitting: boolean;
 }
 
@@ -184,7 +184,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                       addonBefore="http://"
                       addonAfter=".com"
                       placeholder="请输入"
-                    />
+                    />,
                   )}
                 </Form.Item>
               </Col>
@@ -196,7 +196,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <Select placeholder="请选择管理员">
                       <Option value="xiao">付晓晓</Option>
                       <Option value="mao">周毛毛</Option>
-                    </Select>
+                    </Select>,
                   )}
                 </Form.Item>
               </Col>
@@ -210,7 +210,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <Select placeholder="请选择审批员">
                       <Option value="xiao">付晓晓</Option>
                       <Option value="mao">周毛毛</Option>
-                    </Select>
+                    </Select>,
                   )}
                 </Form.Item>
               </Col>
@@ -219,7 +219,10 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                   {getFieldDecorator('dateRange', {
                     rules: [{ required: true, message: '请选择生效日期' }],
                   })(
-                    <RangePicker placeholder={['开始日期', '结束日期']} style={{ width: '100%' }} />
+                    <RangePicker
+                      placeholder={['开始日期', '结束日期']}
+                      style={{ width: '100%' }}
+                    />,
                   )}
                 </Form.Item>
               </Col>
@@ -231,7 +234,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <Select placeholder="请选择仓库类型">
                       <Option value="private">私密</Option>
                       <Option value="public">公开</Option>
-                    </Select>
+                    </Select>,
                   )}
                 </Form.Item>
               </Col>
@@ -263,7 +266,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <Select placeholder="请选择管理员">
                       <Option value="xiao">付晓晓</Option>
                       <Option value="mao">周毛毛</Option>
-                    </Select>
+                    </Select>,
                   )}
                 </Form.Item>
               </Col>
@@ -277,7 +280,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <Select placeholder="请选择审批员">
                       <Option value="xiao">付晓晓</Option>
                       <Option value="mao">周毛毛</Option>
-                    </Select>
+                    </Select>,
                   )}
                 </Form.Item>
               </Col>
@@ -295,7 +298,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                         }
                         return trigger;
                       }}
-                    />
+                    />,
                   )}
                 </Form.Item>
               </Col>
@@ -307,7 +310,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <Select placeholder="请选择仓库类型">
                       <Option value="private">私密</Option>
                       <Option value="public">公开</Option>
-                    </Select>
+                    </Select>,
                   )}
                 </Form.Item>
               </Col>

AdvancedForm/src/model.ts

@@ -7,7 +7,7 @@ export interface ModalState {}
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
 ) => void;
 
 export interface ModelType {

AdvancedForm/src/style.less

@@ -5,9 +5,9 @@
 }
 
 .heading {
+  margin: 0 0 16px 0;
   font-size: 14px;
   line-height: 22px;
-  margin: 0 0 16px 0;
 }
 
 .steps:global(.ant-steps) {
@@ -16,9 +16,9 @@
 }
 
 .errorIcon {
-  cursor: pointer;
-  color: @error-color;
   margin-right: 24px;
+  color: @error-color;
+  cursor: pointer;
   i {
     margin-right: 4px;
   }
@@ -27,18 +27,18 @@
 .errorPopover {
   :global {
     .ant-popover-inner-content {
-      padding: 0;
+      min-width: 256px;
       max-height: 290px;
+      padding: 0;
       overflow: auto;
-      min-width: 256px;
     }
   }
 }
 
 .errorListItem {
+  padding: 8px 16px;
   list-style: none;
   border-bottom: 1px solid @border-color-split;
-  padding: 8px 16px;
   cursor: pointer;
   transition: all 0.3s;
   &:hover {
@@ -48,16 +48,16 @@
     border: 0;
   }
   .errorIcon {
-    color: @error-color;
     float: left;
     margin-top: 4px;
     margin-right: 12px;
     padding-bottom: 22px;
+    color: @error-color;
   }
   .errorField {
-    font-size: 12px;
-    color: @text-color-secondary;
     margin-top: 2px;
+    color: @text-color-secondary;
+    font-size: 12px;
   }
 }
 

AdvancedProfile/src/DescriptionList/DescriptionList.tsx

@@ -37,7 +37,7 @@ const DescriptionList: React.SFC<DescriptionListProps> & {
       {title ? <div className={styles.title}>{title}</div> : null}
       <Row gutter={gutter}>
         {React.Children.map(children, (child: any) =>
-          child ? React.cloneElement(child, { column }) : child
+          child ? React.cloneElement(child, { column }) : child,
         )}
       </Row>
     </div>

AdvancedProfile/src/data.d.ts

-export interface AdvancedOperation1 {
+export interface advancedoperation1 {
   key: string;
   type: string;
   name: string;
@@ -7,7 +7,7 @@ export interface AdvancedOperation1 {
   memo: string;
 }
 
-export interface AdvancedOperation2 {
+export interface advancedoperation2 {
   key: string;
   type: string;
   name: string;
@@ -16,7 +16,7 @@ export interface AdvancedOperation2 {
   memo: string;
 }
 
-export interface AdvancedOperation3 {
+export interface advancedoperation3 {
   key: string;
   type: string;
   name: string;
@@ -25,7 +25,7 @@ export interface AdvancedOperation3 {
   memo: string;
 }
 
-export interface AdvancedProfileData {
+export interface advancedprofiledata {
   advancedOperation1: AdvancedOperation1[];
   advancedOperation2: AdvancedOperation2[];
   advancedOperation3: AdvancedOperation3[];

AdvancedProfile/src/index.tsx

@@ -85,17 +85,6 @@ const description = (
   </DescriptionList>
 );
 
-const tabList = [
-  {
-    key: 'detail',
-    tab: '详情',
-  },
-  {
-    key: 'rule',
-    tab: '规则',
-  },
-];
-
 /**
  * render Footer tabList
  * In order to be compatible with the old version of the PageHeader
@@ -173,7 +162,7 @@ const customDot = (
     status,
   }: {
     status: string;
-  }
+  },
 ) =>
   status === 'process' ? (
     <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
@@ -244,7 +233,7 @@ const columns = [
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
     loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchAdvanced'],
-  })
+  }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   { loading: boolean; BLOCK_NAME_CAMEL_CASE: AdvancedProfileData; dispatch: Dispatch },
@@ -263,7 +252,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
 
   componentDidMount() {
     const { dispatch, BLOCK_NAME_CAMEL_CASE } = this.props;
-    console.log(BLOCK_NAME_CAMEL_CASE);
     dispatch({
       type: 'BLOCK_NAME_CAMEL_CASE/fetchAdvanced',
     });
@@ -344,7 +332,20 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
                   margin: -24,
                 }}
                 extra={action}
-                footer={<RenderFooter tabList={tabList} />}
+                footer={
+                  <RenderFooter
+                    tabList={[
+                      {
+                        key: 'detail',
+                        tab: '详情',
+                      },
+                      {
+                        key: 'rule',
+                        tab: '规则',
+                      },
+                    ]}
+                  />
+                }
               >
                 <div
                   style={{

AdvancedProfile/src/model.ts

@@ -7,7 +7,7 @@ import { AdvancedProfileData } from './data';
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: AdvancedProfileData) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: AdvancedProfileData) => T) => T },
 ) => void;
 
 export interface ModelType {

AdvancedProfile/src/style.less

@@ -14,14 +14,14 @@
 
 .noData {
   color: @disabled-color;
-  text-align: center;
-  line-height: 64px;
   font-size: 16px;
+  line-height: 64px;
+  text-align: center;
   i {
-    font-size: 24px;
-    margin-right: 16px;
     position: relative;
     top: 3px;
+    margin-right: 16px;
+    font-size: 24px;
   }
 }
 
@@ -31,10 +31,10 @@
 }
 
 .stepDescription {
-  font-size: 14px;
   position: relative;
   left: 38px;
   padding-top: 8px;
+  font-size: 14px;
   text-align: left;
 
   > div {

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

@@ -28,6 +28,8 @@ class Bar extends Component<
   state = {
     autoHideXLabels: false,
   };
+  root: HTMLDivElement | undefined;
+  node: HTMLDivElement | undefined;
 
   componentDidMount() {
     window.addEventListener('resize', this.resize, { passive: true });
@@ -36,11 +38,9 @@ class Bar extends Component<
   componentWillUnmount() {
     window.removeEventListener('resize', this.resize);
   }
-  root: HTMLDivElement | undefined;
   handleRoot = (n: HTMLDivElement) => {
     this.root = n;
   };
-  node: HTMLDivElement | undefined;
   handleRef = (n: HTMLDivElement) => {
     this.node = n;
   };

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

@@ -45,6 +45,8 @@ class Pie extends Component<IPieProps, IPieState> {
   };
 
   requestRef: number | undefined;
+  root!: HTMLDivElement;
+  chart: G2.Chart | undefined;
 
   componentDidMount() {
     window.addEventListener(
@@ -52,7 +54,7 @@ class Pie extends Component<IPieProps, IPieState> {
       () => {
         this.requestRef = requestAnimationFrame(() => this.resize());
       },
-      { passive: true }
+      { passive: true },
     );
   }
 
@@ -123,8 +125,6 @@ class Pie extends Component<IPieProps, IPieState> {
       legendData,
     });
   };
-  root!: HTMLDivElement;
-  chart: G2.Chart | undefined;
 
   // for window resize auto responsive legend
   @Bind()

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

@@ -34,6 +34,11 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     height: 0,
     width: 0,
   };
+  isUnmount!: boolean;
+  requestRef!: number;
+
+  root: HTMLDivElement | undefined;
+  imageMask: HTMLImageElement | undefined;
 
   componentDidMount() {
     requestAnimationFrame(() => {
@@ -49,20 +54,16 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       this.renderChart(this.props);
     }
   }
-  isUnmount!: boolean;
   componentWillUnmount() {
     this.isUnmount = true;
     window.cancelAnimationFrame(this.requestRef);
     window.removeEventListener('resize', this.resize);
   }
-  requestRef!: number;
   resize = () => {
     this.requestRef = requestAnimationFrame(() => {
       this.renderChart(this.props);
     });
   };
-
-  root: HTMLDivElement | undefined;
   saveRootRef = (node: HTMLDivElement) => {
     this.root = node;
   };
@@ -91,7 +92,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     (Shape as any).registerShape('point', 'cloud', {
       drawShape(
         cfg: { x: any; y: any },
-        container: { addShape: (arg0: string, arg1: { attrs: any }) => void }
+        container: { addShape: (arg0: string, arg1: { attrs: any }) => void },
       ) {
         const attrs = getTextAttrs(cfg);
         return container.addShape('text', {
@@ -103,7 +104,6 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       },
     });
   };
-  imageMask: HTMLImageElement | undefined;
 
   @Bind()
   @Debounce(500)

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

@@ -41,7 +41,7 @@ class TimelineChart extends React.Component<ITimelineChartProps> {
     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
+        [...data].sort((a, b) => b.y2 - a.y2)[0].y2,
       );
     }
 

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

@@ -18,6 +18,9 @@ class WaterWave extends Component<IWaterWaveProps> {
   state = {
     radio: 1,
   };
+  timer: number = 0;
+  root: HTMLDivElement | undefined | null;
+  node: HTMLCanvasElement | undefined | null;
 
   componentDidMount() {
     this.renderChart();
@@ -27,7 +30,7 @@ class WaterWave extends Component<IWaterWaveProps> {
       () => {
         requestAnimationFrame(() => this.resize());
       },
-      { passive: true }
+      { passive: true },
     );
   }
 
@@ -56,7 +59,6 @@ class WaterWave extends Component<IWaterWaveProps> {
       });
     }
   };
-  timer: number = 0;
   renderChart(type?: string) {
     const { percent, color = '#1890FF' } = this.props;
     const data = percent / 100;
@@ -199,8 +201,6 @@ class WaterWave extends Component<IWaterWaveProps> {
     }
     render();
   }
-  root: HTMLDivElement | undefined | null;
-  node: HTMLCanvasElement | undefined | null;
   render() {
     const { radio } = this.state;
     const { percent, title, height = 1 } = this.props;

Analysis/src/components/Charts/autoHeight.tsx

@@ -19,7 +19,7 @@ function getAutoHeight(n: HTMLDivElement) {
     return 0;
   }
 
-  let node = n;
+  const node = n;
 
   let height = computeHeight(node);
   const parentNode = node.parentNode as HTMLDivElement;
@@ -36,7 +36,7 @@ interface IAutoHeightProps {
 
 function autoHeight() {
   return function<P extends IAutoHeightProps>(
-    WrappedComponent: React.ComponentClass<P> | React.SFC<P>
+    WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
   ): React.ComponentClass<P> {
     class AutoHeightComponent extends React.Component<P & IAutoHeightProps> {
       state = {
@@ -46,11 +46,11 @@ function autoHeight() {
       componentDidMount() {
         const { height } = this.props;
         if (!height) {
-          const h = getAutoHeight(this.root);
+          let h = getAutoHeight(this.root);
           // eslint-disable-next-line
           this.setState({ computedHeight: h });
           if (h < 1) {
-            const h = getAutoHeight(this.root);
+            h = getAutoHeight(this.root);
             this.setState({ computedHeight: h });
           }
         }

Analysis/src/components/Trend/index.tsx

@@ -25,7 +25,7 @@ const Trend: React.SFC<ITrendProps> = ({
       [styles.trendItemGrey]: !colorful,
       [styles.reverseColor]: reverseColor && colorful,
     },
-    className
+    className,
   );
   return (
     <div {...rest} className={classString} title={typeof children === 'string' ? children : ''}>

Analysis/src/data.d.ts

-export interface IVisitData {
+export interface ivisitdata {
   x: string;
   y: number;
 }
 
-export interface IVisitData2 {
+export interface ivisitdata2 {
   x: string;
   y: number;
 }
 
-export interface ISalesData {
+export interface isalesdata {
   x: string;
   y: number;
 }
 
-export interface ISearchData {
+export interface isearchdata {
   index: number;
   keyword: string;
   count: number;
@@ -21,39 +21,39 @@ export interface ISearchData {
   status: number;
 }
 
-export interface IOfflineData {
+export interface iofflinedata {
   name: string;
   cvr: number;
 }
 
-export interface IOfflineChartData {
+export interface iofflinechartdata {
   x: any;
   y1: number;
   y2: number;
 }
 
-export interface ISalesTypeData {
+export interface isalestypedata {
   x: string;
   y: number;
 }
 
-export interface ISalesTypeDataOnline {
+export interface isalestypedataonline {
   x: string;
   y: number;
 }
 
-export interface ISalesTypeDataOffline {
+export interface isalestypedataoffline {
   x: string;
   y: number;
 }
 
-export interface IRadarData {
+export interface iradardata {
   name: string;
   label: string;
   value: number;
 }
 
-export interface IAnalysisData {
+export interface ianalysisdata {
   visitData: IVisitData[];
   visitData2: IVisitData2[];
   salesData: ISalesData[];

Analysis/src/index.tsx

@@ -18,7 +18,7 @@ const OfflineData = React.lazy(() => import('./components/OfflineData'));
 
 interface BLOCK_NAME_CAMEL_CASEProps {
   BLOCK_NAME_CAMEL_CASE: IAnalysisData;
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   loading: boolean;
 }
 
@@ -40,7 +40,7 @@ interface BLOCK_NAME_CAMEL_CASEState {
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
     loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetch'],
-  })
+  }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   BLOCK_NAME_CAMEL_CASEProps,

Analysis/src/model.tsx

@@ -6,7 +6,7 @@ import { AnyAction } from 'redux';
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IAnalysisData) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: IAnalysisData) => T) => T },
 ) => void;
 
 export interface ModelType {

Analysis/src/style.less

@@ -3,10 +3,10 @@
 
 .iconGroup {
   i {
-    transition: color 0.32s;
+    margin-left: 16px;
     color: @text-color-secondary;
     cursor: pointer;
-    margin-left: 16px;
+    transition: color 0.32s;
     &:hover {
       color: @text-color;
     }
@@ -19,37 +19,38 @@
   list-style: none;
   li {
     .clearfix();
-    margin-top: 16px;
+
     display: flex;
     align-items: center;
+    margin-top: 16px;
     span {
       color: @text-color;
       font-size: 14px;
       line-height: 22px;
     }
     .rankingItemNumber {
-      background-color: @background-color-base;
-      border-radius: 20px;
       display: inline-block;
-      font-size: 12px;
-      font-weight: 600;
-      margin-right: 16px;
+      width: 20px;
       height: 20px;
+      margin-top: 1.5px;
+      margin-right: 16px;
+      font-weight: 600;
+      font-size: 12px;
       line-height: 20px;
-      width: 20px;
       text-align: center;
-      margin-top: 1.5px;
+      background-color: @background-color-base;
+      border-radius: 20px;
       &.active {
-        background-color: #314659;
         color: #fff;
+        background-color: #314659;
       }
     }
     .rankingItemTitle {
       flex: 1;
+      margin-right: 8px;
+      overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      overflow: hidden;
-      margin-right: 8px;
     }
   }
 }
@@ -58,8 +59,8 @@
   display: inline-block;
   margin-right: 24px;
   a {
-    color: @text-color;
     margin-left: 24px;
+    color: @text-color;
     &:hover {
       color: @primary-color;
     }
@@ -117,14 +118,14 @@
       border-bottom: none;
     }
     .ant-tabs-nav-container-scrolling {
-      padding-left: 40px;
       padding-right: 40px;
+      padding-left: 40px;
     }
-    .ant-tabs-tab-prev-icon:before {
+    .ant-tabs-tab-prev-icon::before {
       position: relative;
       left: 6px;
     }
-    .ant-tabs-tab-next-icon:before {
+    .ant-tabs-tab-next-icon::before {
       position: relative;
       right: 6px;
     }

Analysis/src/utils/Yuan.tsx

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

Analysis/src/utils/utils.less

 .textOverflow() {
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
   word-break: break-all;
-  white-space: nowrap;
 }
 
 .textOverflowMulti(@line: 3, @bg: #fff) {
-  overflow: hidden;
   position: relative;
-  line-height: 1.5em;
   max-height: @line * 1.5em;
-  text-align: justify;
   margin-right: -1em;
   padding-right: 1em;
-  &:before {
-    background: @bg;
-    content: '...';
-    padding: 0 1px;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
     position: absolute;
     right: 14px;
     bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
   }
-  &:after {
-    background: white;
-    content: '';
-    margin-top: 0.2em;
+  &::after {
     position: absolute;
     right: 14px;
     width: 1em;
     height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
   }
 }
 
@@ -36,15 +36,15 @@
 // ------------------------
 .clearfix() {
   zoom: 1;
-  &:before,
-  &:after {
-    content: ' ';
+  &::before,
+  &::after {
     display: table;
+    content: ' ';
   }
-  &:after {
+  &::after {
     clear: both;
-    visibility: hidden;
-    font-size: 0;
     height: 0;
+    font-size: 0;
+    visibility: hidden;
   }
 }

Analysis/src/utils/utils.ts

@@ -32,9 +32,9 @@ export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): Rang
 
     return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
   }
+  const year = now.getFullYear();
 
   if (type === 'month') {
-    const year = now.getFullYear();
     const month = now.getMonth();
     const nextDate = moment(now).add(1, 'months');
     const nextYear = nextDate.year();
@@ -46,6 +46,5 @@ export function getTimeDistance(type: 'today' | 'week' | 'month' | 'year'): Rang
     ];
   }
 
-  const year = now.getFullYear();
   return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
 }

BasicForm/src/index.tsx

@@ -25,7 +25,7 @@ const { TextArea } = Input;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
   submitting: boolean;
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
 }
 
 @connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
@@ -102,7 +102,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     formatMessage({ id: 'BLOCK_NAME.placeholder.start' }),
                     formatMessage({ id: 'BLOCK_NAME.placeholder.end' }),
                   ]}
-                />
+                />,
               )}
             </FormItem>
             <FormItem {...formItemLayout} label={<FormattedMessage id="BLOCK_NAME.goal.label" />}>
@@ -118,7 +118,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                   style={{ minHeight: 32 }}
                   placeholder={formatMessage({ id: 'BLOCK_NAME.goal.placeholder' })}
                   rows={4}
-                />
+                />,
               )}
             </FormItem>
             <FormItem
@@ -137,7 +137,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                   style={{ minHeight: 32 }}
                   placeholder={formatMessage({ id: 'BLOCK_NAME.standard.placeholder' })}
                   rows={4}
-                />
+                />,
               )}
             </FormItem>
             <FormItem
@@ -155,7 +155,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
               }
             >
               {getFieldDecorator('client')(
-                <Input placeholder={formatMessage({ id: 'BLOCK_NAME.client.placeholder' })} />
+                <Input placeholder={formatMessage({ id: 'BLOCK_NAME.client.placeholder' })} />,
               )}
             </FormItem>
             <FormItem
@@ -170,7 +170,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
               }
             >
               {getFieldDecorator('invites')(
-                <Input placeholder={formatMessage({ id: 'BLOCK_NAME.invites.placeholder' })} />
+                <Input placeholder={formatMessage({ id: 'BLOCK_NAME.invites.placeholder' })} />,
               )}
             </FormItem>
             <FormItem
@@ -189,7 +189,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                   placeholder={formatMessage({ id: 'BLOCK_NAME.weight.placeholder' })}
                   min={0}
                   max={100}
-                />
+                />,
               )}
               <span className="ant-form-text">%</span>
             </FormItem>
@@ -212,7 +212,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                     <Radio value="3">
                       <FormattedMessage id="BLOCK_NAME.radio.private" />
                     </Radio>
-                  </Radio.Group>
+                  </Radio.Group>,
                 )}
                 <FormItem style={{ marginBottom: 0 }}>
                   {getFieldDecorator('publicUsers')(
@@ -233,7 +233,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
                       <Option value="3">
                         <FormattedMessage id="BLOCK_NAME.option.C" />
                       </Option>
-                    </Select>
+                    </Select>,
                   )}
                 </FormItem>
               </div>

BasicForm/src/model.ts

@@ -7,7 +7,7 @@ export interface ModalState {}
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: ModalState) => T) => T },
 ) => void;
 
 export interface ModelType {

BasicForm/src/style.less

@@ -5,9 +5,9 @@
 }
 
 .heading {
+  margin: 0 0 16px 0;
   font-size: 14px;
   line-height: 22px;
-  margin: 0 0 16px 0;
 }
 
 .steps:global(.ant-steps) {
@@ -16,9 +16,9 @@
 }
 
 .errorIcon {
-  cursor: pointer;
-  color: @error-color;
   margin-right: 24px;
+  color: @error-color;
+  cursor: pointer;
   i {
     margin-right: 4px;
   }
@@ -27,18 +27,18 @@
 .errorPopover {
   :global {
     .ant-popover-inner-content {
-      padding: 0;
+      min-width: 256px;
       max-height: 290px;
+      padding: 0;
       overflow: auto;
-      min-width: 256px;
     }
   }
 }
 
 .errorListItem {
+  padding: 8px 16px;
   list-style: none;
   border-bottom: 1px solid @border-color-split;
-  padding: 8px 16px;
   cursor: pointer;
   transition: all 0.3s;
   &:hover {
@@ -48,16 +48,16 @@
     border: 0;
   }
   .errorIcon {
-    color: @error-color;
     float: left;
     margin-top: 4px;
     margin-right: 12px;
     padding-bottom: 22px;
+    color: @error-color;
   }
   .errorField {
-    font-size: 12px;
-    color: @text-color-secondary;
     margin-top: 2px;
+    color: @text-color-secondary;
+    font-size: 12px;
   }
 }
 

BasicList/src/data.d.ts

-export interface Member {
+export interface member {
   avatar: string;
   name: string;
   id: string;
 }
 
-export interface BasicListItemDataType {
+export interface basiclistitemdatatype {
   id: string;
   owner: string;
   title: string;

BasicList/src/index.tsx

@@ -37,7 +37,7 @@ const { Search, TextArea } = Input;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
   BLOCK_NAME_CAMEL_CASE: IStateType;
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   loading: boolean;
 }
 interface PAGE_NAME_UPPER_CAMEL_CASEState {
@@ -57,7 +57,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEState {
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
     loading: loading.models.BLOCK_NAME_CAMEL_CASE,
-  })
+  }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,
@@ -69,6 +69,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     labelCol: { span: 7 },
     wrapperCol: { span: 13 },
   };
+  addBtn: HTMLButtonElement | undefined | null;
 
   componentDidMount() {
     const { dispatch } = this.props;
@@ -135,7 +136,6 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
       payload: { id },
     });
   };
-  addBtn: HTMLButtonElement | undefined | null;
 
   render() {
     const {
@@ -216,11 +216,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
     );
 
     const MoreBtn: React.SFC<{
-      current: BasicListItemDataType;
-    }> = ({ current }) => (
+      item: BasicListItemDataType;
+    }> = ({ item }) => (
       <Dropdown
         overlay={
-          <Menu onClick={({ key }) => editAndDelete(key, current)}>
+          <Menu onClick={({ key }) => editAndDelete(key, item)}>
             <Menu.Item key="edit">编辑</Menu.Item>
             <Menu.Item key="delete">删除</Menu.Item>
           </Menu>
@@ -266,7 +266,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
                 placeholder="请选择"
                 format="YYYY-MM-DD HH:mm:ss"
                 style={{ width: '100%' }}
-              />
+              />,
             )}
           </FormItem>
           <FormItem label="任务负责人" {...this.formLayout}>
@@ -277,7 +277,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
               <Select placeholder="请选择">
                 <SelectOption value="付晓晓">付晓晓</SelectOption>
                 <SelectOption value="周毛毛">周毛毛</SelectOption>
-              </Select>
+              </Select>,
             )}
           </FormItem>
           <FormItem {...this.formLayout} label="产品描述">
@@ -338,6 +338,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
                   <List.Item
                     actions={[
                       <a
+                        key="edit"
                         onClick={e => {
                           e.preventDefault();
                           this.showEditModal(item);
@@ -345,7 +346,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
                       >
                         编辑
                       </a>,
-                      <MoreBtn current={item} />,
+                      <MoreBtn key="more" item={item} />,
                     ]}
                   >
                     <List.Item.Meta

BasicList/src/model.ts

@@ -10,7 +10,7 @@ export interface IStateType {
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
 ) => void;
 
 export interface ModelType {

BasicList/src/style.less

@@ -7,15 +7,15 @@
       border-bottom: none;
     }
     .ant-card-head-title {
-      line-height: 32px;
       padding: 24px 0;
+      line-height: 32px;
     }
     .ant-card-extra {
       padding: 24px 0;
     }
     .ant-list-pagination {
-      text-align: right;
       margin-top: 24px;
+      text-align: right;
     }
     .ant-avatar-lg {
       width: 48px;
@@ -27,35 +27,35 @@
     position: relative;
     text-align: center;
     & > span {
-      color: @text-color-secondary;
       display: inline-block;
+      margin-bottom: 4px;
+      color: @text-color-secondary;
       font-size: @font-size-base;
       line-height: 22px;
-      margin-bottom: 4px;
     }
     & > p {
+      margin: 0;
       color: @heading-color;
       font-size: 24px;
       line-height: 32px;
-      margin: 0;
     }
     & > em {
-      background-color: @border-color-split;
       position: absolute;
-      height: 56px;
-      width: 1px;
       top: 0;
       right: 0;
+      width: 1px;
+      height: 56px;
+      background-color: @border-color-split;
     }
   }
   .listContent {
     font-size: 0;
     .listContentItem {
-      color: @text-color-secondary;
       display: inline-block;
-      vertical-align: middle;
-      font-size: @font-size-base;
       margin-left: 40px;
+      color: @text-color-secondary;
+      font-size: @font-size-base;
+      vertical-align: middle;
       > span {
         line-height: 20px;
       }
@@ -67,8 +67,8 @@
     }
   }
   .extraContentSearch {
-    margin-left: 16px;
     width: 272px;
+    margin-left: 16px;
   }
 }
 
@@ -103,8 +103,8 @@
 @media screen and (max-width: @screen-sm) {
   .standardList {
     .extraContentSearch {
-      margin-left: 0;
       width: 100%;
+      margin-left: 0;
     }
     .headerInfo {
       margin-bottom: 16px;
@@ -180,8 +180,8 @@
     .ant-form-item {
       margin-bottom: 12px;
       &:last-child {
-        padding-top: 4px;
         margin-bottom: 32px;
+        padding-top: 4px;
       }
     }
   }

BasicList/src/utils/utils.less

 .textOverflow() {
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
   word-break: break-all;
-  white-space: nowrap;
 }
 
 .textOverflowMulti(@line: 3, @bg: #fff) {
-  overflow: hidden;
   position: relative;
-  line-height: 1.5em;
   max-height: @line * 1.5em;
-  text-align: justify;
   margin-right: -1em;
   padding-right: 1em;
-  &:before {
-    background: @bg;
-    content: '...';
-    padding: 0 1px;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
     position: absolute;
     right: 14px;
     bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
   }
-  &:after {
-    background: white;
-    content: '';
-    margin-top: 0.2em;
+  &::after {
     position: absolute;
     right: 14px;
     width: 1em;
     height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
   }
 }
 
@@ -36,15 +36,15 @@
 // ------------------------
 .clearfix() {
   zoom: 1;
-  &:before,
-  &:after {
-    content: ' ';
+  &::before,
+  &::after {
     display: table;
+    content: ' ';
   }
-  &:after {
+  &::after {
     clear: both;
-    visibility: hidden;
-    font-size: 0;
     height: 0;
+    font-size: 0;
+    visibility: hidden;
   }
 }

BasicProfile/src/components/DescriptionList/DescriptionList.tsx

@@ -37,7 +37,7 @@ const DescriptionList: React.SFC<DescriptionListProps> & {
       {title ? <div className={styles.title}>{title}</div> : null}
       <Row gutter={gutter}>
         {React.Children.map(children, (child: any) =>
-          child ? React.cloneElement(child, { column }) : child
+          child ? React.cloneElement(child, { column }) : child,
         )}
       </Row>
     </div>

BasicProfile/src/data.d.ts

-export interface BasicGood {
+export interface basicgood {
   id: string;
   name: string;
   barcode: string;
@@ -7,7 +7,7 @@ export interface BasicGood {
   amount: string | number;
 }
 
-export interface BasicProgress {
+export interface basicprogress {
   key: string;
   time: string;
   rate: string;
@@ -16,7 +16,7 @@ export interface BasicProgress {
   cost: string;
 }
 
-export interface BasicProfileDataType {
+export interface basicprofiledatatype {
   basicGoods: BasicGood[];
   basicProgress: BasicProgress[];
 }

BasicProfile/src/index.tsx

@@ -44,7 +44,7 @@ const progressColumns = [
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   loading: boolean;
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   BLOCK_NAME_CAMEL_CASE: BasicProfileDataType;
 }
 interface PAGE_NAME_UPPER_CAMEL_CASEState {
@@ -63,7 +63,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEState {
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
     loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetchBasic'],
-  })
+  }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,

BasicProfile/src/model.ts

@@ -10,7 +10,7 @@ export interface IStateType {
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
 ) => void;
 
 export interface ModelType {

BasicProfile/src/style.less

 @import '~antd/lib/style/themes/default.less';
 
 .title {
+  margin-bottom: 16px;
   color: @heading-color;
-  font-size: 16px;
   font-weight: 500;
-  margin-bottom: 16px;
+  font-size: 16px;
 }

CardList/src/data.d.ts

-export interface Member {
+export interface member {
   avatar: string;
   name: string;
   id: string;
 }
 
-export interface CardListItemDataType {
+export interface cardlistitemdatatype {
   id: string;
   owner: string;
   title: string;

CardList/src/index.tsx

@@ -12,7 +12,7 @@ import styles from './style.less';
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   BLOCK_NAME_CAMEL_CASE: IStateType;
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   loading: boolean;
 }
 interface PAGE_NAME_UPPER_CAMEL_CASEState {
@@ -33,7 +33,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEState {
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
     loading: loading.models.list,
-  })
+  }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
   PAGE_NAME_UPPER_CAMEL_CASEProps,
@@ -98,7 +98,11 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
             renderItem={item =>
               item ? (
                 <List.Item key={item.id}>
-                  <Card hoverable className={styles.card} actions={[<a>操作一</a>, <a>操作二</a>]}>
+                  <Card
+                    hoverable
+                    className={styles.card}
+                    actions={[<a key="option1">操作一</a>, <a key="option2">操作二</a>]}
+                  >
                     <Card.Meta
                       avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
                       title={<a>{item.title}</a>}

CardList/src/model.ts

@@ -10,7 +10,7 @@ export interface IStateType {
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
 ) => void;
 
 export interface ModelType {

CardList/src/style.less

@@ -9,9 +9,9 @@
       .ant-card-meta-title {
         margin-bottom: 12px;
         & > a {
-          color: @heading-color;
           display: inline-block;
           max-width: 100%;
+          color: @heading-color;
         }
       }
       .ant-card-actions {
@@ -36,21 +36,21 @@
 }
 
 .extraImg {
+  width: 155px;
   margin-top: -20px;
   text-align: center;
-  width: 155px;
   img {
     width: 100%;
   }
 }
 
 .newButton {
+  width: 100%;
+  height: 188px;
+  color: @text-color-secondary;
   background-color: #fff;
   border-color: @border-color-base;
   border-radius: @border-radius-sm;
-  color: @text-color-secondary;
-  width: 100%;
-  height: 188px;
 }
 
 .cardAvatar {
@@ -76,8 +76,8 @@
     }
   }
   img {
-    vertical-align: middle;
     margin-right: 8px;
+    vertical-align: middle;
   }
 }
 
@@ -100,8 +100,8 @@
   }
   .contentLink {
     position: absolute;
-    left: 0;
     bottom: -4px;
+    left: 0;
     width: 1000px;
     a {
       margin-right: 16px;

CardList/src/utils/utils.less

 .textOverflow() {
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
   word-break: break-all;
-  white-space: nowrap;
 }
 
 .textOverflowMulti(@line: 3, @bg: #fff) {
-  overflow: hidden;
   position: relative;
-  line-height: 1.5em;
   max-height: @line * 1.5em;
-  text-align: justify;
   margin-right: -1em;
   padding-right: 1em;
-  &:before {
-    background: @bg;
-    content: '...';
-    padding: 0 1px;
+  overflow: hidden;
+  line-height: 1.5em;
+  text-align: justify;
+  &::before {
     position: absolute;
     right: 14px;
     bottom: 0;
+    padding: 0 1px;
+    background: @bg;
+    content: '...';
   }
-  &:after {
-    background: white;
-    content: '';
-    margin-top: 0.2em;
+  &::after {
     position: absolute;
     right: 14px;
     width: 1em;
     height: 1em;
+    margin-top: 0.2em;
+    background: white;
+    content: '';
   }
 }
 
@@ -36,15 +36,15 @@
 // ------------------------
 .clearfix() {
   zoom: 1;
-  &:before,
-  &:after {
-    content: ' ';
+  &::before,
+  &::after {
     display: table;
+    content: ' ';
   }
-  &:after {
+  &::after {
     clear: both;
-    visibility: hidden;
-    font-size: 0;
     height: 0;
+    font-size: 0;
+    visibility: hidden;
   }
 }

Exception403/src/components/Exception/index.less

@@ -13,8 +13,8 @@
     zoom: 1;
     &::before,
     &::after {
-      content: ' ';
       display: table;
+      content: ' ';
     }
     &::after {
       clear: both;

Exception403/src/components/Exception/index.tsx

@@ -71,7 +71,7 @@ class Exception extends React.Component<ExceptionProps, any> {
                   to: redirect,
                   href: redirect,
                 },
-                <Button type="primary">{backText}</Button>
+                <Button type="primary">{backText}</Button>,
               )}
           </div>
         </div>

Exception404/src/components/Exception/index.less

@@ -13,8 +13,8 @@
     zoom: 1;
     &::before,
     &::after {
-      content: ' ';
       display: table;
+      content: ' ';
     }
     &::after {
       clear: both;

Exception404/src/components/Exception/index.tsx

@@ -71,7 +71,7 @@ class Exception extends React.Component<ExceptionProps, any> {
                   to: redirect,
                   href: redirect,
                 },
-                <Button type="primary">{backText}</Button>
+                <Button type="primary">{backText}</Button>,
               )}
           </div>
         </div>

Exception500/src/components/Exception/index.less

@@ -13,8 +13,8 @@
     zoom: 1;
     &::before,
     &::after {
-      content: ' ';
       display: table;
+      content: ' ';
     }
     &::after {
       clear: both;

Exception500/src/components/Exception/index.tsx

@@ -71,7 +71,7 @@ class Exception extends React.Component<ExceptionProps, any> {
                   to: redirect,
                   href: redirect,
                 },
-                <Button type="primary">{backText}</Button>
+                <Button type="primary">{backText}</Button>,
               )}
           </div>
         </div>

Monitor/src/components/ActiveChart/index.less

@@ -12,15 +12,15 @@
 }
 .activeChartLegend {
   position: relative;
-  font-size: 0;
-  margin-top: 8px;
   height: 20px;
+  margin-top: 8px;
+  font-size: 0;
   line-height: 20px;
   span {
     display: inline-block;
+    width: 33.33%;
     font-size: 12px;
     text-align: center;
-    width: 33.33%;
   }
   span:first-child {
     text-align: left;
@@ -31,9 +31,9 @@
 }
 .dashedLine {
   position: relative;
-  height: 1px;
   top: -70px;
   left: -3px;
+  height: 1px;
 
   .line {
     position: absolute;

Monitor/src/components/ActiveChart/index.tsx

@@ -24,12 +24,12 @@ export default class ActiveChart extends Component {
   state = {
     activeData: getActiveData(),
   };
+  timer: number | undefined;
+  requestRef: number | undefined;
 
   componentDidMount() {
     this.loopData();
   }
-  timer: number | undefined;
-  requestRef: number | undefined;
   componentWillUnmount() {
     clearTimeout(this.timer);
     if (this.requestRef) {
@@ -46,7 +46,7 @@ export default class ActiveChart extends Component {
           },
           () => {
             this.loopData();
-          }
+          },
         );
       }, 1000);
     });

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

@@ -45,6 +45,8 @@ class Pie extends Component<IPieProps, IPieState> {
   };
 
   requestRef: number | undefined;
+  root!: HTMLDivElement;
+  chart: G2.Chart | undefined;
 
   componentDidMount() {
     window.addEventListener(
@@ -52,7 +54,7 @@ class Pie extends Component<IPieProps, IPieState> {
       () => {
         this.requestRef = requestAnimationFrame(() => this.resize());
       },
-      { passive: true }
+      { passive: true },
     );
   }
 
@@ -123,8 +125,6 @@ class Pie extends Component<IPieProps, IPieState> {
       legendData,
     });
   };
-  root!: HTMLDivElement;
-  chart: G2.Chart | undefined;
 
   // for window resize auto responsive legend
   @Bind()

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

@@ -34,6 +34,11 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     height: 0,
     width: 0,
   };
+  isUnmount!: boolean;
+  requestRef!: number;
+
+  root: HTMLDivElement | undefined;
+  imageMask: HTMLImageElement | undefined;
 
   componentDidMount() {
     requestAnimationFrame(() => {
@@ -49,20 +54,16 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       this.renderChart(this.props);
     }
   }
-  isUnmount!: boolean;
   componentWillUnmount() {
     this.isUnmount = true;
     window.cancelAnimationFrame(this.requestRef);
     window.removeEventListener('resize', this.resize);
   }
-  requestRef!: number;
   resize = () => {
     this.requestRef = requestAnimationFrame(() => {
       this.renderChart(this.props);
     });
   };
-
-  root: HTMLDivElement | undefined;
   saveRootRef = (node: HTMLDivElement) => {
     this.root = node;
   };
@@ -91,7 +92,7 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
     (Shape as any).registerShape('point', 'cloud', {
       drawShape(
         cfg: { x: any; y: any },
-        container: { addShape: (arg0: string, arg1: { attrs: any }) => void }
+        container: { addShape: (arg0: string, arg1: { attrs: any }) => void },
       ) {
         const attrs = getTextAttrs(cfg);
         return container.addShape('text', {
@@ -103,7 +104,6 @@ class TagCloud extends Component<ITagCloudProps, ITagCloudState> {
       },
     });
   };
-  imageMask: HTMLImageElement | undefined;
 
   @Bind()
   @Debounce(500)

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

@@ -18,6 +18,9 @@ class WaterWave extends Component<IWaterWaveProps> {
   state = {
     radio: 1,
   };
+  timer: number = 0;
+  root: HTMLDivElement | undefined | null;
+  node: HTMLCanvasElement | undefined | null;
 
   componentDidMount() {
     this.renderChart();
@@ -27,7 +30,7 @@ class WaterWave extends Component<IWaterWaveProps> {
       () => {
         requestAnimationFrame(() => this.resize());
       },
-      { passive: true }
+      { passive: true },
     );
   }
 
@@ -56,7 +59,6 @@ class WaterWave extends Component<IWaterWaveProps> {
       });
     }
   };
-  timer: number = 0;
   renderChart(type?: string) {
     const { percent, color = '#1890FF' } = this.props;
     const data = percent / 100;
@@ -199,8 +201,6 @@ class WaterWave extends Component<IWaterWaveProps> {
     }
     render();
   }
-  root: HTMLDivElement | undefined | null;
-  node: HTMLCanvasElement | undefined | null;
   render() {
     const { radio } = this.state;
     const { percent, title, height = 1 } = this.props;

Monitor/src/components/Charts/autoHeight.tsx

@@ -19,7 +19,7 @@ function getAutoHeight(n: HTMLDivElement) {
     return 0;
   }
 
-  let node = n;
+  const node = n;
 
   let height = computeHeight(node);
   const parentNode = node.parentNode as HTMLDivElement;
@@ -36,7 +36,7 @@ interface IAutoHeightProps {
 
 function autoHeight() {
   return function<P extends IAutoHeightProps>(
-    WrappedComponent: React.ComponentClass<P> | React.SFC<P>
+    WrappedComponent: React.ComponentClass<P> | React.SFC<P>,
   ): React.ComponentClass<P> {
     class AutoHeightComponent extends React.Component<P & IAutoHeightProps> {
       state = {
@@ -46,11 +46,10 @@ function autoHeight() {
       componentDidMount() {
         const { height } = this.props;
         if (!height) {
-          const h = getAutoHeight(this.root);
-          // eslint-disable-next-line
+          let h = getAutoHeight(this.root);
           this.setState({ computedHeight: h });
           if (h < 1) {
-            const h = getAutoHeight(this.root);
+            h = getAutoHeight(this.root);
             this.setState({ computedHeight: h });
           }
         }

Monitor/src/data.d.ts

-export interface ITag {
+export interface itag {
   name: string;
   value: string;
   type: string;

Monitor/src/index.tsx

@@ -18,7 +18,7 @@ const targetTime = new Date().getTime() + 3900000;
 
 interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   BLOCK_NAME_CAMEL_CASE: IStateType;
-  dispatch: Dispatch;
+  dispatch: Dispatch<any>;
   loading: boolean;
 }
 
@@ -34,7 +34,7 @@ interface PAGE_NAME_UPPER_CAMEL_CASEProps {
   }) => ({
     BLOCK_NAME_CAMEL_CASE,
     loading: loading.models.monitor,
-  })
+  }),
 )
 class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
   componentDidMount() {

Monitor/src/model.ts

@@ -10,7 +10,7 @@ export interface IStateType {
 
 export type Effect = (
   action: AnyAction,
-  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T }
+  effects: EffectsCommandMap & { select: <T>(func: (state: IStateType) => T) => T },
 ) => void;
 
 export interface ModelType {

Monitor/src/style.less

 @import '~antd/lib/style/themes/default.less';
 
 .mapChart {
-  padding-top: 24px;
   height: 452px;
+  padding-top: 24px;
   text-align: center;
   img {
     display: inline-block;