⚒️移动端初步适配

0xcaffebabe · May 21, 2022 · efbfb72 · efbfb72
1 parent 68a26f3
commit efbfb72
Show file tree

Hide file tree

Showing 19 changed files with 742 additions and 93 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimum-scale=1.0">
     <title>个人知识框架</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -84,14 +84,6 @@ export default defineComponent({
         e.preventDefault();
       }
     });
-    // 设置默认主题
-    const theme = localStorage.getItem('system::theme');
-    if (theme == 'dark') {
-      this.$store.commit('setIsDarkMode', true);
-      document.body.setAttribute('theme', 'dark');
-      document.documentElement.classList.add('dark');
-      MermaidUtils.initWithDark()
-    }
     // 恢复目录列表
     const raw = localStorage.getItem(cateListKey);
     if (raw){

diff --git a/src/Main.vue b/src/Main.vue
@@ -0,0 +1,23 @@
+<template>
+  <router-view />
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import MermaidUtils from '@/util/MermaidUtils';
+
+export default defineComponent({
+  setup() {
+    
+  },
+  created() {
+    // 设置默认主题
+    const theme = localStorage.getItem('system::theme');
+    if (theme == 'dark') {
+      this.$store.commit('setIsDarkMode', true);
+      document.body.setAttribute('theme', 'dark');
+      document.documentElement.classList.add('dark');
+      MermaidUtils.initWithDark()
+    }
+  }
+})
+</script>
diff --git a/src/MobileApp.vue b/src/MobileApp.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-affix>
+        <mobile-header />
+      </el-affix>
+    </el-header>
+    <el-main>
+      <router-view />
+    </el-main>
+  </el-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import MobileHeader from './components/header/mobile/MobileHeader.vue'
+
+export default defineComponent({
+  components: {
+    MobileHeader
+  },
+  setup() {
+    
+  },
+})
+</script>
+
+
+<style lang="less" scoped>
+.el-main {
+    padding: 0 4px;
+}
+.el-header {
+  padding: 0;
+  height: 40px;
+}
+body[theme=dark] {
+  .el-main {
+    background-color:var(--main-dark-bg-color);
+    color: var(--main-dark-text-color);
+  }
+  .el-header {
+    background-color:var(--main-dark-bg-color);
+    color: var(--main-dark-text-color);
+  }
+  .header-toggle-button {
+    .el-button {
+      box-shadow: 2px 2px 13px #111;
+    }
+  }
+}
+</style>
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
@@ -14,16 +14,7 @@
             <datasource-selector />
             <el-divider direction="vertical" />
             <!-- 正常/暗色模式切换按钮 -->
-            <el-switch
-              v-model="showMode"
-              :inline-prompt="true"
-              :active-icon="Moon"
-              :inactive-icon="Sunny"
-              @click="toggleDarkMode"
-              active-color="#000"
-              inactive-color="#409EFF"
-            >
-            </el-switch>
+            <theme-switcher />
             <!-- 全屏/缓存清空 -->
             <el-divider direction="vertical" />
             <el-button-group>
@@ -80,14 +71,14 @@ import {Sunny, Moon, Monitor, Brush, Aim } from '@element-plus/icons-vue';
 import EventBus from "@/components/EventBus";
 import InstapaperShower from "./InstapaperShower.vue";
 import YuequeDraftShower from "./YuequeDraftShower.vue";
+import ThemeSwitcher from "./ThemeSwitcher.vue";
 </script>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import config from "@/config";
 import DatasourceSelector from './datasource/DatasourceSelector.vue';
 import CacheService from "@/service/CacheService";
-import MermaidUtils from '@/util/MermaidUtils';
 
 export default defineComponent({
   components: {
@@ -96,7 +87,6 @@ export default defineComponent({
   data() {
     return {
       name: "my-book" as string,
-      showMode: false as boolean,
       fullscreen: false,
     };
   },
@@ -119,22 +109,6 @@ export default defineComponent({
         document.exitFullscreen();
       }
     },
-    toggleDarkMode(){
-      const theme = document.body.getAttribute('theme');
-      if (theme == 'dark') {
-        document.body.setAttribute('theme', 'light');
-        document.documentElement.classList.remove("dark");
-        this.$store.commit('setIsDarkMode', false);
-        localStorage.setItem('system::theme', "light");
-        MermaidUtils.initWithNormal();
-      }else {
-        document.body.setAttribute('theme', 'dark');
-        document.documentElement.classList.add("dark");
-        this.$store.commit('setIsDarkMode', true);
-        localStorage.setItem('system::theme', "dark");
-        MermaidUtils.initWithNormal();
-      }
-    },
     enterZenMode() {
       EventBus.emit('enter-zen-mode', null)
     }
@@ -146,12 +120,8 @@ export default defineComponent({
     linkList() {
       return config.linkList;
     },
-    isDark(){
-      return this.$store.state.isDarkMode;
-    }
   },
   created() {
-    this.showMode = this.isDark;
     EventBus.on('enter-zen-mode', () => {
       document.body.requestFullscreen();
     })

diff --git a/src/components/header/ThemeSwitcher.vue b/src/components/header/ThemeSwitcher.vue
@@ -0,0 +1,60 @@
+<template>
+  <el-switch
+    v-model="showMode"
+    :inline-prompt="true"
+    :active-icon="Moon"
+    :inactive-icon="Sunny"
+    @click="toggleDarkMode"
+    active-color="#000"
+    inactive-color="#409EFF"
+  >
+  </el-switch>
+</template>
+
+<script lang="ts" setup>
+import {Sunny, Moon } from '@element-plus/icons-vue';
+</script>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import MermaidUtils from '@/util/MermaidUtils';
+
+export default defineComponent({
+  setup() {},
+  data() {
+    return {
+      showMode: false as boolean,
+    }
+  },
+  computed: {
+    isDark(){
+      return this.$store.state.isDarkMode;
+    }
+  },
+  created() {
+    this.showMode = this.isDark;
+  },
+  methods: {
+    toggleDarkMode(){
+      const theme = document.body.getAttribute('theme');
+      if (theme == 'dark') {
+        document.body.setAttribute('theme', 'light');
+        document.documentElement.classList.remove("dark");
+        this.$store.commit('setIsDarkMode', false);
+        localStorage.setItem('system::theme', "light");
+        MermaidUtils.initWithNormal();
+      }else {
+        document.body.setAttribute('theme', 'dark');
+        document.documentElement.classList.add("dark");
+        this.$store.commit('setIsDarkMode', true);
+        localStorage.setItem('system::theme', "dark");
+        MermaidUtils.initWithNormal();
+      }
+    },
+  }
+});
+</script>
+
+
+<style lang="less" scoped>
+</style>
diff --git a/src/components/header/mobile/MobileHeader.vue b/src/components/header/mobile/MobileHeader.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="header">
+    <div class="header-wrapper">
+      <div class="container">
+        <div class="logo">
+           <el-link href="#" @click.prevent="$router.push('/home')">
+                {{ siteName }}
+          </el-link>
+        </div>
+        <theme-switcher />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ThemeSwitcher from '../ThemeSwitcher.vue';
+</script>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import config from "@/config";
+
+export default defineComponent({
+  setup() {
+    
+  },
+  computed: {
+    siteName() {
+      return config.siteName;
+    },
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.header {
+  height: 40px;
+  padding: 0;
+  box-shadow: var(--el-box-shadow);
+  background-color:#fff;
+}
+.header-wrapper {
+  padding: 8px;
+}
+.container {
+  display: flex;
+  justify-content: space-between;
+   .logo {
+    display: flex;
+    align-items: center;
+    a {
+      text-decoration: none;
+      font-size: 1rem;
+      font-weight: 600;
+      position: relative;
+    }
+  }
+}
+body[theme=dark] {
+  .header {
+    background-color:var(--second-dark-bg-color);
+  }
+}
+</style>
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,6 @@
+export{} // 必须保留
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $isMobile: () => true
+  }
+}
diff --git a/src/main.ts b/src/main.ts
@@ -1,5 +1,5 @@
 import {createApp} from 'vue'
-import App from './App.vue'
+import App from './Main.vue'
 import createRouter from './route'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
@@ -9,13 +9,18 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import axios from 'axios'
 import createStore from '@/store'
+import { SysUtils } from './util/SysUtils'
 
 const app = createApp(App)
 
+// 全局变量
+app.config.globalProperties.$isMobile = SysUtils.isMobile
+
 app.use(ElementPlus)
 app.use(createStore())
 const router = createRouter()
 
+
 // 屏幕顶端进度条开始
 router.beforeEach((to, from, next) => {
   NProgress.start()

diff --git a/src/pages/doc/category/CategoryItem.vue b/src/pages/doc/category/CategoryItem.vue
@@ -1,6 +1,6 @@
 <template>
   <el-popover
-    placement="right-start"
+    :placement="!$isMobile() ? 'right-start': 'bottom-start'"
     :width="300"
     trigger="hover"
     :hide-after="100"