矿场列表

src/pages/account/index.tsx

@@ -6,16 +6,20 @@
 import React from 'react';
 import { connect, DispatchProp } from 'dva';
 import { formatMessage } from 'umi-plugin-locale';
-import { Button, Modal } from 'antd';
+import { Button, Modal, Input } from 'antd';
 import Header from '@/components/Header';
 import AccountItem from '@/components/AccountItem';
 import { UserModelState } from '@/models/user';
 
 import styles from './style.less';
+import { AccountModelState } from './model';
 
-const AccountPage: React.FC<DispatchProp & UserModelState> = ({
+const AccountPage: React.FC<DispatchProp & UserModelState & AccountModelState> = ({
   dispatch,
   user,
+  nameEditable,
+  nameInput,
+  nameSubmitting,
 }) => {
 
   const onLogout = () => {
@@ -28,6 +32,25 @@ const AccountPage: React.FC<DispatchProp & UserModelState> = ({
     });
   };
 
+  const editNameModal = (
+    <Modal
+      title={formatMessage({ id: 'common.modify' })}
+      visible={nameEditable}
+      onCancel={() => dispatch({ type: 'account/onUpdateState', nameEditable: false })}
+      onOk={() => dispatch({ type: 'account/changeName' })}
+      okText={formatMessage({ id: 'common.ok' })}
+      cancelText={formatMessage({ id: 'common.cancel' })}
+      confirmLoading={nameSubmitting}
+    >
+      <Input
+        size="large"
+        placeholder={formatMessage({ id: 'account.nickname' })}
+        value={nameInput}
+        onChange={e => dispatch({ type: 'account/onUpdateState', nameInput: e.target.value })}
+      />
+    </Modal>
+  );
+
   return (
     <div className={styles.container}>
       <Header
@@ -40,6 +63,7 @@ const AccountPage: React.FC<DispatchProp & UserModelState> = ({
           title="account.nickname"
           message={user.nickname}
           showGo={false}
+          onClick={() => dispatch({ type: 'account/onUpdateState', nameEditable: true })}
         />
         <AccountItem
           className="group"
@@ -71,10 +95,11 @@ const AccountPage: React.FC<DispatchProp & UserModelState> = ({
           {formatMessage({ id: 'account.logout' })}
         </Button>
       </div>}
+      {editNameModal}
     </div>
   );
 };
 
 export default connect(
-  ({ user }: any) => ({ ...user }),
+  ({ user, account }: any) => ({ ...user, ...account }),
 )(AccountPage);