@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/login/components/Login/RegisterBox/index.tsx

@@ -0,0 +1,181 @@
+import { Button, Flex, Form, FormInstance, Input, Typography } from "antd";
+import { LoadingOutlined } from "@ant-design/icons";
+import React, { useState } from "react";
+import { useLoginI18n } from "../../../i18n";
+
+export enum RegisterFormActionEnum {
+  CANCEL = "cancel",
+  SUBMIT = "submit"
+}
+
+//不能用数字开头，长度不超过25，无特殊符号，无空格
+const REG_NAME = /^[\u4e00-\u9fa5A-Za-z_][\u4e00-\u9fa5A-Za-z0-9_]{0,24}$/;
+const REG_NAME_MSG = "不能用数字开头，长度不超过25，无特殊符号，无空格";
+
+const REG_PHONE =
+  /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
+const REF_PHONE_MSG = "手机号格式不正确";
+
+const REG_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const REF_EMAIL_MSG = "邮箱格式不正确";
+
+const REG_PASSWORD = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}$/;
+const REF_PASSWORD_MSG =
+  "密码必须包含大小写字母和数字，不包含特殊字符，长度至少是8";
+
+interface Iprops {
+  eventEmit?: (name: string, data: any) => void;
+  setIsRegister: React.Dispatch<React.SetStateAction<boolean>>;
+  form: FormInstance<any>;
+  registerLoading?: boolean;
+  registreKaptchaUrl?: string;
+}
+
+const RegisterBox: React.FC<Iprops> = (props) => {
+  const {
+    eventEmit,
+    setIsRegister,
+    form,
+    registreKaptchaUrl,
+    registerLoading = false
+  } = props;
+  const { messages } = useLoginI18n();
+  const [codeLoading, setCodeLoading] = useState<boolean>(false);
+
+  const handleRegister = async () => {
+    form.validateFields().then(async (res) => {
+      eventEmit && (await eventEmit("login:register", res));
+    });
+  };
+
+  const handleClickCode = async () => {
+    setCodeLoading(true);
+    eventEmit && (await eventEmit("login:registerCodeClick", ""));
+    setCodeLoading(false);
+  };
+
+  return (
+    <Flex style={{ paddingTop: "35px" }} vertical>
+      <Form.Item
+        label={messages.register.labels.username}
+        name={"userName"}
+        rules={[
+          { required: true, message: messages.register.required.username },
+          {
+            pattern: new RegExp(REG_NAME),
+            message: `名称${REG_NAME_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder={messages.register.placeholders.username} />
+      </Form.Item>
+      <Form.Item
+        label={messages.register.labels.phone}
+        name={"userIphone"}
+        rules={[
+          { required: true, message: messages.register.required.phone },
+          {
+            pattern: new RegExp(REG_PHONE),
+            message: `${REF_PHONE_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder={messages.register.placeholders.phone} />
+      </Form.Item>
+      <Form.Item
+        label={messages.register.labels.email}
+        name={"userEmail"}
+        rules={[
+          { required: true, message: messages.register.required.email },
+          {
+            pattern: new RegExp(REG_EMAIL),
+            message: `${REF_EMAIL_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder={messages.register.placeholders.email} />
+      </Form.Item>
+      <Form.Item
+        label={messages.register.labels.password}
+        name={"password"}
+        rules={[
+          { required: true, message: messages.register.required.password },
+          {
+            pattern: new RegExp(REG_PASSWORD),
+            message: `${REF_PASSWORD_MSG}`
+          }
+        ]}
+      >
+        <Input placeholder={messages.register.placeholders.password} type="password" />
+      </Form.Item>
+      <Form.Item
+        label={messages.register.labels.confirmPassword}
+        name={"passwordAffirm"}
+        dependencies={["password"]}
+        rules={[
+          {
+            required: true,
+            message: messages.register.required.confirmPassword
+          },
+          ({ getFieldValue }) => ({
+            validator(_, value) {
+              if (!value || getFieldValue("password") === value) {
+                return Promise.resolve();
+              }
+              return Promise.reject(new Error(messages.register.passwordConfirmMismatch));
+            }
+          })
+        ]}
+      >
+        <Input placeholder={messages.register.placeholders.confirmPassword} type="password" />
+      </Form.Item>
+      {registreKaptchaUrl && (
+        <Form.Item
+          label={messages.register.labels.verifyCode}
+          name={"verifyCode"}
+          rules={[{ required: true, message: messages.register.required.verifyCode }]}
+        >
+          <Flex>
+            <Input placeholder={messages.register.placeholders.verifyCode} />
+
+            {codeLoading ? (
+              <Flex style={{ width: "96px", height: "40px" }} justify="center">
+                <LoadingOutlined />
+              </Flex>
+            ) : (
+              <img
+                onClick={handleClickCode}
+                src={registreKaptchaUrl}
+                style={{
+                  width: "96px",
+                  height: "40px",
+                  background: "white",
+                  border: "solid 1px #d9d9d9",
+                  cursor: "pointer",
+                  borderRadius: "6px"
+                }}
+              />
+            )}
+          </Flex>
+        </Form.Item>
+      )}
+      <Form.Item>
+        <Flex justify="space-between">
+          <Button style={{ width: "48%" }} onClick={() => setIsRegister(false)}>
+            {messages.register.cancel}
+          </Button>
+          <Button
+            style={{ width: "48%" }}
+            onClick={handleRegister}
+            type="primary"
+            loading={registerLoading}
+          >
+            {messages.register.submit}
+          </Button>
+        </Flex>
+      </Form.Item>
+    </Flex>
+  );
+};
+
+export default RegisterBox;

package/src/modules/login/components/Login/index.tsx

@@ -0,0 +1,100 @@
+import { ConfigProvider, Flex, Form } from 'antd';
+import { useState } from 'react';
+import LoginBox from './LoginBox';
+
+const defaultStyle = {
+  colorPrimary: '#1677ff',
+  defaultBg: '#ffffff',
+};
+
+interface LoginStyle {
+  defaultBg?: string;
+  colorPrimary?: string;
+}
+interface LoginProps {
+  homeBg?: string;
+  leftImg?: string;
+  logoImg?: string;
+  eventEmit?: (n: string, d: any) => void;
+  loginLoading?: boolean;
+  registerLoading?: boolean;
+  codeImgSrc?: string;
+  loginStyle?: LoginStyle;
+  registreKaptchaUrl?: string;
+}
+const Login = (props: LoginProps) => {
+  const {
+    homeBg,
+    leftImg,
+    logoImg,
+    eventEmit,
+    codeImgSrc = '',
+    loginStyle,
+    loginLoading,
+    registerLoading,
+    registreKaptchaUrl,
+  } = props;
+  const [isRegister, setIsRegister] = useState<boolean>(false);
+  const [form] = Form.useForm();
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: loginStyle?.colorPrimary || defaultStyle.colorPrimary,
+        },
+        components: {
+          Button: {
+            defaultBg: loginStyle?.defaultBg || defaultStyle.defaultBg,
+          },
+        },
+      }}
+    >
+      <Flex
+        style={{
+          width: '100%',
+          height: '100%',
+          background: `url('${homeBg}') no-repeat center/cover`,
+        }}
+        justify="center"
+        align="center"
+      >
+        <Flex
+          style={{
+            background: 'white',
+            height: '55vh',
+            minHeight: '393px',
+            width: 'calc(55vh * 2)',
+            minWidth: '840px',
+            borderRadius: '10px',
+            overflow: 'hidden',
+          }}
+        >
+          {leftImg && (
+            <img
+              style={{
+                objectFit: 'cover',
+                width: '50%',
+              }}
+              src={leftImg}
+            />
+          )}
+          <Flex flex={1} style={{ padding: '0 50px' }} justify="center" align="center">
+            <Form form={form} labelCol={{ span: 8 }}>
+              <LoginBox
+                loginLoading={loginLoading}
+                form={form}
+                logoImg={logoImg}
+                setIsRegister={setIsRegister}
+                codeImgSrc={codeImgSrc}
+                eventEmit={eventEmit}
+              />
+            </Form>
+          </Flex>
+        </Flex>
+      </Flex>
+    </ConfigProvider>
+  );
+};
+
+export default Login;

package/src/modules/login/i18n.ts

@@ -0,0 +1,217 @@
+import React from 'react';
+
+/**
+ * 登录模块 i18n 文案（登录表单、注册表单、通用错误等）
+ * 与 chat/sensitive 一致：zh / en / ja，通过 props 传入 locale + 可选 messages 覆盖
+ */
+export type LoginLocale = 'zh' | 'en' | 'ja';
+
+export interface LoginMessages {
+  login: {
+    usernamePlaceholder: string;
+    passwordPlaceholder: string;
+    verifyCodePlaceholder: string;
+    usernameRequired: string;
+    passwordRequired: string;
+    verifyCodeRequired: string;
+    submit: string;
+    errorFallback: string;
+  };
+  register: {
+    labels: {
+      username: string;
+      phone: string;
+      email: string;
+      password: string;
+      confirmPassword: string;
+      verifyCode: string;
+    };
+    placeholders: {
+      username: string;
+      phone: string;
+      email: string;
+      password: string;
+      confirmPassword: string;
+      verifyCode: string;
+    };
+    required: {
+      username: string;
+      phone: string;
+      email: string;
+      password: string;
+      confirmPassword: string;
+      verifyCode: string;
+    };
+    cancel: string;
+    submit: string;
+    passwordConfirmMismatch: string;
+  };
+}
+
+const zh: LoginMessages = {
+  login: {
+    usernamePlaceholder: '输入用户名字',
+    passwordPlaceholder: '输入密码',
+    verifyCodePlaceholder: '输入验证码',
+    usernameRequired: '请输入用户名字',
+    passwordRequired: '请输入密码',
+    verifyCodeRequired: '请输入验证码',
+    submit: '登录',
+    errorFallback: '登录失败，请稍后再试',
+  },
+  register: {
+    labels: {
+      username: '用户名',
+      phone: '手机号',
+      email: '邮箱',
+      password: '密码',
+      confirmPassword: '确认密码',
+      verifyCode: '验证码',
+    },
+    placeholders: {
+      username: '输入用户名字',
+      phone: '请输入手机号',
+      email: '输入邮箱',
+      password: '请输入密码',
+      confirmPassword: '请确认新密码',
+      verifyCode: '输入验证码',
+    },
+    required: {
+      username: '请输入名称',
+      phone: '请输入手机号',
+      email: '请输入邮箱',
+      password: '请输入密码',
+      confirmPassword: '请确认新密码',
+      verifyCode: '请输入验证码',
+    },
+    cancel: '取消',
+    submit: '注册',
+    passwordConfirmMismatch: '两次密码不一致!',
+  },
+};
+
+const en: LoginMessages = {
+  login: {
+    usernamePlaceholder: 'Enter username',
+    passwordPlaceholder: 'Enter password',
+    verifyCodePlaceholder: 'Enter verification code',
+    usernameRequired: 'Please enter username',
+    passwordRequired: 'Please enter password',
+    verifyCodeRequired: 'Please enter verification code',
+    submit: 'Sign in',
+    errorFallback: 'Login failed, please try again later.',
+  },
+  register: {
+    labels: {
+      username: 'Username',
+      phone: 'Phone',
+      email: 'Email',
+      password: 'Password',
+      confirmPassword: 'Confirm password',
+      verifyCode: 'Verification code',
+    },
+    placeholders: {
+      username: 'Enter username',
+      phone: 'Enter phone number',
+      email: 'Enter email',
+      password: 'Enter password',
+      confirmPassword: 'Confirm password',
+      verifyCode: 'Enter verification code',
+    },
+    required: {
+      username: 'Please enter username',
+      phone: 'Please enter phone number',
+      email: 'Please enter email',
+      password: 'Please enter password',
+      confirmPassword: 'Please confirm password',
+      verifyCode: 'Please enter verification code',
+    },
+    cancel: 'Cancel',
+    submit: 'Register',
+    passwordConfirmMismatch: 'Passwords do not match.',
+  },
+};
+
+const ja: LoginMessages = {
+  login: {
+    usernamePlaceholder: 'ユーザー名を入力',
+    passwordPlaceholder: 'パスワードを入力',
+    verifyCodePlaceholder: '認証コードを入力',
+    usernameRequired: 'ユーザー名を入力してください',
+    passwordRequired: 'パスワードを入力してください',
+    verifyCodeRequired: '認証コードを入力してください',
+    submit: 'ログイン',
+    errorFallback: 'ログインに失敗しました。しばらくしてからお試しください。',
+  },
+  register: {
+    labels: {
+      username: 'ユーザー名',
+      phone: '電話番号',
+      email: 'メール',
+      password: 'パスワード',
+      confirmPassword: 'パスワード確認',
+      verifyCode: '認証コード',
+    },
+    placeholders: {
+      username: 'ユーザー名を入力',
+      phone: '電話番号を入力',
+      email: 'メールを入力',
+      password: 'パスワードを入力',
+      confirmPassword: 'パスワードを確認',
+      verifyCode: '認証コードを入力',
+    },
+    required: {
+      username: 'ユーザー名を入力してください',
+      phone: '電話番号を入力してください',
+      email: 'メールを入力してください',
+      password: 'パスワードを入力してください',
+      confirmPassword: 'パスワードを確認してください',
+      verifyCode: '認証コードを入力してください',
+    },
+    cancel: 'キャンセル',
+    submit: '登録',
+    passwordConfirmMismatch: 'パスワードが一致しません。',
+  },
+};
+
+const localeMap: Record<LoginLocale, LoginMessages> = { zh, en, ja };
+
+export function getLoginMessages(locale: LoginLocale, override?: Partial<LoginMessages>): LoginMessages {
+  const base = localeMap[locale] ?? zh;
+  return override ? { ...base, ...override } : base;
+}
+
+export interface LoginI18nValue {
+  locale: LoginLocale;
+  messages: LoginMessages;
+}
+
+const LoginI18nContext = React.createContext<LoginI18nValue>({
+  locale: 'zh',
+  messages: zh,
+});
+
+export { LoginI18nContext };
+
+export function useLoginI18n(): LoginI18nValue {
+  return React.useContext(LoginI18nContext);
+}
+
+export function LoginI18nProvider({
+  locale,
+  messages: messagesOverride,
+  children,
+}: {
+  locale: LoginLocale;
+  messages?: Partial<LoginMessages>;
+  children: React.ReactNode;
+}) {
+  const value = React.useMemo(
+    () => ({
+      locale,
+      messages: getLoginMessages(locale, messagesOverride),
+    }),
+    [locale, messagesOverride]
+  );
+  return React.createElement(LoginI18nContext.Provider, { value }, children);
+}

package/src/modules/login/index.tsx

@@ -0,0 +1,113 @@
+import homeBg from '@/assets/login/homeBg.png';
+import leftImg from '@/assets/login/left.jpg';
+import logoImg from '@/assets/login/logoImg.png';
+import { Layout, message } from 'antd';
+import { Encrypt } from './utils';
+import { useEffect, useState } from 'react';
+import Login from './components/Login';
+import { api_getKaptchaImage, login } from './useServices';
+import { LoginI18nProvider, getLoginMessages, type LoginLocale, type LoginMessages } from './i18n';
+import './style.css';
+
+const baseUrl = '/proxy';
+interface LoginMainProps {
+  eventsEmit: (eventName: string, data: any) => void;
+  locale?: LoginLocale;
+  messages?: Partial<LoginMessages>;
+}
+function LoginMain({ eventsEmit, locale = 'zh', messages: messagesOverride }: LoginMainProps) {
+  const effectiveMessages = getLoginMessages(locale, messagesOverride);
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [registerLoading, setRegisterLoading] = useState(false);
+  const handleLogin = async (data: any) => {
+    try {
+      setLoginLoading(true);
+      login(
+        { url: baseUrl },
+        {
+          ...data,
+          password: Encrypt(data.password),
+        },
+        res => {
+          if (res?.success) {
+            eventsEmit('afterLogin', res?.data?.token || '');
+          }
+          setLoginLoading(false);
+        },
+        msg => {
+          setLoginLoading(false);
+          if (msg) {
+            message.error(msg);
+          } else {
+            message.error(effectiveMessages.login.errorFallback);
+          }
+        }
+      );
+    } catch (e) {
+      setLoginLoading(false);
+    }
+  };
+
+  const [kaptchaUrl, setKaptchaUrl] = useState('');
+  const [registreKaptchaUrl, setRegistreKaptchaUrl] = useState('');
+
+  const handleGetImage = () => {
+    try {
+      setRegisterLoading(true);
+      api_getKaptchaImage({ url: baseUrl }, data => {
+        setRegisterLoading(false);
+        if (data) {
+          const imgBlob = new Blob([data], { type: 'image/jpeg' });
+          const imageUrl = window.URL.createObjectURL(imgBlob);
+          setKaptchaUrl(imageUrl);
+          setRegistreKaptchaUrl(imageUrl);
+        }
+      });
+    } catch (error) {
+      setRegisterLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleGetImage();
+    return () => {
+      window.URL.revokeObjectURL(kaptchaUrl);
+    };
+  }, []);
+
+  const eventEmit = async (name: string, data: any) => {
+    switch (name) {
+      case 'login:login':
+        await handleLogin(data);
+        break;
+      case 'login:codeClick':
+        handleGetImage();
+        break;
+      case 'login:registerCodeClick':
+        handleGetImage();
+        break;
+      default:
+        break;
+    }
+  };
+  return (
+    <LoginI18nProvider locale={locale} messages={messagesOverride}>
+      <Layout style={{ height: '100vh', overflow: 'hidden' }}>
+        <Login
+          loginLoading={loginLoading}
+          registerLoading={registerLoading}
+          homeBg={homeBg}
+          leftImg={leftImg}
+          logoImg={logoImg}
+          codeImgSrc={kaptchaUrl}
+          registreKaptchaUrl={registreKaptchaUrl}
+          eventEmit={eventEmit}
+        />
+      </Layout>
+    </LoginI18nProvider>
+  );
+}
+
+export default LoginMain;
+export type { LoginLocale, LoginMessages } from './i18n';
+export { getLoginMessages, useLoginI18n, LoginI18nProvider, LoginI18nContext } from './i18n';

package/src/modules/login/style.css

@@ -0,0 +1,3 @@
+body,html {
+  margin: 0;
+}

package/src/modules/login/useServices.ts

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+export const login = async (
+  config: { url: string },
+  data: { restult: number; queryId: string },
+  sucCb: (arg: any) => void,
+  failCb: (arg: any) => void = () => {}
+) => {
+  try {
+    axios
+      .post(`${config.url}/auth/user/login`, data)
+      .then(res => {
+        if (res.data.success) {
+          sucCb && sucCb(res.data);
+        } else {
+          failCb && failCb(false);
+        }
+      })
+      .catch(error => {
+        failCb && failCb(error?.response?.data?.errorMsg);
+        console.error('Login error:', error);
+      });
+  } catch (error) {
+    failCb && failCb(false);
+    console.log('error', error);
+  }
+};
+
+export const api_getKaptchaImage = (config: { url: string }, cb: (arg: any) => void) => {
+  try {
+    axios
+      .get(`/user/kaptcha`, {
+        baseURL: '/proxy/auth',
+        responseType: 'arraybuffer', // 关键：必须添加
+        //params: { t: Date.now() },
+        headers: { Accept: '*/*', 'Content-Type': 'application/json' },
+      })
+      .then(res => {
+        if (res.data) {
+          cb && cb(res.data);
+        } else {
+          cb && cb(false);
+        }
+      })
+      .catch(error => {
+        cb && cb(false);
+        console.error('Login error:', error);
+      });
+  } catch (error) {
+    cb && cb(false);
+    console.log('error', error);
+  }
+};