Skip to content

Commit 5bf42fa

Browse files
yaob421123yaob421123
committed
doc(Login): 调整文档展示
1 parent 118a7a4 commit 5bf42fa

File tree

9 files changed

+353
-7
lines changed

9 files changed

+353
-7
lines changed

‎examples/website/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@
3333
"@uiw/react-github-corners": "1.5.3",
3434
"@uiw/react-loader": "4.9.7",
3535
"@uiw/react-markdown-preview": "4.1.10",
36+
"react-login-page": "^0.4.4",
37+
"@react-login-page/base": "^0.4.4",
38+
"@react-login-page/page1": "^0.4.4",
39+
"@react-login-page/page2": "^0.4.4",
40+
"@react-login-page/page3": "^0.4.4",
41+
"@react-login-page/page4": "^0.4.4",
42+
"@react-login-page/page5": "^0.4.4",
43+
"@react-login-page/page6": "^0.4.4",
44+
"@react-login-page/page7": "^0.4.4",
3645
"@uiw/reset.css": "1.0.5",
3746
"@wcj/dark-mode": "^1.0.15",
3847
"markdown-react-code-preview-loader": "2.1.5",

‎examples/website/src/components/Layouts/index/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
import { Outlet, KktproPageProps } from '@kkt/pro';
22
import Menu from '../Menu';
33
import Navbar from '../Navbar';
4+
import { createGlobalStyle } from 'styled-components';
45
import { Wrapper, Main, Body } from './style';
56
import '@wcj/dark-mode';
67

8+
export const GlobalStyle = createGlobalStyle`
9+
[data-color-mode*='dark'], [data-color-mode*='dark'] body {
10+
--gradient-from: #1c1e20;
11+
--gradient-to: #0d1117;
12+
--color-rgb: 255 255 255;
13+
}
14+
[data-color-mode*='light'], [data-color-mode*='light'] body {
15+
--gradient-from: #e5eaf0;
16+
--gradient-to: #fff;
17+
--color-rgb: 0 0 0;
18+
}
19+
`;
20+
721
export default function Layout(props: KktproPageProps) {
822
return (
923
<Wrapper className="wmde-markdown-var">
24+
<GlobalStyle />
1025
<Navbar />
1126
<Main>
1227
<Body>

‎examples/website/src/pages/user-login/Example.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import styled, { css } from 'styled-components';
2+
import { Link } from '@kkt/pro';
3+
import UserLogin from '@uiw-admin/user-login';
4+
import * as datas from './Examples';
5+
6+
const Wrapper = styled.div`
7+
display: flex;
8+
justify-content: center;
9+
margin: 0 auto;
10+
flex-wrap: wrap;
11+
gap: 0.953rem;
12+
`;
13+
14+
const Title = styled.div`
15+
width: auto !important;
16+
height: auto !important;
17+
position: absolute;
18+
transform: scale(1) !important;
19+
background-color: rgba(var(--color-rgb) / 39%);
20+
color: var(--color-canvas-default);
21+
border-radius: 5px;
22+
padding: 1px 4px 3px 4px;
23+
top: -25px;
24+
left: 10px;
25+
transition: all 0.3s;
26+
`;
27+
28+
const Inner = styled(Link)<{ magnify?: number }>`
29+
overflow: hidden;
30+
display: block;
31+
position: relative;
32+
width: 326px;
33+
height: 265px;
34+
border-radius: 0.571rem;
35+
text-decoration: none;
36+
box-shadow: 0 0px 3px transparent;
37+
border: 1px solid transparent;
38+
transition: all 0.3s;
39+
&::before {
40+
content: '';
41+
display: block;
42+
position: absolute;
43+
background-color: transparent;
44+
transition: all 0.3s;
45+
z-index: 2;
46+
inset: 0;
47+
}
48+
&:hover {
49+
box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
50+
border-color: rgb(0 0 0 / 11%);
51+
}
52+
&:hover ${Title} {
53+
top: 10px;
54+
}
55+
&:hover::before {
56+
background-color: var(--color-neutral-muted);
57+
}
58+
& > * {
59+
transform-origin: top left;
60+
${({ magnify = 2 }) => css`
61+
transform: scale(${326 / (326 * magnify)});
62+
width: ${326 * magnify}px;
63+
height: ${265 * magnify}px;
64+
`}
65+
}
66+
`;
67+
68+
const defulat = {
69+
magnify: 2.3,
70+
children: <UserLogin api="/api/login" />,
71+
};
72+
73+
export const Example = () => {
74+
return (
75+
<Wrapper>
76+
<Inner
77+
target="_blank"
78+
to={`https://github.com/uiwjs/uiw-admin/blob/master/packages/user-login/README.md`}
79+
magnify={defulat.magnify}
80+
>
81+
{defulat.children}
82+
<Title>defulat</Title>
83+
</Inner>
84+
{Object.keys(datas).map((path, key) => {
85+
const comps = datas[path as keyof typeof datas];
86+
return (
87+
<Inner
88+
target="_blank"
89+
key={key}
90+
to={`https://uiwjs.github.io/react-login-page/#/pages/${path}`}
91+
magnify={comps.magnify}
92+
>
93+
{comps.children}
94+
<Title>{path}</Title>
95+
</Inner>
96+
);
97+
})}
98+
</Wrapper>
99+
);
100+
};

‎examples/website/src/pages/user-login/Examples.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import LoginBase from '@react-login-page/base';
2+
import LoginLogo from 'react-login-page/logo-rect';
3+
import LoginPage1 from '@react-login-page/page1';
4+
import LoginPage2 from '@react-login-page/page2';
5+
// import bannerImage from '@react-login-page/page2/banner-image';
6+
import LoginPage3 from '@react-login-page/page3';
7+
// import bannerImage3 from '@react-login-page/page3/banner-image';
8+
import Login4 from '@react-login-page/page4';
9+
import Login5 from '@react-login-page/page5';
10+
import Login6 from '@react-login-page/page6';
11+
import Login7 from '@react-login-page/page7';
12+
13+
const bannerImage = require('@react-login-page/page2/banner-image');
14+
const bannerImage3 = require('@react-login-page/page3/banner-image');
15+
16+
interface Example {
17+
magnify?: number;
18+
children?: JSX.Element;
19+
}
20+
21+
export const base: Example = {
22+
magnify: 1.3,
23+
children: (
24+
<LoginBase>
25+
<LoginBase.Logo>
26+
<LoginLogo />
27+
</LoginBase.Logo>
28+
</LoginBase>
29+
),
30+
};
31+
32+
export const page1: Example = {
33+
children: (
34+
<LoginPage1>
35+
<LoginPage1.Logo>
36+
<LoginLogo />
37+
</LoginPage1.Logo>
38+
</LoginPage1>
39+
),
40+
};
41+
42+
export const page2: Example = {
43+
magnify: 3.3,
44+
children: (
45+
<LoginPage2>
46+
<LoginPage2.Banner>
47+
<img src={bannerImage} alt="banner" />
48+
</LoginPage2.Banner>
49+
<LoginPage2.Logo>
50+
<LoginLogo />
51+
</LoginPage2.Logo>
52+
</LoginPage2>
53+
),
54+
};
55+
56+
export const page3: Example = {
57+
children: (
58+
<LoginPage3>
59+
<LoginPage3.Banner style={{ backgroundImage: `url(${bannerImage3})` }} />
60+
<LoginPage3.Logo>
61+
<LoginLogo />
62+
</LoginPage3.Logo>
63+
</LoginPage3>
64+
),
65+
};
66+
67+
export const page4: Example = {
68+
magnify: 2.3,
69+
children: (
70+
<Login4>
71+
<Login4.Logo>
72+
<LoginLogo />
73+
</Login4.Logo>
74+
</Login4>
75+
),
76+
};
77+
78+
export const page5: Example = {
79+
magnify: 1.6,
80+
children: (
81+
<Login5>
82+
<Login5.Logo>
83+
<LoginLogo />
84+
</Login5.Logo>
85+
</Login5>
86+
),
87+
};
88+
89+
export const page6: Example = {
90+
magnify: 2.1,
91+
children: (
92+
<Login6>
93+
<Login6.Logo>
94+
<LoginLogo />
95+
</Login6.Logo>
96+
</Login6>
97+
),
98+
};
99+
100+
export const page7: Example = {
101+
magnify: 1.2,
102+
children: (
103+
<Login7>
104+
<Login7.Logo>
105+
<LoginLogo />
106+
</Login7.Logo>
107+
</Login7>
108+
),
109+
};

‎examples/website/src/pages/user-login/index.tsx‎

Lines changed: 95 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,97 @@
1-
import Preview from '../../components/Preview';
1+
import styled from 'styled-components';
2+
import { Link } from '@kkt/pro';
3+
import { ReactComponent as LogoIcon } from './logo-large.svg';
4+
import { Example } from './Example';
25

3-
const Page = () => (
4-
<Preview path={() => import('@uiw-admin/user-login/README.md')} />
5-
);
6+
const Wrapper = styled.div`
7+
width: 100%;
8+
position: relative;
9+
z-index: 9;
10+
padding-bottom: 60px;
11+
`;
612

7-
export default Page;
13+
const Title = styled.h1`
14+
font-size: 1.6rem;
15+
font-weight: 900;
16+
line-height: 2.5rem;
17+
text-align: center;
18+
margin-top: 3rem;
19+
margin-bottom: 0;
20+
`;
21+
const SubTitle = styled.h2`
22+
color: var(--color-fg-subtle);
23+
font-size: 1.5rem;
24+
font-weight: normal;
25+
line-height: 2rem;
26+
text-align: center;
27+
max-width: 36rem;
28+
margin: 0.75rem auto 2rem auto;
29+
`;
30+
31+
const Logo = styled(LogoIcon)`
32+
margin: 60px auto;
33+
display: block;
34+
`;
35+
36+
const Nav = styled.nav`
37+
text-align: center;
38+
margin-bottom: 3rem;
39+
gap: 0.845rem;
40+
display: flex;
41+
justify-content: center;
42+
a {
43+
padding: 0.63rem 1.1rem;
44+
font-weight: 700;
45+
background: var(--color-neutral-muted);
46+
border-radius: 0.3rem;
47+
transition: all 0.3s;
48+
text-decoration: none;
49+
&:hover {
50+
background: var(--color-canvas-subtle);
51+
}
52+
}
53+
`;
54+
55+
const Header = styled.div``;
56+
const VersionInfo = styled.sup`
57+
text-align: center;
58+
color: var(--color-fg-subtle);
59+
position: absolute;
60+
font-size: 12px;
61+
font-weight: normal;
62+
margin-left: 10px;
63+
line-height: 12px;
64+
`;
65+
66+
// const version = VERSION;
67+
68+
const Home = () => {
69+
return (
70+
<Wrapper>
71+
<Header>
72+
<Logo height="4rem" />
73+
</Header>
74+
<Title>
75+
React Login Page
76+
{/* <VersionInfo>v{version}</VersionInfo> */}
77+
</Title>
78+
<SubTitle>
79+
Install and use react login page components quickly and easily, with
80+
flexible APIs for modifying these components.
81+
</SubTitle>
82+
<Nav>
83+
<Link to="/docs">Documentation</Link>
84+
<a
85+
href="https://github.com/uiwjs/react-login-page"
86+
target="_blank"
87+
rel="noreferrer"
88+
>
89+
Github
90+
</a>
91+
</Nav>
92+
<Example />
93+
</Wrapper>
94+
);
95+
};
96+
97+
export default Home;

‎examples/website/src/pages/user-login/index2.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Preview from '../../components/Preview';
2+
3+
const Page = () => (
4+
<Preview
5+
path={() =>
6+
import(
7+
'https://github.com/uiwjs/react-login-page/edit/main/core/README.md'
8+
)
9+
}
10+
/>
11+
);
12+
13+
export default Page;

‎examples/website/src/pages/user-login/logo-large.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎examples/website/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"moduleResolution": "node",
2121
"isolatedModules": true,
2222
"types": ["jest", "node"],
23-
"noEmit": true,
23+
"noEmit": false,
24+
"outDir": "cjs",
2425
"paths": {
2526
"@/*": ["./src/*"],
2627
"@@/*": ["./src/.kktp/*"],

0 commit comments

Comments
 (0)