feat: implement recipe card update functionality after modal edits

static/js/components/RecipeCard.js

@@ -7,6 +7,9 @@ class RecipeCard {
         this.recipe = recipe;
         this.clickHandler = clickHandler;
         this.element = this.createCardElement();
+        
+        // Store reference to this instance on the DOM element for updates
+        this.element._recipeCardInstance = this;
     }
     
     createCardElement() {

static/js/components/RecipeModal.js

@@ -2,6 +2,7 @@
 import { showToast, copyToClipboard } from '../utils/uiHelpers.js';
 import { state } from '../state/index.js';
 import { setSessionItem, removeSessionItem } from '../utils/storageHelpers.js';
+import { updateRecipeCard } from '../utils/cardUpdater.js';
 
 class RecipeModal {
     constructor() {
@@ -82,7 +83,7 @@ class RecipeModal {
     
     showRecipeDetails(recipe) {
         // Store the full recipe for editing
-        this.currentRecipe = JSON.parse(JSON.stringify(recipe)); // 深拷贝以避免对原始对象的修改
+        this.currentRecipe = recipe;
         
         // Set modal title with edit icon
         const modalTitle = document.getElementById('recipeModalTitle');
@@ -685,50 +686,8 @@ class RecipeModal {
                 // 更新当前recipe对象的属性
                 Object.assign(this.currentRecipe, updates);
                 
-                // 确保这个更新也传播到卡片视图
+                // Update the recipe card in the UI
-                // 尝试找到可能显示这个recipe的卡片并更新它
+                updateRecipeCard(this.recipeId, updates);
-                try {
-                    const recipeCards = document.querySelectorAll('.recipe-card');
-                    recipeCards.forEach(card => {
-                        if (card.dataset.recipeId === this.recipeId) {
-                            // 更新卡片标题
-                            if (updates.title) {
-                                const titleElement = card.querySelector('.recipe-title');
-                                if (titleElement) {
-                                    titleElement.textContent = updates.title;
-                                }
-                            }
-                            
-                            // 更新卡片标签
-                            if (updates.tags) {
-                                const tagsElement = card.querySelector('.recipe-tags');
-                                if (tagsElement) {
-                                    if (updates.tags.length > 0) {
-                                        tagsElement.innerHTML = updates.tags.map(
-                                            tag => `<div class="recipe-tag">${tag}</div>`
-                                        ).join('');
-                                    } else {
-                                        tagsElement.innerHTML = '';
-                                    }
-                                }
-                            }
-                        }
-                    });
-                } catch (err) {
-                    console.log("Non-critical error updating recipe cards:", err);
-                }
-                
-                // 重要：强制刷新recipes列表，确保从服务器获取最新数据
-                try {
-                    if (window.recipeManager && typeof window.recipeManager.loadRecipes === 'function') {
-                        // 异步刷新recipes列表，不阻塞用户界面
-                        setTimeout(() => {
-                            window.recipeManager.loadRecipes(true);
-                        }, 500);
-                    }
-                } catch (err) {
-                    console.log("Error refreshing recipes list:", err);
-                }
             } else {
                 showToast(`Failed to update recipe: ${data.error}`, 'error');
             }

static/js/utils/cardUpdater.js

@@ -125,4 +125,65 @@ export function updateLoraCard(filePath, updates, newFilePath) {
     });
     
     return loraCard; // Return the updated card element for chaining
+}
+
+/**
+ * Update the recipe card after metadata edits in the modal
+ * @param {string} recipeId - ID of the recipe to update
+ * @param {Object} updates - Object containing the updates (title, tags, source_path)
+ */
+export function updateRecipeCard(recipeId, updates) {
+    // Find the card with matching recipe ID
+    const recipeCard = document.querySelector(`.lora-card[data-id="${recipeId}"]`);
+    if (!recipeCard) return;
+
+    // Get the recipe card component instance
+    const recipeCardInstance = recipeCard._recipeCardInstance;
+    
+    // Update card dataset and visual elements based on the updates object
+    Object.entries(updates).forEach(([key, value]) => {
+        // Update dataset
+        recipeCard.dataset[key] = value;
+
+        // Update visual elements based on the property
+        switch(key) {
+            case 'title':
+                // Update the title in the recipe object
+                if (recipeCardInstance && recipeCardInstance.recipe) {
+                    recipeCardInstance.recipe.title = value;
+                }
+                
+                // Update the title shown in the card
+                const modelNameElement = recipeCard.querySelector('.model-name');
+                if (modelNameElement) modelNameElement.textContent = value;
+                break;
+                
+            case 'tags':
+                // Update tags in the recipe object (not displayed on card UI)
+                if (recipeCardInstance && recipeCardInstance.recipe) {
+                    recipeCardInstance.recipe.tags = value;
+                }
+                
+                // Store in dataset as JSON string
+                try {
+                    if (typeof value === 'string') {
+                        recipeCard.dataset.tags = value;
+                    } else {
+                        recipeCard.dataset.tags = JSON.stringify(value);
+                    }
+                } catch (e) {
+                    console.error('Failed to update recipe tags:', e);
+                }
+                break;
+                
+            case 'source_path':
+                // Update source_path in the recipe object (not displayed on card UI)
+                if (recipeCardInstance && recipeCardInstance.recipe) {
+                    recipeCardInstance.recipe.source_path = value;
+                }
+                break;
+        }
+    });
+    
+    return recipeCard; // Return the updated card element for chaining
 }