import sorted

AccountCenter/src/components/Applications/index.tsx

+import { Avatar, Card, Dropdown, Icon, List, Menu, Tooltip } from 'antd';
 import React, { Component } from 'react';
-import { List, Card, Icon, Dropdown, Menu, Avatar, Tooltip } from 'antd';
-import numeral from 'numeral';
+
 import { connect } from 'dva';
-import stylesApplications from './index.less';
+import numeral from 'numeral';
 import { ModalState } from '../../model';
+import stylesApplications from './index.less';
 
 export function formatWan(val: number) {
   const v = val * 1;

AccountCenter/src/components/ArticleListContent/index.tsx

+import { Avatar } from 'antd';
 import React from 'react';
 import moment from 'moment';
-import { Avatar } from 'antd';
 import styles from './index.less';
 
 export interface ApplicationsProps {

AccountCenter/src/components/Articles/index.tsx

+import { Icon, List, Tag } from 'antd';
 import React, { Component } from 'react';
-import { List, Icon, Tag } from 'antd';
+
 import { connect } from 'dva';
 import ArticleListContent from '../ArticleListContent';
-import styles from './index.less';
-import { ModalState } from '../../model';
 import { ListItemDataType } from '../../data';
+import { ModalState } from '../../model';
+import styles from './index.less';
 
 @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({
   list: BLOCK_NAME_CAMEL_CASE.list,

AccountCenter/src/components/AvatarList/index.tsx

+import { Avatar, Tooltip } from 'antd';
+
 import React from 'react';
-import { Tooltip, Avatar } from 'antd';
 import classNames from 'classnames';
 import styles from './index.less';
 

AccountCenter/src/components/Projects/index.tsx

+import { Card, List } from 'antd';
 import React, { Component } from 'react';
-import { List, Card } from 'antd';
-import moment from 'moment';
+
 import { connect } from 'dva';
+import moment from 'moment';
 import AvatarList from '../AvatarList';
-import styles from './index.less';
-import { ModalState } from '../../model';
 import { ListItemDataType } from '../../data';
+import { ModalState } from '../../model';
+import styles from './index.less';
 
 @connect(({ BLOCK_NAME_CAMEL_CASE }: { BLOCK_NAME_CAMEL_CASE: ModalState }) => ({
   list: BLOCK_NAME_CAMEL_CASE.list,

AccountCenter/src/index.tsx

+import { Avatar, Card, Col, Divider, Icon, Input, Row, Tag } from 'antd';
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
+
 import { Dispatch } from 'redux';
-import Link from 'umi/link';
 import { GridContent } from '@ant-design/pro-layout';
+import Link from 'umi/link';
 import { RouteChildrenProps } from 'react-router';
-import { Card, Row, Col, Icon, Avatar, Tag, Divider, Input } from 'antd';
-import styles from './Center.less';
-import { ITag, CurrentUser } from './data';
+import { connect } from 'dva';
 import { ModalState } from './model';
+import Projects from './components/Projects';
 import Articles from './components/Articles';
 import Applications from './components/Applications';
-import Projects from './components/Projects';
+import { CurrentUser, ITag } from './data';
+import styles from './Center.less';
 
 const operationTabList = [
   {
@@ -186,7 +187,9 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent<
                   <Divider dashed />
                   <div className={styles.tags}>
                     <div className={styles.tagsTitle}>标签</div>
-                    {currentUser.tags.concat(newTags).map(item => <Tag key={item.key}>{item.label}</Tag>)}
+                    {currentUser.tags.concat(newTags).map(item => (
+                      <Tag key={item.key}>{item.label}</Tag>
+                    ))}
                     {inputVisible && (
                       <Input
                         ref={ref => this.saveInputRef(ref)}

AccountCenter/src/model.ts

-
-import { Reducer, AnyAction } from 'redux';
+import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-
 import { CurrentUser, ListItemDataType } from './data';
 import { queryCurrent, queryFakeList } from './service';
 

AccountSettings/src/components/GeographicView.tsx

 import React, { Component } from 'react';
 import { Select, Spin } from 'antd';
-import { connect } from 'dva';
+
 import { Dispatch } from 'redux';
+import { connect } from 'dva';
+import { CityData, ProvinceData } from '../data';
 import styles from './GeographicView.less';
-import { ProvinceData, CityData } from '../data';
 
 const { Option } = Select;
 

AccountSettings/src/components/PhoneView.tsx

 import React, { Fragment, PureComponent } from 'react';
+
 import { Input } from 'antd';
 import styles from './PhoneView.less';
 

AccountSettings/src/components/base.tsx

+import { Button, Form, Input, Select, Upload, message } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import { Form, Input, Upload, Select, Button, message } from 'antd';
+
 import { FormComponentProps } from 'antd/es/form';
 import { connect } from 'dva';
-import styles from './BaseView.less';
+import { CurrentUser } from '../data';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
-import { CurrentUser } from '../data';
+import styles from './BaseView.less';
 
 const FormItem = Form.Item;
 const { Option } = Select;

AccountSettings/src/components/binding.tsx

-import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import { Icon, List } from 'antd';
+import React, { Component, Fragment } from 'react';
 
 class BindingView extends Component {
   getData = () => [

AccountSettings/src/components/notification.tsx

+import { List, Switch } from 'antd';
 import React, { Component, Fragment } from 'react';
+
 import { formatMessage } from 'umi-plugin-react/locale';
-import { Switch, List } from 'antd';
 
 type Unpacked<T> = T extends (infer U)[] ? U : T;
 

AccountSettings/src/components/security.tsx

+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component, Fragment } from 'react';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
+
 import { List } from 'antd';
 
 type Unpacked<T> = T extends (infer U)[] ? U : T;

AccountSettings/src/index.tsx

 import React, { Component } from 'react';
-import { connect } from 'dva';
+
 import { Dispatch } from 'redux';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import { GridContent } from '@ant-design/pro-layout';
 import { Menu } from 'antd';
-import styles from './style.less';
+import { connect } from 'dva';
 import BaseView from './components/base';
-import SecurityView from './components/security';
 import BindingView from './components/binding';
-import NotificationView from './components/notification';
 import { CurrentUser } from './data';
+import NotificationView from './components/notification';
+import SecurityView from './components/security';
+import styles from './style.less';
 
 const { Item } = Menu;
 

AccountSettings/src/model.ts

-import { Reducer, AnyAction } from 'redux';
+import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-
-import { query as queryUsers, queryCurrent, queryProvince, queryCity } from './service';
-import { CurrentUser, City, Province } from './data';
+import { City, CurrentUser, Province } from './data';
+import { queryCity, queryCurrent, queryProvince, query as queryUsers } from './service';
 
 export interface ModalState {
   currentUser?: Partial<CurrentUser>;

DashboardAnalysis/src/_mock.ts

 import moment from 'moment';
-import { IVisitData, IRadarData, IAnalysisData } from './data';
+import { IAnalysisData, IRadarData, IVisitData } from './data';
 
 // mock data
 const visitData: IVisitData[] = [];

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

+import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
-import Debounce from 'lodash-decorators/debounce';
+
 import Bind from 'lodash-decorators/bind';
+import Debounce from 'lodash-decorators/debounce';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 

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

-import React from 'react';
 import { Card } from 'antd';
-import classNames from 'classnames';
 import { CardProps } from 'antd/es/card';
-
+import React from 'react';
+import classNames from 'classnames';
 import styles from './index.less';
 
 type totalType = () => React.ReactNode;

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

 import React from 'react';
-
 import styles from './index.less';
 
 export interface IFieldProps {

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

+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
 import autoHeight from '../autoHeight';
 
 const { Arc, Html, Line } = Guide;

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

+import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 

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

+import { Chart, Geom, Tooltip } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Tooltip, Geom } from 'bizcharts';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 

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

+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
+
+import Bind from 'lodash-decorators/bind';
 import { DataView } from '@antv/data-set';
+import Debounce from 'lodash-decorators/debounce';
 import { Divider } from 'antd';
-import classNames from 'classnames';
 import ReactFitText from 'react-fittext';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
+import classNames from 'classnames';
 import autoHeight from '../autoHeight';
-
 import styles from './index.less';
 
 export interface IPieProps {

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

+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts';
+
+import Bind from 'lodash-decorators/bind';
 import DataSet from '@antv/data-set';
 import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
 import classNames from 'classnames';
 import autoHeight from '../autoHeight';
 import styles from './index.less';

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

-import React from 'react';
-import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts';
+import { Axis, Chart, Geom, Legend, Tooltip } from 'bizcharts';
+
 import DataSet from '@antv/data-set';
+import React from 'react';
 import Slider from 'bizcharts-plugin-slider';
 import autoHeight from '../autoHeight';
 import styles from './index.less';

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

 import React, { Component } from 'react';
+
 import autoHeight from '../autoHeight';
 import styles from './index.less';
 

DashboardAnalysis/src/components/Charts/index.tsx

 import numeral from 'numeral';
+import Bar from './Bar';
 import ChartCard from './ChartCard';
 import Field from './Field';
-import Bar from './Bar';
-import Pie from './Pie';
 import Gauge from './Gauge';
 import MiniArea from './MiniArea';
 import MiniBar from './MiniBar';
 import MiniProgress from './MiniProgress';
-import WaterWave from './WaterWave';
+import Pie from './Pie';
 import TagCloud from './TagCloud';
 import TimelineChart from './TimelineChart';
+import WaterWave from './WaterWave';
 
 const yuan = (val: number | string) => `¥ ${numeral(val).format('0,0')}`;
 

DashboardAnalysis/src/components/IntroduceRow.tsx

-import React from 'react';
-import { Row, Col, Icon, Tooltip } from 'antd';
+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 styles from '../style.less';
-import Yuan from '../utils/Yuan';
-import Trend from './Trend';
 import { IVisitData } from '../data.d';
+import Trend from './Trend';
+import Yuan from '../utils/Yuan';
+import styles from '../style.less';
 
 const { ChartCard, MiniArea, MiniBar, MiniProgress, Field } = Charts;
 
@@ -20,145 +21,142 @@ const topColResponsiveProps = {
 };
 
 const IntroduceRow = ({ loading, visitData }: { loading: boolean; visitData: IVisitData[] }) => (
-    <Row gutter={24}>
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          bordered={false}
-          title={
-            <FormattedMessage id="BLOCK_NAME.analysis.total-sales" defaultMessage="Total Sales" />
-          }
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          loading={loading}
-          total={() => <Yuan>126560</Yuan>}
-          footer={
-            <Field
-              label={
-                <FormattedMessage id="BLOCK_NAME.analysis.day-sales" defaultMessage="Daily Sales" />
-              }
-              value={`￥${numeral(12423).format('0,0')}`}
-            />
-          }
-          contentHeight={46}
-        >
-          <Trend flag="up" style={{ marginRight: 16 }}>
-            <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
-            <span className={styles.trendText}>12%</span>
-          </Trend>
-          <Trend flag="down">
-            <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Daily Changes" />
-            <span className={styles.trendText}>11%</span>
-          </Trend>
-        </ChartCard>
-      </Col>
+  <Row gutter={24}>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        title={
+          <FormattedMessage id="BLOCK_NAME.analysis.total-sales" defaultMessage="Total Sales" />
+        }
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        loading={loading}
+        total={() => <Yuan>126560</Yuan>}
+        footer={
+          <Field
+            label={
+              <FormattedMessage id="BLOCK_NAME.analysis.day-sales" defaultMessage="Daily Sales" />
+            }
+            value={`￥${numeral(12423).format('0,0')}`}
+          />
+        }
+        contentHeight={46}
+      >
+        <Trend flag="up" style={{ marginRight: 16 }}>
+          <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
+          <span className={styles.trendText}>12%</span>
+        </Trend>
+        <Trend flag="down">
+          <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Daily Changes" />
+          <span className={styles.trendText}>11%</span>
+        </Trend>
+      </ChartCard>
+    </Col>
 
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          bordered={false}
-          loading={loading}
-          title={<FormattedMessage id="BLOCK_NAME.analysis.visits" defaultMessage="Visits" />}
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          total={numeral(8846).format('0,0')}
-          footer={
-            <Field
-              label={
-                <FormattedMessage
-                  id="BLOCK_NAME.analysis.day-visits"
-                  defaultMessage="Daily Visits"
-                />
-              }
-              value={numeral(1234).format('0,0')}
-            />
-          }
-          contentHeight={46}
-        >
-          <MiniArea color="#975FE4" data={visitData} />
-        </ChartCard>
-      </Col>
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          bordered={false}
-          loading={loading}
-          title={<FormattedMessage id="BLOCK_NAME.analysis.payments" defaultMessage="Payments" />}
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          total={numeral(6560).format('0,0')}
-          footer={
-            <Field
-              label={
-                <FormattedMessage
-                  id="BLOCK_NAME.analysis.conversion-rate"
-                  defaultMessage="Conversion Rate"
-                />
-              }
-              value="60%"
-            />
-          }
-          contentHeight={46}
-        >
-          <MiniBar data={visitData} />
-        </ChartCard>
-      </Col>
-      <Col {...topColResponsiveProps}>
-        <ChartCard
-          loading={loading}
-          bordered={false}
-          title={
-            <FormattedMessage
-              id="BLOCK_NAME.analysis.operational-effect"
-              defaultMessage="Operational Effect"
-            />
-          }
-          action={
-            <Tooltip
-              title={
-                <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
-              }
-            >
-              <Icon type="info-circle-o" />
-            </Tooltip>
-          }
-          total="78%"
-          footer={
-            <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
-              <Trend flag="up" style={{ marginRight: 16 }}>
-                <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
-                <span className={styles.trendText}>12%</span>
-              </Trend>
-              <Trend flag="down">
-                <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Weekly Changes" />
-                <span className={styles.trendText}>11%</span>
-              </Trend>
-            </div>
-          }
-          contentHeight={46}
-        >
-          <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
-        </ChartCard>
-      </Col>
-    </Row>
-  );
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        loading={loading}
+        title={<FormattedMessage id="BLOCK_NAME.analysis.visits" defaultMessage="Visits" />}
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(8846).format('0,0')}
+        footer={
+          <Field
+            label={
+              <FormattedMessage id="BLOCK_NAME.analysis.day-visits" defaultMessage="Daily Visits" />
+            }
+            value={numeral(1234).format('0,0')}
+          />
+        }
+        contentHeight={46}
+      >
+        <MiniArea color="#975FE4" data={visitData} />
+      </ChartCard>
+    </Col>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        bordered={false}
+        loading={loading}
+        title={<FormattedMessage id="BLOCK_NAME.analysis.payments" defaultMessage="Payments" />}
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total={numeral(6560).format('0,0')}
+        footer={
+          <Field
+            label={
+              <FormattedMessage
+                id="BLOCK_NAME.analysis.conversion-rate"
+                defaultMessage="Conversion Rate"
+              />
+            }
+            value="60%"
+          />
+        }
+        contentHeight={46}
+      >
+        <MiniBar data={visitData} />
+      </ChartCard>
+    </Col>
+    <Col {...topColResponsiveProps}>
+      <ChartCard
+        loading={loading}
+        bordered={false}
+        title={
+          <FormattedMessage
+            id="BLOCK_NAME.analysis.operational-effect"
+            defaultMessage="Operational Effect"
+          />
+        }
+        action={
+          <Tooltip
+            title={
+              <FormattedMessage id="BLOCK_NAME.analysis.introduce" defaultMessage="Introduce" />
+            }
+          >
+            <Icon type="info-circle-o" />
+          </Tooltip>
+        }
+        total="78%"
+        footer={
+          <div style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}>
+            <Trend flag="up" style={{ marginRight: 16 }}>
+              <FormattedMessage id="BLOCK_NAME.analysis.week" defaultMessage="Weekly Changes" />
+              <span className={styles.trendText}>12%</span>
+            </Trend>
+            <Trend flag="down">
+              <FormattedMessage id="BLOCK_NAME.analysis.day" defaultMessage="Weekly Changes" />
+              <span className={styles.trendText}>11%</span>
+            </Trend>
+          </div>
+        }
+        contentHeight={46}
+      >
+        <MiniProgress percent={78} strokeWidth={8} target={80} color="#13C2C2" />
+      </ChartCard>
+    </Col>
+  </Row>
+);
 
 export default IntroduceRow;

DashboardAnalysis/src/components/NumberInfo/index.tsx

-import React from 'react';
 import { Icon } from 'antd';
+import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';
 

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 { Card, Tabs, Row, Col } from 'antd';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
+import { IOfflineChartData, IOfflineData } from '../data';
+
 import Charts from './Charts';
-import styles from '../style.less';
 import NumberInfo from './NumberInfo';
-import { IOfflineData, IOfflineChartData } from '../data';
+import styles from '../style.less';
 
 const { TimelineChart, Pie } = Charts;
 
@@ -15,33 +16,33 @@ const CustomTab = ({
   data: IOfflineData;
   currentTabKey: string;
 }) => (
-    <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
-      <Col span={12}>
-        <NumberInfo
-          title={data.name}
-          subTitle={
-            <FormattedMessage
-              id="BLOCK_NAME.analysis.conversion-rate"
-              defaultMessage="Conversion Rate"
-            />
-          }
-          gap={2}
-          total={`${data.cvr * 100}%`}
-          theme={currentKey !== data.name ? 'light' : undefined}
-        />
-      </Col>
-      <Col span={12} style={{ paddingTop: 36 }}>
-        <Pie
-          animate={false}
-          inner={0.55}
-          tooltip={false}
-          margin={[0, 0, 0, 0]}
-          percent={data.cvr * 100}
-          height={64}
-        />
-      </Col>
-    </Row>
-  );
+  <Row gutter={8} style={{ width: 138, margin: '8px 0' }}>
+    <Col span={12}>
+      <NumberInfo
+        title={data.name}
+        subTitle={
+          <FormattedMessage
+            id="BLOCK_NAME.analysis.conversion-rate"
+            defaultMessage="Conversion Rate"
+          />
+        }
+        gap={2}
+        total={`${data.cvr * 100}%`}
+        theme={currentKey !== data.name ? 'light' : undefined}
+      />
+    </Col>
+    <Col span={12} style={{ paddingTop: 36 }}>
+      <Pie
+        animate={false}
+        inner={0.55}
+        tooltip={false}
+        margin={[0, 0, 0, 0]}
+        percent={data.cvr * 100}
+        height={64}
+      />
+    </Col>
+  </Row>
+);
 
 const { TabPane } = Tabs;
 

DashboardAnalysis/src/components/ProportionSales.tsx

-import React from 'react';
 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 styles from '../style.less';
 import Yuan from '../utils/Yuan';
-import { ISalesData } from '../data';
+import styles from '../style.less';
 
 const { Pie } = Charts;
 
@@ -22,56 +23,56 @@ const ProportionSales = ({
   salesPieData: ISalesData[];
   handleChangeSalesType?: (e: RadioChangeEvent) => void;
 }) => (
-    <Card
-      loading={loading}
-      className={styles.salesCard}
-      bordered={false}
-      title={
-        <FormattedMessage
-          id="BLOCK_NAME.analysis.the-proportion-of-sales"
-          defaultMessage="The Proportion of Sales"
-        />
-      }
-      bodyStyle={{ padding: 24 }}
-      extra={
-        <div className={styles.salesCardExtra}>
-          {dropdownGroup}
-          <div className={styles.salesTypeRadio}>
-            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
-              <Radio.Button value="all">
-                <FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" />
-              </Radio.Button>
-              <Radio.Button value="online">
-                <FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" />
-              </Radio.Button>
-              <Radio.Button value="stores">
-                <FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" />
-              </Radio.Button>
-            </Radio.Group>
-          </div>
+  <Card
+    loading={loading}
+    className={styles.salesCard}
+    bordered={false}
+    title={
+      <FormattedMessage
+        id="BLOCK_NAME.analysis.the-proportion-of-sales"
+        defaultMessage="The Proportion of Sales"
+      />
+    }
+    bodyStyle={{ padding: 24 }}
+    extra={
+      <div className={styles.salesCardExtra}>
+        {dropdownGroup}
+        <div className={styles.salesTypeRadio}>
+          <Radio.Group value={salesType} onChange={handleChangeSalesType}>
+            <Radio.Button value="all">
+              <FormattedMessage id="BLOCK_NAME.channel.all" defaultMessage="ALL" />
+            </Radio.Button>
+            <Radio.Button value="online">
+              <FormattedMessage id="BLOCK_NAME.channel.online" defaultMessage="Online" />
+            </Radio.Button>
+            <Radio.Button value="stores">
+              <FormattedMessage id="BLOCK_NAME.channel.stores" defaultMessage="Stores" />
+            </Radio.Button>
+          </Radio.Group>
         </div>
-      }
-      style={{ marginTop: 24 }}
-    >
-      <div
-        style={{
-          minHeight: 380,
-        }}
-      >
-        <h4 style={{ marginTop: 8, marginBottom: 32 }}>
-          <FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
-        </h4>
-        <Pie
-          hasLegend
-          subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
-          total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
-          data={salesPieData}
-          valueFormat={value => <Yuan>{value}</Yuan>}
-          height={248}
-          lineWidth={4}
-        />
       </div>
-    </Card>
-  );
+    }
+    style={{ marginTop: 24 }}
+  >
+    <div
+      style={{
+        minHeight: 380,
+      }}
+    >
+      <h4 style={{ marginTop: 8, marginBottom: 32 }}>
+        <FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />
+      </h4>
+      <Pie
+        hasLegend
+        subTitle={<FormattedMessage id="BLOCK_NAME.analysis.sales" defaultMessage="Sales" />}
+        total={() => <Yuan>{salesPieData.reduce((pre, now) => now.y + pre, 0)}</Yuan>}
+        data={salesPieData}
+        valueFormat={value => <Yuan>{value}</Yuan>}
+        height={248}
+        lineWidth={4}
+      />
+    </div>
+  </Card>
+);
 
 export default ProportionSales;

DashboardAnalysis/src/components/SalesCard.tsx

-import React from 'react';
-import { Row, Col, Card, Tabs, DatePicker } from 'antd';
+import { Card, Col, DatePicker, Row, Tabs } from 'antd';
 import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
-import numeral from 'numeral';
+
 import { RangePickerValue } from 'antd/es/date-picker/interface';
-import Charts from './Charts';
+import React from 'react';
+import numeral from 'numeral';
 import { ISalesData } from '../data';
+import Charts from './Charts';
 import styles from '../style.less';
 
 const { Bar } = Charts;

DashboardAnalysis/src/components/TopSearch.tsx

-import React from 'react';
-import { Row, Col, Table, Tooltip, Card, Icon } from 'antd';
+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 Charts from './Charts';
-import Trend from './Trend';
 import NumberInfo from './NumberInfo';
+import Trend from './Trend';
 import styles from '../style.less';
-import { ISearchData, IVisitData2 } from '../data';
 
 const { MiniArea } = Charts;
 

DashboardAnalysis/src/components/Trend/index.tsx

-import React from 'react';
 import { Icon } from 'antd';
+import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';
 

DashboardAnalysis/src/index.tsx

+import { Col, Dropdown, Icon, Menu, Row } from 'antd';
 import React, { Component, Suspense } from 'react';
-import { connect } from 'dva';
-import { Row, Col, Icon, Menu, Dropdown } from 'antd';
-import { RangePickerValue } from 'antd/es/date-picker/interface';
+
 import { Dispatch } from 'redux';
-import { RadioChangeEvent } from 'antd/es/radio';
 import { GridContent } from '@ant-design/pro-layout';
-import { getTimeDistance } from './utils/utils';
-import styles from './style.less';
+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 styles from './style.less';
 
 const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
 const SalesCard = React.lazy(() => import('./components/SalesCard'));

DashboardAnalysis/src/model.tsx

-import { Reducer, AnyAction } from 'redux';
-import { EffectsCommandMap } from 'dva';
+import { AnyAction, Reducer } from 'redux';
 
+import { EffectsCommandMap } from 'dva';
 import { IAnalysisData } from './data';
 import { fakeChartData } from './service';
 

DashboardAnalysis/src/utils/utils.ts

-import moment from 'moment';
 import { RangePickerValue } from 'antd/es/date-picker/interface';
+import moment from 'moment';
 
 export function fixedZero(val: number) {
   return val * 1 < 10 ? `0${val}` : val;

DashboardMonitor/src/components/ActiveChart/index.tsx

 import React, { Component } from 'react';
+
 import { Statistic } from 'antd';
 import Charts from '../Charts';
 import styles from './index.less';

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

+import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
 import autoHeight from '../autoHeight';
 
 const { Arc, Html, Line } = Guide;

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

+import { Axis, Chart, Geom, Tooltip } from 'bizcharts';
+
 import React from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
 import autoHeight from '../autoHeight';
 import styles from '../index.less';
 

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

+import { Chart, Coord, Geom, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
+
+import Bind from 'lodash-decorators/bind';
 import { DataView } from '@antv/data-set';
+import Debounce from 'lodash-decorators/debounce';
 import { Divider } from 'antd';
-import classNames from 'classnames';
 import ReactFitText from 'react-fittext';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
+import classNames from 'classnames';
 import autoHeight from '../autoHeight';
-
 import styles from './index.less';
 
 export interface IPieProps {

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

+import { Chart, Coord, Geom, Shape, Tooltip } from 'bizcharts';
 import React, { Component } from 'react';
-import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts';
+
+import Bind from 'lodash-decorators/bind';
 import DataSet from '@antv/data-set';
 import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
 import classNames from 'classnames';
 import autoHeight from '../autoHeight';
 import styles from './index.less';

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

 import React, { Component } from 'react';
+
 import autoHeight from '../autoHeight';
 import styles from './index.less';
 

DashboardMonitor/src/components/Charts/index.tsx

-import Pie from './Pie';
 import Gauge from './Gauge';
-import WaterWave from './WaterWave';
-import TagCloud from './TagCloud';
 import MiniArea from './MiniArea';
+import Pie from './Pie';
+import TagCloud from './TagCloud';
+import WaterWave from './WaterWave';
 
 const Charts = {
   Pie,

DashboardMonitor/src/index.tsx

+import { Card, Col, Row, Statistic, Tooltip } from 'antd';
+import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
 import React, { Component } from 'react';
-import { connect } from 'dva';
-import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
-import { Row, Col, Card, Statistic, Tooltip } from 'antd';
-import numeral from 'numeral';
+
 import { Dispatch } from 'redux';
 import { GridContent } from '@ant-design/pro-layout';
+import { connect } from 'dva';
+import numeral from 'numeral';
 import { IStateType } from './model';
+import Charts from './components/Charts';
 import ActiveChart from './components/ActiveChart';
 import styles from './style.less';
-import Charts from './components/Charts';
 
 const { Countdown } = Statistic;
 

DashboardMonitor/src/model.ts

-import { Reducer, AnyAction } from 'redux';
-import { EffectsCommandMap } from 'dva';
+import { AnyAction, Reducer } from 'redux';
 
+import { EffectsCommandMap } from 'dva';
 import { ITag } from './data';
 import { queryTags } from './service';
 

DashboardWorkplace/src/components/EditableLinkGroup/index.tsx

 import React, { PureComponent, createElement } from 'react';
+
 import { Button } from 'antd';
 import styles from './index.less';
 

DashboardWorkplace/src/components/Radar/index.tsx

+import { Axis, Chart, Coord, Geom, Tooltip } from 'bizcharts';
+import { Col, Row } from 'antd';
 import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord, Axis } from 'bizcharts';
-import { Row, Col } from 'antd';
+
 import autoHeight from './autoHeight';
 import styles from './index.less';
 

DashboardWorkplace/src/index.tsx

+import { Avatar, Card, Col, List, Row } from 'antd';
 import React, { PureComponent } from 'react';
-import moment from 'moment';
-import { connect } from 'dva';
-import Link from 'umi/link';
-import { Row, Col, Card, List, Avatar } from 'antd';
-import { Dispatch } from 'redux';
 
+import { Dispatch } from 'redux';
+import Link from 'umi/link';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import EditableLinkGroup from './components/EditableLinkGroup';
+import { connect } from 'dva';
+import moment from 'moment';
 import Radar from './components/Radar';
 import { ModalState } from './model';
-import { ICurrentUser, IActivities, IRadarData, INotice } from './data';
-
+import EditableLinkGroup from './components/EditableLinkGroup';
+import { IActivities, ICurrentUser, INotice, IRadarData } from './data';
 import styles from './style.less';
 
 const links = [

DashboardWorkplace/src/model.ts

+import { AnyAction, Reducer } from 'redux';
 import { EffectsCommandMap } from 'dva';
-import { Reducer, AnyAction } from 'redux';
-import { queryCurrent, queryProjectNotice, queryActivities, fakeChartData } from './service';
-import { CurrentUser, Notice, Activeties, RadarData } from './data';
+import { Activeties, CurrentUser, Notice, RadarData } from './data';
+import { fakeChartData, queryActivities, queryCurrent, queryProjectNotice } from './service';
 
 export interface ModalState {
   currentUser: Partial<CurrentUser>;

EditorFlow/src/components/EditorContextMenu/FlowContextMenu.tsx

+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
 const FlowContextMenu = () => (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <EdgeMenu>
-        <MenuItem command="delete" />
-      </EdgeMenu>
-      <GroupMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-        <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
-      </GroupMenu>
-      <MultiMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="paste" />
-        <MenuItem command="addGroup" icon="group" text="Add Group" />
-        <MenuItem command="delete" />
-      </MultiMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-        <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <EdgeMenu>
+      <MenuItem command="delete" />
+    </EdgeMenu>
+    <GroupMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+      <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
+    </GroupMenu>
+    <MultiMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="paste" />
+      <MenuItem command="addGroup" icon="group" text="Add Group" />
+      <MenuItem command="delete" />
+    </MultiMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+      <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default FlowContextMenu;

EditorFlow/src/components/EditorContextMenu/MenuItem.tsx

-import React from 'react';
 import { Command } from 'gg-editor';
+import React from 'react';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface MenuItemProps {
   command: string;

EditorFlow/src/components/EditorContextMenu/MindContextMenu.tsx

+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
 const MindContextMenu = () => (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="append" text="Topic" />
-        <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
-        <MenuItem command="collapse" text="Fold" />
-        <MenuItem command="expand" text="Unfold" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="append" text="Topic" />
+      <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
+      <MenuItem command="collapse" text="Fold" />
+      <MenuItem command="expand" text="Unfold" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default MindContextMenu;

EditorFlow/src/components/EditorContextMenu/index.tsx

 import FlowContextMenu from './FlowContextMenu';
-import MindContextMenu from './MindContextMenu';
 import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
 
 export { FlowContextMenu, MindContextMenu, KoniContextMenu };

EditorFlow/src/components/EditorDetailPanel/DetailForm.tsx

-import React, { Fragment } from 'react';
 import { Card, Form, Input, Select } from 'antd';
-import { withPropsAPI } from 'gg-editor';
+import React, { Fragment } from 'react';
+
 import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 const { Item } = Form;
 const { Option } = Select;
@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> {
   };
 
   renderEdgeShapeSelect = () => (
-      <Select onChange={this.handleSubmit}>
-        <Option value="flow-smooth">Smooth</Option>
-        <Option value="flow-polyline">Polyline</Option>
-        <Option value="flow-polyline-round">Polyline Round</Option>
-      </Select>
-    );
+    <Select onChange={this.handleSubmit}>
+      <Option value="flow-smooth">Smooth</Option>
+      <Option value="flow-polyline">Polyline</Option>
+      <Option value="flow-polyline-round">Polyline Round</Option>
+    </Select>
+  );
 
   renderNodeDetail = () => {
     const { form } = this.props;

EditorFlow/src/components/EditorDetailPanel/FlowDetailPanel.tsx

-import React from 'react';
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
 const FlowDetailPanel = () => (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <EdgePanel>
-        <DetailForm type="edge" />
-      </EdgePanel>
-      <GroupPanel>
-        <DetailForm type="group" />
-      </GroupPanel>
-      <MultiPanel>
-        <Card type="inner" size="small" title="Multi Select" bordered={false} />
-      </MultiPanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <EdgePanel>
+      <DetailForm type="edge" />
+    </EdgePanel>
+    <GroupPanel>
+      <DetailForm type="group" />
+    </GroupPanel>
+    <MultiPanel>
+      <Card type="inner" size="small" title="Multi Select" bordered={false} />
+    </MultiPanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default FlowDetailPanel;

EditorFlow/src/components/EditorDetailPanel/MindDetailPanel.tsx

-import React from 'react';
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
 const MindDetailPanel = () => (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default MindDetailPanel;

EditorFlow/src/components/EditorDetailPanel/index.tsx

 import FlowDetailPanel from './FlowDetailPanel';
-import MindDetailPanel from './MindDetailPanel';
 import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
 
 export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };

EditorFlow/src/components/EditorItemPanel/FlowItemPanel.tsx

-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
 const FlowItemPanel = () => (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="72*72"
-          shape="flow-circle"
-          model={{
-            color: '#FA8C16',
-            label: 'Start',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-rect"
-          model={{
-            color: '#1890FF',
-            label: 'Normal',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*72"
-          shape="flow-rhombus"
-          model={{
-            color: '#13C2C2',
-            label: 'Decision',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-capsule"
-          model={{
-            color: '#722ED1',
-            label: 'Model',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-      </Card>
-    </ItemPanel>
-  );
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="72*72"
+        shape="flow-circle"
+        model={{
+          color: '#FA8C16',
+          label: 'Start',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-rect"
+        model={{
+          color: '#1890FF',
+          label: 'Normal',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*72"
+        shape="flow-rhombus"
+        model={{
+          color: '#13C2C2',
+          label: 'Decision',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-capsule"
+        model={{
+          color: '#722ED1',
+          label: 'Model',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default FlowItemPanel;

EditorFlow/src/components/EditorMinimap/index.tsx

-import React from 'react';
 import { Card } from 'antd';
 import { Minimap } from 'gg-editor';
+import React from 'react';
 
 const EditorMinimap = () => (
-    <Card type="inner" size="small" title="Minimap" bordered={false}>
-      <Minimap height={200} />
-    </Card>
-  );
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
 
 export default EditorMinimap;

EditorFlow/src/components/EditorToolbar/FlowToolbar.tsx

-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
 const FlowToolbar = () => (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="copy" />
-      <ToolbarButton command="paste" />
-      <ToolbarButton command="delete" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
-      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
-      <Divider type="vertical" />
-      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
-      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
-      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
-    </Toolbar>
-  );
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="copy" />
+    <ToolbarButton command="paste" />
+    <ToolbarButton command="delete" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="toBack" icon="to-back" text="To Back" />
+    <ToolbarButton command="toFront" icon="to-front" text="To Front" />
+    <Divider type="vertical" />
+    <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
+    <ToolbarButton command="addGroup" icon="group" text="Add Group" />
+    <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
+  </Toolbar>
+);
 
 export default FlowToolbar;

EditorFlow/src/components/EditorToolbar/MindToolbar.tsx

-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
 const FlowToolbar = () => (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="append" text="Topic" />
-      <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
-      <Divider type="vertical" />
-      <ToolbarButton command="collapse" text="Fold" />
-      <ToolbarButton command="expand" text="Unfold" />
-    </Toolbar>
-  );
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="append" text="Topic" />
+    <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
+    <Divider type="vertical" />
+    <ToolbarButton command="collapse" text="Fold" />
+    <ToolbarButton command="expand" text="Unfold" />
+  </Toolbar>
+);
 
 export default FlowToolbar;

EditorFlow/src/components/EditorToolbar/ToolbarButton.tsx

+import { Command } from 'gg-editor';
 import React from 'react';
 import { Tooltip } from 'antd';
-import { Command } from 'gg-editor';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface ToolbarButtonProps {
   command: string;

EditorFlow/src/components/EditorToolbar/index.tsx

 import FlowToolbar from './FlowToolbar';
-import MindToolbar from './MindToolbar';
 import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
 
 export { FlowToolbar, MindToolbar, KoniToolbar };

EditorFlow/src/index.tsx

-import React from 'react';
-import { Row, Col } from 'antd';
+import { Col, Row } from 'antd';
 import GGEditor, { Flow } from 'gg-editor';
+
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import React from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
 import EditorMinimap from './components/EditorMinimap';
 import { FlowContextMenu } from './components/EditorContextMenu';
-import { FlowToolbar } from './components/EditorToolbar';
-import { FlowItemPanel } from './components/EditorItemPanel';
 import { FlowDetailPanel } from './components/EditorDetailPanel';
+import { FlowItemPanel } from './components/EditorItemPanel';
+import { FlowToolbar } from './components/EditorToolbar';
 import styles from './index.less';
 
 GGEditor.setTrackable(false);

EditorKoni/src/components/EditorContextMenu/FlowContextMenu.tsx

+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
 const FlowContextMenu = () => (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <EdgeMenu>
-        <MenuItem command="delete" />
-      </EdgeMenu>
-      <GroupMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-        <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
-      </GroupMenu>
-      <MultiMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="paste" />
-        <MenuItem command="addGroup" icon="group" text="Add Group" />
-        <MenuItem command="delete" />
-      </MultiMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-        <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <EdgeMenu>
+      <MenuItem command="delete" />
+    </EdgeMenu>
+    <GroupMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+      <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
+    </GroupMenu>
+    <MultiMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="paste" />
+      <MenuItem command="addGroup" icon="group" text="Add Group" />
+      <MenuItem command="delete" />
+    </MultiMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+      <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default FlowContextMenu;

EditorKoni/src/components/EditorContextMenu/MenuItem.tsx

-import React from 'react';
 import { Command } from 'gg-editor';
+import React from 'react';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 

EditorKoni/src/components/EditorContextMenu/MindContextMenu.tsx

+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
 const MindContextMenu = () => (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="append" text="Topic" />
-        <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
-        <MenuItem command="collapse" text="Fold" />
-        <MenuItem command="expand" text="Unfold" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="append" text="Topic" />
+      <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
+      <MenuItem command="collapse" text="Fold" />
+      <MenuItem command="expand" text="Unfold" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default MindContextMenu;

EditorKoni/src/components/EditorContextMenu/index.tsx

 import FlowContextMenu from './FlowContextMenu';
-import MindContextMenu from './MindContextMenu';
 import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
 
 export { FlowContextMenu, MindContextMenu, KoniContextMenu };

EditorKoni/src/components/EditorDetailPanel/DetailForm.tsx

-import React, { Fragment } from 'react';
 import { Card, Form, Input, Select } from 'antd';
-import { withPropsAPI } from 'gg-editor';
+import React, { Fragment } from 'react';
+
 import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 const { Item } = Form;
 const { Option } = Select;
@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> {
   };
 
   renderEdgeShapeSelect = () => (
-      <Select onChange={this.handleSubmit}>
-        <Option value="flow-smooth">Smooth</Option>
-        <Option value="flow-polyline">Polyline</Option>
-        <Option value="flow-polyline-round">Polyline Round</Option>
-      </Select>
-    );
+    <Select onChange={this.handleSubmit}>
+      <Option value="flow-smooth">Smooth</Option>
+      <Option value="flow-polyline">Polyline</Option>
+      <Option value="flow-polyline-round">Polyline Round</Option>
+    </Select>
+  );
 
   renderNodeDetail = () => {
     const { form } = this.props;

EditorKoni/src/components/EditorDetailPanel/FlowDetailPanel.tsx

-import React from 'react';
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
 const FlowDetailPanel = () => (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <EdgePanel>
-        <DetailForm type="edge" />
-      </EdgePanel>
-      <GroupPanel>
-        <DetailForm type="group" />
-      </GroupPanel>
-      <MultiPanel>
-        <Card type="inner" size="small" title="Multi Select" bordered={false} />
-      </MultiPanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <EdgePanel>
+      <DetailForm type="edge" />
+    </EdgePanel>
+    <GroupPanel>
+      <DetailForm type="group" />
+    </GroupPanel>
+    <MultiPanel>
+      <Card type="inner" size="small" title="Multi Select" bordered={false} />
+    </MultiPanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default FlowDetailPanel;

EditorKoni/src/components/EditorDetailPanel/MindDetailPanel.tsx

-import React from 'react';
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
 const MindDetailPanel = () => (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default MindDetailPanel;

EditorKoni/src/components/EditorDetailPanel/index.tsx

 import FlowDetailPanel from './FlowDetailPanel';
-import MindDetailPanel from './MindDetailPanel';
 import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
 
 export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };

EditorKoni/src/components/EditorItemPanel/FlowItemPanel.tsx

-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
 const FlowItemPanel = () => (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="72*72"
-          shape="flow-circle"
-          model={{
-            color: '#FA8C16',
-            label: 'Start',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-rect"
-          model={{
-            color: '#1890FF',
-            label: 'Normal',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*72"
-          shape="flow-rhombus"
-          model={{
-            color: '#13C2C2',
-            label: 'Decision',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-capsule"
-          model={{
-            color: '#722ED1',
-            label: 'Model',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-      </Card>
-    </ItemPanel>
-  );
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="72*72"
+        shape="flow-circle"
+        model={{
+          color: '#FA8C16',
+          label: 'Start',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-rect"
+        model={{
+          color: '#1890FF',
+          label: 'Normal',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*72"
+        shape="flow-rhombus"
+        model={{
+          color: '#13C2C2',
+          label: 'Decision',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-capsule"
+        model={{
+          color: '#722ED1',
+          label: 'Model',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default FlowItemPanel;

EditorKoni/src/components/EditorMinimap/index.tsx

-import React from 'react';
 import { Card } from 'antd';
 import { Minimap } from 'gg-editor';
+import React from 'react';
 
 const EditorMinimap = () => (
-    <Card type="inner" size="small" title="Minimap" bordered={false}>
-      <Minimap height={200} />
-    </Card>
-  );
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
 
 export default EditorMinimap;

EditorKoni/src/components/EditorToolbar/FlowToolbar.tsx

-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
 const FlowToolbar = () => (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="copy" />
-      <ToolbarButton command="paste" />
-      <ToolbarButton command="delete" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
-      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
-      <Divider type="vertical" />
-      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
-      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
-      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
-    </Toolbar>
-  );
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="copy" />
+    <ToolbarButton command="paste" />
+    <ToolbarButton command="delete" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="toBack" icon="to-back" text="To Back" />
+    <ToolbarButton command="toFront" icon="to-front" text="To Front" />
+    <Divider type="vertical" />
+    <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
+    <ToolbarButton command="addGroup" icon="group" text="Add Group" />
+    <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
+  </Toolbar>
+);
 
 export default FlowToolbar;

EditorKoni/src/components/EditorToolbar/MindToolbar.tsx

-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
 const FlowToolbar = () => (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="append" text="Topic" />
-      <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
-      <Divider type="vertical" />
-      <ToolbarButton command="collapse" text="Fold" />
-      <ToolbarButton command="expand" text="Unfold" />
-    </Toolbar>
-  );
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="append" text="Topic" />
+    <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
+    <Divider type="vertical" />
+    <ToolbarButton command="collapse" text="Fold" />
+    <ToolbarButton command="expand" text="Unfold" />
+  </Toolbar>
+);
 
 export default FlowToolbar;

EditorKoni/src/components/EditorToolbar/ToolbarButton.tsx

+import { Command } from 'gg-editor';
 import React from 'react';
 import { Tooltip } from 'antd';
-import { Command } from 'gg-editor';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface ToolbarButtonProps {
   command: string;

EditorKoni/src/components/EditorToolbar/index.tsx

 import FlowToolbar from './FlowToolbar';
-import MindToolbar from './MindToolbar';
 import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
 
 export { FlowToolbar, MindToolbar, KoniToolbar };

EditorKoni/src/index.tsx

-import React from 'react';
-import { Row, Col } from 'antd';
+import { Col, Row } from 'antd';
 import GGEditor, { Koni } from 'gg-editor';
+
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import React from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
 import EditorMinimap from './components/EditorMinimap';
 import { KoniContextMenu } from './components/EditorContextMenu';
-import { KoniToolbar } from './components/EditorToolbar';
-import { KoniItemPanel } from './components/EditorItemPanel';
 import { KoniDetailPanel } from './components/EditorDetailPanel';
+import { KoniItemPanel } from './components/EditorItemPanel';
+import { KoniToolbar } from './components/EditorToolbar';
 import styles from './index.less';
 
 GGEditor.setTrackable(false);
 
 export default () => (
-    <PageHeaderWrapper
-      content={formatMessage({
-        id: 'BLOCK_NAME.description',
-        defaultMessage: 'description',
-      })}
-    >
-      <GGEditor className={styles.editor}>
-        <Row type="flex" className={styles.editorHd}>
-          <Col span={24}>
-            <KoniToolbar />
-          </Col>
-        </Row>
-        <Row type="flex" className={styles.editorBd}>
-          <Col span={2} className={styles.editorSidebar}>
-            <KoniItemPanel />
-          </Col>
-          <Col span={16} className={styles.editorContent}>
-            <Koni className={styles.koni} />
-          </Col>
-          <Col span={6} className={styles.editorSidebar}>
-            <KoniDetailPanel />
-            <EditorMinimap />
-          </Col>
-        </Row>
-        <KoniContextMenu />
-      </GGEditor>
-    </PageHeaderWrapper>
-  );
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'BLOCK_NAME.description',
+      defaultMessage: 'description',
+    })}
+  >
+    <GGEditor className={styles.editor}>
+      <Row type="flex" className={styles.editorHd}>
+        <Col span={24}>
+          <KoniToolbar />
+        </Col>
+      </Row>
+      <Row type="flex" className={styles.editorBd}>
+        <Col span={2} className={styles.editorSidebar}>
+          <KoniItemPanel />
+        </Col>
+        <Col span={16} className={styles.editorContent}>
+          <Koni className={styles.koni} />
+        </Col>
+        <Col span={6} className={styles.editorSidebar}>
+          <KoniDetailPanel />
+          <EditorMinimap />
+        </Col>
+      </Row>
+      <KoniContextMenu />
+    </GGEditor>
+  </PageHeaderWrapper>
+);

EditorMind/src/components/EditorContextMenu/FlowContextMenu.tsx

+import { CanvasMenu, ContextMenu, EdgeMenu, GroupMenu, MultiMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, EdgeMenu, GroupMenu, MultiMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
 const FlowContextMenu = () => (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <EdgeMenu>
-        <MenuItem command="delete" />
-      </EdgeMenu>
-      <GroupMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="delete" />
-        <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
-      </GroupMenu>
-      <MultiMenu>
-        <MenuItem command="copy" />
-        <MenuItem command="paste" />
-        <MenuItem command="addGroup" icon="group" text="Add Group" />
-        <MenuItem command="delete" />
-      </MultiMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-        <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <EdgeMenu>
+      <MenuItem command="delete" />
+    </EdgeMenu>
+    <GroupMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="delete" />
+      <MenuItem command="unGroup" icon="ungroup" text="Ungroup" />
+    </GroupMenu>
+    <MultiMenu>
+      <MenuItem command="copy" />
+      <MenuItem command="paste" />
+      <MenuItem command="addGroup" icon="group" text="Add Group" />
+      <MenuItem command="delete" />
+    </MultiMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+      <MenuItem command="pasteHere" icon="paste" text="Paste Here" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default FlowContextMenu;

EditorMind/src/components/EditorContextMenu/MenuItem.tsx

-import React from 'react';
 import { Command } from 'gg-editor';
+import React from 'react';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface MenuItemProps {
   command: string;

EditorMind/src/components/EditorContextMenu/MindContextMenu.tsx

+import { CanvasMenu, ContextMenu, NodeMenu } from 'gg-editor';
+
 import React from 'react';
-import { NodeMenu, CanvasMenu, ContextMenu } from 'gg-editor';
 import MenuItem from './MenuItem';
 import styles from './index.less';
 
 const MindContextMenu = () => (
-    <ContextMenu className={styles.contextMenu}>
-      <NodeMenu>
-        <MenuItem command="append" text="Topic" />
-        <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
-        <MenuItem command="collapse" text="Fold" />
-        <MenuItem command="expand" text="Unfold" />
-        <MenuItem command="delete" />
-      </NodeMenu>
-      <CanvasMenu>
-        <MenuItem command="undo" />
-        <MenuItem command="redo" />
-      </CanvasMenu>
-    </ContextMenu>
-  );
+  <ContextMenu className={styles.contextMenu}>
+    <NodeMenu>
+      <MenuItem command="append" text="Topic" />
+      <MenuItem command="appendChild" icon="append-child" text="Subtopic" />
+      <MenuItem command="collapse" text="Fold" />
+      <MenuItem command="expand" text="Unfold" />
+      <MenuItem command="delete" />
+    </NodeMenu>
+    <CanvasMenu>
+      <MenuItem command="undo" />
+      <MenuItem command="redo" />
+    </CanvasMenu>
+  </ContextMenu>
+);
 
 export default MindContextMenu;

EditorMind/src/components/EditorContextMenu/index.tsx

 import FlowContextMenu from './FlowContextMenu';
-import MindContextMenu from './MindContextMenu';
 import KoniContextMenu from './KoniContextMenu';
+import MindContextMenu from './MindContextMenu';
 
 export { FlowContextMenu, MindContextMenu, KoniContextMenu };

EditorMind/src/components/EditorDetailPanel/DetailForm.tsx

-import React, { Fragment } from 'react';
 import { Card, Form, Input, Select } from 'antd';
-import { withPropsAPI } from 'gg-editor';
+import React, { Fragment } from 'react';
+
 import { FormComponentProps } from 'antd/es/form';
+import { withPropsAPI } from 'gg-editor';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 const { Item } = Form;
 const { Option } = Select;
@@ -59,12 +61,12 @@ class DetailForm extends React.Component<DetailFormProps> {
   };
 
   renderEdgeShapeSelect = () => (
-      <Select onChange={this.handleSubmit}>
-        <Option value="flow-smooth">Smooth</Option>
-        <Option value="flow-polyline">Polyline</Option>
-        <Option value="flow-polyline-round">Polyline Round</Option>
-      </Select>
-    );
+    <Select onChange={this.handleSubmit}>
+      <Option value="flow-smooth">Smooth</Option>
+      <Option value="flow-polyline">Polyline</Option>
+      <Option value="flow-polyline-round">Polyline Round</Option>
+    </Select>
+  );
 
   renderNodeDetail = () => {
     const { form } = this.props;

EditorMind/src/components/EditorDetailPanel/FlowDetailPanel.tsx

-import React from 'react';
+import { CanvasPanel, DetailPanel, EdgePanel, GroupPanel, MultiPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, EdgePanel, GroupPanel, MultiPanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
 const FlowDetailPanel = () => (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <EdgePanel>
-        <DetailForm type="edge" />
-      </EdgePanel>
-      <GroupPanel>
-        <DetailForm type="group" />
-      </GroupPanel>
-      <MultiPanel>
-        <Card type="inner" size="small" title="Multi Select" bordered={false} />
-      </MultiPanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <EdgePanel>
+      <DetailForm type="edge" />
+    </EdgePanel>
+    <GroupPanel>
+      <DetailForm type="group" />
+    </GroupPanel>
+    <MultiPanel>
+      <Card type="inner" size="small" title="Multi Select" bordered={false} />
+    </MultiPanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default FlowDetailPanel;

EditorMind/src/components/EditorDetailPanel/MindDetailPanel.tsx

-import React from 'react';
+import { CanvasPanel, DetailPanel, NodePanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { NodePanel, CanvasPanel, DetailPanel } from 'gg-editor';
+import React from 'react';
 import DetailForm from './DetailForm';
 import styles from './index.less';
 
 const MindDetailPanel = () => (
-    <DetailPanel className={styles.detailPanel}>
-      <NodePanel>
-        <DetailForm type="node" />
-      </NodePanel>
-      <CanvasPanel>
-        <Card type="inner" size="small" title="Canvas" bordered={false} />
-      </CanvasPanel>
-    </DetailPanel>
-  );
+  <DetailPanel className={styles.detailPanel}>
+    <NodePanel>
+      <DetailForm type="node" />
+    </NodePanel>
+    <CanvasPanel>
+      <Card type="inner" size="small" title="Canvas" bordered={false} />
+    </CanvasPanel>
+  </DetailPanel>
+);
 
 export default MindDetailPanel;

EditorMind/src/components/EditorDetailPanel/index.tsx

 import FlowDetailPanel from './FlowDetailPanel';
-import MindDetailPanel from './MindDetailPanel';
 import KoniDetailPanel from './KoniDetailPanel';
+import MindDetailPanel from './MindDetailPanel';
 
 export { FlowDetailPanel, MindDetailPanel, KoniDetailPanel };

EditorMind/src/components/EditorItemPanel/FlowItemPanel.tsx

-import React from 'react';
+import { Item, ItemPanel } from 'gg-editor';
+
 import { Card } from 'antd';
-import { ItemPanel, Item } from 'gg-editor';
+import React from 'react';
 import styles from './index.less';
 
 const FlowItemPanel = () => (
-    <ItemPanel className={styles.itemPanel}>
-      <Card bordered={false}>
-        <Item
-          type="node"
-          size="72*72"
-          shape="flow-circle"
-          model={{
-            color: '#FA8C16',
-            label: 'Start',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-rect"
-          model={{
-            color: '#1890FF',
-            label: 'Normal',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*72"
-          shape="flow-rhombus"
-          model={{
-            color: '#13C2C2',
-            label: 'Decision',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-        <Item
-          type="node"
-          size="80*48"
-          shape="flow-capsule"
-          model={{
-            color: '#722ED1',
-            label: 'Model',
-          }}
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
-        />
-      </Card>
-    </ItemPanel>
-  );
+  <ItemPanel className={styles.itemPanel}>
+    <Card bordered={false}>
+      <Item
+        type="node"
+        size="72*72"
+        shape="flow-circle"
+        model={{
+          color: '#FA8C16',
+          label: 'Start',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxjaXJjbGUgaWQ9ImIiIGN4PSIzNiIgY3k9IjM2IiByPSIzNiIvPjxmaWx0ZXIgeD0iLTkuNyUiIHk9Ii02LjklIiB3aWR0aD0iMTE5LjQlIiBoZWlnaHQ9IjExOS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRkZGMkU4IiB4bGluazpocmVmPSIjYiIvPjxjaXJjbGUgc3Ryb2tlPSIjRkZDMDY5IiBjeD0iMzYiIGN5PSIzNiIgcj0iMzUuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyMyIgeT0iNDEiPlN0YXJ0PC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-rect"
+        model={{
+          color: '#1890FF',
+          label: 'Normal',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSI0Ii8+PGZpbHRlciB4PSItOC44JSIgeT0iLTEwLjQlIiB3aWR0aD0iMTE3LjUlIiBoZWlnaHQ9IjEyOS4yJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dCbHVyT3V0ZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0ib3V0IiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMDQgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDIpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGwtb3BhY2l0eT0iLjkyIiBmaWxsPSIjRTZGN0ZGIiB4bGluazpocmVmPSIjYiIvPjxyZWN0IHN0cm9rZT0iIzE4OTBGRiIgeD0iLjUiIHk9Ii41IiB3aWR0aD0iNzkiIGhlaWdodD0iNDciIHJ4PSI0Ii8+PC9nPjx0ZXh0IGZvbnQtZmFtaWx5PSJQaW5nRmFuZ1NDLVJlZ3VsYXIsIFBpbmdGYW5nIFNDIiBmb250LXNpemU9IjEyIiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii42NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHRzcGFuIHg9IjIxIiB5PSIyOSI+Tm9ybWFsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*72"
+        shape="flow-rhombus"
+        model={{
+          color: '#13C2C2',
+          label: 'Decision',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iNzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik00Mi42NyAxLjY3bDM0Ljk2NSAzMS4zNTJhNCA0IDAgMCAxIDAgNS45NTZMNDIuNjcgNzAuMzNhNCA0IDAgMCAxLTUuMzQgMEwyLjM2NSAzOC45NzhhNCA0IDAgMCAxIDAtNS45NTZMMzcuMzMgMS42N2E0IDQgMCAwIDEgNS4zNCAweiIgaWQ9ImIiLz48ZmlsdGVyIHg9Ii04LjglIiB5PSItNi45JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMTkuNCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAxKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0U2RkZGQiIgeGxpbms6aHJlZj0iI2IiLz48cGF0aCBzdHJva2U9IiM1Q0RCRDMiIGQ9Ik00Mi4zMzcgMi4wNDJhMy41IDMuNSAwIDAgMC00LjY3NCAwTDIuNjk4IDMzLjM5NGEzLjUgMy41IDAgMCAwIDAgNS4yMTJsMzQuOTY1IDMxLjM1MmEzLjUgMy41IDAgMCAwIDQuNjc0IDBsMzQuOTY1LTMxLjM1MmEzLjUgMy41IDAgMCAwIDAtNS4yMTJMNDIuMzM3IDIuMDQyeiIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMgMSkiPjx0c3BhbiB4PSIxOCIgeT0iNDIiPkRlY2lzaW9uPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+      <Item
+        type="node"
+        size="80*48"
+        shape="flow-capsule"
+        model={{
+          color: '#722ED1',
+          label: 'Model',
+        }}
+        src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iNTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxyZWN0IGlkPSJiIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAiIGhlaWdodD0iNDgiIHJ4PSIyNCIvPjxmaWx0ZXIgeD0iLTguOCUiIHk9Ii0xMC40JSIgd2lkdGg9IjExNy41JSIgaGVpZ2h0PSIxMjkuMiUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImEiPjxmZU9mZnNldCBkeT0iMiIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjA0IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsLW9wYWNpdHk9Ii45MiIgZmlsbD0iI0Y5RjBGRiIgeGxpbms6aHJlZj0iI2IiLz48cmVjdCBzdHJva2U9IiNCMzdGRUIiIHg9Ii41IiB5PSIuNSIgd2lkdGg9Ijc5IiBoZWlnaHQ9IjQ3IiByeD0iMjMuNSIvPjwvZz48dGV4dCBmb250LWZhbWlseT0iUGluZ0ZhbmdTQy1SZWd1bGFyLCBQaW5nRmFuZyBTQyIgZm9udC1zaXplPSIxMiIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuNjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjx0c3BhbiB4PSIyNCIgeT0iMjkiPk1vZGVsPC90c3Bhbj48L3RleHQ+PC9nPjwvc3ZnPg=="
+      />
+    </Card>
+  </ItemPanel>
+);
 
 export default FlowItemPanel;

EditorMind/src/components/EditorMinimap/index.tsx

-import React from 'react';
 import { Card } from 'antd';
 import { Minimap } from 'gg-editor';
+import React from 'react';
 
 const EditorMinimap = () => (
-    <Card type="inner" size="small" title="Minimap" bordered={false}>
-      <Minimap height={200} />
-    </Card>
-  );
+  <Card type="inner" size="small" title="Minimap" bordered={false}>
+    <Minimap height={200} />
+  </Card>
+);
 
 export default EditorMinimap;

EditorMind/src/components/EditorToolbar/FlowToolbar.tsx

-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
 const FlowToolbar = () => (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="copy" />
-      <ToolbarButton command="paste" />
-      <ToolbarButton command="delete" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="toBack" icon="to-back" text="To Back" />
-      <ToolbarButton command="toFront" icon="to-front" text="To Front" />
-      <Divider type="vertical" />
-      <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
-      <ToolbarButton command="addGroup" icon="group" text="Add Group" />
-      <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
-    </Toolbar>
-  );
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="copy" />
+    <ToolbarButton command="paste" />
+    <ToolbarButton command="delete" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="toBack" icon="to-back" text="To Back" />
+    <ToolbarButton command="toFront" icon="to-front" text="To Front" />
+    <Divider type="vertical" />
+    <ToolbarButton command="multiSelect" icon="multi-select" text="Multi Select" />
+    <ToolbarButton command="addGroup" icon="group" text="Add Group" />
+    <ToolbarButton command="unGroup" icon="ungroup" text="Ungroup" />
+  </Toolbar>
+);
 
 export default FlowToolbar;

EditorMind/src/components/EditorToolbar/MindToolbar.tsx

-import React from 'react';
 import { Divider } from 'antd';
+import React from 'react';
 import { Toolbar } from 'gg-editor';
 import ToolbarButton from './ToolbarButton';
 import styles from './index.less';
 
 const FlowToolbar = () => (
-    <Toolbar className={styles.toolbar}>
-      <ToolbarButton command="undo" />
-      <ToolbarButton command="redo" />
-      <Divider type="vertical" />
-      <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
-      <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
-      <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
-      <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
-      <Divider type="vertical" />
-      <ToolbarButton command="append" text="Topic" />
-      <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
-      <Divider type="vertical" />
-      <ToolbarButton command="collapse" text="Fold" />
-      <ToolbarButton command="expand" text="Unfold" />
-    </Toolbar>
-  );
+  <Toolbar className={styles.toolbar}>
+    <ToolbarButton command="undo" />
+    <ToolbarButton command="redo" />
+    <Divider type="vertical" />
+    <ToolbarButton command="zoomIn" icon="zoom-in" text="Zoom In" />
+    <ToolbarButton command="zoomOut" icon="zoom-out" text="Zoom Out" />
+    <ToolbarButton command="autoZoom" icon="fit-map" text="Fit Map" />
+    <ToolbarButton command="resetZoom" icon="actual-size" text="Actual Size" />
+    <Divider type="vertical" />
+    <ToolbarButton command="append" text="Topic" />
+    <ToolbarButton command="appendChild" icon="append-child" text="Subtopic" />
+    <Divider type="vertical" />
+    <ToolbarButton command="collapse" text="Fold" />
+    <ToolbarButton command="expand" text="Unfold" />
+  </Toolbar>
+);
 
 export default FlowToolbar;

EditorMind/src/components/EditorToolbar/ToolbarButton.tsx

+import { Command } from 'gg-editor';
 import React from 'react';
 import { Tooltip } from 'antd';
-import { Command } from 'gg-editor';
 import IconFont from '../../common/IconFont';
 import styles from './index.less';
 
-const upperFirst = (str: string) => str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
+const upperFirst = (str: string) =>
+  str.toLowerCase().replace(/( |^)[a-z]/g, (l: string) => l.toUpperCase());
 
 interface ToolbarButtonProps {
   command: string;

EditorMind/src/components/EditorToolbar/index.tsx

 import FlowToolbar from './FlowToolbar';
-import MindToolbar from './MindToolbar';
 import KoniToolbar from './KoniToolbar';
+import MindToolbar from './MindToolbar';
 
 export { FlowToolbar, MindToolbar, KoniToolbar };

EditorMind/src/index.tsx

-import React from 'react';
-import { Row, Col } from 'antd';
+import { Col, Row } from 'antd';
 import GGEditor, { Mind } from 'gg-editor';
+
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import React from 'react';
 import { formatMessage } from 'umi-plugin-react/locale';
 import EditorMinimap from './components/EditorMinimap';
 import { MindContextMenu } from './components/EditorContextMenu';
-import { MindToolbar } from './components/EditorToolbar';
 import { MindDetailPanel } from './components/EditorDetailPanel';
+import { MindToolbar } from './components/EditorToolbar';
 import data from './worldCup2018.json';
 import styles from './index.less';
 
 GGEditor.setTrackable(false);
 
 export default () => (
-    <PageHeaderWrapper
-      content={formatMessage({
-        id: 'BLOCK_NAME.description',
-        defaultMessage: 'description',
-      })}
-    >
-      <GGEditor className={styles.editor}>
-        <Row type="flex" className={styles.editorHd}>
-          <Col span={24}>
-            <MindToolbar />
-          </Col>
-        </Row>
-        <Row type="flex" className={styles.editorBd}>
-          <Col span={20} className={styles.editorContent}>
-            <Mind data={data} className={styles.mind} />
-          </Col>
-          <Col span={4} className={styles.editorSidebar}>
-            <MindDetailPanel />
-            <EditorMinimap />
-          </Col>
-        </Row>
-        <MindContextMenu />
-      </GGEditor>
-    </PageHeaderWrapper>
-  );
+  <PageHeaderWrapper
+    content={formatMessage({
+      id: 'BLOCK_NAME.description',
+      defaultMessage: 'description',
+    })}
+  >
+    <GGEditor className={styles.editor}>
+      <Row type="flex" className={styles.editorHd}>
+        <Col span={24}>
+          <MindToolbar />
+        </Col>
+      </Row>
+      <Row type="flex" className={styles.editorBd}>
+        <Col span={20} className={styles.editorContent}>
+          <Mind data={data} className={styles.mind} />
+        </Col>
+        <Col span={4} className={styles.editorSidebar}>
+          <MindDetailPanel />
+          <EditorMinimap />
+        </Col>
+      </Row>
+      <MindContextMenu />
+    </GGEditor>
+  </PageHeaderWrapper>
+);

Exception403/src/components/Exception/index.tsx

-import { Button } from 'antd';
-import classNames from 'classnames';
 import * as H from 'history';
+
 import React, { createElement } from 'react';
+
+import { Button } from 'antd';
 import Link from 'umi/link';
-import styles from './index.less';
+import classNames from 'classnames';
 import config from './typeConfig';
+import styles from './index.less';
 
 export interface ExceptionProps<
   L = {