增加用户中心、用户注册登录

2025-12-26 15:12:49 +08:00
parent 1eb1dafe1e
commit 07e011febd
43 changed files with 2006 additions and 611 deletions
--- a/src/pages/user/login/index.tsx
+++ b/src/pages/user/login/index.tsx
@@ -1,5 +1,4 @@
 import { Footer } from '@/components';
-import { login } from '@/services/ant-design-pro/api';
 import { getFakeCaptcha } from '@/services/ant-design-pro/login';
 import {
  AlipayCircleOutlined,
@@ -15,12 +14,14 @@ import {
  ProFormCheckbox,
  ProFormText,
 } from '@ant-design/pro-components';
-import { FormattedMessage, Helmet, SelectLang, useIntl, useModel } from '@umijs/max';
+import { FormattedMessage, Helmet, SelectLang, useIntl, useModel, history, useRequest } from '@umijs/max';
 import { Alert, message, Tabs } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { useState } from 'react';
 import { flushSync } from 'react-dom';
 import Settings from '../../../../config/defaultSettings';
+import { loginUser } from '@/services/user/api';
+import { CommonResponse } from '@/types/common';

 const useStyles = createStyles(({ token }) => {
  return {
@@ -51,8 +52,7 @@ const useStyles = createStyles(({ token }) => {
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
-      backgroundImage:
-        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
+      backgroundImage: "url('@~/assets/timeline_login.png')",
      backgroundSize: '100% 100%',
    },
  };
@@ -102,44 +102,37 @@ const Login: React.FC = () => {
  const { styles } = useStyles();
  const intl = useIntl();

-  const fetchUserInfo = async () => {
-    const userInfo = await initialState?.fetchUserInfo?.();
-    if (userInfo) {
-      flushSync(() => {
-        setInitialState((s) => ({
-          ...s,
-          currentUser: userInfo,
-        }));
-      });
-    }
-  };
+  // 使用元组参数签名以匹配 useRequest 重载，避免被分页重载推断
+  const { loading: submitting, run: login } = useRequest<CommonResponse<UserLoginResult>, [UserLoginParams]>(
+    (params: UserLoginParams): Promise<CommonResponse<UserLoginResult>> => loginUser(params),
+    {
+      manual: true,
+      formatResult: (res) => res,
+      onSuccess: async (response: CommonResponse<UserLoginResult>, params: [UserLoginParams]) => {
+        console.log('登录成功 - response:', response, 'params:', params);
+        const [loginParams] = params;
+        const logStatus = { type: loginParams.loginType };
+        if (response.code === 200) {
+          const defaultLoginSuccessMessage = intl.formatMessage({
+            id: 'pages.login.success',
+            defaultMessage: '登录成功！',
+          });
+          message.success(defaultLoginSuccessMessage);
+          // await fetchUserInfo();
+          localStorage.setItem('timeline_user', JSON.stringify(response.data))
+          const urlParams = new URL(window.location.href).searchParams;
+          window.location.href = urlParams.get('redirect') || '/';
+          return;
+        }
+        console.log(response.message);
+        // 如果失败去设置用户错误信息
+        setUserLoginState(response.message as any);
+      }
+    },
+  );

  const handleSubmit = async (values: API.LoginParams) => {
-    try {
-      // 登录
-      const msg = await login({ ...values, type });
-      if (msg.status === 'ok') {
-        const defaultLoginSuccessMessage = intl.formatMessage({
-          id: 'pages.login.success',
-          defaultMessage: '登录成功！',
-        });
-        message.success(defaultLoginSuccessMessage);
-        await fetchUserInfo();
-        const urlParams = new URL(window.location.href).searchParams;
-        window.location.href = urlParams.get('redirect') || '/';
-        return;
-      }
-      console.log(msg);
-      // 如果失败去设置用户错误信息
-      setUserLoginState(msg);
-    } catch (error) {
-      const defaultLoginFailureMessage = intl.formatMessage({
-        id: 'pages.login.failure',
-        defaultMessage: '登录失败，请重试！',
-      });
-      console.log(error);
-      message.error(defaultLoginFailureMessage);
-    }
+    await login(values as UserLoginParams);
  };
  const { status, type: loginType } = userLoginState;

@@ -167,24 +160,25 @@ const Login: React.FC = () => {
            maxWidth: '75vw',
          }}
          logo={<img alt="logo" src="/logo.svg" />}
-          title="Ant Design"
+          title="Timeline"
          subTitle={intl.formatMessage({ id: 'pages.layouts.userLayout.title' })}
          initialValues={{
            autoLogin: true,
          }}
-          actions={[
+          loading={submitting}
+          /*actions={[
            <FormattedMessage
              key="loginWith"
              id="pages.login.loginWith"
              defaultMessage="其他登录方式"
            />,
            <ActionIcons key="icons" />,
-          ]}
-          onFinish={async (values) => {
-            await handleSubmit(values as API.LoginParams);
-          }}
+          ]}*/
+            onFinish={async (values) => {
+              await login({ ...values, loginType: type } as UserLoginParams);
+            }}
        >
-          <Tabs
+          {/*<Tabs
            activeKey={type}
            onChange={setType}
            centered
@@ -204,7 +198,7 @@ const Login: React.FC = () => {
                }),
              },
            ]}
-          />
+          />*/}

          {status === 'error' && loginType === 'account' && (
            <LoginMessage
@@ -224,7 +218,6 @@ const Login: React.FC = () => {
                }}
                placeholder={intl.formatMessage({
                  id: 'pages.login.username.placeholder',
-                  defaultMessage: '用户名: admin or user',
                })}
                rules={[
                  {
@@ -246,7 +239,6 @@ const Login: React.FC = () => {
                }}
                placeholder={intl.formatMessage({
                  id: 'pages.login.password.placeholder',
-                  defaultMessage: '密码: ant.design',
                })}
                rules={[
                  {
@@ -348,18 +340,20 @@ const Login: React.FC = () => {
          <div
            style={{
              marginBottom: 24,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
            }}
          >
            <ProFormCheckbox noStyle name="autoLogin">
              <FormattedMessage id="pages.login.rememberMe" defaultMessage="自动登录" />
            </ProFormCheckbox>
-            <a
-              style={{
-                float: 'right',
-              }}
-            >
-              <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
-            </a>
+            <div style={{ display: 'flex', gap: 12 }}>
+              <a onClick={() => history.push('/user/register')}>立即注册</a>
+              <a>
+                <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
+              </a>
+            </div>
          </div>
        </LoginForm>
      </div>
--- a/src/pages/user/register/index.tsx
+++ b/src/pages/user/register/index.tsx
@@ -6,6 +6,8 @@ import { useEffect, useState } from 'react';
 import type { StateType } from './service';
 import { fakeRegister } from './service';
 import useStyles from './style.style';
+import { registerUser } from '@/services/user/api';
+import { CommonResponse } from '@/types/common';

 const FormItem = Form.Item;
 const { Option } = Select;
@@ -74,21 +76,36 @@ const Register: FC = () => {
    }
    return 'poor';
  };
-  const { loading: submitting, run: register } = useRequest<{
-    data: StateType;
-  }>(fakeRegister, {
-    manual: true,
-    onSuccess: (data, params) => {
-      if (data.status === 'ok') {
-        message.success('注册成功！');
-        history.push({
-          pathname: `/user/register-result?account=${params[0].email}`,
-        });
-      }
+  const { loading: submitting, run: register } = useRequest(
+    (params) => registerUser(params, { skipErrorHandler: true }),
+    {
+      manual: true,
+      onSuccess: (data, params) => {
+        console.log('注册成功 - data:', data, 'params:', params);
+        const response = data as CommonResponse<string>;
+        if (response?.code === 200) {
+          message.success('注册成功！');
+          const formValues = params[0] as any;
+          history.push({
+            pathname: `/user/register-result?account=${formValues?.email || formValues?.username || ''}`,
+          });
+        } else {
+          message.error(response?.message || '注册失败，请重试');
+        }
+      },
    },
-  });
+  );
+  
  const onFinish = (values: Store) => {
-    register(values);
+    // 将表单数据映射为后端需要的格式
+    const registerParams = {
+      username: values.username,
+      nickname: values.nickname,
+      password: values.password,
+      email: values.email || '',
+      phone: values.phone || '',
+    };
+    register(registerParams);
  };
  const checkConfirm = (_: any, value: string) => {
    const promise = Promise;
@@ -139,19 +156,22 @@ const Register: FC = () => {
      <h3>注册</h3>
      <Form form={form} name="UserRegister" onFinish={onFinish}>
        <FormItem
-          name="email"
+          name="username"
          rules={[
-            {
-              required: true,
-              message: '请输入邮箱地址!',
-            },
-            {
-              type: 'email',
-              message: '邮箱地址格式错误!',
-            },
+            { required: true, message: '请输入用户名!' },
+            { max: 50, message: '用户名过长' },
          ]}
        >
-          <Input size="large" placeholder="邮箱" />
+          <Input size="large" placeholder="用户名" />
+        </FormItem>
+        <FormItem
+          name="nickname"
+          rules={[
+            { required: true, message: '请输入昵称!' },
+            { max: 50, message: '昵称过长' },
+          ]}
+        >
+          <Input size="large" placeholder="昵称" />
        </FormItem>
        <Popover
          getPopupContainer={(node) => {
@@ -216,8 +236,23 @@ const Register: FC = () => {
          <Input size="large" type="password" placeholder="确认密码" />
        </FormItem>
        <FormItem
-          name="mobile"
-          rules={[
+          name="email"
+          /* rules={[
+            {
+              required: true,
+              message: '请输入邮箱地址!',
+            },
+            {
+              type: 'email',
+              message: '邮箱地址格式错误!',
+            },
+          ]} */
+        >
+          <Input size="large" placeholder="邮箱" />
+        </FormItem>
+        <FormItem
+          name="phone"
+          /* rules={[
            {
              required: true,
              message: '请输入手机号!',
@@ -226,7 +261,7 @@ const Register: FC = () => {
              pattern: /^\d{11}$/,
              message: '手机号格式错误!',
            },
-          ]}
+          ]} */
        >
          <Space.Compact style={{ width: '100%' }}>
            <Select
@@ -244,7 +279,7 @@ const Register: FC = () => {
            <Input size="large" placeholder="手机号" />
          </Space.Compact>
        </FormItem>
-        <Row gutter={8}>
+        {/* <Row gutter={8}>
          <Col span={16}>
            <FormItem
              name="captcha"
@@ -268,7 +303,7 @@ const Register: FC = () => {
              {count ? `${count} s` : '获取验证码'}
            </Button>
          </Col>
-        </Row>
+        </Row> */}
        <FormItem>
          <div className={styles.footer}>
            <Button