fix: UI overflow (#111)

* feat: UI overflow

* feat: add domain

README.md

@@ -4,7 +4,7 @@
 
 [CHANGELOG](CHANGELOG.md)
 
-[Backend](https://temp-email-api.dreamhunter2333.xyz/)
+[Backend](https://temp-email-api.awsl.uk/)
 ![](https://uptime.aks.awsl.icu/api/badge/10/status)
 ![](https://uptime.aks.awsl.icu/api/badge/10/uptime)
 ![](https://uptime.aks.awsl.icu/api/badge/10/ping)
@@ -12,7 +12,7 @@
 ![](https://uptime.aks.awsl.icu/api/badge/10/cert-exp)
 ![](https://uptime.aks.awsl.icu/api/badge/10/response)
 
-[Frontend](https://temp-email.dreamhunter2333.xyz/)
+[Frontend](https://mail.awsl.uk/)
 ![](https://uptime.aks.awsl.icu/api/badge/12/status)
 ![](https://uptime.aks.awsl.icu/api/badge/12/uptime)
 ![](https://uptime.aks.awsl.icu/api/badge/12/ping)
@@ -40,7 +40,11 @@
   - [Cloudflare Pages 前端](#cloudflare-pages-前端)
   - [参考资料](#参考资料)
 
-## [在线演示](https://temp-email.dreamhunter2333.xyz/)
+## [在线演示](https://mail.awsl.uk/)
+
+[https://mail.awsl.uk](https://mail.awsl.uk/)
+
+或者 [https://temp-email.dreamhunter2333.xyz](https://temp-email.dreamhunter2333.xyz/)
 
 ## 功能/TODO
 

README_EN.md

@@ -4,7 +4,9 @@
 
 [CHANGELOG](CHANGELOG.md)
 
-## [Live Demo](https://temp-email.dreamhunter2333.xyz/)
+## [Live Demo](https://mail.awsl.uk/)
+
+[https://mail.awsl.uk](https://mail.awsl.uk/)
 
 This is a temporary email service that uses Cloudflare Workers to create a temporary email address and view the received email in web browser.
 

frontend/src/views/Header.vue

@@ -77,6 +77,7 @@ const { t } = useI18n({
             getNewEmail: 'Get New Email',
             getNewEmailTip1: 'Please input the email you want to use. only allow ., a-z, A-Z and 0-9',
             getNewEmailTip2: 'Levaing it blank will generate a random email address.',
+            getNewEmailTip3: 'You can choose a domain from the dropdown list.',
             yourAddress: 'Your email address is',
             password: 'Password',
             passwordTip: 'Please copy the password and you can use it to login to your email account.', cancel: 'Cancel',
@@ -107,6 +108,7 @@ const { t } = useI18n({
             getNewEmail: '获取新邮箱',
             getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许 ., a-z, A-Z, 0-9',
             getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
+            getNewEmailTip3: '你可以从下拉列表中选择一个域名。',
             yourAddress: '你的邮箱地址是',
             password: '密码',
             passwordTip: '请复制密码，你可以使用它登录你的邮箱。',
@@ -376,7 +378,7 @@ onMounted(async () => {
                 <n-alert v-if="settings.has_v1_mails" type="warning" show-icon closable>
                     <span>
                         <n-button tag="a" target="_blank" tertiary type="info" size="small"
-                            href="https://temp-email-v1.dreamhunter2333.xyz/">
+                            href="https://mail-v1.awsl.uk">
                             <b>{{ t('mailV1Alert') }} </b>
                         </n-button>
                     </span>
@@ -414,6 +416,7 @@ onMounted(async () => {
                 <span>
                     <p>{{ t("getNewEmailTip1") }}</p>
                     <p>{{ t("getNewEmailTip2") }}</p>
+                    <p>{{ t("getNewEmailTip3") }}</p>
                 </span>
                 <n-button @click="generateName" style="margin-bottom: 10px;">
                     {{ t('generateName') }}

frontend/src/views/Index.vue

@@ -133,7 +133,7 @@ onMounted(async () => {
             <n-list hoverable clickable>
               <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
                 :class="mailItemClass(row)">
-                <n-thing class="center" :title="row.subject" style="overflow: scroll">
+                <n-thing class="center" :title="row.subject">
                   <template #description>
                     <n-tag type="info">
                       ID: {{ row.id }}
@@ -151,7 +151,7 @@ onMounted(async () => {
           </div>
         </template>
         <template #2>
-          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto;">
+          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto; max-height: 100vh;">
             <n-space>
               <n-tag type="info">
                 ID: {{ curMail.id }}
@@ -172,7 +172,7 @@ onMounted(async () => {
                 {{ t('downloadMail') }}
               </n-button>
             </n-space>
-            <div v-html="curMail.message" style="margin-top: 10px;max-height: 100vh;"></div>
+            <div v-html="curMail.message" style="margin-top: 10px;"></div>
           </n-card>
           <n-card class="mail-item" v-else>
             <n-result status="info" :title="t('pleaseSelectMail')">
@@ -196,10 +196,10 @@ onMounted(async () => {
             {{ t('refresh') }}
           </n-button>
         </div>
-        <div id="drawer-target" style="overflow: auto; max-height: 80vh;">
+        <div id="drawer-target" 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)">
-              <n-thing class="center" :title="row.subject" style="overflow: scroll">
+              <n-thing class="center" :title="row.subject">
                 <template #description>
                   <n-tag type="info">
                     ID: {{ row.id }}
@@ -234,11 +234,11 @@ onMounted(async () => {
                 </n-button>
                 <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curMail.id + '.eml'"
                   :href="getDownloadEmlUrl(curMail)">
-                  {{ t('downloadMail') }}
                   <n-icon :component="CloudDownloadRound" />
+                  {{ t('downloadMail') }}
                 </n-button>
               </n-space>
-              <div v-html="curMail.message" style="max-height: 100vh;"></div>
+              <div v-html="curMail.message" style="margin-top: 10px;"></div>
             </n-card>
           </n-drawer-content>
         </n-drawer>
@@ -275,7 +275,6 @@ onMounted(async () => {
 
 <style scoped>
 .left {
-  overflow: auto;
   text-align: left;
 }
 

worker/wrangler.toml.template

@@ -2,6 +2,10 @@ name = "cloudflare_temp_email"
 main = "src/worker.js"
 compatibility_date = "2023-12-01"
 node_compat = true
+# if you want use custom_domain, you need to add routes
+# routes = [
+# 	{ pattern = "temp-email-api.xxxxx.xyz", custom_domain = true },
+# ]
 
 [vars]
 PREFIX = "tmp"