第四章 字号、字体设置、主题设置和进度设置功能

.env.development

@@ -0,0 +1 @@
+VUE_APP_RES_URL=http://192.168.197.1:8081

.eslintrc.js

@@ -7,11 +7,33 @@ module.exports = {
     'plugin:vue/essential',
     '@vue/standard'
   ],
+  // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
+  // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
+  // "off" -> 0 关闭规则
+  // "warn" -> 1 开启警告规则
+  //"error" -> 2 开启错误规则
+  // 了解了上面这些，下面这些代码相信也看的明白了
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-trailing-spaces': 'off',
-
+    // 缩进
+    "indent": 0,
+    // 要求或禁止使用分号而不是 ASI（这个才是控制行尾部分号的，）
+    "no-mixed-spaces-and-tabs": [1, "smart-tabs"],
+    "semi": 0,
+    "no-tabs": 0,
+    "space-before-function-paren": [0, "always"],
+    // 强制在注释中 // 或 /* 使用一致的空格
+    "spaced-comment": 0,
+    // always-multiline：多行模式必须带逗号，单行模式不能带逗号
+    "comma-dangle": [1, "never"],
+    // 强制使用一致的反勾号、双引号或单引号
+    "quotes": 0,
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    // 'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-trailing-spaces': 0
   },
   parserOptions: {
     parser: 'babel-eslint'

package.json

@@ -8,9 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "epubjs": "0.3.71",
     "vue": "^2.6.6",
+    "vue-i18n": "^8.9.0",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "web-storage-cache": "^1.0.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.5.0",

src/App.vue

@@ -1,23 +1,14 @@
 <template>
   <div id="app">
-    <span class="text">ABCDEFG</span>
-    <span class="icon-add"></span>
     <router-view/>
   </div>
 </template>
 
 <script>
 /* eslint-disable */
-  import { mapGetters } from 'vuex'
+  
   export default {
-    computed: {
-      ...mapGetters(['test'])     // vuex语法 mapGetters是一个方法,参数当作keys数组？
-    },
-    mounted () {
-      this.$store.dispatch('setTest', 9).then(() => {
-        console.log(this.test)  // this.$store.state.book.test
-      })
-    }
+    
   }
   document.addEventListener('DOMContentLoaded', () => {  // DOM加载完毕后回调
     const html = document.querySelector('html')          // 取到html根元素
@@ -29,11 +20,4 @@
 </script>
 
 <style lang="scss" scoped> /* scoped只在当前文件内有效 */
-  @import "./assets/styles/global";
-  .text {
-    font-family: 'Days One';
-    color: orange;
-    font-size: px2rem(20);
-  }
-
 </style>

src/assets/styles/global.scss

@@ -1,41 +1,5 @@
-@import 'reset';
+@import "reset";
+@import "./mixin";
+@import "./transition.scss"
 
-// 1rem = fontSize px
-// 1px = (1 / fontSize)rem 为什么缩放比例是37.5呢？
-$fontSize: 37.5;
-@function px2rem($px) {
-  @return ($px / $fontSize) + rem;
-}
 
-@mixin center() {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.icon {
-  color: #333;
-  font-size: px2rem(20);
-}
-
-.slide-down-enter, .slide-down-leave-to {
-  transform: translate3d(0, -100%, 0)
-}
-.slide-down-enter-to, .slide-down-leave, .slide-up-enter-to, .slide-up-leave {
-  transform: translate3d(0, 0, 0)
-}
-.slide-down-enter-active, .slide-down-leave-active, .slide-up-enter-active, .slide-up-leave-active, .fade-enter-active, .fade-leave-active, .slide-right-enter-active, .slide-right-leave-active {
-  transition: all .3s linear;
-}
-.slide-up-enter, .slide-up-leave-to {
-  transform: translate3d(0, px2rem(108), 0)
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
-.fade-enter-to, .fade-leave {
-  opacity: 1;
-}
-.slide-right-enter, .slide-right-leave-to {
-  transform: translate3d(-100%, 0, 0);
-}

src/assets/styles/mixin.scss

@@ -0,0 +1,28 @@
+$ratio: 375 / 10;
+@function px2rem($px) {
+  @return ($px / $ratio) + rem;   // rem ? 'rem'? equal?
+}
+
+@mixin center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin left {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+@mixin right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+@mixin ellipsis {
+  text-overflow: ellipsis; // 如果超出使用省略号
+  overflow: hidden;        // 超出部分隐藏
+  white-space: nowrap;     // 不换行
+}

src/assets/styles/transition.scss

@@ -0,0 +1,34 @@
+.slide-down-enter, .slide-down-leave-to {
+    transform: translate3d(0, -100%, 0)
+}
+.slide-down-enter-to, .slide-down-leave, .slide-up-enter-to, .slide-up-leave {
+  transform: translate3d(0, 0, 0)
+}
+.slide-down-enter-active, .slide-down-leave-active, 
+.slide-up-enter-active, .slide-up-leave-active, 
+.fade-enter-active, .fade-leave-active, 
+.slide-right-enter-active, .slide-right-leave-active,
+.popup-slide-up-enter-active, .popup-slide-up-leave-active
+{
+  transition: all .2s linear;
+}
+.slide-up-enter, .slide-up-leave-to {
+  transform: translate3d(0, px2rem(138), 0)
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to, .fade-leave {
+  opacity: 1;
+}
+.slide-right-enter, .slide-right-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+.popup-slide-up-enter, .popup-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+  opacity: 0;
+}
+.popup-slide-up-enter-to, .popup-slide-up-leave {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}

src/components/ebook/EbookMenu.vue

@@ -0,0 +1,79 @@
+<template>
+  <div> 
+  <transition name="slide-up">
+      <div class="menu-wrapper" 
+           :class="{'hide-box-shadow': !menuVisible || settingVisible >= 0}" 
+           v-show="menuVisible">
+        <div class="icon-wrapper">
+          <span class="icon-menu" @click="showSetting(3)"></span>
+        </div>
+        <div class="icon-wrapper">
+          <span class="icon-progress" @click="showSetting(2)"></span>
+        </div>
+        <div class="icon-wrapper">
+          <span class="icon-bright" @click="showSetting(1)"></span>
+        </div>
+        <div class="icon-wrapper">
+          <span class="icon-A" @click="showSetting(0)"></span>
+        </div>
+      </div>
+  </transition>
+  <ebook-setting-font></ebook-setting-font> 
+  <ebook-setting-font-popup></ebook-setting-font-popup>
+  <ebook-setting-theme></ebook-setting-theme>
+  <ebook-setting-progress></ebook-setting-progress>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import EbookSettingFont from './EbookSettingFont'
+import EbookSettingFontPopup from './EbookSettingFontPopup'
+import EbookSettingTheme from './EbookSettingTheme'
+import EbookSettingProgress from './EbookSettingProgress'
+import { ebookMixin } from '../../utils/mixin'
+export default {
+    mixins: [ebookMixin],
+    components: {
+      EbookSettingFont,
+      EbookSettingFontPopup,
+      EbookSettingTheme,
+      EbookSettingProgress
+    },
+    methods: {
+        showSetting (key) {
+          this.setSettingVisible(key)
+        }
+    }
+}
+</script>
+
+<style lang='scss' scoped>
+@import "../../assets/styles/global";
+  .menu-wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 102;
+    display: flex;
+    width: 100%;
+    height: px2rem(48);
+    background: white;
+    box-shadow: 0 px2rem(-8) px2rem(8) rgba(0, 0, 0, .15);
+    font-size: px2rem(20);
+    &.hide-box-shadow {
+      box-shadow: none;
+    }
+    .icon-wrapper {
+      flex: 1;
+      @include center;
+      .icon-progress {
+        font-size: px2rem(24);
+      }
+      .icon-bright {
+        font-size: px2rem(21);
+      }
+
+    }
+  }
+</style>