init

README.md

 # open-ui
 
+测试
+yarn start
+
+构建
+yarn build
+
+运行
+node server.js

src/app.js

+
+export const dva = {
+  config: {
+    onError(err) {
+      err.preventDefault();
+      console.error(err.message);
+    },
+  },
+}

src/global.css

+
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}

src/layouts/__tests__/index.test.js

+import BasicLayout from '..';
+import renderer from 'react-test-renderer';
+
+describe('Layout: BasicLayout', () => {
+  it('Render correctly', () => {
+    const wrapper = renderer.create(<BasicLayout />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0];
+    expect(outerLayer.type).toBe('div');
+    const title = outerLayer.children[0];
+    expect(title.type).toBe('h1');
+    expect(title.children[0]).toBe('Yay! Welcome to umi!');
+  });
+});

src/layouts/index.css

+
+.layout {
+  font-family: Georgia, sans-serif;
+  text-align: center;
+}
+.title {
+  font-size: 2.5rem;
+  font-weight: normal;
+  letter-spacing: -1px;
+  background: darkslateblue;
+  padding: .6em 0;
+  color: white;
+  margin: 0;
+}
+.logo {
+  background: url(http://openapi.wjh.xiaoyun.com/file/123723k3xi91b6z46bjhth.png) no-repeat center 0;
+  background-size: cover;
+  width: 120px;
+  height: 31px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+.main{
+	width: 120px;
+  height: 31px;
+  margin: 16px 28px 16px 0;
+  float: left;
+}
+.container {
+	  margin: 0 auto;
+    max-width: 980px;
+    padding: 0 22px;
+    position: relative;
+    z-index: 2;
+}
+.footer{
+    background: rgb(0, 21, 41)
+}
+.footerItem span, .footerImageItem span{
+  font-weight: bold;
+  padding: 10px 0px;
+  margin-bottom: 10px;
+  border-bottom:1px solid #e94908;
+}
+.footerItem ul {
+  list-style: none;
+  padding: 0px;
+  margin:10px 0px;
+}
+.footerItem ul li a{
+  font-size: 10px;
+  color: #848484;
+}
+.footerImageItemMain {
+}
+.footerImageItemMain div {
+  float: left;
+  text-align: center;
+  margin: 20px 30px 0px 0px;
+}
+.footerImageItemMain div span{
+  border: none;
+  display: block;
+  font-size: 10px;
+  color: #848484;
+  padding: 0px;
+  margin: 0px;
+ /* display: flex;
+  background: url(../assets/logo.png) no-repeat center 0;
+  background-size: contain;
+  max-width: 80px;
+  height: 80px;*/
+}
+.footerImageItemMain div img{
+  width: 67px;
+}
+

src/layouts/index.js

+import styles from './index.css';
+import { Layout, Menu, Breadcrumb } from 'antd';
+const SubMenu = Menu.SubMenu;
+const { Header, Content, Footer } = Layout;
+
+function BasicLayout(props) {
+
+  function handleClick(e) {
+  	window.location.href =  e.key == 'home' ? '/' : (e.key === 'registration' ? 'game' : e.key);
+  }
+
+  function goNews(type) {
+  	window.location.hash = type;
+  	window.location.reload();
+  }
+
+  //let key = props.location.hash.
+  let pathname = props.location.pathname;
+  pathname = pathname.substr(1, pathname.length);
+
+  let key = pathname.length ? pathname : 'home';
+
+  return (
+	  <div className="layout">
+	    <div className="header" style={{ "borderBottom": '1px solid #e8e8e8' }}>
+	      <div className={styles.container}>
+	        <div className={styles.logo} />
+	        <div className={styles.main}>
+	        	<h2>开放平台</h2>
+	        </div>
+		    <Menu
+		        theme="light"
+		        mode="horizontal"
+		        defaultSelectedKeys={[key]}
+		        style={{ lineHeight: '64px', display: 'flex', 'justifyContent': 'space-between', background: '#fff', border: 'none' }}
+		        onClick={handleClick}
+		    >
+		        <Menu.Item key="home">首页</Menu.Item>
+		        <Menu.Item key="document">文档中心</Menu.Item>
+		        <Menu.Item key="news">平台公告</Menu.Item>
+		        <Menu.Item key="resource">资源下载</Menu.Item>
+		        <Menu.Item key="about">关于我们</Menu.Item>
+		    </Menu>
+	      </div>
+	    </div>
+	    <div style={{ minHeight: '280px' }}>
+	       <div style={{ background: '#fff', minHeight: 280 }}>{ props.children }</div>
+	    </div>
+	    <div style={{ background: "#333333", color: '#fff' }}>
+	    	<div className={styles.container}  style={{ background: "#333333", lineHeight: '29px', display: 'flex', 'justifyContent': 'space-between', alignItems:"start", padding: '50px 22px', flexWrap: 'wrap-reverse' }} >
+	    	    <div className={styles.footerItem}>
+	    	    	<span>开放平台</span>
+	    	    	<ul>
+	    	    		<li><a onClick = { goNews.bind(this, 'news?type=competition') } >平台简介</a></li>
+	    	    		<li><a onClick = { goNews.bind(this, 'news?type=album') } >文档中心</a></li>
+	    	    		<li><a onClick = { goNews.bind(this, 'news?type=videos') } >平台公告</a></li>
+	    	    	</ul>
+	    	    </div>
+	    	    <div className={styles.footerItem}>
+	    	    	<span>联系我们</span>
+	    	    	<ul>
+	    	    		<li><a>电话：400-060-6869</a></li>
+	    	    		<li><a>邮件：liusong@xiaoyun.com</a></li>
+	    	    		<li><a>地址：北京市东城区东四北大街107号科林大厦B座103</a></li>
+	    	    	</ul>
+	    	    </div>
+	    	    <div className={styles.footerItem}>
+	    	    	<span>相关链接</span>
+	    	    	<ul>
+	    	    		<li><a href="http://xiaoyun.com" target="_blank">小云营销官网</a></li>
+	    	    		<li><a href="http://remarketing-agent.yoo.yunpro.cn/" target="_blank">小云营销渠道后台</a></li>
+	    	    		<li><a href="http://remarketing-admin.yoo.yunpro.cn/" target="_blank">小云营销直客后台</a></li>
+	    	    	</ul>
+	    	    </div>
+	    	    <div className={styles.footerImageItem}>
+	    	    	<span>关注我们</span>
+	    	    	<div className={styles.footerImageItemMain}>
+	    	    		<div><img src="http://openapi.wjh.xiaoyun.com/file/code.png"/><span>微信公众号</span></div>
+	    	    	</div>
+	    	    </div>
+	    	</div>
+	    </div>
+	    <div style={{ background: "#2D2D2D", color: '#fff' }}>
+	    	<div className={styles.container}  style={{ background: "#2D2D2D" ,display: 'flex', flexDirection: 'column', padding: '10px 22px'  }} >
+	    	    <p style={{ margin: '2px 0'}}>©2014-2019 All Rights Reserved 北京微聚合信息技术有限公司 版权所有</p>
+	    	</div>
+	    </div>
+	  </div>
+  );
+}
+export default BasicLayout;

src/pages/.umi/DvaContainer.js

+import { Component } from 'react';
+
+class DvaContainer extends Component {
+  render() {
+    window.g_app.router(() => this.props.children);
+    return window.g_app.start()();
+  }
+}
+
+export default DvaContainer;

src/pages/.umi/TitleWrapper.jsx

+import React from 'react';
+
+export default class UmiReactTitle extends React.Component {
+  componentDidMount() {
+    document.title = this.props.route._title;
+  }
+  getTitle() {
+    const separator = '' || ' - ';
+    const title = this.props.route._title.split(separator).map(item => {
+      return formatMessage({
+        id: item.trim(),
+        defaultMessage: item.trim(),
+      });
+    })
+    return title.join(separator);
+  }
+  componentWillUnmount() {
+    if (document.title === this.props.route._title) {
+      document.title = this.props.route._title;
+    }
+  }
+  render() {
+    return this.props.children;
+  }
+}

src/pages/.umi/initDva.js

+import dva from 'dva';
+import createLoading from 'dva-loading';
+
+const runtimeDva = window.g_plugins.mergeConfig('dva');
+let app = dva({
+  history: window.g_history,
+  
+  ...(runtimeDva.config || {}),
+});
+
+window.g_app = app;
+app.use(createLoading());
+(runtimeDva.plugins || []).forEach(plugin => {
+  app.use(plugin);
+});
+
+

src/pages/.umi/initHistory.js

+// create history
+window.g_history = require('umi/_createHistory').default({
+  basename: window.routerBase,
+});

src/pages/.umi/polyfills.js

+import '@babel/polyfill';
+

src/pages/.umi/router.js

+import React from 'react';
+import { Router as DefaultRouter, Route, Switch } from 'react-router-dom';
+import dynamic from 'umi/dynamic';
+import renderRoutes from 'umi/_renderRoutes';
+import _dvaDynamic from 'dva/dynamic'
+
+let Router = require('dva/router').routerRedux.ConnectedRouter;
+
+let routes = [
+  {
+    "path": "/",
+    "component": _dvaDynamic({
+  
+  component: () => import(/* webpackChunkName: "layouts__index" */'../../layouts/index.js'),
+  
+}),
+    "routes": [
+      {
+        "path": "/",
+        "exact": true,
+        "component": _dvaDynamic({
+  
+  component: () => import(/* webpackChunkName: "p__index" */'../index.js'),
+  
+}),
+        "_title": "小云营销开放平台",
+        "_title_default": "小云营销开放平台"
+      },
+      {
+        "path": "/about",
+        "exact": true,
+        "component": _dvaDynamic({
+  
+  component: () => import(/* webpackChunkName: "p__about" */'../about.js'),
+  
+}),
+        "_title": "小云营销开放平台",
+        "_title_default": "小云营销开放平台"
+      },
+      {
+        "path": "/document",
+        "exact": true,
+        "component": _dvaDynamic({
+  
+  component: () => import(/* webpackChunkName: "p__document" */'../document.js'),
+  
+}),
+        "_title": "小云营销开放平台",
+        "_title_default": "小云营销开放平台"
+      },
+      {
+        "path": "/news",
+        "exact": true,
+        "component": _dvaDynamic({
+  
+  component: () => import(/* webpackChunkName: "p__news" */'../news.js'),
+  
+}),
+        "_title": "小云营销开放平台",
+        "_title_default": "小云营销开放平台"
+      },
+      {
+        "path": "/resource",
+        "exact": true,
+        "component": _dvaDynamic({
+  
+  component: () => import(/* webpackChunkName: "p__resource" */'../resource.js'),
+  
+}),
+        "_title": "小云营销开放平台",
+        "_title_default": "小云营销开放平台"
+      },
+      {
+        "component": () => React.createElement(require('/Users/admin/Desktop/projects/open-ui/node_modules/umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: false }),
+        "_title": "小云营销开放平台",
+        "_title_default": "小云营销开放平台"
+      }
+    ],
+    "_title": "小云营销开放平台",
+    "_title_default": "小云营销开放平台"
+  },
+  {
+    "component": () => React.createElement(require('/Users/admin/Desktop/projects/open-ui/node_modules/umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: false }),
+    "_title": "小云营销开放平台",
+    "_title_default": "小云营销开放平台"
+  }
+];
+window.g_routes = routes;
+window.g_plugins.applyForEach('patchRoutes', { initialValue: routes });
+
+// route change handler
+function routeChangeHandler(location, action) {
+  window.g_plugins.applyForEach('onRouteChange', {
+    initialValue: {
+      routes,
+      location,
+      action,
+    },
+  });
+}
+window.g_history.listen(routeChangeHandler);
+routeChangeHandler(window.g_history.location);
+
+export default function RouterWrapper() {
+  return (
+<Router history={window.g_history}>
+      { renderRoutes(routes, {}) }
+    </Router>
+  );
+}

src/pages/.umi/umi.js

+import './polyfills';
+
+import '@tmp/initHistory';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+
+// runtime plugins
+window.g_plugins = require('umi/_runtimePlugin');
+window.g_plugins.init({
+  validKeys: ['patchRoutes','render','rootContainer','modifyRouteProps','onRouteChange','dva',],
+});
+window.g_plugins.use(require('../../../node_modules/umi-plugin-dva/lib/runtime'));
+window.g_plugins.use(require('@/app'));
+
+require('@tmp/initDva');
+
+// render
+let oldRender = () => {
+  const rootContainer = window.g_plugins.apply('rootContainer', {
+    initialValue: React.createElement(require('./router').default),
+  });
+  ReactDOM.render(
+    rootContainer,
+    document.getElementById('root'),
+  );
+};
+const render = window.g_plugins.compose('render', { initialValue: oldRender });
+
+const moduleBeforeRendererPromises = [];
+
+Promise.all(moduleBeforeRendererPromises).then(() => {
+  render();
+}).catch((err) => {
+  window.console && window.console.error(err);
+});
+
+require('../../global.css');
+
+// hot module replacement
+if (module.hot) {
+  module.hot.accept('./router', () => {
+    oldRender();
+  });
+}

src/pages/__tests__/index.test.js

+import Index from '..';
+import renderer from 'react-test-renderer';
+
+
+describe('Page: index', () => {
+  it('Render correctly', () => {
+    const wrapper = renderer.create(<Index />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0];
+    expect(outerLayer.type).toBe('div');
+    expect(outerLayer.children.length).toBe(2);
+    
+  });
+});

src/pages/about.css

+
+.container {
+ margin: 0 auto;
+    max-width: 980px;
+    padding: 0 22px;
+    position: relative;
+    z-index: 2;
+}
+
+.container .box {
+	display: flex;
+	margin: 30px 0px;
+}
+.container .box img{
+	width: 400px;
+	height: 223px;
+}
+.container .box ul.contact{
+	list-style: none;
+	padding: 40px 20px;
+}
+.container .box ul.contact>li{
+	display: flex;
+	height: 37px;
+}
+.container .box ul.contact>li span.label{
+	width: 70px;
+	font-weight: bold;
+}
\ No newline at end of file

src/pages/about.js

+
+import styles from './about.css';
+
+export default function() {
+  return (
+    <div className={styles.container}>
+        <div className={styles.box}>
+          <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552274917584.png"/>
+          <ul className={styles.contact}>
+            <li>
+              <span className={styles.label}>官&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网</span>
+              <span>www.xiaoyun.com</span>
+            </li>
+            <li>
+              <span className={styles.label}>联系我们</span>
+              <span>400-060-6869</span>
+            </li>
+            <li>
+              <span className={styles.label}>公司地址</span>
+              <span>北京市东城区东四北大街107号科林大厦B座103</span>
+            </li>
+          </ul>
+        </div>
+    </div>
+  );
+}

src/pages/document.css

+
+.container {
+    margin: 0 auto;
+    max-width: 980px;
+    padding: 0 22px;
+    position: relative;
+    z-index: 2;
+}
+
+p{
+	text-indent: 2em
+}
+
+.container div.title{
+	border-left: 2px solid #e94908;
+    margin: 10px 0px;
+    padding: 0px 13px;
+}
+.container div.title h4{
+	color: #e94908;
+}
+.container ul{
+	list-style: none;
+}
+.container ul.meta > li{
+	display: flex;
+	height: 37px;
+    line-height: 37px;
+    border-left: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+}
+.container ul.meta > li div.label{
+	width: 30%;
+}
+.container ul.meta > li div.content{
+	width: 70%;
+}
\ No newline at end of file

src/pages/index.css

+
+.normal {
+  font-family: Georgia, sans-serif;
+  margin-top: 30px;
+  text-align: center;
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 980px;
+    padding: 0 22px;
+    position: relative;
+    z-index: 2;
+}
+
+.box{
+  display: flex;
+  flex-direction: row;
+}
+
+.box img{ 
+  width: 400px;
+  height: 223px;
+}
+.box div{
+  text-align: left;
+  padding: 0px 0px 0px 30px;
+  width: 480px;
+  width: 480px;
+}
+.box div p{
+  font-size: 1.1em;
+}
+
+.container .case{
+  text-align: left;
+  margin: 18px 0px;
+
+}
+.container  .case .casebox{
+  display: flex;
+  justify-content: space-between;
+}
+.container  .case .casebox div{
+    width: 49%;
+    padding: 16px 10px;
+    background: #efefef;
+}
+.container  .case .casebox div p{
+  margin: 0px;
+}
+
+.container .industry {
+  text-align: left;
+  margin: 18px 0px;
+}
+
+.container .industrybox{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap-reverse;
+}
+.container .industrybox div{
+  width:129px;
+  height: 123px;
+  margin: 0px 0px 30px 0px;
+  text-align: center;
+}
+.container .industrybox div img{
+  width: 100%;
+}
+.container .industrybox div span{
+  display: block;
+  font-size: 1em;
+  margin: 10px;
+}
\ No newline at end of file

src/pages/index.js

+import styles from './index.css';
+import { Button } from 'antd';
+
+function go() {
+  window.location.href="/document";
+}
+
+export default function() {
+  return (
+    <div className={styles.normal}>
+    <div className={styles.container}>
+      <div className = {styles.box}>
+        <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552274917584.png"/>
+        <div>
+          <h1>
+              成为小云企业开发者
+          </h1>
+          <p>  
+              小云为企业提供了一个大数据AI精准营销的基本框架。在此平台上，拥有无限的应用扩展机会。基于小云开放平台，企业和第三方开发者均可把小云的数据精准营销能力变成自己产品和解决方案的一部分。最终通过加入小云开放平台，获得强大的大数据AI精准营销能力，帮助您快速获得客户和收入。
+          </p>
+          <Button type="primary">立即咨询</Button>
+        </div>
+      </div>
+    </div>
+    <div className={styles.container}>
+      <div className={styles.industry}>
+        <h2>行业客户</h2>
+        <div className={styles.industrybox}>
+            <div>
+              <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552286813595.png"/>
+              <span>汽车行业</span>
+            </div>
+            <div>
+              <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552286835697.png"/>
+              <span>金融行业</span>
+            </div>
+            <div>
+              <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552286852709.png"/>
+              <span>教育行业</span>
+            </div>
+            <div>
+              <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552286870056.png"/>
+              <span>房产行业</span>
+            </div>
+            <div>
+              <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552286886552.png"/>
+              <span>医美行业</span>
+            </div>
+            <div>
+              <img src="http://openapi.wjh.xiaoyun.com/file/license-pics-1552286902728.png"/>
+              <span>装修行业</span>
+            </div>
+        </div>
+      </div>
+    </div>
+    <div className={styles.container}>
+      <div className={styles.case}>
+        <h2>合作客户案例</h2>
+        <div className={ styles.casebox }>
+          <div>
+            <p>
+              <b>某电销机器人：</b>一周将小云大数据AI精准营销接入自有机器人，作为一个增值业务出现，快速得到代理商和客户的认可，客户获取速度明显加快，客单价显著提升
+            </p>
+          </div>
+          <div>
+            <p>
+              <b>某行业CRM：</b>将小云大数据AI精准营销接入自己的CRM产品，客户可以精准的得到有明确消费动机的线索资源，提高了客户对CRM的留存和活跃度，显著提高了客户的续费能力
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <span style={{ marginRight: '10px' }}>已了解，直接去</span><Button size="large" type="primary" style={{ margin: '0px 0px 20px 0px' }} onClick = { go }>开发文档</Button>
+    </div>
+    </div>
+  );
+}

src/pages/news.css

+
+.normal {
+  background: #9FF279;
+}
+
+
+.container {
+    margin: 0 auto;
+    max-width: 980px;
+    padding: 0 22px;
+    position: relative;
+    z-index: 2;
+}
+.container ul{
+	list-style: none;
+}
+.container ul > li{
+	display: flex;
+	height: 37px;
+    line-height: 37px;
+   	justify-content: space-between;
+   	border-bottom: 1px solid #eee;
+}
+.container ul > li a.new {
+	color: #e94908;
+}
+.container ul > li a{
+	color: #000;
+}

src/pages/news.js

+
+import styles from './news.css';
+import { Tabs, Table } from 'antd';
+const TabPane = Tabs.TabPane;
+
+export default function() {
+  return (
+    <div>
+     	<div className={styles.container}>
+     		<div style={{ padding: "20px 0px"}}>
+     		<h2 style={{ padding: "15px 0px"}}>平台公告</h2>
+     		<Tabs
+	          defaultActiveKey="0"
+	          tabPosition={'left'}
+	          style={{ minHeight: 300 }}
+	        >
+	          <TabPane tab="所有公告" key="0">
+	          	<ul>
+	     			<li>
+	     				<a className={styles.new}>
+	     				 	开放平台上线了!
+	     				</a>
+	     				<span>2019-01-09</span>
+	     			</li>
+	     			<li>
+	     				<a>
+	     				 	了解小云营销!
+	     				</a>
+	     				<span>2019-01-01</span>
+	     			</li>
+	     		</ul>
+	          </TabPane>
+	          <TabPane tab="常见问题" key="4">暂无公告</TabPane>
+	          <TabPane tab="运营商通知" key="1">暂无公告</TabPane>
+			  <TabPane tab="接口调整" key="2">暂无公告</TabPane>
+			  <TabPane tab="活动" key="3">暂无公告</TabPane>
+	        </Tabs>
+     		</div>
+     	</div>
+    </div>
+  );
+}

src/pages/resource.css

+
+.container {
+    margin: 0 auto;
+    max-width: 980px;
+    padding: 0 22px;
+    position: relative;
+    z-index: 2;
+}
+.container .none{
+	width: 100%;
+	display: flex;
+	justify-content: center;
+    height: 500px;
+    align-items: center;
+    padding: 20px;
+}

src/pages/resource.js

+
+import styles from './resource.css';
+import { Alert } from 'antd';
+export default function() {
+  return (
+    <div className={styles.container}>
+     	<div className={styles.none}>~ 暂无资源 ~</div>
+    </div>
+  );
+}