From 636ec9df091d7f16eb5337f97f0b0d310d3a4a66 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Fri, 10 Apr 2026 17:16:18 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=85=8D=E6=96=B9=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E5=AD=97=E5=8F=B7=E7=BB=86=E5=88=866?=
 =?UTF-8?q?=E7=BA=A7=EF=BC=8C=E7=A1=AE=E4=BF=9D=E5=AE=8C=E6=95=B4=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/RecipeCard.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/RecipeCard.vue b/frontend/src/components/RecipeCard.vue
index e8209c1..ed102c3 100644
--- a/frontend/src/components/RecipeCard.vue
+++ b/frontend/src/components/RecipeCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="recipe-card" @click="$emit('click', index)">
-    <div class="recipe-card-name" :style="{ fontSize: recipe.name.length > 12 ? (recipe.name.length > 20 ? '12px' : '14px') : '16px' }">{{ recipe.name }}</div>
+    <div class="recipe-card-name" :style="{ fontSize: nameSize }">{{ recipe.name }}</div>
     <div v-if="visibleTags.length" class="recipe-card-tags">
       <span v-for="tag in visibleTags" :key="tag" class="tag" :class="{ 'tag-reviewed': tag === '已审核' }">{{ tag }}</span>
     </div>
@@ -47,6 +47,15 @@ const oilNames = computed(() =>
 )
 const priceInfo = computed(() => oilsStore.fmtCostWithRetail(props.recipe.ingredients))
 const isFav = computed(() => recipesStore.isFavorite(props.recipe))
+const nameSize = computed(() => {
+  const len = props.recipe.name.length
+  if (len <= 6) return '16px'
+  if (len <= 8) return '15px'
+  if (len <= 10) return '14px'
+  if (len <= 14) return '12px'
+  if (len <= 20) return '10px'
+  return '9px'
+})
 </script>
 
 <style scoped>
@@ -72,6 +81,7 @@ const isFav = computed(() => recipesStore.isFavorite(props.recipe))
   font-weight: 600;
   color: #2c2416;
   margin-bottom: 8px;
+  word-break: break-all;
 }
 
 .recipe-card-tags {