feat: Implement Punycode utility functions and integrate into domain dispay (#11433)

* feat: Implement Punycode utility functions and integrate into domain display

* chore: Add punycode package and update import path in utility functions

frontend/package.json

@@ -47,6 +47,7 @@
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "pinia-plugin-persistedstate": "^1.6.1",
+        "punycode": "^2.3.1",
         "qs": "^6.12.1",
         "screenfull": "^6.0.2",
         "uuid": "^10.0.0",

frontend/src/utils/util.ts

@@ -7,6 +7,7 @@ import { v4 as uuidv4 } from 'uuid';
 import JSEncrypt from 'jsencrypt';
 import CryptoJS from 'crypto-js';
 import { routerToPathWithQuery } from './router';
+import { toUnicode } from 'punycode';
 
 export function deepCopy<T>(obj: any): T {
     let newObj: any;
@@ -919,3 +920,30 @@ export function sortMenu(arr) {
 
     arr.sort(compareById);
 }
+
+export function isPunycoded(domain: string): boolean {
+    return domain.includes('xn--');
+}
+
+export function GetPunyCodeDomain(domain: string): string {
+    if (!domain || typeof domain !== 'string') {
+        return '';
+    }
+
+    const lowerDomain = domain.toLowerCase();
+    if (!lowerDomain.includes('xn--')) {
+        return '';
+    }
+
+    try {
+        const decoded = toUnicode(domain);
+
+        if (decoded === domain) {
+            return '';
+        }
+
+        return decoded;
+    } catch (error) {
+        return '';
+    }
+}

frontend/src/views/website/website/config/basic/domain/index.vue

@@ -8,7 +8,12 @@
                 <el-button link :icon="Promotion" @click="openUrl(row)"></el-button>
             </template>
         </el-table-column>
-        <el-table-column :label="$t('website.domain')" prop="domain"></el-table-column>
+        <el-table-column :label="$t('website.domain')" prop="domain">
+            <template #default="{ row }">
+                {{ row.domain }}
+                <span class="text-gray-400" v-if="isPunycoded(row.domain)">({{ GetPunyCodeDomain(row.domain) }})</span>
+            </template>
+        </el-table-column>
         <el-table-column :label="$t('commons.table.port')" prop="port"></el-table-column>
         <el-table-column :label="'SSL'" prop="ssl">
             <template #default="{ row }">
@@ -37,6 +42,7 @@ import { Promotion } from '@element-plus/icons-vue';
 import { GlobalStore } from '@/store';
 import { checkAppInstalled } from '@/api/modules/app';
 import { MsgSuccess } from '@/utils/message';
+import { GetPunyCodeDomain, isPunycoded } from '@/utils/util';
 const globalStore = GlobalStore();
 
 const props = defineProps({

frontend/src/views/website/website/domain/index.vue

@@ -15,6 +15,9 @@
             </el-form>
             <el-text v-else type="primary" class="cursor-pointer" @click="openConfig(row.id)">
                 {{ row.primaryDomain }}
+                <span class="text-gray-400" v-if="isPunycoded(row.primaryDomain)">
+                    ({{ GetPunyCodeDomain(row.primaryDomain) }})
+                </span>
             </el-text>
             <el-popover
                 placement="right"
@@ -61,11 +64,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 import { listDomains } from '@/api/modules/website';
 import { Website } from '@/api/interface/website';
 import { routerToNameWithParams } from '@/utils/router';
 import { Rules } from '@/global/form-rules';
+import { GetPunyCodeDomain, isPunycoded } from '@/utils/util';
 
 interface Props {
     row: Website.Website;