本章修改的内容比较多，因为牵扯了比较多的前端样式，可以运行的代码在 大家可以对照查漏补缺。

前端优化

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

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

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

  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. </body>

添加全局消息组件

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

添加好这些方法，当然别忘记在 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.success = success.bind(store)

修改 App.svelte

就像手机端回退的按钮一样，新建 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.     }