From a0000d737118c76239bf77167283df7cd524e964 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Mon, 5 Apr 2021 16:54:22 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20adding=20login=20page.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/GlobalFooter/index.d.ts | 14 ------- src/components/GlobalFooter/index.js | 28 ------------- src/components/GlobalFooter/index.less | 2 +- src/components/GlobalFooter/index.md | 15 ------- src/components/GlobalFooter/index.tsx | 39 ++++++++++++++++++ src/components/Layout/Bread.js | 12 +----- src/components/Layout/Menu.js | 28 +++++-------- src/components/index.js | 13 +----- src/configs/default/index.ts | 6 +-- src/configs/languages/index.ts | 20 ++++++--- src/locales/pt-br/messages.po | 20 +++++++++ src/pages/index.tsx | 5 +++ src/pages/login/index.less | 30 +++++++------- src/pages/login/index.tsx | 56 +++++++++++++++++++++----- src/typings/common.ts | 6 +++ 16 files changed, 163 insertions(+), 133 deletions(-) delete mode 100644 src/components/GlobalFooter/index.d.ts delete mode 100644 src/components/GlobalFooter/index.js delete mode 100644 src/components/GlobalFooter/index.md create mode 100644 src/components/GlobalFooter/index.tsx create mode 100644 src/locales/pt-br/messages.po create mode 100644 src/pages/index.tsx diff --git a/package.json b/package.json index 6e38ea2..3e625d3 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-react": "^7.23.1", "eslint-plugin-react-hooks": "^4.2.0", - "husky": "^4.2.0", + "husky": "^6.0.0", "less-vars-to-js": "^1.3.0", "lint-staged": "^10.0.0", "mockjs": "^1.1.0", diff --git a/src/components/GlobalFooter/index.d.ts b/src/components/GlobalFooter/index.d.ts deleted file mode 100644 index efde77d..0000000 --- a/src/components/GlobalFooter/index.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -export interface GlobalFooterProps { - links?: Array<{ - key?: string; - title: React.ReactNode; - href: string; - blankTarget?: boolean; - }>; - copyright?: React.ReactNode; - style?: React.CSSProperties; - className?: string; -} - -export default class GlobalFooter extends React.Component {} diff --git a/src/components/GlobalFooter/index.js b/src/components/GlobalFooter/index.js deleted file mode 100644 index 1c2fb74..0000000 --- a/src/components/GlobalFooter/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import styles from './index.less'; - -const GlobalFooter = ({ className, links, copyright }) => { - const clsString = classNames(styles.globalFooter, className); - return ( -
- {links && ( -
- {links.map(link => ( - - {link.title} - - ))} -
- )} - {copyright &&
{copyright}
} -
- ); -}; - -export default GlobalFooter; diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less index e4b3dfd..ab25414 100644 --- a/src/components/GlobalFooter/index.less +++ b/src/components/GlobalFooter/index.less @@ -13,7 +13,7 @@ transition: all 0.3s; &:not(:last-child) { - margin-right: 40px; + margin-right: 16px; } &:hover { diff --git a/src/components/GlobalFooter/index.md b/src/components/GlobalFooter/index.md deleted file mode 100644 index 5d6058f..0000000 --- a/src/components/GlobalFooter/index.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: GlobalFooter -subtitle: 全局页脚 -cols: 1 -order: 7 ---- - -页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。 - -## API - -| 参数 | 说明 | 类型 | 默认值 | -| --------- | -------- | ---------------------------------------------------------------- | ------ | -| links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | - | -| copyright | 版权信息 | ReactNode | - | diff --git a/src/components/GlobalFooter/index.tsx b/src/components/GlobalFooter/index.tsx new file mode 100644 index 0000000..9814372 --- /dev/null +++ b/src/components/GlobalFooter/index.tsx @@ -0,0 +1,39 @@ +import React from 'react' +import styles from './index.less' + +interface LinkItem { + key: string + title: React.ReactNode + href?: string + blankTarget?: boolean +} + +interface GlobalFooterProps { + links?: LinkItem[] + copyright?: React.ReactNode +} + +const GlobalFooter: React.FC = ({ + links = [], + copyright, +}) => { + return ( + + ) +} + +export default GlobalFooter diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index f6b58b3..a31e94e 100644 --- a/src/components/Layout/Bread.js +++ b/src/components/Layout/Bread.js @@ -1,20 +1,12 @@ import React, { PureComponent, Fragment } from 'react' import PropTypes from 'prop-types' -<<<<<<< HEAD -import { Breadcrumb, Icon } from 'antd' -import { Link } from 'umi' -import withRouter from 'umi/withRouter' -import { withI18n } from '@lingui/react' -import { pathMatchRegexp, queryAncestors } from 'utils' -======= import { Breadcrumb } from 'antd' import { Link, withRouter } from 'umi' -import { t } from "@lingui/macro" +import { t } from '@lingui/macro' import iconMap from 'utils/iconMap' -const { pathToRegexp } = require('path-to-regexp') import { queryAncestors } from 'utils' ->>>>>>> master import styles from './Bread.less' +const { pathToRegexp } = require('path-to-regexp') @withRouter class Bread extends PureComponent { diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index d91df35..20f0577 100644 --- a/src/components/Layout/Menu.js +++ b/src/components/Layout/Menu.js @@ -1,22 +1,10 @@ import React, { PureComponent, Fragment } from 'react' import PropTypes from 'prop-types' -<<<<<<< HEAD -import { Menu, Icon } from 'antd' -import { Link, Navlink } from 'umi' -import withRouter from 'umi/withRouter' -import { - arrayToTree, - queryAncestors, - pathMatchRegexp, - addLangPrefix, -} from 'utils' -======= import { Menu } from 'antd' import { NavLink, withRouter } from 'umi' import { pathToRegexp } from 'path-to-regexp' import { arrayToTree, queryAncestors } from 'utils' import iconMap from 'utils/iconMap' ->>>>>>> master import store from 'store' const { SubMenu } = Menu @@ -27,12 +15,14 @@ class SiderMenu extends PureComponent { openKeys: store.get('openKeys') || [], } - onOpenChange = openKeys => { + onOpenChange = (openKeys) => { const { menus } = this.props - const rootSubmenuKeys = menus.filter(_ => !_.menuParentId).map(_ => _.id) + const rootSubmenuKeys = menus + .filter((_) => !_.menuParentId) + .map((_) => _.id) const latestOpenKey = openKeys.find( - key => this.state.openKeys.indexOf(key) === -1 + (key) => this.state.openKeys.indexOf(key) === -1 ) let newOpenKeys = openKeys @@ -46,8 +36,8 @@ class SiderMenu extends PureComponent { store.set('openKeys', newOpenKeys) } - generateMenus = data => { - return data.map(item => { + generateMenus = (data) => { + return data.map((item) => { if (item.children) { return ( _.route && pathToRegexp(_.route).exec(location.pathname) + (_) => _.route && pathToRegexp(_.route).exec(location.pathname) ) // Find the key that should be selected according to the current menu. const selectedKeys = currentMenu - ? queryAncestors(menus, currentMenu, 'menuParentId').map(_ => _.id) + ? queryAncestors(menus, currentMenu, 'menuParentId').map((_) => _.id) : [] const menuProps = collapsed diff --git a/src/components/index.js b/src/components/index.js index 773acc5..2c96be7 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,16 +4,5 @@ import Loader from './Loader' import ScrollBar from './ScrollBar' import GlobalFooter from './GlobalFooter' import Ellipsis from './Ellipsis' -import * as MyLayout from './Layout/index.js' -import Page from './Page' -export { - MyLayout, - GlobalFooter, - Ellipsis, - FilterItem, - DropOption, - Loader, - Page, - ScrollBar, -} +export { GlobalFooter, Ellipsis, FilterItem, DropOption, Loader, ScrollBar } diff --git a/src/configs/default/index.ts b/src/configs/default/index.ts index fdfaa1f..9da4115 100644 --- a/src/configs/default/index.ts +++ b/src/configs/default/index.ts @@ -12,13 +12,13 @@ const language = detect( checkLanguage(fromUrl('lang')), checkLanguage(fromStorage(LOCALE_LANGUAGE)), checkLanguage(fromNavigator()), - 'zh' + 'en' ) export const config: IConfig = { - title: 'React Seed', + title: 'Antd Admin', logo: 'logo.svg', - copyright: 'Ant Design Admin © 2018 zuiidea', + copyright: 'Ant Design Admin © 2021 zuiidea', language: language as ISupportedLocales, /* Layout configuration, specify which layout to use for route. */ diff --git a/src/configs/languages/index.ts b/src/configs/languages/index.ts index 553f30f..387f2d6 100644 --- a/src/configs/languages/index.ts +++ b/src/configs/languages/index.ts @@ -1,5 +1,8 @@ -import { ILanguage, IAntdI18nMap } from '@/typings' +import { ILanguage, ILanguages, IAntdI18nMap } from '@/typings' +/** + * Countrys flags: https://www.flaticon.com/packs/countrys-flags + */ export const language: ILanguage = { en: { flag: '/america.svg', @@ -9,14 +12,21 @@ export const language: ILanguage = { flag: '/china.svg', value: '简体中文', }, + 'pt-br': { + flag: '/portugal.svg', + value: 'Português', + }, } -export const languages = Object.entries(language).map(([key, value]: any) => ({ - key, - ...value, -})) +export const languages: ILanguages[] = Object.entries(language).map( + ([key, value]: any) => ({ + key, + ...value, + }) +) export const antdI18nMap: IAntdI18nMap = { zh: 'zh_CN', en: 'en_US', + 'pt-br': 'pt_PT', } diff --git a/src/locales/pt-br/messages.po b/src/locales/pt-br/messages.po new file mode 100644 index 0000000..0c4f9e4 --- /dev/null +++ b/src/locales/pt-br/messages.po @@ -0,0 +1,20 @@ +msgid "" +msgstr "" +"POT-Creation-Date: 2021-04-05 15:59+0800\n" +"Mime-Version: 1.0\n" +"Content-Type: text/plain; charset=utf-8\n" +"Content-Transfer-Encoding: 8bit\n" +"X-Generator: @lingui/cli\n" +"Language: pt-br\n" + +#: src/pages/login/index.tsx:14 +msgid "Sign in" +msgstr "" + +#: src/pages/login/index.tsx:18 +msgid "Username" +msgstr "" + +#: src/pages/login/index.tsx:22 +msgid "Password" +msgstr "" diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..9e87034 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,5 @@ +import { Redirect } from 'umi' + +const Index = () => + +export default Index diff --git a/src/pages/login/index.less b/src/pages/login/index.less index 5fffb58..52a049f 100644 --- a/src/pages/login/index.less +++ b/src/pages/login/index.less @@ -4,9 +4,9 @@ position: absolute; top: 45%; left: 50%; + margin: -160px 0 0 -160px; width: 320px; height: 320px; - margin: -160px 0 0 -160px; padding: 36px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.08); @@ -15,22 +15,22 @@ } p { + color: rgb(204, 204, 204); + text-align: center; + margin-top: 16px; + font-size: 12px; display: flex; justify-content: space-between; - margin-top: 16px; - color: rgb(204, 204, 204); - font-size: 12px; - text-align: center; } } .logo { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 24px; text-align: center; cursor: pointer; + margin-bottom: 24px; + display: flex; + justify-content: center; + align-items: center; img { width: 40px; @@ -38,13 +38,13 @@ } span { - display: inline-block; - color: @primary-color; - font-weight: 700; + vertical-align: text-bottom; font-size: 16px; text-transform: uppercase; - vertical-align: text-bottom; - @text-gradient .text-gradient(); + display: inline-block; + font-weight: 700; + color: @primary-color; + .text-gradient(); } } @@ -55,6 +55,6 @@ .footer { position: absolute; - bottom: 0; width: 100%; + bottom: 0; } diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 408fb48..911db7b 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -1,26 +1,59 @@ import React from 'react' -import { Button, Row } from 'antd' -import { Trans } from '@lingui/macro' -import { config } from '@/configs' +import { Button, Row, Input, Form } from 'antd' +import { GithubOutlined } from '@ant-design/icons' +import { GlobalFooter } from '@/components' +import { Trans, t } from '@lingui/macro' +import { config, languages } from '@/configs' import styles from './index.less' +const FormItem = Form.Item + const Login: React.FC = () => { + const footerLinks = [ + { + key: 'github', + title: , + href: 'https://github.com/zuiidea/antd-admin', + blankTarget: true, + }, + ...languages.map((item) => ({ + key: item.key, + title: {item.value}, + })), + ] + + const handleFinish = (values) => { + console.log(values) + } + return ( <>
logo {config.title} +
+
+ + + + + + -

- + Username ：guest @@ -30,7 +63,10 @@ const Login: React.FC = () => {

-
+ + +
+
) diff --git a/src/typings/common.ts b/src/typings/common.ts index 23fe7d9..1eeb330 100644 --- a/src/typings/common.ts +++ b/src/typings/common.ts @@ -14,6 +14,12 @@ export interface ILanguage { [key: string]: ILanguageItem } +export interface ILanguages { + key: string + flag: string + value: string +} + export interface IAntdI18nMap { [key: string]: string }