frontend/src/components/RecipeCard.vue

@@ -36,8 +36,8 @@ const auth = useAuthStore()
 
 const visibleTags = computed(() => {
   if (!props.recipe.tags) return []
-  if (auth.canEdit) return props.recipe.tags
-  return props.recipe.tags.filter(t => !EDITOR_ONLY_TAGS.includes(t))
+  const tags = auth.canEdit ? [...props.recipe.tags] : props.recipe.tags.filter(t => !EDITOR_ONLY_TAGS.includes(t))
+  return tags.sort((a, b) => a.localeCompare(b, 'zh'))
 })
 
 const oilNames = computed(() =>

frontend/src/stores/recipes.js

@@ -48,10 +48,8 @@ export const useRecipesStore = defineStore('recipes', () => {
   async function saveRecipe(recipe) {
     if (recipe._id) {
       const data = await api.put(`/api/recipes/${recipe._id}`, recipe)
-      const idx = recipes.value.findIndex((r) => r._id === recipe._id)
-      if (idx !== -1) {
-        recipes.value[idx] = { ...recipes.value[idx], ...recipe, _version: data._version ?? data.version ?? recipe._version }
-      }
+      // Reload from server to get properly formatted data (oil_name → oil mapping)
+      await loadRecipes()
       return data
     } else {
       const data = await api.post('/api/recipes', recipe)