应用商店

    svelte 包含一些额外的组件，从里面我们导入一些动画和辅助方法（数组推入，删除、补间动画等等）。

    1. import { ipcRenderer as ipc, shell } from 'electron'
    2. import marked from 'marked'
    3. import { fade } from 'svelte-transitions'
    4. import { push, splice } from 'svelte-extras'

    添加 helper

    destroy 的时候一定要移除监听，要不然会造成内存泄露。

    1. export default {
    2.   data() {
    3.     return {
    4.       local_plugins: [], // 本地插件
    5.       all_plugins: [], // 所有插件
    6.       infoIndex: -1, // 展开详情
    7.       workingFilename: [] // 操作中文件
    8.     }
    9.   },
    10.   components: {
    11.     Back: '../components/Back.svelte'
    12.   },
    13.   helpers: {
    14.     marked, // markdown 处理
    15.     inWorking // 是否处理中
    16.   },
    17.   transitions: {
    18.     fade
    19.   },
    20.   computed: {
    21.     plugins: ({ all_plugins, local_plugins }) =>
    22.       addDownloaed(all_plugins, local_plugins)
    23.   },
    24.   methods: {
    25.     push,
    26.     splice,
    27.     showInfo(index) {
    28.       // 显示某一个插件介绍
    29.       const oldIndex = this.get().infoIndex
    30.       if (oldIndex == index) {
    31.         return this.set({
    32.           infoIndex: -1
    33.         })
    34.       }
    35.       this.set({
    36.         infoIndex: index
    37.       })
    38.     },
    39.     refresh() {
    40.       // 刷新
    41.       ipc.send('reload_local_plugins')
    42.       ipc.send('reload_all_plugins')
    43.     },
    44.     download(filename, url) {
    45.       // 下载插件
    46.       if (inWorking(this.get().workingFilename, filename)) {
    47.         return
    48.       }
    49.       this.push('workingFilename', filename)
    51.         filename,
    52.         url
    53.       })
    54.     },
    55.     del(filename) {
    56.       // 删除插件
    57.       if (inWorking(this.get().workingFilename, filename)) {
    58.         return
    59.       }
    60.       this.push('workingFilename', filename)
    61.       this.store.setMsg('info', `删除插件中`)
    62.       ipc.send('delete_plugin', {
    63.         filename
    64.       })
    65.     },
    66.     all_plugins(event, all_plugins) {
    67.       this.set({
    68.         all_plugins
    69.       })
    70.     },
    71.     local_plugins(event, local_plugins) {
    72.       this.set({
    73.         local_plugins
    74.       })
    75.     },
    76.     download_plugin_success(event, filename) {
    77.       // 下载成功
    78.       const filenames = this.get().workingFilename || []
    79.       let index = filenames.indexOf(filename)
    80.       if (index >= 0) {
    81.         this.splice('workingFilename', index, 1)
    82.       }
    83.       if (this.get().workingFilename == 0) this.store.success('下载完成')
    84.     },
    85.     delete_plugin_success(event, filename) {
    86.       // 删除成功
    87.       const filenames = this.get().workingFilename || []
    88.       let index = filenames.indexOf(filename)
    89.       if (index >= 0) {
    90.         this.splice('workingFilename', index, 1)
    91.       }
    92.       if (this.get().workingFilename == 0) this.store.success('删除完成')
    93.     }
    94.   },
    95.   ondestroy() {
    96.     // 清理监听
    97.     ipc.removeListener('all_plugins', this.all_plugins.bind(this))
    98.     ipc.removeListener('local_plugins', this.local_plugins.bind(this))
    99.     ipc.removeListener(
    100.       'download_plugin_success',
    101.       this.download_plugin_success.bind(this)
    102.     )
    103.     ipc.removeListener(
    104.       'delete_plugin_success',
    105.       this.delete_plugin_success.bind(this)
    106.     )
    107.   },
    108.   oncreate() {
    109.     ipc.send('get_all_plugins')
    110.     ipc.send('get_local_plugins')
    112.     ipc.on('all_plugins', this.all_plugins.bind(this))
    113.     ipc.on('local_plugins', this.local_plugins.bind(this))
    114.     ipc.on('download_plugin_success', this.download_plugin_success.bind(this))
    115.     ipc.on('delete_plugin_success', this.delete_plugin_success.bind(this))
    117.     this.refs.list.addEventListener(
    118.       // 处理点击事件，外部浏览器打开
    119.       'click',
    120.       e => {
    121.         if (e.target.tagName.toLowerCase() == 'a') {
    122.           e.preventDefault()
    123.           shell.openExternal(e.target.href)
    124.         }
    125.       },
    126.       true
    127.     )
    128.   }
    129. }

    样式

    1. <div class="wrap">
    2.     <Link className="download-page-btn" to="Download">下载页面</Link>
    3.     <Link className="music-page-btn" to="Music">播放器</Link>
    4.     <Link className="store-page-btn" to="CrawlStore">爬虫商店</Link>
    5. </div>
    7. <script>
    8.     export default {
    9.         components: {
    10.             Link: '../components/Link.svelte'
    11.         },
    12.     };
    13. </script>
    15. <style>
    16.     .wrap {
    17.         display: flex;
    18.         height: 100vh;
    19.         flex-wrap: wrap;
    20.         background: #333;
    21.     }
    23.     .wrap :global(a) {
    24.         display: inline-flex;
    25.         width: 50%;
    26.         text-decoration: none;
    27.         justify-content: center;
    28.         align-items: center;
    29.         color: #fff;
    30.         font-size: 1rem;
    31.         letter-spacing: 5px;
    32.         transition: all .2s;
    33.     }
    35.     .wrap :global(a):hover {
    36.         background: #fb584c
    38. </style>

    修改窗口创建参数

    创建一个无边框的应用。