feat(page): 添加主题页

Yoshino-UI · Sep 6, 2018 · 657a39e · 657a39e
1 parent cbd9e2d
commit 657a39e
Show file tree

Hide file tree

Showing 9 changed files with 290 additions and 114 deletions.
diff --git a/docs/App.tsx b/docs/App.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Component } from 'react';
 import { Switch, Route, HashRouter as Router, Redirect } from 'react-router-dom';
 import Index from './index';
-import Components from './pages/components/index';
+import Page from './pages/index';
 import { RouteProps } from 'react-router';
 
 const Routes: RouteProps[] = [
@@ -12,8 +12,8 @@ const Routes: RouteProps[] = [
     exact: true,
   },
   {
-    component: Components,
-    path: '/components/:name',
+    component: Page,
+    path: '/docs/',
   },
 ];
 
@@ -29,7 +29,7 @@ export default class App extends Component {
               );
             })
           }
-          <Redirect from='/components' to='/components/yoshino'/>
+          <Redirect from='/docs/components' to='/docs/components/yoshino'/>
           <Route
             render={() => {
               return <Redirect to='/'/>;

diff --git a/docs/index.tsx b/docs/index.tsx
@@ -17,7 +17,7 @@ export default class Index extends Component {
             <h1>Yoshino</h1>
             <h2> 基于react的可定制化组件库，可根据不同业务场景输出对应的组件。</h2>
             <div className='action'>
-              <div className='action-item'><Link to='/components/yoshino'>快速开始</Link></div>
+              <div className='action-item'><Link to='/docs/components/yoshino'>快速开始</Link></div>
               <div className='action-item'>
                 <a target='_blank' href='https://github.com/Yoshino-UI/yoshino-cli'>yoshino-cli</a>
               </div>

diff --git a/docs/pages/components/index.tsx b/docs/pages/components/index.tsx
@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { Component } from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
-import { Link } from 'react-router-dom';
-import {Menu, BackTop} from '@yoshino/components/';
+import {Menu} from '@yoshino/components/';
 import { backTop } from '@yoshino/components/BackTop/assist';
-import './index.less';
 import menuObj from './pageMenu';
 import { MenuItem } from '@yoshino/components/Menu/MenuItem';
 import { RouteComponentProps } from 'react-router';
@@ -18,76 +16,67 @@ const MenuItemGroup = Menu.ItemGroup;
 
 export default class Components extends Component<IProps> {
   pushHistory = (url: string) => {
-    this.props.history.push('/components/' + url);
+    this.props.history.push('/docs/components/' + url);
     backTop(300);
   }
 
   render() {
     const preCls = 'wrapper';
     const current = this.props.match.params.name;
     return (
-      <div>
-        <BackTop/>
-        <div className={`${preCls}-header`}>
-          <div className={`${preCls}-logo`}>
-            <Link to='/'>Yoshino</Link>
-          </div>
+      <React.Fragment>
+        <div className={`${preCls}-menu`}>
+        <Menu
+          defaultActiveKey={current}
+          defaultOpenKeys={['components']}
+        >
+          <Menu.Item keyId='yoshino' onClick={this.pushHistory.bind(this, 'yoshino')}>Yoshino</Menu.Item>
+          <Menu.Item keyId='start' onClick={this.pushHistory.bind(this, 'start')}>快速开始</Menu.Item>
+          <Menu.Item keyId='theme' onClick={this.pushHistory.bind(this, 'theme')}>定制主题</Menu.Item>
+          <Menu.Item keyId='logs' onClick={this.pushHistory.bind(this, 'logs')}>更新日志</Menu.Item>
+          <Menu.Item keyId='faq' onClick={this.pushHistory.bind(this, 'faq')}>FAQ</Menu.Item>
+          <SubMenu title='组件' keyId='components'>
+            {
+              menuObj.map((menu) => {
+                return (
+                  <MenuItemGroup title={menu.name} keyId={menu.keyId} key={menu.keyId}>
+                    {
+                      menu.children.map((item) => {
+                        return (
+                          <MenuItem
+                            key={item.keyId}
+                            keyId={item.keyId}
+                            onClick={this.pushHistory.bind(this, item.keyId)}
+                          >
+                            {item.name}
+                          </MenuItem>
+                        );
+                      })
+                    }
+                  </MenuItemGroup>
+                );
+              })
+            }
+          </SubMenu>
+        </Menu>
         </div>
-        <div className={`${preCls}-wrapper`}>
-          <div className={`${preCls}-menu`}>
-          <Menu
-            defaultActiveKey={current}
-            defaultOpenKeys={['components']}
-          >
-            <Menu.Item keyId='yoshino' onClick={this.pushHistory.bind(this, 'yoshino')}>Yoshino</Menu.Item>
-            <Menu.Item keyId='start' onClick={this.pushHistory.bind(this, 'start')}>快速开始</Menu.Item>
-            <Menu.Item keyId='theme' onClick={this.pushHistory.bind(this, 'theme')}>定制主题</Menu.Item>
-            <Menu.Item keyId='logs' onClick={this.pushHistory.bind(this, 'logs')}>更新日志</Menu.Item>
-            <Menu.Item keyId='faq' onClick={this.pushHistory.bind(this, 'faq')}>FAQ</Menu.Item>
-            <SubMenu title='组件' keyId='components'>
-              {
-                menuObj.map((menu) => {
-                  return (
-                    <MenuItemGroup title={menu.name} keyId={menu.keyId} key={menu.keyId}>
-                      {
-                        menu.children.map((item) => {
-                          return (
-                            <MenuItem
-                              key={item.keyId}
-                              keyId={item.keyId}
-                              onClick={this.pushHistory.bind(this, item.keyId)}
-                            >
-                              {item.name}
-                            </MenuItem>
-                          );
-                        })
-                      }
-                    </MenuItemGroup>
-                  );
-                })
-              }
-            </SubMenu>
-          </Menu>
-          </div>
-          <div className={`${preCls}-container`}>
-            <Switch>
-              {
-                Routes.map((item, key) => {
-                  return (
-                    <Route {...item} path={`${item.path}`} key={key} exact/>
-                  );
-                })
-              }
-              <Route
-                render={() => {
-                return <Redirect to='/components/'/>;
-               }}
-              />
-            </Switch>
-          </div>
+        <div className={`${preCls}-container`}>
+          <Switch>
+            {
+              Routes.map((item, key) => {
+                return (
+                  <Route {...item} path={`${item.path}`} key={key} exact/>
+                );
+              })
+            }
+            <Route
+              render={() => {
+              return <Redirect to='/docs/components/yoshino'/>;
+              }}
+            />
+          </Switch>
         </div>
-        <div className={`${preCls}-footer`}/>
-      </div>
+      </React.Fragment>
     );
   }
 }