使用 <host-list> 组件。

app/SH3/MacGap/SwitchHosts!-Info.plist

@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>3367</string>
+	<string>3428</string>
 	<key>LSApplicationCategoryType</key>
 	<string>public.app-category.developer-tools</string>
 	<key>LSMinimumSystemVersion</key>

app/SH3/public/index.html

@@ -19,27 +19,7 @@
 					<span class="title">{{ lang.sys_host_title }}</span>
 				</li>
 			</ul>
-			<ul>
-				<list-item
-						v-for="host in hosts.list | filterBy mySearch"
-						v-bind:host="host"
-				/>
-			</ul>
-			<ul id="custom-list">
-				<li v-cloak
-					v-for="host in hosts.list | filterBy mySearch"
-					@click="selectHost(host)"
-					v-draggable="{index: $index, dragged: 'dragged'}"
-					v-dropzone="sort(hosts.list, $index, $droptag, $dropdata)"
-					:class="{selected:host==current_host}">
-					<!--<i class="switch" @click="switchHost(host)" :class="{'on':host.on}"></i>-->
-					<i class="iconfont switch" @click="switchHost(host)"
-					   :class="{'icon-on':host.on, 'icon-off':!host.on}"></i>
-					<i class="iconfont icon-doc i-h"></i>
-					<span class="title">{{ host.title }}</span>
-					<i class="iconfont icon-edit btn-edit" @click="edit(host)"></i>
-				</li>
-			</ul>
+			<host-list v-bind:host="host" v-bind:hosts="hosts"></host-list>
 		</div>
 		<div class="operations">
 			<div id="search-bar" v-show="is_search_bar_show" v-cloak>
@@ -66,7 +46,8 @@
 	<div id="body">
 		<div class="status">
 			<div class="icons">
-				<i class="iconfont icon-earth" v-if="current_host.where == 'remote'" title="{{ lang.remote_hosts }}"></i>
+				<i class="iconfont icon-earth" v-if="current_host.where == 'remote'"
+				   title="{{ lang.remote_hosts }}"></i>
 				<i class="iconfont icon-lock2" v-if="current_host.is_editable == false" title="{{ lang.readonly }}"></i>
 			</div>
 		</div>
@@ -112,7 +93,8 @@
 			</div>
 			<div class="ln" v-if="current_edit_host.where=='remote'">
 				<label for="ipt-refresh-interval">{{ lang.auto_refresh }}</label>
-				<select name="host_refresh_interval" id="ipt-refresh-interval" v-model="current_edit_host.refresh_interval">
+				<select name="host_refresh_interval" id="ipt-refresh-interval"
+						v-model="current_edit_host.refresh_interval">
 					<option value="{{ opt[0] }}" v-for="opt in refresh_options">{{ opt[1] }}</option>
 				</select>
 				<span class="info">
@@ -124,7 +106,8 @@
 					<i class="iconfont icon-delete"></i>
 					{{ lang.del_host }}
 				</a>
-				<a href="#" class="refresh-host" @click="refreshHosts(current_host)" v-if="current_edit_host.where=='remote'">
+				<a href="#" class="refresh-host" @click="refreshHosts(current_host)"
+				   v-if="current_edit_host.where=='remote'">
 					<i class="iconfont icon-refresh"></i>
 					{{ lang.refresh }}
 				</a>
@@ -158,7 +141,7 @@
 </div>
 <script src="js/jquery.min.js"></script>
 <script src="js/vue.min.js"></script>
-<script src="../../../tmp/g_test.js"></script>
+<!--<script src="../../../tmp/g_test.js"></script>-->
 <script src="js/main.js"></script>
 </body>
 </html>

app/src/component/hostList.js

@@ -0,0 +1,73 @@
+/**
+ * @author oldj
+ * @blog http://oldj.net
+ */
+
+'use strict';
+
+exports.Component = Vue.component('host-list', {
+    //el: '#momolist',
+    props: ['host', 'hosts'],
+    data: function () {
+        return {
+            current_host: null
+        };
+    },
+    methods: {
+        selectHost: function (host) {
+            this.$dispatch('select-host', host);
+        },
+        toggleHost: function (host) {
+            this.$dispatch('toggle-host', host);
+        },
+        edit: function (host) {
+            this.$dispatch('edit-host-info', host);
+        },
+        sort: function (list, id, tag, data) {
+            var tmp = list[data.index];
+            list.splice(data.index, 1);
+            list.splice(id, 0, tmp);
+
+            this.$dispatch('do-save', 1);
+        }
+    },
+    // watch: {},
+    // ready: function () {
+    // },
+    // destroyed: function () {
+    // },
+    events: {
+        'current-host-change': function (current_host) {
+            this.current_host = current_host;
+        }
+    },
+    template: `<ul id="custom-list">
+            <li
+                v-for="host in hosts.list | filterBy mySearch"
+                @click="selectHost(host)"
+                v-draggable="{index: $index, dragged: 'dragged'}"
+                v-dropzone="sort(hosts.list, $index, $droptag, $dropdata)"
+                :class="{selected:host==current_host}">
+                <i class="iconfont switch" @click="toggleHost(host)"
+                    :class="{'icon-on':host.on, 'icon-off':!host.on}"></i>
+                <i class="iconfont icon-doc i-h"></i>
+                <span class="title">{{ host.title }}</span>
+                <i class="iconfont icon-edit btn-edit" @click="edit(host)"></i>
+            </li>
+        </ul>`
+    /*
+     <li v-cloak
+     v-for="host in hosts.list | filterBy mySearch"
+     @click="selectHost(host)"
+     v-draggable="{index: $index, dragged: 'dragged'}"
+     v-dropzone="sort(hosts.list, $index, $droptag, $dropdata)"
+     :class="{selected:host==current_host}">
+     <i class="iconfont switch" @click="switchHost(host)"
+     :class="{'icon-on':host.on, 'icon-off':!host.on}"></i>
+     <i class="iconfont icon-doc i-h"></i>
+     <span class="title">{{ host.title }}</span>
+     <i class="iconfont icon-edit btn-edit" @click="edit(host)"></i>
+     </li>
+     */
+});
+

app/src/component/listItem.js

@@ -1,51 +0,0 @@
-/**
- * @author oldj
- * @blog http://oldj.net
- */
-
-'use strict';
-
-exports.Component = Vue.component('list-item', {
-    //el: '#momolist',
-    props: ['host'],
-    data: function () {
-        return {};
-    },
-    methods: {
-        init_load: function () {
-        },
-        selectHost: function (host) {
-            alert(host);
-        }
-    },
-    watch: {},
-    ready: function () {
-        this.init_load();
-    },
-    destroyed: function () {
-    },
-    template: `<li
-            @click="selectHost(host)"
-            v-draggable="{index: $index, dragged: 'dragged'}"
-            v-dropzone="sort(hosts.list, $index, $droptag, $dropdata)"
-            :class="{selected:host==current_host}">
-            <i class="iconfont switch" @click="switchHost(host)"
-                :class="{'icon-on':host.on, 'icon-off':!host.on}"></i>
-            <i class="iconfont icon-doc i-h"></i>xxx
-            <span class="title">{{ host.title }}</span>
-            <i class="iconfont icon-edit btn-edit" @click="edit(host)"></i>
-        </li>
-        <!--<li v-cloak
-        v-for="host in hosts.list | filterBy mySearch"
-        @click="selectHost(host)"
-        v-draggable="{index: $index, dragged: 'dragged'}"
-        v-dropzone="sort(hosts.list, $index, $droptag, $dropdata)"
-        :class="{selected:host==current_host}">
-        <i class="iconfont switch" @click="switchHost(host)"
-        :class="{'icon-on':host.on, 'icon-off':!host.on}"></i>
-        <i class="iconfont icon-doc i-h"></i>
-        <span class="title">{{ host.title }}</span>
-        <i class="iconfont icon-edit btn-edit" @click="edit(host)"></i>
-        </li>-->
-        `
-});

app/src/config.js

@@ -7,7 +7,7 @@
 
 module.exports = {
     VERSION: '3.1.2'
-    , bundle_version: 3367
+    , bundle_version: 3428
     , url_chk_version: 'http://oldj.github.io/SwitchHosts/v.txt'
     , url_homepage: 'http://oldj.github.io/SwitchHosts/'
     , url_feedback: 'https://github.com/oldj/SwitchHosts/issues'

app/src/g_test.js

@@ -18,6 +18,9 @@
 
     MacGap.File = {
         exists: function (fn) {
+            if (fn.indexOf('data.json') != -1) {
+                return false;
+            }
             return true;
         },
         read: function (fn) {
@@ -34,9 +37,9 @@
 255.255.255.255	broadcasthost
 ::1             localhost`;
             } else if (fn.indexOf('data.json') != -1) {
-                return `{"list":[{"content":"# My Hosts\\n","on":false,"title":"My Hosts","_is_show":true,"refresh_interval":0},{"content":"##\\n# Host Database\\n#\\n# localhost is used to configure the loopback interface\\n# when the system is booting.  Do not change this entry.\\n##\\n127.0.0.1\\tlocalhost\\n255.255.255.255\\tbroadcasthost\\n::1             localhost \\n","on":true,"title":"backup","_is_show":true,"refresh_interval":0},{"last_refresh":null,"refresh_interval":0,"where":"local","on":true,"content":"# 测试\\n\\n127.0.0.1 test.com\\n","title":"测试","_is_show":true,"is_editable":true,"_just_switch":0}],"sys":"##\\n# Host Database\\n#\\n# localhost is used to configure the loopback interface\\n# when the system is booting.  Do not change this entry.\\n##\\n127.0.0.1\\tlocalhost\\n255.255.255.255\\tbroadcasthost\\n::1             localhost \\n"}`;
+                return '{}';
             } else if (fn.indexOf('preferences.json') != -1) {
-                return `{"is_dock_icon_hidden":false}`;
+                return '{"is_dock_icon_hidden":false}';
             }
             return '';
         },

app/src/main.js

@@ -18,7 +18,7 @@ var lang = require('./lang').getLang(navigator.language);
 var stat = require('./stat');
 var tray_obj;
 
-require('./component/listItem');
+require('./component/hostList');
 
 var app = new Vue({
     el: '#sh-app',
@@ -247,8 +247,9 @@ var app = new Vue({
         },
         selectHost: function (host) {
             this.current_host = host;
+            this.$broadcast('current-host-change', host);
         },
-        switchHost: function (host) {
+        toggleHost: function (host) {
             if (!host) return;
             this._to_switch_host = host;
             if (!host.is_sys) {
@@ -417,13 +418,6 @@ var app = new Vue({
             this.caculateHosts();
             this.doSave(1);
         },
-        sort: function (list, id, tag, data) {
-            var tmp = list[data.index];
-            list.splice(data.index, 1);
-            list.splice(id, 0, tmp);
-
-            this.doSave(1);
-        },
         move: function (from, to, id, tag, data) {
             var tmp = from[data.index];
             from.splice(data.index, 1);
@@ -457,6 +451,8 @@ var app = new Vue({
         },
 
         mySearch: function (item) {
+            if (!item) return false;
+            
             var kw = this.search_keyword;
             var r = this.search_regexp;
             item._is_show = true;
@@ -505,8 +501,17 @@ var app = new Vue({
         }
     },
     events: {
-        'apply-host': function (host) {
-            this.switchHost(host);
+        'select-host': function (host) {
+            this.selectHost(host);
+        },
+        'toggle-host': function (host) {
+            this.toggleHost(host);
+        },
+        'edit-host-info': function (host) {
+            this.edit(host);
+        },
+        'do-save': function (now) {
+            this.doSave(now);
         }
     }
 });

package.json

@@ -3,12 +3,11 @@
   "version": "1.0.0",
   "description": "",
   "main": "gulpfile.js",
-  "dependencies": {
-    "electron-packager": "^5.1.1"
-  },
+  "dependencies": {},
   "devDependencies": {
     "babel-preset-es2015": "^6.6.0",
     "codemirror": "~5.9.0",
+    "electron-packager": "^7.0.1",
     "esutils": "^2.0.2",
     "gulp": "~3.9.0",
     "gulp-babel": "^6.1.2",