Merge pull request #225 from yaob421123/master

feat(doc): 新增文档首页
uiwjs · Apr 28, 2023 · f4abb97 · f4abb97
2 parents 07ca6d5 + 36002a2
commit f4abb97
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 10 deletions.
diff --git 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
@@ -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"

diff --git a/examples/website/src/components/Layouts/index/index.tsx b/examples/website/src/components/Layouts/index/index.tsx
@@ -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`
@@ -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>

diff --git 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
@@ -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 {

diff --git 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
@@ -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;
diff --git a/examples/website/src/pages/home/style.ts 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;
+  }
+`;