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 {