new feature: mobile hamburger

2023-06-17 23:21:32 +08:00 · 2023-06-17 23:21:32 +08:00 · 733bd6dc1c
parent 190b171205
commit 733bd6dc1c
6 changed files with 258 additions and 95 deletions
--- a/src/components/TopBar/Hamburger.vue
+++ b/src/components/TopBar/Hamburger.vue
@ -1,12 +1,115 @@
 <!-- 这个文件为了适配手机端的顶部导航栏 -->
-<script setup lang='ts'>
-
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+// 导入模式切换组件
+import Mode from '../setting-panel/components/Mode.vue'
+// 导入语言切换组件
+import SwitchLanguage from '../setting-panel/components/SwitchLanguage.vue'
+// 导入顶部导航栏项目
+import { topBarItem } from './topBarItem'
+// 向父元素发送关闭命令
+defineEmits(['showKUNGalgameHamburger'])
 </script>

 <template>
+  <!-- 总容器 -->
+  <div class="container">
+    <div class="kungalgame">
+      <img src="../../assets/images/favicon.png" alt="KUNGalgame" />
+      <span>{{ $t('header.name') }}</span>
+    </div>
+    <!-- 交互栏目 -->
+    <div class="item">
+      <span v-for="kun in topBarItem" :key="kun.index">
+        <RouterLink :to="kun.router">{{
+          $t(`header['${kun.name}']`)
+        }}</RouterLink>
+      </span>
+    </div>

+    <!-- 白天黑夜模式切换组件 -->
+    <Mode />
+
+    <!-- 语言切换组件 -->
+    <SwitchLanguage style="font-size: 20px; margin-bottom: 40px" />
+    <!-- 关闭按钮 -->
+    <div class="close">
+      <Icon
+        icon="line-md:menu-fold-left"
+        @click="$emit('showKUNGalgameHamburger', false)"
+      />
+    </div>
+  </div>
 </template>

-<style lang='scss' scoped>
+<style lang="scss" scoped>
+.container {
+  height: 400px;
+  width: 222px;
+  position: fixed;
+  padding: 10px;
+  top: 0;
+  left: 0;
+  background-color: var(--kungalgame-trans-white-2);
+  border: 1px solid var(--kungalgame-blue-1);
+  box-shadow: var(--shadow);
+  border-left: none;
+  border-top: none;
+  display: flex;
+  flex-direction: column;
+  color: var(--kungalgame-font-color-3);
+  font-size: 25px;
+}

-</style>
+.item {
+  margin-left: 20px;
+  margin-top: 20px;
+  font-size: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  a {
+    color: var(--kungalgame-blue-4);
+  }
+}
+
+.kungalgame {
+  display: flex;
+  align-items: center;
+  img {
+    height: 40px;
+    margin-right: 10px;
+  }
+  span {
+    font-size: 17px;
+  }
+}
+
+.mode {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 20px;
+}
+.mode-container {
+  width: 60%;
+  display: flex;
+  justify-content: space-around;
+  li {
+    cursor: pointer;
+  }
+  li:nth-child(1) {
+    color: var(--kungalgame-red-4);
+  }
+  li:nth-child(2) {
+    color: var(--kungalgame-blue-4);
+  }
+}
+
+.close {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+</style>
--- a/src/components/TopBar/KUNGalgameTopBar.vue
+++ b/src/components/TopBar/KUNGalgameTopBar.vue
@ -1,26 +1,36 @@
 <script setup lang="ts">
 // 导入 Vue 函数
-import { defineAsyncComponent, onBeforeUpdate, ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 // 导入图标
 import { Icon } from '@iconify/vue'
 // 导入 css 动画
 import 'animate.css'
 // 导入导航栏的单个项目
 import { topBarItem } from './topBarItem'
-// 导入手机版 hamburger
-import Hamburger from './Hamburger.vue'
+import { onBeforeRouteLeave } from 'vue-router'
+// 异步导入手机版 hamburger，提升首页加载速度
+const Hamburger = defineAsyncComponent(() => import('./Hamburger.vue'))

 // 异步导入设置面板，提升首页加载速度
 const KUNGalgameSettingsPanel = defineAsyncComponent(
  () => import('../setting-panel/KUNGalgameSettingPanel.vue')
 )

-// 使设置面板的数据变为响应式
+// 显示设置面板的状态值
 const showKUNGalgamePanel = ref(false)

+// 显示手机模式 hamburger 的状态值
+const showKUNGalgameHamburger = ref(false)
+
 // 根据导航条的项目个数操作 css 中导航条的宽度，这里必须要这样写，因为用了 css v-bind
 const navItemNum = topBarItem.length
 const navItemLength = `${navItemNum}00px`
+
+// 路由离开之前销毁 SettingsPanel 和 Hamburger
+onBeforeRouteLeave(() => {
+  showKUNGalgamePanel.value = false
+  showKUNGalgameHamburger.value = false
+})
 </script>

 <template>
@ -28,14 +38,20 @@ const navItemLength = `${navItemNum}00px`
    <!-- 顶部左侧交互栏 -->
    <div class="nav-top">
      <div class="hamburger">
-        <Icon icon="line-md:menu-fold-right" />
+        <Icon
+          icon="line-md:menu-fold-right"
+          v-if="!showKUNGalgameHamburger"
+          @click="showKUNGalgameHamburger = !showKUNGalgameHamburger"
+        />
        <transition
-          name="kungalgame-panel"
          enter-active-class="animate__animated animate__fadeInLeft animate__faster"
          leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
        >
          <KeepAlive>
-            <Hamburger v-if="showKUNGalgamePanel" />
+            <Hamburger
+              v-if="showKUNGalgameHamburger"
+              @showKUNGalgameHamburger="showKUNGalgameHamburger = false"
+            />
          </KeepAlive>
        </transition>
      </div>
@ -73,7 +89,6 @@ const navItemLength = `${navItemNum}00px`
  </div>
  <div class="settings-panel">
    <transition
-      name="kungalgame-panel"
      enter-active-class="animate__animated animate__jackInTheBox animate__faster"
      leave-active-class="animate__animated animate__fadeOutRight animate__faster"
    >
@ -105,6 +120,7 @@ const navItemLength = `${navItemNum}00px`
  z-index: 1007;
  margin-bottom: 7px;
  flex-shrink: 0;
+  color: var(--kungalgame-font-color-3);
 }

 .hamburger {
--- a/src/components/TopBar/topBarItem.ts
+++ b/src/components/TopBar/topBarItem.ts
@ -11,4 +11,5 @@ export const topBarItem: topBar[] = [
  { index: 2, name: 'create', router: '/edit/index' },
  { index: 3, name: 'technique', router: '/technique/index' },
  { index: 4, name: 'about', router: '/kungalgame/index' },
+  { index: 5, name: 'return', router: '/kun' },
 ]
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@ -4,6 +4,10 @@
 import { Icon } from '@iconify/vue'
 // 引入看板娘组件
 import Loli from './components/Loli.vue'
+// 导入模式切换组件
+import Mode from './components/Mode.vue'
+// 导入语言切换组件
+import SwitchLanguage from './components/SwitchLanguage.vue'
 // 引入背景设置组件
 import Background from './components/Background.vue'
 // 导入设置面板 store
@ -14,11 +18,8 @@ import { useI18n } from 'vue-i18n'

 // 使用设置面板的 store
 const settingsStore = useKUNGalgameSettingsStore()
-const {
-  showKUNGalgamePanel,
-  showKUNGalgameMainPageWidth,
-  showKUNGalgameLanguage,
-} = storeToRefs(settingsStore)
+const { showKUNGalgameMainPageWidth, showKUNGalgameLanguage } =
+  storeToRefs(settingsStore)

 const emits = defineEmits(['close'])

@ -50,37 +51,12 @@ const handelCloseSettingsPanel = () => {
        <span>{{ $t('header.settings.name') }}</span>
        <span><Icon class="settings-icon" icon="uiw:setting-o" /></span>
      </div>
-      <div class="mode">
-        <!-- 白天 / 黑夜模式切换 -->
-        <span>{{ $t('header.settings.mode') }}</span>
-        <div class="mode-container">
-          <li>
-            <Icon
-              class="sun"
-              icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition"
-              @click="settingsStore.setKUNGalgameTheme('')"
-            />
-          </li>
-          <li>
-            <Icon
-              class="moon"
-              icon="line-md:sunny-outline-to-moon-loop-transition"
-              @click="settingsStore.setKUNGalgameTheme('dark')"
-            />
-          </li>
-        </div>
-      </div>
-      <div class="set-lang">
-        <span>{{ $t('header.settings.language') }}</span>
-        <select
-          class="select"
-          v-model="showKUNGalgameLanguage"
-          @change="handleChangeLanguage"
-        >
-          <option value="en">English</option>
-          <option value="zh">中文</option>
-        </select>
-      </div>
+
+      <!-- 模式切换组件 -->
+      <Mode />
+
+      <!-- 语言切换组件 -->
+      <SwitchLanguage />
      <div>
        <!-- 设置主页的宽度 -->
        <div class="width-container">
@ -162,43 +138,7 @@ const handelCloseSettingsPanel = () => {
    transform: rotate(360deg);
  }
 }
-.mode {
-  margin: 20px 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.mode-container {
-  font-size: 25px;
-  width: 60%;
-  display: flex;
-  justify-content: space-around;
-  li {
-    cursor: pointer;
-  }
-  li:nth-child(1) {
-    color: var(--kungalgame-red-4);
-  }
-  li:nth-child(2) {
-    color: var(--kungalgame-blue-4);
-  }
-}
-// 语言设置
-.set-lang {
-  display: flex;
-  justify-content: space-between;
-}
-// 语言的选择框
-.select {
-  width: 100px;
-  font-size: 16px;
-  color: var(--kungalgame-font-color-3);
-  border: 1px solid var(--kungalgame-blue-4);
-  background-color: var(--kungalgame-trans-white-9);
-  option {
-    background-color: var(--kungalgame-white);
-  }
-}
+
 .page-width {
  font-size: 15px;
  display: flex;
@ -212,10 +152,7 @@ const handelCloseSettingsPanel = () => {
  height: 10px;
  margin: 20px 0;
 }
-/* 固定看板娘 */
-.set-lang {
-  margin-bottom: 20px;
-}
+
 .width-container {
  display: flex;
  justify-content: space-between;
@ -242,13 +179,9 @@ const handelCloseSettingsPanel = () => {
  margin: 20px;
  cursor: pointer;
 }
-@media (max-width: 700px) {
-  .loli {
-    display: none;
-  }
+@media (max-width: 1000px) {
  .root {
-    width: 300px;
-    transition: 0.3s;
+    display: none;
  }
 }
@media (max-height: 600px) {
--- a/src/components/setting-panel/components/Mode.vue
+++ b/src/components/setting-panel/components/Mode.vue
@ -0,0 +1,56 @@
+<script setup lang="ts">
+// 引入图标字体
+import { Icon } from '@iconify/vue'
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+</script>
+
+<template>
+  <div class="mode">
+    <!-- 白天 / 黑夜模式切换 -->
+    <span>{{ $t('header.settings.mode') }}</span>
+    <div class="mode-container">
+      <li>
+        <Icon
+          class="sun"
+          icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition"
+          @click="settingsStore.setKUNGalgameTheme('')"
+        />
+      </li>
+      <li>
+        <Icon
+          class="moon"
+          icon="line-md:sunny-outline-to-moon-loop-transition"
+          @click="settingsStore.setKUNGalgameTheme('dark')"
+        />
+      </li>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.mode {
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mode-container {
+  font-size: 25px;
+  width: 60%;
+  display: flex;
+  justify-content: space-around;
+  li {
+    cursor: pointer;
+  }
+  li:nth-child(1) {
+    color: var(--kungalgame-red-4);
+  }
+  li:nth-child(2) {
+    color: var(--kungalgame-blue-4);
+  }
+}
+</style>
--- a/src/components/setting-panel/components/SwitchLanguage.vue
+++ b/src/components/setting-panel/components/SwitchLanguage.vue
@ -0,0 +1,54 @@
+<script setup lang="ts">
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+// 导入 i18n
+import { useI18n } from 'vue-i18n'
+
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgameLanguage } = storeToRefs(settingsStore)
+
+/*
+ * 网站的语言设置
+ */
+const { locale } = useI18n({ useScope: 'global' })
+
+const handleChangeLanguage = () => {
+  locale.value = showKUNGalgameLanguage.value
+}
+</script>
+
+<template>
+  <div class="set-lang">
+    <span>{{ $t('header.settings.language') }}</span>
+    <select
+      class="select"
+      v-model="showKUNGalgameLanguage"
+      @change="handleChangeLanguage"
+    >
+      <option value="en">English</option>
+      <option value="zh">中文</option>
+    </select>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// 语言设置
+.set-lang {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+// 语言的选择框
+.select {
+  width: 100px;
+  font-size: 16px;
+  color: var(--kungalgame-font-color-3);
+  border: 1px solid var(--kungalgame-blue-4);
+  background-color: var(--kungalgame-trans-white-9);
+  option {
+    background-color: var(--kungalgame-white);
+  }
+}
+</style>