Merge branch 'element-ui' into 'master', fixed #2

chinesedfan · Dec 15, 2017 · 0c11683 · 0c11683
2 parents 485ed69 + f404359
commit 0c11683
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 30 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,11 @@
 {
-  "presets": ["es2015", "stage-0"]
+  "presets": ["es2015", "stage-0"],
+  "plugins": [
+    ["component", [
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]]
+  ]
 }
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "engines": {
-    "node": "4.x"
+    "node": "6.x"
   },
   "keywords": [
     "api",
@@ -25,11 +25,14 @@
   "devDependencies": {
     "babel-core": "^6.22.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-component": "^0.10.1",
     "babel-preset-stage-0": "^6.22.0",
     "css-loader": "^0.26.1",
+    "file-loader": "^1.1.5",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.6.2",
     "vue-loader": "^10.2.1",
     "vue-template-compiler": "^2.1.10",
     "webpack": "^2.2.1",
@@ -39,6 +42,7 @@
     "babel-preset-es2015": "^6.22.0",
     "co": "^4.6.0",
     "co-body": "^4.2.0",
+    "element-ui": "^2.0.8",
     "jsoneditor.webapp": "^1.0.0",
     "kcors": "^1.3.2",
     "koa": "^1.2.5",

diff --git a/server/index.js b/server/index.js
@@ -16,11 +16,14 @@ const router = require('./router.js');
 const port = process.env.PORT || process.env.LEANCLOUD_APP_PORT || 8080;
 const httpPort = process.env.HTTP_PORT || 8442;
 const httpsPort = process.env.HTTPS_PORT || 8443;
-const jsoneditor = koa();
+
 const app = koa();
+const appDist = koa();
+const appEditor = koa();
 
 co(function*() {
-    jsoneditor.use(koaStatic('./node_modules/jsoneditor.webapp'));
+    appDist.use(koaStatic('./dist'));
+    appEditor.use(koaStatic('./node_modules/jsoneditor.webapp'));
 
     app.proxy = true;
     app.io = io();
@@ -29,7 +32,8 @@ co(function*() {
     app.use(kcors({
         credentials: true
     }));
-    app.use(koaMount('/dist/jsoneditor.webapp', jsoneditor));
+    app.use(koaMount('/dist/jsoneditor.webapp', appEditor));
+    app.use(koaMount('/dist', appDist));
     app.use(router.routes());
 
     // http

diff --git a/server/router.js b/server/router.js
@@ -12,12 +12,6 @@ router.register('/:prefix(/?api)/:api', ['get', 'post'], function*(next) {
         console.log(e.stack);
     }
 });
-// static files
-router.get('/dist/:file', function*(next) {
-    yield send(this, this.params.file, {
-        root: path.resolve(__dirname, '../dist')
-    });
-});
 // pages
 router.get('/html/:file', function*(next) {
     yield send(this, this.params.file, {

diff --git a/web/component/editortopbar.vue b/web/component/editortopbar.vue
@@ -41,21 +41,12 @@
 
 import _ from 'lodash';
 import qs from 'qs';
+import {Message, MessageBox} from 'element-ui';
 import {LS_CONFIG_CURRENT, LS_CONFIG_NAME, LS_CONFIG_NAME_LIST, LS_CONFIG_PREFIX} from '../localstorage.js';
 
 const {app, codeEditor, treeEditor} = window;
-const showNotification = function(message) {
-    const ele = app.notify.showNotification(message);
-    setTimeout(() => {
-        app.notify.removeMessage(ele);
-    }, 1000);
-};
-const showError = function(error) {
-    const ele = app.notify.showError(error);
-    setTimeout(() => {
-        app.notify.removeMessage(ele);
-    }, 1000);
-};
+const showNotification = (message) => Message({message, type: 'success'});
+const showError = (message) => Message({message, type: 'error'});
 
 export default {
     data() {
@@ -123,9 +114,14 @@ export default {
                 return;
             }
 
-            if (!confirm(`Confirm to overwrite: ${name}?`)) return;
-            localStorage.setItem(LS_CONFIG_NAME, this.configName);
-            localStorage.setItem(LS_CONFIG_PREFIX + name, this.getConfigStr());
+            MessageBox.confirm(`Confirm to overwrite: ${name}?`, {
+                callback: (action) => {
+                    if (action != 'confirm') return;
+                    
+                    localStorage.setItem(LS_CONFIG_NAME, this.configName);
+                    localStorage.setItem(LS_CONFIG_PREFIX + name, this.getConfigStr());
+                }
+            });
         },
         loadConfig(name) {
             if (!name) return;
@@ -141,7 +137,15 @@ export default {
             }
         },
         saveAsConfig() {
-            const name = prompt('Config name');
+            MessageBox.prompt('Config name', {
+                callback: (action, instance) => {
+                    if (action != 'confirm') return;
+                    
+                    this.doSave(instance.inputValue);
+                }
+            });
+        },
+        doSave(name) {
             if (!name) return;
 
             const isExisted = _.some(this.configNameList, (n) => n == name);
@@ -152,11 +156,21 @@ export default {
             this.configName = name;
             localStorage.setItem(LS_CONFIG_NAME, this.configName);
             localStorage.setItem(LS_CONFIG_PREFIX + name, this.getConfigStr());
+
+            showNotification(`Config ${name} saved!`);
         },
         deleteConfig(name) {
             if (!name) return;
-            if (!confirm(`Confirm to delete: ${name}?`)) return;
 
+            MessageBox.confirm(`Confirm to delete: ${name}?`, {
+                callback: (action) => {
+                    if (action != 'confirm') return;
+                    
+                    this.doDelete(name);
+                }
+            });
+        },
+        doDelete(name) {
             this.configName = '';
             _.some(this.configNameList, (n, i) => {
                 if (n == name) {
@@ -167,6 +181,8 @@ export default {
 
             localStorage.removeItem(LS_CONFIG_NAME);
             localStorage.removeItem(LS_CONFIG_PREFIX + name);
+
+            showNotification(`Config ${name} deleted!`);
         },
         applyConfig() {
             const jsonstr = this.getConfigStr();

diff --git a/web/component/indextopbar.vue b/web/component/indextopbar.vue
@@ -16,11 +16,12 @@
 
 import qs from 'qs';
 import url from 'url';
+import {Message} from 'element-ui';
 import {LS_CONFIG_CURRENT, LS_CONFIG_NAME} from '../localstorage.js';
 import {types} from '../store/index';
 
-const showNotification = alert;
-const showError = alert;
+const showNotification = (message) => Message({message, type: 'success'});
+const showError = (message) => Message({message, type: 'error'});
 
 export default {
     computed: {

diff --git a/web/pages/mockconfig.js b/web/pages/mockconfig.js
@@ -2,9 +2,13 @@
 
 import './mockconfig.less';
 import Vue from 'vue';
+import lang from 'element-ui/lib/locale/lang/en';
+import locale from 'element-ui/lib/locale';
 
 import EditorTopbar from '../component/editortopbar.vue';
 
+locale.use(lang);
+
 new Vue({
     el: '#vue-container',
     components: {

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,6 +10,7 @@ module.exports = {
     },
     output: {
         path: path.resolve(__dirname, 'dist'),
+        publicPath: '/dist/',
         filename: '[name].js'
     },
     module: {
@@ -32,6 +33,25 @@ module.exports = {
                 },
                 'less-loader'
             ]
+        }, {
+            test: /\.css$/,
+            use: [
+                'style-loader',
+                {
+                    loader: 'css-loader',
+                    options: {
+                        importLoaders: 1
+                    }
+                }
+            ]
+        }, {
+            test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
+            use: [{
+                loader: 'url-loader',
+                options: {
+                    limit: 5000
+                }
+            }]
         }]
     },
     resolve: {