From 1e50e5058b658b2a5209f9bbb3c18fb7cc3e4290 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Thu, 12 Nov 2020 18:32:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0gitee=20github?=
 =?UTF-8?q?=E5=BE=BD=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              | 63 ++------------------------
 packages/gui/src/view/App.vue          |  7 +--
 packages/gui/src/view/api.js           |  8 +++-
 packages/gui/src/view/pages/index.vue  | 40 +++++++++++-----
 packages/gui/src/view/style/index.scss | 11 +++++
 5 files changed, 53 insertions(+), 76 deletions(-)

diff --git a/README.md b/README.md
index 68e01567..18b08af1 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,9 @@ recaptcha 图片验证码加速
 暂时只支持windows    
  
 #### 1.1 下载安装包  
-[点此去下载](https://dev-sidecar.docmirror.cn/update/DevSidecar-1.0.2.exe)        
+[点此去下载](https://dev-sidecar.docmirror.cn/update/DevSidecar-1.0.2.exe)  
+安装后打开： 
+![](./doc/index.png)     
 #### 1.2 安装根证书     
 第一次打开会提示安装根证书    
 #### 1.3 开始加速吧      
@@ -46,69 +48,12 @@ recaptcha 图片验证码加速
 `Download ZIP`、`Release` 下载试试，体验秒下的感觉    
 比如去下载它： https://github.com/greper/d2-crud-plus/archive/master.zip    
 
-![](./doc/index.png)
+
 
 #### 开启前vs 开启后  
 ![](./doc/avatar2.png)
 ![](./doc/avatar1.png)
 
-
-### 2、命令行方式 
-此方式适用于nodejs开发者  
-
-1. 安装与启动  
-```shell
-git clone https://gitee.com/docmirror/dev-sidecar.git
-cd ./dev-sidecar/packages/core
-npm install
-npm run start
-
-#或使用cnpm
-cnpm install
-npm run start
-
-#或使用yarn
-yarn install
-npm run start
-
-```
-
-输出
-```
-CA Cert saved in: C:\Users\Administrator\.dev-sidecar\dev-sidecar.ca.crt
-CA private key saved in: C:\Users\Administrator\.dev-sidecar\dev-sidecar.ca.key.pem
-
-dev-sidecar启动端口: 1181
-代理已开启, 127.0.0.1 1181
-
-```
-启动后会自动设置系统代理、npm代理   
-
-2. 设置信任根证书    
-
-第一次启动时会本地随机生成一个根证书放在此目录下（由于此证书是本地随机生成的，所以信任它是安全的）   
-```
-# 你的Home路径如果有修改，输出会不一样，请按照实际日志输出路径查看
-CA Cert saved in: C:\Users\Administrator\.dev-sidecar\dev-sidecar.ca.crt
-```
-
-windows用户安装根证书
-```
-start %HOMEPATH%/.dev-sidecar/dev-sidecar.ca.crt
-或者 
-打开`C:\Users\Administrator\.dev-sidecar\`文件夹，双击`dev-sidecar.ca.crt`
-```
-依次点击安装证书->所有用户->将所有证书都放入下列存储->受信任的根证书颁发机构->确定，下一步，确定即可
-
-![](./doc/setup.png)
-
-3. 开始加速吧
-去github上`Download ZIP`、`Release` 下载试试，体验秒下的感觉
-
-比如去下载它： https://github.com/greper/d2-crud-plus/archive/master.zip
-
-
-
 ## 最佳实践
 
 把dev-sidecar一直开着就行了    
diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue
index c8c43d2c..7c636131 100644
--- a/packages/gui/src/view/App.vue
+++ b/packages/gui/src/view/App.vue
@@ -53,13 +53,14 @@ export default {
     return {
       menus: [
         { title: '首页', path: '/index', icon: 'home' },
-        { title: '加速服务', path: '/server' },
-        { title: '系统代理', path: '/proxy' },
+        { title: '加速服务', path: '/server', icon: 'thunderbolt' },
+        { title: '系统代理', path: '/proxy', icon: 'deployment-unit' },
         {
           title: '应用',
           path: '/plugin',
+          icon: 'api',
           children: [
-            { title: 'NPM加速', path: '/plugin/node' }
+            { title: 'NPM加速', path: '/plugin/node', icon: 'like' }
           ]
         }
       ]
diff --git a/packages/gui/src/view/api.js b/packages/gui/src/view/api.js
index 03699a54..f4db65a6 100644
--- a/packages/gui/src/view/api.js
+++ b/packages/gui/src/view/api.js
@@ -1,5 +1,6 @@
 import lodash from 'lodash'
-import { ipcRenderer } from 'electron'
+import { ipcRenderer, shell } from 'electron'
+
 const invoke = (api, args) => {
   return ipcRenderer.invoke('apiInvoke', [api, args]).catch(err => {
     console.error('api invoke error:', err)
@@ -20,7 +21,10 @@ const apiObj = {
     ipcRenderer.on(channel, callback)
   },
   invoke,
-  send
+  send,
+  openExternal (href) {
+    shell.openExternal(href)
+  }
 }
 let inited = false
 
diff --git a/packages/gui/src/view/pages/index.vue b/packages/gui/src/view/pages/index.vue
index bfd0a185..4ed70549 100644
--- a/packages/gui/src/view/pages/index.vue
+++ b/packages/gui/src/view/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-container>
+  <ds-container class="page_index">
     <template slot="header">
       给开发者的辅助工具
       <span>
@@ -17,7 +17,7 @@
       </span>
     </template>
 
-    <div v-if="status" style="display: flex; align-items:center;justify-content:space-around;flex-direction: row">
+    <div v-if="status" style="margin-top:50px;display: flex; align-items:center;justify-content:space-around;flex-direction: row">
       <div style="text-align: center">
         <div class="big_button">
           <a-button shape="circle" :type="startup.type()" :loading="startup.loading" @click="startup.doClick">
@@ -36,13 +36,19 @@
               <a-icon slot="unCheckedChildren" type="close"/>
             </a-switch>
           </a-form-item>
-
         </a-form>
-
       </div>
 
     </div>
     <setup-ca title="安装证书" :visible.sync="setupCa.visible" @setup="handleCaSetuped"></setup-ca>
+    <div slot="footer">
+      <div class="flex-l-r star" style="padding:10px;">
+        <div>如果它解决了你的问题，请不要吝啬你的star哟！ <a-icon type="smile" theme="outlined" /></div>
+        <a @click="openExternal('https://gitee.com/docmirror/dev-sidecar')"><img src='https://gitee.com/docmirror/dev-sidecar/badge/star.svg?theme=dark' alt='star'/></a>
+        <a  @click="openExternal('https://github.com/docmirror/dev-sidecar')"><img alt="GitHub stars" src="https://img.shields.io/github/stars/docmirror/dev-sidecar?logo=github"></a>
+      </div>
+
+    </div>
   </ds-container>
 
 </template>
@@ -225,17 +231,28 @@ export default {
     doCheckUpdate (fromUser = true) {
       this.update.fromUser = fromUser
       this.$api.update.checkForUpdate(this.update)
+    },
+    openExternal (url) {
+      this.$api.openExternal(url)
     }
   }
 }
 </script>
-<style>
+<style lang="scss">
 .page_index {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-  padding-top: 60px;
+
+  .star {
+    >*{
+      margin-right:10px;
+    }
+    a {
+      height: 21px;
+
+      img {
+        height: 21px;
+      }
+    }
+  }
 }
 
 .big_button > button {
@@ -245,11 +262,10 @@ export default {
 }
 
 .big_button > button i {
-  size: 40px
+  size: 40px;
 }
 
 div.ant-form-item {
   margin-bottom: 10px;
 }
-
 </style>
diff --git a/packages/gui/src/view/style/index.scss b/packages/gui/src/view/style/index.scss
index ba1ba300..fe5d9ba6 100644
--- a/packages/gui/src/view/style/index.scss
+++ b/packages/gui/src/view/style/index.scss
@@ -4,6 +4,17 @@
   border-top:#eee 1px solid;
 }
 
+.flex-l-r{
+  align-content:  center;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+.flex-l-r>a{
+  align-content:  center;
+  display: flex;
+  align-items: center
+}
 
 .md-mr-5{margin-right: 5px;}
 .md-mr-10{margin-right: 10px;}