feat: update packages (#161)

frontend/src/App.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { darkTheme, NGlobalStyle } from 'naive-ui'
-import { zhCN } from 'naive-ui'
+import { darkTheme, NGlobalStyle, zhCN } from 'naive-ui'
 import { computed, onMounted } from 'vue'
+import { useDark, useToggle } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from './store'
 import { useIsMobile } from './utils/composables'
 import Header from './views/Header.vue';
 
-const { localeCache, themeSwitch, loading } = useGlobalState()
-const theme = computed(() => themeSwitch.value ? darkTheme : null)
+const { localeCache, isDark, loading } = useGlobalState()
+const theme = computed(() => isDark.value ? darkTheme : null)
 const localeConfig = computed(() => localeCache.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
 

frontend/src/store/index.js

@@ -1,8 +1,11 @@
 import { ref } from "vue";
 import { createGlobalState, useStorage } from '@vueuse/core'
+import { useDark, useToggle } from '@vueuse/core'
 
 export const useGlobalState = createGlobalState(
     () => {
+        const isDark = useDark()
+        const toggleDark = useToggle(isDark)
         const loading = ref(false);
         const openSettings = ref({
             prefix: '',
@@ -37,6 +40,8 @@ export const useGlobalState = createGlobalState(
         const adminMailTabAddress = ref("");
         const adminSendBoxTabAddress = ref("");
         return {
+            isDark,
+            toggleDark,
             loading,
             settings,
             openSettings,

frontend/src/views/Header.vue

@@ -12,7 +12,10 @@ import { api } from '../api'
 const { toClipboard } = useClipboard()
 const message = useMessage()
 
-const { jwt, localeCache, themeSwitch, showAuth, adminAuth, auth } = useGlobalState()
+const {
+    jwt, localeCache, toggleDark, isDark,
+    showAuth, adminAuth, auth
+} = useGlobalState()
 const { showLogin, openSettings, settings } = useGlobalState()
 const route = useRoute()
 const router = useRouter()
@@ -254,12 +257,12 @@ const menuOptions = computed(() => [
                 bordered: false,
                 ghost: true,
                 size: "small",
-                onClick: () => { themeSwitch.value = !themeSwitch.value }
+                onClick: () => toggleDark()
             },
             {
-                default: () => themeSwitch.value ? t('light') : t('dark'),
+                default: () => isDark.value ? t('light') : t('dark'),
                 icon: () => h(
-                    NIcon, { component: themeSwitch.value ? LightModeFilled : DarkModeFilled }
+                    NIcon, { component: isDark.value ? LightModeFilled : DarkModeFilled }
                 )
             }
         ),