GithubBackup/cloudflare_temp_email
1
0
Fork 0
mirror of https://github.com/dreamhunter2333/cloudflare_temp_email.git synced 2026-06-05 15:40:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dream Hunter
2024-04-09 21:58:07 +08:00
committed by GitHub
parent 42a828e98b
commit 37a9b0557a
4 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/views/Header.vue
View File

@@ -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
.fullName()
.replace(/\s+/g, '.')
.replace(/[^a-zA-Z0-9.]/g, '')
.toLowerCase();
try {
generateNameLoading.value = true;
const { faker } = await import('https://esm.sh/@faker-js/faker');
emailName.value = faker.person
.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>
<p>{{ t("getNewEmailTip1") }}</p>
<p>{{ t("getNewEmailTip2") }}</p>
</span>
<n-button @click="generateName" style="margin-bottom: 10px;">
{{ t('generateName') }}
</n-button>
<n-input-group>
<n-input-group-label v-if="openSettings.prefix">
{{ openSettings.prefix }}
</n-input-group-label>
<n-input v-model:value="emailName" />
<n-input-group-label>@</n-input-group-label>
<n-select v-model:value="emailDomain" :consistent-menu-width="false" :options="openSettings.domains" />
</n-input-group>
<n-spin :show="generateNameLoading">
<span>
<p>{{ t("getNewEmailTip1") }}</p>
<p>{{ t("getNewEmailTip2") }}</p>
</span>
<n-button @click="generateName" style="margin-bottom: 10px;">
{{ t('generateName') }}
</n-button>
<n-input-group>
<n-input-group-label v-if="openSettings.prefix">
{{ openSettings.prefix }}
</n-input-group-label>
<n-input v-model:value="emailName" />
<n-input-group-label>@</n-input-group-label>
<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') }}

10
frontend/src/views/Index.vue
View File

@@ -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;
}