From 4826c00e2759ee503cdc826c1d4fb4d427e9f0fc Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 16:19:18 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B2=BE=E6=B2=B9=E5=90=8D=E4=B8=8D?=
 =?UTF-8?q?=E6=88=AA=E6=96=AD=E6=94=B9=E7=94=A8clamp=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E3=80=81=E4=B8=8B=E6=9E=B6=E9=94=99=E8=AF=AF=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E3=80=81=E7=BF=BB=E8=AF=91=E5=8F=8C=E5=90=91=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

精油名:
- 用 font-size:clamp() 自适应缩小，不截断不换行
- 去掉 overflow:hidden/text-overflow:ellipsis

信息不全判定:
- 缺英文名、零售价、或会员价 = 红色底色
- 下架的不算不全
- 补全后自动恢复

下架功能:
- 修复：添加详细错误信息显示
- 编辑弹窗宽度恢复到默认520px（不再限制400px）

翻译双向同步:
- 配方卡片修改翻译 → 同时保存到 oils.en_name（oilsStore.saveOil）
- 精油价目页修改英文名 → 保存到 oils.en_name
- 两处共用同一个DB字段，loadOils后自动同步
- getCardOilName fallback链：custom → oilsMeta.enName → oilEn → name

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/RecipeDetailOverlay.vue    | 27 ++++++++++++----
 frontend/src/views/OilReference.vue           | 32 +++++++++----------
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index f5a5f47..61ba2b5 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -597,18 +597,33 @@ function copyText() {
 
 async function applyTranslation() {
   showTranslationEditor.value = false
-  // Persist en_name to backend
+  let saved = 0
+
+  // 1. Save recipe English name
   if (recipe.value._id && customRecipeNameEn.value) {
     try {
       await api.put(`/api/recipes/${recipe.value._id}`, {
         en_name: customRecipeNameEn.value,
         version: recipe.value._version,
       })
-      ui.showToast('翻译已保存')
-    } catch (e) {
-      ui.showToast('翻译保存失败')
-    }
+      recipe.value.en_name = customRecipeNameEn.value
+      saved++
+    } catch {}
   }
+
+  // 2. Save each oil's English name to oils table (syncs with oil reference page)
+  for (const [oilName, enName] of Object.entries(customOilNameEn.value)) {
+    if (!enName?.trim()) continue
+    const meta = oilsStore.oilsMeta[oilName]
+    if (!meta || meta.enName === enName.trim()) continue
+    try {
+      await oilsStore.saveOil(oilName, meta.bottlePrice, meta.dropCount, meta.retailPrice, enName.trim())
+      saved++
+    } catch {}
+  }
+
+  if (saved > 0) ui.showToast(`翻译已保存（${saved}项）`)
+
   cardImageUrl.value = null
   nextTick(() => generateCardImage())
 }
@@ -616,7 +631,7 @@ async function applyTranslation() {
 // Override translation getters for card rendering
 function getCardOilName(name) {
   if (cardLang.value === 'en') {
-    return customOilNameEn.value[name] || oilEn(name) || name
+    return customOilNameEn.value[name] || oilsStore.oilsMeta[name]?.enName || oilEn(name) || name
   }
   return name
 }
diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index 805d171..e5ec392 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -257,7 +257,7 @@
 
     <!-- Edit Oil Overlay -->
     <div v-if="editingOilName" class="modal-overlay" @click.self="editingOilName = null">
-      <div class="modal-panel" style="max-width:400px">
+      <div class="modal-panel">
         <div class="modal-header">
           <h3>{{ editingOilName }}</h3>
           <button class="btn-close" @click="editingOilName = null">✕</button>
@@ -477,8 +477,10 @@ function chipStyle(name) {
 function isIncomplete(name) {
   const meta = getMeta(name)
   if (!meta) return true
-  // Incomplete if missing bottle price, drop count, or retail price
-  return !meta.bottlePrice || !meta.dropCount || !meta.retailPrice
+  if (meta.isActive === false) return false // 下架的不算不全
+  // Incomplete: missing English name, retail price, or bottle price
+  const hasEn = meta.enName || getEnglishName(name)
+  return !meta.bottlePrice || !meta.retailPrice || !hasEn
 }
 
 function getEffectiveDropCount() {
@@ -675,7 +677,7 @@ async function toggleOilActive() {
   const meta = getMeta(name)
   const newActive = meta?.isActive === false ? 1 : 0
   try {
-    await api('/api/oils', {
+    const res = await api('/api/oils', {
       method: 'POST',
       body: JSON.stringify({
         name,
@@ -685,12 +687,17 @@ async function toggleOilActive() {
         is_active: newActive,
       }),
     })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}))
+      ui.showToast('操作失败: ' + (err.detail || res.status))
+      return
+    }
     await oils.loadOils()
     cardVersion.value++
     ui.showToast(newActive ? '已重新上架' : '已下架')
     editingOilName.value = null
-  } catch {
-    ui.showToast('操作失败')
+  } catch (e) {
+    ui.showToast('操作失败: ' + (e.message || ''))
   }
 }
 
@@ -1201,24 +1208,15 @@ async function saveCardImage(name) {
   background: #fff5f5 !important;
 }
 .oil-name-line {
-  font-size: 14px;
+  font-size: clamp(10px, 2.5vw, 14px);
   font-weight: 500;
   color: var(--text-dark);
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 .oil-en-line {
-  font-size: 10px;
+  font-size: clamp(8px, 1.8vw, 10px);
   color: var(--text-light);
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-/* Shrink name for long oils */
-@container (max-width: 180px) {
-  .oil-name-line { font-size: 12px; }
-  .oil-en-line { font-size: 9px; }
 }
 
 .oil-chip-actions {