From 3c6830c3a54be8584d3a526de8389052951e673a Mon Sep 17 00:00:00 2001 From: LevanDD <441489115@qq.com> Date: Tue, 13 Jun 2017 18:30:58 +0800 Subject: [PATCH] router --- dist/bundle.js | 462 +++++++++++--------- dist/index.html | 2 +- src/common/common.css | 28 ++ src/components/App/index.css | 3 - src/components/App/index.html | 4 - src/components/App/index.js | 10 - src/components/Login/index.js | 1 - src/components/LoginInfo/index.css | 4 + src/components/LoginInfo/index.html | 3 + src/components/{Main => LoginInfo}/index.js | 6 +- src/components/Main/index.html | 11 - src/components/Menu/index.js | 5 +- src/components/NavLink/index.html | 2 +- src/components/NavLink/index.js | 11 +- src/components/SideBar/index.css | 12 - src/components/SideBar/index.html | 8 - src/components/SideBar/index.js | 8 - src/components/Tab/index.css | 26 +- src/components/Tab/index.html | 12 +- src/components/Tab/index.js | 8 +- src/components/TabTitle/index.css | 10 +- src/components/TabTitle/index.js | 4 +- src/components/index.js | 4 +- src/{components/Main => }/index.css | 22 +- src/index.html | 25 +- src/index.js | 51 ++- src/routes/pages.js | 51 +++ src/routes/router.js | 22 + 28 files changed, 513 insertions(+), 302 deletions(-) delete mode 100644 src/components/App/index.css delete mode 100644 src/components/App/index.html delete mode 100644 src/components/App/index.js create mode 100644 src/components/LoginInfo/index.css create mode 100644 src/components/LoginInfo/index.html rename src/components/{Main => LoginInfo}/index.js (57%) delete mode 100644 src/components/Main/index.html delete mode 100644 src/components/SideBar/index.css delete mode 100644 src/components/SideBar/index.html delete mode 100644 src/components/SideBar/index.js rename src/{components/Main => }/index.css (62%) create mode 100644 src/routes/pages.js create mode 100644 src/routes/router.js diff --git a/dist/bundle.js b/dist/bundle.js index 0e19f0d..61a6aa6 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -63,7 +63,7 @@ /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 43); +/******/ return __webpack_require__(__webpack_require__.s = 44); /******/ }) /************************************************************************/ /******/ ([ @@ -146,7 +146,7 @@ function toComment(sourceMap) { return '/*# ' + data + ' */'; } -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(27).Buffer)) +/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(28).Buffer)) /***/ }), /* 1 */ @@ -186,7 +186,7 @@ var stylesInDom = {}, singletonElement = null, singletonCounter = 0, styleElementsInsertedAtTop = [], - fixUrls = __webpack_require__(30); + fixUrls = __webpack_require__(31); module.exports = function(list, options) { if(typeof DEBUG !== "undefined" && DEBUG) { @@ -8490,7 +8490,7 @@ https://github.com/RubyLouvre/avalon/tree/2.2.4 return avalon; }); -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6))) +/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) /***/ }), /* 3 */ @@ -19052,7 +19052,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol return jQuery; }); -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(31)(module))) +/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(32)(module))) /***/ }), /* 4 */ @@ -19095,32 +19095,6 @@ var parseCssModule = exports.parseCssModule = function parseCssModule(styles, tm /* 5 */ /***/ (function(module, exports, __webpack_require__) { -// style-loader: Adds some css to the DOM by adding a \ No newline at end of file + avalon spa demo
\ No newline at end of file diff --git a/src/common/common.css b/src/common/common.css index b656e00..726b1c4 100644 --- a/src/common/common.css +++ b/src/common/common.css @@ -37,3 +37,31 @@ select { .border-left { border-left: solid 1px #ccc; } + +.zindex10 { + z-index: 10; +} + +.zindex100 { + z-index: 100; +} + +.zindex1000 { + z-index: 1000; +} + +.zindex10000 { + z-index: 10000; +} + +.zindex100000 { + z-index: 100000; +} + +.zindex1000000 { + z-index: 1000000; +} + +.zindex10000000 { + z-index: 10000000; +} diff --git a/src/components/App/index.css b/src/components/App/index.css deleted file mode 100644 index 3a3dda3..0000000 --- a/src/components/App/index.css +++ /dev/null @@ -1,3 +0,0 @@ -body > .container-full { - height: 100%; -} diff --git a/src/components/App/index.html b/src/components/App/index.html deleted file mode 100644 index a39893f..0000000 --- a/src/components/App/index.html +++ /dev/null @@ -1,4 +0,0 @@ -
- - -
diff --git a/src/components/App/index.js b/src/components/App/index.js deleted file mode 100644 index 4d8e6a3..0000000 --- a/src/components/App/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import './index.css'; -import avalon, { component } from 'avalon2'; -import { parseCssModule } from '../../common/common'; - -// console.log(parseCssModule(styles, require('./index.html')); - -component('ms-app', { - template: require('./index.html'), - defaults: {} -}) diff --git a/src/components/Login/index.js b/src/components/Login/index.js index 3a180e9..e242a79 100644 --- a/src/components/Login/index.js +++ b/src/components/Login/index.js @@ -1,6 +1,5 @@ import avalon, { component } from 'avalon2'; import '../../assets/iconfont/iconfont.css'; -import '../../common/common.css'; import './index.css'; component('ms-login', { diff --git a/src/components/LoginInfo/index.css b/src/components/LoginInfo/index.css new file mode 100644 index 0000000..9ca0fe8 --- /dev/null +++ b/src/components/LoginInfo/index.css @@ -0,0 +1,4 @@ +.logininfo { + height: 100%; + background: #10182f; +} diff --git a/src/components/LoginInfo/index.html b/src/components/LoginInfo/index.html new file mode 100644 index 0000000..5bc3d99 --- /dev/null +++ b/src/components/LoginInfo/index.html @@ -0,0 +1,3 @@ +
+

hello,Levan

+
diff --git a/src/components/Main/index.js b/src/components/LoginInfo/index.js similarity index 57% rename from src/components/Main/index.js rename to src/components/LoginInfo/index.js index e791535..979236a 100644 --- a/src/components/Main/index.js +++ b/src/components/LoginInfo/index.js @@ -1,8 +1,10 @@ import avalon, { component } from 'avalon2'; +import '../../assets/iconfont/iconfont.css'; import './index.css'; -component('ms-main', { +component('ms-logininfo', { template: require('./index.html'), defaults: { + account: {} } -}) +}); diff --git a/src/components/Main/index.html b/src/components/Main/index.html deleted file mode 100644 index 995000f..0000000 --- a/src/components/Main/index.html +++ /dev/null @@ -1,11 +0,0 @@ -
-
- -
-
- -
-
- -
-
diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index de11163..2a4fd82 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -4,9 +4,6 @@ import './index.css'; component('ms-menu', { template: require('./index.html'), defaults: { - menus: [ - { id: 1, title: 'page1', path: '/page1', pid: 0 }, - { id: 2, title: 'page2', path: '/page2', pid: 0 } - ] + menus:[] } }) diff --git a/src/components/NavLink/index.html b/src/components/NavLink/index.html index 0336299..deff094 100644 --- a/src/components/NavLink/index.html +++ b/src/components/NavLink/index.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/components/NavLink/index.js b/src/components/NavLink/index.js index 2148477..554373c 100644 --- a/src/components/NavLink/index.js +++ b/src/components/NavLink/index.js @@ -5,6 +5,15 @@ component('ms-navlink', { template: require('./index.html'), defaults: { title: '', - to: '' + to: '', + parseHref() { + if (!this.to) + return ''; + else if (this.to === '/') { + return ''; + } else { + return '#' + this.to; + } + } } }) diff --git a/src/components/SideBar/index.css b/src/components/SideBar/index.css deleted file mode 100644 index 2cccee0..0000000 --- a/src/components/SideBar/index.css +++ /dev/null @@ -1,12 +0,0 @@ -.sidebar { - float: left; - width: 200px; - height: 100%; - background: #203445; -} - -.sidebar__title { - padding: .5rem; - background: #022334; - color: #eee; -} diff --git a/src/components/SideBar/index.html b/src/components/SideBar/index.html deleted file mode 100644 index 7d61100..0000000 --- a/src/components/SideBar/index.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js deleted file mode 100644 index 775eda5..0000000 --- a/src/components/SideBar/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import avalon, { component } from 'avalon2'; -import './index.css'; - -component('ms-sidebar', { - template: require('./index.html'), - defaults: { - } -}) diff --git a/src/components/Tab/index.css b/src/components/Tab/index.css index 465eab9..defd96a 100644 --- a/src/components/Tab/index.css +++ b/src/components/Tab/index.css @@ -17,14 +17,30 @@ left: 0; right: 0; top: 0; - height: 3.15rem; - line-height: 3rem; + height: 3.5rem; + line-height: 3.4rem; border-bottom: solid .2rem #203040; } .tab__header .left { float: left; - border-right: solid 2px #ccc; + border-right: solid 1px #e7e7e7; +} + +.tab__header .glyphicon { + padding: 0 .3rem; +} + +.tab__header .link { + float: left; + height: 100%; + padding: 0 1rem; + border-right: solid 1px #e7e7e7; + color: #aaa; +} + +.tab__header .link:hover { + background: #eee; } .tab__header .mid { @@ -33,14 +49,14 @@ .tab__header .right { float: right; - border-left: solid 2px #ccc; + border-left: solid 1px #e7e7e7; } .tab__content { position: absolute; left: 0; right: 0; - top: 3.2rem; + top: 3.5rem; bottom: 0; z-index: 101; overflow: auto; diff --git a/src/components/Tab/index.html b/src/components/Tab/index.html index 0481cd0..e80c074 100644 --- a/src/components/Tab/index.html +++ b/src/components/Tab/index.html @@ -1,14 +1,18 @@
diff --git a/src/components/Tab/index.js b/src/components/Tab/index.js index 858fdd2..0841366 100644 --- a/src/components/Tab/index.js +++ b/src/components/Tab/index.js @@ -5,13 +5,11 @@ component('ms-tab', { template: require('./index.html'), defaults: { name: 'pagetab', - pages: [ - { title: 'home', tmpl: '', checked: true }, - { title: 'page1', tmpl: '', checked: false }, - { title: 'page2', tmpl: '', checked: false } + items: [ + ], onTabTitleClick(checked) { - this.pages.forEach(el => el.checked = false); + this.items.find(el => el.checked).checked = false; } } }) diff --git a/src/components/TabTitle/index.css b/src/components/TabTitle/index.css index 5cdd515..dc69e05 100644 --- a/src/components/TabTitle/index.css +++ b/src/components/TabTitle/index.css @@ -1,7 +1,11 @@ +.tab a { + text-decoration: none; +} + .tab .tab__title { float: left; display: block; - border-right: solid 1px #ddd; + border-right: solid 1px #e7e7e7; } .tab__title__label { @@ -12,8 +16,8 @@ padding: 0 .8rem; } -.tab a { - text-decoration: none; +.tab__title__label:hover { + background: #eee; } .tab__title__label.checked { diff --git a/src/components/TabTitle/index.js b/src/components/TabTitle/index.js index b659a75..56a6a2c 100644 --- a/src/components/TabTitle/index.js +++ b/src/components/TabTitle/index.js @@ -5,9 +5,7 @@ component('ms-tabtitle', { template: require('./index.html'), defaults: { el: {}, - click() { - - }, + click() {}, onClick() { this.click(); this.el.checked = true; diff --git a/src/components/index.js b/src/components/index.js index 3aae8c8..542e061 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,11 +1,9 @@ import './Login'; import './Menu'; -import './SideBar'; -import './Main'; -import './App'; import './Topbar'; import './StatusBar'; import './Tab'; import './TabTitle'; import './TabPage'; import './NavLink'; +import './LoginInfo'; diff --git a/src/components/Main/index.css b/src/index.css similarity index 62% rename from src/components/Main/index.css rename to src/index.css index 7832089..ce4e290 100644 --- a/src/components/Main/index.css +++ b/src/index.css @@ -1,10 +1,26 @@ +.sidebar { + float: left; + width: 20rem; + height: 100%; + background: #203445; +} + +.sidebar__header { + height: 12rem; + padding: .5rem; + background: #022334; + color: #eee; +} + +.sidebar__nav {} + .main { overflow: hidden; height: 100%; position: relative; } -.top { +.main .main__top { position: absolute; left: 0; right: 0; @@ -14,7 +30,7 @@ border-bottom: solid 1px #e7e7e7; } -.content { +.main .main__content { position: absolute; left: 0; right: 0; @@ -25,7 +41,7 @@ overflow: hidden; } -.footer { +.main .main__footer { position: absolute; left: 0; right: 0; diff --git a/src/index.html b/src/index.html index 318edee..ea545b2 100644 --- a/src/index.html +++ b/src/index.html @@ -7,8 +7,29 @@ avalon spa demo - - + + +
+
+ +
+
+ +
+
+ +
+
diff --git a/src/index.js b/src/index.js index 746e027..195dd3d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,60 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap'; import './common/common.css'; +import './index.css'; import './components'; import './pages'; import avalon, { define } from 'avalon2'; +import './routes/router'; +import pages from './routes/pages'; define({ - $id: 'app' + $id: 'app', + tabItems: [{ + id: 10000, + name: 'home', + title: '首页', + path: '/home', + tmpl: '', + checked: true, + pid: 10000 + }], + routeHandler(tabitem) { + var item = this.tabItems.find(el => el.checked); + if (item) item.checked = false; + + var currItem = this.tabItems.find(el => el.id === tabitem.id); + if (!currItem) { + tabitem.checked = true; + this.tabItems.push(tabitem); + } else { + currItem.checked = true; + } + } +}); + +var menus = pages.filter(el => el.pid === 0), + paths = pages.filter(el => el.pid !== 0); + +define({ + $id: 'vm_sidebar', + menus, + paths, + getSubmenus(m) { + var sms = this.paths.filter(el => el.pid === m.id); + return sms; + } }); + +(function(paths) { + var app = avalon.vmodels['app']; + + paths.forEach(el => { + window.Router.route(el.path, () => { + app.routeHandler(el); + }); + }); +})(paths); + +window.Router.init(); diff --git a/src/routes/pages.js b/src/routes/pages.js new file mode 100644 index 0000000..69b97bd --- /dev/null +++ b/src/routes/pages.js @@ -0,0 +1,51 @@ +var pages = [{ + id: 1, + name: 'basic', + title: '基本资料', + path: '/', + tmpl: '', + checked: true, + pid: 0 +},{ + id: 2, + name: 'basic', + title: '其他', + path: '/', + tmpl: '', + checked: true, + pid: 0 +},{ + id: 100, + name: 'page1', + title: 'page1', + path: '/page1', + tmpl: '', + checked: false, + pid: 1 +}, { + id: 101, + name: 'page2', + title: 'page2', + path: '/page2', + tmpl: '', + checked: false, + pid: 1 +}, { + id: 200, + name: 'page3', + title: 'page3', + path: '/page3', + tmpl: '', + checked: false, + pid: 2 +}, { + id: 201, + name: 'page4', + title: 'page4', + path: '/page4', + tmpl: '', + checked: false, + pid: 2 +}] + +export default pages; diff --git a/src/routes/router.js b/src/routes/router.js new file mode 100644 index 0000000..711e5eb --- /dev/null +++ b/src/routes/router.js @@ -0,0 +1,22 @@ +function Router() { + this.routes = {}; + this.currentUrl = ''; +} + +Router.prototype.route = function(path, callback) { + this.routes[path] = callback || function() {}; +}; + +Router.prototype.refresh = function() { + this.currentUrl = location.hash.slice(1) || '/'; + + var cb = this.routes[this.currentUrl]; + cb && cb(); +}; + +Router.prototype.init = function() { + window.addEventListener('load', this.refresh.bind(this), false); + window.addEventListener('hashchange', this.refresh.bind(this), false); +} + +window.Router = new Router();