refactor: 根证书安装提示

packages/gui/src/background.js

@@ -74,7 +74,7 @@ function createWindow () {
   // Create the browser window.
   win = new BrowserWindow({
     width: 900,
-    height: 700,
+    height: 750,
     title: 'DevSidecar',
     webPreferences: {
       enableRemoteModule: true,

packages/gui/src/bridge/index.js

@@ -24,14 +24,18 @@ const localApi = {
    */
   setting: {
     load () {
-      const settingPath = _getSettingPath()
+      const settingPath = _getSettingsPath()
+      if (!fs.existsSync(settingPath)) {
+        return {}
+      }
       const file = fs.readFileSync(settingPath)
-      const settings = JSON5.parse(file.toString())
+      const setting = JSON5.parse(file.toString())
-      return settings || {}
+      console.log('read file,', file.toString(), setting)
+      return setting || {}
     },
-    save (settings = {}) {
+    save (setting = {}) {
-      const settingPath = _getSettingPath()
+      const settingPath = _getSettingsPath()
-      fs.writeFileSync(settingPath, JSON5.stringify(settings, null, 2))
+      fs.writeFileSync(settingPath, JSON5.stringify(setting, null, 2))
     }
   },
   /**
@@ -98,7 +102,7 @@ function _deepFindFunction (list, parent, parentKey) {
   }
 }
 
-function _getSettingPath () {
+function _getSettingsPath () {
   const dir = './config/'
   if (!fs.existsSync(dir)) {
     fs.mkdirSync(dir)

packages/gui/src/main.js

@@ -16,11 +16,10 @@ Vue.component(DsContainer)
 const router = new VueRouter({
   routes // (缩写) 相当于 routes: routes
 })
-Vue.prototype.$global = {}
+
 view.initApi().then(async (api) => {
-  Vue.prototype.$api = api
   // 初始化status
-  await view.initPre(api)
+  await view.initPre(Vue, api)
   const app = new Vue({
     router,
     render: h => h(App)

packages/gui/src/view/components/settings.vue

@@ -102,7 +102,7 @@ import vueJsonEditor from 'vue-json-editor'
 import lodash from 'lodash'
 import api from '../api'
 export default {
-  name: 'settings',
+  name: 'setting',
   components: {
     vueJsonEditor
   },

packages/gui/src/view/components/setup-ca.vue

@@ -5,7 +5,7 @@
     :visible="visible"
     :after-visible-change="afterVisibleChange"
     @close="onClose"
-    width="650px"
+    width="660px"
     height="100%"
     :slots="{ title: 'title' }"
     wrapClassName="json-wrapper"
@@ -14,6 +14,10 @@
       {{title}}
       <a-button type="primary" style="float:right" @click="doSetup()">点此去安装</a-button>
     </template>
+    <div>
+      请按如下步骤将<b>本地随机生成</b>的根证书添加到<b>信任的根证书颁发机构</b><br/>
+      证书是本地随机生成，所以信任它是安全的
+    </div>
     <img width="100%" src="/setup.png" />
 
   </a-drawer>
@@ -50,8 +54,9 @@ export default {
     onClose () {
       this.$emit('update:visible', false)
     },
-    doSetup () {
+    async doSetup () {
-      api.shell.setupCa()
+      await api.shell.setupCa()
+      this.$emit('setup')
     }
   }
 }

packages/gui/src/view/index.js

@@ -3,7 +3,10 @@ import modules from './modules'
 import status from './status'
 export default {
   initApi: apiInit,
-  async initPre (api) {
+  async initPre (Vue, api) {
+    Vue.prototype.$api = api
+    const setting = await api.setting.load()
+    Vue.prototype.$global = { setting }
     await status.install(api)
   },
   initModules (app) {

packages/gui/src/view/pages/index.vue

@@ -3,10 +3,17 @@
     <template slot="header">
       给开发者的辅助工具
       <span>
-          <a-button style="margin-right:10px" @click="openSetupCa">安装根证书</a-button>
+
-         <a-badge :count="update.newVersion?1:0" dot>
+          <a-button style="margin-right:10px" @click="openSetupCa">
-          <a-button style="margin-right:10px" @click="doCheckUpdate">检查更新</a-button>
+            <a-badge :count="_rootCaSetuped?0:1" dot>安装根证书 </a-badge>
-         </a-badge>
+          </a-button>
+
+          <a-button style="margin-right:10px" @click="doCheckUpdate">
+            <a-badge :count="update.newVersion?1:0" dot>
+              检查更新
+            </a-badge>
+          </a-button>
+
       </span>
     </template>
 
@@ -35,7 +42,7 @@
       </div>
 
     </div>
-    <setup-ca title="安装证书" :visible.sync="setupCa.visible"></setup-ca>
+    <setup-ca title="安装证书" :visible.sync="setupCa.visible" @setup="handleCaSetuped"></setup-ca>
   </ds-container>
 
 </template>
@@ -51,6 +58,14 @@ export default {
     DsContainer,
     setupCa
   },
+  computed: {
+    _rootCaSetuped () {
+      if (this.setting && this.setting.rootCa) {
+        return this.setting.rootCa.setuped === true
+      }
+      return false
+    }
+  },
   data () {
     return {
       status: undefined,
@@ -67,6 +82,7 @@ export default {
           }
         }
       },
+      setting: undefined,
       server: {
         key: '代理服务',
         loading: false,
@@ -83,6 +99,7 @@ export default {
     }
   },
   async created () {
+    this.doCheckRootCa()
     console.log('index created', this.status, this.$status)
     await this.reloadConfig()
     const status = await this.$api.status.get()
@@ -106,6 +123,40 @@ export default {
     console.log('index mounted')
   },
   methods: {
+    doCheckRootCa () {
+      this.$api.setting.load().then(setting => {
+        console.log('setting', setting)
+        this.setting = setting
+        if (this.setting.rootCa && (this.setting.rootCa.setuped || this.setting.rootCa.noTip)) {
+          return
+        }
+        this.$confirm({
+          title: '提示',
+          content: '第一次使用，请先安装CA根证书',
+          cancelText: '关闭此提示',
+          okText: '去安装',
+          onOk: () => {
+            this.openSetupCa()
+          },
+          onCancel: () => {
+            this.setting.rootCa = this.setting.rootCa || {}
+            const rootCa = this.setting.rootCa
+            rootCa.noTip = true
+            this.$api.setting.save(this.setting)
+          }
+        })
+      })
+    },
+    openSetupCa () {
+      this.setupCa.visible = true
+    },
+    handleCaSetuped () {
+      this.setting.rootCa = this.setting.rootCa || {}
+      const rootCa = this.setting.rootCa
+      rootCa.setuped = true
+      this.$set(this, 'setting', this.setting)
+      this.$api.setting.save(this.setting)
+    },
     reloadConfig () {
       return this.$api.config.reload().then(ret => {
         this.config = ret
@@ -161,7 +212,7 @@ export default {
       this.apiCall(this.startup, this.$api.startup)
     },
     openSettings () {
-      this.settings.visible = true
+      this.setting.visible = true
     },
     onConfigChanged (newConfig) {
       console.log('config changed', newConfig)
@@ -171,9 +222,6 @@ export default {
         }
       })
     },
-    openSetupCa () {
-      this.setupCa.visible = true
-    },
     doCheckUpdate (fromUser = true) {
       this.update.fromUser = fromUser
       this.$api.update.checkForUpdate(this.update)