- 优化图片

- 基本完成新 About 界面

app/lang/cn.js

@@ -7,6 +7,7 @@
 
 exports.content = {
   _lang_name: '简体中文'
+  , acknowledgement: '特别感谢'
   , add: '添加'
   , add_hosts: '添加 hosts 规则'
   , auto_launch: '随系统一起启动'
@@ -88,6 +89,7 @@ exports.content = {
   , set_and_relaunch_app: '确定并重启程序'
   , should_restart_after_change_language: '修改语言后需要重启应用方可生效。'
   , show_dock_icon: '显示 Dock 图标'
+  , source_code: '源码'
   , sudo_pswd: '密码'
   , sys_hosts_title: '系统 Hosts'
   , tmp_clean: '临时去掉所有绑定'

app/lang/en.js

@@ -7,6 +7,7 @@
 
 exports.content = {
   _lang_name: 'English'
+  , acknowledgement: 'Acknowledgement'
   , add: 'Add'
   , add_hosts: 'Add new rules'
   , auto_launch: 'Run at login'
@@ -88,6 +89,7 @@ exports.content = {
   , set_and_relaunch_app: 'Set and Relaunch'
   , should_restart_after_change_language: 'Relaunch to enable the new language interface.'
   , show_dock_icon: 'Show Dock Icon'
+  , source_code: 'Source Code'
   , sudo_pswd: 'Password'
   , sys_hosts_title: 'System Hosts'
   , tmp_clean: 'Temporarily turn off all rules.'

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "switchhosts",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "description": "Switch hosts quickly!",
   "main": "main.js",
   "scripts": {

app/version.js

@@ -1 +1 @@
-exports.version = [3,3,5,5272];
+exports.version = [3,3,6,5275];

gulpfile.js

@@ -11,7 +11,7 @@
  * 也可手动从 https://github.com/electron/electron/releases 下载最新版本，放到 ~/.electron 目录下
  * 淘宝镜像：https://npm.taobao.org/mirrors/electron/
  */
-const ELECTRON_VERSION = '1.6.7'
+const ELECTRON_VERSION = '1.6.10'
 
 const fs = require('fs')
 const path = require('path')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "switchhosts",
-  "version": "3.3.5",
+  "version": "3.3.6",
   "description": "Homepage: [https://oldj.github.io/SwitchHosts/](https://oldj.github.io/SwitchHosts/)",
   "main": "",
   "scripts": {

ui/about/About.jsx

@@ -9,6 +9,8 @@ import React from 'react'
 import { Modal, Button } from 'antd'
 import Agent from '../Agent'
 import './About.less'
+import logo from '../../app/assets/[email protected]'
+import { version } from '../../app/version'
 
 export default class About extends React.Component {
   constructor (props) {
@@ -31,27 +33,65 @@ export default class About extends React.Component {
     })
   }
 
+  openUrl (url) {
+    Agent.pact('openUrl', url)
+  }
+
   componentDidMount () {
     Agent.on('show-about', () => {
       this.show()
     })
+
+    let links = this.refs.content.querySelectorAll('a')
+    links = Array.from(links)
+    links.map(a => {
+      a.onclick = () => {
+        this.openUrl(a.href)
+        return false
+      }
+    })
   }
 
   render () {
     let {lang} = this.props
+    let ver = `v${version.slice(0, 3).join('.')} (${version[3]})`
 
     return (
       <Modal
         visible={this.state.visible}
         width="360"
-        //onOk={this.handleOk}
         onCancel={this.hide.bind(this)}
         wrapClassName="frame"
+        closable={false}
         footer={[
-          <Button key="back" size="large" onClick={this.hide.bind(this)}>{lang.close}</Button>,
+          <Button key="back" size="large" onClick={this.hide.bind(this)}>{lang.close}</Button>
         ]}
       >
-        <p>Some contents...</p>
+        <div className="about-content">
+          <div className="logo">
+            <img src={logo} alt=""/>
+          </div>
+          <div className="content" ref="content">
+            <h2>SwitchHosts!</h2>
+            <div className="version">{ver}</div>
+            <div>
+              <a href="https://oldj.github.io/SwitchHosts/" target="_blank">{lang.homepage}</a>
+              <a href="https://github.com/oldj/SwitchHosts" target="_blank">{lang.source_code}</a>
+            </div>
+            <p className="br"/>
+            <div>
+              <h3>{lang.acknowledgement}:</h3>
+              <div>
+                <a href="https://github.com/allenm" target="_blank">Allen.M</a>
+                <a href="https://github.com/charlestang" target="_blank">Charles Tang</a>
+                <a href="https://github.com/stotem" target="_blank">WuJianjun</a>
+                <a href="https://github.com/ElfSundae" target="_blank">Elf Sundae</a>
+                <a href="https://github.com/codeyu" target="_blank">zhu yu</a>
+                <a href="https://github.com/pangliang" target="_blank">胖梁</a>
+              </div>
+            </div>
+          </div>
+        </div>
       </Modal>
     )
   }

ui/about/About.less

@@ -1,3 +1,51 @@
-.about-frame {
+.about-content {
+  .logo {
+    text-align: center;
+    margin: 10px 0;
 
+    img {
+      width: 64px;
+      height: 64px;
+    }
+  }
+
+  .content {
+    text-align: center;
+    width: 60%;
+    margin: 0 auto;
+    font-size: 12px;
+    white-space: normal;
+
+    h2, h3 {
+      font-size: 14px;
+      margin: 0;
+      padding: 0;
+    }
+
+    h3 {
+      font-size: 12px;
+      line-height: 30px;
+    }
+
+    a {
+      margin: 0 5px;
+      display: inline-block;
+
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .version {
+      color: #999;
+      margin-bottom: 5px;
+    }
+
+    .br {
+      height: 10px;
+    }
+  }
 }