App mgmt pages

config/i18n.config.js

@@ -3,7 +3,11 @@ const translations = {
     translation: require('../src/locales/en/translation.json')
   },
   zh: {
-    translation: require('../src/locales/zh/translation.json')
+    translation: Object.assign(
+      {},
+      require('../src/locales/zh/apps.json'),
+      require('../src/locales/zh/translation.json')
+    )
   }
 };
 

src/components/Base/Input/input.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 import Icon from '../Icon';
 
@@ -12,31 +13,55 @@ export default class Input extends React.Component {
     disabled: PropTypes.bool,
     icon: PropTypes.string,
     iconSize: PropTypes.number,
-    iconType: PropTypes.string
+    iconType: PropTypes.string,
+    valueChange: PropTypes.func
   };
 
   static defaultProps = {
     className: '',
     icon: '',
     iconType: 'light',
     iconSize: 16,
+    valueChange: _.noop,
+    onChange: _.noop,
     disabled: false
   };
 
+  onChange = event => {
+    const { target } = event;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.props.valueChange(name, value);
+    this.props.onChange(event);
+  };
+
   render() {
     const {
-      className, icon, iconType, iconSize, ...rest
+      className,
+      icon,
+      iconType,
+      iconSize,
+      onChange,
+      valueChange,
+      ...rest
     } = this.props;
 
     if (icon) {
       return (
         <div className={classnames(styles.inputGroup, className)}>
           <Icon name={icon} type={iconType} size={iconSize} />
-          <input className={styles.input} {...rest} />
+          <input className={styles.input} onChange={this.onChange} {...rest} />
         </div>
       );
     }
 
-    return <input className={classnames(styles.input, className)} {...rest} />;
+    return (
+      <input
+        className={classnames(styles.input, className)}
+        onChange={this.onChange}
+        {...rest}
+      />
+    );
   }
 }

src/components/Base/Link/index.jsx

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { translate } from 'react-i18next';
+
+import links from 'config/doc-link';
+
+@translate()
+export default class BaseLink extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    isExternal: PropTypes.bool,
+    to: PropTypes.string,
+    type: PropTypes.string
+  };
+
+  static defaultProps = {
+    children: null,
+    className: '',
+    isExternal: false,
+    type: ''
+  };
+
+  render() {
+    const {
+      t, to, type, children, className, isExternal
+    } = this.props;
+    let text = t(`LINK_${type}`);
+    const linkTo = to || links[type];
+    if (text === `LINK_${type}`) {
+      text = linkTo;
+    }
+    if (children) {
+      text = children;
+    }
+    if (!text) {
+      return null;
+    }
+    if (!linkTo) {
+      console.error(
+        "You should edit a link url in the file of 'config/doc-links'"
+      );
+    }
+
+    if (isExternal) {
+      return (
+        <a target="blank" className={className} href={linkTo}>
+          {text}
+        </a>
+      );
+    }
+
+    return (
+      <Link className={className} to={linkTo}>
+        {text}
+      </Link>
+    );
+  }
+}

src/components/Base/Upload/index.jsx

@@ -40,7 +40,7 @@ export default class Upload extends Component {
 
   state = {
     uid: getUid(),
-    isDraging: true
+    isDraging: false
   };
 
   componentDidMount() {
@@ -170,10 +170,9 @@ export default class Upload extends Component {
     return (
       <span
         {...events}
-        className={classNames('upload', {
+        className={classNames(className, 'upload', {
           'upload-dragover': this.state.isDraging,
-          'upload-disabled': disabled,
-          className
+          'upload-disabled': disabled
         })}
         role="button"
         style={style}

src/components/Base/Upload/index.scss

@@ -8,5 +8,9 @@
       cursor: not-allowed;
       pointer-events: none;
     }
+    &.upload-dragover {
+      opacity: 0.3;
+      box-shadow: 0 1px 4px 0 rgba(73, 33, 173, 0.06), 0 4px 8px 0 rgba(35, 35, 36, 0.04);
+    }
   }
 }

src/components/Base/index.js

@@ -16,3 +16,4 @@ export Timeline from './Timeline';
 export Tooltip from './Tooltip';
 export Image from './Image';
 export Upload from './Upload';
+export Link from './Link';