feat: update packages (#161)

frontend/package.json

@@ -19,23 +19,23 @@
     "axios": "^1.6.8",
     "mail-parser-wasm": "^0.1.6",
     "naive-ui": "^2.38.1",
-    "postal-mime": "^2.2.1",
+    "postal-mime": "^2.2.5",
     "vooks": "^0.2.12",
-    "vue": "^3.4.21",
+    "vue": "^3.4.25",
     "vue-clipboard3": "^2.0.0",
-    "vue-i18n": "^9.10.2",
+    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.6",
+    "vite": "^5.2.10",
-    "vite-plugin-pwa": "^0.19.7",
+    "vite-plugin-pwa": "^0.19.8",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "workbox-window": "^7.0.0",
+    "workbox-window": "^7.1.0",
-    "wrangler": "^3.50.0"
+    "wrangler": "^3.52.0"
   }
 }

frontend/src/App.vue

@@ -1,14 +1,14 @@
 <script setup>
-import { darkTheme, NGlobalStyle } from 'naive-ui'
+import { darkTheme, NGlobalStyle, zhCN } from 'naive-ui'
-import { 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 { localeCache, isDark, loading } = useGlobalState()
-const theme = computed(() => themeSwitch.value ? darkTheme : null)
+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 }
                 )
             }
         ),

worker/package.json

@@ -10,10 +10,10 @@
     "build": "wrangler deploy src/worker.js --dry-run --outdir dist --minify"
   },
   "devDependencies": {
-    "wrangler": "^3.48.0"
+    "wrangler": "^3.52.0"
   },
   "dependencies": {
-    "hono": "^4.2.2",
+    "hono": "^4.2.7",
     "mimetext": "^3.0.24"
   }
 }