feats

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

@@ -1,6 +1,8 @@
 import React, { useState, forwardRef, useRef, useImperativeHandle } from 'react';
-import { Avatar, Button, Dropdown, Menu, Form, Input, Modal } from 'antd';
+import { Avatar, Dropdown } from 'antd';
+import { ModalForm, ProFormText, ProFormDependency } from '@ant-design/pro-components';
 import md5 from 'md5';
+import { changePassword } from '@/service/login';
 
 const DefaultAvatar = ({ color = '#1296db' }) => (
   <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
@@ -14,8 +16,15 @@ const DefaultAvatar = ({ color = '#1296db' }) => (
 const ChangePassword = forwardRef((props, ref) => {
   const [visible, setVisible] = useState(false);
 
-  const onFinish = (values) => {
-    console.log('Success:', values);
+  const onFinish = async (values) => {
+    const data = {
+      originPassword: md5(values.password),
+      newPassword: md5(values.newPassword),
+    }
+
+    await changePassword(data);
+
+    return true;
   };
 
   useImperativeHandle(ref, () => {
@@ -25,44 +34,41 @@ const ChangePassword = forwardRef((props, ref) => {
   });
 
   return (
-    <Modal title="修改密码" open={visible} onCancel={() => setVisible(false)}>
-      <Form
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 16 }}
-        onFinish={onFinish}
-        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>
+    <ModalForm title="修改密码" width="480px" open={visible} onOpenChange={setVisible} onFinish={onFinish}>
+      <ProFormText.Password
+        label="原始密码"
+        name="password"
+        rules={[{ required: true, message: '请输入原始密码!' }]}
+      />
+      <ProFormText.Password
+        label="新密码"
+        name="newPassword"
+        rules={[{ required: true, message: '请输入新密码!' }]}
+      />
 
-        <Form.Item
-          label="确认新密码"
-          name="newPassword2"
-          rules={[{ required: true, message: '请输入新密码!' }]}
-        >
-          <Input.Password />
-        </Form.Item>
+      <ProFormDependency name={['newPassword']}>
+      {
+        ({newPassword}) => (
+          <ProFormText.Password
+            label="确认新密码"
+            name="newPassword2"
+            rules={[
+              { required: true, message: '请输入新密码!' },
+              () => ({
+                validator(_, value) {
+                  if (!value || value == newPassword) {
+                    return Promise.resolve();
+                  }
 
-        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-          <Button type="primary" htmlType="submit">
-            提交
-          </Button>
-        </Form.Item>
-      </Form>
-    </Modal>
+                  return Promise.reject('两次输入密码不一致');
+                }
+              })
+            ]}
+          />
+        )
+      }
+      </ProFormDependency>
+    </ModalForm>
   )
 });
 

vite.config.js

@@ -6,9 +6,11 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   server: {
     port: 3001,
+    host: '0.0.0.0',
     proxy: {
       '/api': {
-        target: 'http://t.njyz.tech',
+        target: 'http://127.0.0.1:9087',
+        // target: 'http://t.njyz.tech',
         changeOrigin: true,
       },
     }