Skip to content

Commit

Permalink
Merge pull request #225 from yaob421123/master
Browse files Browse the repository at this point in the history
feat(doc): 新增文档首页
  • Loading branch information
ChenlingasMx committed Apr 28, 2023
2 parents 07ca6d5 + 36002a2 commit f4abb97
Show file tree
Hide file tree
Showing 8 changed files with 175 additions and 10 deletions.
3 changes: 2 additions & 1 deletion examples/website/config/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@ const routeList = [
children: [
{
index: true,
redirect: '/docs/quick-start',
redirect: '/home',
},
{ path: '/home', element: '@/pages/home' },
{
path: '/docs',
children: [
Expand Down
1 change: 1 addition & 0 deletions examples/website/src/components/Layouts/Navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const Navbar: FC<PropsWithRef<NavbarProps>> = (props) => {
</Logo>
</Left>
<Right>
<LinkMenu to="/home">首页</LinkMenu>
<AMenu
href="https://stackblitz.com/github/uiwjs/uiw-admin/tree/master/examples/base?embed=1&hideNavigation=0&hidedevtools=0"
target="__blank"
Expand Down
15 changes: 9 additions & 6 deletions examples/website/src/components/Layouts/index/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Outlet, KktproPageProps } from '@kkt/pro';
import { Outlet, KktproPageProps, useLocation } from '@kkt/pro';
import Menu from '../Menu';
import Navbar from '../Navbar';
import { createGlobalStyle } from 'styled-components';
import { Wrapper, Main, Body } from './style';
import { Wrapper, Main, Body, OutletWrap } from './style';
import '@wcj/dark-mode';

export const GlobalStyle = createGlobalStyle`
Expand All @@ -19,16 +19,19 @@ export const GlobalStyle = createGlobalStyle`
`;

export default function Layout(props: KktproPageProps) {
const { pathname } = useLocation();
const isHome: boolean = pathname === '/home';

return (
<Wrapper className="wmde-markdown-var">
<GlobalStyle />
<Navbar />
<Main>
<Body>
<Menu />
<div style={{ paddingLeft: 240, paddingTop: 58, height: '100%' }}>
<Body isHome={isHome}>
{!isHome && <Menu />}
<OutletWrap isHome={isHome}>
<Outlet />
</div>
</OutletWrap>
</Body>
</Main>
</Wrapper>
Expand Down
26 changes: 24 additions & 2 deletions examples/website/src/components/Layouts/index/style.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';

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

export const Body = styled.div`
export const Body = styled.div<{ isHome?: boolean }>`
max-width: 1400px;
margin: 0 auto;
height: 100%;
width: 100%;
position: relative;
z-index: 1;
${({ isHome }) => {
return (
isHome &&
css`
max-width: 100%;
`
);
}}
`;

export const OutletWrap = styled.div<{ isHome?: boolean }>`
padding-top: 58px;
height: 100%;
padding-left: 240px;
${({ isHome }) => {
return (
isHome &&
css`
padding-left: 0;
`
);
}}
`;
2 changes: 2 additions & 0 deletions examples/website/src/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,15 @@ html, main {
--color-header-bg: 255 255 255;
--color-border-muted: #e5e5e5;
--color1: #f2f2f2;
--color2: #1677ff;
}

[data-color-mode*='dark'] {
--font-color: #fff;
--color-header-bg: 13 17 22;
--color-border-muted: #373737;
--color1: #282828;
--color2: #0053c8;
}

.menu-toc .menu-marker {
Expand Down
2 changes: 1 addition & 1 deletion examples/website/src/menus.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ export const menusComponentsConfig: MenusConfigObject[] = [
// "path": "/components/router-control"
// },
{
title: 'UserLogin 登录',
title: 'LoginPage 登录',
path: '/components/user-login',
},
{
Expand Down
45 changes: 45 additions & 0 deletions examples/website/src/pages/home/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Wrap, Hero, BtnGroup, LinkMenu, LinkA, Footer } from './style';

const Page = () => {
return (
<Wrap>
<Hero>
<h1>UIW ADMNIN</h1>
<p>
一个基于{' '}
<a href="https://github.com/uiwjs/uiw/" target="_blank">
uiw
</a>{' '}
和{' '}
<a href="https://github.com/kktjs/kkt-pro" target="_blank">
@kkt/pro
</a>{' '}
的初始级别项目
</p>
<BtnGroup>
<LinkMenu to="/docs/quick-start">立即上手</LinkMenu>
<LinkA href="https://github.com/uiwjs/uiw-admin" target="_blank">
GitHub
</LinkA>
</BtnGroup>
</Hero>
<Footer>
<h3>贡献者</h3>
<p>感谢所有的贡献者,欢迎开发者为开源项目贡献力量。</p>
<a
href="https://github.com/uiwjs/uiw-admin/graphs/contributors"
target="_blank"
>
<img
src="https://uiwjs.github.io/uiw-admin/CONTRIBUTORS.svg"
alt=""
/>
</a>
<div style={{ height: 50 }} />
<h3>License</h3>
<p>Licensed under the MIT License.</p>
</Footer>
</Wrap>
);
};
export default Page;
91 changes: 91 additions & 0 deletions examples/website/src/pages/home/style.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import styled, { css } from 'styled-components';
import { NavLink } from '@kkt/pro';

export const Wrap = styled.div`
padding: 100px 0 50px;
`;

export const Hero = styled.div`
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
h1 {
font-size: 100px;
text-shadow: 0 10px 20px rgba(22, 119, 255, 0.15);
background: linear-gradient(30deg, #90d5ff 30%, #65a5ff);
-webkit-background-clip: text;
background-clip: text;
font-family: Alibaba-PuHuiTi, Gill Sans, Gill Sans MT, Calibri, Trebuchet MS,
sans-serif;
color: #83cdf8;
}
p {
font-size: 20px;
line-height: 1;
margin: 30px 0;
a {
color: var(--color2);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
`;
export const BtnGroup = styled.div`
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
`;

const defaultBtn = (active?: boolean) => {
const background = active ? `var(--color2)` : 'transparent';
const color = active ? '#fff' : 'var(--color2)';
return css`
text-decoration: none;
font-size: 18px;
color: var(--color-fg-default);
padding: 2px 15px;
border-radius: 3px;
height: 50px;
width: 150px;
border-radius: 25px;
background-color: ${background};
border: 1px solid var(--color2);
color: ${color};
display: flex;
align-items: center;
justify-content: center;
opacity: 0.8;
margin: 0 20px;
&:hover {
opacity: 1;
}
`;
};

export const LinkMenu = styled(NavLink)`
${() => defaultBtn(true)}
`;

export const LinkA = styled.a`
${() => defaultBtn()}
`;

export const Footer = styled.div`
max-width: 1200px;
margin: 0 auto;
margin-top: 50px;
text-align: center;
border-top: 1px solid var(--color-border-muted);
padding-top: 50px;
h3 {
font-size: 30px;
margin: 0;
}
p {
margin: 15px;
}
`;

0 comments on commit f4abb97

Please sign in to comment.