首先我们来看效果。

gif

 本章修改的内容比较多，因为牵扯了比较多的前端样式，可以运行的代码在这里下载与删除（上） - 图2 大家可以对照查漏补缺。

接受下载和删除信号

首先对 plugins.ts 进行更新，添加相应的处理逻辑，为了避免错漏，笔者把所有代码都贴了出来。这里对之前的一些方法做了简单的更新。对于监听的事件可以通过 emit 触发，因为继承 EventEmitter 类。当我们刷新或者下载的时候我们都需要更新缓存。

  1. import { app, ipcMain } from 'electron'
  2. import { resolve } from 'path'
  3. import { readdirSync, ensureDirSync, writeFile, remove } from 'fs-extra'
  4. import requireFoolWebpack from 'require-fool-webpack'
  5. import { store } from './tray'
  6. import { promisified } from 'phin'
  7. import { on } from './helper'
  9. const pluginsPath = store.get(
  10.   'PLUGIN_PATH',
  11.   resolve(app.getPath('home'), '.reader-app-scripts')
  12. )
  13. ensureDirSync(pluginsPath)
  15. // https://github.com/webpack/webpack/issues/196
  16. // https://github.com/sindresorhus/require-fool-webpack
  18. const loadPlugins = () => {
  19.   let files = readdirSync(pluginsPath)
  20.   return [
  21.     files,
  22.     files.map(filename =>
  23.       requireFoolWebpack(resolve(pluginsPath, filename))(requireFoolWebpack)
  24.     )
  25.   ]
  26. }
  27. const saveToSetting = (all?: any) => {
  28.   const [files, _] = loadPlugins()
  29.   store.set('LOACAL_PLUGINS', files)
  30.   all && ipcMain.emit('get_local_plugins', all.event, all.args)
  31. }
  33. saveToSetting()
  35. on('reload_local_plugins').subscribe(saveToSetting)
  36. on('get_local_plugins').subscribe(({ event, args }) => {
  37.   event.sender.send('local_plugins', store.get('LOACAL_PLUGINS', []))
  38. })
  40. const storeURL =
  41.   'https://raw.githubusercontent.com/MiYogurt/reader-store/master/db.json'
  43. const fetchAllPlugins = (event: any) => {
  44.   promisified(storeURL).then((res: any) => {
  45.     let db = []
  46.     try {
  47.       db = JSON.parse(res.body.toString())
  48.     } catch (e) {}
  49.     event.sender.send('all_plugins', db)
  50.     store.set('ALL_PLUGINS', db)
  51.   })
  52. }
  54. on('reload_all_plugins').subscribe(async ({ event, args }) => {
  55.   await fetchAllPlugins(event)
  56.   ipcMain.emit('get_all_plugins', event, args)
  57. })
  59. on('get_all_plugins').subscribe(({ event, args }) => {
  60.   const db = store.get('ALL_PLUGINS', [])
  61.   if (db.length > 0) {
  62.     return event.sender.send('all_plugins', db)
  63.   }
  64.   fetchAllPlugins(event.sender.send)
  65. })
  67. // 下载插件
  68. on('download_plugin').subscribe(async ({ event, args }) => {
  69.   const { filename, url } = args
  70.   await promisified(url)
  71.     .then(({ body }) => body.toString())
  72.     .then(data => (console.log(data), data)) // 查看一下数据内容
  73.     .then(data => writeFile(pluginsPath + '/' + filename, data)) // 写入插件
  74.   ipcMain.emit('reload_local_plugins', event, args) // 刷新
  75.   event.sender.send('download_plugin_success', filename)
  76. })
  78. // 删除插件
  79. on('delete_plugin').subscribe(async ({ event, args }) => {
  80.   const { filename } = args
  81.   await remove(pluginsPath + '/' + filename)
  82.   ipcMain.emit('reload_local_plugins', event, args) // 刷新
  83.   event.sender.send('delete_plugin_success', filename)
  84. })
  86. export default loadPlugins

前端优化

首先我们安装一下依赖，transitions 里面是动画指令，extras 里面是帮助方法，比如数组的 push。

  1. npm install --save svelte-transitions svelte-extras

修改 package.json，添加打包白名单。

  1. "whiteListedModules": [
  2.     "marked",
  3.     "svelte-transitions",
  4.     "svelte-extras"
  5. ],

自定义模板

新建 src/index.ejs ，文档里面没有说明如何自定义模板，但是源码里面有处理逻辑。-webkit-app-region 是为了让无边框的 App 可以支持拖动。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>App</title>
  9.     <style>
  10.         html {
  11.             background: #fff;
  12.             -webkit-app-region: drag
  13.         }
  15.         * {
  16.             font-family: "PingFang SC";
  17.             margin: 0;
  18.             padding: 0;
  19.             box-sizing: border-box;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <div id="app"></div>
  26. </body>
  28. </html>

添加全局消息组件

新建 compoennts/Tip.svelte，这个用于全局消息提示。

  1. {#if $msg.content.length}
  2. <p class={$msg.type} transition:slide>{$msg.content}</p>
  3. {/if}
  5. <script>
  6.     import {
  7.         slide
  8.     } from 'svelte-transitions'
  9.     export default {
  10.         transitions: {
  11.             slide
  12.         },
  13.     }
  14. </script>
  15. <style>
  16.     .info {
  17.         background: #6633FF;
  18.     }
  20.     .warring {
  21.         background: #FF9900;
  22.     }
  24.     .success {
  25.         background: #4BCB7C;
  26.     }
  28.     p {
  29.         line-height: 60px;
  30.         text-align: center;
  31.         color: #fff;
  32.         font-size: .9rem;
  33.         letter-spacing: 5px;
  34.         cursor: default;
  35.         user-select: none;
  36.         display: block;
  37.         transition: background .5s;
  38.     }
  40.     @keyframes flash {
  41.         0% {
  42.             opacity: 0;
  43.         }
  44.         100% {
  45.             opacity: 1;
  46.         }
  47.     }
  49.     p::after,
  50.     p::before {
  51.         animation: flash .7s ease-in infinite alternate
  52.     }
  54.     p::after {
  55.         content: '·'
  56.     }
  58.     p::before {
  59.         content: '·'
  60.     }
  61. </style>

定义全局状态

添加好这些方法，当然别忘记在 store 里面初始化 msg，这些都是提示消息的帮助方法。

  1. function setMsg(type, content) {
  2.   store.set({
  3.     msg: {
  4.       type,
  5.       content
  6.     }
  7.   })
  8. }
  10. function resetMsg() {
  11.   store.set({
  12.     msg: {
  13.       type: 'info',
  14.       content: ''
  15.     }
  16.   })
  17. }
  19. function success(content, timer = 1000) {
  20.   store.set({
  21.     msg: {
  22.       type: 'success',
  23.       content
  24.     }
  25.   })
  26.   setTimeout(resetMsg, timer)
  27. }
  29. store.setMsg = setMsg.bind(store)
  30. store.success = success.bind(store)

修改 App.svelte

添加全局提示组件

  1. <Tip/>
  2. <svelte:component this="{$currentPage}" name="page" />
  4. <script>
  5.     export default {
  6.         components: {
  7.             Tip: './components/Tip.svelte'
  8.         },
  9.     };
  10. </script>

添加回退按钮

就像手机端回退的按钮一样，新建 components/Back.svelte，这里的按钮我们通过 css 画出来。

  1. <Link className="back" to="Main"><i class="back-icon"></i></Link>
  3. <script>
  4.     export default {
  5.         components: {
  6.             Link: './Link.svelte'
  7.         }
  8.     }
  9. </script>
  11. <style>
  12.     .back-icon {
  13.         border-left: 4px solid #fff;
  14.         border-bottom: 4px solid #fff;
  15.         display: inline-block;
  16.         width: 15px;
  17.         height: 15px;
  18.         border-radius: 2px;
  19.         transform: rotate(45deg);
  20.         margin: 8px 8px 8px 0.8rem;
  21.     }
  23.      :global(.back) {
  24.         width: 100%;
  25.         height: 60px;
  26.         background: #383A41;
  27.         display: flex;
  28.         align-items: center;
  29.     }
  30. </style>