修改

src/app/basicVersion/BasicVersion.jsx

@@ -7,16 +7,88 @@ import '../developVersion/index.css';
 import ExampleShow from "./exampleShow/ExampleShow";
 import MyDeploy from "./myDeploy/MyDeploy";
 import Communication from "./communication/Communication";
+import {logoutUrl} from "../../config";
+import {getCookie, setCookie} from "../../cookie";
+import {GET_USER} from "../../gql";
+
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+import axios from 'axios';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import zhCN from 'antd/lib/locale-provider/zh_CN';
+axios.defaults.withCredentials = true;
 const {Header, Content} = Layout;
 
 class BasicVersion extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            menuLevel1: "example",
+            language: props.language,
+            locale: props.language === "中文" ? zhCN : undefined,
+            languageButton: props.language === "中文" ? "English" : "中文",
+            userID: '',
+            avatar: ''
+        }
+    }
 
+    switchMenuLevel = (menuName, value) => {
+        this.setState({
+            [menuName]: value,
+        });
+    };
+
+    switchMenuTab = (menuName, e) => {
+        this.setState({
+            [menuName]: e.key,
+        });
+    };
+
+    componentWillMount() {
+        let userID = getCookie('user_id');
+        if (userID === undefined || '') {
+            axios.get(this.state.getIdUrl)
+                .then((res) => {
+                    if (res.data !== '') {
+                        setCookie("user_id", res.data);
+                        this.setState({
+                            userID: res.data
+                        })
+                    }
+                })
+                .catch(function (err) {
+                    console.log(err);
+                });
+        } else {
+            this.setState({
+                userID
+            })
         }
     }
 
+    changeLocale = (e) => {
+        e.stopPropagation();
+        let {language} = this.state;
+        // console.log('app language',language);
+        let changeLanguage = language === "中文" ? "English" : "中文";
+        let local = language === "中文" ? undefined : zhCN;
+        let languageButton = language === "中文" ? "中文" : "English";
+
+        sessionStorage.setItem("language", changeLanguage);
+        this.props.changeLanguage(changeLanguage);
+        this.setState({
+            language: changeLanguage,
+            locale: local,
+            languageButton: languageButton
+        });
+        if (!local) {
+            moment.locale('en');
+        } else {
+            moment.locale('zh-cn');
+        }
+    };
+
     render() {
         return (
             <Layout style={{minHeight: '100vh'}}>
@@ -30,6 +102,8 @@ class BasicVersion extends Component {
                         theme="dark"
                         mode="horizontal"
                         style={{lineHeight: '64px'}}
+                        selectedKeys={[this.state.menuLevel1]}
+                        onClick={(e) => this.switchMenuTab('menuLevel1', e)}
                     >
                         <Menu.Item key="example">
                             <Link to="/common/example"><FormattedMessage id="Example"/></Link>
@@ -41,6 +115,22 @@ class BasicVersion extends Component {
                             <Link to="/common/communication"><FormattedMessage id="Communication"/></Link>
                         </Menu.Item>
                     </Menu>
+
+                    {
+                        this.state.userID === '' ?
+                            <Link to="/login">
+                                <Button className='login-button' type='primary'
+                                        onClick={() => this.switchMenuLevel('menuLevel1', 'user')}>
+                                    <FormattedMessage id="Login"/></Button>
+                            </Link>
+                            :
+                            <User
+                                userID={this.state.userID}
+                                languageButton={this.state.languageButton}
+                                changeLocale={this.changeLocale}
+                            />
+                    }
+
                 </Header>
 
                 <Layout style={{marginTop: '64px', zIndex: '0'}}>
@@ -57,4 +147,91 @@ class BasicVersion extends Component {
     }
 }
 
-export default BasicVersion;
+export default BasicVersion;
+
+
+class User extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            show: false
+        }
+    }
+
+    logout = () => {
+
+        axios.get(logoutUrl)
+            .then((res) => {
+                console.log('logout success',res);
+                setCookie("user_id", '');
+            })
+            .catch((err) => {
+            });
+    };
+
+    render() {
+        return (
+            <Query query={gql(GET_USER)} variables={{id: this.props.userID}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return <Spin style={{marginLeft: 3}}/>
+                        }
+                        if (error) {
+                            return 'error!';
+                        }
+                        let user = data.user_by_id;
+                        if (user !== null) {
+                            const menu = (
+                                <Menu className={'user-detail'}>
+                                    <Menu.Item className={'user-info'}>
+                                        <p className={'user-info-nickname'}>{user.nickname}</p>
+                                        <p className={'user-info-email'}>{user.email}</p>
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                        <a href='https://www.ioobot.com' onClick={(e) => {
+                                            e.preventDefault();
+                                            this.props.changeLocale(e)
+                                        }}>{this.props.languageButton}</a>
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                        <Link to="/login">
+                                            <div>
+                                                <FormattedMessage id="Account center"/>
+                                            </div>
+                                        </Link>
+                                    </Menu.Item>
+                                    <Menu.Item>
+                                        <Link to="/ticket">
+                                            <div>
+                                                <FormattedMessage id="Submit Support Ticket"/>
+                                            </div>
+                                        </Link>
+                                    </Menu.Item>
+                                    <Menu.Item className={'login-out'}>
+                                        <a href='https://www.ioobot.com' onClick={(e) => {
+                                            e.preventDefault();
+                                            this.logout();
+                                        }}><FormattedMessage id="exit"/></a>
+                                    </Menu.Item>
+                                </Menu>
+                            );
+                            return (
+                                <div className='login-nickname' onClick={()=>{}}>
+                                    <Dropdown overlay={menu} placement="bottomRight" trigger={['click']}>
+                                        <div>
+                                            <span style={{ marginRight: 5 }}>
+                                                <Badge dot><Avatar shape="user" icon="user" /></Badge>
+                                            </span>
+                                            {/*<Icon type="down" />*/}
+                                        </div>
+                                    </Dropdown>
+                                </div>
+                            )
+                        }
+                    }
+                }
+            </Query>
+        )
+    }
+}

src/app/basicVersion/exampleShow/ExampleShow.jsx

@@ -1,57 +1,52 @@
-import React,{Component} from 'react';
-import {Layout, Card, Icon,Button, Avatar } from 'antd';
-
+import React, {Component} from 'react';
+import {Layout, Card, Icon, Button, Avatar} from 'antd';
+import lo from '../../../images/lo.png'
 import './index.css'
+
 const {Content} = Layout;
-const { Meta } = Card;
+const {Meta} = Card;
 
 class ExampleShow extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        }
+        this.state = {}
     }
 
-    renderCard = () =>{
-        let example =[
-            {title:1,description:'1'},
-            {title:2,description:'1'},
-            {title:3,description:'1'},
-            {title:4,description:'1'},
-            {title:5,description:'1'},
-            {title:6,description:'1'},
-            ];
+    renderCard = () => {
+        let examples = [
+            {title: '预约', description: '小程序', img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/gh_09a69a242b5a_258.jpg', deployedNum: 100},
+            {title: '预约', description: '公众号', img: 'https://order-img-1254337200.cos.ap-shanghai.myqcloud.com/qrcode_for_gh_abcdd8e08f94_258.jpg', deployedNum: 90},
+            {title: '电商', description: '小程序', img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',  deployedNum: 120},
+            {title: '电商', description: '公众号', img: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', deployedNum: 105}
+        ];
 
-        return example.map((item,index)=>{
-            return(
-                <span key= {index} style={{padding:'10px 0'}}>
+        return examples.map((item, index) => (
+            <span key={index} style={{padding: '10px 0'}}>
                     <Card
-                        key= {index}
-                        style={{ width: 300 }}
-                        cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
-                        actions={[<Icon type="setting" />, <Icon type="edit" />,
-                            <Button type="primary" onClick={()=>{
+                        key={index}
+                        style={{width: 300}}
+                        cover={<div className='cover-div'><img className='cover-img' src={item.img} alt={item.title+''+item.description}/></div>}
+                        actions={[
+                            <span>已部署: {item.deployedNum}</span>,
+                            <Button type="primary" onClick={() => {
                                 console.log('部署')
                             }}>部署</Button>
                         ]}
                     >
                         <Meta
-                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+                            avatar={<Avatar src={lo}/>}
                             title={item.title}
                             description={item.description}
                         />
                     </Card>
-                </span>
-            )
-        })
-
+            </span>
+        ))
     };
 
-    render(){
+    render() {
         return (
             <div id="example-show">
-                <Layout style={{ padding: '24px',minHeight:'300px' }}>
+                <Layout style={{padding: '24px', minHeight: '300px'}}>
                     <Content className="content">
                         {this.renderCard()}
                     </Content>

src/app/basicVersion/exampleShow/index.css

@@ -3,5 +3,19 @@
     background: rgb(255, 255, 255);
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
-}
+    justify-content: space-around;
+}
+
+.cover-div {
+    height: 180px;
+    text-align: center;
+    padding-top: 10px;
+}
+
+
+.cover-img {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+}

src/app/developVersion/DevelopVersion.jsx

@@ -193,7 +193,7 @@ class DevelopVersion extends Component {
 
                     {
                         this.state.userID === '' ?
-                            <Link to="/developer/login">
+                            <Link to="/login">
                                 <Button className='login-button' type='primary'
                                         onClick={() => this.switchMenuLevel('menuLevel1', 'user')}>
                                     <FormattedMessage id="Login"/></Button>
@@ -286,47 +286,6 @@ class DevelopVersion extends Component {
                                     </Menu>
                                 </Sider>
                             );
-                        case 'user':
-                            return (
-                                <Sider
-                                    width={200}
-                                    style={{background: '#fff', marginTop: '64px', zIndex: '0'}}
-                                    collapsible
-                                    collapsed={this.state.collapsed}
-                                    onCollapse={this.onCollapse}
-                                >
-                                    <Menu
-                                        theme="dark"
-                                        defaultSelectedKeys={['cloud-settings']}
-                                        onClick={(e) => this.switchMenu('sideBar', e)}
-                                        selectedKeys={[this.state.sideBar]}
-                                        style={{
-                                            borderRight: 0,
-                                            overflow: 'auto',
-                                            height: '100vh',
-                                            left: '0',
-                                            width: '200px',
-                                            position: 'fixed'
-                                        }}
-                                    >
-                                        <Menu.Item key="account">
-                                            <Icon type="setting" theme="twoTone"/>
-                                            <span><FormattedMessage id="Account center"/></span>
-                                            <Link to="/developer/login/account"/>
-                                        </Menu.Item>
-
-                                        <Menu.Item key="cloud-settings">
-                                            <Icon type="cloud" theme="twoTone"/>
-                                            <span><FormattedMessage id="Cloud settings"/></span>
-                                            <Link to="/developer/login/cloud"/>
-                                        </Menu.Item>
-                                    </Menu>
-                                </Sider>
-                            );
-                        case 'ticket':
-                            return (
-                                ''
-                            );
                         default:
                             return (
                                 <Sider
@@ -384,7 +343,21 @@ class GraphqlSidebar extends Component {
             <Query query={gql(CASE_AND_PROJECT)} variables={{projectType: 'graphql', user_id: this.state.userID}}>
                 {
                     ({loading, error, data}) => {
-                        if (loading) return <Spin style={{marginLeft: 3}}/>;
+                        if (loading) return (
+                            <Menu
+                                theme="dark"
+                                mode="inline"
+                                style={{
+                                    borderRight: 0,
+                                    overflow: 'auto',
+                                    height: '100vh',
+                                    left: '0',
+                                    width: '200px',
+                                    position: 'fixed'
+                                }}
+                            >
+                            </Menu>
+                        );
                         if (error) return 'error!';
                         // console.log('CASE_AND_PROJECT data', data);
                         data.caseProject.forEach((project) => {
@@ -501,7 +474,21 @@ class WxConfigSiderbar extends Component {
                 {
                     ({loading, error, data}) => {
                         // console.log('CASE_WXCONFIG_AND_PROJECT data', data);
-                        if (loading) return <Spin style={{marginLeft: 3}}/>;
+                        if (loading) return (
+                            <Menu
+                                theme="dark"
+                                mode="inline"
+                                style={{
+                                    borderRight: 0,
+                                    overflow: 'auto',
+                                    height: '100vh',
+                                    left: '0',
+                                    width: '200px',
+                                    position: 'fixed'
+                                }}
+                            >
+                            </Menu>
+                        );
                         if (error) return 'error!';
                         return (
                             <Menu
@@ -650,15 +637,15 @@ class User extends Component {
                                         }}>{this.props.languageButton}</a>
                                     </Menu.Item>
                                     <Menu.Item>
-                                        <Link to="/developer/login">
-                                            <div onClick={() => this.props.switchMenuLevel('menuLevel1', 'user')}>
+                                        <Link to="/login">
+                                            <div>
                                                 <FormattedMessage id="Account center"/>
                                             </div>
                                         </Link>
                                     </Menu.Item>
                                     <Menu.Item>
-                                        <Link to="/developer/ticket">
-                                            <div onClick={() => this.props.switchMenuLevel('menuLevel1', 'ticket')}>
+                                        <Link to="/ticket">
+                                            <div>
                                                 <FormattedMessage id="Submit Support Ticket"/>
                                             </div>
                                         </Link>

src/app/user/User.js

@@ -0,0 +1 @@
+// 还没分离

src/index.js

@@ -18,6 +18,8 @@ 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";
+import Ticket from "./ticket/Ticket";
 
 addLocaleData([...en, ...zh]);
 
@@ -78,6 +80,8 @@ class MainApp extends Component {
                             <Route path="/developer" component={DevelopVersion} />
                             {/*<Route path="/developer" component={<App language={language} changeLanguage={this.changeLanguage}/>} />*/}
                             <Route path="/common" component={BasicVersion} />
+                            <Route path="/login" component={Login} />
+                            <Route path="/ticket" component={Ticket} />
                         </Switch>
                     </Router>
                 </IntlProvider>

src/login/Login.js

@@ -2,12 +2,11 @@ import React, {Component} from 'react';
 import LoginInput from './LoginInput';
 import CloudConfig from "./CloudConfig";
 import AccountConfig from "./AccountConfig";
-import classnames from 'classnames';
-import {FormattedMessage} from 'react-intl';
 import {Layout} from 'antd';
+import {Link} from "react-router-dom";
 import './index.css';
 
-const {Content} = Layout;
+const {Content, Header} = Layout;
 
 class Login extends Component {
     constructor() {
@@ -26,18 +25,30 @@ class Login extends Component {
 
     render() {
         return (
-            <Layout style={{padding: '24px', zIndex: '0'}}>
-                <Content className={classnames('content', {'account': this.props.match.params.setting === 'account'})}>
-                    {
-                        this.props.match.params.setting ?
-                            this.props.match.params.setting === 'account' ?
-                                <AccountConfig history={this.props.history}/>
+
+            <Layout>
+                <Header className="header" style={{position: 'fixed', zIndex: 1, width: '100%'}}>
+                    <Link to="/">
+                        <div className="logo-wrapper">
+                            <div className='logo'/>
+                        </div>
+                    </Link>
+                </Header>
+
+
+                <Layout style={{marginTop: '64px', zIndex: '0'}}>
+                    <Content className={'layout-content-login'}>
+                        {
+                            this.props.match.params.setting ?
+                                this.props.match.params.setting === 'account' ?
+                                    <AccountConfig history={this.props.history}/>
+                                    :
+                                    <CloudConfig userID={this.state.userID} history={this.props.history}/>
                                 :
-                                <CloudConfig userID={this.state.userID} history={this.props.history}/>
-                            :
-                            <LoginInput history={this.props.history} getUserId={this.getUserId}/>
-                    }
-                </Content>
+                                <LoginInput history={this.props.history} getUserId={this.getUserId}/>
+                        }
+                    </Content>
+                </Layout>
             </Layout>
         )
     }

src/login/index.css

@@ -1,9 +1,12 @@
-.content {
+
+.layout-content-login {
   padding: 24px;
   min-height: 280px;
-  background: #fff
+  background: #fff;
+  margin: 48px 50px;
 }
 
+
 .account {
   background: none;
 }

src/ticket/Ticket.js

@@ -1,9 +1,11 @@
 import React, {Component} from 'react';
 import {Layout} from 'antd';
-import { Editor } from 'slate-react'
-import { Value } from 'slate'
+import './index.css';
+import {Editor} from 'slate-react'
+import {Value} from 'slate'
+import {Link} from "react-router-dom";
 
-const {Content} = Layout;
+const {Content, Header} = Layout;
 
 const initialValue = Value.fromJSON({
     document: {
@@ -34,16 +36,27 @@ class Ticket extends Component {
         }
     }
 
-    onChange = ({ value }) => {
-        this.setState({ value })
+    onChange = ({value}) => {
+        this.setState({value})
     };
 
     render() {
         return (
-            <Layout style={{padding: '24px', zIndex: '0'}}>
-                <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
-                    <Editor value={this.state.value} onChange={this.onChange} />
-                </Content>
+
+            <Layout>
+                <Header className="header" style={{position: 'fixed', zIndex: 1, width: '100%'}}>
+                    <Link to="/">
+                        <div className="logo-wrapper">
+                            <div className='logo'/>
+                        </div>
+                    </Link>
+                </Header>
+
+                <Layout style={{padding: '24px', zIndex: '0'}}>
+                    <Content style={{padding: '24px', minHeight: 280, background: '#fff'}}>
+                        <Editor value={this.state.value} onChange={this.onChange}/>
+                    </Content>
+                </Layout>
             </Layout>
         )
     }

src/ticket/index.css

@@ -0,0 +1,6 @@
+.layout-content-ticket {
+    padding: 24px;
+    min-height: 280px;
+    background: #fff;
+    margin: 48px 50px;
+}