🌐 style: 补齐 user-panel 的国际化文案

arvinxx · Mar 28, 2022 · ce4cada · ce4cada
1 parent 16f52a7
commit ce4cada
Show file tree

Hide file tree

Showing 10 changed files with 150 additions and 67 deletions.
diff --git a/config/menu.ts b/config/menu.ts
@@ -29,7 +29,15 @@ export const menus = {
     },
     {
       title: '业务组件',
-      children: ['asset-gallery', 'journey-map', 'mindflow', 'heatmap-calendar', 'user-panel'],
+      children: ['asset-gallery', 'journey-map', 'heatmap-calendar'],
+    },
+    {
+      title: 'Mindflow',
+      children: ['mindflow'],
+    },
+    {
+      title: '登录/注册面板',
+      children: ['user-panel', 'login', 'register'],
     },
   ],
   '/guide': [

diff --git a/packages/user-panel/demos/LoginI18n.tsx b/packages/user-panel/demos/LoginI18n.tsx
@@ -0,0 +1,51 @@
+/**
+ * compact: true
+ */
+import React, { useEffect, useState } from 'react';
+
+import { Flexbox } from '@arvinxu/layout-kit';
+import UserPanel from '@arvinxu/user-panel';
+import { Switch } from 'antd';
+import { getI18n } from 'react-i18next';
+
+const LoginWithLogo = () => {
+  const [locale, setLocale] = useState('zh-CN');
+
+  useEffect(() => {
+    getI18n().changeLanguage(locale);
+  }, [locale]);
+
+  return (
+    <div
+      style={{
+        background: '#e8e8e8',
+        display: 'flex',
+        justifyContent: 'center',
+        padding: 24,
+      }}
+    >
+      <Flexbox gap={8} align={'center'}>
+        <Flexbox horizontal>
+          <Switch
+            checked={locale === 'en-US'}
+            unCheckedChildren={'中文'}
+            checkedChildren={'英文'}
+            onChange={(checked) => {
+              setLocale(checked ? 'en-US' : 'zh-CN');
+            }}
+          />
+        </Flexbox>
+        <UserPanel.Login
+          logo={'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg'}
+          showFooter
+          onWechatLoginClick={() => {}}
+          onCaptchaClick={async () => {
+            return true;
+          }}
+        />
+      </Flexbox>
+    </div>
+  );
+};
+
+export default LoginWithLogo;
diff --git a/packages/user-panel/src/components/Footer/index.tsx b/packages/user-panel/src/components/Footer/index.tsx
@@ -29,11 +29,7 @@ export interface FooterProps {
   onRegisterClick?: (history: H.History) => void;
 }
 
-export const Footer: FC<FooterProps> = ({
-  type,
-  onWechatLoginClick,
-  onRegisterClick,
-}) => {
+export const Footer: FC<FooterProps> = ({ type, onWechatLoginClick, onRegisterClick }) => {
   const f = useFormatMessage();
 
   const history = useHistory();
@@ -58,9 +54,7 @@ export const Footer: FC<FooterProps> = ({
       </Divider>
       {onWechatLoginClick ? <WechatLogin login={onWechatLoginClick} /> : null}
       <div className="avx-user-panel-footer-other">
-        <Text>
-          {f(type === 'login' ? 'login.no-account' : 'register.have-account')}
-        </Text>
+        <Text>{f(type === 'login' ? 'login.no-account' : 'register.have-account')}</Text>
         <div className="avx-user-panel-footer-register">
           <a onClick={() => onClick()}>
             {f(type === 'login' ? 'login.signup' : 'register.sign-in')}

diff --git a/packages/user-panel/src/components/Footer/style.less b/packages/user-panel/src/components/Footer/style.less
@@ -5,8 +5,11 @@
   &-divider {
     margin: 8px 0;
     padding: 0 16px;
-    color: hsla(0, 0%, 0%, 0.25) !important;
-    font-size: 14px !important;
+  }
+
+  .ant-divider-horizontal.ant-divider-with-text {
+    color: hsla(0, 0%, 0%, 0.25);
+    font-size: 14px;
   }
 
   &-other {

diff --git a/packages/user-panel/src/locales/en-US/login.ts b/packages/user-panel/src/locales/en-US/login.ts
@@ -19,4 +19,11 @@ export default {
   'login.submit': 'Submit',
   'login.loginWith': 'Login with :',
   'login.registerAccount': 'Register Account',
+
+  'login.header': 'Login',
+  'login.captcha.fetch.success': 'Fetch captcha successfully!',
+  'login.or': 'Or',
+  'login.wechat-login.btn': 'Login by Wechat',
+  'login.no-account': "Don't have an account？",
+  'login.signup': 'Signup now',
 };
diff --git a/packages/user-panel/src/locales/zh-CN/login.ts b/packages/user-panel/src/locales/zh-CN/login.ts
@@ -14,6 +14,7 @@ export default {
   'login.captcha.placeholder': '请输入验证码',
   'login.captcha.required': '验证码是必填项！',
   'login.captcha.function.required': '获取验证码方法未实现，请检查代码！',
+  'login.captcha.fetch.success': '获取验证码成功！',
   'login.phoneLogin.getVerificationCode': '获取验证码',
   'pages.getCaptchaSecondText': '秒后重新获取',
   'login.rememberMe': '自动登录',

diff --git a/packages/user-panel/src/login.md b/packages/user-panel/src/login.md
@@ -0,0 +1,44 @@
+---
+title: UserPanel.Login 登录面板
+group:
+  path: /
+nav:
+  path: /biz-components
+---
+
+# UserPanel.Login 登录面板
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+用户登录面板
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/user-panel.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/user-panel
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
+[download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
+
+## 登录面板
+
+<code src='../demos/Login.tsx' />
+
+### 带 Logo
+
+<code src='../demos/LoginWithLogo.tsx' />
+
+### 显示忘记密码
+
+填入 忘记密码所在 url 或者实现方法
+
+<code src='../demos/LoginWithForgotUrl.tsx' />
+
+### 显示底部
+
+如果需要显示微信登录按钮, 需要实现 `onWechatLoginClick` 方法. 否则默认不显示
+
+### 国际化
+
+支持通过 `react-i18next` 模块实现国际化文案
+
+<code src='../demos/LoginI18n.tsx' />
+
+<API src='./UserLogin.tsx'></API>
diff --git a/packages/user-panel/src/login/index.tsx b/packages/user-panel/src/login/index.tsx
@@ -1,16 +1,7 @@
-import {
-  LockOutlined,
-  MailOutlined,
-  MobileOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
+import { LockOutlined, MailOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
 import { message, Tabs } from 'antd';
 import React, { useState } from 'react';
-import ProForm, {
-  ProFormCaptcha,
-  ProFormCheckbox,
-  ProFormText,
-} from '@ant-design/pro-form';
+import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
 import LoginErrorMessage from './LoginErrorMessage';
 
 import './index.less';
@@ -76,11 +67,7 @@ const Login: React.FC<LoginProps> = (props) => {
           setLoading(false);
         }}
       >
-        <Tabs
-          activeKey={type}
-          type={'card'}
-          onChange={(e) => setType(e as IUserLogin.LoginType)}
-        >
+        <Tabs activeKey={type} type={'card'} onChange={(e) => setType(e as IUserLogin.LoginType)}>
           <Tabs.TabPane key="account" tab={f('login.accountLogin.tab')} />
           <Tabs.TabPane key="mobile" tab={f('login.phoneLogin.tab')} />
         </Tabs>
@@ -94,9 +81,7 @@ const Login: React.FC<LoginProps> = (props) => {
               name="userName"
               fieldProps={{
                 size: 'large',
-                prefix: (
-                  <UserOutlined className="avx-user-panel-login-prefixIcon" />
-                ),
+                prefix: <UserOutlined className="avx-user-panel-login-prefixIcon" />,
               }}
               placeholder={f('login.username.placeholder')}
               rules={[
@@ -110,9 +95,7 @@ const Login: React.FC<LoginProps> = (props) => {
               name="password"
               fieldProps={{
                 size: 'large',
-                prefix: (
-                  <LockOutlined className="avx-user-panel-login-prefixIcon" />
-                ),
+                prefix: <LockOutlined className="avx-user-panel-login-prefixIcon" />,
               }}
               placeholder={f('login.password.placeholder')}
               rules={[
@@ -126,16 +109,14 @@ const Login: React.FC<LoginProps> = (props) => {
         )}
 
         {status === 'error' && loginType === 'mobile' && !submitting && (
-          <LoginErrorMessage content="验证码错误" />
+          <LoginErrorMessage content={f('login.phoneLogin.errorMessage')} />
         )}
         {type === 'mobile' && (
           <>
             <ProFormText
               fieldProps={{
                 size: 'large',
-                prefix: (
-                  <MobileOutlined className="avx-user-panel-login-prefixIcon" />
-                ),
+                prefix: <MobileOutlined className="avx-user-panel-login-prefixIcon" />,
               }}
               name="mobile"
               placeholder={f('login.phoneNumber.placeholder')}
@@ -153,9 +134,7 @@ const Login: React.FC<LoginProps> = (props) => {
             <ProFormCaptcha
               fieldProps={{
                 size: 'large',
-                prefix: (
-                  <MailOutlined className="avx-user-panel-login-prefixIcon" />
-                ),
+                prefix: <MailOutlined className="avx-user-panel-login-prefixIcon" />,
               }}
               captchaProps={{
                 size: 'large',
@@ -188,7 +167,7 @@ const Login: React.FC<LoginProps> = (props) => {
                   return;
                 }
 
-                message.success('获取验证码成功！');
+                message.success(f('login.captcha.fetch.success'));
               }}
             />
           </>

diff --git a/packages/user-panel/src/register.md b/packages/user-panel/src/register.md
@@ -0,0 +1,22 @@
+---
+title: UserPanel.Register 注册面板
+group:
+  path: /
+nav:
+  path: /biz-components
+---
+
+# UserPanel.Register 注册
+
+[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
+
+用户登录注册集成面板
+
+[version-image]: http://img.shields.io/npm/v/@arvinxu/user-panel.svg?color=deepgreen&label=latest
+[version-url]: http://npmjs.org/package/@arvinxu/user-panel
+[download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
+[download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
+
+## 注册面板
+
+TODO
diff --git a/packages/user-panel/src/user-panel.md b/packages/user-panel/src/user-panel.md
@@ -16,29 +16,3 @@ nav:
 [version-url]: http://npmjs.org/package/@arvinxu/user-panel
 [download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
 [download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
-
-## 登录面板
-
-<code src='../demos/Login.tsx' />
-
-### 带 Logo
-
-<code src='../demos/LoginWithLogo.tsx' />
-
-### 显示忘记密码
-
-填入 忘记密码所在 url 或者实现方法
-
-<code src='../demos/LoginWithForgotUrl.tsx' />
-
-### 显示底部
-
-如果需要显示微信登录按钮, 需要实现 `onWechatLoginClick` 方法. 否则默认不显示
-
-<code src='../demos/LoginWithFooter.tsx' />
-
-<API src='./UserLogin.tsx'></API>
-
-## 注册面板
-
-TODO