From e3582192a4e79b1ab5bb208b795071962c47b78f Mon Sep 17 00:00:00 2001
From: yhl452493373 <yhl452493373@gmail.com>
Date: Tue, 1 Jul 2025 22:44:25 +0800
Subject: [PATCH] Fix suggest button for different language

---
 src/app/components/Form/HostField.vue | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Form/HostField.vue b/src/app/components/Form/HostField.vue
index 6bc14a6e..54365317 100644
--- a/src/app/components/Form/HostField.vue
+++ b/src/app/components/Form/HostField.vue
@@ -21,7 +21,7 @@
         <BasePrimaryButton as="span">
           <div class="flex items-center gap-3">
             <IconsSparkles class="w-4" />
-            <span class="w-16">{{ $t('admin.config.suggest') }}</span>
+            <span :class="widthClass">{{ $t('admin.config.suggest') }}</span>
           </div>
         </BasePrimaryButton>
       </AdminSuggestDialog>
@@ -29,13 +29,24 @@
   </div>
 </template>
 
-<style scoped lang="css">
-.w-16{
-  width: 4rem;
-}
-</style>
-
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+const { locale } = useI18n();
+
+type LocaleCode = 'uk' | 'de' |'zh-CN';
+
+const widthMap: Partial<Record<LocaleCode, string>> & { default: string } = {
+  'uk': 'w-28',
+  'de': 'w-24',
+  'zh-CN':'w-8',
+  default: 'w-16',
+};
+
+const widthClass = (locale.value in widthMap)
+  ? widthMap[locale.value as LocaleCode]
+  : widthMap.default;
+
 defineProps<{
   id: string;
   label: string;