From 36002a27818b0dcb653e8f1a04c40235952441e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A7=9A=E5=AE=BE?= Date: Fri, 28 Apr 2023 14:28:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(doc):=20=E6=96=B0=E5=A2=9E=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/website/config/routes.js | 3 +- .../src/components/Layouts/Navbar/index.tsx | 1 + .../src/components/Layouts/index/index.tsx | 15 +-- .../src/components/Layouts/index/style.ts | 26 +++++- examples/website/src/global.css | 2 + examples/website/src/menus.ts | 2 +- examples/website/src/pages/home/index.tsx | 45 +++++++++ examples/website/src/pages/home/style.ts | 91 +++++++++++++++++++ 8 files changed, 175 insertions(+), 10 deletions(-) create mode 100644 examples/website/src/pages/home/index.tsx create mode 100644 examples/website/src/pages/home/style.ts diff --git a/examples/website/config/routes.js b/examples/website/config/routes.js index 0f82058f..7d1c73a6 100644 --- a/examples/website/config/routes.js +++ b/examples/website/config/routes.js @@ -11,8 +11,9 @@ const routeList = [ children: [ { index: true, - redirect: '/docs/quick-start', + redirect: '/home', }, + { path: '/home', element: '@/pages/home' }, { path: '/docs', children: [ diff --git a/examples/website/src/components/Layouts/Navbar/index.tsx b/examples/website/src/components/Layouts/Navbar/index.tsx index d75d3ca9..933d4c3a 100644 --- a/examples/website/src/components/Layouts/Navbar/index.tsx +++ b/examples/website/src/components/Layouts/Navbar/index.tsx @@ -31,6 +31,7 @@ const Navbar: FC> = (props) => { + 首页
- - -
+ + {!isHome && } + -
+
diff --git a/examples/website/src/components/Layouts/index/style.ts b/examples/website/src/components/Layouts/index/style.ts index 4d854303..cd032e11 100644 --- a/examples/website/src/components/Layouts/index/style.ts +++ b/examples/website/src/components/Layouts/index/style.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; export const Wrapper = styled.div` width: 100%; @@ -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; + ` + ); + }} `; diff --git a/examples/website/src/global.css b/examples/website/src/global.css index 937fbb31..44b459b5 100644 --- a/examples/website/src/global.css +++ b/examples/website/src/global.css @@ -25,6 +25,7 @@ html, main { --color-header-bg: 255 255 255; --color-border-muted: #e5e5e5; --color1: #f2f2f2; + --color2: #1677ff; } [data-color-mode*='dark'] { @@ -32,6 +33,7 @@ html, main { --color-header-bg: 13 17 22; --color-border-muted: #373737; --color1: #282828; + --color2: #0053c8; } .menu-toc .menu-marker { diff --git a/examples/website/src/menus.ts b/examples/website/src/menus.ts index 1469dd65..f19921ee 100644 --- a/examples/website/src/menus.ts +++ b/examples/website/src/menus.ts @@ -110,7 +110,7 @@ export const menusComponentsConfig: MenusConfigObject[] = [ // "path": "/components/router-control" // }, { - title: 'UserLogin 登录', + title: 'LoginPage 登录', path: '/components/user-login', }, { diff --git a/examples/website/src/pages/home/index.tsx b/examples/website/src/pages/home/index.tsx new file mode 100644 index 00000000..6443e88b --- /dev/null +++ b/examples/website/src/pages/home/index.tsx @@ -0,0 +1,45 @@ +import { Wrap, Hero, BtnGroup, LinkMenu, LinkA, Footer } from './style'; + +const Page = () => { + return ( + + +

UIW ADMNIN

+

+ 一个基于{' '} + + uiw + {' '} + 和{' '} + + @kkt/pro + {' '} + 的初始级别项目 +

+ + 立即上手 + + GitHub + + + + + + ); +}; +export default Page; diff --git a/examples/website/src/pages/home/style.ts b/examples/website/src/pages/home/style.ts new file mode 100644 index 00000000..76208060 --- /dev/null +++ b/examples/website/src/pages/home/style.ts @@ -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; + } +`;