From b464c70ae39463c467c6ae5a38d7c338e35ad2ee Mon Sep 17 00:00:00 2001
From: zclzone <zclzone@outlook.com>
Date: Tue, 25 Jun 2024 16:46:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=81=E8=A3=85=E4=B8=8D?=
 =?UTF-8?q?=E5=90=8Clayout=E4=B8=8B=E7=9A=84=E5=85=AC=E7=94=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/index.js        |  1 +
 src/layouts/components/Fullscreen.vue | 13 +++++++++++
 src/layouts/components/index.js       |  1 +
 src/layouts/full/header/index.vue     | 27 +++++------------------
 src/layouts/normal/header/index.vue   | 31 +++++----------------------
 5 files changed, 25 insertions(+), 48 deletions(-)
 create mode 100644 src/layouts/components/Fullscreen.vue

diff --git a/src/components/common/index.js b/src/components/common/index.js
index db166b4..14e66b2 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -3,3 +3,4 @@ export { default as TheFooter } from './TheFooter.vue'
 export { default as AppPage } from './AppPage.vue'
 export { default as CommonPage } from './CommonPage.vue'
 export { default as LayoutSetting } from './LayoutSetting.vue'
+export { default as ToggleTheme } from './ToggleTheme.vue'
diff --git a/src/layouts/components/Fullscreen.vue b/src/layouts/components/Fullscreen.vue
new file mode 100644
index 0000000..7ccc3d4
--- /dev/null
+++ b/src/layouts/components/Fullscreen.vue
@@ -0,0 +1,13 @@
+<template>
+  <i
+    class="mr-16 cursor-pointer"
+    :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
+    @click="toggle"
+  />
+</template>
+
+<script setup>
+import { useFullscreen } from '@vueuse/core'
+
+const { isFullscreen, toggle } = useFullscreen()
+</script>
diff --git a/src/layouts/components/index.js b/src/layouts/components/index.js
index e32d88c..a9d0280 100644
--- a/src/layouts/components/index.js
+++ b/src/layouts/components/index.js
@@ -5,3 +5,4 @@ export { default as BreadCrumb } from './BreadCrumb.vue'
 export { default as AppTab } from './tab/index.vue'
 export { default as SideLogo } from './SideLogo.vue'
 export { default as SideMenu } from './SideMenu.vue'
+export { default as Fullscreen } from './Fullscreen.vue'
diff --git a/src/layouts/full/header/index.vue b/src/layouts/full/header/index.vue
index 7a93ec5..45850d7 100644
--- a/src/layouts/full/header/index.vue
+++ b/src/layouts/full/header/index.vue
@@ -13,16 +13,9 @@
     <BreadCrumb />
 
     <div class="ml-auto flex flex-shrink-0 items-center px-12 text-18">
-      <i
-        class="mr-16 cursor-pointer"
-        :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
-        @click="toggleDark"
-      />
-      <i
-        class="mr-16 cursor-pointer"
-        :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
-        @click="toggle"
-      />
+      <ToggleTheme />
+
+      <Fullscreen />
 
       <i
         class="i-fe:github mr-16 cursor-pointer"
@@ -41,18 +34,8 @@
 </template>
 
 <script setup>
-import { useDark, useFullscreen, useToggle } from '@vueuse/core'
-import { BreadCrumb, MenuCollapse, UserAvatar } from '@/layouts/components'
-import { useAppStore } from '@/store'
-
-const appStore = useAppStore()
-const isDark = useDark()
-function toggleDark() {
-  appStore.toggleDark()
-  useToggle(isDark)()
-}
-
-const { isFullscreen, toggle } = useFullscreen()
+import { ToggleTheme } from '@/components'
+import { BreadCrumb, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
 
 function handleLinkClick(link) {
   window.open(link)
diff --git a/src/layouts/normal/header/index.vue b/src/layouts/normal/header/index.vue
index 2009e53..9590e8f 100644
--- a/src/layouts/normal/header/index.vue
+++ b/src/layouts/normal/header/index.vue
@@ -15,16 +15,9 @@
     <span class="mx-6 opacity-20">|</span>
 
     <div class="flex flex-shrink-0 items-center px-12 text-18">
-      <i
-        class="mr-16 cursor-pointer"
-        :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
-        @click="toggleDark"
-      />
-      <i
-        class="mr-16 cursor-pointer"
-        :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
-        @click="toggle"
-      />
+      <ToggleTheme />
+
+      <Fullscreen />
 
       <i
         class="i-fe:github mr-16 cursor-pointer"
@@ -43,24 +36,10 @@
 </template>
 
 <script setup>
-import { useDark, useFullscreen, useToggle } from '@vueuse/core'
-import { AppTab, MenuCollapse, UserAvatar } from '@/layouts/components'
-import { useAppStore } from '@/store'
-
-const appStore = useAppStore()
-const isDark = useDark()
-function toggleDark() {
-  appStore.toggleDark()
-  useToggle(isDark)()
-}
-
-const { isFullscreen, toggle } = useFullscreen()
+import { ToggleTheme } from '@/components'
+import { AppTab, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
 
 function handleLinkClick(link) {
   window.open(link)
 }
-
-watchEffect(() => {
-  appStore.setThemeColor(appStore.primaryColor, appStore.isDark)
-})
 </script>