From b398605a65b2e728ea6229e99dc38741fd904ec6 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 11 Oct 2023 18:39:07 +0800
Subject: [PATCH] feat: add easter egg in the dock

---
 src/components/Dock/Dock.vue | 28 ++++++++++++++++++++++++----
 src/components/Dock/types.ts |  5 +++++
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 946621a1..1a183e29 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Icon } from '@iconify/vue'
-import type { DockItem } from './types'
+import type { DockItem, HoveringDockItem } from './types'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
 
@@ -11,6 +11,11 @@ const emit = defineEmits(['change-page', 'settings-visibility-change'])
 
 const { t } = useI18n()
 
+const hoveringDockItem = reactive<HoveringDockItem>({
+  themeMode: false,
+  settings: false,
+})
+
 const tooltipPlacement = computed(() => {
   if (settings.value.dockPosition === 'left')
     return 'right'
@@ -81,9 +86,24 @@ function toggleDark() {
       <div class="divider" />
 
       <Tooltip :content="currentAppColorScheme === 'dark' ? $t('dock.dark_mode') : $t('dock.light_mode')" :placement="tooltipPlacement">
-        <button class="dock-item" @click="toggleDark()">
-          <line-md:sunny-outline-to-moon-transition v-if="currentAppColorScheme === 'dark'" />
-          <line-md:moon-to-sunny-outline-transition v-else />
+        <button
+          class="dock-item"
+          @click="toggleDark()"
+          @mouseenter="hoveringDockItem.themeMode = true"
+          @mouseleave="hoveringDockItem.themeMode = false"
+        >
+          <Transition name="fade">
+            <div v-show="hoveringDockItem.themeMode" absolute>
+              <line-md:sunny-outline-to-moon-loop-transition v-if="currentAppColorScheme === 'dark'" />
+              <line-md:moon-alt-to-sunny-outline-loop-transition v-else />
+            </div>
+          </Transition>
+          <Transition name="fade">
+            <div v-show="!hoveringDockItem.themeMode" absolute>
+              <line-md:sunny-outline-to-moon-transition v-if="currentAppColorScheme === 'dark'" />
+              <line-md:moon-to-sunny-outline-transition v-else />
+            </div>
+          </Transition>
         </button>
       </Tooltip>
 
diff --git a/src/components/Dock/types.ts b/src/components/Dock/types.ts
index af0b5853..97bf83fd 100644
--- a/src/components/Dock/types.ts
+++ b/src/components/Dock/types.ts
@@ -6,3 +6,8 @@ export interface DockItem {
   iconActivated: string
   page: AppPage
 }
+
+export interface HoveringDockItem {
+  themeMode: boolean
+  settings: boolean
+}