bump to version v0.11.0 (#17)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "win-up-to-date",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "A website project showing the uptime status of Windows Insider versions.",
   "main": "index.js",
   "repository": "https://github.com/crrashh1542/win-up-to-date",
@@ -26,7 +26,7 @@
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
@@ -36,7 +36,7 @@
     "eslint-plugin-vue": "^9.15.0",
     "less": "^4.1.3",
     "less-loader": "^11.1.3",
-    "postcss": "^8.4.28",
+    "postcss": "^8.4.31",
     "speed-measure-webpack-plugin": "^1.5.0",
     "tailwindcss": "^3.3.3"
   },

src/App.vue

@@ -11,11 +11,12 @@ import './assets/styles/reset.less'
 // 引入组件
 import Appbar from './components/Appbar.vue'
 import Foo from './components/Footer.vue'
+import BottomNav from './components/BottomNav.vue'
 import Setting from './components/Setting.vue'
 
 export default {
    name: 'App',
-   components: { Appbar, Foo, Setting },
+   components: { Appbar, Foo, Setting, BottomNav },
    setup() {
       // STEP1 ------ 设置初始值，避免出现 undefined
       let [oriFlightVisibility, oriBranchVisibility] = [true, true]
@@ -51,6 +52,7 @@ export default {
       <router-view :isShowFlight="isShowFlight" :isShowBranch="isShowBranch" />
    </main>
    <Foo class="z-20" />
+   <BottomNav class="z-40"></BottomNav>
    <Setting class="z-50" @isShowFlight="setState" @isShowBranch="setState" />
 </template>
 

src/assets/fonts/iconfont/iconfont.less

@@ -4,62 +4,63 @@
   src: url('iconfont.woff2') format('woff2');
 }
 
-.icon-external:before {
+.icon-external::before {
   content: "\e622";
 }
 
-.icon-win10:before {
+// 主页列表
+.icon-win10::before {
   content: "\e64a";
 }
-
-.icon-code:before {
+.icon-code::before {
   content: "\e60e";
 }
-
-.icon-branch:before {
+.icon-branch::before {
   content: "\e993";
 }
-
-.icon-flight:before {
+.icon-flight::before {
   content: "\e9d7";
 }
-
-.icon-chemical:before {
+.icon-chemical::before {
   content: "\e653";
 }
-
-.icon-win11:before {
+.icon-win11::before {
   content: "\e64c";
 }
-
-.icon-server:before {
+.icon-server::before {
   content: "\e643";
 }
-
-.icon-azure:before {
+.icon-azure::before {
   content: "\e618";
 }
-
-.icon-iso:before {
+.icon-iso::before {
   content: "\e64b";
 }
 
-.icon-time:before {
+// 关于页
+.icon-time::before {
   content: "\e6cf";
 }
-
-.icon-version:before {
+.icon-version::before {
   content: "\e610";
 }
-
-.icon-github:before {
+.icon-github::before {
   content: "\e673";
 }
-
-.icon-vuejs:before {
+.icon-vuejs::before {
   content: "\ec2c";
 }
-
-.icon-fluent:before {
+.icon-fluent::before {
   content: "\ed50";
+}
+
+// 底部导航栏
+.icon-home::before {
+  content: "\e656";
+}
+.icon-list::before {
+  content: "\e668";
+}
+.icon-about::before {
+  content: "\e619";
 }

src/components/BottomNav.vue

@@ -0,0 +1,66 @@
+<script>
+const navSections = [
+    // 由于伪类的居中问题，故直接放 ../assets/fonts/iconfont/iconfont.less 的 UTF-8 编码
+    {
+        "path": "/",
+        "icon": "icon-home",
+        "text": "主页"
+    },
+    {
+        "path": "/about",
+        "icon": "icon-about",
+        "text": "关于"
+    }
+]
+
+export default {
+    name: 'WidgetNav',
+    data() {
+        return { navSections }
+    }
+}
+</script>
+
+<template>
+    <div class="nav flex flex-row fixed bottom-0 left-0 w-full">
+
+        <router-link v-for="s in navSections" :to="s.path" 
+            :key="s.value" class="inline text-center basis-1/2 py-2">
+
+            <span class="icon block text-2xl p-1.5" :class="s.icon"></span>
+            <span class="block text-sm p-1">{{ s.text }}</span>
+
+        </router-link>
+
+    </div>
+</template>
+
+<style lang="less" scoped>
+@import url('../assets/styles/global.less');
+
+.nav {
+    display: var(--nav-display);
+    background-color: @wu-color-nav;
+    backdrop-filter: blur(3px);
+    border-top: 1px solid #999;
+    .path-active { // router 活跃状态（处于当前页时）的配置 class
+        color: @wu-color-theme;
+    }
+    .icon::before {
+        height: 40px;
+    }
+}
+
+// 适配
+@media screen and (min-width: 650px) {
+    .nav {
+        --nav-display: none;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .nav {
+        --nav-display: flex;
+    }
+}
+</style>

src/components/Footer.vue

@@ -23,6 +23,7 @@ export default {
     border-top: 1px solid @wu-color-split-line;
     padding: .5em var(--container-padding);
     color: @wu-color-text-accent;
+    margin-bottom: var(--footer-bottom-spacing);
 
     p {
         line-height: var(--footer-line-height) !important;
@@ -32,10 +33,19 @@ export default {
 }
 
 /* 不同设备适配 */
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 650px) {
     .footer {
         --footer-line-height: 1.6;
         --footer-margin: .9em 0;
+        --footer-bottom-spacing: 72px;
+    }
+}
+
+@media screen and (min-width: 650px) {
+    .footer {
+        --footer-line-height: 1.6;
+        --footer-margin: .9em 0;
+        --footer-bottom-spacing: 0;
     }
 }
 

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
+    linkActiveClass: 'path-active',
     history: createWebHistory(),
     routes: [
         { path: '/', component: () => import('../../src/views/Versions.vue') },