feat: UI use fakerjs cdn && overflow: auto (#108)

frontend/package.json

@@ -23,7 +23,6 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@faker-js/faker": "^8.4.1",
     "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "unplugin-auto-import": "^0.17.5",

frontend/pnpm-lock.yaml

@@ -40,9 +40,6 @@ dependencies:
     version: 4.3.0(vue@3.4.21)
 
 devDependencies:
-  '@faker-js/faker':
-    specifier: ^8.4.1
-    version: 8.4.1
   '@vicons/fa':
     specifier: ^0.12.0
     version: 0.12.0
@@ -1484,11 +1481,6 @@ packages:
     dev: true
     optional: true
 
-  /@faker-js/faker@8.4.1:
-    resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'}
-    dev: true
-
   /@intlify/core-base@9.10.2:
     resolution: {integrity: sha512-HGStVnKobsJL0DoYIyRCGXBH63DMQqEZxDUGrkNI05FuTcruYUtOAxyL3zoAZu/uDGO6mcUvm3VXBaHG2GdZCg==}
     engines: {node: '>= 16'}

frontend/src/views/Header.vue

@@ -6,7 +6,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
 import { DarkModeFilled, LightModeFilled, MenuFilled, AdminPanelSettingsFilled } from '@vicons/material'
 import { GithubAlt, Language, User, Home, Copy } from '@vicons/fa'
-import { faker } from '@faker-js/faker';
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
@@ -309,12 +308,21 @@ const copy = async () => {
     }
 }
 
+const generateNameLoading = ref(false);
 const generateName = async () => {
-    emailName.value = faker.person
+    try {
-        .fullName()
+        generateNameLoading.value = true;
-        .replace(/\s+/g, '.')
+        const { faker } = await import('https://esm.sh/@faker-js/faker');
-        .replace(/[^a-zA-Z0-9.]/g, '')
+        emailName.value = faker.person
-        .toLowerCase();
+            .fullName()
+            .replace(/\s+/g, '.')
+            .replace(/[^a-zA-Z0-9.]/g, '')
+            .toLowerCase();
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        generateNameLoading.value = false;
+    }
 };
 
 const newEmail = async () => {
@@ -402,21 +410,24 @@ onMounted(async () => {
             <template #header>
                 <div>{{ t('getNewEmail') }}</div>
             </template>
-            <span>
+            <n-spin :show="generateNameLoading">
-                <p>{{ t("getNewEmailTip1") }}</p>
+                <span>
-                <p>{{ t("getNewEmailTip2") }}</p>
+                    <p>{{ t("getNewEmailTip1") }}</p>
-            </span>
+                    <p>{{ t("getNewEmailTip2") }}</p>
-            <n-button @click="generateName" style="margin-bottom: 10px;">
+                </span>
-                {{ t('generateName') }}
+                <n-button @click="generateName" style="margin-bottom: 10px;">
-            </n-button>
+                    {{ t('generateName') }}
-            <n-input-group>
+                </n-button>
-                <n-input-group-label v-if="openSettings.prefix">
+                <n-input-group>
-                    {{ openSettings.prefix }}
+                    <n-input-group-label v-if="openSettings.prefix">
-                </n-input-group-label>
+                        {{ openSettings.prefix }}
-                <n-input v-model:value="emailName" />
+                    </n-input-group-label>
-                <n-input-group-label>@</n-input-group-label>
+                    <n-input v-model:value="emailName" />
-                <n-select v-model:value="emailDomain" :consistent-menu-width="false" :options="openSettings.domains" />
+                    <n-input-group-label>@</n-input-group-label>
-            </n-input-group>
+                    <n-select v-model:value="emailDomain" :consistent-menu-width="false"
+                        :options="openSettings.domains" />
+                </n-input-group>
+            </n-spin>
             <template #action>
                 <n-button @click="showNewEmail = false">
                     {{ t('cancel') }}

frontend/src/views/Index.vue

@@ -129,7 +129,7 @@ onMounted(async () => {
               {{ t('refresh') }}
             </n-button>
           </div>
-          <div style="overflow: scroll; height: 80vh;">
+          <div style="overflow: auto; height: 80vh;">
             <n-list hoverable clickable>
               <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
                 :class="mailItemClass(row)">
@@ -151,7 +151,7 @@ onMounted(async () => {
           </div>
         </template>
         <template #2>
-          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: scroll;">
+          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto;">
             <n-space>
               <n-tag type="info">
                 ID: {{ curMail.id }}
@@ -196,7 +196,7 @@ onMounted(async () => {
             {{ t('refresh') }}
           </n-button>
         </div>
-        <div id="drawer-target" style="overflow: scroll; max-height: 80vh;">
+        <div id="drawer-target" style="overflow: auto; max-height: 80vh;">
           <n-list hoverable clickable>
             <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
               <n-thing class="center" :title="row.subject" style="overflow: scroll">
@@ -217,7 +217,7 @@ onMounted(async () => {
         </div>
         <n-drawer v-model:show="curMail" width="100%" :trap-focus="false" :block-scroll="false" to="#drawer-target">
           <n-drawer-content :title="curMail.subject" closable>
-            <n-card style="overflow: scroll;">
+            <n-card style="overflow: auto;">
               <n-space>
                 <n-tag type="info">
                   ID: {{ curMail.id }}
@@ -275,7 +275,7 @@ onMounted(async () => {
 
 <style scoped>
 .left {
-  overflow: scroll;
+  overflow: auto;
   text-align: left;
 }