├── .gitignore
├── LICENSE
├── README.md
├── server
    ├── app.js
    ├── bin
    │   └── www
    ├── build
    │   └── config.gypi
    ├── config.js
    ├── controllers
    │   ├── account.js
    │   ├── client.js
    │   ├── home.js
    │   ├── node.js
    │   └── signin.js
    ├── db.json
    ├── middleware
    │   ├── koa-auth.js
    │   └── koa-less.js
    ├── models
    │   ├── account.js
    │   └── node.js
    ├── package-lock.json
    ├── package.json
    ├── routers
    │   ├── api.js
    │   ├── client.js
    │   ├── home.js
    │   ├── index.js
    │   └── signin.js
    ├── shell
    │   ├── agent.sh
    │   ├── install.sh
    │   └── uninstall.sh
    ├── utils
    │   ├── _.js
    │   ├── base64.js
    │   ├── db
    │   │   └── lowdb.js
    │   ├── format.js
    │   └── print.js
    └── yarn.lock
└── src
    ├── README.md
    ├── app.js
    ├── build.html
    ├── build
        ├── index.html
        └── static
        │   ├── css
        │       ├── app.a0713f88.css
        │       ├── fa-solid-900.woff
        │       └── fa-solid-900.woff2
        │   └── js
        │       ├── app.42aec597.js
        │       └── vendor.42aec597.js
    ├── components
        ├── Common
        │   ├── Chart
        │   │   ├── Lite
        │   │   │   ├── index.html
        │   │   │   ├── index.js
        │   │   │   └── index.less
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── style.less
        │   ├── Datetime
        │   │   ├── index.js
        │   │   └── style.less
        │   ├── Directive.js
        │   ├── Filter.js
        │   ├── Message
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── Modal
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── Notfound
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── Paginate
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── Select
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── Spin
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── style.less
        │   ├── Table
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── i10n
        │   │   └── index.js
        │   └── index.js
        ├── Layout
        │   ├── Header
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── index.less
        │   ├── index.html
        │   └── index.js
        ├── Server
        │   ├── Create
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── Edit
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── List
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── style.less
        │   ├── Remove
        │   │   ├── index.html
        │   │   └── index.js
        │   ├── View
        │   │   ├── index.html
        │   │   ├── index.js
        │   │   └── style.less
        │   └── index.js
        ├── Setting
        │   ├── index.html
        │   └── index.js
        ├── Signin
        │   ├── index.html
        │   └── index.js
        └── index.js
    ├── config
        ├── depends.js
        └── sl.js
    ├── index.html
    ├── package.json
    ├── router.js
    ├── services
        ├── index.js
        ├── message.js
        ├── run.js
        └── session.js
    ├── styles
        ├── base
        │   ├── anim.less
        │   ├── button.less
        │   ├── dropdown.less
        │   ├── form.less
        │   ├── message.less
        │   ├── modal.less
        │   ├── progress.less
        │   ├── reset.less
        │   ├── section.less
        │   ├── table.less
        │   └── vars.less
        ├── font
        │   └── fontawesome
        │   │   ├── css
        │   │       ├── fa-brands.css
        │   │       ├── fa-brands.min.css
        │   │       ├── fa-regular.css
        │   │       ├── fa-regular.min.css
        │   │       ├── fa-solid.css
        │   │       ├── fa-solid.min.css
        │   │       ├── fontawesome-all.css
        │   │       ├── fontawesome-all.min.css
        │   │       ├── fontawesome.css
        │   │       └── fontawesome.min.css
        │   │   ├── less
        │   │       ├── _animated.less
        │   │       ├── _bordered-pulled.less
        │   │       ├── _core.less
        │   │       ├── _fixed-width.less
        │   │       ├── _icons.less
        │   │       ├── _larger.less
        │   │       ├── _list.less
        │   │       ├── _mixins.less
        │   │       ├── _rotated-flipped.less
        │   │       ├── _screen-reader.less
        │   │       ├── _stacked.less
        │   │       ├── _variables.less
        │   │       ├── fa-brands.less
        │   │       ├── fa-regular.less
        │   │       ├── fa-solid.less
        │   │       └── fontawesome.less
        │   │   ├── scss
        │   │       ├── _animated.scss
        │   │       ├── _bordered-pulled.scss
        │   │       ├── _core.scss
        │   │       ├── _fixed-width.scss
        │   │       ├── _icons.scss
        │   │       ├── _larger.scss
        │   │       ├── _list.scss
        │   │       ├── _mixins.scss
        │   │       ├── _rotated-flipped.scss
        │   │       ├── _screen-reader.scss
        │   │       ├── _stacked.scss
        │   │       ├── _variables.scss
        │   │       ├── fa-brands.scss
        │   │       ├── fa-regular.scss
        │   │       ├── fa-solid.scss
        │   │       └── fontawesome.scss
        │   │   └── webfonts
        │   │       ├── fa-brands-400.eot
        │   │       ├── fa-brands-400.svg
        │   │       ├── fa-brands-400.ttf
        │   │       ├── fa-brands-400.woff
        │   │       ├── fa-brands-400.woff2
        │   │       ├── fa-regular-400.eot
        │   │       ├── fa-regular-400.svg
        │   │       ├── fa-regular-400.ttf
        │   │       ├── fa-regular-400.woff
        │   │       ├── fa-regular-400.woff2
        │   │       ├── fa-solid-900.eot
        │   │       ├── fa-solid-900.svg
        │   │       ├── fa-solid-900.ttf
        │   │       ├── fa-solid-900.woff
        │   │       └── fa-solid-900.woff2
        ├── main.less
        ├── module
        │   ├── layout.less
        │   └── signbox.less
        ├── partials
        │   └── header.less
        └── skin
        │   └── ios.less
    ├── utils
        ├── _.js
        ├── datetime.js
        ├── format.js
        ├── http.js
        └── index.js
    ├── webpack.config.js
    ├── webpack.config.prod.js
    └── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | ## Gitignore by github
 2 | ## -------------------
 3 | /shell
 4 | /release
 5 | 
 6 | # Logs
 7 | logs
 8 | *.log
 9 | npm-debug.log*
10 | 
11 | # Runtime data
12 | pids
13 | *.pid
14 | *.seed
15 | *.pid.lock
16 | 
17 | # Directory for instrumented libs generated by jscoverage/JSCover
18 | lib-cov
19 | 
20 | # Coverage directory used by tools like istanbul
21 | coverage
22 | 
23 | # nyc test coverage
24 | .nyc_output
25 | 
26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
27 | .grunt
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | public/dist
35 | 
36 | # Dependency directories
37 | node_modules
38 | jspm_packages
39 | 
40 | # Optional npm cache directory
41 | .npm
42 | 
43 | # Optional eslint cache
44 | .eslintcache
45 | 
46 | # Optional REPL history
47 | .node_repl_history
48 | 
49 | # Output of 'npm pack'
50 | *.tgz
51 | 
52 | *.exe


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Ting
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # server watch
 2 | 
 3 | 又一个云探针
 4 | 
 5 | 
 6 | ## 使用示例
 7 | 
 8 | 根据对应的操作系统及架构，从 [Release](https://github.com/reruin/ServerWatch/releases) 页面下载最新版本的程序。
 9 | 
10 | 在具有公网 IP 的机器上运行即可。
11 | 
12 | 
13 | 访问 http://本机IP:51221
14 | 默认账号 admin/admin


--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
 1 | const Koa = require('koa')
 2 | const views = require('koa-views')
 3 | const json = require('koa-json')
 4 | const onerror = require('koa-onerror')
 5 | const bodyparser = require('koa-bodyparser')
 6 | // const logger = require('koa-logger')
 7 | const koaStatic = require('koa-static')
 8 | 
 9 | const session = require('koa-session-minimal')
10 | const os = require('os')
11 | const fs = require('fs')
12 | 
13 | const config = require('./config')
14 | 
15 | const routers = require('./routers/index')
16 | const cors = require('@koa/cors')
17 | const path = require('path')
18 | 
19 | const app = new Koa()
20 | 
21 | onerror(app)
22 | 
23 | app.use(cors())
24 | 
25 | 
26 | // middlewares
27 | app.use(bodyparser({
28 |   enableTypes:['json', 'form', 'text']
29 | }))
30 | 
31 | app.use(json())
32 | 
33 | let web_path = path.resolve(__dirname, '../src/build')
34 | 
35 | app.use(koaStatic(web_path))
36 | 
37 | app.use(views(web_path))
38 | 
39 | 
40 | /*app.use(async (ctx, next) => {
41 |   const start = new Date()
42 |   await next()
43 |   const ms = new Date() - start
44 |   console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
45 | })
46 | */
47 | 
48 | app.use(routers.routes()).use(routers.allowedMethods())
49 | 
50 | 
51 | config.init(app)
52 | 
53 | 
54 | module.exports = app
55 | 


--------------------------------------------------------------------------------
/server/bin/www:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /**
 4 |  * Module dependencies.
 5 |  */
 6 | 
 7 | var app = require('../app');
 8 | var debug = require('debug')('demo:server');
 9 | var http = require('http');
10 | 
11 | /**
12 |  * Get port from environment and store in Express.
13 |  */
14 | 
15 | var port = normalizePort(process.env.PORT || '3001');
16 | // app.set('port', port);
17 | 
18 | /**
19 |  * Create HTTP server.
20 |  */
21 | 
22 | var server = http.createServer(app.callback());
23 | 
24 | /**
25 |  * Listen on provided port, on all network interfaces.
26 |  */
27 | 
28 | server.listen(port);
29 | server.on('error', onError);
30 | server.on('listening', onListening);
31 | 
32 | /**
33 |  * Normalize a port into a number, string, or false.
34 |  */
35 | 
36 | function normalizePort(val) {
37 |   var port = parseInt(val, 10);
38 | 
39 |   if (isNaN(port)) {
40 |     // named pipe
41 |     return val;
42 |   }
43 | 
44 |   if (port >= 0) {
45 |     // port number
46 |     return port;
47 |   }
48 | 
49 |   return false;
50 | }
51 | 
52 | /**
53 |  * Event listener for HTTP server "error" event.
54 |  */
55 | 
56 | function onError(error) {
57 |   if (error.syscall !== 'listen') {
58 |     throw error;
59 |   }
60 | 
61 |   var bind = typeof port === 'string'
62 |     ? 'Pipe ' + port
63 |     : 'Port ' + port;
64 | 
65 |   // handle specific listen errors with friendly messages
66 |   switch (error.code) {
67 |     case 'EACCES':
68 |       console.error(bind + ' requires elevated privileges');
69 |       process.exit(1);
70 |       break;
71 |     case 'EADDRINUSE':
72 |       console.error(bind + ' is already in use');
73 |       process.exit(1);
74 |       break;
75 |     default:
76 |       throw error;
77 |   }
78 | }
79 | 
80 | /**
81 |  * Event listener for HTTP server "listening" event.
82 |  */
83 | 
84 | function onListening() {
85 |   var addr = server.address();
86 |   var bind = typeof addr === 'string'
87 |     ? 'pipe ' + addr
88 |     : 'port ' + addr.port;
89 |   debug('Listening on ' + bind);
90 | }
91 | 


--------------------------------------------------------------------------------
/server/build/config.gypi:
--------------------------------------------------------------------------------
 1 | # Do not edit. File was generated by node-gyp's "configure" step
 2 | {
 3 |   "target_defaults": {
 4 |     "cflags": [],
 5 |     "default_configuration": "Release",
 6 |     "defines": [],
 7 |     "include_dirs": [],
 8 |     "libraries": []
 9 |   },
10 |   "variables": {
11 |     "asan": 0,
12 |     "coverage": "false",
13 |     "debug_devtools": "node",
14 |     "debug_http2": "false",
15 |     "debug_nghttp2": "false",
16 |     "force_dynamic_crt": 0,
17 |     "host_arch": "x64",
18 |     "icu_data_file": "icudt59l.dat",
19 |     "icu_data_in": "..\\..\\deps/icu-small\\source/data/in\\icudt59l.dat",
20 |     "icu_endianness": "l",
21 |     "icu_gyp_path": "tools/icu/icu-generic.gyp",
22 |     "icu_locales": "en,root",
23 |     "icu_path": "deps/icu-small",
24 |     "icu_small": "true",
25 |     "icu_ver_major": "59",
26 |     "node_byteorder": "little",
27 |     "node_enable_d8": "false",
28 |     "node_enable_v8_vtunejit": "false",
29 |     "node_install_npm": "true",
30 |     "node_module_version": 57,
31 |     "node_no_browser_globals": "false",
32 |     "node_prefix": "/usr/local",
33 |     "node_release_urlbase": "https://nodejs.org/download/release/",
34 |     "node_shared": "false",
35 |     "node_shared_cares": "false",
36 |     "node_shared_http_parser": "false",
37 |     "node_shared_libuv": "false",
38 |     "node_shared_openssl": "false",
39 |     "node_shared_zlib": "false",
40 |     "node_tag": "",
41 |     "node_use_bundled_v8": "true",
42 |     "node_use_dtrace": "false",
43 |     "node_use_etw": "true",
44 |     "node_use_lttng": "false",
45 |     "node_use_openssl": "true",
46 |     "node_use_perfctr": "true",
47 |     "node_use_v8_platform": "true",
48 |     "node_without_node_options": "false",
49 |     "openssl_fips": "",
50 |     "openssl_no_asm": 0,
51 |     "shlib_suffix": "so.57",
52 |     "target_arch": "x64",
53 |     "v8_enable_gdbjit": 0,
54 |     "v8_enable_i18n_support": 1,
55 |     "v8_enable_inspector": 1,
56 |     "v8_no_strict_aliasing": 1,
57 |     "v8_optimized_debug": 0,
58 |     "v8_promise_internal_field_count": 1,
59 |     "v8_random_seed": 0,
60 |     "v8_trace_maps": 0,
61 |     "v8_use_snapshot": "false",
62 |     "want_separate_host_toolset": 0,
63 |     "want_separate_host_toolset_mkpeephole": 0,
64 |     "nodedir": "C:\\Users\\Administrator\\.node-gyp\\8.4.0",
65 |     "standalone_static_library": 1
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/server/config.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const os = require('os')
 3 | 
 4 | const config_path = process.cwd() +'/config.json'
 5 | 
 6 | var cfg = {
 7 |   "username":"admin",
 8 |   "password":"admin",
 9 |   "port":51221
10 | }
11 | 
12 | var app , handler
13 | 
14 | 
15 | function getIpv4() {
16 |   var ifaces = os.networkInterfaces();
17 |   for (var dev in ifaces) {
18 |       for (var i in ifaces[dev]) {
19 |           var details = ifaces[dev][i];
20 |           if (/^\d+\./.test(details.address)) {
21 |               return details.address;
22 |           }
23 |       }
24 |   }
25 | }
26 | 
27 | 
28 | function init(instance){
29 |   app = instance
30 | 
31 |   fs.exists(config_path, (exists) => {
32 |     if (exists) {
33 |       fs.readFile(config_path, 'utf-8', (err, data) => {
34 |         try{
35 |           cfg = JSON.parse(data)
36 |         }catch(e){
37 | 
38 |         }
39 |         launcher(cfg)
40 |       })
41 |     }else{
42 |       launcher(cfg)
43 |     }
44 |   })
45 | }
46 | 
47 | function launcher(cfg){
48 |   handler = app.listen(cfg.port)
49 |   console.log(new Date().toISOString())
50 |   console.log('App is running at http://'+getIpv4()+':'+cfg.port+'/')
51 | }
52 | 
53 | function data(){
54 |   return cfg
55 | }
56 | 
57 | async function save(d){
58 |   let str = JSON.stringify( d )
59 | 
60 |   if(d.port != cfg.port && handler){
61 |     handler.close()
62 |     launcher(d)
63 |   }
64 | 
65 |   if(str.replace(/[\{\}\s]+/,'') == ''){
66 |     return false
67 |   }
68 | 
69 |   cfg = d
70 |   return new Promise((resolve, reject) => {
71 |     fs.writeFile(config_path, str, function(err) {
72 |       if (err) {
73 |         console.log(err,'save config error')
74 |       } else {
75 |         console.log('save config success')
76 |       }
77 |       resolve(true)
78 |     })
79 |   })
80 | }
81 | 
82 | 
83 | module.exports = {
84 |   init, data, save , launcher
85 | }


--------------------------------------------------------------------------------
/server/controllers/account.js:
--------------------------------------------------------------------------------
 1 | const service = require('./../models/account')
 2 | const createToken = require('../middleware/koa-auth').create
 3 | const config = require('../config')
 4 | 
 5 | module.exports = {
 6 |   async setting( ctx ){
 7 |     let result = {
 8 |       message: '',
 9 |       data: config.data(),
10 |       status: 0
11 |     }
12 |     
13 |     ctx.body = result
14 |   },
15 | 
16 |   async update( ctx , next){
17 |     let {username , password , port} = ctx.request.body
18 |     let result = {
19 |       message: '',
20 |       data: null,
21 |       status: 0
22 |     }
23 | 
24 |     let obj = {}
25 |     if(username) obj.username = username
26 |     if(password) obj.password = password
27 |     if(port) obj.port = port
28 | 
29 |     if(obj){
30 |       let ret = await config.save(obj)
31 |       if(!ret){
32 |         result.message = '保存失败'
33 |       }else{
34 |         result.data = {port , username}
35 |       }
36 |     }
37 |     ctx.body = result
38 |   },
39 | 
40 |   async signin( ctx , next){
41 |     let data = ctx.request.body
42 |     let result = {
43 |       message: '',
44 |       data: null,
45 |       status: -1
46 |     }
47 |     let account = config.data()
48 |     if(account.username == data.username && account.password == data.password){
49 |       result.status = 0
50 |       result.data = {
51 |         token : createToken({account:data.username})
52 |       }
53 | 
54 |     }else{
55 |       result.message = '用户名或密码错误'
56 |     }
57 | 
58 |     ctx.body = result
59 | 
60 |   },
61 | 
62 | }


--------------------------------------------------------------------------------
/server/controllers/client.js:
--------------------------------------------------------------------------------
  1 | const service = require('./../models/node')
  2 | const fs = require('fs')
  3 | const _ = require('../utils/_')
  4 | const format = require('../utils/format')
  5 | const path = require('path')
  6 | 
  7 | const createInterval = (v)=>{
  8 |   if(/\*/.test(v)){
  9 |     return '("'+v+'")'
 10 |   }else{
 11 |     return '("* * * * * sleep '+ new Array(Math.floor(60 / v)).fill(0).map((_,j)=>(j * v)).join(';" "* * * * * sleep ') + '")'
 12 |   }
 13 | }
 14 | 
 15 | module.exports = {
 16 | 
 17 |   async install(ctx) {
 18 | 
 19 |     let id = ctx.params.id
 20 | 
 21 |     let interval = 5
 22 | 
 23 |     
 24 | 
 25 |     if(id){
 26 |       let obj = await service.getNodeById(id)
 27 |       if(obj){
 28 |         let sh = fs.readFileSync(path.join(__dirname, '../shell/install.sh'),'utf-8')
 29 | 
 30 |         let host = ctx.origin + '/client/agent/' + id
 31 | 
 32 |         let update_interval = obj.update_interval
 33 | 
 34 |         sh = sh.replace(/__HOST__/g , host)
 35 |               .replace('__TOKEN__',id)
 36 |               // .replace('__INTERVAL__','10 20 30 40 50 60')
 37 |               .replace('__INTERVAL__',createInterval(update_interval))
 38 |         ctx.body = sh
 39 |       }else{
 40 |         ctx.status = 403
 41 |       }
 42 |     }else{
 43 |       ctx.status = 403
 44 |     }
 45 |     
 46 |   },
 47 | 
 48 |   async uninstall(ctx){
 49 |     let id = ctx.params.id
 50 |     if(id){
 51 |       let isValid = await service.hasNode(id)
 52 |       if(isValid){
 53 |         let sh = fs.readFileSync(path.join(__dirname, '../shell/uninstall.sh'),'utf-8')
 54 | 
 55 |         let host = ctx.origin + '/client/remove/' + id
 56 | 
 57 |         sh = sh.replace(/__HOST__/g , host)
 58 |               .replace('__TOKEN__',id)
 59 | 
 60 |         ctx.body = sh
 61 |       }else{
 62 |         ctx.status = 403
 63 |       }
 64 |     }else{
 65 |       ctx.status = 403
 66 |     }
 67 |   },
 68 | 
 69 |   async agent(ctx){
 70 |     let id = ctx.params.id
 71 | 
 72 |     if(id){
 73 | 
 74 |       let isValid = await service.hasNode(id)
 75 | 
 76 |       if(isValid){
 77 | 
 78 |         let { data } = ctx.request.body
 79 |         let [ip , location , isp ] = ['','','']
 80 |         if(data){
 81 |           data = _.base64(data);
 82 |           [,ip,, location, isp] = data.split(/(?:：|\s{2,})/)
 83 |         }
 84 | 
 85 |         let sh = fs.readFileSync(path.join(__dirname, '../shell/agent.sh'),'utf-8')
 86 | 
 87 |         let host = ctx.origin + '/client/update'
 88 | 
 89 |         sh = sh.replace(/__HOST__/g , host)
 90 | 
 91 |         service.updateNodeById(id , {
 92 |           installed:true , ip , location , isp
 93 |         })
 94 | 
 95 |         ctx.body = sh
 96 | 
 97 |       }else{
 98 | 
 99 |       }
100 | 
101 |     }else{
102 | 
103 |     }
104 |     
105 |   },
106 | 
107 |   async update(ctx){
108 |     let {token , data} = ctx.request.body
109 | 
110 |     let doc = await service.hasNode( token )
111 |     if(doc){
112 |       let ds = data.split(' ')
113 | 
114 |       let field = ['uptime','sessions','processes','processes_array','file_handles','file_handles_limit','os_kernel','os_name','os_arch','cpu_name','cpu_cores','cpu_freq','ram_total','ram_usage','swap_total','swap_usage','disk_array','disk_total','disk_usage','connections','nic','ipv4','ipv6','rx','tx','rx_gap','tx_gap','load','load_cpu','load_io']
115 | 
116 |       let snapshot = {} , online = true
117 | 
118 |       for(let i = 0 ; i<ds.length ; i++){
119 |         if(field[i]){
120 |           snapshot[field[i]] = ds[i] ? _.base64(ds[i]) : ''
121 |         }
122 |       }
123 | 
124 |       format.parseInt(snapshot , ['cpu_cores','ram_total','ram_usage','swap_total','swap_usage','disk_total','disk_usage','rx','tx','rx_gap','tx_gap','sessions','file_handles','file_handles_limit','connections','processes'])
125 |       snapshot.timestamp = Date.now()
126 |       service.record(token , snapshot)
127 |       
128 |       ctx.body = 'success'
129 |     }else{
130 |       ctx.body = 'miss token'
131 |       ctx.status = 403
132 |     }
133 | 
134 |   },
135 | 
136 |   async remove(ctx){
137 |     let id = ctx.params.id
138 | 
139 |     service.removeNodeById( id )
140 |     
141 |     ctx.body = 'success'
142 | 
143 |   }
144 | }


--------------------------------------------------------------------------------
/server/controllers/home.js:
--------------------------------------------------------------------------------
1 | module.exports = async ( ctx , next ) => {
2 |   await ctx.render('index')
3 | }


--------------------------------------------------------------------------------
/server/controllers/node.js:
--------------------------------------------------------------------------------
  1 | const service = require('./../models/node')
  2 | const shortid = require('shortid')
  3 | const _ = require('../utils/_')
  4 | 
  5 | const getShell = (f)=>{
  6 |  return 'wget --no-check-certificate -qO- '+f+' | bash'
  7 | }
  8 | 
  9 | 
 10 | module.exports = {
 11 | 
 12 |   async list(ctx) {
 13 |     let result = {
 14 |       status: 0,
 15 |       message: '',
 16 |       data: null,
 17 |     }
 18 | 
 19 |     let data = await service.getNodesWithoutHistory()
 20 |     let now = Date.now()
 21 |     data.forEach((i)=>{
 22 |       i.online = now - i.time_response < 1000 * 30 
 23 |     })
 24 |     
 25 |     result.data = data
 26 | 
 27 |     ctx.body = result
 28 | 
 29 |   },
 30 | 
 31 |   async queryBase(ctx){
 32 |     let result = {
 33 |       status: 0,
 34 |       message: '',
 35 |       data: null,
 36 |     }
 37 | 
 38 |     let id = ctx.params.id
 39 | 
 40 |     let data = await service.getNodeById(id)
 41 | 
 42 |     if(data){
 43 |       result.data = {
 44 |         id : data.id,
 45 |         label : data.label ,
 46 |         installed : data.installed,
 47 |         update_interval:data.update_interval,
 48 |         record_interval:data.record_interval,
 49 |         record_limit : data.record_limit,
 50 |         recordable : data.recordable,
 51 |         uninstall_script : getShell(ctx.origin+'/client/uninstall/'+data.id ),
 52 |         install_script : getShell(ctx.origin+'/client/install/'+data.id)
 53 |       }
 54 |     }else{
 55 |       result.status = 412
 56 |       result.message = '没有匹配的数据'
 57 |     }
 58 |     
 59 |     ctx.body = result
 60 |   },
 61 | 
 62 |   async queryLatest(ctx){
 63 |     let result = {
 64 |       status: 0,
 65 |       message: '',
 66 |       data: null,
 67 |     }
 68 | 
 69 |     let id = ctx.params.id
 70 | 
 71 |     let data = await service.getNodeSnapshotById(id)
 72 | 
 73 |     result.data = data
 74 |     
 75 |     ctx.body = result
 76 |   },
 77 | 
 78 |   async query(ctx){
 79 |     let result = {
 80 |       status: 0,
 81 |       message: '',
 82 |       data: null,
 83 |     }
 84 | 
 85 |     let id = ctx.params.id
 86 | 
 87 |     let data = await service.getNodeById(id)
 88 | 
 89 |     if(data){
 90 |       if(!data.installed){
 91 |         data.script = getShell(ctx.origin+'/client/install/'+data.id)
 92 |         delete data.history
 93 |       }
 94 |       result.data = data
 95 |     }else{
 96 |       result.status = 412
 97 |       result.message = '无数据'
 98 |     }
 99 | 
100 |     ctx.body = result
101 |   },
102 | 
103 |   async update(ctx){
104 |     let result = {
105 |       status: 0,
106 |       message: '成功',
107 |       data: null,
108 |     }
109 |     let id = ctx.params.id
110 | 
111 |     if(await service.hasNode(id)){
112 |       let id = ctx.params.id
113 |       let form = ctx.request.body
114 | 
115 |       form.recordable = form.recordable == '1' ? 1 : 0
116 |       if(!form.recordable){
117 |         form.history = []
118 |       }
119 | 
120 |       let data = await service.updateNodeById(id , form)
121 |       ctx.body = result
122 |     }else{
123 |       result.message = '没有匹配的数据'
124 |       result.status = 412
125 |     }
126 |     
127 |   },
128 | 
129 |   async create(ctx){
130 |     let result = {
131 |       status: 0,
132 |       message: '成功',
133 |       data: null,
134 |     }
135 | 
136 |     let form = ctx.request.body
137 | 
138 |     form.installed = false
139 | 
140 |     let data = {
141 |       id:shortid.generate(),
142 |       label : form.label,
143 |       ip:'',
144 |       location:'',
145 |       isp:'',
146 |       remark : form.remark,
147 |       online : false,
148 |       installed : false,
149 |       time_response:0,
150 |       time_record:0,
151 |       update_interval:form.update_interval,
152 |       record_interval:form.record_interval,
153 |       record_limit : form.record_limit,
154 |       history:[],
155 |       snapshot:{}
156 |     }
157 | 
158 |     await service.createNode(data)
159 | 
160 |     result.data = {
161 |       id : data.id
162 |     }
163 |     ctx.body = result
164 |   },
165 | 
166 |   async remove(ctx){
167 |     let result = {
168 |       status: 0,
169 |       message: '成功',
170 |       data: null,
171 |     }
172 | 
173 |     let id = ctx.params.id
174 | 
175 |     let data = await service.removeNodeById(id)
176 |     if(data){
177 | 
178 |     }else{
179 |       result.status = 412
180 |       result.message = '删除失败'
181 |     }
182 | 
183 |     ctx.body = result
184 | 
185 |   }
186 | }


--------------------------------------------------------------------------------
/server/controllers/signin.js:
--------------------------------------------------------------------------------
 1 | const service = require('./../models/account')
 2 | const createToken = require('../middleware/koa-auth').create
 3 | 
 4 | module.exports = {
 5 | 
 6 | 
 7 |   async signup( ctx , next){
 8 |     
 9 |   }
10 | }


--------------------------------------------------------------------------------
/server/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "nodes": [
 3 |     {
 4 |       "id": "HJgkLeU4G",
 5 |       "label": "测试",
 6 |       "ip": "183.129.150.34",
 7 |       "location": "中国 浙江 杭州",
 8 |       "isp": "电信",
 9 |       "online": false,
10 |       "installed": true,
11 |       "time_response": 1516600926944,
12 |       "time_record": 1516591170095,
13 |       "update_interval": 5,
14 |       "record_interval": 30,
15 |       "record_limit": 4000,
16 |       "history": [],
17 |       "snapshot": {
18 |         "uptime": "857412.28",
19 |         "sessions": 1,
20 |         "processes": 169,
21 |         "processes_array": "root 0.1 12392 9-22:09:53 S vmtoolsd;root 0.1 4820 9-22:09:44 S ss-redir;root 0.0 18592 9-22:09:49 S supervisord;root 0.0 12716 9-22:09:46 S pluto;root 0.0 8224 9-22:09:53 S accounts-daemon;root 0.0 7224 9-22:09:57 S systemd-udevd;root 0.0 6888 9-21:49:41 S sshd;root 0.0 5568 9-22:10:12 S systemd;root 0.0 5348 9-22:09:49 S sshd;root 0.0 4808 9-21:49:40 S bash;root 0.0 4312 9-21:49:40 S systemd;syslog 0.0 4216 9-22:09:52 S rsyslogd;messagebus 0.0 3748 9-22:09:53 S dbus-daemon;root 0.0 3720 3-00:01:51 S pppd;root 0.0 3684 42:59 S pppd;",
22 |         "file_handles": 864,
23 |         "file_handles_limit": 95470,
24 |         "os_kernel": "4.4.0-62-generic",
25 |         "os_name": "Ubuntu 16.04.2 LTS",
26 |         "os_arch": "x64",
27 |         "cpu_name": "Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz",
28 |         "cpu_cores": 1,
29 |         "cpu_freq": "3301.000",
30 |         "ram_total": 1022267392,
31 |         "ram_usage": 169340928,
32 |         "swap_total": 1071640576,
33 |         "swap_usage": 0,
34 |         "disk_array": "/dev/sda1 19945680896 1995706368",
35 |         "disk_total": 19945680896,
36 |         "disk_usage": 1995706368,
37 |         "connections": 47,
38 |         "nic": "ens33",
39 |         "ipv4": "10.38.1.201",
40 |         "ipv6": "N/A",
41 |         "rx": 15035682513,
42 |         "tx": 15178729962,
43 |         "rx_gap": 618513,
44 |         "tx_gap": 628278,
45 |         "load": "0.08 0.02 0.01",
46 |         "load_cpu": "9",
47 |         "load_io": "0",
48 |         "timestamp": 1516600926944
49 |       },
50 |       "uninstall_script": "wget --no-check-certificate -qO- http://localhost:3001/client/uninstall/HJgkLeU4G | bash",
51 |       "install_script": "wget --no-check-certificate -qO- http://localhost:3001/client/install/HJgkLeU4G | bash",
52 |       "recordable": 0
53 |     },
54 |     {
55 |       "id": "ByFl0-XSG",
56 |       "label": "测试",
57 |       "ip": "",
58 |       "location": "",
59 |       "isp": "",
60 |       "online": false,
61 |       "installed": false,
62 |       "time_response": 0,
63 |       "time_record": 0,
64 |       "update_interval": 5,
65 |       "record_interval": 30,
66 |       "record_limit": 4000,
67 |       "history": [],
68 |       "snapshot": {}
69 |     }
70 |   ],
71 |   "user": {}
72 | }


--------------------------------------------------------------------------------
/server/middleware/koa-auth.js:
--------------------------------------------------------------------------------
 1 | const jwt = require('jsonwebtoken')
 2 | const print = require('../utils/print')
 3 | 
 4 | const auth = {
 5 |     check(ctx, next) {
 6 |         let token = ctx.request.header['authorization'] || ctx.request.query.key
 7 | 
 8 |         if (token) {
 9 |             try {
10 |                 let tokenData = jwt.verify(token, 'yueling')
11 |                 //是否过期
12 |                 if (tokenData && tokenData.exp <= new Date() / 1000) {
13 |                   print.json(ctx, 401, 'invalid token')
14 |                 }else{
15 |                   ctx.authData = tokenData;
16 |                   return next()
17 |                 }
18 |             } catch (err) {
19 | 
20 |                 print.json(ctx, 401, 'invalid token')
21 |             }
22 |         } else {
23 |           //ctx.throw(401, 'no token detected in http header 'Authorization'');
24 |           print.json(ctx, 401, 'no token detected')
25 |         }
26 |     },
27 | 
28 |     create(cnt) {
29 |       let token = jwt.sign(cnt , 'yueling' , {expiresIn:'1h'})
30 |       return token
31 |     }
32 | }
33 | 
34 | module.exports = auth


--------------------------------------------------------------------------------
/server/middleware/koa-less.js:
--------------------------------------------------------------------------------
 1 | const less = require('less-middleware');
 2 | 
 3 | module.exports = function() {
 4 |     let options = Array.prototype.slice.call(arguments);
 5 | 
 6 |     return (ctx, next) => {
 7 |       return new Promise(function (resolve, reject) {
 8 |         less.apply(null , options)(ctx.req, ctx.res , (error) =>{
 9 |           if(error){
10 |             reject(error);
11 |           }else{
12 |             resolve();
13 |           }
14 |         });
15 |       }).then(()=>{
16 |         return next();
17 |       })
18 |       
19 |     }
20 | };


--------------------------------------------------------------------------------
/server/models/account.js:
--------------------------------------------------------------------------------
 1 | const config = require('../config')
 2 | 
 3 | const account = {
 4 | 
 5 | 
 6 |   async signin( options ) {
 7 |     if(config.username == options.username && config.password == options.password){
 8 |       return {
 9 |         username : config.username,
10 |       }
11 |     }else{
12 |       return null
13 |     }
14 |     
15 |   },
16 | 
17 |   async update(){
18 |     
19 |   }
20 | }
21 | 
22 | 
23 | module.exports = account


--------------------------------------------------------------------------------
/server/models/node.js:
--------------------------------------------------------------------------------
 1 | const dbUtils = require('./../utils/db/lowdb')
 2 | 
 3 | // 节点服务
 4 | const node = {
 5 |   
 6 |   async getNodes (page , limit){
 7 |     return dbUtils.get('nodes').slice(page * limit , (page+1) * limit).value()
 8 |   },
 9 |   async getNodesWithoutHistory(){
10 |     return dbUtils.get('nodes').pickout('history').value()
11 |   },
12 | 
13 |   async createNode (data){
14 |     dbUtils.get('nodes').push(data).write()
15 |   },
16 | 
17 | 
18 |   async getNodesCount (){
19 |     return dbUtils.get('nodes').size().value() || 0
20 |   },
21 | 
22 |   async getNodeById(id){
23 |     return dbUtils.get('nodes').find({id:id}).cloneDeep().value()
24 |   },
25 | 
26 |   async getNodeSnapshotById(id){
27 |     return dbUtils.get('nodes').find({id:id}).value().snapshot
28 |   },
29 | 
30 |   async hasNode(id){
31 |     return !!dbUtils.get('nodes').find({id:id}).value()
32 |   },
33 | 
34 |   async updateNodeById(id , data){
35 |     return dbUtils.get('nodes')
36 |       .find({ id : id})
37 |       .assign(data)
38 |       .write()
39 |   },
40 | 
41 |   async removeNodeById(id){
42 |     return dbUtils.get('nodes')
43 |     .remove({ id })
44 |     .write()
45 |   },
46 | 
47 |   async record(id , data){
48 |     let doc = dbUtils.get('nodes')
49 |       .find({ id : id})
50 |       .value()
51 | 
52 |     if(doc == undefined){
53 |       return 'error'
54 |     }
55 |     
56 |     let { record_interval , record_limit } = doc
57 | 
58 |     let curTime = Date.now()
59 | 
60 |     let lastSaveTime = doc.time_record
61 |     
62 | 
63 |     //一分钟保存一次历史记录
64 |     if(doc.recordable && curTime - lastSaveTime > record_interval * 1000){
65 | 
66 |       dbUtils.get('nodes')
67 |       .record({ id : id} , 'history' , data , record_limit)
68 |       .write()
69 | 
70 |       lastSaveTime = curTime
71 |     }
72 | 
73 | 
74 |     dbUtils.get('nodes')
75 |       .find({ id : id})
76 |       .assign({snapshot:data , time_record : lastSaveTime, time_response:curTime})
77 |       .write()
78 | 
79 |   }
80 | }
81 | 
82 | module.exports = node


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ServerWatch",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "bin": "app.js",
 6 |   "scripts": {
 7 |     "start": "node app",
 8 |     "dev": "./node_modules/.bin/nodemon app",
 9 |     "prd": "pm2 start app",
10 |     "build": "pkg . -t node9-win-x64 && pkg . -t node9-linux-x64",
11 |     "test": "echo \"Error: no test specified\" && exit 1"
12 |   },
13 |   "dependencies": {
14 |     "@koa/cors": "^2.2.1",
15 |     "easy-monitor": "^2.2.1",
16 |     "jsonwebtoken": "^8.1.0",
17 |     "koa": "^2.2.0",
18 |     "koa-bodyparser": "^3.2.0",
19 |     "koa-json": "^2.0.2",
20 |     "koa-logger": "^3.1.0",
21 |     "koa-onerror": "^1.2.1",
22 |     "koa-router": "^7.1.1",
23 |     "koa-session-minimal": "^3.0.4",
24 |     "koa-static": "^3.0.0",
25 |     "koa-views": "^6.1.3",
26 |     "less-middleware": "^2.2.1",
27 |     "lowdb": "^1.0.0",
28 |     "shortid": "^2.2.8"
29 |   },
30 |   "devDependencies": {
31 |     "nodemon": "^1.8.1"
32 |   },
33 |   "pkg": {
34 |     "assets": [
35 |       "../src/build/**/*",
36 |       "./shell/*"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/server/routers/api.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * api 路由
 3 |  */
 4 | const router = require('koa-router')()
 5 | 
 6 | const account = require('../controllers/account')
 7 | const node = require('../controllers/node')
 8 | const signin = require('../controllers/signin')
 9 | 
10 | const routers = router//.prefix('/api')
11 |     // .post('/signin', user.signin)
12 |     // .post('/signup', user.signup)
13 | 
14 |     .get('/nodes' , node.list)
15 | 
16 |     .get('/node/:id' , node.query)
17 |     .get('/node/:id/latest' , node.queryLatest)
18 |     .get('/node/:id/base' , node.queryBase)
19 |     .get('/node/:id/remove' , node.remove)
20 |     .post('/node/create' , node.create)
21 |     
22 |     .post('/node/:id' , node.update)
23 | 
24 | 
25 | 
26 |     .get('/setting' , account.setting)
27 |     .post('/setting' , account.update)
28 | 
29 | 
30 |     // .post('/signin' , account.signin)
31 | 
32 | 
33 | module.exports = routers
34 | 


--------------------------------------------------------------------------------
/server/routers/client.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * client 脚本
 3 |  */
 4 | const router = require('koa-router')()
 5 | 
 6 | const service = require('./../controllers/client')
 7 | 
 8 | const routers = router
 9 |     .get('/install/:id' , service.install)
10 |     .get('/uninstall/:id' , service.uninstall)
11 |     .get('/remove/:id' , service.remove)
12 |     .post('/agent/:id' , service.agent)
13 |     .post('/update' , service.update)
14 |     
15 | module.exports = routers
16 | 


--------------------------------------------------------------------------------
/server/routers/home.js:
--------------------------------------------------------------------------------
1 | const router = require('koa-router')()
2 | const index = require('../controllers/home')
3 | 
4 | module.exports = router.get('/', index)


--------------------------------------------------------------------------------
/server/routers/index.js:
--------------------------------------------------------------------------------
 1 | const router = require('koa-router')()
 2 | 
 3 | const api = require('./api')
 4 | 
 5 | const home = require('./home')
 6 | 
 7 | const signin = require('./signin')
 8 | 
 9 | const client = require('./client')
10 | 
11 | const authorize = require('../middleware/koa-auth').check
12 | 
13 | router.use('/api', signin.routes(), signin.allowedMethods())
14 | 
15 | //token 验证
16 | router.use('/api', authorize, api.routes(), api.allowedMethods())
17 | 
18 | router.use('/client',client.routes(),client.allowedMethods())
19 | 
20 | router.use(home.routes(), home.allowedMethods())
21 | 
22 | module.exports = router
23 | 


--------------------------------------------------------------------------------
/server/routers/signin.js:
--------------------------------------------------------------------------------
1 | const router = require('koa-router')()
2 | const service = require('../controllers/account')
3 | 
4 | const routers = router.post('/signin' , service.signin)
5 | 
6 | module.exports = routers


--------------------------------------------------------------------------------
/server/shell/install.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | 
  3 | PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
  4 | 
  5 | echo "+============================================================+"
  6 | echo "|                    ServerWatch Installer                   |"
  7 | echo "|                                                            |"
  8 | echo "|                                         <reruin@gmail.com> |"
  9 | echo "|------------------------------------------------------------|"
 10 | echo "|                                         https://reruin.net |"
 11 | echo "+============================================================+"
 12 | echo ""
 13 | 
 14 | echo -e "\n|   ServerWatch is installing ... "
 15 | 
 16 | # Base64
 17 | function base ()
 18 | {
 19 |   echo "$1" | tr -d '\n' | base64 | tr -d '=' | tr -d '\n' | sed 's/\//%2F/g' | sed 's/\+/%2B/g'
 20 | }
 21 | 
 22 | 
 23 | # 检测依赖
 24 | if [ -n "$(command -v apt-get)" ]
 25 | then
 26 |   if [ -z "$(command -v crontab)" ]
 27 |   then
 28 |     apt-get -y update >/dev/null 2>&1
 29 |     apt-get -y install cron >/dev/null 2>&1
 30 |   fi
 31 |   if [ -z "$(command -v curl)" ]
 32 |   then
 33 |     apt-get -y install curl >/dev/null 2>&1
 34 |   fi
 35 | elif [ -n "$(command -v yum)" ]
 36 | then
 37 |   if [ -z "$(command -v crontab)" ]
 38 |   then
 39 |     yum -y install cron vixie-cron >/dev/null 2>&1
 40 |   fi
 41 |   if [ -z "$(command -v curl)" ]
 42 |   then
 43 |     yum -y install curl >/dev/null 2>&1
 44 |   fi
 45 | elif [ -n "$(command -v pacman)" ]
 46 | then
 47 |   if [ -z "$(command -v crontab)" ]
 48 |   then
 49 |     pacman -S --noconfirm cronie
 50 |   fi
 51 |   if [ -z "$(command -v curl)" ]
 52 |   then
 53 |     pacman -S --noconfirm curl
 54 |   fi
 55 | fi
 56 | 
 57 | 
 58 | if [ -z "$(command -v crontab)" ]
 59 | then
 60 |   echo -e "|\n|  Error: Crontab could NOT be installed\n|"
 61 |   exit 1
 62 | fi
 63 | 
 64 | 
 65 | # 若没有运行
 66 | if [ -z "$(ps -Al | grep cron | grep -v grep)" ]
 67 | then
 68 | 
 69 |   if [ -n "$(command -v apt-get)" ]
 70 |   then
 71 |     service cron start
 72 |   elif [ -n "$(command -v yum)" ]
 73 |   then
 74 |     chkconfig crond on
 75 |     service crond start
 76 |   elif [ -n "$(command -v pacman)" ]
 77 |   then
 78 |     systemctl start cronie
 79 |     systemctl enable cronie
 80 |   fi
 81 |   
 82 |   ## 再次检测
 83 |   if [ -z "$(ps -Al | grep cron | grep -v grep)" ]
 84 |   then
 85 |     echo -e "|\n|   Error: Cron could NOT be started\n|"
 86 |     exit 1
 87 |   fi
 88 | fi
 89 | 
 90 | # 清除旧脚本
 91 | if [ -f /etc/serverwatch/agent.sh ]
 92 | then
 93 |   rm -Rf /etc/serverwatch
 94 |   (crontab -l | grep -v "/etc/serverwatch/agent.sh") | crontab -
 95 | fi
 96 | 
 97 | # 创建目录
 98 | mkdir -p /etc/serverwatch
 99 | 
100 | # 获取一次基础数据:位置 运营商 等
101 | meta=$(curl -s myip.ipip.net -4)
102 | 
103 | wget -O /etc/serverwatch/agent.sh --post-data="data=$(base "$meta")" --no-check-certificate __HOST__ >/dev/null 2>&1
104 | 
105 | 
106 | if [ -f /etc/serverwatch/agent.sh ]
107 | then
108 |   chmod +x /etc/serverwatch/agent.sh
109 |   ## 添加token
110 |   echo "__TOKEN__" > /etc/serverwatch/token.log
111 | 
112 |   ## 配置 cron 检测频率
113 |   interval=__INTERVAL__
114 | 
115 | 
116 |   for x in "${interval[@]}"
117 |   do
118 |     crontab -l 2>/dev/null | { cat; echo "$x bash /etc/serverwatch/agent.sh > /etc/serverwatch/cron.log 2>&1"; } | crontab -
119 |   done
120 |   
121 | 
122 |   echo -e "|\n|   Success: The ServerWatch has been installed\n|"
123 | 
124 |   ### 删除安装脚本
125 |   if [ -f $0 ]
126 |   then
127 |     rm -f $0
128 |   fi
129 | else
130 |   echo -e "|\n|   Error: The ServerWatch could NOT be installed\n|"
131 | fi


--------------------------------------------------------------------------------
/server/shell/uninstall.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
 4 | 
 5 | echo "+============================================================+"
 6 | echo "|                   ServerWatch Uninstaller                  |"
 7 | echo "|                                                            |"
 8 | echo "|                                         <reruin@gmail.com> |"
 9 | echo "|------------------------------------------------------------|"
10 | echo "|                                         https://reruin.net |"
11 | echo "+============================================================+"
12 | echo ""
13 | 
14 | echo -e "\n|   ServerWatch is uninstalling ... "
15 | 
16 | 
17 | 
18 | if [ -f /etc/serverwatch/agent.sh ]
19 | then
20 |   # 清除crob
21 |   (crontab -l | grep -v "/etc/serverwatch/agent.sh") | crontab -
22 |   # 清除目录
23 |   rm -Rf /etc/serverwatch
24 | 
25 |   wget --no-check-certificate -qO- __HOST__ >/dev/null 2>&1
26 | 
27 | fi
28 | 
29 | echo -e "|\n|   Success: The ServerWatch has been removed\n|"


--------------------------------------------------------------------------------
/server/utils/_.js:
--------------------------------------------------------------------------------
  1 | function hash(data, key, value) {
  2 |   var obj = {};
  3 |   key = key || 'key';
  4 |   for (var i in data) {
  5 |     if (data[i][key])
  6 |       obj[data[i][key]] = value ? data[i][value] : data[i];
  7 |   }
  8 |   return obj;
  9 | }
 10 | 
 11 | function extend(src, dist) {
 12 |   for (var i in dist) {
 13 |     src[i] = dist[i];
 14 |   }
 15 |   return src;
 16 | }
 17 | 
 18 | function fill(src , dist){
 19 |   for (var i in src) {
 20 |     src[i] = dist[i];
 21 |   }
 22 |   return src;
 23 | }
 24 | 
 25 | function pick(src_t, dist_t, conv_t) {
 26 | 
 27 |     var ret = [];
 28 |     var isarr = isArray(src_t);
 29 |     var dist = {};
 30 |     conv_t = conv_t || {};
 31 | 
 32 |     if (isArray(dist_t)) {
 33 |         for (var i in dist_t) {
 34 |             dist[dist_t[i]] = undefined;
 35 |         }
 36 |     }
 37 | 
 38 |     var src = !isarr ? [src_t] : src_t;
 39 | 
 40 |     for (var j = 0, l = src.length; j < l; j++) {
 41 |         var obj = {};
 42 |         for (var i in dist) {
 43 |             var k = i;
 44 |             if (conv_t[i]) k = conv_t[i];
 45 |             obj[k] = src[j][i] === null ? dist[i] : src[j][i];
 46 |         }
 47 |         ret.push(obj);
 48 |     }
 49 | 
 50 |     return isarr ? ret : ret[0];
 51 | }
 52 | 
 53 | function isEmptyObject(o) {
 54 |   for (var i in o) return false;
 55 |   return true;
 56 | }
 57 | 
 58 | function isValidObject(o) {
 59 |   if (isEmptyObject(o)) return false;
 60 |   for (var i in o) {
 61 |     if (o[i] === undefined) return false;
 62 |   }
 63 |   return true;
 64 | }
 65 | 
 66 | function isFunction(v) {
 67 |   return "function" === typeof v;
 68 | }
 69 | 
 70 | function isArray(v) {
 71 |   return Object.prototype.toString.call(v) === "[object Array]";
 72 | }
 73 | 
 74 | function isObject(v) {
 75 |   return Object.prototype.toString.call(v) === "[object Object]";
 76 | }
 77 | 
 78 | function isString(v) {
 79 |   return "string" === typeof v;
 80 | }
 81 | 
 82 | function isDate(v){
 83 |   return Object.prototype.toString.call(v) === "[object Date]";
 84 | }
 85 | 
 86 | function template(str, data) {
 87 |   return str.replace(/\{ *([\w_]+) *\}/g, function(str, key) {
 88 |     var value = data[key];
 89 |     if (value === undefined) {
 90 |       console.log('No value provided for variable ' + str);
 91 |       value = "{" + key + "}";
 92 |     } else if (typeof value === 'function') {
 93 |       value = value(data);
 94 |     }
 95 |     return value;
 96 |   })
 97 | }
 98 | 
 99 | function datetime(date, expr) {
100 |   expr = expr || 'yyyy-MM-dd'
101 |   var a = new Date()
102 |   if(isDate(date)){
103 |     a = date
104 |   }
105 |   else if(isString(date)){
106 |     try{
107 |       a = new Date(date);
108 |     }catch(e){
109 | 
110 |     }
111 |   }
112 | 
113 | 
114 |   var y = a.getFullYear(),
115 |     M = a.getMonth() + 1,
116 |     d = a.getDate(),
117 |     D = a.getDay(),
118 |     h = a.getHours(),
119 |     m = a.getMinutes(),
120 |     s = a.getSeconds();
121 | 
122 |   function zeroize(v) {
123 |     v = parseInt(v);
124 |     return v < 10 ? "0" + v : v;
125 |   }
126 | 
127 |   return expr.replace(/(?:s{1,2}|m{1,2}|h{1,2}|d{1,2}|M{1,4}|y{1,4})/g, function(str) {
128 | 
129 |     switch (str) {
130 |       case 's':
131 |         return s;
132 |       case 'ss':
133 |         return zeroize(s);
134 |       case 'm':
135 |         return m;
136 |       case 'mm':
137 |         return zeroize(m);
138 |       case 'h':
139 |         return h;
140 |       case 'hh':
141 |         return zeroize(h);
142 |       case 'd':
143 |         return d;
144 |       case 'dd':
145 |         return zeroize(d);
146 |       case 'M':
147 |         return M;
148 |       case 'MM':
149 |         return zeroize(M);
150 |       case 'MMMM':
151 |         return ['十二', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'][m] + '月';
152 |       case 'yy':
153 |         return String(y).substr(2);
154 |       case 'yyyy':
155 |         return y;
156 |       default:
157 |         return str.substr(1, str.length - 2);
158 |     }
159 |   });
160 | }
161 | 
162 | function base64(a){
163 |   return new Buffer(a,'base64').toString()
164 | }
165 | 
166 | module.exports = {
167 |   hash,
168 |   extend,
169 |   fill,
170 |   pick,
171 |   isFunction,
172 |   isArray,
173 |   isObject,
174 |   isString,
175 |   template,
176 |   datetime,
177 |   base64
178 | }


--------------------------------------------------------------------------------
/server/utils/base64.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/server/utils/base64.js


--------------------------------------------------------------------------------
/server/utils/db/lowdb.js:
--------------------------------------------------------------------------------
 1 | const low = require('lowdb')
 2 | const FileSync = require('lowdb/adapters/FileSync')
 3 | // const lodashId = require('lodash-id')
 4 | const adapter = new FileSync(process.cwd()+'/db.json')
 5 | const db = low(adapter)
 6 | 
 7 | db._.mixin({
 8 |   record : function(collection , predicate , key, data , limit){
 9 |     let doc = this.find(collection , predicate)
10 |     let arr = doc[key]
11 |     if(arr){
12 |       let count = arr.length
13 |       arr.push(data)
14 |       if(arr.length >= limit){
15 |         arr.splice(0,Math.round(limit / 5))
16 |       }
17 |     }
18 | 
19 |     return arr
20 |   },
21 |   pickout : function(array , predicate){
22 |     let index = -1
23 |     const length = array == null ? 0 : array.length
24 |     const result = new Array(length)
25 |     
26 |     while (++index < length) {
27 |       let o = {}
28 |       for(let key in array[index]){
29 |         if(key != predicate) o[key] = array[index][key]
30 |       }
31 |       result[index] = o
32 |     }
33 |     return result
34 |   }
35 | })
36 | 
37 | db.defaults({ nodes: [], user: {} }).write()
38 | 
39 | module.exports = db


--------------------------------------------------------------------------------
/server/utils/format.js:
--------------------------------------------------------------------------------
  1 | const _ = require('./_')
  2 | 
  3 | const dep = {
  4 |   status: [
  5 |     { code: '0', name: '启用' },
  6 |     { code: '1', name: '禁用' }
  7 |   ]
  8 | }
  9 | 
 10 | class Format {
 11 |   static unescape(obj) {
 12 |     for (var i in obj) {
 13 |       if (obj[i] && typeof(obj[i]) == 'string') {
 14 |         obj[i] = unescape(obj[i]);
 15 |       }
 16 |     }
 17 |     return obj;
 18 |   }
 19 | 
 20 |   static index(data, key) {
 21 |     key = key || '@';
 22 |     for (var i = data.length - 1; i >= 0; i--) {
 23 |       data[i][key] = i + 1;
 24 |     }
 25 |   }
 26 | 
 27 |   static parseInt(data, deps){
 28 |     for (var i = deps.length - 1; i >= 0; i--) {
 29 |       data[deps[i]] = parseInt(data[deps[i]])
 30 |     }
 31 |   }
 32 | 
 33 |   static conv(data, deps, fix) {
 34 |     if (!data) return data
 35 | 
 36 |     fix = '_' + (fix || 'name');
 37 | 
 38 |     if (typeof(data) == 'string' || typeof(data) == 'number') {
 39 |       var h = _.hash(deps, id, label);
 40 |       return h[data];
 41 |     }
 42 | 
 43 |     var is_obj = false;
 44 |     if (_.isArray(data) == false) {
 45 |       is_obj = true;
 46 |       data = [data];
 47 |     }
 48 | 
 49 |     if (_.isString(deps)) {
 50 |       var t = deps;
 51 |       deps = {};
 52 |       deps[t] = t;
 53 |     }
 54 | 
 55 |     for (var j in deps) {
 56 |       var key = deps[j];
 57 |       var s = dep[key];
 58 |       if (s) {
 59 |         var h = _.hash(s, 'code', 'name');
 60 |         for (var i in data) {
 61 |           if (j in data[i]) {
 62 |             data[i][j + fix] = h[data[i][j]];
 63 |           }
 64 |         }
 65 |       }
 66 | 
 67 |     }
 68 |     return is_obj ? data[0] : data;
 69 |   }
 70 | 
 71 |   static datetime(data , key){
 72 |     var isArr = _.isArray(key)
 73 |     var process = function(d){
 74 |       if(isArr){
 75 |         for(var i in key){
 76 |           d[key[i]] = _.datetime( d[key[i]],'yyyy-MM-dd hh:mm:ss')
 77 |         }
 78 |       }else{
 79 |         d[key] = _.datetime( d[key],'yyyy-MM-dd hh:mm:ss')
 80 |       }
 81 |     }
 82 | 
 83 |     if(_.isArray(data)){
 84 |       for(var i in data){
 85 |         process(data[i])
 86 |       }
 87 |     }
 88 |     
 89 |     else if(_.isObject(data)){
 90 |       process(data)
 91 |     }
 92 |     
 93 |   }
 94 | 
 95 |   static string(data , key){
 96 |     var isArr = _.isArray(key)
 97 |     var process = function(d){
 98 |       if(isArr){
 99 |         for(var i in key){
100 |           d[key[i]] = String( d[key[i]] )
101 |         }
102 |       }else{
103 |         d[key] = String( d[key] )
104 |       }
105 |     }
106 | 
107 |     if(_.isArray(data)){
108 |       for(var i in data){
109 |         process(data[i])
110 |       }
111 |     }
112 |     
113 |     else if(_.isObject(data)){
114 |       process(data)
115 |     }
116 |   }
117 | 
118 |   static trim(data , key){
119 |     var isArr = _.isArray(key)
120 |     var process = function(d){
121 |       if(isArr){
122 |         for(var i in key){
123 |           d[key[i]] = d[key[i]].replace(/['"]/g,'')
124 |         }
125 |       }else{
126 |         d[key] = d[key].replace(/['"]/g,'')
127 |       }
128 |     }
129 | 
130 |     if(_.isArray(data)){
131 |       for(var i in data){
132 |         process(data[i])
133 |       }
134 |     }
135 |     
136 |     else if(_.isObject(data)){
137 |       process(data)
138 |     }
139 |   }
140 | 
141 |   static timezone(d){
142 |     var  lt = new Date();
143 |     var d = new Date(lt.getTime()-(lt.getTimezoneOffset()*60000));
144 | 
145 |     var process = function(d){
146 |       d[key] = _.datetime(d[key],'yyyy-MM-dd hh:mm:ss')
147 |     }
148 |     if(_.isArray(data)){
149 |       for(var i in data){
150 |         data[i][key] = _.datetime(data[i],'yyyy-MM-dd hh:mm:ss')
151 |       }
152 |     }
153 |     else if(_.isObject(data)){
154 |       _.datetime(data , 'yyyy-MM-dd hh:mm:ss')
155 |     }
156 |   }
157 | 
158 |   static select(data , code , name){
159 |     let g = []
160 |     for(var i in data){
161 |       g.push({code:data[i]['code'] , name:data[i]['name']})
162 |     }
163 |     return g
164 |   }
165 | }
166 | 
167 | module.exports = Format
168 | 
169 | 


--------------------------------------------------------------------------------
/server/utils/print.js:
--------------------------------------------------------------------------------
 1 | let json_ = (ctx , code , msg) => {
 2 |   let result = {
 3 |     status: code,
 4 |     message: msg,
 5 |     data: null,
 6 |   }
 7 | 
 8 |   ctx.type = 'application/json'
 9 | 
10 |   ctx.body = result
11 | }
12 | 
13 | let success = (ctx , cnt) => {
14 |   ctx.type = 'application/json'
15 |   ctx.body = {
16 |     status: 0,
17 |     message: '',
18 |     data: cnt,
19 |   }
20 | }
21 | 
22 | module.exports = {
23 |   json:json_,
24 |   success
25 | }


--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
 1 | # Introduction
 2 | Degree material design admin template is based on angular material framework. It uses gulp as a task runner, sass for organising css files,angularjs for frontend code. You can use this admin template as a starter for web apps. The template works best in all devices and mobile friendly.
 3 | 
 4 | ## How to use
 5 | 1. Clone (or download) the repo.
 6 | 2. Do `npm install`.
 7 | 3. Run `gulp` to start the server in development.
 8 | 4. Go to http://localhost:2400.
 9 | 5. Finally for production mode, run the gulp again with `gulp prod`.
10 | 
11 | ## Browser Support
12 | - All modern browsers (including IE10+,)
13 | 
14 | If you like it, then consider purchasing my premium (reactjs + bootstrap 4) admin template from themeforest : https://goo.gl/KKT4i3
15 | 


--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
 1 | import sl from './config/sl'
 2 | import depends from './config/depends'
 3 | import services from './services'
 4 | import router from './router'
 5 | 
 6 | const app = sl('sl',depends)
 7 | 
 8 | app.mod(services)
 9 | 
10 | app.router(router)
11 | 
12 | app.start()


--------------------------------------------------------------------------------
/src/build.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Server Watch</title>
 6 |   <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |   <base href="/">
 8 | </head>
 9 | <body>
10 |   <noscript>
11 |     You need to enable JavaScript to run this app.
12 |   </noscript>
13 |   <div ui-view></div>
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/src/build/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset="utf-8"><title>Server Watch</title><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><base href="/"><link href="static/css/app.a0713f88.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div ui-view></div><script type="text/javascript" src="static/js/vendor.42aec597.js"></script><script type="text/javascript" src="static/js/app.42aec597.js"></script></body></html>


--------------------------------------------------------------------------------
/src/build/static/css/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/build/static/css/fa-solid-900.woff


--------------------------------------------------------------------------------
/src/build/static/css/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/build/static/css/fa-solid-900.woff2


--------------------------------------------------------------------------------
/src/build/static/js/vendor.42aec597.js:
--------------------------------------------------------------------------------
1 | !function(e){function n(r){if(t[r])return t[r].exports;var module=t[r]={i:r,l:!1,exports:{}};return e[r].call(module.exports,module,module.exports,n),module.l=!0,module.exports}var r=window.webpackJsonp;window.webpackJsonp=function(t,c,a){for(var i,u,f,s=0,p=[];s<t.length;s++)u=t[s],o[u]&&p.push(o[u][0]),o[u]=0;for(i in c)Object.prototype.hasOwnProperty.call(c,i)&&(e[i]=c[i]);for(r&&r(t,c,a);p.length;)p.shift()();if(a)for(s=0;s<a.length;s++)f=n(n.s=a[s]);return f};var t={},o={1:0};n.e=function(e){function r(){i.onerror=i.onload=null,clearTimeout(u);var n=o[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}var t=o[e];if(0===t)return new Promise(function(e){e()});if(t)return t[2];var c=new Promise(function(n,r){t=o[e]=[n,r]});t[2]=c;var a=document.getElementsByTagName("head")[0],i=document.createElement("script");i.type="text/javascript",i.charset="utf-8",i.async=!0,i.timeout=12e4,n.nc&&i.setAttribute("nonce",n.nc),i.src=n.p+"static/js/"+({0:"app"}[e]||e)+".42aec597.js";var u=setTimeout(r,12e4);return i.onerror=i.onload=r,a.appendChild(i),c},n.m=e,n.c=t,n.d=function(exports,e,r){n.o(exports,e)||Object.defineProperty(exports,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(module){var e=module&&module.__esModule?function(){return module.default}:function(){return module};return n.d(e,"a",e),e},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n.oe=function(e){throw console.error(e),e}}([]);


--------------------------------------------------------------------------------
/src/components/Common/Chart/Lite/index.html:
--------------------------------------------------------------------------------
1 | <div class="chart"><canvas></canvas><span class="chart-tip" ng-bind="$ctrl.value"></span></div>


--------------------------------------------------------------------------------
/src/components/Common/Chart/Lite/index.js:
--------------------------------------------------------------------------------
  1 | import angular from 'angular'
  2 | import _ from '../../../../utils/_'
  3 | import tpl from './index.html'
  4 | import './index.less'
  5 | 
  6 | class ChartLite {
  7 | 
  8 |   constructor($element) {
  9 |     this.$element = $element
 10 |     this.tickData = []
 11 |     this.config = {
 12 | 
 13 |     }
 14 |     this.value = 'N/A'
 15 |     this.width = 120
 16 |     this.height = 20
 17 |     this.count = this.width
 18 |     this.datas = []
 19 |     this.raw = []
 20 |     this.num = 1
 21 | 
 22 |   }
 23 | 
 24 | 
 25 |   $onInit() {
 26 | 
 27 | 
 28 |   }
 29 | 
 30 |   $onChanges({ data , color }) {
 31 |     if(color && color.currentValue){
 32 |       this.num = this.color.length
 33 |       this.datas = new Array(this.num).fill(0).map((i)=>[])
 34 |     }
 35 |     
 36 |     if (data && data.currentValue) {
 37 |       this.update(data.currentValue.value, data.currentValue.raw)
 38 |     }
 39 |   }
 40 | 
 41 |   $onDestroy() {
 42 | 
 43 |   }
 44 | 
 45 |   $postLink() {
 46 |     var canvas = this.$element.find('canvas')[0]
 47 |     canvas.width = this.width
 48 |     canvas.height = this.height
 49 |     this.ctx = canvas.getContext('2d')
 50 | 
 51 |     this.ctx.lineWidth = 1
 52 | 
 53 |     // canvas.addEventListener('mousemove', (e) => {
 54 |     //   this.display(e.layerX || e.offsetX || 0)
 55 |     // }, false);
 56 | 
 57 |   }
 58 | 
 59 |   display(x , y) {
 60 |     console.log(x)
 61 |     if(x < this.raw.length){
 62 |       this.value = this.raw[x]
 63 |     }
 64 |   }
 65 | 
 66 |   draw() {
 67 |     let ctx = this.ctx
 68 | 
 69 |     let h = this.height, w = this.width
 70 | 
 71 |     let fill = this.fill != false
 72 | 
 73 |     ctx.clearRect(0, 0, w, h)
 74 | 
 75 |     for(var k = 0; k < this.datas.length; k++){
 76 |       let data = this.datas[k]
 77 | 
 78 |       let leng = data.length
 79 | 
 80 |       ctx.beginPath()
 81 | 
 82 |       //设置样式
 83 |       ctx.strokeStyle = "rgba(" + this.color[k] + ",1)"
 84 |       ctx.fillStyle = "rgba(" + this.color[k] + ",.55)"
 85 |       for (var i = 0; i < w; i++) {
 86 |         let iy = Math.ceil(h - data[i] * h) + .5
 87 |         
 88 |         if (i < leng) {
 89 |           if(i==0){
 90 |             ctx.moveTo(i, iy)
 91 |           }else{
 92 |             ctx.lineTo(i, iy)
 93 |           }
 94 |         } else {
 95 |           break;
 96 |         }
 97 |       }
 98 | 
 99 | 
100 |       if(fill){
101 |         ctx.lineWidth = 0.1
102 |         ctx.lineTo(leng - 1, h)
103 |         ctx.lineTo(0, h)
104 |         ctx.fill()
105 |       }
106 |       
107 |       ctx.stroke()
108 | 
109 |       ctx.closePath()
110 |     }
111 |     
112 |   }
113 | 
114 | 
115 |   update(d, raw) {
116 |     
117 |     for (var i = 0; i < d.length; i++) {
118 |       this.datas[i].push( d[i] )
119 | 
120 |       if (this.datas[i].length > this.count) {
121 |         this.datas[i].splice(0, 1)
122 |       }
123 |     }
124 | 
125 |     this.raw.push(raw)
126 |     if (this.raw.length > this.count) {
127 |       this.raw.splice(0, 1)
128 |     }
129 | 
130 |     this.value = raw
131 |     this.draw()
132 |   }
133 | }
134 | 
135 | /*class Chart2 {
136 | 
137 |   constructor($element) {
138 |     this.$element = $element
139 |     this.count = 30
140 |     this.tickData = []
141 |     this.config = {
142 |       type: 'line',
143 |       data: {
144 |         labels: new Array(this.count).fill(''),
145 |         datasets: [{
146 |           label: '',
147 |           data: this.tickData,
148 |           pointRadius: 0,
149 |           borderColor: 'rgb(75, 192, 192)',
150 |           borderWidth: 1,
151 |           backgroundColor: 'rgba(75, 192, 192,0.5)'
152 |         }]
153 |       },
154 |       options: {
155 |         responsive: true,
156 |         legend: { display: false },
157 |         scales: {
158 |           xAxes: [{
159 |             display: false
160 |           }],
161 |           yAxes: [{
162 |             display: false,
163 |             ticks: {
164 |               min: 0,
165 |               max: 1,
166 |               stepSize: 1
167 |             }
168 |           }]
169 |         }
170 |       }
171 |     }
172 |   }
173 | 
174 | 
175 |   $onInit() {}
176 | 
177 |   $onChanges({ data }) {
178 |     if (data && data.currentValue) {
179 |       this.update(data.currentValue.value)
180 |     }
181 |   }
182 | 
183 |   $onDestroy(){
184 |     if(this.chart)
185 |       this.chart.destroy()
186 |   }
187 | 
188 |   $postLink() {
189 |     var canvas = this.$element.find('canvas')[0]
190 |     var ctx = canvas.getContext('2d')
191 |     this.chart = new Line(ctx, this.config)
192 |   }
193 | 
194 |   update(d) {
195 |     if(d){
196 |       console.log(this.tickData)
197 |       this.tickData[this.tickData.length] = d
198 | 
199 |       if (this.tickData.length > this.count+1) {
200 |         this.tickData.splice(0,1)
201 |       }
202 |       if(this.chart) this.chart.update()
203 |     }
204 | 
205 |   }
206 | }*/
207 | ChartLite.$inject = ['$element']
208 | 
209 | export default {
210 |   name: 'chartLite',
211 |   component: {
212 |     template: tpl,
213 |     bindings: {
214 |       data: '<',
215 |       color: '<',
216 |       fill: '<',
217 |       min:'<',
218 |       max:'<',
219 |     },
220 |     controller: ChartLite
221 |   }
222 | }


--------------------------------------------------------------------------------
/src/components/Common/Chart/Lite/index.less:
--------------------------------------------------------------------------------
 1 | .chart{
 2 |   &>*{
 3 |     vertical-align: middle;
 4 |   }
 5 | }
 6 | .chart-tip{
 7 |   color:#666;
 8 |   font-weight: 500;
 9 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10 |   display: inline-block;
11 |   margin-left: 5px;
12 | }


--------------------------------------------------------------------------------
/src/components/Common/Chart/index.html:
--------------------------------------------------------------------------------
1 | <div class="chart-wrap"><canvas></canvas></div>


--------------------------------------------------------------------------------
/src/components/Common/Chart/index.js:
--------------------------------------------------------------------------------
 1 | import angular from 'angular'
 2 | import _ from '../../../utils/_'
 3 | import tpl from './index.html'
 4 | import './style.less'
 5 | import { Line } from 'chart.js'
 6 | 
 7 | class Chart {
 8 | 
 9 |   constructor($element) {
10 |     this.$element = $element
11 |   }
12 | 
13 |   init(){
14 | 
15 |   }
16 | 
17 |   $onInit() {
18 | 
19 |   }
20 | 
21 |   $onChanges({ update }) {
22 |     if (update && update.currentValue) {
23 |       if(this.chart) this.chart.update()
24 |     }
25 |   }
26 | 
27 | 
28 |   $onDestroy(){
29 |     if(this.chart){
30 |       this.chart.destroy()
31 |     }
32 |   }
33 | 
34 |   $postLink() {
35 |     var canvas = this.$element.find('canvas')[0]
36 |     var ctx = canvas.getContext('2d')
37 |     this.chart = new Line(ctx, this.config)
38 |   }
39 | }
40 | 
41 | Chart.$inject = ['$element']
42 | 
43 | export default {
44 |   name: 'chart',
45 |   component: {
46 |     template: tpl,
47 |     bindings: {
48 |       config:'=',
49 |       update:'<'
50 |     },
51 |     controller: Chart
52 |   }
53 | }


--------------------------------------------------------------------------------
/src/components/Common/Chart/style.less:
--------------------------------------------------------------------------------
1 | .chart-wrap{
2 |   position: relative;
3 | }


--------------------------------------------------------------------------------
/src/components/Common/Datetime/style.less:
--------------------------------------------------------------------------------
  1 | .angularjs-datetime-picker {
  2 |   color: #333;
  3 |   font: normal 14px sans-serif;
  4 |   border: 1px solid #ddd;
  5 |   display: inline-block;
  6 |   background: #fff;
  7 |   z-index:2001;
  8 | }
  9 | .angularjs-datetime-picker > .adp-month {
 10 |   text-align: center;
 11 |   line-height: 22px;
 12 |   padding: 5px 10px;
 13 |   background: #fcfcfc;
 14 |   text-transform: uppercase;
 15 |   font-weight: bold;
 16 |   border-bottom: 1px solid #ddd;
 17 |   position: relative;
 18 |   color:#495060;
 19 |   font-size:12px;
 20 | }
 21 | .angularjs-datetime-picker > .adp-month > button {
 22 |   color: #999;
 23 |   font-family: sans-serif;
 24 |   outline: none;
 25 |   position: absolute;
 26 |   background: transparent;
 27 |   border: none;
 28 |   cursor: pointer;
 29 |   font-size:16px;
 30 |   width:16px;
 31 | }
 32 | .angularjs-datetime-picker > .adp-month > button:hover {
 33 |   color: #333;
 34 | }
 35 | .angularjs-datetime-picker > .adp-month > button.adp-prev {
 36 |   left: 10px;
 37 | }
 38 | .angularjs-datetime-picker > .adp-month > button.adp-next {
 39 |   right: 10px;
 40 | }
 41 | .angularjs-datetime-picker > .adp-month > button.adp-prev-m {
 42 |   left: 30px;
 43 | }
 44 | .angularjs-datetime-picker > .adp-month > button.adp-next-m {
 45 |   right: 30px;
 46 | }
 47 | .angularjs-datetime-picker > .adp-days {
 48 |   width: 210px; /* 30 x 7 */
 49 |   margin: 10px;
 50 |   text-align: center;
 51 |   font-size:12px;
 52 | }
 53 | .angularjs-datetime-picker > .adp-days > .adp-day-of-week, .angularjs-datetime-picker > .adp-days > .adp-day {
 54 |   box-sizing: border-box;
 55 |   -moz-box-sizing: border-box;
 56 |   border: 1px solid transparent;
 57 |   width: 30px;
 58 |   line-height: 28px;
 59 |   float: left;
 60 |   position: relative;
 61 | }
 62 | .angularjs-datetime-picker > .adp-days > .adp-day-of-week {
 63 |   font-weight: bold;
 64 | }
 65 | .angularjs-datetime-picker > .adp-days > .adp-day:not(.selectable) {
 66 |   opacity: 0.15;
 67 |   cursor: default;
 68 | }
 69 | .angularjs-datetime-picker > .adp-days > .adp-day.selectable  {
 70 |   cursor: pointer;
 71 | }
 72 | .angularjs-datetime-picker > .adp-days > .adp-day.selected {
 73 |   background: #e0e0e0;
 74 | }
 75 | .angularjs-datetime-picker > .adp-days > .adp-day.selectable:hover {
 76 |   background: #eee;
 77 | }
 78 | .angularjs-datetime-picker > .adp-days:after {
 79 |   content: '';
 80 |   display: block;
 81 |   clear: left;
 82 |   height: 0;
 83 | }
 84 | 
 85 | .angularjs-datetime-picker input[type=range] {
 86 |   width: 150px;
 87 | }
 88 | 
 89 | .angularjs-datetime-picker > .adp-days > .adp-day.today:after{
 90 |   content: "";
 91 |   display: block;
 92 |   width: 6px;
 93 |   height: 6px;
 94 |   border-radius: 50%;
 95 |   background: #2d8cf0;
 96 |   position: absolute;
 97 |   top: 1px;
 98 |   right: 1px;
 99 | }
100 | .angularjs-datetime-picker > .adp-day{
101 |   position: relative;
102 | }
103 | 
104 | 
105 | .hourLabel,.minutesLabel{
106 |   float:left;width:50px;
107 | }


--------------------------------------------------------------------------------
/src/components/Common/Directive.js:
--------------------------------------------------------------------------------
  1 | import angular from 'angular'
  2 | import { Line } from 'chart.js'
  3 | 
  4 | let ng = angular.module('slDirective',[])
  5 | 
  6 | ng.directive('onKeyenter', function() {
  7 |   return function(scope, element, attrs) {
  8 |     element.bind("keyup", function(e) {
  9 |       var keycode = window.event ? e.keyCode : e.which;
 10 |       if (keycode == 13) {
 11 |         scope.$apply(attrs.onKeyenter);
 12 |       }
 13 |     });
 14 |   };
 15 | })
 16 | 
 17 | ng.directive('slDropdown', ['$document', function($document) {
 18 |   return {
 19 |     restrict: 'A',
 20 | 
 21 |     link: function($scope, element, attr) {
 22 |       var menu = element.find('.dd-menu'),
 23 |         trigger = element.find('.dd-toggle');
 24 |       var capture = false;
 25 |       trigger.on('click', function(e) {
 26 |         capture = true;
 27 |         element.toggleClass('open');
 28 |       });
 29 | 
 30 |       $document.on('click', function(e) {
 31 |         if (!capture) {
 32 |           element.removeClass('open');
 33 |         }
 34 |         capture = false;
 35 | 
 36 |         //element.removeClass('open');
 37 |         /*if( !(element[0].compareDocumentPosition(e.target) & 16) ){
 38 |             if(flag)
 39 |                 element.removeClass('open');
 40 |         }*/
 41 |       })
 42 |     }
 43 |   }
 44 | }])
 45 | 
 46 | ng.directive('slInputContainer', ['$document', function($document) {
 47 |   return {
 48 |     restrict: 'A',
 49 | 
 50 |     link: function($scope, $element, $attr) {
 51 |       $element.addClass('sl-input-container');
 52 |       let capture = false
 53 |       let className = 'focused'
 54 |       $element.bind("click", function(e) {
 55 |         $element.addClass(className)
 56 |         let hit = $element.find('input') || $element.find('textarea')
 57 |         if(hit.length) hit[0].focus()
 58 |           
 59 |         capture = true
 60 |       })
 61 | 
 62 |       $document.on('click', function(e) {
 63 |         if (!capture) {
 64 |           $element.removeClass(className);
 65 |         }
 66 |         capture = false;
 67 |       })
 68 | 
 69 |       let req = $element.find('input[required]')
 70 |       console.log(req)
 71 |       if(req){
 72 |         $element.addClass('sl-input-required')
 73 |       }
 74 |     }
 75 |   }
 76 | }])
 77 | 
 78 | ng.directive('slSelect', [function() {
 79 |   return {
 80 |     restrict: 'A',
 81 | 
 82 |     scope:{
 83 | 
 84 |     },
 85 |     template:'<>',
 86 | 
 87 |     link: function($scope, $element, $attr) {
 88 | 
 89 |     }
 90 |   }
 91 | }])
 92 | 
 93 | ng.directive('slToggleClass', ['$document', function($document) {
 94 |   return {
 95 |     restrict: 'A',
 96 | 
 97 |     link: function($scope, $element, $attr) {
 98 |       let capture = false
 99 |       let className = $attr["slToggleClass"]
100 |       $element.bind("click", function(e) {
101 |         $element.addClass(className)
102 |         capture = true;
103 |       })
104 | 
105 |       $document.on('click', function(e) {
106 |         if (!capture) {
107 |           $element.removeClass(className);
108 |         }
109 |         capture = false;
110 |       })
111 |     }
112 |   }
113 | }])
114 | 
115 | ng.directive('slAutofocus', ['$timeout', function($timeout) {
116 |     return {
117 |         restrict: 'A',
118 |         scope: {
119 |             'slAutofocus': '='
120 |         },
121 |         link: function($scope, $element) {
122 |             $scope.$watch('slAutofocus', function(nv, ov) {
123 |                 if (nv) {
124 |                     $timeout(function() {
125 |                         $element[0].focus();
126 |                     });
127 |                 }
128 |             });
129 |         }
130 |     }
131 | }])
132 | 
133 | ng.directive('slProgressLinear', [function() {
134 |   return {
135 |     restrict: 'AE',
136 | 
137 |     template:'<div class="sl-container sl-mode-query"><div class="sl-dashed"></div><div class="sl-bar sl-bar1"></div><div class="sl-bar sl-bar2"></div></div>',
138 |   }
139 | }])
140 | 
141 | 
142 | export default ng.name


--------------------------------------------------------------------------------
/src/components/Common/Filter.js:
--------------------------------------------------------------------------------
 1 | import angular from 'angular'
 2 | import format from '../../utils/format'
 3 | 
 4 | let ng = angular.module('slFilter', [])
 5 | 
 6 | ng.filter("byte", function() {
 7 |   return function(input , t) {
 8 |     return format.byte(input , t)
 9 |   }
10 | })
11 | 
12 | ng.filter("time", function() {
13 |   return function(input , t) {
14 |     return format.time(input , t)
15 |   }
16 | })
17 | 
18 | 
19 | export default ng.name
20 | 


--------------------------------------------------------------------------------
/src/components/Common/Message/index.html:
--------------------------------------------------------------------------------
1 | <div class="sl-message">
2 |   <div class="sl-message-notice"><div class="sl-message-notice-content"><div class="sl-message-custom-content sl-message-success"><i class="slicon slicon-check-circle"></i><span>This is a message of success</span></div></div></div>
3 | </div>


--------------------------------------------------------------------------------
/src/components/Common/Message/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/components/Common/Message/index.js


--------------------------------------------------------------------------------
/src/components/Common/Modal/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/components/Common/Modal/index.html


--------------------------------------------------------------------------------
/src/components/Common/Modal/index.js:
--------------------------------------------------------------------------------
 1 | import _ from '../../../utils/_'
 2 | import tpl from './index.html'
 3 | 
 4 | class Modal {
 5 | 
 6 |   constructor($document) {
 7 |     this.isOpen = false
 8 |     this.$document = $document
 9 |     this.current = {}
10 | 
11 |   }
12 | 
13 |   $onInit(){
14 |     this.change = this.ngChange
15 |   }
16 | 
17 |   initOptions(){
18 |     
19 |     let current = this.current.code
20 | 
21 |     for(var i in this.options){
22 |       if(this.options[i].code == current){
23 |         this.current.name = this.options[i].name
24 |       }
25 |     }
26 | 
27 |     console.log(current)
28 |   }
29 | 
30 |   $onChanges({ngModel , slOptions}){
31 | 
32 |     if(ngModel && ngModel.currentValue){
33 |       this.current.code = ngModel.currentValue
34 |     }
35 | 
36 |     if(slOptions && slOptions.currentValue){
37 |       this.options = slOptions.currentValue
38 |       if(!_.isObject( this.options[0] ) ){
39 |         this.options = this.options.map( (i) => ({code:i ,name:i}) )
40 |       }
41 |     }
42 | 
43 |     if(this.options && this.current.code){
44 |       this.initOptions()
45 |     }
46 | 
47 |   }
48 | 
49 |   open(){
50 |     this.isOpen = true
51 |   }
52 | 
53 |   close(){
54 |     this.isOpen = false
55 |   }
56 | 
57 |   changeOption(v){
58 |     this.change(v)
59 |     this.current = v
60 |     this.close()
61 |   }
62 | }
63 | 
64 | Modal.$inject = ['$document']
65 | 
66 | export default {
67 |   name: 'slModal',
68 |   component: {
69 |     template: tpl,
70 |     bindings: {
71 | 
72 |     },
73 |     controller: Modal
74 |   }
75 | }


--------------------------------------------------------------------------------
/src/components/Common/Notfound/index.html:
--------------------------------------------------------------------------------
1 | <div class="page" style="text-align: center;margin-top:25%;" layout="row" layout-align="center center">
2 |     <h1 style="font-size: 8rem;  margin-top: -6rem; padding: 0; font-weight: 600;">404</h1>
3 | </div>


--------------------------------------------------------------------------------
/src/components/Common/Notfound/index.js:
--------------------------------------------------------------------------------
1 | import tpl from './index.html'
2 | 
3 | export default {
4 |   name: 'notfound',
5 |   template: tpl
6 | }


--------------------------------------------------------------------------------
/src/components/Common/Paginate/index.html:
--------------------------------------------------------------------------------
 1 | <sl-progress-linear ng-show="$ctrl.process"></sl-progress-linear>
 2 | <div class="sl-pagination">
 3 |   <div class="limit-select" ng-if="$ctrl.options.enableLimit">
 4 |     <span class="label"></span>
 5 |     <select ng-change="$ctrl.changeLimit()" class="md-table-select" ng-model="$ctrl.query.limit" ng-options="v.id as v.label for v in $ctrl.options.limitOptions">
 6 |     </select>
 7 |   </div>
 8 |   <div class="sl-pager" ng-if="$ctrl.page.total>1">
 9 |     <button class="sl-button" ng-click="$ctrl.prev()" ng-disabled="$ctrl.page.current<=1">
10 |       <i class="fas fa-chevron-left"></i>
11 |     </button>
12 |     <span class="label">
13 |       <input type="text" on-keyenter="$ctrl.setPage()" ng-model="$ctrl.page.pageto" autocomplete="off" spellcheck="false" /> / {{$ctrl.page.total}} </span>
14 |     <button class="sl-button" ng-click="$ctrl.next()" ng-disabled="$ctrl.page.current>=$ctrl.page.total">
15 |       <i class="fas fa-chevron-right"></i>
16 |     </button>
17 |   </div>
18 | </div>


--------------------------------------------------------------------------------
/src/components/Common/Paginate/index.js:
--------------------------------------------------------------------------------
 1 | import angular from 'angular'
 2 | import _ from '../../../utils/_'
 3 | import tpl from './index.html'
 4 | 
 5 | class Paginate {
 6 | 
 7 |   constructor() {
 8 |   }
 9 | 
10 |   $onInit(a) {
11 |     this.options = this.slOptions.limitOptions
12 | 
13 |     this.process = false
14 | 
15 |     this.query = {
16 |       limit : 10 , page : 1
17 |     }
18 | 
19 |     if(this.slOptions.limit){
20 |       this.query.limit = this.slOptions.limit
21 |     }
22 |     if(this.slOptions.page){
23 |       this.query.page = this.slOptions.page
24 |     }
25 | 
26 |     for(var i = 0 ; i<this.options.length ; i++){
27 |       let v = this.options[i]
28 |       this.options[i] = {id:v , label:v+'条/页'}
29 |     }
30 |     
31 | 
32 |     this.page = {
33 |       total : 0,
34 |       current : 0,
35 |       pageto : 0
36 |     }
37 | 
38 |     // this.update(this.query)
39 |   }
40 | 
41 |   update(q){
42 |     this.process = true
43 | 
44 |     this.slUpdate({query : q}).then((resp)=>{
45 |       this.data = resp.data
46 |       let count = resp.count
47 | 
48 |       this.page.total = Math.ceil( count / q.limit )
49 |       this.page.current = q.page
50 |       this.query.page = q.page
51 |       this.page.pageto = q.page
52 | 
53 |       this.process = false
54 | 
55 |     })
56 |   }
57 | 
58 |   setPage(){
59 |     let params = angular.copy(this.query)
60 |     params.page = parseInt(this.page.pageto)
61 |     this.update(params)
62 |   }
63 | 
64 |   next(){
65 |     let params = angular.copy(this.query)
66 |     params.page += 1
67 |     this.update(params)
68 |   }
69 | 
70 |   prev(){
71 |     let params = angular.copy(this.query)
72 |     params.page -= 1
73 |     this.update(params)
74 |   }
75 | 
76 |   changeLimit(){
77 |     this.update(this.query)
78 |   }
79 | }
80 | 
81 | Paginate.$inject = []
82 | 
83 | export default {
84 |   name: 'slPaginate',
85 |   component: {
86 |     template: tpl,
87 |     bindings: {
88 |       slOptions: '<',
89 |       slUpdate : '&'
90 |     },
91 |     controller: Paginate
92 |   }
93 | }


--------------------------------------------------------------------------------
/src/components/Common/Select/index.html:
--------------------------------------------------------------------------------
1 | <div class="sl-select" ng-class="{'open':$ctrl.isOpen == true}">
2 |   <div class="sl-select-title" ng-bind="$ctrl.current.name" ng-click="$ctrl.open()"></div>
3 |   <div class="sl-select-mask" ng-click="$ctrl.close()"></div>
4 |   <div class="sl-select-menu">
5 |     <div class="sl-select-option" ng-repeat="v in $ctrl.options" ng-click="$ctrl.changeOption(v)" ng-class="{'selected':v.code == $ctrl.current.code}" ng-bind="v.name"></div>
6 |   </div>
7 | </div>


--------------------------------------------------------------------------------
/src/components/Common/Select/index.js:
--------------------------------------------------------------------------------
 1 | import _ from '../../../utils/_'
 2 | import tpl from './index.html'
 3 | import angular from 'angular'
 4 | class Select {
 5 | 
 6 |   constructor($document) {
 7 |     this.isOpen = false
 8 |     this.$document = $document
 9 |     this.current = {}
10 | 
11 |   }
12 | 
13 |   $onInit(){
14 |     this.change = this.ngChange
15 |   }
16 | 
17 |   initOptions(){
18 |     
19 |     let current = this.current.code
20 | 
21 |     for(var i in this.options){
22 |       if(this.options[i].code == current){
23 |         this.current.name = this.options[i].name
24 |       }
25 |     }
26 | 
27 |     console.log(current)
28 |   }
29 | 
30 |   $onChanges({slDef , slOptions}){
31 | 
32 |     if(slDef && slDef.currentValue){
33 |       this.current.code = slDef.currentValue
34 |     }
35 | 
36 |     if(slOptions && slOptions.currentValue){
37 |       this.options = slOptions.currentValue
38 |       if(!_.isObject( this.options[0] ) ){
39 |         this.options = this.options.map( (i) => ({code:i ,name:i}) )
40 |       }
41 |     }
42 | 
43 |     if(this.options && this.current.code){
44 |       this.initOptions()
45 |     }
46 | 
47 |   }
48 | 
49 |   open(){
50 |     this.isOpen = true
51 |   }
52 | 
53 |   close(){
54 |     this.isOpen = false
55 |   }
56 | 
57 |   changeOption(v){
58 |     this.change(v)
59 |     this.current = v
60 |     this.ngModel = v.code
61 |     this.close()
62 |   }
63 | }
64 | 
65 | Select.$inject = ['$document']
66 | 
67 | // let app = angular.module('SLSelect', [])
68 | 
69 | // app.component('slSelect' , {
70 | //   template: tpl,
71 | //   bindings: {
72 | //     ngModel: '=',
73 | //     ngChange:'&',
74 | //     slDef: '<',
75 | //     slOptions:'<'
76 | //   },
77 | //   controller: Select
78 | // })
79 | 
80 | // export default app.name
81 | 
82 | export default {
83 |   name: 'slSelect',
84 |   component: {
85 |     template: tpl,
86 |     bindings: {
87 |       ngModel: '=',
88 |       ngChange:'&',
89 |       slDef: '<',
90 |       slOptions:'<'
91 |     },
92 |     controller: Select
93 |   }
94 | }


--------------------------------------------------------------------------------
/src/components/Common/Spin/index.html:
--------------------------------------------------------------------------------
1 | <div class="sl-spin sl-spin-spinning" ng-class="{'sl-spin-center':2}">
2 |   <span class="sl-spin-dot">
3 |     <i></i>
4 |     <i></i>
5 |     <i></i>
6 |     <i></i>
7 |   </span>
8 | </div>


--------------------------------------------------------------------------------
/src/components/Common/Spin/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import './style.less'
 3 | 
 4 | class Spin {
 5 | 
 6 |   constructor($document) {
 7 |     this.$document = $document
 8 |   }
 9 | 
10 |   $onInit(){
11 |     console.log(this.po)
12 |   }
13 | 
14 | }
15 | 
16 | Spin.$inject = ['$document']
17 | 
18 | /*let app = angular.module('SlSpin', [])
19 | 
20 | app.component('slSpin' , {
21 |   template: tpl,
22 |   bindings: {
23 |     slPosition: '<',
24 |   },
25 |   controller: Spin
26 | })
27 | 
28 | export default app.name
29 | */
30 | export default {
31 |   name: 'slSpin',
32 |   component: {
33 |     template: tpl,
34 |     bindings: {
35 |       slPosition: '<',
36 |     },
37 |     controller: Spin
38 |   }
39 | }


--------------------------------------------------------------------------------
/src/components/Common/Spin/style.less:
--------------------------------------------------------------------------------
 1 | .sl-spin-center{
 2 |   position: absolute;
 3 |   width:100%;
 4 |   height: 100%;
 5 | 
 6 |   background: rgba(255,255,255,.7);
 7 |   text-align: center;
 8 | }
 9 | 
10 | .sl-spin-dot {
11 |   position: relative;
12 |   display: inline-block;
13 |   width: 20px;
14 |   height: 20px;
15 |   -webkit-transform: rotate(45deg);
16 |       -ms-transform: rotate(45deg);
17 |           transform: rotate(45deg);
18 |   -webkit-animation: slRotate 1.2s infinite linear;
19 |           animation: slRotate 1.2s infinite linear;
20 | }
21 | .sl-spin-center .sl-spin-dot{
22 |   margin:auto;
23 |   top:50%;
24 |   position: absolute;
25 |   margin-top: -10px;
26 | }
27 | 
28 | .sl-spin-dot i {
29 |   width: 9px;
30 |   height: 9px;
31 |   border-radius: 100%;
32 |   background-color: #1890ff;
33 |   -webkit-transform: scale(0.75);
34 |       -ms-transform: scale(0.75);
35 |           transform: scale(0.75);
36 |   display: block;
37 |   position: absolute;
38 |   opacity: 0.3;
39 |   -webkit-animation: slSpinMove 1s infinite linear alternate;
40 |           animation: slSpinMove 1s infinite linear alternate;
41 |   -webkit-transform-origin: 50% 50%;
42 |       -ms-transform-origin: 50% 50%;
43 |           transform-origin: 50% 50%;
44 | }
45 | .sl-spin-dot i:nth-child(1) {
46 |   left: 0;
47 |   top: 0;
48 | }
49 | .sl-spin-dot i:nth-child(2) {
50 |   right: 0;
51 |   top: 0;
52 |   -webkit-animation-delay: 0.4s;
53 |           animation-delay: 0.4s;
54 | }
55 | .sl-spin-dot i:nth-child(3) {
56 |   right: 0;
57 |   bottom: 0;
58 |   -webkit-animation-delay: 0.8s;
59 |           animation-delay: 0.8s;
60 | }
61 | .sl-spin-dot i:nth-child(4) {
62 |   left: 0;
63 |   bottom: 0;
64 |   -webkit-animation-delay: 1.2s;
65 |           animation-delay: 1.2s;
66 | }
67 | 
68 | 
69 | 
70 | @-webkit-keyframes slSpinMove {
71 |   to {
72 |     opacity: 1;
73 |   }
74 | }
75 | @keyframes slSpinMove {
76 |   to {
77 |     opacity: 1;
78 |   }
79 | }


--------------------------------------------------------------------------------
/src/components/Common/Table/index.html:
--------------------------------------------------------------------------------
 1 | <div class="sl-table">
 2 |   <div class="sl-table-container">
 3 |     <div class="filter-button" ng-click="$ctrl.popupFliter()"><i class="icon fas fa-filter"></i></div>
 4 |     <table class="sl-table row-select">
 5 |       <thead class="md-head" ng-if="$ctrl.options.enableHead">
 6 |         <tr class="md-row">
 7 |           <th class="md-column" ng-class="{active:column.filterOption.data}" ng-repeat="column in $ctrl.columns">
 8 |             <span ng-bind="column.name"></span>
 9 |             <i ng-if="column.filter" class="icon fas fa-filter" ng-click="$ctrl.popupFliter(column)" ng-class="{select:column.filterOption.data}"></i>
10 |             <!--           <div class="filter-dropdown" ng-show="column.filterOption.display" ng-if="column.filter">
11 |             <input class="sl-input" ng-model="column.filterOption.data" type="text" />
12 |             <button class="sl-btn sl-btn-primary" ng-click="$ctrl.search()">搜索</button>
13 |           </div> -->
14 |           </th>
15 |         </tr>
16 |       </thead>
17 |       <tbody class="md-body">
18 |         <tr ng-repeat="row in $ctrl.data" class="md-row">
19 |           <td data-title="{{column.name}}" class="md-cell" ng-repeat="column in $ctrl.columns" ng-bind-html="$ctrl.parse(row,column)"></td>
20 |         </tr>
21 |         <tr class="nodata" ng-if="!$ctrl.data.length">
22 |           <td colspan="{{$ctrl.columns.length}}">No Data</td>
23 |         </tr>
24 |       </tbody>
25 |     </table>
26 |     <sl-progress-linear ng-show="$ctrl.process" md-mode="query"></sl-progress-linear>
27 |   </div>
28 |   <div class="sl-pagination">
29 |     <div class="limit-select" ng-if="$ctrl.options.enableLimit">
30 |       <span class="label"></span>
31 |       <select ng-change="$ctrl.changeLimit()" class="md-table-select" ng-model="$ctrl.query.limit" ng-options="v.id as v.label for v in $ctrl.options.limitOptions">
32 |       </select>
33 |     </div>
34 |     <div class="sl-pager" ng-if="$ctrl.page.total>1">
35 |       <button class="sl-button" ng-click="$ctrl.prev()" ng-disabled="$ctrl.page.current<=1">
36 |         <i class="fas fa-chevron-left"></i>
37 |       </button>
38 |       <span class="label">
39 |       <input type="text" on-keyenter="$ctrl.setPage()" ng-model="$ctrl.page.pageto" autocomplete="off" spellcheck="false" /> / {{$ctrl.page.total}} </span>
40 |       <button class="sl-button" ng-click="$ctrl.next()" ng-disabled="$ctrl.page.current>=$ctrl.page.total">
41 |         <i class="fas fa-chevron-right"></i>
42 |       </button>
43 |     </div>
44 |   </div>
45 |   <div class="sl-table-filter" ng-class="{active:$ctrl.activeFilter}">
46 |     <form name="form">
47 |       <div class="header">
48 |         <i class="fas fa-filter"></i>
49 |         <span>筛选</span>
50 |         <a class="close" ng-click="$ctrl.hideFliter()"><i class="fas fa-times"></i></a>
51 |       </div>
52 |       <div class="filter-dropdown" ng-repeat="item in $ctrl.filterOption">
53 |         <label ng-bind="item.name"></label>
54 |         <input class="sl-input" ng-if="item.type=='input'" ng-model="item.data" type="text" sl-autofocus="item.display" />
55 |         <input class="sl-input" type="text" ng-if="item.type=='date'" ng-model="item.data" datetime-picker date-only date-format="yyyy-MM-dd" sl-autofocus="item.display" />
56 |         <select class="sl-input" ng-if="item.type=='select'" ng-options="v.code as v.name for v in item.def" ng-model="item.data"></select>
57 |         <!-- <sl-select ng-if="item.type=='select'" ng-model="item.data" sl-def="item.data" sl-options="item.def"></sl-select> -->
58 |       </div>
59 |       <div class="footer">
60 |         <button class="sl-btn sl-btn-primary" ng-click="$ctrl.search()">搜索</button>
61 |       </div>
62 |     </form>
63 |   </div>
64 | </div>


--------------------------------------------------------------------------------
/src/components/Common/Table/index.js:
--------------------------------------------------------------------------------
  1 | import angular from 'angular'
  2 | import _ from '../../../utils/_'
  3 | import tpl from './index.html'
  4 | 
  5 | class Table {
  6 | 
  7 |   constructor($sce,$compile) {
  8 |     this.$sce = $sce
  9 |     this.$compile = $compile
 10 |     console.log(this)
 11 |   }
 12 | 
 13 |   $onInit(a) {
 14 |     this.columns = this.slTableOptions.columns
 15 |     this.options = angular.extend(Table.defaultOptions, this.slTableOptions.options)
 16 | 
 17 |     this.data = this.slTableData
 18 | 
 19 |     this.process = false
 20 | 
 21 |     this.query = angular.extend({ limit : 10 ,  page : 1 }, this.slTableOptions.query)
 22 | 
 23 |     
 24 |     for(var i = 0 ; i<this.options.limitOptions.length ; i++){
 25 |       let v = this.options.limitOptions[i]
 26 |       this.options.limitOptions[i] = {id:v , label:v+'条/页'}
 27 |     }
 28 |     
 29 | 
 30 |     console.log(this.options.limitOptions)
 31 | 
 32 |     this.filterHtml = '';
 33 |     this.filterOption = {}
 34 | 
 35 |     this.columns.forEach((i) => {
 36 |       let filter = i.filter
 37 |       let field = i.field
 38 |       if(filter){
 39 |         this.filterOption[field] = {
 40 |           data: filter.value || '',
 41 |           type : filter.type,
 42 |           display: 0,
 43 |           name : filter.name || i.name,
 44 |           def : filter.data,
 45 |           key : filter.key || field
 46 |         }
 47 |         console.log(this.filterOption[field])
 48 |         i.filterOption = this.filterOption[field]
 49 |       }
 50 |     })
 51 | 
 52 |     //console.log(this.filterOption)
 53 |     //this.filterHtml = this.$sce.trustAsHtml(filter)
 54 | 
 55 |     console.log(this.element)
 56 | 
 57 |     this.page = {
 58 |       total : 0,
 59 |       current : 0,
 60 |       pageto : 0
 61 |     }
 62 | 
 63 |     this.update(this.query)
 64 |   }
 65 | 
 66 |   update(q){
 67 | 
 68 |     this.process = true
 69 | 
 70 |     this.slTableUpdate({query : q}).then((resp)=>{
 71 |       this.data = resp.data
 72 |       let count = resp.count
 73 | 
 74 |       this.page.total = Math.ceil( count / q.limit )
 75 |       this.page.current = q.page
 76 |       this.query.page = q.page
 77 |       this.page.pageto = q.page
 78 | 
 79 |       this.process = false
 80 | 
 81 |     })
 82 |   }
 83 | 
 84 |   setPage(){
 85 |     let params = angular.copy(this.query)
 86 |     params.page = parseInt(this.page.pageto)
 87 |     this.update(params)
 88 |   }
 89 | 
 90 |   next(){
 91 |     let params = angular.copy(this.query)
 92 |     params.page += 1
 93 |     this.update(params)
 94 |   }
 95 | 
 96 |   prev(){
 97 |     let params = angular.copy(this.query)
 98 |     params.page -= 1
 99 |     this.update(params)
100 |   }
101 | 
102 |   parse(row , column){
103 |     //return this.$sce.trustAsHtml('1');//row[column.field]
104 |     let raw_value = row[column.field] || ''
105 |     if(column.html){
106 |       let tpl = _.template(column.html , row)
107 |       return this.$sce.trustAsHtml(tpl)
108 |       // return row[column.field]
109 |     }else{
110 |       return this.$sce.trustAsHtml(raw_value.toString())
111 |     }
112 |   }
113 |   //
114 |   popupFliter(column){
115 |     this.activeFilter = true
116 |     if( column ){
117 |       let field = column.field
118 |       if(field)
119 |         this.filterOption[field].display++
120 |       //!this.filterOption[field].display
121 |     }
122 |   }
123 | 
124 |   hideFliter(){
125 |     this.activeFilter = false
126 |   }
127 | 
128 |   search(){
129 |     console.log(this.query)
130 |     let params = {}
131 |     this.columns.forEach((i)=>{
132 |       if(i.filter){
133 | 
134 |         this.query[i.filterOption.key] = i.filterOption.data
135 |         i.filterOption.display = false
136 |       }
137 |     })
138 | 
139 |     this.hideFliter()
140 |     
141 |     this.update(this.query)
142 |   }
143 | 
144 |   changeLimit(){
145 |     this.update(this.query)
146 |   }
147 | }
148 | 
149 | Table.defaultOptions = {
150 |   enablePageSelect : true,
151 |   enableLimit: true,
152 |   limitOptions: [10, 20, 50],
153 | 
154 |   enableHead:true
155 | }
156 | 
157 | Table.$inject = ['$sce','$compile']
158 | 
159 | export default {
160 |   name: 'slTable',
161 |   component: {
162 |     template: tpl,
163 |     bindings: {
164 |       slTableOptions: '<',
165 |       slTableUpdate:'&'
166 |     },
167 |     controller: Table
168 |   }
169 | }


--------------------------------------------------------------------------------
/src/components/Common/i10n/index.js:
--------------------------------------------------------------------------------
 1 | import angular from 'angular'
 2 | 
 3 | const app = angular.module("ngLocale", [], ["$provide",
 4 |   function($provide) {
 5 |     var PLURAL_CATEGORY = {
 6 |       ZERO: "zero",
 7 |       ONE: "one",
 8 |       TWO: "two",
 9 |       FEW: "few",
10 |       MANY: "many",
11 |       OTHER: "other"
12 |     };
13 |     $provide.value("$locale", {
14 |       "NOUN": {
15 |         'date': '日期',
16 |         "time": "时间",
17 |         'hour': '时',
18 |         'minute': '分',
19 |         'second': '秒',
20 |       },
21 |       "DATETIME_FORMATS": {
22 |         "MONTH": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
23 |         "SHORTMONTH": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
24 |         "DAY": ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
25 |         "SHORTDAY": ["日", "一", "二", "三", "四", "五", "六"],
26 |         "AMPMS": ["上午", "下午"],
27 |         "medium": "yyyy-M-d ah:mm:ss",
28 |         "short": "yy-M-d ah:mm",
29 |         "fullDate": "y年M月d日EEEE",
30 |         "longDate": "y年M月d日",
31 |         "mediumDate": "yyyy-M-d",
32 |         "shortDate": "yy-M-d",
33 |         "mediumTime": "ah:mm:ss",
34 |         "shortTime": "ah:mm"
35 |       },
36 |       "NUMBER_FORMATS": {
37 |         "DECIMAL_SEP": ".",
38 |         "GROUP_SEP": ",",
39 |         "PATTERNS": [{
40 |           "minInt": 1,
41 |           "minFrac": 0,
42 |           "macFrac": 0,
43 |           "posPre": "",
44 |           "posSuf": "",
45 |           "negPre": "-",
46 |           "negSuf": "",
47 |           "gSize": 3,
48 |           "lgSize": 3,
49 |           "maxFrac": 3
50 |         }, {
51 |           "minInt": 1,
52 |           "minFrac": 2,
53 |           "macFrac": 0,
54 |           "posPre": "\u00A4",
55 |           "posSuf": "",
56 |           "negPre": "\u00A4-",
57 |           "negSuf": "",
58 |           "gSize": 3,
59 |           "lgSize": 3,
60 |           "maxFrac": 2
61 |         }],
62 |         "CURRENCY_SYM": "¥"
63 |       },
64 |       "pluralCat": function(n) {
65 |         return PLURAL_CATEGORY.OTHER;
66 |       },
67 |       "id": "zh-cn"
68 |     });
69 |   }
70 | ]);
71 | 
72 | export default app.name


--------------------------------------------------------------------------------
/src/components/Common/index.js:
--------------------------------------------------------------------------------
 1 | import angular from 'angular'
 2 | 
 3 | import Select from './Select'
 4 | import Table from './Table'
 5 | import Spin from './Spin'
 6 | import Paginate from './Paginate'
 7 | import Chart from './Chart'
 8 | import ChartLite from './Chart/Lite'
 9 | 
10 | import slDirective from './Directive'
11 | import slFilter from './Filter'
12 | import slDatetime from './Datetime'
13 | import ngLocale from './i10n'
14 | 
15 | let app = angular.module('Sl', [slDirective , slFilter , slDatetime , ngLocale]);
16 | 
17 | 
18 | [Select,Table,Spin,Paginate,Chart,ChartLite].forEach((m)=>{
19 |   app.component(m.name , m.component)
20 | })
21 | 
22 | export default app.name


--------------------------------------------------------------------------------
/src/components/Layout/Header/index.html:
--------------------------------------------------------------------------------
 1 | <header class="site-head">
 2 |   <div class="logo">
 3 |       <a href="/servers">Server Watch</a>
 4 |   </div>
 5 |   <div class="menu">
 6 |     <a href="{{menu.url}}" ng-if="!menu.hide" ng-class="{'menu-selected':menu.selected}" ng-repeat="menu in $ctrl.menu">{{menu.title}}</a>
 7 |   </div>
 8 |   <div class="toolbar">
 9 |     <div class="sl-dropdown">
10 |       <div class="sl-dropdown-rel"><i class="icon fas fa-user-circle"></i></div>
11 |       <div class="sl-select-dropdown">
12 |         <ul class="sl-dropdown-menu">
13 |           <li class="sl-dropdown-item"><a target="_blank" href="https://github.com/reruin/ServerWatch">BUG 反馈</a></li>
14 |           <li class="sl-dropdown-item"><a href="/setting">设置</a></li>
15 |           <li class="sl-dropdown-item" ng-click="$ctrl.signout()">登出</li>
16 |         </ul>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </header>


--------------------------------------------------------------------------------
/src/components/Layout/Header/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import './index.less'
 3 | import pathToRegexp from 'path-to-regexp'
 4 | 
 5 | class Header {
 6 |   constructor(Session , $state , $rootScope) {
 7 |     this.session = Session
 8 |     this.$state = $state
 9 |     this.toggleTag = false
10 | 
11 |     this.menu = [
12 |       {title : '监控列表' ,url:'/servers'},
13 |       {title : '创建监控' ,url:'/server/create'},
14 |       {title : '监控详情' ,url:'/server/:id',hide:true},
15 |       {title : '修改密码' ,url:'/setting/changepwd',hide:true}
16 |     ]
17 | 
18 | 
19 |     $rootScope.$on('$locationChangeSuccess', (event, state, params) => {
20 |       this.hitMenu(state.name)
21 |     });
22 | 
23 |     this.initMenu(this.menu)
24 |     
25 |   }
26 | 
27 |   $onInit() {
28 |     this.hitMenu(this.$state.current.name)
29 |   }
30 | 
31 |   initMenu(d) {
32 |     this.hashMenu = {}
33 |     for (var i = 0; i < d.length; i++) {
34 |       this.hashMenu[ i+1 ] = d[i]
35 |     }
36 |   }
37 | 
38 |   hitMenu(stateName) {
39 |     let url = location.pathname + location.search//this.getFullUrl(stateName)
40 |     let menu = this.menu
41 | 
42 |     let current
43 |     for(let i in this.hashMenu){
44 |       let item = this.hashMenu[i]
45 |       if (item.url && pathToRegexp(item.url).test(url)) {
46 |         item.selected = true
47 |         current = item
48 |       }else{
49 |         item.selected = false
50 |       }
51 |     }
52 | 
53 |   }
54 | 
55 |   toggle(){
56 |     this.toggleTag = !this.toggleTag
57 |   }
58 | 
59 |   signout(){
60 |     this.session.destory()
61 |     this.$state.go('signin')
62 |     /*this.http.post('/api/user/signout' , this.data).then((resp) =>{
63 |       if(resp.status){
64 |         alert(resp.message)
65 |       }else{
66 |         this.session.create( this.data.account , resp.data.token )
67 |         this.http.setToken(resp.data.token)
68 |         this.$state.go('app')
69 |       }
70 |     })*/
71 |   }
72 | }
73 | 
74 | Header.$inject = ['Session' , '$state' , '$rootScope'];
75 | 
76 | export default {
77 |   name: 'slHeader',
78 |   component: {
79 |     template: tpl,
80 |     controller:Header
81 |   }
82 | }


--------------------------------------------------------------------------------
/src/components/Layout/Header/index.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/components/Layout/Header/index.less


--------------------------------------------------------------------------------
/src/components/Layout/index.html:
--------------------------------------------------------------------------------
 1 | <div class="layout ios" ng-class="{'full': $ctrl.full}">
 2 | 
 3 |     <div class="content-wrapper layout-block" ng-click="$ctrl.hide()">
 4 |         <!-- header -->
 5 |         <sl-header></sl-header>
 6 |         <div class="main-content">
 7 |             <div ui-view></div>
 8 |         </div>
 9 |     </div>
10 | </div>


--------------------------------------------------------------------------------
/src/components/Layout/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import angular from 'angular'
 3 | import http from '../../utils/http'
 4 | import header from './Header'
 5 | 
 6 | class Layout {
 7 |   constructor(session , $state){
 8 |     this.full = false
 9 |     this.$state = $state
10 |     var token = session.getToken()
11 |     if(token){
12 |       http.setToken(token)
13 |       if(location.pathname == '/'){
14 |         $state.go('app.servers')
15 |       }
16 |     }else{
17 |       $state.go('signin')
18 |     }
19 | 
20 |   }
21 | 
22 |   onInit(){
23 |     //this.$state.go('app.Dashboard')
24 |   }
25 | 
26 |   toggle(){
27 |     this.full = !this.full
28 |   }
29 | 
30 |   hide(){
31 |     this.full = false
32 |   }
33 | }
34 | 
35 | Layout.$inject = ['Session','$state'];
36 | 
37 | export default {
38 |   name : 'layout',
39 |   template : tpl,
40 |   controller : Layout,
41 |   dep:[header]
42 | }
43 | 


--------------------------------------------------------------------------------
/src/components/Server/Create/index.html:
--------------------------------------------------------------------------------
 1 | <div class="page">
 2 |   <div class="section">
 3 |     <div class="section-title">
 4 |       <div class="section-title-text">创建</div>
 5 |     </div>
 6 |     <form name="form">
 7 |     <div class="section-content col-2">
 8 |       <sl-spin sl-position="center" ng-hide="$ctrl.ready"></sl-spin>
 9 | 
10 |       <div class="row">
11 |         <div sl-input-container class="flex">
12 |           <label>显示名称</label>
13 |           <input type="text" name="label" placeholder="" required ng-model="$ctrl.data.label">
14 |           <div class="input-message" ng-messages="form.label.$error">
15 |             <div ng-message-exp="['required']">名称不能为空</div>
16 |           </div>
17 |         </div>
18 |       </div>
19 |       <div class="row">
20 |         <div sl-input-container class="flex">
21 |           <label>数据采集脚本执行间隔</label>
22 |           <sl-select ng-model="$ctrl.data.update_interval" sl-def="$ctrl.data.update_interval" sl-options="$ctrl.options.update_interval">
23 |           </sl-select>
24 | 
25 |         </div>
26 |       </div>
27 |       
28 |       <div class="row" layout-margin>
29 |         <div sl-input-container class="flex">
30 |           <label>保存历史记录</label>
31 |           <sl-radio class="sl-radio">
32 |             <span>
33 |               <input ng-model="$ctrl.data.recordable" value="1" type="radio" name="recordable" />
34 |               <i>是</i>
35 |             </span>
36 |             <span>
37 |               <input ng-model="$ctrl.data.recordable" value="0" type="radio" name="recordable" />
38 |               <i>否</i>
39 |             </span>
40 |           </sl-radio>
41 |         </div>
42 |       </div>
43 | 
44 |       <div class="row" ng-if="$ctrl.data.recordable == 1">
45 |         <div sl-input-container class="flex">
46 |           <label>入库记录间隔，单位 S（每隔该时段保存一次监控记录）</label>
47 |           <input type="text" name="record_interval" placeholder="" required ng-model="$ctrl.data.record_interval">
48 |           <div class="input-message" ng-messages="form.record_interval.$error">
49 |             <div ng-message-exp="['required']">不能为空</div>
50 |           </div>
51 |         </div>
52 |       </div>
53 | 
54 |       <div class="row" ng-if="$ctrl.data.recordable == 1">
55 |         <div sl-input-container class="flex">
56 |           <label>入库记录上限（超出自动覆盖较早的记录）</label>
57 |           <input type="text" name="record_limit" placeholder="" required ng-model="$ctrl.data.record_limit">
58 |           <div class="input-message" ng-messages="form.record_limit.$error">
59 |             <div ng-message-exp="['required']">不能为空</div>
60 |           </div>
61 |         </div>
62 |         <p style="font-size:12px;">预计可保存记录时长：{{ ($ctrl.data.record_limit * $ctrl.data.record_interval) | time}}</p>
63 |       </div>
64 | 
65 |     </div>
66 | 
67 |     <div class="section-footer">
68 |       <button class="sl-btn sl-btn-primary" ng-disabled="form.$invalid" ng-click="$ctrl.save()">确定</button>
69 |     </div>
70 |     </form>
71 |   </div>
72 | </div>
73 | </div>
74 | </div>


--------------------------------------------------------------------------------
/src/components/Server/Create/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import {message} from '../../../config/sl'
 3 | import { _ , http } from '../../../utils'
 4 | 
 5 | class ServerCreate {
 6 |   //依赖
 7 |   constructor($state) {
 8 | 
 9 |     this.$state = $state
10 |     this.query = {}
11 |     this.ready = true
12 | 
13 |     this.data = {
14 |       label : '' , 
15 |       update_interval : 5,
16 |       record_interval : 30,
17 |       record_limit : 4000,
18 |       recordable : '0'
19 |     }
20 | 
21 |     this.options = {
22 |       update_interval : [
23 |         {code:'2' , 'name':'2秒'},
24 |         {code:'5' , 'name':'5秒'},
25 |         {code:'10' , 'name':'10秒'},
26 |         {code:'15' , 'name':'15秒'},
27 |         {code:'20' , 'name':'20秒'},
28 |         {code:'30' , 'name':'30秒'},
29 |         {code:'*/1 * * * *' , 'name':'1分钟'},
30 |         {code:'*/2 * * * *' , 'name':'2分钟'},
31 |         {code:'*/3 * * * *' , 'name':'3分钟'},
32 |         {code:'*/5 * * * *' , 'name':'5分钟'}
33 |       ]
34 |     }
35 |   }
36 | 
37 |   $onInit(){
38 |     
39 |   }
40 | 
41 |   save(){
42 |     this.ready = false
43 | 
44 |     return http.post('/api/node/create' , this.data).then((resp)=> {
45 |       this.ready = true
46 | 
47 |       if(resp.status){
48 |         message.warn(resp.message)
49 |       }else{
50 |         this.$state.go('app.server',{'id':resp.data.id})
51 |       }
52 |     })
53 |   }
54 | }
55 | 
56 | ServerCreate.$inject = ['$state']
57 | 
58 | export default {
59 |   name:'serverCreate',
60 |   template: tpl,
61 |   controller: ServerCreate
62 | }


--------------------------------------------------------------------------------
/src/components/Server/Edit/index.html:
--------------------------------------------------------------------------------
 1 | <div class="page">
 2 |   <div class="section">
 3 |     <div class="section-title">
 4 |       <div class="section-title-text">修改</div>
 5 |     </div>
 6 |     <form name="form">
 7 |     <div class="section-content col-2">
 8 |       <sl-spin sl-position="center" ng-hide="$ctrl.ready"></sl-spin>
 9 | 
10 |       <div class="row">
11 |         <div sl-input-container class="flex">
12 |           <label>显示名称</label>
13 |           <input type="text" name="label" placeholder="******" required ng-model="$ctrl.data.label">
14 |           <div class="input-message" ng-messages="form.label.$error">
15 |             <div ng-message-exp="['required']">名称不能为空</div>
16 |           </div>
17 |         </div>
18 |       </div>
19 |       <div class="row" layout-margin>
20 |         <div sl-input-container class="flex">
21 |           <label>保存历史记录，设置为'否'时，将删除之前的记录</label>
22 |           <sl-radio class="sl-radio">
23 |             <span>
24 |               <input ng-model="$ctrl.data.recordable" value="1" type="radio" name="recordable" />
25 |               <i>是</i>
26 |             </span>
27 |             <span>
28 |               <input ng-model="$ctrl.data.recordable" value="0" type="radio" name="recordable" />
29 |               <i>否</i>
30 |             </span>
31 |           </sl-radio>
32 |         </div>
33 |       </div>
34 | 
35 |       <div class="row" ng-if="$ctrl.data.recordable == 1">
36 |         <div sl-input-container class="flex">
37 |           <label>入库记录间隔，单位 S（每隔该时段保存一次监控记录）</label>
38 |           <input type="text" name="record_interval" placeholder="" required ng-model="$ctrl.data.record_interval">
39 |           <div class="input-message" ng-messages="form.record_interval.$error">
40 |             <div ng-message-exp="['required']">不能为空</div>
41 |           </div>
42 |         </div>
43 |       </div>
44 | 
45 |       <div class="row" ng-if="$ctrl.data.recordable == 1">
46 |         <div sl-input-container class="flex">
47 |           <label>入库记录上限（超出自动覆盖较早的记录）</label>
48 |           <input type="text" name="record_limit" placeholder="" required ng-model="$ctrl.data.record_limit">
49 |           <div class="input-message" ng-messages="form.record_limit.$error">
50 |             <div ng-message-exp="['required']">不能为空</div>
51 |           </div>
52 |         </div>
53 |         <p style="font-size:12px;">预计可保存记录时长：{{ ($ctrl.data.record_limit * $ctrl.data.record_interval) | time}}</p>
54 |       </div>
55 |     </div>
56 |     <div class="section-footer">
57 |       <button class="sl-btn sl-btn-primary" ng-disabled="form.$invalid" ng-click="$ctrl.save()">确定</button>
58 |     </div>
59 |     </form>
60 |   </div>
61 | </div>
62 | </div>
63 | </div>


--------------------------------------------------------------------------------
/src/components/Server/Edit/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import {message} from '../../../config/sl'
 3 | import { _ , http } from '../../../utils'
 4 | 
 5 | class ServerEdit {
 6 |   //依赖
 7 |   constructor($state , $stateParams) {
 8 | 
 9 |     this.$state = $state
10 |     this.query = {}
11 |     this.ready = false
12 |     this.id = $stateParams.id
13 | 
14 |     this.data = {
15 | 
16 |     }
17 | 
18 |   }
19 | 
20 |   $onInit(){
21 |     return http.get('/api/node/' + this.id +'/base' , this.data).then((resp)=> {
22 |       if(resp.status){
23 |         message.error(resp.message , ()=>{
24 |           this.$state.go('app.servers')
25 |         })
26 |       }else{
27 |         this.ready = true
28 |         this.data = resp.data
29 |         this.data.recordable = this.data.recordable ? '1' : '0'
30 |       }
31 |     })
32 |   }
33 | 
34 | 
35 |   save(){
36 |     this.ready = false
37 |     return http.post('/api/node/' + this.id , this.data).then((resp)=> {
38 |       this.ready = true
39 |       if(resp.status){
40 |         message.warn(resp.message)
41 |       }else{
42 |         message.success('修改成功')
43 |         
44 |       }
45 |     })
46 |   }
47 | }
48 | 
49 | ServerEdit.$inject = ['$state' , '$stateParams']
50 | 
51 | export default {
52 |   name:'serverEdit',
53 |   template: tpl,
54 |   controller: ServerEdit
55 | }


--------------------------------------------------------------------------------
/src/components/Server/List/index.html:
--------------------------------------------------------------------------------
 1 | <div class="page node">
 2 |   <div class="section">
 3 |     <div class="section-title">
 4 |       <div class="section-title-text">监控列表</div>
 5 |       <p>当前在线 {{$ctrl.page.online_count}} / {{$ctrl.data.length}} , 上行速度总计 {{$ctrl.page.tx_count | byte}}/S , 下行速度总计 {{$ctrl.page.rx_count | byte}}/S</p>
 6 |     </div>
 7 |     <div class="section-content">
 8 |       <sl-progress-linear ng-show="$ctrl.process"></sl-progress-linear>
 9 |       <div>
10 |         <div class="item" ng-repeat="row in $ctrl.data">
11 |           <a class="card" href="/server/{{row.id}}">
12 |             <div class="header">
13 |               <div class="base">
14 |                 <div class="line">
15 |                   <span class="label">{{row.label}}</span>
16 |                   <span class="state state-{{row.state}}"></span>
17 |                   <span class="span">{{row.snapshot.uptime | time}}</span>
18 |                   <span class="loc">{{row.location}} {{row.isp}}</span>
19 |                 </div>
20 |                 <div class="line" ng-if="row.installed">
21 |                   <span class="span" ng-bind="row.ip"></span>
22 |                   <span class="span">{{row.snapshot.net_total | byte}}/s ↑↓</span>
23 |                 </div>
24 |                 <div class="line" ng-if="!row.installed">
25 |                   <span>请安装监控脚本</span>
26 |                 </div>
27 |               </div>
28 |             </div>
29 |             <div class="detail">
30 |               <div>
31 |                 <span>负载</span>
32 |                 <chart-lite data="row.usage.load" color="['102,170,0','254,57,18','51,102,204']" fill="false"></chart-lite>
33 |               </div>
34 |               <div>
35 |                 <span>内存</span>
36 |                 <chart-lite data="row.usage.ram" color="['85,136,85']"></chart-lite>
37 |               </div>
38 |               <div>
39 |                 <span>CPU</span>
40 |                 <chart-lite data="row.usage.cpu" color="['187,68,204']"></chart-lite>
41 |               </div>
42 |               <div>
43 |                 <span>IO</span>
44 |                 <chart-lite data="row.usage.io" color="['214,99,0']"></chart-lite>
45 |               </div>
46 |             </div>
47 |           </a>
48 |         </div>
49 |       </div>
50 |     </div>
51 |   </div>
52 | </div>


--------------------------------------------------------------------------------
/src/components/Server/List/index.js:
--------------------------------------------------------------------------------
  1 | import tpl from './index.html'
  2 | import './style.less'
  3 | import { http, format } from '../../../utils'
  4 | import { message } from '../../../config/sl'
  5 | 
  6 | class ServerList {
  7 |   //依赖
  8 |   constructor($state, $timeout) {
  9 |     this.$state = $state
 10 |     this.$timeout = $timeout
 11 | 
 12 |     this.table = {
 13 |       columns: [{
 14 |           name: '主机',
 15 |           field: 'sort',
 16 |           html: '<i class="state state-{state}"></i><div><h5>{label}</h5><span class="span">{ip}</span></div>'
 17 |         },
 18 |         { name: '在线时间', field: 'uptime' },
 19 |         { name: '负载', field: 'load' },
 20 |         { name: '网络', field: 'network' },
 21 |         { name: '流量', field: 'bandwidth' }
 22 |       ],
 23 |       options: {
 24 |         limit: 10,
 25 |         limitOptions: [10, 20, 50],
 26 |         page: 1
 27 |       }
 28 |     }
 29 | 
 30 |     this.process = false
 31 | 
 32 |     this.data = []
 33 | 
 34 |     this.query = {}
 35 | 
 36 |     this.metaReady = false
 37 | 
 38 |     this.fetch()
 39 | 
 40 |     this.loading = false
 41 | 
 42 |     this.page = {
 43 |       online_count: 0
 44 |     }
 45 | 
 46 |     this._destroy = false
 47 | 
 48 |   }
 49 | 
 50 |   $onDestroy() {
 51 |     this._destroy = true
 52 |   }
 53 | 
 54 |   fetch() {
 55 | 
 56 |     return http.get('/api/nodes').then((resp) => {
 57 |       if (!this._destroy) {
 58 |         this.setData(resp.data)
 59 |         this.$timeout(() => {
 60 |           this.fetch()
 61 |         }, 1000)
 62 | 
 63 |         return { data: resp.data, count: resp.count }
 64 |       }
 65 | 
 66 |     })
 67 |   }
 68 | 
 69 |   pick(time, value, raw) {
 70 |     return { time, value, raw }
 71 |   }
 72 | 
 73 |   setData(data) {
 74 |     if (this.metaReady) {
 75 |       this.updateUsage(data)
 76 |       this.updateOnline(data)
 77 |     } else {
 78 |       this._nodes_hash = {}
 79 |       for (var i in data) {
 80 |         this._nodes_hash[data[i].id] = data[i]
 81 |       }
 82 |       this.data = data
 83 |       this.updateOnline(data)
 84 |       this.metaReady = true
 85 |     }
 86 |   }
 87 | 
 88 | 
 89 |   updateUsage(data) {
 90 |     for (var i in data) {
 91 |       if (!data[i].installed || !data[i].online) continue;
 92 | 
 93 |       var time = data[i].time_response
 94 |       var cpu_cores = 1 / parseInt(data[i].snapshot.cpu_cores)
 95 |       this._nodes_hash[data[i].id].usage = {
 96 |         ram: this.pick(time, [Math.round(100 * parseInt(data[i].snapshot.ram_usage) / parseInt(data[i].snapshot.ram_total)) / 100], format.byte(data[i].snapshot.ram_usage) + ' / ' + format.byte(data[i].snapshot.ram_total)),
 97 |         cpu: this.pick(time, [Math.round(100 * parseInt(data[i].snapshot.load_cpu)) / 10000], data[i].snapshot.load_cpu + ' %'),
 98 |         io: this.pick(time, [Math.round(100 * parseInt(data[i].snapshot.load_io)) / 10000], data[i].snapshot.load_io + ' %'),
 99 |         load: this.pick(time, data[i].snapshot.load.split(' ').map((i) => (parseFloat(i) * cpu_cores)), data[i].snapshot.load)
100 |       }
101 | 
102 |       this._nodes_hash[data[i].id].snapshot = data[i].snapshot;
103 | 
104 |       data[i].snapshot.net_total = parseInt(data[i].snapshot.tx_gap) + parseInt(data[i].snapshot.rx_gap)
105 |     }
106 |   }
107 | 
108 |   updateOnline(d) {
109 |     let c = 0,
110 |       rx = 0,
111 |       tx = 0
112 |     d.forEach((i) => {
113 |       i.state = 0
114 |       if (i.online) {
115 |         c++
116 |         rx += parseInt(i.snapshot.rx_gap)
117 |         tx += parseInt(i.snapshot.tx_gap)
118 |         i.uptime = format.time(i.uptime)
119 |         i.state = 1
120 |       }
121 |       if (!i.installed) {
122 |         i.state = -1
123 |       }
124 |     })
125 | 
126 | 
127 |     this.page.online_count = c
128 |     this.page.rx_count = rx
129 |     this.page.tx_count = tx
130 |   }
131 | 
132 |   formatLoad(d) {
133 |     return d.split(' ').map((i) => {
134 |       return parseFloat(i)
135 |     })
136 |   }
137 | 
138 |   view(d) {
139 |     if (d.installed) {
140 |       this.$state.go('app.server', { id: d.id })
141 |     }
142 |   }
143 | 
144 |   create() {
145 |     $ctrl.loading = true
146 | 
147 |     return http.post('/api/node/create', { label: this.page.label }).then((resp) => {
148 |       $ctrl.loading = false
149 |       if (resp.status) {
150 |         message.warn(resp.message)
151 |       } else {
152 |         console.log(resp)
153 |       }
154 |     })
155 |   }
156 | }
157 | 
158 | ServerList.$inject = ['$state', '$timeout']
159 | 
160 | export default {
161 |   name: 'serverList',
162 |   template: tpl,
163 |   controller: ServerList
164 | }


--------------------------------------------------------------------------------
/src/components/Server/List/style.less:
--------------------------------------------------------------------------------
  1 | .item{
  2 |   width:33.333333%;
  3 |   float:left;
  4 | 
  5 | }
  6 | .card{
  7 |   background: #fff;
  8 |   box-shadow: 0 1px 3px rgba(0,0,0,.15);
  9 |   padding:15px 18px 12px 18px;
 10 |   margin: 5px;
 11 |   display: block;
 12 |   .header{
 13 |     display: flex;
 14 |     -webkit-align-items: center; 
 15 |     align-items: center;
 16 |   }
 17 | 
 18 |   .loc{
 19 |     font-size: 12px;
 20 |     color:#999;
 21 |     float:right;
 22 |   }
 23 | 
 24 |   .base{
 25 |     width:100%;
 26 |   }
 27 |   .label{
 28 |     font-size: 18px;
 29 |     margin-bottom: 6px;
 30 |     color:#333;
 31 |   }
 32 |   .line{
 33 |     margin-bottom: 10px;
 34 |   }
 35 |   .span{
 36 |     color: rgba(17, 17, 17, .8);
 37 |     font-weight: normal;
 38 |     font-size:13px;
 39 |     padding-right:10px;
 40 |   }
 41 | 
 42 |   .state{
 43 |     margin: 0 15px 0 6px;
 44 |     width:12px;
 45 |     height:12px;
 46 |     border-radius: 12px;
 47 |     margin-right:12px;
 48 |     display: inline-block;
 49 |     &.state--1{
 50 |       background: #888888;
 51 |     }
 52 | 
 53 |     &.state-0{
 54 |       background: #ca3c3c;
 55 |     }
 56 | 
 57 |     &.state-1{
 58 |       background: #1cb841;
 59 |     }
 60 |   }
 61 | 
 62 |   .detail{
 63 |     div{
 64 |       margin-bottom:5px;
 65 |     }
 66 |     span:first-child{
 67 |       width:35px;
 68 |       display: inline-block;
 69 |     }
 70 |     div span{
 71 |       font-size:12px;
 72 |       color:rgba(17, 17, 17, 0.6);
 73 |     }
 74 |   }
 75 | 
 76 |   .chart{
 77 |     display: inline-block;
 78 |     canvas{
 79 |       border-bottom:1px solid rgba(80,80,80,.2);
 80 |     }
 81 |   }
 82 | }
 83 | 
 84 | .page.node .section-content{
 85 |   .head{
 86 |     color: #333;
 87 |     padding-bottom: 15px;
 88 |     h3{font-size: 20px;}
 89 |     p{
 90 |       font-size:13px;
 91 |       color: #999;
 92 |     }
 93 |   }
 94 | }
 95 | @media(max-width: 960px) {
 96 |   .item{
 97 |     width:50%;
 98 |   }
 99 | }
100 | 
101 | @media(max-width: 768px) {
102 |   .item{
103 |     width:100%;
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/src/components/Server/Remove/index.html:
--------------------------------------------------------------------------------
 1 | <div class="page">
 2 |   <div class="section" ng-if="$ctrl.data.installed">
 3 |     <div class="section-title">
 4 |       <div class="section-title-text">移除</div>
 5 |       <p>请执行以下脚本自动完成移除</p>
 6 |     </div>
 7 |     <div class="section-content col-2">
 8 |       <sl-spin sl-position="center" ng-hide="$ctrl.ready"></sl-spin>
 9 |       <div sl-input-container class="flex">
10 |         <textarea ng-bind="$ctrl.data.uninstall_script" rows="5"></textarea>
11 |       </div>
12 |     </div>
13 |     <div class="section-footer">
14 |       <p style="font-size:12px;color:#333;margin:5px 0 20px 0;">如果已经无法链接到主机，请点击【确定】直接删除数据</p>
15 |       <button class="sl-btn sl-btn-primary sl-btn-lg" ng-click="$ctrl.save()">确定</button>
16 |     </div>
17 |   </div>
18 |   <div class="section" ng-if="!$ctrl.data.installed">
19 |     <div class="section-title">
20 |       <div class="section-title-text">移除监控</div>
21 |       <p>确定移除监控吗？</p>
22 |     </div>
23 | 
24 |     <div class="section-footer">
25 |       <button class="sl-btn sl-btn-primary sl-btn-lg" ng-click="$ctrl.save()">确定</button>
26 |     </div>
27 |   </div>
28 | </div>
29 | </div>
30 | </div>


--------------------------------------------------------------------------------
/src/components/Server/Remove/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import {message} from '../../../config/sl'
 3 | import { _ , http } from '../../../utils'
 4 | 
 5 | class ServerRemove {
 6 | 
 7 |   constructor($state , $stateParams) {
 8 | 
 9 |     this.$state = $state
10 |     this.query = {}
11 |     this.ready = false
12 |     this.id = $stateParams.id
13 | 
14 |   }
15 | 
16 |   $onInit(){
17 |     return http.get('/api/node/'+this.id+'/base').then((resp)=> {
18 | 
19 |       if(resp.status){
20 |         message.error(resp.message , ()=>{
21 |           this.$state.go('app.servers')
22 |         })
23 |       }else{
24 |         this.ready = true
25 | 
26 |         this.data = resp.data
27 |         // this.$state.go('app.servers')
28 |       }
29 |     })
30 |   }
31 | 
32 |   save(){
33 |     this.ready = false
34 | 
35 |     return http.get('/api/node/'+this.data.id+'/remove').then((resp)=> {
36 |       this.ready = true
37 | 
38 |       if(resp.status){
39 |         message.warn(resp.message)
40 |       }else{
41 |         alert('移除成功')
42 |         this.$state.go('app.servers')
43 |       }
44 |     })
45 |   }
46 | }
47 | 
48 | ServerRemove.$inject = ['$state' , '$stateParams']
49 | 
50 | export default {
51 |   name:'serverRemove',
52 |   template: tpl,
53 |   controller: ServerRemove
54 | }


--------------------------------------------------------------------------------
/src/components/Server/View/index.html:
--------------------------------------------------------------------------------
  1 | <div class="page detail">
  2 |   <div class="section">
  3 |     <div class="section-title">
  4 |       <div class="section-title-text">{{$ctrl.data.label}}</div>
  5 |       <p ng-if="$ctrl.data.installed">
  6 |         <span ng-bind="$ctrl.data.ip"></span>
  7 |         <span ng-bind="$ctrl.data.location"></span>
  8 |         <span ng-bind="$ctrl.data.isp"></span>
  9 |       </p>
 10 |       <p ng-if="!$ctrl.data.installed">请先安装监控脚本</p>
 11 |       <div class="act">
 12 |         <a href="/server/{{$ctrl.data.id}}/edit"><i class="fas fa-edit"></i>编辑</a>
 13 |         <a href="/server/{{$ctrl.data.id}}/remove"><i class="fas fa-trash-alt"></i>移除</a>
 14 |       </div>
 15 |     </div>
 16 |     <div class="section-content" ng-if="$ctrl.data.installed">
 17 |       <sl-spin sl-position="center" ng-hide="$ctrl.ready"></sl-spin>
 18 |       <div>
 19 |         <h3>概况</h3>
 20 |         <ul class="info">
 21 |           <li>
 22 |             <span>系统运行</span>
 23 |             <span ng-bind="$ctrl.snapshot.uptime"></span>
 24 |           </li>
 25 |           <li>
 26 |             <span>操作系统</span>
 27 |             <span><span ng-bind="$ctrl.snapshot.os_name"></span> <span ng-bind="$ctrl.snapshot.os_arch"></span></span>
 28 |           </li>
 29 |           <li>
 30 |             <span>内核版本</span>
 31 |             <span ng-bind="$ctrl.snapshot.os_kernel"></span>
 32 |           </li>
 33 |           <li>
 34 |             <span>文件句柄</span>
 35 |             <span><span ng-bind="$ctrl.snapshot.file_handles"></span> / <span ng-bind="$ctrl.snapshot.file_handles_limit"></span></span>
 36 |           </li>
 37 |           <li>
 38 |             <span>进程数</span>
 39 |             <span ng-bind="$ctrl.snapshot.processes"></span>
 40 |           </li>
 41 |           <li>
 42 |             <span>会话数</span>
 43 |             <span ng-bind="$ctrl.snapshot.sessions">0</span>
 44 |           </li>
 45 |           <li>
 46 |             <span>CPU 型号</span>
 47 |             <span ng-bind="$ctrl.snapshot.cpu_name"></span>
 48 |           </li>
 49 |           <li>
 50 |             <span>CPU 主频</span>
 51 |             <span>{{$ctrl.snapshot.cpu_cores}} x {{$ctrl.snapshot.cpu_freq}} MHz</span>
 52 |           </li>
 53 |           <li>
 54 |             <span>网络 ↑↓</span>
 55 |             <span><span ng-bind="$ctrl.snapshot.net_current | byte"> / S</span></span>
 56 |           </li>
 57 |           <li>
 58 |             <span>出网总计 ↑</span>
 59 |             <span ng-bind="$ctrl.snapshot.tx | byte"></span>
 60 |           </li>
 61 |           <li>
 62 |             <span>入网总计 ↓</span>
 63 |             <span ng-bind="$ctrl.snapshot.rx | byte"></span>
 64 |           </li>
 65 |           <li>
 66 |             <span>连接数</span>
 67 |             <span ng-bind="$ctrl.snapshot.connections"></span>
 68 |           </li>
 69 |           <li>
 70 |             <span>磁盘</span>
 71 |             <span>{{ $ctrl.snapshot.disk_usage | byte}} / {{ $ctrl.snapshot.disk_total | byte}}</span>
 72 |           </li>
 73 |           <li>
 74 |             <span>RAM</span>
 75 |             <span>{{ $ctrl.snapshot.ram_usage | byte}} / {{ $ctrl.snapshot.ram_total | byte}}</span>
 76 |           </li>
 77 |           <li>
 78 |             <span>IPv4</span>
 79 |             <span>{{ $ctrl.snapshot.ipv4}}</span>
 80 |           </li>
 81 |           <li>
 82 |             <span>IPv6</span>
 83 |             <span>{{ $ctrl.snapshot.ipv6}}</span>
 84 |           </li>
 85 |         </ul>
 86 |       </div>
 87 |       <section>
 88 |         <h3>进程</h3>
 89 |         <table class="sl-table">
 90 |           <thead>
 91 |             <tr>
 92 |               <th>进程名</th>
 93 |               <th>CPU</th>
 94 |               <th>内存占用</th>
 95 |               <th>运行时间</th>
 96 |               <th>状态</th>
 97 |               <th>所有者</th>
 98 |             </tr>
 99 |           </thead>
100 |           <tbody>
101 |             <tr ng-repeat="item in $ctrl.snapshot.processes_array">
102 |               <td>{{item[5]}}</td>
103 |               <td>{{item[1]}}</td>
104 |               <td>{{item[2]}}</td>
105 |               <td>{{item[3]}}</td>
106 |               <td>{{item[4]}}</td>
107 |               <td>{{item[0]}}</td>
108 |             </tr>
109 |           </tbody>
110 |         </table>
111 |       </section>
112 |       <section>
113 |         <h3>内存</h3>
114 |         <chart update="$ctrl.snapshot.timestamp" config="$ctrl.chart.mem"></chart>   
115 |       </section>
116 |       <section>
117 |         <h3>CPU</h3>
118 |         <chart update="$ctrl.snapshot.timestamp" config="$ctrl.chart.cpu"></chart>
119 |       </section>
120 |       <section>
121 |         <h3>IO</h3>
122 |         <chart update="$ctrl.snapshot.timestamp" config="$ctrl.chart.io"></chart>
123 |       </section>
124 |       <section>
125 |         <h3>负载</h3>
126 |         <chart update="$ctrl.snapshot.timestamp" config="$ctrl.chart.load"></chart>
127 |       </section>
128 |       <section>
129 |         <h3>网络</h3>
130 |         <chart update="$ctrl.snapshot.timestamp" config="$ctrl.chart.nw"></chart>
131 |       </section>
132 |     </div>
133 |     <div ng-if="!$ctrl.data.installed">
134 |       <div class="row" layout-margin>
135 |         <div sl-input-container class="flex">
136 |           <label>脚本</label>
137 |           <textarea ng-bind="$ctrl.data.script" rows="5"></textarea>
138 |         </div>
139 |       </div>
140 |     </div>
141 |   </div>
142 | </div>
143 | </div>
144 | </div>


--------------------------------------------------------------------------------
/src/components/Server/View/style.less:
--------------------------------------------------------------------------------
 1 | .page.detail .section {
 2 |   // -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 1px 0 2px rgba(0, 0, 0, .05), 1px 0 0 rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05);
 3 |   // box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 1px 0 2px rgba(0, 0, 0, .05), 1px 0 0 rgba(0, 0, 0, .05), 0 1px 0 rgba(0, 0, 0, .05);
 4 |   // background: #fff;
 5 |   .tab a{
 6 |     display: inline-block;
 7 |     width:60px;
 8 |     padding: 12px;
 9 | 
10 |     &.select{
11 |       border-bottom: 2px solid #108ee9;
12 |     }
13 |   }
14 |   .info{
15 |     background: #fff;
16 |     box-shadow: 0 1px 3px rgba(0,0,0,.15);
17 |     font-size:12px;
18 |     padding:5px;
19 |     li{ padding:8px; width:50%; float:left;}
20 |     li>span:first-child{
21 |       width : 90px;
22 |       display: inline-block;
23 |       color:#777;
24 |     }
25 | 
26 |     &:after{
27 |       content:" "; 
28 |       display:block;
29 |       height:0;
30 |       visibility:hidden;
31 |       clear:both;
32 |     }
33 |   }
34 |   .section-title{
35 |     border-bottom:1px solid #EDF0F2;
36 |     padding-bottom:10px;
37 |     position: relative;
38 |     .act{
39 |       position: absolute;
40 |       right:0;
41 |       top:0;
42 |       font-size: 12px;
43 | 
44 |       a{
45 |         margin-right:6px;
46 |         color:#777;
47 |         
48 |         &:hover{
49 |           color:#108ee9;
50 |         }
51 |       }
52 |       i{
53 |         margin-right:5px;
54 |       }
55 |     }
56 |     span{
57 |       font-weight: 300;
58 |       font-size: 13px;
59 |       margin-right: 24px;
60 |       line-height: 26px;
61 |       color: #616366;
62 |     }
63 | 
64 | 
65 |   }
66 | 
67 |   section{
68 |     max-width: 800px;
69 |   }
70 | 
71 |   h3{
72 |     padding: 15px 0;
73 |   }
74 |   table{
75 |     td{
76 |       padding-top:8px;
77 |       padding-bottom:8px;
78 |     }
79 |   }
80 | 
81 |   table.info{
82 |     padding:12px;
83 |     width:50%;
84 |     float:left;
85 |   }
86 | }
87 | 
88 | @media(max-width: 768px) {
89 |   .page.detail .section .info{
90 |     li{ width:100%; }
91 |   }
92 | }


--------------------------------------------------------------------------------
/src/components/Server/index.js:
--------------------------------------------------------------------------------
1 | import ServerList from './List'
2 | import ServerDetail from './View'
3 | import ServerCreate from './Create'
4 | import ServerRemove from './Remove'
5 | import ServerEdit from './Edit'
6 | 
7 | export { ServerList , ServerDetail , ServerCreate , ServerRemove , ServerEdit}


--------------------------------------------------------------------------------
/src/components/Setting/index.html:
--------------------------------------------------------------------------------
 1 | <div class="page">
 2 |   <form name="form">
 3 |     <div class="section">
 4 |       <div class="section-title">
 5 |         <div class="section-title-text">设置</div>
 6 |       </div>
 7 |       <div class="section-content col-2">
 8 |         <div class="row">
 9 |           <div sl-input-container class="flex">
10 |             <label>用户名</label>
11 |             <input type="text" name="username" placeholder="" ng-model="$ctrl.data.username">
12 |           </div>
13 |         </div>
14 | 
15 |         <div class="row">
16 |           <div sl-input-container class="flex">
17 |             <label>密码</label>
18 |             <input type="password" name="password" placeholder="" ng-model="$ctrl.data.password">
19 |           </div>
20 |         </div>
21 | 
22 |         <div class="row">
23 |           <div sl-input-container class="flex">
24 |             <label>端口</label>
25 |             <input type="text" name="port" placeholder="" ng-model="$ctrl.data.port">
26 |           </div>
27 |         </div>
28 | 
29 |       </div>
30 |       <div class="section-footer">
31 |         <button ng-click="$ctrl.update()" class="sl-btn sl-btn-primary" ng-disabled="form.$invalid">确定</button>
32 |       </div>
33 |     </div>
34 |   </form>
35 | </div>


--------------------------------------------------------------------------------
/src/components/Setting/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import angular from 'angular'
 3 | import http from '../../utils/http'
 4 | import { message } from '../../config/sl'
 5 | 
 6 | class Setting {
 7 |   //依赖
 8 |   constructor(session , $state) {
 9 |     this.session = session
10 |     this.$state = $state
11 |     this.data = {
12 |       username : '',
13 |       password : '',
14 |       port : ''
15 |     }
16 |   }
17 | 
18 |   $onInit(){
19 |     http.get('/api/setting').then((resp) => {
20 |       if(!resp.status){
21 |         this.data = resp.data
22 |         this.origin_port = this.data.port
23 |       }else{
24 |         message.error(resp.message)
25 |       }
26 |     })
27 |   }
28 | 
29 |   update() {
30 |     http.post('/api/setting' ,this.data).then((resp) => {
31 |       if(!resp.status){
32 |         message.success('修改成功,请重新登录');
33 |         this.session.destory()
34 |         var link = location.protocol + '//' + location.hostname + ':' + resp.data.port + '/signin'
35 |         if(this.origin_port != resp.data.port){
36 |           location.href = link
37 |         }else{
38 |           this.$state.go('signin')
39 |         }
40 |       }else{
41 |         message.error(resp.message)
42 |       }
43 |     })
44 |   }
45 | }
46 | 
47 | Setting.$inject = ['Session' ,'$state']
48 | 
49 | export default {
50 |   name:'setting',
51 |   template: tpl,
52 |   controller: Setting
53 | }


--------------------------------------------------------------------------------
/src/components/Signin/index.html:
--------------------------------------------------------------------------------
 1 | <div class="page page-signin">
 2 |   <div class="signin-box">
 3 |     <header></header>
 4 | 
 5 |     <form name="form">
 6 |       <div class="signin-body">
 7 |         <h4>Server Watch</h4>
 8 |         <input type="hidden" name="source" value="form" />
 9 |         <div class="form-group">
10 |           <input type="text" name="username" placeholder="用户名" class="form-control" ng-model="$ctrl.data.username" />
11 |         </div>
12 |         <div class="form-group">
13 |           <input type="password" name="password" placeholder="密码" class="form-control" ng-model="$ctrl.data.password" />
14 |         </div>
15 |       </div>
16 |       <div class="signin-footer">
17 |         <button class="sl-btn sl-btn-primary sl-btn-lg sl-btn-block sl-margin" ng-click="$ctrl.signin()">登录</button>
18 |       </div>
19 |     </form>
20 |   </div>
21 | </div>


--------------------------------------------------------------------------------
/src/components/Signin/index.js:
--------------------------------------------------------------------------------
 1 | import tpl from './index.html'
 2 | import http from '../../utils/http'
 3 | 
 4 | class Signin {
 5 |   constructor(session, $state) {
 6 |     this.data = {
 7 |       username: '',
 8 |       password: ''
 9 |     }
10 | 
11 |     this.session = session
12 |     this.$state = $state
13 |   }
14 | 
15 |   signin() {
16 | 
17 |     http.post('/api/signin', this.data).then((resp) => {
18 |       if (resp.status) {
19 |         alert(resp.message)
20 |       } else {
21 |         this.session.create(this.data.account, resp.data.token)
22 |         http.setToken(resp.data.token)
23 |         this.$state.go('app.servers')
24 |       }
25 |     })
26 |   }
27 | 
28 | }
29 | 
30 | Signin.$inject = ['Session', '$state']
31 | 
32 | /*
33 | angular.module('layout', [])
34 |     .component('layout', {
35 |         template: tem,
36 |         controller: layoutCtrl,
37 |         controllerAs: 'layoutctrl'
38 |     })
39 |     .name;
40 | 
41 | */
42 | 
43 | 
44 | 
45 | export default {
46 |   name : 'signin',
47 |   template: tpl,
48 |   controller : Signin
49 | }


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
 1 | import angular from 'angular'
 2 | import layout from './Layout'
 3 | import signin from './Signin'
 4 | import setting from './Setting'
 5 | import server from './Server'
 6 | 
 7 | import table from './common/Table'
 8 | import select from './common/Select'
 9 | import spin from './common/Spin'
10 | import modal from './common/Modal'
11 | import notfound from './common/Notfound'
12 | //导出所有
13 | export default [
14 |   layout , signin ,table ,select,modal,notfound,setting,spin,
15 |   server
16 | ]
17 | 


--------------------------------------------------------------------------------
/src/config/depends.js:
--------------------------------------------------------------------------------
1 | import { default as ngUiRouter } from '@uirouter/angularjs'
2 | 
3 | // import 'angular-material-data-table/dist/md-data-table.css'
4 | import '../styles/main.less'
5 | // import './font'
6 | import slCommon from '../components/common'
7 | export default [ngUiRouter,slCommon]


--------------------------------------------------------------------------------
/src/config/sl.js:
--------------------------------------------------------------------------------
  1 | import angular from 'angular'
  2 | import _ from '../utils/_'
  3 | import {default as msg} from 'services/message'
  4 | 
  5 | class sl {
  6 |   constructor(appName , depends){
  7 |     this.appName = appName || 'myApp'
  8 |     this.app = angular.module(this.appName,depends)
  9 |   }
 10 | 
 11 |   mod(m){
 12 |     m.forEach( (i) => {
 13 |       if('service' in i){
 14 |         this.app.service(i.name , i.service)
 15 |       }
 16 |       else if('factory' in i){
 17 |         this.app.factory(i.name , i.factory)
 18 |       }
 19 |       else if('component' in i){
 20 |         this.app.component(i.name , i.component)
 21 |       }
 22 |       else if('run' in i){
 23 |         this.app.run(i.run)
 24 |       }
 25 |     })
 26 |   }
 27 | 
 28 | 
 29 |   router(m , parentName){
 30 | 
 31 |     if(parentName === undefined){
 32 |       parentName = ''
 33 |     }else{
 34 |       parentName += '.'
 35 |     }
 36 |     
 37 |     m.forEach((route)=>{
 38 |       let c = route.component
 39 |       let stateName = parentName + route.name
 40 |       let componentName = c.name
 41 | 
 42 |       if(c.controller){
 43 |         this.app.component(componentName, {
 44 |           controller : c.controller,
 45 |           template : c.template
 46 |         })
 47 |       }
 48 | 
 49 |       if(c.dep){
 50 |         this.mod(c.dep)
 51 |       }
 52 | 
 53 |       if(route.path){
 54 |         let opts = {
 55 |           name : stateName,
 56 |           url: route.path
 57 |         }
 58 | 
 59 |         if(!route.controllerAs){
 60 |           opts.controllerAs = '$ctrl'
 61 |         }
 62 | 
 63 |         //非组件模式运行
 64 |         if(route.origin){
 65 |           opts.controller = componentName
 66 |           opts.template = c.template
 67 |         }else{
 68 |           let sc = _.separator(componentName)
 69 |           opts.template = '<'+sc+'></'+sc+'>'
 70 |         }
 71 |        
 72 |         this.app.config(['$stateProvider','$urlRouterProvider', ($stateProvider,$urlRouterProvider) => {
 73 |           $stateProvider.state(opts)
 74 |         }])
 75 |       }
 76 | 
 77 |       if(route.children){
 78 |         this.router(route.children , stateName)
 79 |       }
 80 |     })
 81 | 
 82 |     this.app.config(['$locationProvider','$urlRouterProvider', ($locationProvider,$urlRouterProvider) => {
 83 |             
 84 |       // $urlRouterProvider.otherwise('/404')
 85 |       $urlRouterProvider.when('/', '/servers')
 86 |       $urlRouterProvider.otherwise('/404')
 87 |       $locationProvider
 88 |             .html5Mode(true)
 89 |             .hashPrefix('!')
 90 |     }])
 91 | 
 92 |     return this
 93 |   }
 94 | 
 95 |   start(node){
 96 |     angular.bootstrap(document, [this.appName])
 97 |     return this
 98 |   }
 99 | 
100 | }
101 | 
102 | 
103 | export default (...rest) => (new sl(...rest))
104 | 
105 | // export const message = message
106 | 
107 | export const message = msg


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Server Watch</title>
 6 |   <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |   <base href="/">
 8 |   <link href="styles.css" rel="stylesheet"></head>
 9 | </head>
10 | <body>
11 |   <noscript>
12 |     You need to enable JavaScript to run this app.
13 |   </noscript>
14 |   <div ui-view></div>
15 |   <script type="text/javascript" src="vendor.js"></script>
16 |   <script type="text/javascript" src="app.js"></script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ServerWatch",
 3 |   "version": "0.1.0",
 4 |   "main": "index.js",
 5 |   "author": "reruin",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "start": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
 9 |     "build": "npm run clean &&set NODE_ENV=production&& webpack --progress --verbose --colors --display-error-details --config webpack.config.prod.js",
10 |     "t": "set NODE_ENV=production&& node server.js",
11 |     "e": "node pkg.js",
12 |     "clean": "rd /s/q build && mkdir build"
13 |   },
14 |   "dependencies": {
15 |     "@uirouter/angularjs": "^1.0.12",
16 |     "angular": "1.x",
17 |     "angular-animate": "^1.6.6",
18 |     "angular-aria": "^1.6.6",
19 |     "angular-resource": "^1.6.6",
20 |     "axios": "^0.17.1",
21 |     "chart.js": "^2.7.1",
22 |     "font-awesome": "FortAwesome/Font-Awesome",
23 |     "font-awesome-sass": "^4.7.0",
24 |     "ionicons": "2.x",
25 |     "path-to-regexp": "^2.1.0"
26 |   },
27 |   "devDependencies": {
28 |     "autoprefixer": "^7.2.3",
29 |     "babel-core": "^6.26.0",
30 |     "babel-loader": "^7.1.2",
31 |     "babel-plugin-angularjs-annotate": "^0.8.2",
32 |     "babel-preset-es2015": "^6.24.1",
33 |     "babel-preset-latest": "^6.24.1",
34 |     "cross-env": "^5.1.1",
35 |     "css-loader": "^0.28.7",
36 |     "extract-text-webpack-plugin": "^3.0.2",
37 |     "file-loader": "^1.1.5",
38 |     "html-webpack-plugin": "^2.30.1",
39 |     "less": "^2.7.3",
40 |     "less-loader": "^4.0.5",
41 |     "postcss-loader": "^2.0.9",
42 |     "raw-loader": "^0.5.1",
43 |     "url-loader": "^0.6.2",
44 |     "webpack": "^3.10.0",
45 |     "webpack-dev-server": "^2.9.4"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Layout from './components/Layout'
 2 | import Signin from './components/Signin'
 3 | import Notfound from './components/Common/Notfound'
 4 | import { ServerList , ServerDetail , ServerCreate , ServerRemove , ServerEdit } from './components/Server'
 5 | import Setting from './components/Setting'
 6 | 
 7 | const routes = [
 8 |   {
 9 |     name:'app',
10 |     path: '/',
11 |     component: Layout,
12 |     children:[
13 |       
14 |       {
15 |         name: 'servers',
16 |         path: 'servers',
17 |         component: ServerList,
18 |       },
19 |       {
20 |         name: 'server_create',
21 |         path: 'server/create',
22 |         component: ServerCreate,
23 |       },
24 |       {
25 |         name: 'server',
26 |         path: 'server/:id',
27 |         component: ServerDetail,
28 |       },
29 |       {
30 |         name: 'server_remove',
31 |         path: 'server/:id/remove',
32 |         component: ServerRemove,
33 |       },
34 |       {
35 |         name: 'server_edit',
36 |         path: 'server/:id/edit',
37 |         component: ServerEdit,
38 |       },
39 |       
40 |       {
41 |         name:'setting',
42 |         path: 'setting',
43 |         component: Setting
44 |       }
45 |       
46 |     ]
47 |   },
48 |   {
49 |     name:'signin',
50 |     path: '/signin',
51 |     component: Signin,
52 |   },
53 |   {
54 |     name:'notfound',
55 |     path: '/404',
56 |     component: Notfound,
57 |   }
58 | ]
59 | 
60 | export default routes


--------------------------------------------------------------------------------
/src/services/index.js:
--------------------------------------------------------------------------------
1 | import session from './session'
2 | import run from './run'
3 | 
4 | export default [session , run]


--------------------------------------------------------------------------------
/src/services/message.js:
--------------------------------------------------------------------------------
 1 | import { element as $ } from 'angular'
 2 | 
 3 | class Message {
 4 |   constructor() {
 5 |     this.wrap = $('<div class="sl-message"></div>')
 6 |     document.body.appendChild(this.wrap[0])
 7 |   }
 8 | 
 9 |   create(type , ic , text, handler) {
10 |     var html = '<div class="sl-message-notice"><div class="sl-message-notice-content"><div class="sl-message-custom-content sl-message-'+type+'"><i class="slicon fas fa-'+ic+'"></i><span>'+text+'</span></div></div></div>'
11 | 
12 |     var el = $(html)
13 |     this.wrap.append(el)
14 | 
15 |     setTimeout(function() {
16 |       el.remove();
17 |       handler && handler()
18 |     }, 2000);
19 |   }
20 | 
21 |   destory() {
22 | 
23 |   }
24 | 
25 |   info(txt , handler) {
26 |     this.create('info','info-circle' , txt, handler)
27 |   }
28 | 
29 |   success(txt, handler) {
30 |     this.create('success','check-circle' , txt, handler)
31 |   }
32 | 
33 |   error(txt, handler) {
34 |     this.create('error','times-circle' , txt, handler)
35 |   }
36 | 
37 |   warn(txt, handler) {
38 |     this.create('warn','exclamation-circle' , txt, handler)
39 |   }
40 | 
41 | }
42 | 
43 | export default new Message()
44 | 


--------------------------------------------------------------------------------
/src/services/run.js:
--------------------------------------------------------------------------------
 1 | import http from '../utils/http'
 2 | 
 3 | const EVENTS = {
 4 |   unauthorized  : 'unauthorized '
 5 | }
 6 | 
 7 | const Run = (session , $rootScope , $state,$timeout) => {
 8 |   http.setInterceptor({
 9 |     response: function(resp) {
10 |       if (resp.data && resp.data.status == 401) {
11 |         $rootScope.$broadcast(EVENTS.unauthorized, resp)
12 |       }
13 |       //触发scope更新
14 |       $timeout()
15 |       return resp
16 |     }
17 |   })
18 | 
19 | 
20 |   $rootScope.$on(EVENTS.unauthorized , function() {
21 |     session.destory()
22 |     $state.go('signin')
23 |   });
24 | }
25 | 
26 | Run.$inject = ['Session','$rootScope','$state','$timeout']
27 | 
28 | export default {
29 |   run: Run
30 | }


--------------------------------------------------------------------------------
/src/services/session.js:
--------------------------------------------------------------------------------
 1 | class Session{
 2 |   constructor() {
 3 |     this.data = {
 4 |       account: null,
 5 |       id: null,
 6 |       role: '',
 7 |       permissions: [],
 8 |       token: ''
 9 |     }
10 | 
11 |     if (window.localStorage['session']) {
12 |       try {
13 |         var obj = JSON.parse(window.localStorage['session']);
14 |         this.create(obj.account, obj.token);
15 |       } catch (e) {
16 |         console.log(e)
17 |       }
18 |     }
19 | 
20 |     return this
21 |   }
22 | 
23 |   create(account, token) {
24 |     this.destory()
25 |     this.data.account = account
26 |     this.data.token = token
27 |     window.localStorage['session'] = JSON.stringify(this.data)
28 |     console.log('create session success!',this.data.token)
29 | 
30 |   }
31 | 
32 |   destory() {
33 |     this.data = {
34 |       account: null,
35 |       id: null,
36 |       role: '',
37 |       permissions: [],
38 |       token: ''
39 |     }
40 | 
41 |     window.localStorage.removeItem('session');
42 |   }
43 | 
44 |   getToken() {
45 |     return this.data.token;
46 |   }
47 | 
48 |   getAccount() {
49 |     return this.data.account;
50 |   }
51 | 
52 |   setPermissions(d) {
53 |     this.data.permissions = d;
54 |   }
55 | 
56 |   getPermissions() {
57 |     return this.data.permissions;
58 |   }
59 | }
60 | 
61 | Session.$inject = []
62 | 
63 | /*angular.module('session' , [])
64 |       .service('Session', Session)
65 |       .name*/
66 | export default {
67 |   name: 'Session',
68 |   service: Session
69 | }


--------------------------------------------------------------------------------
/src/styles/base/anim.less:
--------------------------------------------------------------------------------
 1 | @-webkit-keyframes slRotate {
 2 |   to {
 3 |     -webkit-transform: rotate(405deg);
 4 |             transform: rotate(405deg);
 5 |   }
 6 | }
 7 | @keyframes slRotate {
 8 |   to {
 9 |     -webkit-transform: rotate(405deg);
10 |             transform: rotate(405deg);
11 |   }
12 | }
13 | 
14 | @-webkit-keyframes slCircle {
15 |   from{
16 |     -webkit-transform: rotate(0deg);
17 |   }
18 |   to {
19 |     -webkit-transform: rotate(360deg);
20 |   }
21 | }
22 | @keyframes slCircle {
23 |   from{
24 |     transform: rotate(0deg);
25 |   }
26 |   to {
27 |     transform: rotate(360deg);
28 |   }
29 | }


--------------------------------------------------------------------------------
/src/styles/base/button.less:
--------------------------------------------------------------------------------
 1 | .sl-btn {
 2 |   display: inline-block;
 3 |   margin-bottom: 0;
 4 |   font-weight: 500;
 5 |   text-align: center;
 6 |   -ms-touch-action: manipulation;
 7 |   touch-action: manipulation;
 8 |   cursor: pointer;
 9 |   background-image: none;
10 |   border: 1px solid transparent;
11 |   white-space: nowrap;
12 |   padding: 8px 20px;
13 |   font-size: 14px;
14 |   border-radius: 4px;
15 |   -webkit-user-select: none;
16 |   -moz-user-select: none;
17 |   -ms-user-select: none;
18 |   user-select: none;
19 |   -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
20 |   transition: all .3s cubic-bezier(.645, .045, .355, 1);
21 |   position: relative;
22 |   color: rgba(0, 0, 0, .65);
23 |   background-color: #fff;
24 |   border-color: #d9d9d9;
25 | 
26 |   &[disabled] {
27 |     cursor: no-drop;
28 |     opacity: 0.6 !important;
29 |   }
30 | }
31 | 
32 | .sl-btn-lg {
33 |   padding: 0 18px;
34 |   font-size: 16px;
35 |   border-radius: 4px;
36 |   padding: 10px 30px;
37 | }
38 | 
39 | .sl-btn-primary {
40 |   color: #fff;
41 |   background-color: @sitenav-color;
42 |   border-color: @sitenav-color;
43 |   &:hover {
44 |     background-color: fade(@sitenav-color, 85%);
45 |     border-color: fade(@sitenav-color, 85%);
46 |   }
47 | }
48 | 
49 | .sl-btn-block {
50 |   display: block;
51 |   width: 100%;
52 | }
53 | 
54 | .sl-btn-danger {
55 |   color: #fff;
56 |   background-color: #ff4d4f;
57 |   border-color: #ff4d4f;
58 |   &:hover {
59 |     background-color: #cf1322;
60 |     border-color: #cf1322;
61 |     color: #fff;
62 |   }
63 | }
64 | 
65 | .sl-btn.sl-btn-loading {
66 |   padding-left: 36px;
67 |   pointer-events: none;
68 |   position: relative;
69 |   opacity: .7;
70 |   &:before {
71 |     display: inline-block;
72 |     content: " ";
73 |     width: 14px;
74 |     height: 14px;
75 |     border: 1px solid #fff;
76 |     border-top-color: transparent;
77 |     position: absolute;
78 |     border-radius: 14px;
79 |     left: 14px;
80 |     animation: slCircle 1s infinite linear;
81 |     transform-origin: 50% 50%;
82 |   }
83 | }


--------------------------------------------------------------------------------
/src/styles/base/dropdown.less:
--------------------------------------------------------------------------------
 1 | .sl-dropdown{
 2 |   position: relative;
 3 |   .sl-select-dropdown{
 4 |     position: absolute;
 5 |     display: none;
 6 |     background: #fff;
 7 |     box-shadow: 0 0 3px rgba(0,0,0,.1);
 8 |     li{
 9 |       padding:12px 20px;
10 |       font-size: 13px;
11 |       cursor: pointer;
12 |     }
13 |     // li:hover{
14 |     //   background:fade(@sitenav-color , 10%);
15 |     // }
16 |   }
17 |   &:hover{
18 |     .sl-select-dropdown{
19 |       display: block;
20 |     }
21 |   }
22 | }


--------------------------------------------------------------------------------
/src/styles/base/form.less:
--------------------------------------------------------------------------------
  1 | .sl-input-container {
  2 |   margin: 4px 8px;
  3 |   padding-bottom: 28px;
  4 | 
  5 |   label{
  6 |     overflow: hidden;
  7 |     text-overflow: ellipsis;
  8 |     white-space: nowrap;
  9 |     width: 100%;
 10 |     order: 1;
 11 |     pointer-events: none;
 12 |     -webkit-font-smoothing: antialiased;
 13 |     padding-left: 3px;
 14 |     padding-right: 0;
 15 |     color: rgba(0, 0, 0, 0.54);
 16 |     font-size: 12px;
 17 |     transform: scale(.875);
 18 |     transform-origin: left center;
 19 |     display: block;
 20 |   }
 21 | 
 22 |   input,
 23 |   textarea,
 24 |   .sl-select-title,
 25 |   .sl-radio,
 26 |   .sl-title
 27 |    {
 28 |     display: block;
 29 |     margin-top: 0;
 30 |     background: none;
 31 |     padding: 2px 2px 1px;
 32 |     border-width: 0 0 1px;
 33 |     line-height: 26px;
 34 |     height: 30px;
 35 |     -ms-flex-preferred-size: 26px;
 36 |     border-radius: 0;
 37 |     border-style: solid;
 38 |     width: 100%;
 39 |     box-sizing: border-box;
 40 |     color: rgba(0, 0, 0, 0.87);
 41 |     border-color: rgba(0, 0, 0, 0.12);
 42 |     margin: 2px 0;
 43 |   }
 44 | 
 45 |   textarea {
 46 |     min-height: 120px;
 47 |   }
 48 | 
 49 |   .input-message {
 50 |     position: relative;
 51 |     overflow: hidden;
 52 |     font-size: 12px;
 53 |     color: #f5222d;
 54 |     padding-top: 5px;
 55 |     transform: scale(.875);
 56 |     transform-origin: left center;
 57 |     opacity: 0;
 58 |     transition:all 0.3s;
 59 |     position: absolute;
 60 |   }
 61 | 
 62 |   .ng-dirty.ng-invalid{
 63 |     border-color: #f5222d;
 64 |   }
 65 |   .ng-dirty.ng-invalid ~ .input-message{
 66 |     opacity: 1;
 67 |   }
 68 | 
 69 |   &.focused {
 70 |     input,
 71 |     .sl-select-title,
 72 |     .sl-radio,
 73 |     textarea {
 74 |       border-bottom: 2px solid @sitenav-color;
 75 |       padding-bottom: 0;
 76 |     }
 77 | 
 78 |     label{
 79 |       color: @sitenav-color;
 80 |     }
 81 |   }
 82 | }
 83 | 
 84 | 
 85 | 
 86 | 
 87 | .sl-select {
 88 |   position: relative;
 89 |   .sl-select-menu {
 90 |     background: #fff;
 91 |     z-index:1;
 92 |     min-width: 136px;
 93 |     min-height: 48px;
 94 |     max-height: 256px;
 95 |     overflow-y: auto;
 96 |     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
 97 |     position: absolute;
 98 |     width: 100%;
 99 |     opacity: 0;
100 |     transform-origin: left top;
101 |     transform: scaleY(0);
102 |     transition: all .4s cubic-bezier(.25,.8,.25,1);
103 |     transition-duration: .15s;
104 | 
105 |     .sl-select-option {
106 |       padding: 0 16px;
107 |       height: 42px;
108 |       line-height: 42px;
109 |       font-size: 14px;
110 |       transition: background .15s linear;
111 |       color: rgba(33, 33, 33, 0.87);
112 |       cursor: pointer;
113 |       overflow: hidden;
114 |       text-overflow: ellipsis;
115 |       white-space: nowrap;
116 |       &:hover {
117 |         background: rgb(238, 238, 238);
118 |       }
119 | 
120 |       &.selected{
121 |         color:@sitenav-color;
122 |       }
123 |     }
124 |   }
125 | 
126 |   .sl-select-title{
127 |     cursor: pointer;
128 |   }
129 | 
130 |   .sl-select-mask{
131 |     opacity: 0;position: fixed;width:100%;height:100%;top:0;left:0;
132 |     display: none;
133 |   }
134 | 
135 |   &.open {
136 |     .sl-select-menu{
137 |       opacity: 1;
138 |       transform: scaleY(1);
139 |     }
140 |     .sl-select-mask{
141 |       display: block;
142 |     }
143 |   }
144 | }
145 | 
146 | .sl-input{
147 |   box-sizing: border-box;
148 |   margin: 0;
149 |   padding: 0;
150 |   list-style: none;
151 |   position: relative;
152 |   display: inline-block;
153 |   padding: 4px 11px;
154 |   width: 100%;
155 |   height: 32px;
156 |   font-size: 14px;
157 |   line-height: 1.5;
158 |   color: rgba(0, 0, 0, 0.65);
159 |   background-color: #fff;
160 |   background-image: none;
161 |   border: 1px solid #d9d9d9;
162 |   border-radius: 4px;
163 |   transition: all .3s;
164 | 
165 |   &:hover,&:focus{
166 |     border-color:@sitenav-color;
167 |   }
168 | }
169 | 
170 | .sl-radio{
171 |   &>span{
172 |     position: relative;
173 |     margin-right: 15px;
174 |     cursor: pointer;
175 |   }
176 |   input[type=radio]{
177 |     opacity: 0;
178 |     position: absolute;
179 |     top:0;left:0;width:100%;height:100%;
180 |   }
181 |   i{
182 |     font-style: normal;
183 |     pointer-events: none;
184 |   }
185 |   input[type=radio]+i {
186 |       position: relative;
187 |       display: inline-block;
188 |       height:20px;
189 |       line-height: 20px;
190 | /*      width: 14px;
191 |       height: 14px;
192 |       border:1px solid #ccc;
193 |       border-radius: 14px;
194 |       margin-left:3px;*/
195 |       padding-left:22px;
196 |       &:before{
197 |         content:' ';
198 |         position: absolute;
199 |         width: 16px;
200 |         height: 16px;
201 |         left: 2px;
202 |         top: 2px;
203 |        /* margin-left: -4px;
204 |         margin-top: -4px;*/
205 |         border: 1px solid #ccc;//@main-color;
206 |         border-radius: 16px;
207 |         box-sizing: border-box;
208 |         background: #f3f3f3;
209 |         transition:all 0.3s;
210 |       }
211 |       &:after{
212 |         content:' ';
213 |         position: absolute;
214 |         width: 8px;
215 |         height: 8px;
216 |         left: 6px;
217 |         top: 6px;
218 |         /*margin-left: -4px;
219 |         margin-top: -4px;*/
220 |         background: @sitenav-color;
221 |         border-radius: 10px;
222 |         transform:scale(0);
223 |         transition:transform 0.3s;
224 |       }
225 |   }
226 | 
227 |   input[type=radio]:checked+i{
228 |     &:before{
229 |       border-color:@sitenav-color;
230 |       background: #fff;
231 |     }
232 |     &:after{
233 |       transform:scale(1);
234 |     }
235 |   }
236 | }


--------------------------------------------------------------------------------
/src/styles/base/message.less:
--------------------------------------------------------------------------------
 1 | .sl-message{
 2 |   font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 3 |     font-size: 14px;
 4 |     line-height: 1.5;
 5 |     color: rgba(0, 0, 0, 0.65);
 6 |     -webkit-box-sizing: border-box;
 7 |     box-sizing: border-box;
 8 |     margin: 0;
 9 |     padding: 0;
10 |     list-style: none;
11 |     position: fixed;
12 |     z-index: 1010;
13 |     width: 100%;
14 |     top: 16px;
15 |     left: 0;
16 |     pointer-events: none;
17 | }
18 | 
19 | .sl-message-notice {
20 |   padding: 8px;
21 |   text-align: center;
22 | }
23 | .sl-message-notice:first-child {
24 |   margin-top: -8px;
25 | }
26 | .sl-message-notice-content {
27 |   padding: 10px 16px;
28 |   border-radius: 4px;
29 |   -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
30 |           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
31 |   background: #fff;
32 |   display: inline-block;
33 |   pointer-events: all;
34 | }
35 | .sl-message-success .slicon {
36 |   color: #52c41a;
37 | }
38 | .sl-message-error .slicon {
39 |   color: #f5222d;
40 | }
41 | .sl-message-warning .slicon {
42 |   color: #faad14;
43 | }
44 | .sl-message-info .slicon,
45 | .sl-message-loading .slicon {
46 |   color: #1890ff;
47 | }
48 | .sl-message .slicon {
49 |   margin-right: 8px;
50 |   font-size: 16px;
51 |   top: 1px;
52 |   position: relative;
53 | }
54 | .sl-message-notice.move-up-leave.move-up-leave-active {
55 |   -webkit-animation-name: MessageMoveOut;
56 |           animation-name: MessageMoveOut;
57 |   overflow: hidden;
58 |   -webkit-animation-duration: .3s;
59 |           animation-duration: .3s;
60 | }
61 | @-webkit-keyframes MessageMoveOut {
62 |   0% {
63 |     opacity: 1;
64 |     max-height: 150px;
65 |     padding: 8px;
66 |   }
67 |   100% {
68 |     opacity: 0;
69 |     max-height: 0;
70 |     padding: 0;
71 |   }
72 | }
73 | @keyframes MessageMoveOut {
74 |   0% {
75 |     opacity: 1;
76 |     max-height: 150px;
77 |     padding: 8px;
78 |   }
79 |   100% {
80 |     opacity: 0;
81 |     max-height: 0;
82 |     padding: 0;
83 |   }
84 | }


--------------------------------------------------------------------------------
/src/styles/base/modal.less:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/base/modal.less


--------------------------------------------------------------------------------
/src/styles/base/reset.less:
--------------------------------------------------------------------------------
  1 | html,body{
  2 |     color: rgba(0,0,0,0.87);
  3 |     background-color: rgb(250,250,250) ;
  4 | }
  5 | body {
  6 |     font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  7 |     color: @font-primary;
  8 |     font-size: 14px!important;
  9 |     line-height: 1.5!important;
 10 |     overflow-x: hidden;
 11 | }
 12 | 
 13 | article, aside, blockquote, body, button, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, section, td, textarea, th, ul {
 14 |     margin: 0;
 15 |     padding: 0;
 16 | }
 17 | *,*:before,*:after{
 18 |     box-sizing: border-box;
 19 |     -webkit-tap-highlight-color:transparent;
 20 | }
 21 | li{
 22 |     list-style: none;
 23 | }
 24 | 
 25 | 
 26 | *:focus {
 27 |     outline: none!important;
 28 | }
 29 | 
 30 | .ion:before, .ionicons:before {
 31 | }
 32 | a {
 33 |     text-decoration: none;
 34 | }
 35 | 
 36 | 
 37 | .sl-button sl-icon {
 38 |     color: @font-primary;
 39 | }
 40 | 
 41 | input:focus {
 42 |     outline: none;
 43 | }
 44 | 
 45 | // Typography
 46 | // ---------
 47 | h1, h2, h3, h4, h5, h6 {
 48 |     font-weight: 500;
 49 | }
 50 | h1, h2, h3 {
 51 |     margin-top: .8rem; margin-bottom: .8rem;
 52 | }
 53 | 
 54 | a{
 55 |     color:#404040;
 56 |     transition: all 0.3s;
 57 | }
 58 | a:hover{
 59 |     color:#108ee9;
 60 | }
 61 | 
 62 | .sl-display-4 { font-size: 64px; margin-top: 1rem; margin-bottom: 1rem;}
 63 | .sl-display-3 { font-size: 48px; margin-top: 1rem; margin-bottom: 1rem;}
 64 | .sl-display-2 { font-size: 36px; margin-top: 1rem; margin-bottom: 1rem;}
 65 | .sl-display-1 { font-size: 28px; margin-top: 1rem; margin-bottom: 1rem;}
 66 | 
 67 | .sl-title, .sl-lead {
 68 |     margin: 0!important; padding: 0!important;
 69 |     font-weight: 400;
 70 | }
 71 | .sl-lead {
 72 |     font-size: 20px;
 73 | }
 74 | .sl-subhead {
 75 |     padding: 0!important;
 76 | }
 77 | sl-divider {
 78 |     margin-top: .4rem;
 79 | }
 80 | 
 81 | 
 82 | .list-unstyled {
 83 |     list-style: none;
 84 | }
 85 | 
 86 | 
 87 | 
 88 | // additional type classes
 89 | .text-uppercase { text-transform: uppercase; }
 90 | .text-bold {font-weight: 500}
 91 | .text-bolder {font-weight: 700}
 92 | .text-lowercase {text-transform: lowercase}
 93 | .text-light {font-weight: 300}
 94 | .text-normal {font-weight: 400}
 95 | .text-center {text-align: center}
 96 | 
 97 | .filler {
 98 |     display: block;
 99 |     height: 7px;
100 |     background: #999;
101 | }
102 | .filler-sm {
103 |     height: 5px!important;
104 | }
105 | .filler-xs {
106 |     height: 2px!important;
107 | }
108 | 
109 | 
110 | // Buttons
111 | // --------
112 | .sl-button {
113 |     padding: 0rem .6rem;
114 |     
115 |     &.sl-small {
116 |         font-size: 12px;
117 |         min-height: 1.9rem;
118 |         min-width: 4rem;
119 |         padding: 0 .5rem;
120 |         line-height: 1.2;
121 |         [class^=ion] {
122 |             font-size: 1rem;
123 |             line-height: 1.55;
124 |         }
125 |     }
126 |     &.sl-large {
127 |         font-size: 1.2rem;
128 |         min-height: 2.8rem;
129 |         min-width: 5.5rem;
130 |         line-height: 1.4;
131 |     }
132 | }
133 | 
134 | .sl-button {
135 |     margin: 0 6px;
136 |     height: 40px;
137 |     min-width: 0;
138 |     line-height: 24px;
139 |     padding: 8px;
140 |     width: 40px;
141 |     border-radius: 50%;
142 |     user-select: none;
143 |     background: transparent;
144 |     border:none;
145 |     position: relative;
146 |     cursor: pointer;
147 | }
148 | 
149 | .sl-button.sl-fab {
150 |     [class^=ion] {
151 |         font-size: 32px;
152 |         position: relative;
153 |         top: -5px;
154 |     }
155 |     &.sl-mini {
156 |         [class^=ion] {
157 |             font-size: 20px;
158 |             top: 2px;
159 |             left: -1px;
160 |         }
161 |     }
162 |     &.sl-xs {
163 |         min-height: 1rem;
164 |         height: 1.8rem; width: 1.8rem;
165 |         min-width: 1rem;
166 |         line-height: 1.8rem;
167 |         [class^=ion] {
168 |             font-size: 14px;
169 |             left:-7.5px;
170 |             top:4.5px;
171 | 
172 |         }
173 |     }
174 | }
175 | .sl-button-group {
176 |     margin-left: 5px; margin-right: 5px;
177 |     .sl-button {
178 |         margin-left: 0; margin-right: 0;
179 | 
180 |     }
181 | }
182 | 
183 | 
184 | // Inputs
185 | // ------
186 | sl-input-container {
187 |     > sl-icon {
188 |         font-size: 25px;
189 |         margin-top: -6px;
190 |     }
191 | }
192 | 
193 | sl-card-content{
194 |     padding-top:12px !important;
195 | }
196 | 
197 | 
198 | ::-webkit-scrollbar {
199 |   width: 6px;
200 |   height: 6px;
201 | }
202 | 
203 | ::-webkit-scrollbar-thumb {
204 |     background-color: rgba(0,0,0,.15);
205 | }
206 | 
207 | ::selection {
208 |     background: #404040;
209 |     color: #fff;
210 | }
211 | 
212 | .icon{
213 |     display: inline-block;
214 |     margin: auto;
215 |     background-repeat: no-repeat;
216 |     display: inline-block;
217 |     vertical-align: middle;
218 |     fill: currentColor;
219 |     height: 24px;
220 |     width: 24px;
221 |     min-height: 24px;
222 |     min-width: 24px;
223 | }
224 | .ivu-dropdown{
225 |     .ivu-select-dropdown{
226 |         transform-origin: center top;
227 |         display: none;
228 |     }
229 |     &:hover .ivu-select-dropdown{
230 |         display: block;
231 |         position: absolute;
232 |         left: -1px;top: 44px;
233 |         margin:0;
234 |     }
235 | }
236 | 
237 | 
238 | .row{
239 |     box-sizing: border-box;
240 |     display: flex;
241 | }
242 | 
243 | .sl-margin{
244 |     margin:10px 0;
245 | }
246 | 
247 | 


--------------------------------------------------------------------------------
/src/styles/base/section.less:
--------------------------------------------------------------------------------
 1 | .section{
 2 |   box-shadow: 0 1px 2px rgba(0,0,0,.15), 1px 0 2px rgba(0,0,0,.05), 1px 0 0 rgba(0,0,0,.05), 0 1px 0 rgba(0,0,0,.05);
 3 |   margin: 8px;
 4 |   background: #fff;
 5 |   .section-title{
 6 |     padding: 0 24px!important;
 7 |     border-bottom: 1px solid #e9e9e9;
 8 |     color:rgba(0,0,0,.8);
 9 |     .section-title-text{
10 |       margin-bottom:10px;
11 |     }
12 |     p{
13 |       font-size:13px;
14 |       color: #999;
15 |       margin:9px 0;
16 |     }
17 |     margin-bottom:15px;
18 |   }
19 | 
20 |   .section-content{
21 |     display: block;
22 |     padding: 16px;
23 |     padding-top: 12px;
24 |     position: relative;
25 |   }
26 |   .section-footer{
27 |     padding:15px 24px 25px 24px;
28 |   }
29 | 
30 |   .sl-spin{
31 |     
32 |   }
33 | }


--------------------------------------------------------------------------------
/src/styles/base/table.less:
--------------------------------------------------------------------------------
  1 | .sl-table-container {
  2 |   display: block;
  3 |   max-width: 100%;
  4 |   overflow-x: auto;
  5 |   .filter-button{
  6 |     display: block;
  7 |     opacity: 0;
  8 |     pointer-events: none;
  9 |     transition:opacity 0.3s;
 10 |     position: absolute;
 11 |     right: 0;
 12 |     padding:10px;
 13 |     z-index:1;
 14 |   }
 15 | }
 16 | 
 17 | table.sl-table {
 18 |   width: 100%;
 19 |   border-spacing: 0;
 20 |   overflow: hidden;
 21 |   tr {
 22 |     // height: 56px;
 23 |     transition: background-color .2s;
 24 |   }
 25 |   th:first-child,
 26 |   td:first-child {
 27 |     padding-left: 24px;
 28 |     padding-right: 24px;
 29 |   }
 30 |   th {
 31 |     position: relative;
 32 |   }
 33 |   th.active {
 34 |     // z-index: 999;
 35 |   }
 36 | 
 37 | 
 38 |   th i {
 39 |     position: absolute;
 40 |     right: 0;
 41 |     font-size: 12px;
 42 |     position: relative;
 43 |     padding: 5px 7px;
 44 | 
 45 |     &.select {
 46 |       color: @sitenav-color
 47 |     }
 48 |   }
 49 |   thead tr {
 50 |     color: rgba(0, 0, 0, .54);
 51 |     font-size: 12px;
 52 |     font-weight: 700;
 53 |     white-space: nowrap;
 54 |   }
 55 |   tbody tr {
 56 |     td {
 57 |       border-top: 1px solid rgba(0, 0, 0, .12);
 58 |       padding-top: 15px;
 59 |       padding-bottom: 15px;
 60 |     }
 61 |   }
 62 |   td {
 63 |     color: rgba(0, 0, 0, .87);
 64 |   }
 65 |   td,
 66 |   th {
 67 |     vertical-align: middle;
 68 |     text-align: left;
 69 |     padding:12px;
 70 |     // word-break: break-all;
 71 |   }
 72 |   
 73 |   td.center{
 74 |     text-align: center;
 75 |   }
 76 |   tr.nodata td{
 77 |     font-size:12px;color:#999;text-align: center;
 78 |   }
 79 |   // td:nth-child(n+2):nth-last-child(n+2),
 80 |   // th:nth-child(n+2):nth-last-child(n+2) {
 81 |   //   padding: 0 56px 0 0;
 82 |   // }
 83 | }
 84 | 
 85 | table.sl-table.row-select {
 86 |   tbody tr:hover {
 87 |     background-color: fade(@sitenav-color , 8%)!important;
 88 |   }
 89 | }
 90 | 
 91 | sl-table {
 92 |   .sl-table-filter {
 93 |     position: fixed;
 94 |     top: 0;
 95 |     right: 0;
 96 |     width: 250px;
 97 |     height: 100%;
 98 |     background: rgba(0, 0, 0, .3);
 99 |     opacity: 0;
100 |     pointer-events: none;
101 |     z-index: 1001;
102 |     background: #fff;
103 |     box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
104 |     transform: translateX(70%);
105 |     transition: all .3s ease-out;
106 | 
107 |     &.active {
108 |       opacity: 1;
109 |       pointer-events: auto;
110 |       transform: translateX(0%);
111 |     }
112 |     .header {
113 |       padding: 15px;
114 |       border-bottom: 1px solid #ccc;
115 |       i {
116 |         color: #666;
117 |         font-size: 12px;
118 |         margin-right: 5px;
119 |       }
120 |       a.close {
121 |         float: right;
122 |         color: #999;
123 |         display: inline-block;
124 |         cursor: pointer;
125 |       }
126 |       a:hover {
127 |         i {
128 |           color: @sitenav-color;
129 |         }
130 |       }
131 |     }
132 | 
133 |     .footer {
134 |       margin-top: 12px;
135 |       text-align: center;
136 |     }
137 |   }
138 | 
139 |   .filter-dropdown {
140 |     padding: 8px; //
141 |     input {
142 |       width: 100%;
143 |       margin-right: 8px;
144 |     }
145 | 
146 |     label {
147 |       display: block;
148 |       font-size: 12px;
149 |       color: #666;
150 |       padding: 8px 0;
151 |     }
152 |   }
153 | }
154 | 
155 | .responsive() {
156 |   table,
157 |   thead,
158 |   tbody,
159 |   th,
160 |   td,
161 |   tr {
162 |     display: block;
163 |   }
164 |   thead  {
165 |     display: none;
166 |   }
167 | 
168 |   tr {
169 |     border-bottom: 1px solid #ccc;
170 |     height:auto !important;
171 |     padding-top: 5px;
172 |     padding-bottom:10px;
173 |     position: relative;
174 |   }
175 | 
176 |   td {
177 |     border: none !important;
178 |     position: relative;
179 |     white-space: normal;
180 |     text-align: left;
181 |     padding:2px !important;
182 |     font-size: 12px !important;
183 |   }
184 | 
185 |   td:before {
186 |     /* Now like a table header */
187 |    
188 |     width: 100px;
189 |     padding-right: 10px;
190 |     white-space: nowrap;
191 |     text-align: right;
192 |     display: inline-block;
193 |     content: attr(data-title);
194 |     color:#999;
195 |     text-transform:uppercase;
196 |   }
197 |   tr:not(.nodata) td:last-child{
198 |     position: absolute;
199 |     right: 0;
200 |     top: 50%;
201 |     transform:translateY(-50%);
202 |   }
203 |   tr.nodata{
204 |     td{
205 |       height:64px;
206 |       line-height: 64px;
207 |     }
208 |     td:before{
209 |       content:'';width:0;
210 |     }
211 |   }
212 | 
213 |   a{
214 |     padding:5px 0;
215 |     border-bottom:1px solid @sitenav-color;
216 |     color:@sitenav-color;
217 |     display: inline-block;
218 |     border-radius: 3px;
219 |   }
220 | 
221 |   td:last-child{
222 |     padding-right:10px;
223 |     a{
224 |       padding:5px 10px;
225 |       border:1px solid @sitenav-color;
226 |     }
227 |   }
228 | 
229 |   .filter-button{
230 |     opacity: 1;
231 |     pointer-events: auto;
232 |   }
233 | }
234 | 
235 | @media(max-width: 768px) {
236 |   .sl-table-container {
237 |     .responsive()
238 |   }
239 | }


--------------------------------------------------------------------------------
/src/styles/base/vars.less:
--------------------------------------------------------------------------------
1 | 
2 | // Components Variables
3 | //
4 | @site-toolbar-height:   56px;
5 | @sitenav-width:         200px;
6 | @sitenav-color:         #108ee9;
7 | 
8 | @font-primary: #333;


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/css/fa-brands.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @font-face {
 6 |   font-family: 'Font Awesome 5 Brands';
 7 |   font-style: normal;
 8 |   font-weight: normal;
 9 |   src: url("../webfonts/fa-brands-400.eot");
10 |   src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
11 | 
12 | .fab {
13 |   font-family: 'Font Awesome 5 Brands'; }
14 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/css/fa-brands.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 |  */
5 | @font-face{font-family:Font Awesome\ 5 Brands;font-style:normal;font-weight:400;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:Font Awesome\ 5 Brands}


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/css/fa-regular.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @font-face {
 6 |   font-family: 'Font Awesome 5 Free';
 7 |   font-style: normal;
 8 |   font-weight: 400;
 9 |   src: url("../webfonts/fa-regular-400.eot");
10 |   src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
11 | 
12 | .far {
13 |   font-family: 'Font Awesome 5 Free';
14 |   font-weight: 400; }
15 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/css/fa-regular.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 |  */
5 | @font-face{font-family:Font Awesome\ 5 Free;font-style:normal;font-weight:400;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:Font Awesome\ 5 Free;font-weight:400}


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/css/fa-solid.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @font-face {
 6 |   font-family: 'Font Awesome 5 Free';
 7 |   font-style: normal;
 8 |   font-weight: 900;
 9 |   src: url("../webfonts/fa-solid-900.eot");
10 |   src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
11 | 
12 | .fa,
13 | .fas {
14 |   font-family: 'Font Awesome 5 Free';
15 |   font-weight: 900; }
16 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/css/fa-solid.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4 |  */
5 | @font-face{font-family:Font Awesome\ 5 Free;font-style:normal;font-weight:900;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:Font Awesome\ 5 Free;font-weight:900}


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_animated.less:
--------------------------------------------------------------------------------
 1 | // Animated Icons
 2 | // --------------------------
 3 | 
 4 | .@{fa-css-prefix}-spin {
 5 |   animation: fa-spin 2s infinite linear;
 6 | }
 7 | 
 8 | .@{fa-css-prefix}-pulse {
 9 |   animation: fa-spin 1s infinite steps(8);
10 | }
11 | 
12 | @keyframes fa-spin {
13 |   0% {
14 |     transform: rotate(0deg);
15 |   }
16 |   100% {
17 |     transform: rotate(360deg);
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_bordered-pulled.less:
--------------------------------------------------------------------------------
 1 | // Bordered & Pulled
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-border {
 5 |   border-radius: .1em;
 6 |   border: solid .08em @fa-border-color;
 7 |   padding: .2em .25em .15em;
 8 | }
 9 | 
10 | .@{fa-css-prefix}-pull-left { float: left; }
11 | .@{fa-css-prefix}-pull-right { float: right; }
12 | 
13 | .@{fa-css-prefix}, .fas, .far, .fal, .fab {
14 |   &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
15 |   &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_core.less:
--------------------------------------------------------------------------------
 1 | // Base Class Definition
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}, .fas, .far, .fal, .fab {
 5 |   -moz-osx-font-smoothing: grayscale;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   display: inline-block;
 8 |   font-style: normal;
 9 |   font-variant: normal;
10 |   text-rendering: auto;
11 |   line-height: 1;
12 | }
13 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_fixed-width.less:
--------------------------------------------------------------------------------
1 | // Fixed Width Icons
2 | // -------------------------
3 | .@{fa-css-prefix}-fw {
4 |   text-align: center;
5 |   width: (20em / 16);
6 | }
7 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_larger.less:
--------------------------------------------------------------------------------
 1 | // Icon Sizes
 2 | // -------------------------
 3 | 
 4 | .larger(@factor) when (@factor > 0) {
 5 |   .larger((@factor - 1));
 6 | 
 7 |   .@{fa-css-prefix}-@{factor}x {
 8 |     font-size: (@factor * 1em);
 9 |   }
10 | }
11 | 
12 | /* makes the font 33% larger relative to the icon container */
13 | .@{fa-css-prefix}-lg {
14 |   font-size: (4em / 3);
15 |   line-height: (3em / 4);
16 |   vertical-align: -.0667em;
17 | }
18 | 
19 | .@{fa-css-prefix}-xs {
20 |   font-size: .75em;
21 | }
22 | 
23 | .@{fa-css-prefix}-sm {
24 |   font-size: .875em;
25 | }
26 | 
27 | .larger(10);
28 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_list.less:
--------------------------------------------------------------------------------
 1 | // List Icons
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-ul {
 5 |   list-style-type: none;
 6 |   margin-left: @fa-li-width * 5/4;
 7 |   padding-left: 0;
 8 | 
 9 |   > li { position: relative; }
10 | }
11 | 
12 | .@{fa-css-prefix}-li {
13 |   left: -@fa-li-width;
14 |   position: absolute;
15 |   text-align: center;
16 |   width: @fa-li-width;
17 |   line-height: inherit;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_mixins.less:
--------------------------------------------------------------------------------
 1 | // Mixins
 2 | // --------------------------
 3 | 
 4 | .fa-icon() {
 5 |   -moz-osx-font-smoothing: grayscale;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   display: inline-block;
 8 |   font-style: normal;
 9 |   font-variant: normal;
10 |   font-weight: normal;
11 |   line-height: 1;
12 |   vertical-align: -15%;
13 | }
14 | 
15 | .fa-icon-rotate(@degrees, @rotation) {
16 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
17 |   transform: rotate(@degrees);
18 | }
19 | 
20 | .fa-icon-flip(@horiz, @vert, @rotation) {
21 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
22 |   transform: scale(@horiz, @vert);
23 | }
24 | 
25 | 
26 | // Only display content to screen readers. A la Bootstrap 4.
27 | //
28 | // See: http://a11yproject.com/posts/how-to-hide-content/
29 | 
30 | .sr-only() {
31 |   border: 0;
32 |   clip: rect(0,0,0,0);
33 |   height: 1px;
34 |   margin: -1px;
35 |   overflow: hidden;
36 |   padding: 0;
37 |   position: absolute;
38 |   width: 1px;
39 | }
40 | 
41 | // Use in conjunction with .sr-only to only display content when it's focused.
42 | //
43 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
44 | //
45 | // Credit: HTML5 Boilerplate
46 | 
47 | .sr-only-focusable() {
48 |   &:active,
49 |   &:focus {
50 |     clip: auto;
51 |     height: auto;
52 |     margin: 0;
53 |     overflow: visible;
54 |     position: static;
55 |     width: auto;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_rotated-flipped.less:
--------------------------------------------------------------------------------
 1 | // Rotated & Flipped Icons
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
 7 | 
 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
 9 | .@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }
10 | .@{fa-css-prefix}-flip-horizontal.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(-1, -1, 2); }
11 | 
12 | // Hook for IE8-9
13 | // -------------------------
14 | 
15 | :root {
16 |   .@{fa-css-prefix}-rotate-90,
17 |   .@{fa-css-prefix}-rotate-180,
18 |   .@{fa-css-prefix}-rotate-270,
19 |   .@{fa-css-prefix}-flip-horizontal,
20 |   .@{fa-css-prefix}-flip-vertical {
21 |     filter: none;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_screen-reader.less:
--------------------------------------------------------------------------------
1 | // Screen Readers
2 | // -------------------------
3 | 
4 | .sr-only { .sr-only(); }
5 | .sr-only-focusable { .sr-only-focusable(); }
6 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/_stacked.less:
--------------------------------------------------------------------------------
 1 | // Stacked Icons
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-stack {
 5 |   display: inline-block;
 6 |   height: 2em;
 7 |   line-height: 2em;
 8 |   position: relative;
 9 |   vertical-align: middle;
10 |   width: 2em;
11 | }
12 | 
13 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
14 |   left: 0;
15 |   position: absolute;
16 |   text-align: center;
17 |   width: 100%;
18 | }
19 | 
20 | .@{fa-css-prefix}-stack-1x { line-height: inherit; }
21 | .@{fa-css-prefix}-stack-2x { font-size: 2em; }
22 | .@{fa-css-prefix}-inverse { color: @fa-inverse; }
23 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/fa-brands.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import "_variables.less";
 6 | 
 7 | @font-face {
 8 |   font-family: 'Font Awesome 5 Brands';
 9 |   font-style: normal;
10 |   font-weight: normal;
11 |   src: url('@{fa-font-path}/fa-brands-400.eot');
12 |   src: url('@{fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
13 |     url('@{fa-font-path}/fa-brands-400.woff2') format('woff2'),
14 |     url('@{fa-font-path}/fa-brands-400.woff') format('woff'),
15 |     url('@{fa-font-path}/fa-brands-400.ttf') format('truetype'),
16 |     url('@{fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
17 | }
18 | 
19 | .fab {
20 |   font-family: 'Font Awesome 5 Brands';
21 | }
22 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/fa-regular.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import "_variables.less";
 6 | 
 7 | @font-face {
 8 |   font-family: 'Font Awesome 5 Free';
 9 |   font-style: normal;
10 |   font-weight: 400;
11 |   src: url('@{fa-font-path}/fa-regular-400.eot');
12 |   src: url('@{fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
13 |     url('@{fa-font-path}/fa-regular-400.woff2') format('woff2'),
14 |     url('@{fa-font-path}/fa-regular-400.woff') format('woff'),
15 |     url('@{fa-font-path}/fa-regular-400.ttf') format('truetype'),
16 |     url('@{fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
17 | }
18 | 
19 | .far {
20 |   font-family: 'Font Awesome 5 Free';
21 |   font-weight: 400;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/fa-solid.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import "_variables.less";
 6 | 
 7 | @font-face {
 8 |   font-family: 'Font Awesome 5 Free';
 9 |   font-style: normal;
10 |   font-weight: 900;
11 |   src: url('@{fa-font-path}/fa-solid-900.eot');
12 |   src: url('@{fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
13 |     url('@{fa-font-path}/fa-solid-900.woff2') format('woff2'),
14 |     url('@{fa-font-path}/fa-solid-900.woff') format('woff'),
15 |     url('@{fa-font-path}/fa-solid-900.ttf') format('truetype'),
16 |     url('@{fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
17 | }
18 | 
19 | .fa,
20 | .fas {
21 |   font-family: 'Font Awesome 5 Free';
22 |   font-weight: 900;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/less/fontawesome.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import "_variables.less";
 6 | @import "_mixins.less";
 7 | @import "_core.less";
 8 | @import "_larger.less";
 9 | @import "_fixed-width.less";
10 | @import "_list.less";
11 | @import "_bordered-pulled.less";
12 | @import "_animated.less";
13 | @import "_rotated-flipped.less";
14 | @import "_stacked.less";
15 | @import "_icons.less";
16 | @import "_screen-reader.less";
17 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_animated.scss:
--------------------------------------------------------------------------------
 1 | // Animated Icons
 2 | // --------------------------
 3 | 
 4 | .#{$fa-css-prefix}-spin {
 5 |   animation: fa-spin 2s infinite linear;
 6 | }
 7 | 
 8 | .#{$fa-css-prefix}-pulse {
 9 |   animation: fa-spin 1s infinite steps(8);
10 | }
11 | 
12 | @keyframes fa-spin {
13 |   0% {
14 |     transform: rotate(0deg);
15 |   }
16 | 
17 |   100% {
18 |     transform: rotate(360deg);
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_bordered-pulled.scss:
--------------------------------------------------------------------------------
 1 | // Bordered & Pulled
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-border {
 5 |   border: solid .08em $fa-border-color;
 6 |   border-radius: .1em;
 7 |   padding: .2em .25em .15em;
 8 | }
 9 | 
10 | .#{$fa-css-prefix}-pull-left { float: left; }
11 | .#{$fa-css-prefix}-pull-right { float: right; }
12 | 
13 | .#{$fa-css-prefix},
14 | .fas,
15 | .far,
16 | .fal,
17 | .fab {
18 |   &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
19 |   &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_core.scss:
--------------------------------------------------------------------------------
 1 | // Base Class Definition
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix},
 5 | .fas,
 6 | .far,
 7 | .fal,
 8 | .fab {
 9 |   -moz-osx-font-smoothing: grayscale;
10 |   -webkit-font-smoothing: antialiased;
11 |   display: inline-block;
12 |   font-style: normal;
13 |   font-variant: normal;
14 |   text-rendering: auto;
15 |   line-height: 1;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_fixed-width.scss:
--------------------------------------------------------------------------------
1 | // Fixed Width Icons
2 | // -------------------------
3 | .#{$fa-css-prefix}-fw {
4 |   text-align: center;
5 |   width: (20em / 16);
6 | }
7 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_larger.scss:
--------------------------------------------------------------------------------
 1 | // Icon Sizes
 2 | // -------------------------
 3 | 
 4 | // makes the font 33% larger relative to the icon container
 5 | .#{$fa-css-prefix}-lg {
 6 |   font-size: (4em / 3);
 7 |   line-height: (3em / 4);
 8 |   vertical-align: -.0667em;
 9 | }
10 | 
11 | .#{$fa-css-prefix}-xs {
12 |   font-size: .75em;
13 | }
14 | 
15 | .#{$fa-css-prefix}-sm {
16 |   font-size: .875em;
17 | }
18 | 
19 | @for $i from 1 through 10 {
20 |   .#{$fa-css-prefix}-#{$i}x {
21 |     font-size: $i * 1em;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_list.scss:
--------------------------------------------------------------------------------
 1 | // List Icons
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-ul {
 5 |   list-style-type: none;
 6 |   margin-left: $fa-li-width * 5/4;
 7 |   padding-left: 0;
 8 | 
 9 |   > li { position: relative; }
10 | }
11 | 
12 | .#{$fa-css-prefix}-li {
13 |   left: -$fa-li-width;
14 |   position: absolute;
15 |   text-align: center;
16 |   width: $fa-li-width;
17 |   line-height: inherit;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // Mixins
 2 | // --------------------------
 3 | 
 4 | @mixin fa-icon {
 5 |   -webkit-font-smoothing: antialiased;
 6 |   -moz-osx-font-smoothing: grayscale;
 7 |   display: inline-block;
 8 |   font-style: normal;
 9 |   font-variant: normal;
10 |   font-weight: normal;
11 |   line-height: 1;
12 |   vertical-align: -15%;
13 | }
14 | 
15 | @mixin fa-icon-rotate($degrees, $rotation) {
16 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
17 |   transform: rotate($degrees);
18 | }
19 | 
20 | @mixin fa-icon-flip($horiz, $vert, $rotation) {
21 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
22 |   transform: scale($horiz, $vert);
23 | }
24 | 
25 | 
26 | // Only display content to screen readers. A la Bootstrap 4.
27 | //
28 | // See: http://a11yproject.com/posts/how-to-hide-content/
29 | 
30 | @mixin sr-only {
31 |   border: 0;
32 |   clip: rect(0, 0, 0, 0);
33 |   height: 1px;
34 |   margin: -1px;
35 |   overflow: hidden;
36 |   padding: 0;
37 |   position: absolute;
38 |   width: 1px;
39 | }
40 | 
41 | // Use in conjunction with .sr-only to only display content when it's focused.
42 | //
43 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
44 | //
45 | // Credit: HTML5 Boilerplate
46 | 
47 | @mixin sr-only-focusable {
48 |   &:active,
49 |   &:focus {
50 |     clip: auto;
51 |     height: auto;
52 |     margin: 0;
53 |     overflow: visible;
54 |     position: static;
55 |     width: auto;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_rotated-flipped.scss:
--------------------------------------------------------------------------------
 1 | // Rotated & Flipped Icons
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
 7 | 
 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
 9 | .#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
10 | .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
11 | 
12 | // Hook for IE8-9
13 | // -------------------------
14 | 
15 | :root {
16 |   .#{$fa-css-prefix}-rotate-90,
17 |   .#{$fa-css-prefix}-rotate-180,
18 |   .#{$fa-css-prefix}-rotate-270,
19 |   .#{$fa-css-prefix}-flip-horizontal,
20 |   .#{$fa-css-prefix}-flip-vertical {
21 |     filter: none;
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_screen-reader.scss:
--------------------------------------------------------------------------------
1 | // Screen Readers
2 | // -------------------------
3 | 
4 | .sr-only { @include sr-only; }
5 | .sr-only-focusable { @include sr-only-focusable; }
6 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/_stacked.scss:
--------------------------------------------------------------------------------
 1 | // Stacked Icons
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-stack {
 5 |   display: inline-block;
 6 |   height: 2em;
 7 |   line-height: 2em;
 8 |   position: relative;
 9 |   vertical-align: middle;
10 |   width: 2em;
11 | }
12 | 
13 | .#{$fa-css-prefix}-stack-1x,
14 | .#{$fa-css-prefix}-stack-2x {
15 |   left: 0;
16 |   position: absolute;
17 |   text-align: center;
18 |   width: 100%;
19 | }
20 | 
21 | .#{$fa-css-prefix}-stack-1x {
22 |   line-height: inherit;
23 | }
24 | 
25 | .#{$fa-css-prefix}-stack-2x {
26 |   font-size: 2em;
27 | }
28 | 
29 | .#{$fa-css-prefix}-inverse {
30 |   color: $fa-inverse;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/fa-brands.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import 'variables';
 6 | 
 7 | @font-face {
 8 |   font-family: 'Font Awesome 5 Brands';
 9 |   font-style: normal;
10 |   font-weight: normal;
11 |   src: url('#{$fa-font-path}/fa-brands-400.eot');
12 |   src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
13 |   url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
14 |   url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
15 |   url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
16 |   url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
17 | }
18 | 
19 | .fab {
20 |   font-family: 'Font Awesome 5 Brands';
21 | }
22 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/fa-regular.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import 'variables';
 6 | 
 7 | @font-face {
 8 |   font-family: 'Font Awesome 5 Free';
 9 |   font-style: normal;
10 |   font-weight: 400;
11 |   src: url('#{$fa-font-path}/fa-regular-400.eot');
12 |   src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
13 |   url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
14 |   url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
15 |   url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
16 |   url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
17 | }
18 | 
19 | .far {
20 |   font-family: 'Font Awesome 5 Free';
21 |   font-weight: 400;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/fa-solid.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import 'variables';
 6 | 
 7 | @font-face {
 8 |   font-family: 'Font Awesome 5 Free';
 9 |   font-style: normal;
10 |   font-weight: 900;
11 |   src: url('#{$fa-font-path}/fa-solid-900.eot');
12 |   src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
13 |   url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
14 |   url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
15 |   url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
16 |   url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
17 | }
18 | 
19 | .fa,
20 | .fas {
21 |   font-family: 'Font Awesome 5 Free';
22 |   font-weight: 900;
23 | }
24 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/scss/fontawesome.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * Font Awesome Free 5.0.1 by @fontawesome - http://fontawesome.com
 3 |  * License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 4 |  */
 5 | @import 'variables';
 6 | @import 'mixins';
 7 | @import 'core';
 8 | @import 'larger';
 9 | @import 'fixed-width';
10 | @import 'list';
11 | @import 'bordered-pulled';
12 | @import 'animated';
13 | @import 'rotated-flipped';
14 | @import 'stacked';
15 | @import 'icons';
16 | @import 'screen-reader';
17 | 


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-brands-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-brands-400.eot


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-brands-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-brands-400.ttf


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-brands-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-brands-400.woff


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-brands-400.woff2


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-regular-400.eot


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-regular-400.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-regular-400.ttf


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-regular-400.woff


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-regular-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-regular-400.woff2


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-solid-900.eot


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-solid-900.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-solid-900.ttf


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-solid-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-solid-900.woff


--------------------------------------------------------------------------------
/src/styles/font/fontawesome/webfonts/fa-solid-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reruin/ServerWatch/1536dff52ab71f1837ba837559b2726ec829d865/src/styles/font/fontawesome/webfonts/fa-solid-900.woff2


--------------------------------------------------------------------------------
/src/styles/main.less:
--------------------------------------------------------------------------------
 1 | @import 'base/vars';
 2 | @import 'base/reset';
 3 | @import 'base/anim';
 4 | @import 'base/section';
 5 | @import 'base/table';
 6 | @import 'base/form';
 7 | @import 'base/progress';
 8 | @import 'base/button';
 9 | @import 'base/dropdown';
10 | @import 'base/message';
11 | 
12 | @import 'partials/header';
13 | 
14 | @import 'module/layout';
15 | @import 'module/signbox';
16 | 
17 | @import 'font/fontawesome/less/fontawesome';
18 | @import 'font/fontawesome/less/fa-solid';
19 | 
20 | @import 'skin/ios';


--------------------------------------------------------------------------------
/src/styles/module/layout.less:
--------------------------------------------------------------------------------
 1 | .md-layout(){
 2 |   .sidenav-left{
 3 |     transform:translateX(-100%);
 4 |     .toggle-button{
 5 |       opacity:1;
 6 |       pointer-events: auto;
 7 |     }
 8 |   }
 9 | 
10 |   .content-wrapper .main-content {
11 |     padding-left: 0;
12 |   }
13 |   
14 |   &.full{
15 |     .sidenav-left{
16 |       transform:translateX(0%) !important;
17 |       pointer-events: auto !important;
18 |     }
19 |     .content-wrapper {
20 |       .main-content{
21 |         transform:translateX(@sitenav-width)
22 |       }
23 |     }
24 |   }
25 | }
26 | 
27 | .layout {
28 |     // flex-direction: row;
29 |     // display: flex;
30 |   .layout-row{
31 |     display: flex;
32 |   }
33 | 
34 | 
35 | }
36 | 
37 | .content-wrapper {
38 |     width: 100%;
39 |     height: 100vh; /* used only inner scrollbar. */
40 |     .main-content {
41 |       width: 100%;
42 |       position: relative;
43 |       overflow: auto;
44 |       // z-index: 990;
45 |       overflow-x: hidden;
46 |       padding-top: @site-toolbar-height + 30;
47 |       transition:all 0.3s;
48 |   }
49 | }
50 | 
51 | .flex{
52 |   flex: 1;
53 |   box-flex:1;
54 |   -webkit-box-flex:1;
55 |   min-width: 0;
56 | }
57 | 
58 | .flex-2,.col-2 .flex{
59 |   flex: 0 0 50%;
60 | }
61 | 
62 | .flex-3{
63 |   flex: 0 0 33.333333%;
64 | }
65 | 
66 | .flex-4{
67 |   flex: 0 0 25%;
68 | }
69 | 
70 | .flex-5{
71 |   flex: 0 0 20%;
72 | }
73 | 
74 | .page{
75 |   padding:10px;
76 | }
77 | 
78 | @media(max-width: 960px) {
79 | 
80 | }
81 | 
82 | @media(max-width: 768px) {
83 |   .md-layout();
84 | 
85 |   .row{
86 |     display: block;
87 |   }
88 |   .flex-2,.flex-3,.flex-4{
89 |     width:100%;
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/src/styles/module/signbox.less:
--------------------------------------------------------------------------------
 1 | .signin-box {
 2 |   
 3 |   header{
 4 |     font-size:21px;padding:10px;
 5 |     color:#222;
 6 |   }
 7 | 
 8 |   form{
 9 |     width: 300px;
10 |     margin: 10% auto;
11 |   }
12 |   h4{
13 |     color: #333;
14 |   }
15 |   .signin-body {
16 |     width: 100%;
17 |   }
18 | 
19 |   .signin-footer {
20 |     display: block;
21 |     width: 100%;
22 |   }
23 |   .form-control {
24 |     display: block;
25 |     width: 100%;
26 |     height: 44px;
27 |     padding: 11px 16px;
28 |     font-size: 14px;
29 |     line-height: 1.5;
30 |     color: #404040;
31 |     background: #fff;
32 |     border: 2px solid #f1f3f5;
33 |     border-radius: 3px;
34 |     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
35 |     -webkit-appearance: none;
36 |     margin: 15px 0;
37 |     &:focus {
38 |       border-color: #bfbfbf;
39 |       outline: 0;
40 |     }
41 |   }
42 |   h4 {
43 |     font-size: 21px;
44 |     text-align: center;
45 |     font-weight: normal;
46 |     margin-bottom: 16px;
47 |   }
48 | 
49 |   .btn {
50 |     margin-top: 16px;
51 |     margin-bottom: 32px;
52 |   }
53 | 
54 |   a.reg {
55 |     float: right;
56 |   }
57 | 
58 | }


--------------------------------------------------------------------------------
/src/styles/partials/header.less:
--------------------------------------------------------------------------------
  1 | .site-head {
  2 |   position: fixed;
  3 |   width: 100%;
  4 |   left: 0;
  5 |   z-index: 59;
  6 |   background: #fff;
  7 |   box-shadow: 0 1px 4px rgba(0, 0, 0, .08)!important;
  8 |   .logo {
  9 |     display: inline-block;
 10 |     line-height: 64px;
 11 |     height: 64px;
 12 | 
 13 |     a {
 14 |       display: inline-block;
 15 |       color: #666;
 16 |       text-decoration: none;
 17 |       font-weight: 400;
 18 |       font-size: 16px;
 19 |       text-align: center;
 20 |       padding: 0 18px;
 21 |     }
 22 |   }
 23 |   .menu {
 24 |     line-height: 64px;
 25 |     height: 64px;
 26 |     display: inline-block;
 27 |     a {
 28 |       padding: 0 12px;
 29 |       display: inline-block;
 30 |     }
 31 | 
 32 |     a.menu-selected {
 33 |       color: #108ee9; // border-bottom: 2px solid #108ee9 ;
 34 |     }
 35 |   }
 36 |   .toolbar {
 37 |     padding: 20px;
 38 | 
 39 |     .icon {
 40 |       cursor: pointer;
 41 |       border-radius: 50%;
 42 |       box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
 43 |       max-width: 100%;
 44 |       font-size: 24px;
 45 |       line-height: 24px;
 46 |       color: #999;
 47 |     }
 48 | 
 49 |     float:right;
 50 | 
 51 |     .sl-select-dropdown {
 52 |       min-width: 100px;
 53 |       right: 0;
 54 |     }
 55 |   }
 56 | 
 57 | 
 58 |   .more {
 59 |     height: 16px;
 60 |     width: 20px;
 61 |     display: inline-block;
 62 |     position: relative;
 63 |     ransform: rotate(0);
 64 |     transition: background .5s ease;
 65 |     background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 2' xml:space='preserve'><polyline points='0,0 16,0' style='stroke:#666666;stroke-width:2'/></svg>") center center repeat-x;
 66 |     background-clip: content-box;
 67 |     margin: 18px;
 68 | 
 69 |     &.active {
 70 |       background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 2' xml:space='preserve'><polyline points='0,0 16,0' style='sstroke-width:2'/></svg>") center center repeat-x;
 71 |     }
 72 | 
 73 |     &:before {
 74 |       content: " ";
 75 |       position: absolute;
 76 |       top: 0;
 77 |       width: 20px;
 78 |       height: 2px;
 79 |       background: #666666;
 80 |       -webkit-transform-origin: 20px;
 81 |       transform-origin: 20px;
 82 |       transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s;
 83 |     }
 84 | 
 85 |     &:after {
 86 |       content: " ";
 87 |       position: absolute;
 88 |       bottom: 0;
 89 |       width: 20px;
 90 |       height: 2px;
 91 |       background: #666666;
 92 |       -webkit-transform-origin: 20px;
 93 |       transform-origin: 20px;
 94 |       transition: background .5s cubic-bezier(.77, .2, .05, 1), opacity .55s ease, transform .5s cubic-bezier(.77, .2, .05, 1), width .5s;
 95 |     }
 96 | 
 97 |     &.active:after {
 98 |       transform: rotate(45deg);
 99 |     }
100 |     &.active:before {
101 |       transform: rotate(-45deg);
102 |     }
103 |   }
104 | }


--------------------------------------------------------------------------------
/src/styles/skin/ios.less:
--------------------------------------------------------------------------------
 1 | .ios {
 2 | 
 3 |   .content-wrapper {
 4 |     background: #f4f8fb;
 5 |   }
 6 | 
 7 |   .page {
 8 |     padding:0 25px 10px;
 9 |     .section {
10 |       background: none;
11 |       box-shadow: none;
12 |       margin: 0;
13 |       .section-title {
14 |         padding: 0 !important;
15 |         border-bottom: none;
16 |         font-size: 20px;
17 |       }
18 |       .section-content {
19 |         padding:0;
20 |       }
21 |       .section-footer{
22 |         padding-left: 0;
23 | 
24 |       }
25 |       .sl-input-container{
26 |         margin: 0;
27 |       }
28 |     }
29 |   }
30 |   .sl-table{
31 |     padding: 0;
32 |     box-shadow: 0 1px 3px rgba(0,0,0,.15);
33 |   }
34 |   table {
35 |     background: #fff;
36 | 
37 |     tr{
38 |       padding-left:10px;
39 |       padding-right:10px;
40 |     }
41 |     th {
42 |       background: #f7f7f7;
43 |       color: rgb(53,53,53);
44 |       font-weight: 600;
45 |     }
46 |     td{
47 |       font-size: 12px;
48 |     }
49 |   }
50 |   .sl-pagination{
51 |     background: #f7f7f7;
52 |   }
53 | 
54 |   .sl-input-container label{
55 |     // width:100px;
56 |   }
57 | 
58 |   .sl-spin{
59 |     background: rgba(255,255,255,.1);
60 |   }
61 | }
62 | 
63 | 


--------------------------------------------------------------------------------
/src/utils/_.js:
--------------------------------------------------------------------------------
  1 | function hash(data, key, value) {
  2 |   var obj = {};
  3 |   key = key || 'key';
  4 |   for (var i in data) {
  5 |     if (data[i][key])
  6 |       obj[data[i][key]] = value ? data[i][value] : data[i];
  7 |   }
  8 |   return obj;
  9 | }
 10 | 
 11 | function extend(src, dist) {
 12 |   for (var i in dist) {
 13 |     src[i] = dist[i];
 14 |   }
 15 |   return src;
 16 | }
 17 | 
 18 | function fill(src , dist){
 19 |   for (var i in src) {
 20 |     src[i] = dist[i];
 21 |   }
 22 |   return src;
 23 | }
 24 | 
 25 | function pick(src_t, dist_t, conv_t) {
 26 | 
 27 |     var ret = [];
 28 |     var isarr = isArray(src_t);
 29 |     var dist = {};
 30 |     conv_t = conv_t || {};
 31 | 
 32 |     if (isArray(dist_t)) {
 33 |         for (var i in dist_t) {
 34 |             dist[dist_t[i]] = undefined;
 35 |         }
 36 |     }
 37 | 
 38 |     var src = !isarr ? [src_t] : src_t;
 39 | 
 40 |     for (var j = 0, l = src.length; j < l; j++) {
 41 |         var obj = {};
 42 |         for (var i in dist) {
 43 |             var k = i;
 44 |             if (conv_t[i]) k = conv_t[i];
 45 |             obj[k] = src[j][i] === null ? dist[i] : src[j][i];
 46 |         }
 47 |         ret.push(obj);
 48 |     }
 49 | 
 50 |     return isarr ? ret : ret[0];
 51 | }
 52 | 
 53 | function isEmptyObject(o) {
 54 |   for (var i in o) return false;
 55 |   return true;
 56 | }
 57 | 
 58 | function isValidObject(o) {
 59 |   if (isEmptyObject(o)) return false;
 60 |   for (var i in o) {
 61 |     if (o[i] === undefined) return false;
 62 |   }
 63 |   return true;
 64 | }
 65 | 
 66 | function isFunction(v) {
 67 |   return "function" === typeof v;
 68 | }
 69 | 
 70 | function isArray(v) {
 71 |   return Object.prototype.toString.call(v) === "[object Array]";
 72 | }
 73 | 
 74 | function isObject(v) {
 75 |   return Object.prototype.toString.call(v) === "[object Object]";
 76 | }
 77 | 
 78 | function isString(v) {
 79 |   return "string" === typeof v;
 80 | }
 81 | 
 82 | function isDate(v){
 83 |   return Object.prototype.toString.call(v) === "[object Date]";
 84 | }
 85 | 
 86 | function template(str, data) {
 87 |   return str.replace(/\{ *([\w_]+) *\}/g, function(str, key) {
 88 |     var value = data[key];
 89 |     if (value === undefined) {
 90 |       console.log('No value provided for variable ' + str);
 91 |       value = "{" + key + "}";
 92 |     } else if (typeof value === 'function') {
 93 |       value = value(data);
 94 |     }
 95 |     return value;
 96 |   })
 97 | }
 98 | 
 99 | function datetime(date, expr) {
100 |   expr = expr || 'yyyy-MM-dd'
101 |   var a = new Date()
102 |   if(isDate(date)){
103 |     a = date
104 |   }
105 |   else if(isString(date)){
106 |     try{
107 |       a = new Date(date);
108 |     }catch(e){
109 | 
110 |     }
111 |   }else if(!isNaN(date)){
112 |     try{
113 |       a = new Date(date);
114 |     }catch(e){
115 | 
116 |     }
117 |   }
118 | 
119 | 
120 |   var y = a.getFullYear(),
121 |     M = a.getMonth() + 1,
122 |     d = a.getDate(),
123 |     D = a.getDay(),
124 |     h = a.getHours(),
125 |     m = a.getMinutes(),
126 |     s = a.getSeconds();
127 | 
128 |   function zeroize(v) {
129 |     v = parseInt(v);
130 |     return v < 10 ? "0" + v : v;
131 |   }
132 | 
133 |   return expr.replace(/(?:s{1,2}|m{1,2}|h{1,2}|d{1,2}|M{1,4}|y{1,4})/g, function(str) {
134 | 
135 |     switch (str) {
136 |       case 's':
137 |         return s;
138 |       case 'ss':
139 |         return zeroize(s);
140 |       case 'm':
141 |         return m;
142 |       case 'mm':
143 |         return zeroize(m);
144 |       case 'h':
145 |         return h;
146 |       case 'hh':
147 |         return zeroize(h);
148 |       case 'd':
149 |         return d;
150 |       case 'dd':
151 |         return zeroize(d);
152 |       case 'M':
153 |         return M;
154 |       case 'MM':
155 |         return zeroize(M);
156 |       case 'MMMM':
157 |         return ['十二', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一'][m] + '月';
158 |       case 'yy':
159 |         return String(y).substr(2);
160 |       case 'yyyy':
161 |         return y;
162 |       default:
163 |         return str.substr(1, str.length - 2);
164 |     }
165 |   });
166 | }
167 | 
168 | function separator(input) {
169 |   return input ? input.replace(/([A-Z])/g, function(m) {
170 |       return '-' + m.toLowerCase();
171 |   }) : '';
172 | }
173 | 
174 | export default {
175 |   hash,
176 |   extend,
177 |   fill,
178 |   pick,
179 |   isFunction,
180 |   isArray,
181 |   isObject,
182 |   isString,
183 |   template,
184 |   datetime,
185 |   separator
186 | }


--------------------------------------------------------------------------------
/src/utils/datetime.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function range(type , tz){
 3 |   tz = tz || 8
 4 |   var now = new Date()
 5 |   var timestamp = now.getTime()
 6 | 
 7 |   now.setHours(now.getHours() + tz)
 8 |   let end = now.toISOString()
 9 | 
10 |   now = new Date(timestamp)
11 | 
12 |   //非24小时模式 
13 |   if(type != 'dt') {
14 |     now.setHours(0+tz)
15 |     now.setMinutes(0)
16 |     now.setSeconds(0)
17 |     now.setMilliseconds(0)
18 |   }
19 |   
20 |   if(type == 'w'){
21 |     now.setDate(now.getDate() - now.getDay() + 1)
22 |   }
23 |   else if(type == 'm') {
24 |     now.setDate(1)
25 |   }
26 |   else if(type == 'dt') {
27 |     now.setHours(now.getHours()+tz)
28 |     now.setDate(now.getDate()-1)
29 |   }
30 |   // d
31 |   else if(type == 'd'){
32 | 
33 |   }
34 | 
35 |   let start = now.toISOString()
36 |   return {start , end}
37 | }
38 | 
39 | export default range


--------------------------------------------------------------------------------
/src/utils/format.js:
--------------------------------------------------------------------------------
  1 | import _ from './_'
  2 | 
  3 | 
  4 | const dep = {
  5 |   status: [
  6 |     { code: '0', name: '启用' },
  7 |     { code: '1', name: '禁用' }
  8 |   ]
  9 | }
 10 | 
 11 | class Format {
 12 |   static unescape(obj) {
 13 |     for (var i in obj) {
 14 |       if (obj[i] && typeof(obj[i]) == 'string') {
 15 |         obj[i] = unescape(obj[i]);
 16 |       }
 17 |     }
 18 |     return obj;
 19 |   }
 20 | 
 21 |   static index(data, key) {
 22 |     key = key || '@';
 23 |     for (var i = data.length - 1; i >= 0; i--) {
 24 |       data[i][key] = i + 1;
 25 |     }
 26 |   }
 27 |   
 28 |   static conv(data, deps, fix) {
 29 |     if (!data) return data
 30 | 
 31 |     fix = '_' + (fix || 'name');
 32 | 
 33 |     if (typeof(data) == 'string' || typeof(data) == 'number') {
 34 |       var h = _.hash(deps, id, label);
 35 |       return h[data];
 36 |     }
 37 | 
 38 |     var is_obj = false;
 39 |     if (_.isArray(data) == false) {
 40 |       is_obj = true;
 41 |       data = [data];
 42 |     }
 43 | 
 44 |     if (_.isString(deps)) {
 45 |       var t = deps;
 46 |       deps = {};
 47 |       deps[t] = t;
 48 |     }
 49 | 
 50 |     for (var j in deps) {
 51 |       var key = deps[j];
 52 |       var s = dep[key];
 53 |       if (s) {
 54 |         var h = _.hash(s, 'code', 'name');
 55 |         for (var i in data) {
 56 |           if (j in data[i]) {
 57 |             data[i][j + fix] = h[data[i][j]];
 58 |           }
 59 |         }
 60 |       }
 61 | 
 62 |     }
 63 |     return is_obj ? data[0] : data;
 64 |   }
 65 | 
 66 |   static datetime(data , key){
 67 |     var isArr = _.isArray(key)
 68 |     var process = function(d){
 69 |       if(isArr){
 70 |         for(var i in key){
 71 |           d[key[i]] = _.datetime( d[key[i]],'yyyy-MM-dd hh:mm:ss')
 72 |         }
 73 |       }else{
 74 |         d[key] = _.datetime( d[key],'yyyy-MM-dd hh:mm:ss')
 75 |       }
 76 |     }
 77 | 
 78 |     if(_.isArray(data)){
 79 |       for(var i in data){
 80 |         process(data[i])
 81 |       }
 82 |     }
 83 |     
 84 |     else if(_.isObject(data)){
 85 |       process(data)
 86 |     }
 87 |     
 88 |   }
 89 | 
 90 |   static string(data , key){
 91 |     var isArr = _.isArray(key)
 92 |     var process = function(d){
 93 |       if(isArr){
 94 |         for(var i in key){
 95 |           d[key[i]] = String( d[key[i]] )
 96 |         }
 97 |       }else{
 98 |         d[key] = String( d[key] )
 99 |         console.log(d[key])
100 |       }
101 |     }
102 | 
103 |     if(_.isArray(data)){
104 |       for(var i in data){
105 |         process(data[i])
106 |       }
107 |     }
108 |     
109 |     else if(_.isObject(data)){
110 |       process(data)
111 |     }
112 |   }
113 |   
114 |   static trim(data , key){
115 |     var isArr = _.isArray(key)
116 |     var process = function(d){
117 |       if(isArr){
118 |         for(var i in key){
119 |           d[key[i]] = d[key[i]].replace(/'"/g,'')
120 |         }
121 |       }else{
122 |         d[key] = d[key].replace(/'"/g,'')
123 |       }
124 |     }
125 | 
126 |     if(_.isArray(data)){
127 |       for(var i in data){
128 |         process(data[i])
129 |       }
130 |     }
131 |     
132 |     else if(_.isObject(data)){
133 |       process(data)
134 |     }
135 |   }
136 |   
137 |   static select(data , code , name){
138 |     let g = []
139 |     for(var i in data){
140 |       g.push({code:data[i][code] , name:data[i][name]})
141 |     }
142 |     return g
143 |   }
144 | 
145 |   static timezone(d){
146 |     var  lt = new Date();
147 |     var d = new Date(lt.getTime()-(lt.getTimezoneOffset()*60000));
148 | 
149 |     var process = function(d){
150 |       d[key] = _.datetime(d[key],'yyyy-MM-dd hh:mm:ss')
151 |     }
152 |     if(_.isArray(data)){
153 |       for(var i in data){
154 |         data[i][key] = _.datetime(data[i],'yyyy-MM-dd hh:mm:ss')
155 |       }
156 |     }
157 |     else if(_.isObject(data)){
158 |       _.datetime(data , 'yyyy-MM-dd hh:mm:ss')
159 |     }
160 |   }
161 | 
162 |   static byte(v , t){
163 |     var v = parseFloat(v)
164 |     if(t == 'm'){
165 |         return (v / 1024 / 1024).toFixed(2) + ' MB'
166 |     }else if( t == 'g'){
167 |         return (v / 1024 / 1024 / 1024).toFixed(2) + ' GB'
168 |     }else{
169 |       if( v > 1024 * 1024 * 1024){
170 |         return (v / 1024 / 1024 / 1024).toFixed(2) + ' GB'
171 |       }else if( v > 1024 * 1024 ){
172 |         return (v / 1024 / 1024).toFixed(2) + ' MB'
173 |       }else if(v>1024){
174 |         return (v / 1024 ).toFixed(2) + ' KB'
175 |       }else{
176 |         return '< 1 KB'
177 |       }
178 |     }
179 |   }
180 | 
181 |   static time(v , t){
182 |     const z = (a) => (a < 10 ? ('0' + a) : a)
183 | 
184 |     const p = (a) => {
185 |       var h = Math.floor(a / 3600) , 
186 |         m = Math.floor((a - h*3600) / 60),
187 |         s = Math.floor(a % 60)
188 |       return [z(h),z(m),z(s)].join(':')
189 |     }
190 |     
191 |     v = parseInt(v)
192 | 
193 |     if(!isNaN(v)){
194 |       if(v < 100 * 3600){
195 |         return p(v)
196 |       }else{
197 |         return Math.floor(v / 86400) + ' 天'
198 |       }
199 |     }else{
200 |       return 'N/A'
201 |     }
202 |     
203 |   }
204 | }
205 | 
206 | 
207 | export default Format


--------------------------------------------------------------------------------
/src/utils/http.js:
--------------------------------------------------------------------------------
  1 | import axios from 'axios'
  2 | 
  3 | var host = '';
  4 | 
  5 | var token = ''
  6 | 
  7 | function serialize(obj) {
  8 |   var arr = [];
  9 |   for (var i in obj) {
 10 |     arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(obj[i]))
 11 |   }
 12 |   return arr.join('&');
 13 | }
 14 | 
 15 | function url_(u) {
 16 |   return host + u
 17 | }
 18 | 
 19 | function get_(url, data) {
 20 |   return request('GET', url, data)
 21 | }
 22 | 
 23 | function post(url, data, format) {
 24 |   return request('POST', url, data, format);
 25 | }
 26 | 
 27 | function put(url, data) {
 28 |   return request('PUT', url, data);
 29 | }
 30 | 
 31 | function request(type, url, data, format) {
 32 | 
 33 |   var req = {
 34 |     method: type,
 35 |     url: url_(url, data, false)
 36 |   }
 37 | 
 38 |   var headers = {}
 39 |   if (token) {
 40 |     headers.Authorization = token;
 41 |   }
 42 | 
 43 |   if (type == 'GET') {
 44 |     req.params = data
 45 |   } else {
 46 |     req.data = data
 47 | 
 48 |     if (format === undefined) format = 'json';
 49 | 
 50 |     if (format == 'urlencode') {
 51 |       req.data = serialize(data);
 52 |       headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
 53 |     } else if (format == 'xml') {
 54 |       headers['Content-Type'] = 'text/xml'
 55 |     } else if (format == 'json') {
 56 |       headers['Content-Type'] = 'application/json'
 57 |     }
 58 |   }
 59 | 
 60 |   req.headers = headers
 61 | 
 62 |   return axios(req).then(function(response) {
 63 |     return response.data
 64 |   }).catch((error) => {
 65 |     const { response } = error
 66 |     let msg, statusCode
 67 |     if (response && response instanceof Object) {
 68 |       const { data, statusText } = response
 69 |       statusCode = response.status
 70 |       msg = data.message || statusText
 71 |     } else {
 72 |       statusCode = -1
 73 |       msg = error.message || 'Network Error'
 74 |     }
 75 |     return Promise.reject({ status: statusCode, message: msg })
 76 |   })
 77 | }
 78 | 
 79 | function setInterceptor(i) {
 80 |   if (i.request) {
 81 |     axios.interceptors.request.use(i.request, i.request)
 82 |   }
 83 |   if (i.response) {
 84 |     axios.interceptors.response.use(i.response, i.response)
 85 |   }
 86 | }
 87 | 
 88 | function setToken(v) {
 89 |   token = v
 90 | }
 91 | 
 92 | function setHost(v) {
 93 |   host = v
 94 | }
 95 | 
 96 | 
 97 | export default {
 98 |   get: get_,
 99 |   post,
100 |   setToken,
101 |   setHost,
102 |   setInterceptor
103 | }


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import _ from './_'
2 | import format from './format'
3 | import http from './http'
4 | import datetime from './datetime'
5 | 
6 | export {_ , http , format,datetime}


--------------------------------------------------------------------------------
/src/webpack.config.js:
--------------------------------------------------------------------------------
  1 | //坑 http://blog.csdn.net/paranoidyang/article/details/72898070
  2 | 
  3 | var path = require('path');
  4 | var webpack = require('webpack');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  7 | var autoprefixer = require('autoprefixer');
  8 | 
  9 | const prod = process.env.NODE_ENV === 'production';
 10 | 
 11 | 
 12 | module.exports = {
 13 |   //输出的文件名,默认合并以后的js会命名为bundle.js
 14 |   //entry 为对象时，output要使用[name].js 的形式
 15 |   entry:{
 16 |     app:'./app',
 17 | 
 18 |     //抽取公共框架
 19 |     /*vendors:[
 20 |       "angular",
 21 |       "angular-materia",
 22 |       "angular-animate",
 23 |       "angular-route",
 24 |       "angular-resource"
 25 |     ],*/
 26 |   },
 27 | 
 28 | 
 29 | 
 30 |   resolve:{
 31 |     extensions: ['.js', '.less', '.scss', '.css' , '.ng'],
 32 |     //设置解析器查找模块的目录
 33 |     modules: [
 34 |         path.resolve(__dirname, 'node_modules'),
 35 |         path.join(__dirname, './')
 36 |     ],
 37 | 
 38 |     //设置模块别名
 39 |     /*alias:{
 40 |       angular:path.resolve(__dirname,"node_modules/angular/angular.min.js"),
 41 |       "angular-animate":path.resolve(__dirname,"node_modules/angular-animate/angular-animate.min.js"),
 42 |       "angular-route":path.resolve(__dirname,"node_modules/angular-route/angular-route.min.js"),
 43 |       "angular-resource":path.resolve(__dirname,"node_modules/angular-resource/angular-resource.min.js"),
 44 |       jquery:path.resolve(__dirname,"node_modules/jquery/dist/jquery.min.js")
 45 |     }*/
 46 |   },
 47 |   resolveLoader: {
 48 |     
 49 |   },
 50 |    
 51 |   //输出
 52 |  /* output: {
 53 |       filename:prod ?'[name].[hash].js':'[name].js',
 54 |       path: path.join(__dirname, 'build'),
 55 |       // 指定资源文件引用的目录，也就是说用/assests/这个路径指代path，开启这个配置的话，index.html中应该要引用的路径全部改为'/assets/...'
 56 |       publicPath:  'build',
 57 |       chunkFilename:prod ? '[name].[hash].js': '[name].js'
 58 |   },*/
 59 |   output: {
 60 |       filename:prod ?'static/js/[name].[hash].js':'[name].js',
 61 |       path: path.join(__dirname, 'build'),
 62 |       // 指定资源文件引用的目录，也就是说用/assests/这个路径指代path，开启这个配置的话，index.html中应该要引用的路径全部改为'/assets/...'
 63 |       // publicPath:  'build',
 64 |       chunkFilename:prod ? 'static/js/[name].[hash].js': '[name].js'
 65 |   },
 66 | 
 67 | 
 68 |   plugins: [
 69 |     new webpack.optimize.CommonsChunkPlugin({
 70 |         name: "vendor",
 71 |         minChunks:2,
 72 |     }),
 73 |     new ExtractTextPlugin(prod ? 'static/css/[name].[contenthash:8].css' : 'styles.css'),
 74 |     
 75 |     new webpack.HotModuleReplacementPlugin(),
 76 |     /*new webpack.ProvidePlugin({
 77 |       $: "jquery",
 78 |       jQuery: "jquery"
 79 |     })*/
 80 |   ],
 81 | 
 82 |   module : {
 83 |     rules : [
 84 |       //js
 85 |       {
 86 |         test:/\.js?$/,
 87 |         exclude: /node_modules/,
 88 |         use: {
 89 |           loader : 'babel-loader',
 90 |           options: {
 91 |             presets: ['es2015'],
 92 |             plugins: ['angularjs-annotate']
 93 |           }
 94 |         }
 95 |       },
 96 | 
 97 |       //scss
 98 |       {
 99 |           test: /\.scss/,
100 |           use: ExtractTextPlugin.extract({
101 |               use: [{
102 |                   loader: 'css-loader',
103 |                   options:{
104 |                       minimize: true //css压缩
105 |                   }
106 |               }, "sass-loader"]
107 |           })
108 |       },
109 |       // less css
110 |       {
111 |           test: /\.(less|css)$/,
112 |           use: ExtractTextPlugin.extract({
113 |               use: [{
114 |                       loader: 'css-loader',
115 |                       options:{
116 |                           minimize: true //css压缩
117 |                       }
118 |                   },{
119 |                       loader: 'postcss-loader',
120 |                       options: {
121 |                         ident: 'postcss',
122 |                         plugins: () => [
123 |                           //require('postcss-flexbugs-fixes'),
124 |                           autoprefixer({
125 |                             browsers: [
126 |                               '>1% in CN',
127 |                               'last 4 versions',
128 |                               'ie >= 8',
129 |                             ],
130 |                             flexbox: 'no-2009',
131 |                           }),
132 |                         ],
133 |                       },
134 |                   },"less-loader"]
135 |           })
136 |       },
137 |       
138 |       {
139 |         test: /\.html$/,
140 |         exclude: /node_modules/,
141 |         use: {loader:'raw-loader'}
142 |       },
143 | 
144 |       {
145 |           test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
146 |           loader: "url-loader?limit=8192"
147 |       }, 
148 |       {
149 |           test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
150 |           use:{ loader: "url-loader" }
151 |       },
152 |       {
153 |         test: /\.(png|jpg|gif|md)$/,
154 |         use:['file-loader']
155 |         // use: ['file-loader?limit=8192&name=[md5:hash:base64:10].[ext]']
156 |       }, 
157 |     ]
158 |   },
159 | 
160 |   // 使用 webpack-dev-server 时，HtmlWebpackPlugin 不会将文件生成到实际目录中
161 |   // https://gist.github.com/ampedandwired/becbbcf91d7a353d6690
162 |   devServer: {//webpack-dev-server配置热更新以及跨域
163 |         historyApiFallback: true,//不跳转
164 |         noInfo: true,
165 |         inline: true,//实时刷新
166 |         port: '4000',
167 |         hot:true,
168 |         contentBase: './',
169 |         
170 |         proxy: {
171 |           '/api/*': {
172 |            target: 'http://localhost:3001',
173 |            changeOrigin: true,
174 |            secure: false
175 |           }
176 |         }
177 |         
178 |     },
179 | };


--------------------------------------------------------------------------------
/src/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | //坑 http://blog.csdn.net/paranoidyang/article/details/72898070
  2 | 
  3 | var path = require('path');
  4 | var webpack = require('webpack');
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
  6 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
  7 | var autoprefixer = require('autoprefixer');
  8 | 
  9 | 
 10 | module.exports = {
 11 |   //输出的文件名,默认合并以后的js会命名为bundle.js
 12 |   //entry 为对象时，output要使用[name].js 的形式
 13 |   entry:{
 14 |     app:'./app',
 15 | 
 16 |     //抽取公共框架
 17 |     /*vendors:[
 18 |       "angular",
 19 |       "angular-materia",
 20 |       "angular-animate",
 21 |       "angular-route",
 22 |       "angular-resource"
 23 |     ],*/
 24 |   },
 25 | 
 26 | 
 27 | 
 28 |   resolve:{
 29 |     extensions: ['.js', '.less', '.scss', '.css' , '.ng'],
 30 |     //设置解析器查找模块的目录
 31 |     modules: [
 32 |         path.resolve(__dirname, 'node_modules'),
 33 |         path.join(__dirname, './')
 34 |     ],
 35 |   },
 36 |   resolveLoader: {
 37 |     
 38 |   },
 39 |    
 40 |   //输出
 41 |  /* output: {
 42 |       filename:prod ?'[name].[hash].js':'[name].js',
 43 |       path: path.join(__dirname, 'build'),
 44 |       // 指定资源文件引用的目录，也就是说用/assests/这个路径指代path，开启这个配置的话，index.html中应该要引用的路径全部改为'/assets/...'
 45 |       publicPath:  'build',
 46 |       chunkFilename:prod ? '[name].[hash].js': '[name].js'
 47 |   },*/
 48 |   output: {
 49 |       filename:'static/js/[name].[hash:8].js',
 50 |       path: path.join(__dirname, './build'),
 51 |       // publicPath:  'build',
 52 |       chunkFilename:'static/js/[name].[hash:8].js'
 53 |   },
 54 | 
 55 | 
 56 |   plugins: [
 57 |     new webpack.optimize.CommonsChunkPlugin({
 58 |         name: "vendor",
 59 |         minChunks:2,
 60 |     }),
 61 |     new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
 62 | 
 63 |     //js压缩
 64 |     new webpack.optimize.UglifyJsPlugin({
 65 |         //排除关键字
 66 |         mangle: {
 67 |             except: ['$super', '$', 'exports', 'require', 'module', '_']
 68 |         },
 69 |         compress: {
 70 |             warnings: false
 71 |         },
 72 |         output: {
 73 |             comments: false,
 74 |         }
 75 |     }),
 76 |     
 77 |     new HtmlWebpackPlugin({
 78 |       template: path.join(__dirname, './build.html'),
 79 |       minify: {
 80 |         removeComments: true,
 81 |         collapseWhitespace: true,
 82 |         removeRedundantAttributes: true,
 83 |         useShortDoctype: true,
 84 |         removeEmptyAttributes: true,
 85 |         removeStyleLinkTypeAttributes: true,
 86 |         keepClosingSlash: true,
 87 |         minifyJS: true,
 88 |         minifyCSS: true,
 89 |         minifyURLs: true,
 90 |       },
 91 |     })
 92 |   ],
 93 | 
 94 |   module : {
 95 |     rules : [
 96 |       //js
 97 |       {
 98 |         test:/\.js?$/,
 99 |         exclude: /node_modules/,
100 |         use: {
101 |           loader : 'babel-loader',
102 |           options: {
103 |             presets: ['es2015'],
104 |             plugins: ['angularjs-annotate']
105 |           }
106 |         }
107 |       },
108 | 
109 |       //scss
110 |       {
111 |           test: /\.scss/,
112 |           use: ExtractTextPlugin.extract({
113 |               use: [{
114 |                   loader: 'css-loader',
115 |                   options:{
116 |                       minimize: true //css压缩
117 |                   }
118 |               }, "sass-loader"]
119 |           })
120 |       },
121 |       // less css
122 |       {
123 |           test: /\.(less|css)$/,
124 |           use: ExtractTextPlugin.extract({
125 |               use: [
126 |                     {
127 |                       loader: 'css-loader',
128 |                       options:{
129 |                           minimize: true //css压缩
130 |                       }
131 |                     }, 
132 |                     {
133 |                       loader: 'postcss-loader',
134 |                       options: {
135 |                         ident: 'postcss',
136 |                         plugins: () => [
137 |                           //require('postcss-flexbugs-fixes'),
138 |                           autoprefixer({
139 |                             browsers: [
140 |                               '>1% in CN',
141 |                               'last 4 versions',
142 |                               'ie >= 8',
143 |                             ],
144 |                             flexbox: 'no-2009',
145 |                           }),
146 |                         ],
147 |                       },
148 |                     },
149 |                     "less-loader"]
150 |           })
151 |       },
152 |       {
153 |         test: /\.html$/,
154 |         exclude: /node_modules/,
155 |         use: {loader:'raw-loader'}
156 |       },
157 | 
158 |       {
159 |           test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
160 |           use: "url-loader?limit=8192&name=static/css/[name].[ext]"
161 |       }, 
162 |       {
163 |           test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
164 |           use:{ loader: "url-loader" }
165 |       },
166 |       {
167 |         test: /\.(png|jpg|gif|md)$/,
168 |         use:['file-loader?limit=8192&name=/static/img/[name].[hash:8].[ext]']
169 |         // use: ['file-loader?limit=8192&name=[md5:hash:base64:10].[ext]']
170 |       }, 
171 |       /*
172 |       {
173 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
174 |         loader: 'url',
175 |         query: {
176 |           limit: 10000,
177 |           name: path.posix.join(config.build.assetsSubDirectory, 'img/[name].[hash:7].[ext]')
178 |         }
179 |       }, 
180 |       {
181 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
182 |         loader: 'url',
183 |         query: {
184 |           limit: 10000,
185 |           name: path.posix.join(config.build.assetsSubDirectory, 'fonts/[name].[hash:7].[ext]')
186 |         }
187 |       }
188 |       */
189 |     ]
190 |   },
191 | 
192 | };


--------------------------------------------------------------------------------