feat: add DOMAIN_LABELS for chinese domain label (#322)

.gitignore

@@ -1,3 +1,138 @@
 dist/
 test/
 .vscode/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.wrangler
+wrangler.toml
+.dev.vars
+pnpm-lock.yaml

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -15,9 +15,9 @@
     "deploy": "npm run build && wrangler pages deploy ./dist --branch production"
   },
   "dependencies": {
-    "@unhead/vue": "^1.9.12",
+    "@unhead/vue": "^1.9.14",
     "@vicons/material": "^0.12.0",
-    "@vueuse/core": "^10.10.1",
+    "@vueuse/core": "^10.11.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.7.2",
@@ -26,21 +26,21 @@
     "naive-ui": "^2.38.2",
     "postal-mime": "^2.2.5",
     "vooks": "^0.2.12",
-    "vue": "^3.4.27",
+    "vue": "^3.4.31",
     "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.3"
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "unplugin-auto-import": "^0.17.6",
-    "unplugin-vue-components": "^0.27.0",
+    "unplugin-vue-components": "^0.27.2",
-    "vite": "^5.2.13",
+    "vite": "^5.3.2",
     "vite-plugin-pwa": "^0.19.8",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "workbox-window": "^7.1.0",
-    "wrangler": "^3.60.2"
+    "wrangler": "^3.62.0"
   }
 }

frontend/src/api/index.js

@@ -53,15 +53,16 @@ const apiFetch = async (path, options = {}) => {
 const getOpenSettings = async (message) => {
     try {
         const res = await api.fetch("/open_api/settings");
+        const domainLabels = res["domainLabels"] || [];
         Object.assign(openSettings.value, {
             title: res["title"] || "",
             prefix: res["prefix"] || "",
             minAddressLen: res["minAddressLen"] || 1,
             maxAddressLen: res["maxAddressLen"] || 30,
             needAuth: res["needAuth"] || false,
-            domains: res["domains"].map((domain) => {
+            domains: res["domains"].map((domain, index) => {
                 return {
-                    label: domain,
+                    label: domainLabels.length > index ? domainLabels[index] : domain,
                     value: domain
                 }
             }),

frontend/src/store/index.js

@@ -15,6 +15,7 @@ export const useGlobalState = createGlobalState(
             enableUserDeleteEmail: false,
             enableAutoReply: false,
             enableIndexAbout: false,
+            /** @type {Array<{label: string, value: string}>} */
             domains: [],
             copyright: 'Dream Hunter',
             cfTurnstileSiteKey: '',

frontend/src/views/index/AddressBar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import useClipboard from 'vue-clipboard3'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { Copy, User, ExchangeAlt } from '@vicons/fa'
@@ -19,7 +19,7 @@ const router = useRouter()
 
 const {
     jwt, settings, showAddressCredential, userJwt,
-    isTelegram
+    isTelegram, openSettings
 } = useGlobalState()
 
 const { locale, t } = useI18n({
@@ -52,6 +52,17 @@ const { locale, t } = useI18n({
 const showChangeAddress = ref(false)
 const showTelegramChangeAddress = ref(false)
 const showLocalAddress = ref(false)
+const addressLabel = computed(() => {
+    if (settings.value.address) {
+        const domain = settings.value.address.split('@')[1]
+        const domainLabel = openSettings.value.domains.find(
+            d => d.value === domain
+        )?.label;
+        if (!domainLabel) return settings.value.address;
+        return settings.value.address.replace('@' + domain, `@${domainLabel}`);
+    }
+    return settings.value.address;
+})
 
 const copy = async () => {
     try {
@@ -79,7 +90,7 @@ onMounted(async () => {
         <div v-else-if="settings.address">
             <n-alert type="info" :show-icon="false">
                 <span>
-                    <b>{{ settings.address }}</b>
+                    <b>{{ addressLabel }}</b>
                     <n-button v-if="isTelegram" style="margin-left: 10px" @click="showTelegramChangeAddress = true"
                         size="small" tertiary type="primary">
                         <n-icon :component="ExchangeAlt" /> {{ t('addressManage') }}

vitepress-docs/docs/en/cli.md

@@ -86,6 +86,8 @@ PREFIX = "tmp" # The mailbox name prefix to be processed
 # admin contact information. If not configured, it will not be displayed. Any string can be configured.
 # ADMIN_CONTACT = "xx@xx.xxx"
 DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # your domain name
+# For chinese domain name, you can use DOMAIN_LABELS to show chinese domain name
+# DOMAIN_LABELS = ["中文.xxx", "xxx.xxx2"]
 JWT_SECRET = "xxx" # Key used to generate jwt
 BLACK_LIST = "" # Blacklist, used to filter senders, comma separated
 # Allow users to create email addresses

vitepress-docs/docs/zh/guide/cli/worker.md

@@ -54,6 +54,8 @@ PREFIX = "tmp" # 要处理的邮箱名称前缀，不需要后缀可配置为空
 # admin 联系方式，不配置则不显示，可配置任意字符串
 # ADMIN_CONTACT = "xx@xx.xxx"
 DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # 你的域名, 支持多个域名
+# 对于中文域名，可以使用 DOMAIN_LABELS 显示域名的中文展示名称
+# DOMAIN_LABELS = ["中文.xxx", "xxx.xxx2"]
 JWT_SECRET = "xxx" # 用于生成 jwt 的密钥, jwt 用于给用户登录以及鉴权
 BLACK_LIST = "" # 黑名单，用于过滤发件人，逗号分隔
 # 是否允许用户创建邮件, 不配置则不允许

vitepress-docs/package.json

@@ -4,9 +4,9 @@
   "version": "0.2.6",
   "type": "module",
   "devDependencies": {
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.9",
     "vitepress": "^1.2.3",
-    "wrangler": "^3.60.2"
+    "wrangler": "^3.62.0"
   },
   "scripts": {
     "dev": "vitepress dev docs",

worker/package.json

@@ -11,20 +11,20 @@
     "build": "wrangler deploy --dry-run --outdir dist --minify"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20240605.0",
+    "@cloudflare/workers-types": "^4.20240620.0",
     "@eslint/js": "8.56.0",
     "eslint": "8.56.0",
-    "globals": "^15.4.0",
+    "globals": "^15.6.0",
-    "typescript-eslint": "^7.13.0",
+    "typescript-eslint": "^7.14.1",
-    "wrangler": "^3.60.2"
+    "wrangler": "^3.62.0"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.592.0",
+    "@aws-sdk/client-s3": "^3.600.0",
-    "@aws-sdk/s3-request-presigner": "^3.592.0",
+    "@aws-sdk/s3-request-presigner": "^3.600.0",
-    "hono": "^4.4.5",
+    "hono": "^4.4.9",
     "mimetext": "^3.0.24",
     "postal-mime": "^2.2.5",
-    "resend": "^3.3.0",
+    "resend": "^3.4.0",
     "telegraf": "4.16.3"
   },
   "pnpm": {

worker/src/commom_api.ts

@@ -1,6 +1,6 @@
 import { Hono } from 'hono'
 
-import { getDomains, getPasswords, getBooleanValue, getIntValue } from './utils';
+import { getDomains, getPasswords, getBooleanValue, getIntValue, getStringArray } from './utils';
 import { CONSTANTS } from './constants';
 import { HonoCustomType } from './types';
 import { isS3Enabled } from './mails_api/s3_attachment';
@@ -21,6 +21,7 @@ api.get('/open_api/settings', async (c) => {
         "minAddressLen": getIntValue(c.env.MIN_ADDRESS_LEN, 1),
         "maxAddressLen": getIntValue(c.env.MAX_ADDRESS_LEN, 30),
         "domains": getDomains(c),
+        "domainLabels": getStringArray(c.env.DOMAIN_LABELS),
         "needAuth": needAuth,
         "adminContact": c.env.ADMIN_CONTACT,
         "enableUserCreateEmail": getBooleanValue(c.env.ENABLE_USER_CREATE_EMAIL),

worker/src/constants.ts

@@ -1,5 +1,5 @@
 export const CONSTANTS = {
-    VERSION: 'v0.5.2',
+    VERSION: 'v0.5.3',
 
     // DB settings
     ADDRESS_BLOCK_LIST_KEY: 'address_block_list',

worker/src/types.d.ts

@@ -11,6 +11,7 @@ export type Bindings = {
     MIN_ADDRESS_LEN: string | number | undefined
     MAX_ADDRESS_LEN: string | number | undefined
     DOMAINS: string | string[] | undefined
+    DOMAIN_LABELS: string | string[] | undefined
     PASSWORDS: string | string[] | undefined
     ADMIN_PASSWORDS: string | string[] | undefined
     JWT_SECRET: string

worker/src/utils.ts

@@ -79,6 +79,24 @@ export const getIntValue = (
     return defaultValue;
 }
 
+export const getStringArray = (
+    value: string | string[] | undefined | null
+): string[] => {
+    if (!value) {
+        return [];
+    }
+    // check if value is an array, if not use json.parse
+    if (!Array.isArray(value)) {
+        try {
+            return JSON.parse(value);
+        } catch (e) {
+            console.error("Failed to parse value", e);
+            return [];
+        }
+    }
+    return value;
+}
+
 export const getDomains = (c: Context<HonoCustomType>): string[] => {
     if (!c.env.DOMAINS) {
         return [];

worker/wrangler.toml.template

@@ -28,6 +28,8 @@ PREFIX = "tmp"
 # ADMIN CONTACT, CAN BE ANY STRING
 # ADMIN_CONTACT = "xx@xx.xxx"
 DOMAINS = ["xxx.xxx1" , "xxx.xxx2"]
+# For chinese domain name, you can use DOMAIN_LABELS to show chinese domain name
+# DOMAIN_LABELS = ["中文.xxx", "xxx.xxx2"]
 JWT_SECRET = "xxx"
 BLACK_LIST = ""
 # Allow users to create email addresses