feat: App mgmt for isv and admin

src/components/AppStatistics/index.jsx

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { translate } from 'react-i18next';
+
+import { Icon } from 'components/Base';
+import { Card } from 'components/Layout';
+
+import styles from './index.scss';
+
+const stars = [1, 2, 3, 4, 5];
+
+@translate()
+export default class AppStatistics extends Component {
+  static propTypes = {
+    appTotal: PropTypes.number,
+    className: PropTypes.string,
+    isAppDetail: PropTypes.bool,
+    monthDepoly: PropTypes.number,
+    starTotal: PropTypes.number,
+    totalDepoly: PropTypes.number,
+    versionTotal: PropTypes.number
+  };
+
+  static defaultProps = {
+    isAppDetail: true,
+    appTotal: 0,
+    versionTotal: 0,
+    monthDepoly: 0,
+    totalDepoly: 0,
+    starTotal: 5
+  };
+
+  render() {
+    const {
+      className,
+      isAppDetail,
+      appTotal,
+      versionTotal,
+      monthDepoly,
+      totalDepoly,
+      starTotal,
+      t
+    } = this.props;
+
+    return (
+      <Card className={classnames(styles.appStatistics, className)}>
+        <dl>
+          <dt>{t(isAppDetail ? '线上版本' : '已上架应用')}</dt>
+          <dd>{isAppDetail ? versionTotal : appTotal}</dd>
+        </dl>
+        <dl>
+          <dt>{t('本月部署次数')}</dt>
+          <dd>{monthDepoly}</dd>
+        </dl>
+        <dl>
+          <dt>{t('总部署次数')}</dt>
+          <dd>{totalDepoly}</dd>
+        </dl>
+        <dl>
+          <dt>{t('综合评价')}</dt>
+          <dd>
+            {starTotal}
+            <label>
+              {stars.map(star => (
+                <Icon
+                  key={star}
+                  name="star"
+                  size={16}
+                  type="dark"
+                  className={classnames({
+                    [styles.yellow]: starTotal >= star
+                  })}
+                />
+              ))}
+            </label>
+          </dd>
+        </dl>
+      </Card>
+    );
+  }
+}

src/components/AppStatistics/index.scss

@@ -0,0 +1,27 @@
+@import '~scss/vars';
+
+.appStatistics {
+  padding: 32px 0  32px 50px;
+  height: 104px;
+
+  dl {
+    float: left;
+    display: inline-block;
+    width: 25%;
+
+    dt {
+      @include note-font($line-height: 12px);
+      margin-bottom: 12px;
+    }
+
+    dd {
+      line-height: 16px;
+      font-size: 18px;
+    }
+
+    .yellow svg {
+      --primary-color: #{$Y75};
+      --secondary-color: #{$Y75};
+    }
+  }
+}

src/components/Base/Image/index.jsx

@@ -33,6 +33,10 @@ export default class Image extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps.src !== this.props.src) {
+      this.setState({ failed: false });
+    }
+
     return (
       nextProps.src !== this.props.src
       || Boolean(nextState.failed)

src/components/Base/Table/index.scss

@@ -171,6 +171,8 @@
       transition: all $transition-speed;
       word-wrap: break-word;
       word-break: break-all;
+      font-size: 12px;
+
       a {
         color: $N500;
       }

src/components/TitleSearch/index.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import { noop } from 'lodash';
+
+import { Input } from 'components/Base';
+
+import styles from './index.scss';
+
+@translate()
+export default class AppStatistics extends Component {
+  static propTypes = {
+    onClear: PropTypes.func,
+    onSearch: PropTypes.func,
+    placeholder: PropTypes.string,
+    searchWord: PropTypes.string,
+    title: PropTypes.string
+  };
+
+  static defaultProps = {
+    title: '',
+    searchWord: '',
+    onSearch: noop,
+    onClear: noop,
+    placeholder: ''
+  };
+
+  render() {
+    const {
+      onSearch, onClear, searchWord, placeholder, title
+    } = this.props;
+
+    return (
+      <div className={styles.titleSearch}>
+        {title}
+        <Input.Search
+          className={styles.search}
+          placeholder={placeholder}
+          value={searchWord}
+          onSearch={onSearch}
+          onClear={onClear}
+        />
+      </div>
+    );
+  }
+}

src/components/TitleSearch/index.scss

@@ -0,0 +1,29 @@
+@import '~scss/vars';
+
+.titleSearch {
+  @include title-font($font-size: 16px);
+  margin: 18px 0;
+
+  .search {
+    float: right;
+    line-height: 32px;
+    font-size: 12px;
+
+    input {
+      background-color: $background-color;
+      border-color: $background-color;
+
+      &:hover {
+        border-color: $N10;
+      }
+
+      &:focus {
+        border-color: $P75;
+      }
+    }
+
+    svg {
+      float: right;
+    }
+  }
+}