From bcff30d6732eabf45649d1b0fb4b7b9a0914a19b Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 26 May 2024 23:12:45 +0800
Subject: [PATCH] refactor(Dock): use emit function to handle refresh and
 back-to-top

---
 src/components/Dock/Dock.vue     | 12 ++++++------
 src/contentScripts/views/App.vue |  2 ++
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 2b9bb65e..eb056f44 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -13,11 +13,11 @@ defineProps<{
   activatedPage: AppPage
 }>()
 
-const emit = defineEmits(['change-page', 'settings-visibility-change'])
+const emit = defineEmits(['changePage', 'settingsVisibilityChange', 'refresh', 'backToTop'])
 
 const mainStore = useMainStore()
 const { isDark, toggleDark } = useDark()
-const { reachTop, handleBackToTop, handlePageRefresh } = useBewlyApp()
+const { reachTop } = useBewlyApp()
 
 const tooltipPlacement = computed(() => {
   if (settings.value.dockPosition === 'left')
@@ -80,9 +80,9 @@ function toggleDockHide(hide: boolean) {
 
 function handleBackToTopOrRefresh() {
   if (reachTop.value)
-    handlePageRefresh.value?.()
+    emit('refresh')
   else
-    handleBackToTop()
+    emit('backToTop')
 }
 </script>
 
@@ -120,7 +120,7 @@ function handleBackToTopOrRefresh() {
             <button
               class="dock-item group"
               :class="{ active: activatedPage === dockItem.page }"
-              @click="emit('change-page', dockItem.page)"
+              @click="emit('changePage', dockItem.page)"
             >
               <div
                 v-show="activatedPage !== dockItem.page"
@@ -165,7 +165,7 @@ function handleBackToTopOrRefresh() {
         </Tooltip>
 
         <Tooltip :content="$t('dock.settings')" :placement="tooltipPlacement">
-          <button class="dock-item" @click="emit('settings-visibility-change')">
+          <button class="dock-item" @click="emit('settingsVisibilityChange')">
             <div i-mingcute:settings-3-line text-xl />
           </button>
         </Tooltip>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 9eb274f8..6af0a42b 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -314,6 +314,8 @@ provide<BewlyAppProvider>('BEWLY_APP', {
         :activated-page="activatedPage"
         @change-page="pageName => changeActivatePage(pageName)"
         @settings-visibility-change="toggleSettings"
+        @refresh="handleThrottledPageRefresh"
+        @back-to-top="handleBackToTop"
       />
       <RightSideButtons
         v-else