From 2a005b2e14690e89b4704b521fe054582078d919 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Thu, 29 Aug 2024 13:29:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8DheaderVue=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E5=B1=8F=E5=B9=95=E5=AE=BD=E5=BA=A6=E5=B0=8F=E4=BA=8E800px?=
 =?UTF-8?q?=EF=BC=8C=E6=97=A0=E6=B3=95=E5=88=87=E6=8D=A2=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tonecn/src/components/Common/Header.vue | 42 +++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/tonecn/src/components/Common/Header.vue b/tonecn/src/components/Common/Header.vue
index bc3b284..c6a673d 100644
--- a/tonecn/src/components/Common/Header.vue
+++ b/tonecn/src/components/Common/Header.vue
@@ -1,5 +1,41 @@
 <script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter()
 
+interface MoreOptionsVisable {
+    moreOptions: HTMLElement | null;
+    show(): void;
+    hidden(): void;
+    toggle(): void;
+}
+
+const moreOptionsVisable: MoreOptionsVisable = {
+    moreOptions: null,
+    show() {
+        if (!this.moreOptions)
+            throw new Error('moreOptions元素不存在');
+        this.moreOptions.classList.remove('header-right-hidden');
+    },
+    hidden() {
+        if (!this.moreOptions)
+            throw new Error('moreOptions元素不存在');
+        this.moreOptions.classList.add('header-right-hidden');
+    },
+    toggle() {
+        if (!this.moreOptions)
+            throw new Error('moreOptions元素不存在');
+        this.moreOptions.classList.toggle('header-right-hidden')
+    }
+}
+
+onMounted(async () => {
+    moreOptionsVisable.moreOptions = document.querySelector("#header-right");
+});
+
+router.afterEach(() => {
+    moreOptionsVisable.hidden();
+});
 </script>
 <template>
     <div class="main-container">
@@ -13,7 +49,8 @@
                         <div class="title">特恩(TONE)</div>
                     </RouterLink>
                 </div>
-                <div class="more" tabindex="0" id="header-more">
+                <!-- 更多选项按钮，宽度小于800时出现 -->
+                <div class="more" tabindex="0" id="header-more" @click="moreOptionsVisable.toggle">
                     <svg t="1705913460674" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="10513" width="20" height="20">
                         <path
@@ -34,7 +71,8 @@
                         <div class="link" :class="{ 'link-chosen': $route.name === 'blog' }">博客</div>
                     </RouterLink>
                     <RouterLink :to="{ name: 'login' }" v-show="true">
-                        <div class="link" :class="{ 'link-chosen': $route.name === 'login' || $route.name === 'dashboard'}">控制台</div>
+                        <div class="link"
+                            :class="{ 'link-chosen': $route.name === 'login' || $route.name === 'dashboard' }">控制台</div>
                     </RouterLink>
                 </div>
             </div>