feat: remove antd

app/controller/home/index.js

@@ -24,10 +24,6 @@ module.exports = class IndexController extends egg.Controller {
     await ctx.renderClient('home.js', result);
   }
 
-  async hello(ctx) {
-    await ctx.renderClient('hello.js', {});
-  }
-
   async list() {
     this.ctx.body = this.service.article.getArtilceList();
   }

app/controller/test/test.js

@@ -2,7 +2,7 @@
 module.exports = app => {
   return class TestController extends app.Controller {
     async asyncRender(ctx) {
-      await ctx.render('test/async.js', { message: 'Egg React Server Side Async Render' });
+      await ctx.render('async.js', { message: 'Egg React Server Side Async Render' });
     }
   };
 };

app/router.js

@@ -1,12 +1,11 @@
 
 module.exports = app => {
   const { router, controller } = app;
-  router.get('/test/async', controller.test.test.asyncRender);
   router.get('/api/list', controller.home.index.list);
   router.get('/intro', controller.intro.intro.index);
   router.get('/detail/:id', controller.home.index.detail);
   router.get('/csr', controller.home.index.csr);
   router.get('/node', controller.home.index.node);
-  router.get('/hello', controller.home.index.hello);
+  router.get('/test/async', controller.test.test.asyncRender);
   router.get('/*', controller.home.index.ssr);
 };

app/web/page/async/async.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Loadable from 'react-loadable';
 import Loading from './component/loading';
 import Layout from 'component/layout/blog';
+import Header from 'component/header'
 
 const AsyncImageLoadableComponent = Loadable({
   loader: () => import('./component/async-image'),
@@ -12,6 +13,7 @@ export default class Async extends Component {
 
   render() {
     return <Layout>
+      <Header></Header>
       <h2 style={{ marginTop: '40px', marginBottom: '40px', textAlign: "center"}}>Egg React Server Side Render</h2>
       <h4 style={{marginBottom: '40px', textAlign: "center", color: 'lightgray'}}>Egg + React + Redux + React Router SPA Server Side + Webpack Render Example</h4>
       <div style={{ textAlign: 'center' }}><AsyncImageLoadableComponent /></div>

app/web/page/home/index.js

@@ -6,7 +6,6 @@ import createStore from './store'
 import createRouter from './router'
 import Main from './view/main'
 import '../../asset/css/blog.css'
-import './index.css';
 
 class Entry extends Component {
   static async asyncData(context) {

app/web/page/home/view/main.css

@@ -0,0 +1,14 @@
+.menu-tab {
+  margin: 8px auto;
+  border-bottom: 1px solid #0a52a5;
+  height: 40px;
+}
+
+.menu-tab li {
+ height: 40px;
+ line-height: 40px;
+ vertical-align: middle;
+ float: left;
+ width: 33.33%;
+ text-align: center;
+}

app/web/page/home/view/main.jsx

@@ -6,8 +6,7 @@ import Header from 'component/header'
 import Home from '../router/home';
 import Async from '../router/async';
 import About from '../router/about';
-
-import { Menu } from 'antd';
+import './main.css';
 
 class Main extends Component {
 
@@ -16,27 +15,18 @@ class Main extends Component {
     this.state = { current: props.url };
   }
 
-  handleClick(e) {
-    console.log('click', e, this.state);
-    this.setState({
-      current: e.key
-    });
+  tabClick(e) {
+    console.log('click', e.target);
   }
 
   render() {
     return <Layout {...this.props}>
       <Header></Header>
-      <Menu onClick={this.handleClick.bind(this)} selectedKeys={[this.state.current]} mode="horizontal">
-        <Menu.Item key="/">
-          <Link to="/">Home</Link>
-        </Menu.Item>
-        <Menu.Item key="/async">
-          <Link to="/async">Async</Link>
-        </Menu.Item>
-        <Menu.Item key="/about">
-          <Link to="/about">About</Link>
-        </Menu.Item>
-      </Menu>
+      <ul className="menu-tab">
+        <li onClick={this.tabClick.bind(this)}><Link to="/">Home</Link></li>
+        <li onClick={this.tabClick.bind(this)}><Link to="/async">Async</Link></li>
+        <li onClick={this.tabClick.bind(this)}><Link to="/about">About</Link></li>
+      </ul>
       <Switch>
         <Route path="/async" component={Async}/>
         <Route path="/about" component={About}/>

babel.config.js

@@ -16,14 +16,7 @@ module.exports = {
       "plugins": [
         ["@babel/plugin-proposal-decorators", { "legacy": true }],
         ["@babel/plugin-proposal-class-properties", { "loose": true }],
-        "@babel/plugin-syntax-dynamic-import",
-        [
-          "import",
-          {
-            "libraryName": "antd",
-            "style": "css"
-          }
-        ]
+        "@babel/plugin-syntax-dynamic-import"
       ]
     },
     "web": {
@@ -48,14 +41,7 @@ module.exports = {
         ["@babel/plugin-proposal-class-properties", { "loose": true }],
         "@babel/plugin-transform-runtime",
         "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-proposal-object-rest-spread",
-        [
-          "import",
-          {
-            "libraryName": "antd",
-            "style": "css"
-          }
-        ]
+        "@babel/plugin-proposal-object-rest-spread"
       ]
     }
   }

package.json

@@ -15,7 +15,6 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
-    "antd": "^3.0.3",
     "axios": "^0.19.0",
     "egg": "^2.1.0",
     "egg-cors": "^2.0.0",

webpack.config.js

@@ -7,8 +7,7 @@ module.exports = {
     blog: 'app/web/page/blog/index.jsx',
     detail: 'app/web/page/detail/index.jsx',
     intro: 'app/web/page/intro/index.jsx',
-    'test/async': 'app/web/page/async/async.jsx',
-    hello: 'app/web/page/home/view/hello.js'
+    async: 'app/web/page/async/async.jsx'  
   },
   plugins:[
     {