Update example.

kktjs · Sep 19, 2019 · 4eff3ab · 4eff3ab
1 parent f722667
commit 4eff3ab
Show file tree

Hide file tree

Showing 50 changed files with 1,171 additions and 0 deletions.
diff --git a/example/less/.kktrc.js b/example/less/.kktrc.js
@@ -0,0 +1,4 @@
+
+export const loaderOneOf = [
+  require.resolve('@kkt/loader-less')
+];
diff --git a/example/less/package.json b/example/less/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^16.4.0"
   },
   "devDependencies": {
+    "@kkt/loader-less": "^1.0.2",
     "kkt": "file:../../"
   },
   "browserslist": {

diff --git a/example/rematch/.gitignore b/example/rematch/.gitignore
@@ -0,0 +1,15 @@
+node_modules
+dist
+npm-debug.log*
+package-lock.json
+.DS_Store
+.cache
+.rdoc-dist
+.vscode
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*
diff --git a/example/rematch/.kktrc.js b/example/rematch/.kktrc.js
@@ -0,0 +1,38 @@
+
+
+/**
+ * webpack loader
+ */
+
+/**
+ * Default loader
+ * @param {Object} loader
+ * Default loader Object
+ * {
+ *   url: [Function],
+ *   babel: [Function],
+ *   css: [Function],
+ *   file: [Function]
+ * }
+ */
+export function loaderDefault(loader) {
+  // {
+  //   url: [Function],
+  //   babel: [Function],
+  //   css: [Function],
+  //   file: [Function]
+  // }
+  return loader;
+} 
+
+export const loaderOneOf = [
+  [require.resolve('@kkt/loader-less'), {} ],
+]
+
+/**
+ * webpack config
+ */
+export default (conf) => {
+  console.log('~~:', conf.module.rules[1]);
+  return conf;
+}
diff --git a/example/rematch/README.md b/example/rematch/README.md
@@ -0,0 +1,2 @@
+Less
+===
diff --git a/example/rematch/mocker/index.js b/example/rematch/mocker/index.js
@@ -0,0 +1,59 @@
+const proxy = {
+  'GET /api/user': { id: 1, username: 'kenny', sex: 6 },
+  'POST /api/login': (req, res) => {
+    const { password, username } = req.body;
+    if (password === 'KKT' && username === 'KKT') {
+      return res.json({
+        updated_at: '2018/09/23 15:59:52',
+        created_at: '2018/09/23 15:59:52',
+        id: 1,
+        username: 'admin',
+        name: 'admin',
+        admin: true,
+        bio: '',
+        location: '',
+        organization: '',
+        preferred_language: '',
+        email: 'admin@admin.com',
+        public_email: null,
+        avatar: '',
+        linkedin: '',
+        web_url: null,
+        skype: '',
+        state: 'active',
+        token: '5c2d6d45-ec94-319c-a9c8-cae43e192b65',
+      });
+    }
+    return res.status(401).json({
+      error: 'bad username/password, access denied',
+    });
+  },
+  'GET /api/user/verify': (req, res) => {
+    return res.json({
+      updated_at: '2018/09/23 15:59:52',
+      created_at: '2018/09/23 15:59:52',
+      id: 1,
+      username: 'admin',
+      name: 'admin',
+      admin: true,
+      bio: '',
+      location: '',
+      organization: '',
+      preferred_language: '',
+      email: 'admin@admin.com',
+      public_email: null,
+      avatar: '',
+      linkedin: '',
+      web_url: null,
+      skype: '',
+      state: 'active',
+      token: '5c2d6d45-ec94-319c-a9c8-cae43e192b65',
+    });
+  },
+  'GET /api/user/list': [
+    { id: 1, username: 'kenny', sex: 6 },
+    { id: 2, username: 'kenny', sex: 6 },
+  ],
+};
+
+module.exports = proxy;
diff --git a/example/rematch/package.json b/example/rematch/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "default",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "start": "kkt start",
+    "build": "kkt build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kktjs/kkt.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@rematch/core": "^1.2.0",
+    "@rematch/loading": "^1.1.3",
+    "axios": "^0.19.0",
+    "history": "^4.10.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-dynamic-loadable": "^2.0.1",
+    "react-redux": "^7.1.1",
+    "react-router-dom": "^5.0.1"
+  },
+  "devDependencies": {
+    "@kkt/loader-less": "^1.0.2",
+    "kkt": "file:../../",
+    "mocker-api": "^1.9.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/example/rematch/public/favicon.ico b/example/rematch/public/favicon.ico
diff --git a/example/rematch/public/index.html b/example/rematch/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>KKT</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/example/rematch/src/Router.js b/example/rematch/src/Router.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+class RoutersController extends React.PureComponent {
+  componentDidMount() {
+    this.props.verify();
+  }
+  render() {
+    const { resetProps, token, userData } = this.props;
+    const BasicLayout = resetProps.routerData['/'].component;
+    const UserLayout = resetProps.routerData['/login'].component;
+    const HelpLayout = resetProps.routerData['/help'].component;
+    // isAuthenticated = true 表示身份经过验证
+    // 请求是否登录验证
+    if (!this.props.isAuthenticated) {
+      return (
+        <span>是否登录的验证</span>
+      );
+    }
+    resetProps.token = token;
+    resetProps.userData = userData;
+    return (
+      <Switch>
+        <Route path="/login" render={props => <UserLayout {...props} {...resetProps} />} />
+        <Route path="/help" render={props => <HelpLayout {...props} {...resetProps} />} />
+        <Route path="/" render={props => <BasicLayout {...props} {...resetProps} />} />
+      </Switch>
+    );
+  }
+}
+
+const mapState = ({ global }) => ({
+  isAuthenticated: global.isAuthenticated,
+  token: global.token,
+  userData: global.userData,
+});
+
+const mapDispatch = ({ global }) => ({
+  verify: global.verify,
+});
+
+export default connect(mapState, mapDispatch)(RoutersController);
diff --git a/example/rematch/src/common/menu.js b/example/rematch/src/common/menu.js
@@ -0,0 +1,53 @@
+
+const menuData = [
+  {
+    name: '部署',
+    icon: 'safety',
+    path: 'deploy',
+    children: [
+      {
+        name: '记录日志',
+        path: 'list',
+      },
+      {
+        name: '部署设置',
+        path: 'setting',
+      },
+    ],
+  },
+  {
+    name: '设置',
+    icon: 'safety',
+    path: 'setting',
+  },
+  {
+    name: '用户管理',
+    path: 'user',
+  },
+];
+
+
+/* eslint no-useless-escape:0 */
+const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/g;
+function isUrl(path) {
+  return reg.test(path);
+}
+function formatter(data, parentPath = '/', parentAuthority) {
+  return data.map((item) => {
+    let { path } = item;
+    if (!isUrl(path)) {
+      path = parentPath + item.path;
+    }
+    const result = {
+      ...item,
+      path,
+      authority: item.authority || parentAuthority,
+    };
+    if (item.children) {
+      result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
+    }
+    return result;
+  });
+}
+
+export const getMenuData = () => formatter(menuData);
diff --git a/example/rematch/src/common/router.js b/example/rematch/src/common/router.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import dynamic from 'react-dynamic-loadable';
+import { store } from '../store';
+
+// wrapper of dynamic
+const dynamicWrapper = (models, component) => dynamic({
+  models: () => models.map((m) => {
+    return import(`../models/${m}.js`).then((md) => {
+      const modelData = md.default || md;
+      store.model({ name: m, ...modelData });
+    });
+  }),
+  component,
+  LoadingComponent: () => <span>loading....</span>,
+});
+
+export const getRouterData = () => {
+  const conf = {
+    '/help': {
+      component: dynamicWrapper(['user'], () => import('../layouts/HelpLayout')),
+    },
+    '/help/': {
+      component: dynamicWrapper(['user'], () => import('../routes/help/dashboard')),
+    },
+    '/help/:id': {
+      component: dynamicWrapper(['user'], () => import('../routes/help/dashboard')),
+    },
+    '/login': {
+      component: dynamicWrapper(['user'], () => import('../layouts/UserLayout')),
+    },
+    '/login/': {
+      component: dynamicWrapper(['user'], () => import('../routes/login')),
+    },
+    '/': {
+      component: dynamicWrapper(['user'], () => import('../layouts/BasicLayout')),
+    },
+    '/home': {
+      component: dynamicWrapper([], () => import('../routes/home')),
+    },
+  };
+  return conf;
+};
diff --git a/example/rematch/src/components/GlobalHeader/index.js b/example/rematch/src/components/GlobalHeader/index.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './index.module.less';
+
+export default class index extends Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+  render() {
+    const { username } = this.props;
+    return (
+      <div className={styles.header}>
+        <div className={styles.inner}>
+          <Link to="/"> 首页 </Link>
+          <div className={styles.right}>
+            {username ? <Link to="/"> 你好！{username || '-'} </Link> : <Link to="/login"> 登录 </Link>}
+            {username && <Link to="/login"> 退出登录 </Link>}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/example/rematch/src/components/GlobalHeader/index.module.less b/example/rematch/src/components/GlobalHeader/index.module.less
@@ -0,0 +1,18 @@
+.header {
+  height: 50px;
+  line-height: 44px;
+  border-top: 6px solid #000;
+  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.1);
+  padding: 0 16px;
+  .inner {
+    display: flex;
+    justify-content: space-between;
+    max-width: 1024px;
+    margin: 0 auto;
+  }
+  .right {
+    a {
+      margin: 0 0 0 10px;
+    }
+  }
+}
diff --git a/example/rematch/src/components/SiderMenu/index.js b/example/rematch/src/components/SiderMenu/index.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import styles from './index.module.less';
+
+export default class SiderMenu extends Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className={styles.wapper}>
+        菜单
+      </div>
+    );
+  }
+}