Skip to content
This repository was archived by the owner on Apr 11, 2025. It is now read-only.

Commit ce4cada

Browse files
arvinxxarvinxx
committed
🌐 style: 补齐 user-panel 的国际化文案
1 parent 16f52a7 commit ce4cada

File tree

10 files changed

+150
-67
lines changed

10 files changed

+150
-67
lines changed

‎config/menu.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,15 @@ export const menus = {
2929
},
3030
{
3131
title: '业务组件',
32-
children: ['asset-gallery', 'journey-map', 'mindflow', 'heatmap-calendar', 'user-panel'],
32+
children: ['asset-gallery', 'journey-map', 'heatmap-calendar'],
33+
},
34+
{
35+
title: 'Mindflow',
36+
children: ['mindflow'],
37+
},
38+
{
39+
title: '登录/注册面板',
40+
children: ['user-panel', 'login', 'register'],
3341
},
3442
],
3543
'/guide': [

‎packages/user-panel/demos/LoginI18n.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* compact: true
3+
*/
4+
import React, { useEffect, useState } from 'react';
5+
6+
import { Flexbox } from '@arvinxu/layout-kit';
7+
import UserPanel from '@arvinxu/user-panel';
8+
import { Switch } from 'antd';
9+
import { getI18n } from 'react-i18next';
10+
11+
const LoginWithLogo = () => {
12+
const [locale, setLocale] = useState('zh-CN');
13+
14+
useEffect(() => {
15+
getI18n().changeLanguage(locale);
16+
}, [locale]);
17+
18+
return (
19+
<div
20+
style={{
21+
background: '#e8e8e8',
22+
display: 'flex',
23+
justifyContent: 'center',
24+
padding: 24,
25+
}}
26+
>
27+
<Flexbox gap={8} align={'center'}>
28+
<Flexbox horizontal>
29+
<Switch
30+
checked={locale === 'en-US'}
31+
unCheckedChildren={'中文'}
32+
checkedChildren={'英文'}
33+
onChange={(checked) => {
34+
setLocale(checked ? 'en-US' : 'zh-CN');
35+
}}
36+
/>
37+
</Flexbox>
38+
<UserPanel.Login
39+
logo={'https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg'}
40+
showFooter
41+
onWechatLoginClick={() => {}}
42+
onCaptchaClick={async () => {
43+
return true;
44+
}}
45+
/>
46+
</Flexbox>
47+
</div>
48+
);
49+
};
50+
51+
export default LoginWithLogo;

‎packages/user-panel/src/components/Footer/index.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,7 @@ export interface FooterProps {
2929
onRegisterClick?: (history: H.History) => void;
3030
}
3131

32-
export const Footer: FC<FooterProps> = ({
33-
type,
34-
onWechatLoginClick,
35-
onRegisterClick,
36-
}) => {
32+
export const Footer: FC<FooterProps> = ({ type, onWechatLoginClick, onRegisterClick }) => {
3733
const f = useFormatMessage();
3834

3935
const history = useHistory();
@@ -58,9 +54,7 @@ export const Footer: FC<FooterProps> = ({
5854
</Divider>
5955
{onWechatLoginClick ? <WechatLogin login={onWechatLoginClick} /> : null}
6056
<div className="avx-user-panel-footer-other">
61-
<Text>
62-
{f(type === 'login' ? 'login.no-account' : 'register.have-account')}
63-
</Text>
57+
<Text>{f(type === 'login' ? 'login.no-account' : 'register.have-account')}</Text>
6458
<div className="avx-user-panel-footer-register">
6559
<a onClick={() => onClick()}>
6660
{f(type === 'login' ? 'login.signup' : 'register.sign-in')}

‎packages/user-panel/src/components/Footer/style.less

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@
55
&-divider {
66
margin: 8px 0;
77
padding: 0 16px;
8-
color: hsla(0, 0%, 0%, 0.25) !important;
9-
font-size: 14px !important;
8+
}
9+
10+
.ant-divider-horizontal.ant-divider-with-text {
11+
color: hsla(0, 0%, 0%, 0.25);
12+
font-size: 14px;
1013
}
1114

1215
&-other {

‎packages/user-panel/src/locales/en-US/login.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,11 @@ export default {
1919
'login.submit': 'Submit',
2020
'login.loginWith': 'Login with :',
2121
'login.registerAccount': 'Register Account',
22+
23+
'login.header': 'Login',
24+
'login.captcha.fetch.success': 'Fetch captcha successfully!',
25+
'login.or': 'Or',
26+
'login.wechat-login.btn': 'Login by Wechat',
27+
'login.no-account': "Don't have an account？",
28+
'login.signup': 'Signup now',
2229
};

‎packages/user-panel/src/locales/zh-CN/login.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default {
1414
'login.captcha.placeholder': '请输入验证码',
1515
'login.captcha.required': '验证码是必填项！',
1616
'login.captcha.function.required': '获取验证码方法未实现，请检查代码！',
17+
'login.captcha.fetch.success': '获取验证码成功！',
1718
'login.phoneLogin.getVerificationCode': '获取验证码',
1819
'pages.getCaptchaSecondText': '秒后重新获取',
1920
'login.rememberMe': '自动登录',

‎packages/user-panel/src/login.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: UserPanel.Login 登录面板
3+
group:
4+
path: /
5+
nav:
6+
path: /biz-components
7+
---
8+
9+
# UserPanel.Login 登录面板
10+
11+
[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
12+
13+
用户登录面板
14+
15+
[version-image]: http://img.shields.io/npm/v/@arvinxu/user-panel.svg?color=deepgreen&label=latest
16+
[version-url]: http://npmjs.org/package/@arvinxu/user-panel
17+
[download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
18+
[download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
19+
20+
## 登录面板
21+
22+
<code src='../demos/Login.tsx' />
23+
24+
### 带 Logo
25+
26+
<code src='../demos/LoginWithLogo.tsx' />
27+
28+
### 显示忘记密码
29+
30+
填入 忘记密码所在 url 或者实现方法
31+
32+
<code src='../demos/LoginWithForgotUrl.tsx' />
33+
34+
### 显示底部
35+
36+
如果需要显示微信登录按钮, 需要实现 `onWechatLoginClick` 方法. 否则默认不显示
37+
38+
### 国际化
39+
40+
支持通过 `react-i18next` 模块实现国际化文案
41+
42+
<code src='../demos/LoginI18n.tsx' />
43+
44+
<API src='./UserLogin.tsx'></API>

‎packages/user-panel/src/login/index.tsx

Lines changed: 9 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
1-
import {
2-
LockOutlined,
3-
MailOutlined,
4-
MobileOutlined,
5-
UserOutlined,
6-
} from '@ant-design/icons';
1+
import { LockOutlined, MailOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
72
import { message, Tabs } from 'antd';
83
import React, { useState } from 'react';
9-
import ProForm, {
10-
ProFormCaptcha,
11-
ProFormCheckbox,
12-
ProFormText,
13-
} from '@ant-design/pro-form';
4+
import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
145
import LoginErrorMessage from './LoginErrorMessage';
156

167
import './index.less';
@@ -76,11 +67,7 @@ const Login: React.FC<LoginProps> = (props) => {
7667
setLoading(false);
7768
}}
7869
>
79-
<Tabs
80-
activeKey={type}
81-
type={'card'}
82-
onChange={(e) => setType(e as IUserLogin.LoginType)}
83-
>
70+
<Tabs activeKey={type} type={'card'} onChange={(e) => setType(e as IUserLogin.LoginType)}>
8471
<Tabs.TabPane key="account" tab={f('login.accountLogin.tab')} />
8572
<Tabs.TabPane key="mobile" tab={f('login.phoneLogin.tab')} />
8673
</Tabs>
@@ -94,9 +81,7 @@ const Login: React.FC<LoginProps> = (props) => {
9481
name="userName"
9582
fieldProps={{
9683
size: 'large',
97-
prefix: (
98-
<UserOutlined className="avx-user-panel-login-prefixIcon" />
99-
),
84+
prefix: <UserOutlined className="avx-user-panel-login-prefixIcon" />,
10085
}}
10186
placeholder={f('login.username.placeholder')}
10287
rules={[
@@ -110,9 +95,7 @@ const Login: React.FC<LoginProps> = (props) => {
11095
name="password"
11196
fieldProps={{
11297
size: 'large',
113-
prefix: (
114-
<LockOutlined className="avx-user-panel-login-prefixIcon" />
115-
),
98+
prefix: <LockOutlined className="avx-user-panel-login-prefixIcon" />,
11699
}}
117100
placeholder={f('login.password.placeholder')}
118101
rules={[
@@ -126,16 +109,14 @@ const Login: React.FC<LoginProps> = (props) => {
126109
)}
127110

128111
{status === 'error' && loginType === 'mobile' && !submitting && (
129-
<LoginErrorMessage content="验证码错误" />
112+
<LoginErrorMessage content={f('login.phoneLogin.errorMessage')} />
130113
)}
131114
{type === 'mobile' && (
132115
<>
133116
<ProFormText
134117
fieldProps={{
135118
size: 'large',
136-
prefix: (
137-
<MobileOutlined className="avx-user-panel-login-prefixIcon" />
138-
),
119+
prefix: <MobileOutlined className="avx-user-panel-login-prefixIcon" />,
139120
}}
140121
name="mobile"
141122
placeholder={f('login.phoneNumber.placeholder')}
@@ -153,9 +134,7 @@ const Login: React.FC<LoginProps> = (props) => {
153134
<ProFormCaptcha
154135
fieldProps={{
155136
size: 'large',
156-
prefix: (
157-
<MailOutlined className="avx-user-panel-login-prefixIcon" />
158-
),
137+
prefix: <MailOutlined className="avx-user-panel-login-prefixIcon" />,
159138
}}
160139
captchaProps={{
161140
size: 'large',
@@ -188,7 +167,7 @@ const Login: React.FC<LoginProps> = (props) => {
188167
return;
189168
}
190169

191-
message.success('获取验证码成功！');
170+
message.success(f('login.captcha.fetch.success'));
192171
}}
193172
/>
194173
</>

‎packages/user-panel/src/register.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: UserPanel.Register 注册面板
3+
group:
4+
path: /
5+
nav:
6+
path: /biz-components
7+
---
8+
9+
# UserPanel.Register 注册
10+
11+
[![NPM version][version-image]][version-url] [![NPM downloads][download-image]][download-url]
12+
13+
用户登录注册集成面板
14+
15+
[version-image]: http://img.shields.io/npm/v/@arvinxu/user-panel.svg?color=deepgreen&label=latest
16+
[version-url]: http://npmjs.org/package/@arvinxu/user-panel
17+
[download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
18+
[download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
19+
20+
## 注册面板
21+
22+
TODO

‎packages/user-panel/src/user-panel.md

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,3 @@ nav:
1616
[version-url]: http://npmjs.org/package/@arvinxu/user-panel
1717
[download-image]: https://img.shields.io/npm/dm/@arvinxu/user-panel.svg
1818
[download-url]: https://github.com/arvinxx/components/tree/master/packages/user-panel
19-
20-
## 登录面板
21-
22-
<code src='../demos/Login.tsx' />
23-
24-
### 带 Logo
25-
26-
<code src='../demos/LoginWithLogo.tsx' />
27-
28-
### 显示忘记密码
29-
30-
填入 忘记密码所在 url 或者实现方法
31-
32-
<code src='../demos/LoginWithForgotUrl.tsx' />
33-
34-
### 显示底部
35-
36-
如果需要显示微信登录按钮, 需要实现 `onWechatLoginClick` 方法. 否则默认不显示
37-
38-
<code src='../demos/LoginWithFooter.tsx' />
39-
40-
<API src='./UserLogin.tsx'></API>
41-
42-
## 注册面板
43-
44-
TODO

0 commit comments

Comments
 (0)