它的原理其实就是从配置项里面读取到表单的选项，构造出表单，然后当修改的时候，通过统一的 IPC 信道，将修改的 key 和 value 发送回去。

新建定义文件

  2.   const all: any
  3.   const init: any
  4.   const store: any
  5.   export { init, store }
  6.   export default all
  7. }

store 的方法全部来自于 electron-store

新建 tray.ts 文件，将配置项传递给 init，而 create 则是创建窗口的函数，第一个是参数配置项，第二个参数是是否开启 DEBUG 模式，这里我们开启它。

  1. import create, { init, store } from 'electron-auto-setting'
  2. import { app, Tray, Menu } from 'electron'
  3. import { resolve } from 'path'
  4. import { fromEvent } from 'rxjs'
  6. let win = null
  7. let tray = null
  9. let setting = [
  10.   {
  11.     icon: 'icon-setting',
  12.     label: '普通设置',
  13.     configs: {
  14.       SAVA_PATH: {
  15.         type: 'path',
  16.         label: ' 输出路径',
  17.         defaultValue: resolve(app.getPath('home'), 'xiaoshuo')
  18.       },
  19.       CONCURRENCE: {
  20.         type: 'string',
  21.         label: '下载并发量',
  22.         defaultValue: 5
  23.       }
  24.     }
  25.   },
  26.   {
  27.     icon: 'icon-download',
  28.     label: 'API 设置',
  29.     configs: {
  30.       APP_ID: {
  31.         type: 'string',
  32.         label: '应用 ID',
  33.         defaultValue: ''
  34.       },
  35.       API_KEY: {
  36.         type: 'string',
  37.         label: '应用秘钥',
  38.         defaultValue: ''
  39.       },
  40.       SECRET_KEY: {
  41.         type: 'string',
  42.         label: '加密秘钥',
  43.         defaultValue: ''
  44.       }
  45.     }
  46.   }
  47. ]
  49. init(setting)
  51.   win = create({}, true)
  52. }
  54. fromEvent(<any>app, 'ready').subscribe(() => {
  56.   const contextMenu = Menu.buildFromTemplate([
  57.     { label: '设置', click: opensetting }
  58.   ])
  59.   tray.setContextMenu(contextMenu)
  60. })
  62. export { store, tray, win }

当 app ready 的时候，我们创建一个通知栏的小图标，这个小图标是 24x24 大小的 png 图片，我是从 下载的，大家可以自行下载。

读取配置

在 index.ts 中 ，记得使用了 await ，一定要给函数加上 async 哦。此时可以把 on 函数提取到 helper 里面去，具体请看仓库源码。

  1. import { store } from './tray'
  3. const { folderName, url } = args
  4. const savePath = resolve(
  5.   store.get('SAVA_PATH', app.getPath('music')),
  6.   folderName
  7. )
  9. await download(url, plugin, { path: savePath })
  10. await transform(savePath)

修改 download.ts ，让默认的配置项可以读取到并发量。

修改 TTS.ts ，我们不希望每次设置完要重启，这里我们订阅一下更新。

  1. let APP_ID = store.get('APP_ID')
  2. let API_KEY = store.get('API_KEY')
  3. let SECRET_KEY = store.get('SECRET_KEY')
  5. // 每次修改更新值
  6. store.onDidChange('APP_ID', (newValue: any) => (APP_ID = newValue))
  7. store.onDidChange('API_KEY', (newValue: any) => (API_KEY = newValue))
  8. store.onDidChange('SECRET_KEY', (newValue: any) => (SECRET_KEY = newValue))
  10. let client: any = null
  12. try {
  13.   client = new speech(APP_ID, API_KEY, SECRET_KEY)
  14. } catch (e) {
  15.   log({ type: 'audio', step: 'new_speech_error', message: e.message })
  16. }

新建 Download.svelte , 然后像之前一样，在 App.svlete 里面引入并设置值。

  1. <input bind:value=folderName />
  2. <input bind:value=url />
  3. <button on:click="download()">下载</button>
  4. <button on:click="stop()">中断</button>
  6. <script>
  7.     import {
  8.         ipcRenderer
  9.     } from 'electron'
  10.     export default {
  11.         data() {
  12.             return {
  13.                 url: '',
  14.                 folderName: ''
  15.             }
  16.         },
  17.         methods: {
  18.             download() {
  19.                 const {
  20.                     url,
  21.                     folderName
  22.                 } = this.get()
  23.                 if (url.length && folderName.length) {
  24.                     console.log(url);
  26.                         url,
  27.                         folderName
  28.                     })
  29.                 }
  30.             },
  31.             stop() {
  32.                 ipcRenderer.send('stop') // 发送停止事件信号
  33.             }
  34.         }
  35.     }
  36. </script>

中断处理函数

修改 helper.ts，此时你的 helper 应该会像下面这样，中断了的时候，我们应该把下载的给删除，这样可以保证目录的干净。

  1. import { Subject } from 'rxjs'
  2. import { ipcMain as ipc } from 'electron'
  3. import { store } from './tray'
  4. import { remove } from 'fs-extra'
  5. import log from './statusLog'
  7. function ready() {
  8.   let resolveFN, rejectFN
  9.   let promise = new Promise(
  10.     (resolve, reject) => ([resolveFN, rejectFN] = [resolve, reject])
  11.   )
  12.   return [resolveFN, rejectFN, promise]
  13. }
  15. interface CombineEvent {
  16.   event: any
  17.   args: any
  18. }
  20. function on(channel: string): Subject<CombineEvent> {
  21.   const eventListner = new Subject<CombineEvent>()
  22.   ipc.on(channel, (event: any, args: any) => eventListner.next({ event, args }))
  23.   return eventListner
  24. }
  26. async function handleStop(path: string, logInfo: any) {
  27.   if (store.get('stop')) {
  28.     path && (await remove(path)) // 删除目录
  29.     log(logInfo)
  30.     return true
  31.   }
  32.   return false
  33. }
  35. export { ready, on, handleStop }

修改 download.ts 在循环里面添加跳出代码，并发送消息显示给前端

同样修改 TTS.ts ，添加跳出代码

  1. if (
  2.   await handleStop(chapterSavePath, {
  3.     type: 'stop',
  4.     message: '已停止该队列'
  5.   })
  6. ) {
  7.   break
  8. }

那么在开始与结束的时候应该添加重置信号量的代码

  1. store.set('stop', false)
  2. await download(url, plugin, { path: savePath })
  3. await transform(savePath)
  4. store.set('stop', false)
  1. on('stop').subscribe(() => {
  2.   store.set('stop', true)
  3. })