website: update website styles.

website/src/component/Container/index.module.less

@@ -1,5 +1,5 @@
 .warpper {
-  max-width: 1440px;
+  max-width: 1024px;
   margin: 0 auto;
   padding-top: 30px;
   padding-bottom: 60px;

website/src/component/Container/index.tsx

@@ -4,7 +4,7 @@ import SubMenus, { MenuData } from '../SubMenus';
 import styles from './index.module.less';
 
 interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  data: MenuData[]
+  data?: MenuData[]
 }
 
 export default function Container(props: ContainerProps) {
@@ -13,7 +13,9 @@ export default function Container(props: ContainerProps) {
     <Fragment>
       <Header />
       <div className={styles.warpper}>
-        <SubMenus data={data} />
+        {data && data.length > 0 && (
+          <SubMenus data={data} />
+        )}
         <div style={{ flex: 1, overflow: 'hidden' }}>
           {children}
         </div>

website/src/component/Header/index.module.less

@@ -14,9 +14,17 @@
 }
 
 .menus {
+  a {
+    border-bottom: #fff solid 2px;
+    transition: all .3s;
+  }
   a + a {
     margin-left: 16px;
   }
+  :global(.active) {
+    color: #1890ff;
+    border-bottom: #1890ff solid 2px;
+  }
 }
 
 .logo {

website/src/component/Header/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import styles from './index.module.less';
 import logo from '../../assets/logo-dark.svg';
 
@@ -14,9 +14,11 @@ export default function Header() {
           </span>
         </Link>
         <div className={styles.menus}>
-          <Link to="/">首页</Link>
-          <Link to="/docs">文档</Link>
-          <Link to="/components/about">组件</Link>
+          <NavLink to="/home">首页</NavLink>
+          <NavLink to="/docs">文档</NavLink>
+          <NavLink to="/components/">RN组件</NavLink>
+          <a target="__blank" href="https://uiwjs.github.io">Web 组件</a>
+          <a target="__blank" href="https://github.com/uiwjs/react-native-uiw">GitHub</a>
         </div>
       </div>
     </header>

website/src/layouts/BasicLayout.tsx

@@ -1,15 +1,18 @@
-import React from 'react';
 import { Switch, Route, Redirect, RouteComponentProps } from 'react-router-dom';
 import { DefaultProps } from '../';
 import { RouterData } from '../routes/router';
-import Header from '../component/Header';
-import styles from './BasicLayout.module.less';
+import Container from '../component/Container';
+import { componentMenus } from '../routes/menus';
 
 function BasicLayout(props: DefaultProps) {
-  const { routerData } = props || {};
+  const { routerData, location } = props || {};
   const RouteComponents: JSX.Element[] = [];
+  let data = undefined;
+
+  if (/^(\/components)/.test(location.pathname)) {
+    data = componentMenus;
+  }
   Object.keys(routerData).forEach((path, idx) => {
-    console.log(path)
     if (path === '/') {
       RouteComponents.push(<Route exact key={idx + 1} path="/" render={() => <Redirect to="/home" />} />);
     } else {
@@ -28,10 +31,9 @@ function BasicLayout(props: DefaultProps) {
     }
   });
   return (
-    <div className={styles.container}>
-      <Header />
+    <Container data={data}>
       <Switch>{RouteComponents}</Switch>
-    </div>
+    </Container>
   );
 }
 

website/src/pages/docs/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { DefaultProps } from '../../';
 import styles from './index.module.less';
 
 export default function Home(props: DefaultProps) {
   return (
     <div className={styles.warpper}>
-      文档
+      文档，正在建设中...
+      <p>
+        <Link to="/components/about">查看组件文档</Link>
+      </p>
     </div>
   );
 }

website/src/pages/home/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { DefaultProps } from '../../';
 import styles from './index.module.less';
 
 export default function Home(props: DefaultProps) {
   return (
     <div className={styles.warpper}>
-      首页
+      首页正在建设中....
+      <p>
+        <Link to="/components/about">查看组件文档</Link>
+      </p>
     </div>
   );
 }

website/src/routes/Controller.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Switch, Route, Redirect } from 'react-router-dom';
 import { getRouterData } from '../routes/router';
 import { DefaultProps } from '../';
 
@@ -10,10 +10,10 @@ type Props = {
 export default function Controller(props: Props) {
   const { routerData } = props || {};
   const BasicLayout: any = routerData['/'].component;
-  const ComponentsLayout: any = routerData['/components'].component;
+
   return (
     <Switch>
-      <Route path="/components" render={(props) => <ComponentsLayout {...props} routerData={routerData} />} />
+      <Route exact path="/components" render={() => <Redirect to="/components/about" />} />
       <Route path="/" render={(props) => <BasicLayout {...props} routerData={routerData} />} />
     </Switch>
   );

website/src/routes/router.tsx

@@ -32,9 +32,9 @@ export const getRouterData = {
   '/docs': {
     component: dynamicWrapper([], () => import('../pages/docs')),
   },
-  '/components': {
-    component: dynamicWrapper([], () => import('../layouts/ComponentsLayout')),
-  },
+  // '/components': {
+  //   component: dynamicWrapper([], () => import('../layouts/ComponentsLayout')),
+  // },
   '/components/about': {
     component: dynamicWrapper([], () => import('../pages/components/about')),
   },