From ce4cadafa3e8a07784745c9eb57c5170e369a3d2 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Mon, 28 Mar 2022 22:26:12 +0800 Subject: [PATCH] =?UTF-8?q?:globe=5Fwith=5Fmeridians:=20style:=20=E8=A1=A5?= =?UTF-8?q?=E9=BD=90=20user-panel=20=E7=9A=84=E5=9B=BD=E9=99=85=E5=8C=96?= =?UTF-8?q?=E6=96=87=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/menu.ts | 10 +++- packages/user-panel/demos/LoginI18n.tsx | 51 +++++++++++++++++++ .../src/components/Footer/index.tsx | 10 +--- .../src/components/Footer/style.less | 7 ++- .../user-panel/src/locales/en-US/login.ts | 7 +++ .../user-panel/src/locales/zh-CN/login.ts | 1 + packages/user-panel/src/login.md | 44 ++++++++++++++++ packages/user-panel/src/login/index.tsx | 39 ++++---------- packages/user-panel/src/register.md | 22 ++++++++ packages/user-panel/src/user-panel.md | 26 ---------- 10 files changed, 150 insertions(+), 67 deletions(-) create mode 100644 packages/user-panel/demos/LoginI18n.tsx create mode 100644 packages/user-panel/src/login.md create mode 100644 packages/user-panel/src/register.md diff --git a/config/menu.ts b/config/menu.ts index 69a97746..52701a7d 100644 --- 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 new file mode 100644 index 00000000..f687b90d --- /dev/null +++ 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 ( +
+ + + { + setLocale(checked ? 'en-US' : 'zh-CN'); + }} + /> + + {}} + onCaptchaClick={async () => { + return true; + }} + /> + +
+ ); +}; + +export default LoginWithLogo; diff --git a/packages/user-panel/src/components/Footer/index.tsx b/packages/user-panel/src/components/Footer/index.tsx index 2b1922dd..19ece14f 100644 --- 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 = ({ - type, - onWechatLoginClick, - onRegisterClick, -}) => { +export const Footer: FC = ({ type, onWechatLoginClick, onRegisterClick }) => { const f = useFormatMessage(); const history = useHistory(); @@ -58,9 +54,7 @@ export const Footer: FC = ({ {onWechatLoginClick ? : null}
- - {f(type === 'login' ? 'login.no-account' : 'register.have-account')} - + {f(type === 'login' ? 'login.no-account' : 'register.have-account')}
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 index a55a2ced..5bce2596 100644 --- 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 index 955b8590..f617db3e 100644 --- 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 index 6a7ef3b5..60cacc6c 100644 --- 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 new file mode 100644 index 00000000..e6173126 --- /dev/null +++ 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 + +## 登录面板 + + + +### 带 Logo + + + +### 显示忘记密码 + +填入 忘记密码所在 url 或者实现方法 + + + +### 显示底部 + +如果需要显示微信登录按钮, 需要实现 `onWechatLoginClick` 方法. 否则默认不显示 + +### 国际化 + +支持通过 `react-i18next` 模块实现国际化文案 + + + + diff --git a/packages/user-panel/src/login/index.tsx b/packages/user-panel/src/login/index.tsx index 6ec5dbe1..ee98d993 100644 --- 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 = (props) => { setLoading(false); }} > - setType(e as IUserLogin.LoginType)} - > + setType(e as IUserLogin.LoginType)}> @@ -94,9 +81,7 @@ const Login: React.FC = (props) => { name="userName" fieldProps={{ size: 'large', - prefix: ( - - ), + prefix: , }} placeholder={f('login.username.placeholder')} rules={[ @@ -110,9 +95,7 @@ const Login: React.FC = (props) => { name="password" fieldProps={{ size: 'large', - prefix: ( - - ), + prefix: , }} placeholder={f('login.password.placeholder')} rules={[ @@ -126,16 +109,14 @@ const Login: React.FC = (props) => { )} {status === 'error' && loginType === 'mobile' && !submitting && ( - + )} {type === 'mobile' && ( <> - ), + prefix: , }} name="mobile" placeholder={f('login.phoneNumber.placeholder')} @@ -153,9 +134,7 @@ const Login: React.FC = (props) => { - ), + prefix: , }} captchaProps={{ size: 'large', @@ -188,7 +167,7 @@ const Login: React.FC = (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 new file mode 100644 index 00000000..cd6af184 --- /dev/null +++ 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 index 6affdde9..f3d86ae7 100644 --- 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 - -## 登录面板 - - - -### 带 Logo - - - -### 显示忘记密码 - -填入 忘记密码所在 url 或者实现方法 - - - -### 显示底部 - -如果需要显示微信登录按钮, 需要实现 `onWechatLoginClick` 方法. 否则默认不显示 - - - - - -## 注册面板 - -TODO