fix: 新增 loading; 优化图片加载；scss格式化

CaoMeiYouRen · Jan 2, 2021 · 1e4506d · 1e4506d
1 parent 987f6ba
commit 1e4506d
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 23 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,11 +1,15 @@
 module.exports = {
     extends: [
+        'stylelint-config-sass-guidelines',
         'stylelint-config-cmyr',
     ],
     plugins: [
         'stylelint-scss',
         'stylelint-order',
     ],
     rules: {
+        'scss/at-import-partial-extension-blacklist': null,
+        'max-nesting-depth': null,
+        'selector-max-compound-selectors': null
     },
 }
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "build": "vue-cli-service build",
     "postbuild": "rimraf ./dist/voices.zip && rimraf ./dist/voices",
     "lint": "cross-env NODE_ENV=production eslint src --fix --ext .js,.ts,.vue && npm run lint:css",
-    "lint:css": "stylelint src/**/*.{vue,html,css,scss,sass} --syntax scss --custom-syntax postcss-html --fix",
+    "lint:css": "cross-env NODE_ENV=production stylelint src/**/*.{vue,html,css,scss,sass} --syntax scss --custom-syntax postcss-html --fix",
     "commit": "git add . && git cz",
     "changelog": "conventional-changelog -p cmyr-config -i CHANGELOG.md -s -r 0",
     "release": "semantic-release",
@@ -71,7 +71,7 @@
     "conventional-changelog-cmyr-config": "^1.2.3",
     "cross-env": "^7.0.3",
     "eslint": "^7.16.0",
-    "eslint-config-cmyr": "^1.0.8",
+    "eslint-config-cmyr": "^1.0.9",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.4.0",
     "filemanager-webpack-plugin": "^3.0.0-beta.0",
@@ -87,6 +87,7 @@
     "stylelint": "^13.8.0",
     "stylelint-config-cmyr": "^0.2.1",
     "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-sass-guidelines": "^7.1.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
     "stylelint-scss": "^3.18.0",

diff --git a/public/index.html b/public/index.html
@@ -6,27 +6,49 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>
+        <%= htmlWebpackPlugin.options.title %>
+    </title>
     <% if (htmlWebpackPlugin.options.__PROD__) { %>
-    <script>
-        var _hmt = _hmt || [];
-        (function () {
-            var hm = document.createElement("script");
-            hm.src = "https://hm.baidu.com/hm.js?27d36c660fa5375f9305d89f17686e5a";
-            var s = document.getElementsByTagName("script")[0];
-            s.parentNode.insertBefore(hm, s);
-        })();
-    </script>
-    <% } %>
-    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2115084_em9y98irv1s.css">
+        <script>
+            var _hmt = _hmt || [];
+            (function () {
+                var hm = document.createElement("script");
+                hm.src = "https://hm.baidu.com/hm.js?27d36c660fa5375f9305d89f17686e5a";
+                var s = document.getElementsByTagName("script")[0];
+                s.parentNode.insertBefore(hm, s);
+            })();
+        </script>
+        <% } %>
+            <link rel="stylesheet" href="https://at.alicdn.com/t/font_2115084_em9y98irv1s.css">
+            <style>
+                [v-cloak] {
+                    display: block !important;
+                }
+            </style>
 </head>
 
 <body>
     <noscript>
         <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-            Please enable it to continue.</strong>
+                Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+
+    <div id="app">
+        <div v-cloak class="loading">
+            <div class="loadEffect">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <p> Loading…… </p>
+        </div>
+    </div>
     <!-- built files will be auto injected -->
 </body>
 

diff --git a/src/assets/shabao.min.jpg b/src/assets/shabao.min.jpg
diff --git a/src/components/CopyrightFooter.vue b/src/components/CopyrightFooter.vue
@@ -82,7 +82,7 @@ export default defineComponent({
     a,
     p {
         color: $haruka-primary !important;
-        font-family: "微软雅黑";
+        font-family: '微软雅黑';
         text-decoration: none;
     }
 

diff --git a/src/components/HarukaButton.vue b/src/components/HarukaButton.vue
@@ -215,7 +215,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "@/styles/index.scss";
+@import '@/styles/index.scss';
 
 .haruka-button {
     position: relative;

diff --git a/src/main.ts b/src/main.ts
@@ -8,6 +8,7 @@ import router from './router'
 import store from './store'
 import './components'
 import './styles/index.scss'
+import './styles/loading.scss'
 
 Vue.config.productionTip = false
 

diff --git a/src/styles/loading.scss b/src/styles/loading.scss
@@ -0,0 +1,92 @@
+@import './index';
+
+.loading {
+    display: none;
+    text-align: center;
+
+    p {
+        margin-top: 20px;
+    }
+}
+
+$animation-time: 0.16s;
+
+.loadEffect {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
+    margin-top: 220px;
+
+    span {
+        position: absolute;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: $haruka-primary;
+        border-radius: 50%;
+        animation: load $animation-time*8 ease infinite;
+    }
+}
+
+@keyframes load {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0.2;
+    }
+}
+
+.loadEffect span:nth-child(1) {
+    top: 50%;
+    left: 0;
+    margin-top: -8px;
+    animation-delay: $animation-time;
+}
+
+.loadEffect span:nth-child(2) {
+    top: 14px;
+    left: 14px;
+    animation-delay: $animation-time*2;
+}
+
+.loadEffect span:nth-child(3) {
+    top: 0;
+    left: 50%;
+    margin-left: -8px;
+    animation-delay: $animation-time*3;
+}
+
+.loadEffect span:nth-child(4) {
+    top: 14px;
+    right: 14px;
+    animation-delay: $animation-time*4;
+}
+
+.loadEffect span:nth-child(5) {
+    top: 50%;
+    right: 0;
+    margin-top: -8px;
+    animation-delay: $animation-time*5;
+}
+
+.loadEffect span:nth-child(6) {
+    right: 14px;
+    bottom: 14px;
+    animation-delay: $animation-time*6;
+}
+
+.loadEffect span:nth-child(7) {
+    bottom: 0;
+    left: 50%;
+    margin-left: -8px;
+    animation-delay: $animation-time*7;
+}
+
+.loadEffect span:nth-child(8) {
+    bottom: 14px;
+    left: 14px;
+    animation-delay: $animation-time*8;
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -12,7 +12,8 @@
                         >
                             <v-img
                                 class="rounded-lg"
-                                :src="baobao"
+                                :src="shabao"
+                                :lazy-src="shabaoMin"
                                 width="220px"
                                 contain
                             />
@@ -194,7 +195,8 @@ import { usePromise } from 'vue-composable'
 import Parser from 'rss-parser'
 import _ from 'lodash'
 import axios from 'axios'
-import baobao from '@/assets/shabao.jpg'
+import shabao from '@/assets/shabao.jpg'
+import shabaoMin from '@/assets/shabao.min.jpg'
 import voices from '@/config/voices'
 import { friendshipLinks } from '@/config/links'
 import { rssParserString } from '@/utils/rssParser'
@@ -253,12 +255,10 @@ export default defineComponent({
          * 随机播放列表
         */
         const randomList = ref(_voices.value.map((e, i) => i))
-
         const voicesGroup = computed(() => _.groupBy(_voices.value, 'tag'))
         const currentVoiceIndex = ref(0)
         const currentVoice = computed(() => _voices.value[currentVoiceIndex.value])
         let stop: any = null
-
         /**
          * 开始循环播放
          */
@@ -321,7 +321,8 @@ export default defineComponent({
 
         return {
             isLoop,
-            baobao,
+            shabao,
+            shabaoMin,
             voicesGroup,
             startLoop,
             startRandomPlay,