初始化 antd-pro

admin-web/src/components/EditableItem/index.js

@@ -0,0 +1,50 @@
+import React, { PureComponent } from 'react';
+import { Input, Icon } from 'antd';
+import styles from './index.less';
+
+export default class EditableItem extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value,
+      editable: false,
+    };
+  }
+
+  handleChange = e => {
+    const { value } = e.target;
+    this.setState({ value });
+  };
+
+  check = () => {
+    this.setState({ editable: false });
+    const { value } = this.state;
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  edit = () => {
+    this.setState({ editable: true });
+  };
+
+  render() {
+    const { value, editable } = this.state;
+    return (
+      <div className={styles.editableItem}>
+        {editable ? (
+          <div className={styles.wrapper}>
+            <Input value={value} onChange={this.handleChange} onPressEnter={this.check} />
+            <Icon type="check" className={styles.icon} onClick={this.check} />
+          </div>
+        ) : (
+          <div className={styles.wrapper}>
+            <span>{value || ' '}</span>
+            <Icon type="edit" className={styles.icon} onClick={this.edit} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}

admin-web/src/components/EditableItem/index.less

@@ -0,0 +1,25 @@
+@import '~antd/lib/style/themes/default.less';
+
+.editableItem {
+  display: table;
+  width: 100%;
+  margin-top: (@font-size-base * @line-height-base - @input-height-base) / 2;
+  line-height: @input-height-base;
+
+  .wrapper {
+    display: table-row;
+
+    & > * {
+      display: table-cell;
+    }
+
+    & > *:first-child {
+      width: 85%;
+    }
+
+    .icon {
+      text-align: right;
+      cursor: pointer;
+    }
+  }
+}