feats\

src/layouts/AuthLayout/components/Header/User.jsx

@@ -1,5 +1,61 @@
-import React, { useMemo } from 'react';
-import { Avatar, Dropdown, Menu, Space } from 'antd';
+import React, { useState, forwardRef, useRef } from 'react';
+import { Avatar, Dropdown, Menu, Form, Input, Modal } from 'antd';
+
+const ChangePassword = forwardRef((props, ref) => {
+  const [visible, setVisible] = useState(false);
+
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
+
+  useImperativeHandle(ref, () => {
+    return {
+      show: () => setVisible(true),
+    }
+  });
+
+  return (
+    <Modal title="修改密码" visible={visible}>
+      <Form
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 16 }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="原始密码"
+          name="password"
+          rules={[{ required: true, message: '请输入原始密码!' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          label="新密码"
+          name="newPassword"
+          rules={[{ required: true, message: '请输入新密码!' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item
+          label="确认新密码"
+          name="newPassword2"
+          rules={[{ required: true, message: '请输入新密码!' }]}
+        >
+          <Input.Password />
+        </Form.Item>
+
+        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+          <Button type="primary" htmlType="submit">
+            提交
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+});
 
 export default (props) => {
   const menuItems = [
@@ -9,7 +65,15 @@ export default (props) => {
     }
   ];
 
-  const menu = <Menu items={menuItems} />;
+  const passRef = useRef();
+
+  const onClick = ({ key }) => {
+    if (key === 'changePassword') {
+      passRef.current.show();
+    }
+  };
+
+  const menu = <Menu items={menuItems} onClick={onClick} />;
 
   return (
     <Dropdown overlay={menu}>
@@ -17,6 +81,7 @@ export default (props) => {
         <Avatar src="https://joeschmoe.io/api/v1/random" />
         <span className='font'>张延森</span>
       </div>
+      <ChangePassword ref={passRef} />
     </Dropdown>
   )
 }