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

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",
-    "vite": "^5.2.13",
+    "unplugin-vue-components": "^0.27.2",
+    "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') }}