From 932228babcfb342a48e8f672b9431e2bce8ee091 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 7 Jun 2024 17:30:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 archive/SearchHistory.vue       |  6 ------
 components/i/MenuSider.vue      | 37 +++++++++++++++++++++++++++++++++
 components/i/Nav.vue            |  6 ------
 components/i/SearchHistory.vue  |  5 -----
 components/i/library/Header.vue |  1 +
 components/i/search/Header.vue  |  1 +
 layouts/default.vue             | 30 --------------------------
 pages/index.vue                 |  1 +
 8 files changed, 40 insertions(+), 47 deletions(-)
 create mode 100644 components/i/MenuSider.vue

diff --git a/archive/SearchHistory.vue b/archive/SearchHistory.vue
index f2a1bfc..5dca478 100644
--- a/archive/SearchHistory.vue
+++ b/archive/SearchHistory.vue
@@ -27,7 +27,6 @@
                     size="xs"
                     long
                     :to="`/search/${item.c_id}`"
-                    @click="handleClickItem"
                 >
                     <div class="flex-grow truncate">{{ item.title }}</div>
                     <UButton
@@ -89,7 +88,6 @@
 <script setup>
 import { IConfirm } from '#components'
 const emits = defineEmits(['sign', 'clear'])
-const Layout = inject('Layout')
 const modal = useModal()
 const { $isSignIn } = storeToRefs(useUserStore())
 const { $searchHistory } = storeToRefs(useSearchStore())
@@ -135,10 +133,6 @@ function handleOpen () {
 function handleClose () {
     isOpenHistory.value = false
 }
-function handleClickItem () {
-    Layout.handleCloseAside()
-}
-
 nextTick(() => {
     $getSearchHistory()
 })
diff --git a/components/i/MenuSider.vue b/components/i/MenuSider.vue
new file mode 100644
index 0000000..3a0cb27
--- /dev/null
+++ b/components/i/MenuSider.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="flex md:hidden">
+        <UButton
+            class="z-20"
+            :class="{ 'fixed top-2 left-2' : fixed }"
+            color="white"
+            trailing-icon="i-heroicons-bars-3-20-solid"
+            @click="handleToggleAside"
+        />
+        <USlideover
+            class="w-64"
+            v-model="isOpenAside"
+            side="left"
+            :overlay="false"
+        >
+            <UButton
+                class="absolute top-2 right-2 z-20"
+                color="white"
+                trailing-icon="i-heroicons-x-mark-20-solid"
+                @click="handleToggleAside"
+            />
+            <IAside />
+        </USlideover>
+    </div>
+</template>
+<script setup>
+defineProps({
+    fixed: {
+        type: Boolean,
+        default: false
+    }
+})
+const isOpenAside = ref(false)
+function handleToggleAside () {
+    isOpenAside.value = !isOpenAside.value
+}
+</script>
\ No newline at end of file
diff --git a/components/i/Nav.vue b/components/i/Nav.vue
index b9a43f7..b5f67d1 100644
--- a/components/i/Nav.vue
+++ b/components/i/Nav.vue
@@ -7,7 +7,6 @@
             size="md"
             label="首页"
             to="/"
-            @click="handleClickItem"
         />
         <UButton
             leading-icon="i-heroicons-rectangle-stack"
@@ -16,7 +15,6 @@
             size="md"
             label="主题"
             to="/library"
-            @click="handleClickItem"
         />
         <ISearchHistory @sign="$openSign" />
         <ClientOnly>
@@ -36,8 +34,4 @@
 <script setup>
 const { $isSignIn, $isOpenSign } = storeToRefs(useUserStore())
 const { $openSign, $closeSign } = useUserStore()
-const Layout = inject('Layout')
-function handleClickItem () {
-    Layout.handleCloseAside()
-}
 </script>
diff --git a/components/i/SearchHistory.vue b/components/i/SearchHistory.vue
index 9f4b4bb..5b9ad71 100644
--- a/components/i/SearchHistory.vue
+++ b/components/i/SearchHistory.vue
@@ -27,7 +27,6 @@
                         size="xs"
                         long
                         :to="`/search/${item.c_id}`"
-                        @click="handleClickItem"
                     >
                         <div class="flex-grow truncate" :title="item.title">{{ item.title }}</div>
                     </UButton>
@@ -38,7 +37,6 @@
 </template>
 <script setup>
 const emits = defineEmits(['sign', 'clear'])
-const Layout = inject('Layout')
 const modal = useModal()
 const { $searchHistory } = storeToRefs(useSearchStore())
 const { $clearSearchHistory } = useSearchStore()
@@ -46,7 +44,4 @@ const query = ref('')
 function handleClear () {
     $clearSearchHistory()
 }
-function handleClickItem () {
-    Layout.handleCloseAside()
-}
 </script>
diff --git a/components/i/library/Header.vue b/components/i/library/Header.vue
index b32ea04..028b442 100644
--- a/components/i/library/Header.vue
+++ b/components/i/library/Header.vue
@@ -3,6 +3,7 @@
         <div class="container max-w-screen-lg 2xl:max-w-screen-xl flex flex-col p-6">
             <div class="flex justify-between items-center">
                 <div class="flex gap-4">
+                    <IMenuSider />
                     <div class="flex items-center text-xl gap-2" v-if="!collect">
                         <UIcon name="i-heroicons-rectangle-stack-20-solid" />
                         <div>主题</div>
diff --git a/components/i/search/Header.vue b/components/i/search/Header.vue
index aac0b58..8c26317 100644
--- a/components/i/search/Header.vue
+++ b/components/i/search/Header.vue
@@ -1,6 +1,7 @@
 <template>
     <header class="sticky top-0 z-10 bg-white dark:bg-black w-full flex flex-col">
         <div class="w-full p-2 justify-end sm:justify-between items-center flex">
+            <IMenuSider />
             <div class="hidden md:flex">
                 <div class="flex items-center gap-2" v-if="repo">
                     <UIcon name="i-simple-icons-github" />{{ repo }}
diff --git a/layouts/default.vue b/layouts/default.vue
index c3e8cc1..cbd6aff 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -7,41 +7,12 @@
             <slot />
         </div>
     </div>
-    <div class="flex md:hidden">
-        <UButton
-            class="fixed top-2 left-2 z-20"
-            color="white"
-            trailing-icon="i-heroicons-bars-3-20-solid"
-            @click="handleToggleAside"
-        />
-        <USlideover
-            class="w-64"
-            v-model="isOpenAside"
-            side="left"
-            :overlay="false"
-        >
-            <UButton
-                class="absolute top-2 right-2 z-20"
-                color="white"
-                trailing-icon="i-heroicons-x-mark-20-solid"
-                @click="handleToggleAside"
-            />
-            <IAside />
-        </USlideover>
-    </div>
     <ILibraryCreate />
     <ILibrarySelect @success="handleCollectSuccess" />
 </template>
 <script setup>
-const isOpenAside = ref(false)
 const selectCollectData = ref(null)
 const removeCollectData = ref(null)
-function handleToggleAside () {
-    isOpenAside.value = !isOpenAside.value
-}
-function handleCloseAside () {
-    isOpenAside.value = false
-}
 function handleCollectSuccess (data) {
     selectCollectData.value = data
 }
@@ -55,7 +26,6 @@ function handleClearRemoveCollectData () {
     removeCollectData.value = null
 }
 provide('Layout', {
-    handleCloseAside,
     selectCollectData,
     handleClearCollectData,
     removeCollectData,
diff --git a/pages/index.vue b/pages/index.vue
index e4baf4a..01dd6ca 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,6 +18,7 @@
             </template>
         </div>
     </div>
+    <IMenuSider fixed />
 </template>
 <script setup>
 const recommendQuestions = [
-- 
GitLab