feat: add dark mode && back to top

frontend/src/App.vue

@@ -1,28 +1,70 @@
 <script setup>
-import { NMessageProvider, NGrid, NGi, NSpace, NButton } from 'naive-ui'
+import { NMessageProvider, NGrid, NBackTop, NLayoutHeader } from 'naive-ui'
-import Content from './Content.vue';
+import { NGi, NSpace, NButton, NConfigProvider, NSelect } from 'naive-ui'
+import { darkTheme, NSwitch, NGlobalStyle } from 'naive-ui'
+import { computed, ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+import { zhCN } from 'naive-ui'
+
+import Content from './Content.vue'
+
+const themeSwitch = useStorage('themeSwitch', false)
+const localeCache = useStorage('localeCache', false)
+const theme = computed(() => themeSwitch.value ? darkTheme : null)
+const locale = computed(() => localeCache.value ? zhCN : null)
 </script>
 
 <template>
+  <n-config-provider :theme="theme">
+    <n-global-style />
     <n-message-provider>
       <n-grid x-gap="12" :cols="8">
         <n-gi span="1"></n-gi>
         <n-gi span="6">
           <div class="main">
             <n-space vertical>
-            <h2>Cloudflare Temp Email <n-button tag="a" target="_blank" tertiary type="primary" round class="button-left"
+              <n-layout-header>
-                href="https://github.com/dreamhunter2333/cloudflare_temp_email">Star Github</n-button>
+                <div>
-            </h2>
+                  <h2>Cloudflare Temp Email </h2>
+                </div>
+                <div>
+                  <n-switch v-model:value="themeSwitch">
+                    <template #checked>
+                      Dark
+                    </template>
+                    <template #unchecked>
+                      Light
+                    </template>
+                  </n-switch>
+                  <n-button tag="a" target="_blank" tertiary type="primary" round
+                    href="https://github.com/dreamhunter2333/cloudflare_temp_email">Star on Github
+                  </n-button>
+                </div>
+              </n-layout-header>
               <Content />
             </n-space>
           </div>
         </n-gi>
         <n-gi span="1"></n-gi>
       </n-grid>
+      <n-back-top :right="100" />
     </n-message-provider>
+  </n-config-provider>
 </template>
 
 
+<style>
+.n-button {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.n-switch {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+</style>
+
 <style scoped>
 .side {
   height: 100vh;
@@ -45,7 +87,9 @@ import Content from './Content.vue';
   height: 100%;
 }
 
-.button-left {
+.n-layout-header {
-  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 </style>

frontend/src/Content.vue

@@ -19,7 +19,6 @@ const API_BASE = import.meta.env.VITE_API_BASE || "";
 const timer = ref(null)
 
 const setupAutoRefresh = async (autoRefresh) => {
-  console.log(autoRefresh)
   if (autoRefresh) {
     timer.value = setInterval(async () => {
       await refresh();
@@ -100,7 +99,7 @@ const newEmail = async () => {
 };
 
 const getSettings = async (jwt) => {
-  if (typeof jwt != 'string' || jwt.trim() === '') {
+  if (typeof jwt != 'string' || jwt.trim() === '' || jwt === 'undefined') {
     return;
   }
   const response = await fetch(`${API_BASE}/api/settings`, {
@@ -147,7 +146,7 @@ onMounted(async () => {
       <n-alert :type='address ? "info" : "warning"' show-icon>
         <span v-if="address">
           Your email address is <b>{{ address }}</b>
-          <n-button class="button-left" @click="copy" size="small" tertiary round type="primary">Copy</n-button>
+          <n-button @click="copy" size="small" tertiary round type="primary">Copy</n-button>
         </span>
         <span v-else>
           Please click <b>Get New Email</b> button to get a new email address
@@ -163,12 +162,12 @@ onMounted(async () => {
       </n-popconfirm>
       <n-switch v-model:value="autoRefresh">
         <template #checked>
-          Auto Refresh On
+          Auto Refresh
         </template>
         <template #unchecked>
-          Auto Refresh Off
+          Auto Refresh
         </template></n-switch>
-      <n-button class="center button-left" @click="refresh" round type="primary">
+      <n-button class="center" @click="refresh" round type="primary">
         Refresh
       </n-button>
       <n-list hoverable clickable>
@@ -202,8 +201,4 @@ onMounted(async () => {
   margin-top: 10px;
   text-align: center;
 }
-
-.button-left {
-  margin-left: 10px;
-}
 </style>