Redesign the about page

重新设计关于页面

source/language/en.jsx

@@ -383,7 +383,11 @@ module.exports = {
   },
   settings: {
     about: {
-      title: 'About'
+      title: 'About',
+      header: 'AntSword',
+      homepage: 'Home',
+      document: 'Document',
+      qqgroup: 'QQ Group'
     },
     language: {
       title: 'Language setting',

source/language/zh.jsx

@@ -384,7 +384,11 @@ module.exports = {
   },
   settings: {
     about: {
-      title: '关于程序'
+      title: '关于程序',
+      header: '中国蚁剑',
+      homepage: '主页',
+      document: '文档',
+      qqgroup: 'Q群'
     },
     language: {
       title: '语言设置',

source/modules/settings/about.jsx

@@ -2,7 +2,7 @@
  * 设置中心::关于
  */
 
-const LANG = antSword['language']['settings'];
+const LANG = antSword['language']['settings']['about'];
 
 class About {
 
@@ -10,19 +10,19 @@ class About {
     sidebar.addItem({
       id: 'about',
       selected: true,
-      text: `<i class="fa fa-heart-o"></i> ${LANG['about']['title']}`
+      text: `<i class="fa fa-heart-o"></i> ${LANG['title']}`
     });
     const cell = sidebar.cells('about');
     cell.attachHTMLString(`
       <div align="center" class="about">
         <img src="../static/imgs/logo.png" />
         <hr/>
-        <h2>中国蚁剑</h2>
+        <h2>${LANG['header']}<span> v${antSword['package']['version']}</span></h2>
         <p>
           <a href="https://github.com/antoor/antSword"><i class="fa fa-github-alt"></i> GitHub</a> /
-          <a href="http://uyu.us"><i class="fa fa-home"></i> 主页</a> /
-          <a href="http://doc.uyu.us"><i class="fa fa-book"></i> 文档</a> /
-          <a href="http://shang.qq.com/wpa/qunwpa?idkey=51997458a52d534454fd15e901648bf1f2ed799fde954822a595d6794eadc521"><i class="fa fa-qq"></i> Q群</a>
+          <a href="http://uyu.us"><i class="fa fa-home"></i> ${LANG['homepage']}</a> /
+          <a href="http://doc.uyu.us"><i class="fa fa-book"></i> ${LANG['document']}</a> /
+          <a href="http://shang.qq.com/wpa/qunwpa?idkey=51997458a52d534454fd15e901648bf1f2ed799fde954822a595d6794eadc521"><i class="fa fa-qq"></i> ${LANG['qqgroup']}</a>
         </p>
       </div>
     `);

static/css/index.css

@@ -190,6 +190,10 @@ html, body, #container, #loading {
 .about > p {
   color: #ececec;
 }
+.about > h2 > span {
+  font-size: 14px;
+  color: #9E9E9E;
+}
 .about a {
   text-decoration: blink;
   color: #795548;