config/webpack.config.dev.js

@@ -83,31 +83,37 @@ module.exports = {
     devtool: 'cheap-module-source-map',
     // These are the "entry points" to our application.
     // This means they will be the "root" imports that are included in JS bundle.
-    entry: [
-        // Include an alternative client for WebpackDevServer. A client's job is to
-        // connect to WebpackDevServer by a socket and get notified about changes.
-        // When you save a file, the client will either apply hot updates (in case
-        // of CSS changes), or refresh the page (in case of JS changes). When you
-        // make a syntax error, this client will display a syntax error overlay.
-        // Note: instead of the default WebpackDevServer client, we use a custom one
-        // to bring better experience for Create React App users. You can replace
-        // the line below with these two lines if you prefer the stock client:
-        // require.resolve('webpack-dev-server/client') + '?/',
-        // require.resolve('webpack/hot/dev-server'),
-        require.resolve('react-dev-utils/webpackHotDevClient'),
-        // Finally, this is your app's code:
-        paths.appIndexJs,
-        // We include the app code last so that if there is a runtime error during
-        // initialization, it doesn't blow up the WebpackDevServer client, and
-        // changing JS code would still trigger a refresh.
-    ],
+    entry:{
+        index: [
+                // Include an alternative client for WebpackDevServer. A client's job is to
+                // connect to WebpackDevServer by a socket and get notified about changes.
+                // When you save a file, the client will either apply hot updates (in case
+                // of CSS changes), or refresh the page (in case of JS changes). When you
+                // make a syntax error, this client will display a syntax error overlay.
+                // Note: instead of the default WebpackDevServer client, we use a custom one
+                // to bring better experience for Create React App users. You can replace
+                // the line below with these two lines if you prefer the stock client:
+                // require.resolve('webpack-dev-server/client') + '?/',
+                // require.resolve('webpack/hot/dev-server'),
+                require.resolve('react-dev-utils/webpackHotDevClient'),
+                // Finally, this is your app's code:
+                paths.appIndexJs,
+                // We include the app code last so that if there is a runtime error during
+                // initialization, it doesn't blow up the WebpackDevServer client, and
+                // changing JS code would still trigger a refresh.
+               ],
+        design: [
+            require.resolve('react-dev-utils/webpackHotDevClient'),
+            paths.appSrc + "/design.js"
+        ]
+    },
     output: {
         // Add /* filename */ comments to generated require()s in the output.
         pathinfo: true,
         // This does not produce a real file. It's just the virtual path that is
         // served by WebpackDevServer in development. This is the JS bundle
         // containing code from all our entry points, and the Webpack runtime.
-        filename: 'static/js/bundle.js',
+        filename: 'static/js/[name].bundle.js',
         // There are also additional JS chunk files if you use code splitting.
         chunkFilename: 'static/js/[name].chunk.js',
         // This is the URL that app is served from. We use "/" in development.
@@ -341,7 +347,14 @@ module.exports = {
         // Generates an `index.html` file with the <script> injected.
         new HtmlWebpackPlugin({
             inject: true,
+            chunks: ["index"],
+            template: paths.appHtml,
+        }),
+        new HtmlWebpackPlugin({
+            inject: true,
+            chunks: ["design"],
             template: paths.appHtml,
+            filename: 'design.html',
         }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:

config/webpackDevServer.config.js

@@ -80,6 +80,9 @@ module.exports = function(proxy, allowedHost) {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
+      rewrites: [
+        { from: /^\/design.html/, to: '/build/design.html' },
+      ]
     },
     public: allowedHost,
     proxy,

public/design.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/ioo.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+    <meta name="theme-color" content="#000000">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
+    <script>
+      if ('addEventListener' in document) {
+        document.addEventListener('DOMContentLoaded', function() {
+          FastClick.attach(document.body);
+        }, false);
+      }
+      if(!window.Promise) {
+        document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
+      }
+    </script>
+    <title>Ioobot workbench design</title>
+  </head>
+  <body>
+
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root" style="height: 100%"></div>
+
+  </body>
+</html>

src/app/App.jsx

@@ -4,7 +4,7 @@ import {Layout, Button, Spin, Col, Row, Tabs} from 'antd';
 
 import {withRouter} from "react-router-dom";
 
-import './developVersion/index.css';
+//import './developVersion/index.css';
 import {request} from 'graphql-request'
 import {graphqlUrl} from "../config";
 import {SHOW_ALL_CASE} from "../gql";
@@ -90,15 +90,6 @@ class App extends Component {
                                                     })
                                                 }}>立即定制
                                         </Button>
-                                        <Button size='large'
-                                                className='home-btn'
-                                                style={{marginLeft: '10px'}}
-                                                onClick={() => {
-                                                    this.props.history.push({
-                                                        pathname: `/developer`
-                                                    })
-                                                }}>开发设计
-                                        </Button>
                                     </div>
                                     <div className="intro-below" style={{padding: '0 60px'}}>
                                         <h4>或致电：177 1810 6480</h4>

src/app/basicVersion/BasicVersion.jsx

@@ -3,7 +3,8 @@ import {FormattedMessage} from 'react-intl';
 import {Route, Link, Switch, Redirect} from "react-router-dom";
 import {Layout, Menu, Button, Spin, Icon, LocaleProvider, Dropdown, Avatar, Badge} from 'antd';
 
-import '../developVersion/index.css';
+//import '../developVersion/index.css';
+import './index.css';
 import CaseShow from "./caseShow/CaseShow";
 import MyDeploy from "./myDeploy/MyDeploy";
 import Communication from "./communication/Communication";

src/design.js

@@ -0,0 +1,101 @@
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import DevelopVersion from './devApp/developVersion/DevelopVersion';
+import App from './devApp/App';
+import * as serviceWorker from './serviceWorker';
+import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
+
+import ApolloClient from "apollo-boost";
+import {ApolloProvider} from "react-apollo";
+
+import {IntlProvider, addLocaleData} from 'react-intl';
+//如果浏览器没有自带intl，则需要在使用npm安装intl之后添加如下代码
+// import intl from 'intl';
+import zh from 'react-intl/locale-data/zh';
+import en from 'react-intl/locale-data/en';
+import zh_CN from './language/zh_CN.js';
+import en_US from './language/en_US.js';
+import {graphqlUrl} from "./config";
+//import BasicVersion from "./app/basicVersion/BasicVersion";
+import Login from "./login/Login";
+
+
+addLocaleData([...en, ...zh]);
+
+
+const client = new ApolloClient({
+    uri: graphqlUrl
+});
+
+let browserLanguage = (navigator.language || navigator.browserLanguage).toLowerCase().split('-')[0];
+let language = browserLanguage === 'zh' ? "中文" : "English";
+
+
+class MainApp extends Component {
+    constructor() {
+        super();
+        sessionStorage.setItem("language", language);
+        this.state = {
+            language: sessionStorage.getItem("language")
+        };
+    }
+
+    changeLanguage = (language) => {
+        // console.log("index changeLanguage",language);
+        this.setState({
+            language: language
+        });
+    };
+
+    chooseLocale = (language) => {
+        let locale, messages;
+        switch (language) {
+            case "English":
+                locale = 'en';
+                messages = en_US;
+                return {locale, messages};
+
+            case "中文":
+                locale = 'zh';
+                messages = zh_CN;
+                return {locale, messages};
+
+            default:
+                locale = 'zh';
+                messages = zh_CN;
+                return {locale, messages};
+        }
+    };
+
+    render() {
+        let {language} = this.state;
+        let {locale, messages} = this.chooseLocale(language);
+        let ownProps = {
+            language,
+            changeLanguage: this.changeLanguage
+        };
+        const PrivateRoute = ({component: Component, ownProps, ...rest}) => (
+            <Route {...rest} render={(props) => {
+                return <Component {...ownProps} {...props}/>
+            }}/>
+        );
+        return (
+            <ApolloProvider client={client}>
+                <IntlProvider locale={locale} messages={messages}>
+                    <Router>
+                        <Switch>
+                            <Route exact path="/" component={App}/>
+                            <PrivateRoute path="/developer" ownProps={ownProps} component={DevelopVersion}/>
+                            <Route path="/login" component={Login}/>
+                        </Switch>
+                    </Router>
+                </IntlProvider>
+            </ApolloProvider>
+        )
+    }
+}
+
+ReactDOM.render(<MainApp/>, document.getElementById('root'));
+
+serviceWorker.unregister();

src/devApp/App.jsx

@@ -0,0 +1,220 @@
+import React, {Component} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Layout, Button, Spin, Col, Row, Tabs} from 'antd';
+
+import {withRouter} from "react-router-dom";
+
+import './developVersion/index.css';
+import {request} from 'graphql-request'
+import {graphqlUrl} from "../config";
+import {SHOW_ALL_CASE} from "../gql";
+import './index.css';
+
+const {Header, Footer, Content} = Layout;
+const TabPane = Tabs.TabPane;
+
+class App extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            examplesFirst: [],
+            examplesSecond: [],
+            examplesThird: []
+        }
+    }
+
+    componentWillMount() {
+        this._isMounted = true;
+
+        request(graphqlUrl, SHOW_ALL_CASE, {}).then(data => {
+                let cases = data.case_by_props;
+                let examplesFirst = cases.filter(cases => cases.title.includes('预约'));
+                let examplesSecond = cases.filter(cases => cases.title.includes('服装'));
+                let examplesThird = cases.filter(cases => cases.title.includes('小小杂志'));
+                if (this._isMounted) {
+                    this.setState({
+                        examplesFirst,
+                        examplesSecond,
+                        examplesThird
+                    })
+                }
+            }
+        )
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+
+
+    render() {
+        let {examplesFirst, examplesSecond, examplesThird} = this.state;
+        const tabStyle = {
+            paddingBottom: '50px',
+            height: '550px',
+            display: 'inline-block',
+        };
+
+        return (
+            <div>
+                <Layout className="layout-home" style={{minWidth: 1600}}>
+                    <Header>
+                        <div className="logo-wrapper">
+                            <div className='logo'/>
+                        </div>
+                    </Header>
+                    <Content>
+                        <div className='intro-wrapper'>
+                            <Row>
+                                <Col span={8} offset={12}>
+                                    <div className="intro" style={{padding: '80px 60px 40px 60px'}}>
+                                        <h2>无年费&nbsp;&nbsp;&nbsp;&nbsp;数据完全私有</h2>
+                                        <h3>即刻拥有自己的微信公众号、小程序</h3>
+                                    </div>
+                                    <div className="home-btn-group">
+                                        <Button size='large'
+                                                className='home-btn'
+                                                style={{marginLeft: '10px'}}
+                                                onClick={() => {
+                                                    this.props.history.push({
+                                                        pathname: `/developer`
+                                                    })
+                                                }}>开发设计
+                                        </Button>
+                                    </div>
+                                    <div className="intro-below" style={{padding: '0 60px'}}>
+                                        <h4>或致电：177 1810 6480</h4>
+                                    </div>
+                                </Col>
+                            </Row>
+                        </div>
+
+
+                        <div className={'cases-show-wrapper'}>
+                            <div className={'cases-show-title'}>行业模板案例</div>
+                            <div className={'case-show-tabs'}>
+                                <Tabs tabPosition='left' size='large' tabBarStyle={tabStyle} tabBarGutter={100}>
+                                    <TabPane tab="预约" key="1">
+                                        <div style={{marginLeft: 100}}>
+                                            {
+                                                examplesFirst.length === 0 ?
+                                                    <Spin/> :
+                                                    <CasesShow
+                                                        examples={examplesFirst}
+                                                    />
+                                            }
+                                        </div>
+                                    </TabPane>
+                                    <TabPane tab="电商" key="2">
+                                        <div style={{marginLeft: 100}}>
+                                            {
+                                                examplesSecond.length === 0 ?
+                                                    <Spin/> :
+                                                    <CasesShow
+                                                        examples={examplesSecond}
+                                                    />
+                                            }
+                                        </div>
+                                    </TabPane>
+                                    <TabPane tab="杂志" key="3">
+                                        <div style={{marginLeft: 100}}>
+                                            {
+                                                examplesThird.length === 0 ?
+                                                    <Spin/> :
+                                                    <CasesShow
+                                                        examples={examplesThird}
+                                                    />
+                                            }
+                                        </div>
+                                    </TabPane>
+                                </Tabs>
+                            </div>
+                        </div>
+
+
+                    </Content>
+                    <Footer style={{textAlign: 'center'}}>
+                        版权所有 © 2019 栋天科技
+                        {/*All right ©2019 Created by Ioobot*/}
+                    </Footer>
+                </Layout>
+            </div>
+        )
+    }
+}
+
+export default withRouter(App);
+
+
+class CasesShow extends Component {
+    constructor(props) {
+        super(props);
+        console.log(props);
+        this.state = {
+            showCaseID: props.examples[0].id,
+            index: 0
+        }
+    }
+
+    render() {
+        let {examples} = this.props;
+        let {showCaseID, index} = this.state;
+        let thisCase = examples[index];
+        return (
+            <Row>
+                <Col span={16}>
+                    <Row>
+                        <div>
+                            <div className={'case-detail-title'}>{thisCase.title}</div>
+                            <div
+                                className={'case-detail-description'}>{thisCase.detailDescription ? thisCase.detailDescription : '暂无简介'}</div>
+                            <div className='cover-div'>
+                                <img
+                                    className='cover-img'
+                                    src={thisCase.img}
+                                    alt={thisCase.title + '' + thisCase.description}
+                                />
+                                <div style={{marginTop: 5}}>—— 打开微信扫码体验 ——</div>
+                            </div>
+                        </div>
+                    </Row>
+                    <Row>
+                        {
+                            examples.map((item, index) => (
+                                <div
+                                    className={showCaseID === item.id ? 'logo-cover-div logo-cover-div-on' : 'logo-cover-div'}
+                                    onMouseEnter={() => {
+                                        this.setState({
+                                            showCaseID: item.id,
+                                            index
+                                        })
+                                    }}
+                                    key={index}
+                                >
+                                    <img
+                                        className='logo-cover-img'
+                                        src={item.img}
+                                        alt={item.title + '' + item.description}
+                                    />
+                                    <div>{item.description}</div>
+                                </div>
+                            ))
+                        }
+                    </Row>
+                </Col>
+                <Col span={8}>
+                    <div className={'detail-images'}>
+                        <img
+                            key={thisCase.detailImages[0]}
+                            src={thisCase.detailImages[0]}
+                            alt=""
+                            height="500"/>
+                    </div>
+                </Col>
+            </Row>
+        )
+    }
+}
+
+
+

src/devApp/index.css

@@ -0,0 +1,114 @@
+.layout-home {
+    background-color: white;
+}
+
+/* header 相关开始 */
+.logo {
+    width: 25%;
+    height: 31px;
+    padding: 16px 24px 16px 70px;
+    float: left;
+}
+
+.logo img {
+    width: 25%;
+    padding: 0 0 40px 20px
+}
+/* header 结束 */
+
+/* intro 相关开始 */
+.intro-wrapper {
+    width: 100%;
+    height: 500px;
+    background: url("https://workbench-1254337200.cos.ap-shanghai.myqcloud.com/bgt2.jpg") no-repeat;
+    background-size: cover;
+}
+
+.intro h2 {
+    color: white;
+    font-size: 40px;
+    font-weight: 800;
+}
+
+.intro h3 {
+    color: lightgrey;
+    font-size: 25px;
+    font-weight: 800;
+}
+
+.home-btn-group {
+    padding: 60px 60px 30px 60px;
+}
+
+.home-btn {
+    border-radius: 30px;
+}
+
+.intro-below h4 {
+    color: lightgrey;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+/* intro 结束 */
+
+/*case 相关开始*/
+.cases-show-wrapper {
+    margin-top: 100px;
+}
+
+.cases-show-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 38px;
+    line-height: 40px;
+}
+
+.case-show-tabs {
+    width: 60%;
+    margin: 60px auto 0;
+}
+
+.cover-div {
+
+}
+
+.cover-img {
+    width: 170px;
+    height: 170px;
+    margin-top: 50px;
+    border: 5px solid #ebebeb;
+}
+
+.logo-cover-div {
+    display: inline-block;
+    margin: 50px 50px 20px 0;
+    text-align: center;
+    opacity: 0.25
+}
+
+.logo-cover-div-on {
+    opacity: 1
+}
+
+.logo-cover-img {
+    width: 100px;
+    height: 100px;
+}
+
+.case-detail-title {
+    font-weight: bold;
+    font-size: 38px;
+    line-height: 40px;
+}
+
+.case-detail-attention {
+    color: red;
+}
+
+.case-detail-description {
+    font-size: 22px;
+    line-height: 30px;
+    margin-top: 20px;
+}
+/*case 结束*/

src/index.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import DevelopVersion from './app/developVersion/DevelopVersion';
+//import DevelopVersion from './app/developVersion/DevelopVersion';
 import App from './app/App';
 import * as serviceWorker from './serviceWorker';
 import {BrowserRouter as Router, Route, Link, Switch, Redirect} from "react-router-dom";
@@ -86,7 +86,6 @@ class MainApp extends Component {
                     <Router>
                         <Switch>
                             <Route exact path="/" component={App}/>
-                            <PrivateRoute path="/developer" ownProps={ownProps} component={DevelopVersion}/>
                             <PrivateRoute path="/common" ownProps={ownProps} component={BasicVersion}/>
                             <Route path="/login" component={Login}/>
                         </Switch>