From 8fba01eb4b109a8b697c8efc31a0a42f0e69e68e Mon Sep 17 00:00:00 2001
From: Dream Hunter <dreamhunter2333@gmail.com>
Date: Sun, 31 Mar 2024 17:29:37 +0800
Subject: [PATCH] feat: UI: add menu icon (#85)

---
 frontend/package.json          |   1 +
 frontend/pnpm-lock.yaml        |   7 ++
 frontend/src/views/Content.vue |   9 +-
 frontend/src/views/Header.vue  | 155 +++++++++++++++++++++++----------
 4 files changed, 123 insertions(+), 49 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2f843643..b7aa0ed5 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
+    "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "vite": "^5.2.6",
     "vite-plugin-pwa": "^0.19.7",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index a0e90786..626a20e9 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -34,6 +34,9 @@ dependencies:
     version: 4.3.0(vue@3.4.21)
 
 devDependencies:
+  '@vicons/fa':
+    specifier: ^0.12.0
+    version: 0.12.0
   '@vitejs/plugin-vue':
     specifier: ^4.6.2
     version: 4.6.2(vite@5.2.6)(vue@3.4.21)
@@ -1755,6 +1758,10 @@ packages:
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
     dev: false
 
+  /@vicons/fa@0.12.0:
+    resolution: {integrity: sha512-g2PIeJLsTHUjt6bK63LxqC0uYQB7iu+xViJOxvp1s8b9/akpXVPVWjDTTsP980/0KYyMMe4U7F/aUo7wY+MsXA==}
+    dev: true
+
   /@vicons/material@0.12.0:
     resolution: {integrity: sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==}
     dev: false
diff --git a/frontend/src/views/Content.vue b/frontend/src/views/Content.vue
index 2ea134f7..2ab8ad76 100644
--- a/frontend/src/views/Content.vue
+++ b/frontend/src/views/Content.vue
@@ -4,7 +4,6 @@ import { NButton, NLayout, NInputGroup, NModal, NSelect, NPagination } from 'nai
 import { NList, NListItem, NThing, NTag, NIcon, NSplit, NResult } from 'naive-ui'
 import { NDrawer, NDrawerContent } from 'naive-ui'
 import { watch, onMounted, ref } from "vue";
-import useClipboard from 'vue-clipboard3'
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
@@ -119,6 +118,10 @@ const getAttachments = async (attachment_id) => {
   }
 };
 
+const mailItemClass = (row) => {
+  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
+};
+
 onMounted(async () => {
   await api.getSettings();
   await refresh();
@@ -128,7 +131,7 @@ onMounted(async () => {
 <template>
   <div>
     <n-layout v-if="settings.address">
-      <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" default-size="0.25">
+      <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" :default-size="0.25">
         <template #1>
           <div>
             <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
@@ -148,7 +151,7 @@ onMounted(async () => {
           <div style="overflow: scroll; max-height: 80vh;">
             <n-list hoverable clickable>
               <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
-                :class="curMail && row.id == curMail.id ? (themeSwitch ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : ''">
+                :class="mailItemClass(row)">
                 <n-thing class="center" :title="row.subject" style="overflow: scroll">
                   <template #description>
                     <n-tag type="info">
diff --git a/frontend/src/views/Header.vue b/frontend/src/views/Header.vue
index f34a4713..82a43bfb 100644
--- a/frontend/src/views/Header.vue
+++ b/frontend/src/views/Header.vue
@@ -9,7 +9,8 @@ import { ref, h, computed, onMounted } 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 { DarkModeFilled, LightModeFilled, MenuFilled } from '@vicons/material'
+import { GithubAlt, Language, User, Home, Copy } from '@vicons/fa'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
@@ -71,6 +72,7 @@ const { t } = useI18n({
             settings: 'Settings',
             home: 'Home',
             menu: 'Menu',
+            user: 'User',
             pleaseGetNewEmail: 'Please login or click "Get New Email" button to get a new email address',
             getNewEmail: 'Get New Email',
             getNewEmailTip1: 'Please input the email you want to use.',
@@ -81,7 +83,8 @@ const { t } = useI18n({
             ok: 'OK',
             copy: 'Copy',
             copied: 'Copied',
-            showPassword: 'Show Password', fetchAddressError: 'Fetch address error, maybe your jwt is invalid or network error.',
+            showPassword: 'Show Password',
+            fetchAddressError: 'Fetch address error, maybe your jwt is invalid or network error.',
         },
         zh: {
             title: 'Cloudflare 临时邮件',
@@ -95,6 +98,7 @@ const { t } = useI18n({
             settings: '设置',
             home: '主页',
             menu: '菜单',
+            user: '用户',
             pleaseGetNewEmail: '请"登录"或点击 "获取新邮箱" 按钮来获取一个新的邮箱地址',
             getNewEmail: '获取新邮箱',
             getNewEmailTip1: '请输入你想要使用的邮箱地址。',
@@ -106,7 +110,7 @@ const { t } = useI18n({
             ok: '确定',
             copy: '复制',
             copied: '已复制',
-            showPassword: '显示密码',
+            showPassword: '查看密码',
             fetchAddressError: '获取地址失败, 请检查你的 jwt 是否有效 或 网络是否正常。',
         }
     }
@@ -118,11 +122,15 @@ const menuOptions = computed(() => [
         label: () => h(
             NButton,
             {
-                tertiary: true,
+                bordered: false,
                 ghost: true,
+                size: "small",
                 onClick: () => router.push('/')
             },
-            { default: () => t('home') }
+            {
+                default: () => t('home'),
+                icon: () => h(NIcon, { component: Home })
+            }
         ),
         key: "home"
     },
@@ -130,8 +138,9 @@ const menuOptions = computed(() => [
         label: () => h(
             NButton,
             {
-                tertiary: true,
+                bordered: false,
                 ghost: true,
+                size: "small",
                 onClick: () => router.push('/admin')
             },
             { default: () => "Admin" }
@@ -143,12 +152,91 @@ const menuOptions = computed(() => [
         label: () => h(
             NButton,
             {
-                tertiary: true,
+                bordered: false,
                 ghost: true,
+                size: "small",
+            },
+            {
+                default: () => t('user'),
+                icon: () => h(NIcon, { component: User }),
+            }
+        ),
+        show: !!settings.value.address,
+        key: "user",
+        children: [
+            {
+                label: () => h(
+                    NButton,
+                    {
+                        tertiary: true,
+                        ghost: true,
+                        size: "small",
+                        onClick: () => { showPassword.value = true }
+                    },
+                    { default: () => t('showPassword') }
+                ),
+                key: "showPassword"
+            },
+            {
+                label: () => h(
+                    NButton,
+                    {
+                        tertiary: true,
+                        ghost: true,
+                        size: "small",
+                        onClick: () => { router.push('/settings') }
+                    },
+                    { default: () => t('settings') }
+                ),
+                key: "settings"
+            },
+            {
+                label: () => h(
+                    NButton,
+                    {
+                        tertiary: true,
+                        ghost: true,
+                        size: "small",
+                        onClick: () => { showLogout.value = true }
+                    },
+                    { default: () => t('logout') }
+                ),
+                key: "logout"
+            }
+        ]
+    },
+    {
+        label: () => h(
+            NButton,
+            {
+                bordered: false,
+                ghost: true,
+                size: "small",
+                onClick: () => { themeSwitch.value = !themeSwitch.value }
+            },
+            {
+                default: () => themeSwitch.value ? t('light') : t('dark'),
+                icon: () => h(
+                    NIcon, { component: themeSwitch.value ? LightModeFilled : DarkModeFilled }
+                )
+            }
+        ),
+        key: "theme"
+    },
+    {
+        label: () => h(
+            NButton,
+            {
+                bordered: false,
+                ghost: true,
+                size: "small",
                 onClick: () => localeCache.value == 'zh' ? changeLocale('en') : changeLocale('zh')
             },
             {
-                default: () => localeCache.value == 'zh' ? "English" : "中文"
+                default: () => localeCache.value == 'zh' ? "English" : "中文",
+                icon: () => h(
+                    NIcon, { component: Language }
+                )
             }
         ),
         key: "lang"
@@ -157,27 +245,19 @@ const menuOptions = computed(() => [
         label: () => h(
             NButton,
             {
-                tertiary: true,
+                bordered: !isMobile.value,
                 ghost: true,
-                onClick: () => { showLogout.value = true }
+                size: "small",
+                tag: "a",
+                target: "_blank",
+                href: "https://github.com/dreamhunter2333/cloudflare_temp_email",
             },
-            { default: () => t('logout') }
-        ),
-        show: !!jwt.value,
-        key: "logout"
-    },
-    {
-        label: () => h(
-            NButton,
             {
-                tertiary: true,
-                ghost: true,
-                onClick: () => { router.push('/settings') }
-            },
-            { default: () => t('settings') }
+                default: () => "Github",
+                icon: () => h(NIcon, { component: GithubAlt })
+            }
         ),
-        show: !!settings.value.address,
-        key: "settings"
+        key: "github"
     }
 ]);
 
@@ -230,37 +310,20 @@ onMounted(async () => {
 <template>
     <div>
         <n-layout-header>
-            <h2 v-if="!isMobile" style="display: inline-block; margin-left: 10px;">{{ t('title') }}</h2>
+            <h2 style="display: inline-block; margin-left: 10px;">{{ t('title') }}</h2>
             <div>
                 <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-card v-if="!settings.fetched">
             <n-skeleton style="height: 50vh" />
         </n-card>
         <n-alert v-else-if="settings.address" type="info" show-icon>
             <span>
-                {{ t('yourAddress') }} <b>{{ settings.address }}</b>
-                <n-button size="small" class="center" @click="showPassword = true" tertiary round type="primary">
-                    {{ t('showPassword') }}
-                </n-button>
-                <n-button @click="copy" size="small" tertiary round type="primary">
-                    {{ t('copy') }}
+                <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
+                <n-button style="margin-left: 10px" @click="copy" size="small" tertiary round type="primary">
+                    <n-icon :component="Copy" /> {{ t('copy') }}
                 </n-button>
             </span>
         </n-alert>