diff --git a/frontend/src/views/RecipeManager.vue b/frontend/src/views/RecipeManager.vue
index d208388..6dc5d36 100644
--- a/frontend/src/views/RecipeManager.vue
+++ b/frontend/src/views/RecipeManager.vue
@@ -229,7 +229,6 @@
           <div class="editor-header-actions">
             <button class="action-btn action-btn-primary action-btn-sm" @click="saveCurrentRecipe">💾 保存</button>
             <button class="action-btn action-btn-sm" @click="previewRecipe">👁 预览</button>
-            <button class="detail-close-btn" @click="closeOverlay">✕</button>
           </div>
         </div>
 
@@ -369,9 +368,11 @@
 
     <!-- Recipe Detail Overlay -->
     <RecipeDetailOverlay
-      v-if="previewRecipeIndex !== null"
+      v-if="previewRecipeIndex !== null || previewRecipeData !== null"
       :recipeIndex="previewRecipeIndex"
-      @close="previewRecipeIndex = null"
+      :recipeData="previewRecipeData"
+      :isDiary="previewRecipeData !== null"
+      @close="previewRecipeIndex = null; previewRecipeData = null"
     />
 
     <!-- Tag Picker Overlay -->
@@ -615,8 +616,18 @@ async function applyBatchTags() {
 }
 
 function previewRecipe() {
-  // TODO: generate card preview
-  ui.showToast('预览功能开发中')
+  const eoIngs = formIngredients.value.filter(i => i.oil && i.oil !== '椰子油' && i.drops > 0)
+  const cleanIngs = eoIngs.map(i => ({ oil: i.oil, drops: i.drops }))
+  if (formCocoRow.value && cocoActualDrops.value > 0) {
+    cleanIngs.push({ oil: '椰子油', drops: cocoActualDrops.value })
+  }
+  previewRecipeData.value = {
+    _id: null,
+    name: formName.value || '未命名配方',
+    note: formNote.value || '',
+    tags: formTags.value,
+    ingredients: cleanIngs,
+  }
 }
 
 function doBatch(action) {
@@ -1043,6 +1054,7 @@ async function loadContribution() {
   } catch {}
 }
 const previewRecipeIndex = ref(null)
+const previewRecipeData = ref(null)
 const showBatchMenu = ref(false)
 const showBatchTagPicker = ref(false)
 const batchTagsSelected = ref([])