feat: add vhooks (#43)

frontend/package.json

@@ -9,9 +9,11 @@
     "deploy": "npm run build && wrangler pages deploy ../dist --branch production"
   },
   "dependencies": {
+    "@vicons/material": "^0.12.0",
     "@vueuse/core": "^10.7.0",
     "axios": "^1.6.2",
     "naive-ui": "^2.35.0",
+    "vooks": "^0.2.12",
     "vue": "^3.3.11",
     "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.8.0",
@@ -19,7 +21,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
-    "vite-plugin-pwa": "^0.17.4",
-    "vite": "^4.5.1"
+    "vite": "^4.5.1",
+    "vite-plugin-pwa": "^0.17.4"
   }
 }

frontend/pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@vicons/material':
+    specifier: ^0.12.0
+    version: 0.12.0
   '@vueuse/core':
     specifier: ^10.7.0
     version: 10.7.0(vue@3.3.11)
@@ -14,6 +17,9 @@ dependencies:
   naive-ui:
     specifier: ^2.35.0
     version: 2.35.0(vue@3.3.11)
+  vooks:
+    specifier: ^0.2.12
+    version: 0.2.12(vue@3.3.11)
   vue:
     specifier: ^3.3.11
     version: 3.3.11
@@ -1622,6 +1628,10 @@ packages:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: false
 
+  /@vicons/material@0.12.0:
+    resolution: {integrity: sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==}
+    dev: false
+
   /@vitejs/plugin-vue@4.5.2(vite@4.5.1)(vue@3.3.11):
     resolution: {integrity: sha512-UGR3DlzLi/SaVBPX0cnSyE37vqxU3O6chn8l0HJNzQzDia6/Au2A4xKv+iIJW8w2daf80G7TYHhi1pAUjdZ0bQ==}
     engines: {node: ^14.18.0 || >=16.0.0}

frontend/src/App.vue

@@ -56,11 +56,6 @@ onMounted(async () => {
 
 
 <style>
-.n-button {
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
 .n-switch {
   margin-left: 10px;
   margin-right: 10px;

frontend/src/utils/composables.js

@@ -0,0 +1,8 @@
+import { useBreakpoint, useMemo } from 'vooks'
+
+export function useIsMobile() {
+    const breakpointRef = useBreakpoint()
+    return useMemo(() => {
+        return breakpointRef.value === 'xs'
+    })
+}

frontend/src/views/Content.vue

@@ -168,7 +168,7 @@ onMounted(async () => {
         {{ t('refresh') }}
       </n-button>
       <n-list hoverable clickable>
-        <div style="display: inline-block; margin-bottom: 10px;">
+        <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
           <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple />
         </div>
         <n-list-item v-for="row in data" v-bind:key="row.id">
@@ -236,7 +236,6 @@ onMounted(async () => {
 }
 
 .n-list {
-  margin-top: 10px;
   text-align: center;
 }
 </style>

frontend/src/views/Header.vue

@@ -1,16 +1,20 @@
 <script setup>
 import { NGrid, NLayoutHeader, NInput } from 'naive-ui'
-import { NButton, NSelect, NModal } from 'naive-ui'
+import { NButton, NSelect, NModal, NIcon, NMenu } from 'naive-ui'
 import { NSwitch, NPopconfirm } from 'naive-ui'
-import { ref } from 'vue'
+import { ref, h } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { useIsMobile } from '../utils/composables'
+import { DarkModeFilled, DarkModeOutlined, StarOutlineFilled, MenuFilled } from '@vicons/material'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
 
 const { jwt, localeCache, themeSwitch, showAuth, adminAuth, auth } = useGlobalState()
 const router = useRouter()
+const isMobile = useIsMobile()
+
 const showLogin = ref(false)
 const password = ref('')
 
@@ -67,46 +71,106 @@ const { t } = useI18n({
         }
     }
 });
+
+
+const menuOptions = [
+    {
+        label: () => h(
+            NButton,
+            {
+                tertiary: true,
+                ghost: true,
+                onClick: () => router.push('/admin')
+            },
+            { default: () => "Admin" }
+        ),
+        show: !!adminAuth.value,
+        key: "home"
+    },
+    {
+        label: () => h(
+            NButton,
+            {
+                tertiary: true,
+                ghost: true,
+                onClick: () => localeCache.value == 'zh' ? changeLocale('en') : changeLocale('zh')
+            },
+            {
+                default: () => localeCache.value == 'zh' ? "English" : "中文"
+            }
+        ),
+        key: "lang"
+    },
+    {
+        label: () => h(
+            NButton,
+            {
+                tertiary: true,
+                ghost: true,
+                onClick: () => { showLogin.value = true }
+            },
+            { default: () => t('login') }
+        ),
+        show: !jwt.value,
+        key: "login"
+    },
+    {
+        label: () => h(
+            NPopconfirm,
+            {
+                onPositiveClick: () => logout()
+            },
+            {
+                trigger: () => h(NButton, {
+                    tertiary: true,
+                    ghost: true,
+                }, () => t('logout')
+                ),
+                default: () => t('logoutConfirm')
+            }
+        ),
+        show: !!jwt.value,
+        key: "logout"
+    }
+];
+
+const menuOptionsMobile = [
+    {
+        label: () => h(
+            NIcon,
+            {
+                component: MenuFilled
+            }
+        ),
+        key: "menu",
+        children: menuOptions
+    },
+]
 </script>
 
 <template>
-    <n-layout-header>
-        <div>
-            <h2>{{ t('title') }}</h2>
-        </div>
-        <div>
-            <n-button v-if="localeCache == 'zh'" @click="changeLocale('en')">English</n-button>
-            <n-button v-else @click="changeLocale('zh')">中文</n-button>
-            <n-button v-if="adminAuth" tertiary @click="() => router.push('/admin')" type="primary">
-                Admin
-            </n-button>
-            <n-switch v-model:value="themeSwitch">
-                <template #checked>
-                    {{ t('dark') }}
-                </template>
-                <template #unchecked>
-                    {{ t('light') }}
-                </template>
-            </n-switch>
-            <n-popconfirm v-if="jwt" @positive-click="logout">
-                <template #trigger>
-                    <n-button tertiary round type="primary">
-                        {{ t('logout') }}
-                    </n-button>
-                </template>
-                <template #default>
-                    <span>
-                        {{ t('logoutConfirm') }}
-                    </span>
-                </template>
-            </n-popconfirm>
-            <n-button v-else tertiary @click="showLogin = true" round type="primary">
-                {{ t('login') }}
-            </n-button>
-            <n-button tag="a" target="_blank" tertiary type="primary" round
-                href="https://github.com/dreamhunter2333/cloudflare_temp_email">Star on Github
-            </n-button>
-        </div>
+    <div>
+        <n-layout-header>
+            <div>
+                <h2 v-if="!isMobile" style="display: inline-block; margin-left: 10px;">{{ t('title') }}</h2>
+                <n-menu v-if="!isMobile" mode="horizontal" :options="menuOptions" />
+                <n-menu v-else mode="horizontal" :options="menuOptionsMobile" />
+            </div>
+            <div>
+                <n-switch v-model:value="themeSwitch" :size="isMobile ? 'small' : 'medium'">
+                    <template #checked-icon>
+                        <n-icon :component="DarkModeFilled" />
+                    </template>
+                    <template #unchecked-icon>
+                        <n-icon :component="DarkModeOutlined" />
+                    </template>
+                </n-switch>
+                <n-button tag="a" target="_blank" tertiary type="primary" round :size="isMobile ? 'small' : 'medium'"
+                    href="https://github.com/dreamhunter2333/cloudflare_temp_email">
+                    <n-icon :component="StarOutlineFilled" /> Github
+                </n-button>
+            </div>
+        </n-layout-header>
         <n-modal v-model:show="showLogin" preset="dialog" title="Dialog">
             <template #header>
                 <div>{{ t('login') }}</div>
@@ -135,7 +199,7 @@ const { t } = useI18n({
                 </n-button>
             </template>
         </n-modal>
-    </n-layout-header>
+    </div>
 </template>
 
 <style scoped>