✨ Feature: add server config settings

Author: Molunerfinn

src/background.ts

@@ -561,9 +561,9 @@ ipcMain.on('toggleShortKeyModifiedMode', (evt: IpcMainEvent, val: boolean) => {
   bus.emit('toggleShortKeyModifiedMode', val)
 })
 
-// const shortKeyHash = {
-//   upload: uploadClipboardFiles
-// }
+ipcMain.on('updateServer', () => {
+  server.restart()
+})
 
 const gotTheLock = app.requestSingleInstanceLock()
 

src/main/server/index.ts

@@ -3,11 +3,18 @@ import routers from './routerManager'
 import {
   handleResponse
 } from './utils'
+import picgo from '~/main/utils/picgo'
+import logger from '~/main/utils/logger'
 
 class Server {
   private httpServer: http.Server
-  private port: number = 36677
+  private config: IServerConfig
   constructor () {
+    this.config = picgo.getConfig('settings.server') || {
+      port: 36677,
+      host: '127.0.0.1',
+      enable: true
+    }
     this.httpServer = http.createServer(this.handleRequest)
   }
   private handleRequest = (request: http.IncomingMessage, response: http.ServerResponse) => {
@@ -52,20 +59,31 @@ class Server {
     }
   }
   private listen = (port: number) => {
-    console.log(`server listen at ${port}`)
-    this.httpServer.listen(port, '0.0.0.0').on('error', (err: ErrnoException) => {
+    logger.info(`[PicGo Server] is listening at ${port}`)
+    this.httpServer.listen(port, this.config.host).on('error', (err: ErrnoException) => {
       if (err.errno === 'EADDRINUSE') {
-        console.log(`----- Port ${port} is busy, trying with port ${port + 1} -----`)
-        this.port += 1
-        this.listen(this.port)
+        logger.warn(`[PicGo Server] ${port} is busy, trying with port ${port + 1}`)
+        this.config.port += 1
+        picgo.saveConfig({
+          'settings.server.port': this.config.port
+        })
+        this.listen(this.config.port)
       }
     })
   }
   startup () {
-    this.listen(this.port)
+    if (this.config.enable) {
+      this.listen(this.config.port)
+    }
   }
   shutdown () {
     this.httpServer.close()
+    logger.info('[PicGo Server] shutdown')
+  }
+  restart () {
+    this.config = picgo.getConfig('settings.server')
+    this.shutdown()
+    this.startup()
   }
 }
 

src/renderer/pages/PicGoSetting.vue

@@ -36,6 +36,11 @@
           >
             <el-button type="primary" round size="mini" @click="proxyVisible = true">点击设置</el-button>
           </el-form-item>
+          <el-form-item
+            label="设置Server"
+          >
+            <el-button type="primary" round size="mini" @click="serverVisible = true">点击设置</el-button>
+          </el-form-item>
           <el-form-item
             label="检查更新"
           >
@@ -239,6 +244,55 @@
         <el-button type="primary" @click="confirmLogLevelSetting" round>确定</el-button>
       </span>
     </el-dialog>
+    <el-dialog
+      class="server-dialog"
+      width="60%"
+      title="设置PicGo-Server"
+      :visible.sync="serverVisible"
+      :modal-append-to-body="false"
+    >
+      <div class="notice-text">
+        如果你不知道Server的作用，请阅读文档，或者不用修改配置。
+      </div>
+      <el-form
+        label-position="right"
+        label-width="120px"
+      >
+        <el-form-item
+          label="是否开启Server"
+        >
+          <el-switch
+            v-model="server.enable"
+            active-text="开"
+            inactive-text="关"
+          ></el-switch>
+        </el-form-item>
+        <template v-if="server.enable">
+          <el-form-item
+            label="设置监听地址"
+          >
+            <el-input
+              type="input"
+              v-model="server.host"
+              placeholder="推荐默认地址:127.0.0.1"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="设置监听端口"
+          >
+            <el-input
+              type="number"
+              v-model="server.port"
+              placeholder="推荐默认端口:36677"
+            ></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="cancelServerSetting" round>取消</el-button>
+        <el-button type="primary" @click="confirmServerSetting" round>确定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script lang="ts">
@@ -288,6 +342,7 @@ export default class extends Vue {
   keyBindingVisible = false
   customLinkVisible = false
   checkUpdateVisible = false
+  serverVisible = false
   proxyVisible = false
   customLink = {
     value: db.get('settings.customLink') || '$url'
@@ -309,6 +364,11 @@ export default class extends Vue {
     warn: '提醒-Warn',
     none: '不记录日志-None'
   }
+  server = db.get('settings.server') || {
+    port: 36677,
+    host: '127.0.0.1',
+    enable: true
+  }
   version = pkg.version
   latestVersion = ''
   os = ''
@@ -345,10 +405,6 @@ export default class extends Vue {
   keyDetect (type: string, event: KeyboardEvent) {
     this.shortKey[type] = keyDetect(event).join('+')
   }
-  cancelKeyBinding () {
-    this.keyBindingVisible = false
-    this.shortKey = db.get('settings.shortKey')
-  }
   cancelCustomLink () {
     this.customLinkVisible = false
     this.customLink.value = db.get('settings.customLink') || '$url'
@@ -478,6 +534,27 @@ export default class extends Vue {
     }
     this.form.logLevel = logLevel
   }
+  confirmServerSetting () {
+    this.letPicGoSaveData({
+      'settings.server': this.server
+    })
+    const successNotification = new Notification('设置PicGo-Server', {
+      body: '设置成功'
+    })
+    successNotification.onclick = () => {
+      return true
+    }
+    this.serverVisible = false
+    ipcRenderer.send('updateServer')
+  }
+  cancelServerSetting () {
+    this.serverVisible = false
+    this.server = db.get('settings.server') || {
+      port: 36677,
+      host: '127.0.0.1',
+      enable: true
+    }
+  }
   handleLevelDisabled (val: string) {
     let currentLevel = val
     let flagLevel
@@ -562,4 +639,11 @@ export default class extends Vue {
         margin-left 0
       .confirm-button
         width 100%
+  .server-dialog
+    .notice-text
+      color: #49B1F5
+    .el-dialog__body
+      padding-top: 0
+    .el-form-item
+      margin-bottom: 10px
 </style>

src/universal/types/types.d.ts

@@ -15,6 +15,7 @@ interface ErrnoException extends Error {
   stack?: string;
 }
 
+// Server
 type routeHandler = (ctx: IServerCTX) => Promise<void>
 
 type IHttpResponse = import('http').ServerResponse
@@ -24,6 +25,12 @@ interface IServerCTX {
   [propName: string]: any
 }
 
+interface IServerConfig {
+  port: number
+  host: string,
+  enable: boolean
+}
+
 // Image && PicBed
 interface ImgInfo {
   buffer?: Buffer