From a7bcb1e88b5c11f240016a664b96c9479351642b Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Wed, 6 Aug 2025 13:09:13 +0800
Subject: [PATCH] Fix admin model card display issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix click event handling on enable/disable toggle to prevent modal opening
- Add missing i18n keys for model operations (enabled/disabled, success/failure messages)
- Improve long model ID display with responsive width constraints and proper truncation
- Adjust layout alignment for better visual hierarchy

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/admin/ModelCard.vue | 10 +++++-----
 web/src/locales/en-US.json             |  7 +++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/src/components/admin/ModelCard.vue b/web/src/components/admin/ModelCard.vue
index 2e0386da..3fd9c5ab 100644
--- a/web/src/components/admin/ModelCard.vue
+++ b/web/src/components/admin/ModelCard.vue
@@ -148,15 +148,15 @@ function copyJson() {
       <div class="flex justify-between items-start gap-4">
         <div class="flex-1 min-w-0">
           <!-- Header with model name and badges -->
-          <div class="flex items-center gap-2 mb-2">
+          <div class="flex items-start gap-2 mb-2">
             <NBadge :value="model.orderNumber?.toString() || '0'" show-zero type="success" class="flex-shrink-0">
-              <h3 class="font-semibold text-lg truncate"
+              <h3 class="font-semibold text-lg truncate max-w-[120px] sm:max-w-[150px] md:max-w-[180px]"
                 :class="{ 'text-green-700 dark:text-green-300': isDefaultModel }" :title="model.name">
                 {{ model.name }}
               </h3>
             </NBadge>
             <NBadge v-if="isDefaultModel" type="success" :value="t('admin.chat_model.default')" size="small"
-              class="flex-shrink-0" />
+              class="flex-shrink-0 mt-1" />
           </div>
 
           <!-- Model label/description -->
@@ -174,8 +174,8 @@ function copyJson() {
         </div>
 
         <!-- Enable/Disable Toggle -->
-        <div class="flex-shrink-0 flex flex-col items-center gap-2">
-          <NSwitch :value="model.isEnable" @update:value="handleEnableToggle" @click.stop
+        <div class="flex-shrink-0 flex flex-col items-center gap-2" @click.stop>
+          <NSwitch :value="model.isEnable" @update:value="handleEnableToggle"
             :loading="chatModelMutation.isPending.value" size="medium" />
           <span class="text-xs text-gray-500 dark:text-gray-400">
             {{ model.isEnable ? t('common.enabled') : t('common.disabled') }}
diff --git a/web/src/locales/en-US.json b/web/src/locales/en-US.json
index 42ed36f9..342a1cba 100644
--- a/web/src/locales/en-US.json
+++ b/web/src/locales/en-US.json
@@ -14,6 +14,11 @@
             "defaultToken": "Default token number",
             "deleteModel": "Delete",
             "deleteModelConfirm": "Confirm deletion {name}?",
+            "delete_success": "Delete success",
+            "delete_failed": "Delete failed",
+            "update_success": "Update success",
+            "update_failed": "Update failed",
+            "edit_model": "Edit Model",
             "enablePerModeRatelimit": "Enable Rate Limit Per Mode",
             "enablePerModelRateLimit": "Enable per-model rate limit",
             "isDefault": "Default?",
@@ -178,6 +183,8 @@
         "editUser": "Edit User",
         "email": "Email",
         "email_placeholder": "Please enter your email",
+        "enabled": "Enabled",
+        "disabled": "Disabled",
         "export": "Export",
         "failed": "Operation failed",
         "fetchFailed": "Failed to fetch data",