-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #223 from yaob421123/master
fix: ProForm组件排版及Login组件文档修改
- Loading branch information
Showing
11 changed files
with
369 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import styled, { css } from 'styled-components'; | ||
| import { Link } from '@kkt/pro'; | ||
| import UserLogin from '@uiw-admin/user-login'; | ||
| import * as datas from './Examples'; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 0 auto; | ||
| flex-wrap: wrap; | ||
| gap: 0.953rem; | ||
| `; | ||
|
|
||
| const Title = styled.div` | ||
| width: auto !important; | ||
| height: auto !important; | ||
| position: absolute; | ||
| transform: scale(1) !important; | ||
| background-color: rgba(var(--color-rgb) / 39%); | ||
| color: var(--color-canvas-default); | ||
| border-radius: 5px; | ||
| padding: 1px 4px 3px 4px; | ||
| top: -25px; | ||
| left: 10px; | ||
| transition: all 0.3s; | ||
| `; | ||
|
|
||
| const Inner = styled(Link)<{ magnify?: number }>` | ||
| overflow: hidden; | ||
| display: block; | ||
| position: relative; | ||
| width: 326px; | ||
| height: 265px; | ||
| border-radius: 0.571rem; | ||
| text-decoration: none; | ||
| box-shadow: 0 0px 3px transparent; | ||
| border: 1px solid transparent; | ||
| transition: all 0.3s; | ||
| &::before { | ||
| content: ''; | ||
| display: block; | ||
| position: absolute; | ||
| background-color: transparent; | ||
| transition: all 0.3s; | ||
| z-index: 2; | ||
| inset: 0; | ||
| } | ||
| &:hover { | ||
| box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1); | ||
| border-color: rgb(0 0 0 / 11%); | ||
| } | ||
| &:hover ${Title} { | ||
| top: 10px; | ||
| } | ||
| &:hover::before { | ||
| background-color: var(--color-neutral-muted); | ||
| } | ||
| & > * { | ||
| transform-origin: top left; | ||
| ${({ magnify = 2 }) => css` | ||
| transform: scale(${326 / (326 * magnify)}); | ||
| width: ${326 * magnify}px; | ||
| height: ${265 * magnify}px; | ||
| `} | ||
| } | ||
| `; | ||
|
|
||
| const defulat = { | ||
| magnify: 2.3, | ||
| children: <UserLogin api="/api/login" />, | ||
| }; | ||
|
|
||
| export const Example = () => { | ||
| return ( | ||
| <Wrapper> | ||
| <Inner | ||
| target="_blank" | ||
| to={`https://github.com/uiwjs/uiw-admin/blob/master/packages/user-login/README.md`} | ||
| magnify={defulat.magnify} | ||
| > | ||
| {defulat.children} | ||
| <Title>defulat</Title> | ||
| </Inner> | ||
| {Object.keys(datas).map((path, key) => { | ||
| const comps = datas[path as keyof typeof datas]; | ||
| return ( | ||
| <Inner | ||
| target="_blank" | ||
| key={key} | ||
| to={`https://uiwjs.github.io/react-login-page/#/pages/${path}`} | ||
| magnify={comps.magnify} | ||
| > | ||
| {comps.children} | ||
| <Title>{path}</Title> | ||
| </Inner> | ||
| ); | ||
| })} | ||
| </Wrapper> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import LoginBase from '@react-login-page/base'; | ||
| import LoginLogo from 'react-login-page/logo-rect'; | ||
| import LoginPage1 from '@react-login-page/page1'; | ||
| import LoginPage2 from '@react-login-page/page2'; | ||
| // import bannerImage from '@react-login-page/page2/banner-image'; | ||
| import LoginPage3 from '@react-login-page/page3'; | ||
| // import bannerImage3 from '@react-login-page/page3/banner-image'; | ||
| import Login4 from '@react-login-page/page4'; | ||
| import Login5 from '@react-login-page/page5'; | ||
| import Login6 from '@react-login-page/page6'; | ||
| import Login7 from '@react-login-page/page7'; | ||
|
|
||
| const bannerImage = require('@react-login-page/page2/banner-image'); | ||
| const bannerImage3 = require('@react-login-page/page3/banner-image'); | ||
|
|
||
| interface Example { | ||
| magnify?: number; | ||
| children?: JSX.Element; | ||
| } | ||
|
|
||
| export const base: Example = { | ||
| magnify: 1.3, | ||
| children: ( | ||
| <LoginBase> | ||
| <LoginBase.Logo> | ||
| <LoginLogo /> | ||
| </LoginBase.Logo> | ||
| </LoginBase> | ||
| ), | ||
| }; | ||
|
|
||
| export const page1: Example = { | ||
| children: ( | ||
| <LoginPage1> | ||
| <LoginPage1.Logo> | ||
| <LoginLogo /> | ||
| </LoginPage1.Logo> | ||
| </LoginPage1> | ||
| ), | ||
| }; | ||
|
|
||
| export const page2: Example = { | ||
| magnify: 3.3, | ||
| children: ( | ||
| <LoginPage2> | ||
| <LoginPage2.Banner> | ||
| <img src={bannerImage} alt="banner" /> | ||
| </LoginPage2.Banner> | ||
| <LoginPage2.Logo> | ||
| <LoginLogo /> | ||
| </LoginPage2.Logo> | ||
| </LoginPage2> | ||
| ), | ||
| }; | ||
|
|
||
| export const page3: Example = { | ||
| children: ( | ||
| <LoginPage3> | ||
| <LoginPage3.Banner style={{ backgroundImage: `url(${bannerImage3})` }} /> | ||
| <LoginPage3.Logo> | ||
| <LoginLogo /> | ||
| </LoginPage3.Logo> | ||
| </LoginPage3> | ||
| ), | ||
| }; | ||
|
|
||
| export const page4: Example = { | ||
| magnify: 2.3, | ||
| children: ( | ||
| <Login4> | ||
| <Login4.Logo> | ||
| <LoginLogo /> | ||
| </Login4.Logo> | ||
| </Login4> | ||
| ), | ||
| }; | ||
|
|
||
| export const page5: Example = { | ||
| magnify: 1.6, | ||
| children: ( | ||
| <Login5> | ||
| <Login5.Logo> | ||
| <LoginLogo /> | ||
| </Login5.Logo> | ||
| </Login5> | ||
| ), | ||
| }; | ||
|
|
||
| export const page6: Example = { | ||
| magnify: 2.1, | ||
| children: ( | ||
| <Login6> | ||
| <Login6.Logo> | ||
| <LoginLogo /> | ||
| </Login6.Logo> | ||
| </Login6> | ||
| ), | ||
| }; | ||
|
|
||
| export const page7: Example = { | ||
| magnify: 1.2, | ||
| children: ( | ||
| <Login7> | ||
| <Login7.Logo> | ||
| <LoginLogo /> | ||
| </Login7.Logo> | ||
| </Login7> | ||
| ), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,97 @@ | ||
| import Preview from '../../components/Preview'; | ||
| import styled from 'styled-components'; | ||
| import { Link } from '@kkt/pro'; | ||
| import { ReactComponent as LogoIcon } from './logo-large.svg'; | ||
| import { Example } from './Example'; | ||
|
|
||
| const Page = () => ( | ||
| <Preview path={() => import('@uiw-admin/user-login/README.md')} /> | ||
| ); | ||
| const Wrapper = styled.div` | ||
| width: 100%; | ||
| position: relative; | ||
| z-index: 9; | ||
| padding-bottom: 60px; | ||
| `; | ||
|
|
||
| export default Page; | ||
| const Title = styled.h1` | ||
| font-size: 1.6rem; | ||
| font-weight: 900; | ||
| line-height: 2.5rem; | ||
| text-align: center; | ||
| margin-top: 3rem; | ||
| margin-bottom: 0; | ||
| `; | ||
| const SubTitle = styled.h2` | ||
| color: var(--color-fg-subtle); | ||
| font-size: 1.5rem; | ||
| font-weight: normal; | ||
| line-height: 2rem; | ||
| text-align: center; | ||
| max-width: 36rem; | ||
| margin: 0.75rem auto 2rem auto; | ||
| `; | ||
|
|
||
| const Logo = styled(LogoIcon)` | ||
| margin: 60px auto; | ||
| display: block; | ||
| `; | ||
|
|
||
| const Nav = styled.nav` | ||
| text-align: center; | ||
| margin-bottom: 3rem; | ||
| gap: 0.845rem; | ||
| display: flex; | ||
| justify-content: center; | ||
| a { | ||
| padding: 0.63rem 1.1rem; | ||
| font-weight: 700; | ||
| background: var(--color-neutral-muted); | ||
| border-radius: 0.3rem; | ||
| transition: all 0.3s; | ||
| text-decoration: none; | ||
| &:hover { | ||
| background: var(--color-canvas-subtle); | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const Header = styled.div``; | ||
| const VersionInfo = styled.sup` | ||
| text-align: center; | ||
| color: var(--color-fg-subtle); | ||
| position: absolute; | ||
| font-size: 12px; | ||
| font-weight: normal; | ||
| margin-left: 10px; | ||
| line-height: 12px; | ||
| `; | ||
|
|
||
| // const version = VERSION; | ||
|
|
||
| const Home = () => { | ||
| return ( | ||
| <Wrapper> | ||
| <Header> | ||
| <Logo height="4rem" /> | ||
| </Header> | ||
| <Title> | ||
| React Login Page | ||
| {/* <VersionInfo>v{version}</VersionInfo> */} | ||
| </Title> | ||
| <SubTitle> | ||
| Install and use react login page components quickly and easily, with | ||
| flexible APIs for modifying these components. | ||
| </SubTitle> | ||
| <Nav> | ||
| <Link to="/docs">Documentation</Link> | ||
| <a | ||
| href="https://github.com/uiwjs/react-login-page" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| > | ||
| Github | ||
| </a> | ||
| </Nav> | ||
| <Example /> | ||
| </Wrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import Preview from '../../components/Preview'; | ||
|
|
||
| const Page = () => ( | ||
| <Preview | ||
| path={() => | ||
| import( | ||
| 'https://github.com/uiwjs/react-login-page/edit/main/core/README.md' | ||
| ) | ||
| } | ||
| /> | ||
| ); | ||
|
|
||
| export default Page; |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.