Skip to content

Commit 36002a2

Browse files
yaob421123yaob421123
committed
feat(doc): 新增文档首页
1 parent 632ee56 commit 36002a2

File tree

8 files changed

+175
-10
lines changed

8 files changed

+175
-10
lines changed

‎examples/website/config/routes.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ const routeList = [
1111
children: [
1212
{
1313
index: true,
14-
redirect: '/docs/quick-start',
14+
redirect: '/home',
1515
},
16+
{ path: '/home', element: '@/pages/home' },
1617
{
1718
path: '/docs',
1819
children: [

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const Navbar: FC<PropsWithRef<NavbarProps>> = (props) => {
3131
</Logo>
3232
</Left>
3333
<Right>
34+
<LinkMenu to="/home">首页</LinkMenu>
3435
<AMenu
3536
href="https://stackblitz.com/github/uiwjs/uiw-admin/tree/master/examples/base?embed=1&hideNavigation=0&hidedevtools=0"
3637
target="__blank"

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Outlet, KktproPageProps } from '@kkt/pro';
1+
import { Outlet, KktproPageProps, useLocation } from '@kkt/pro';
22
import Menu from '../Menu';
33
import Navbar from '../Navbar';
44
import { createGlobalStyle } from 'styled-components';
5-
import { Wrapper, Main, Body } from './style';
5+
import { Wrapper, Main, Body, OutletWrap } from './style';
66
import '@wcj/dark-mode';
77

88
export const GlobalStyle = createGlobalStyle`
@@ -19,16 +19,19 @@ export const GlobalStyle = createGlobalStyle`
1919
`;
2020

2121
export default function Layout(props: KktproPageProps) {
22+
const { pathname } = useLocation();
23+
const isHome: boolean = pathname === '/home';
24+
2225
return (
2326
<Wrapper className="wmde-markdown-var">
2427
<GlobalStyle />
2528
<Navbar />
2629
<Main>
27-
<Body>
28-
<Menu />
29-
<div style={{ paddingLeft: 240, paddingTop: 58, height: '100%' }}>
30+
<Body isHome={isHome}>
31+
{!isHome && <Menu />}
32+
<OutletWrap isHome={isHome}>
3033
<Outlet />
31-
</div>
34+
</OutletWrap>
3235
</Body>
3336
</Main>
3437
</Wrapper>

‎examples/website/src/components/Layouts/index/style.ts‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from 'styled-components';
1+
import styled, { css } from 'styled-components';
22

33
export const Wrapper = styled.div`
44
width: 100%;
@@ -13,11 +13,33 @@ export const Main = styled.main`
1313
scroll-behavior: smooth;
1414
`;
1515

16-
export const Body = styled.div`
16+
export const Body = styled.div<{ isHome?: boolean }>`
1717
max-width: 1400px;
1818
margin: 0 auto;
1919
height: 100%;
2020
width: 100%;
2121
position: relative;
2222
z-index: 1;
23+
${({ isHome }) => {
24+
return (
25+
isHome &&
26+
css`
27+
max-width: 100%;
28+
`
29+
);
30+
}}
31+
`;
32+
33+
export const OutletWrap = styled.div<{ isHome?: boolean }>`
34+
padding-top: 58px;
35+
height: 100%;
36+
padding-left: 240px;
37+
${({ isHome }) => {
38+
return (
39+
isHome &&
40+
css`
41+
padding-left: 0;
42+
`
43+
);
44+
}}
2345
`;

‎examples/website/src/global.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,15 @@ html, main {
2525
--color-header-bg: 255 255 255;
2626
--color-border-muted: #e5e5e5;
2727
--color1: #f2f2f2;
28+
--color2: #1677ff;
2829
}
2930

3031
[data-color-mode*='dark'] {
3132
--font-color: #fff;
3233
--color-header-bg: 13 17 22;
3334
--color-border-muted: #373737;
3435
--color1: #282828;
36+
--color2: #0053c8;
3537
}
3638

3739
.menu-toc .menu-marker {

‎examples/website/src/menus.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export const menusComponentsConfig: MenusConfigObject[] = [
110110
// "path": "/components/router-control"
111111
// },
112112
{
113-
title: 'UserLogin 登录',
113+
title: 'LoginPage 登录',
114114
path: '/components/user-login',
115115
},
116116
{

‎examples/website/src/pages/home/index.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Wrap, Hero, BtnGroup, LinkMenu, LinkA, Footer } from './style';
2+
3+
const Page = () => {
4+
return (
5+
<Wrap>
6+
<Hero>
7+
<h1>UIW ADMNIN</h1>
8+
<p>
9+
一个基于{' '}
10+
<a href="https://github.com/uiwjs/uiw/" target="_blank">
11+
uiw
12+
</a>{' '}
13+
和{' '}
14+
<a href="https://github.com/kktjs/kkt-pro" target="_blank">
15+
@kkt/pro
16+
</a>{' '}
17+
的初始级别项目
18+
</p>
19+
<BtnGroup>
20+
<LinkMenu to="/docs/quick-start">立即上手</LinkMenu>
21+
<LinkA href="https://github.com/uiwjs/uiw-admin" target="_blank">
22+
GitHub
23+
</LinkA>
24+
</BtnGroup>
25+
</Hero>
26+
<Footer>
27+
<h3>贡献者</h3>
28+
<p>感谢所有的贡献者，欢迎开发者为开源项目贡献力量。</p>
29+
<a
30+
href="https://github.com/uiwjs/uiw-admin/graphs/contributors"
31+
target="_blank"
32+
>
33+
<img
34+
src="https://uiwjs.github.io/uiw-admin/CONTRIBUTORS.svg"
35+
alt=""
36+
/>
37+
</a>
38+
<div style={{ height: 50 }} />
39+
<h3>License</h3>
40+
<p>Licensed under the MIT License.</p>
41+
</Footer>
42+
</Wrap>
43+
);
44+
};
45+
export default Page;

‎examples/website/src/pages/home/style.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import styled, { css } from 'styled-components';
2+
import { NavLink } from '@kkt/pro';
3+
4+
export const Wrap = styled.div`
5+
padding: 100px 0 50px;
6+
`;
7+
8+
export const Hero = styled.div`
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
margin-bottom: 100px;
13+
h1 {
14+
font-size: 100px;
15+
text-shadow: 0 10px 20px rgba(22, 119, 255, 0.15);
16+
background: linear-gradient(30deg, #90d5ff 30%, #65a5ff);
17+
-webkit-background-clip: text;
18+
background-clip: text;
19+
font-family: Alibaba-PuHuiTi, Gill Sans, Gill Sans MT, Calibri, Trebuchet MS,
20+
sans-serif;
21+
color: #83cdf8;
22+
}
23+
p {
24+
font-size: 20px;
25+
line-height: 1;
26+
margin: 30px 0;
27+
a {
28+
color: var(--color2);
29+
text-decoration: none;
30+
&:hover {
31+
text-decoration: underline;
32+
}
33+
}
34+
}
35+
`;
36+
export const BtnGroup = styled.div`
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
margin-top: 50px;
41+
`;
42+
43+
const defaultBtn = (active?: boolean) => {
44+
const background = active ? `var(--color2)` : 'transparent';
45+
const color = active ? '#fff' : 'var(--color2)';
46+
return css`
47+
text-decoration: none;
48+
font-size: 18px;
49+
color: var(--color-fg-default);
50+
padding: 2px 15px;
51+
border-radius: 3px;
52+
height: 50px;
53+
width: 150px;
54+
border-radius: 25px;
55+
background-color: ${background};
56+
border: 1px solid var(--color2);
57+
color: ${color};
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
opacity: 0.8;
62+
margin: 0 20px;
63+
&:hover {
64+
opacity: 1;
65+
}
66+
`;
67+
};
68+
69+
export const LinkMenu = styled(NavLink)`
70+
${() => defaultBtn(true)}
71+
`;
72+
73+
export const LinkA = styled.a`
74+
${() => defaultBtn()}
75+
`;
76+
77+
export const Footer = styled.div`
78+
max-width: 1200px;
79+
margin: 0 auto;
80+
margin-top: 50px;
81+
text-align: center;
82+
border-top: 1px solid var(--color-border-muted);
83+
padding-top: 50px;
84+
h3 {
85+
font-size: 30px;
86+
margin: 0;
87+
}
88+
p {
89+
margin: 15px;
90+
}
91+
`;

0 commit comments

Comments
 (0)