${previewMedia}
@@ -280,6 +390,249 @@ class RecipeModal {
modalManager.showModal('recipeModal');
}
+ // Title editing methods
+ showTitleEditor() {
+ const titleContainer = document.getElementById('recipeModalTitle');
+ if (titleContainer) {
+ titleContainer.querySelector('.editable-content').classList.add('hide');
+ const editor = titleContainer.querySelector('#recipeTitleEditor');
+ editor.classList.add('active');
+ const input = editor.querySelector('input');
+ input.focus();
+ input.select();
+ }
+ }
+
+ saveTitleEdit() {
+ const titleContainer = document.getElementById('recipeModalTitle');
+ if (titleContainer) {
+ const editor = titleContainer.querySelector('#recipeTitleEditor');
+ const input = editor.querySelector('input');
+ const newTitle = input.value.trim();
+
+ // Check if title changed
+ if (newTitle && newTitle !== this.currentRecipe.title) {
+ // Update title in the UI
+ titleContainer.querySelector('.content-text').textContent = newTitle;
+
+ // Update the recipe on the server
+ this.updateRecipeMetadata({ title: newTitle });
+ }
+
+ // Hide editor
+ editor.classList.remove('active');
+ titleContainer.querySelector('.editable-content').classList.remove('hide');
+ }
+ }
+
+ cancelTitleEdit() {
+ const titleContainer = document.getElementById('recipeModalTitle');
+ if (titleContainer) {
+ // Reset input value
+ const editor = titleContainer.querySelector('#recipeTitleEditor');
+ const input = editor.querySelector('input');
+ input.value = this.currentRecipe.title || '';
+
+ // Hide editor
+ editor.classList.remove('active');
+ titleContainer.querySelector('.editable-content').classList.remove('hide');
+ }
+ }
+
+ // Tags editing methods
+ showTagsEditor() {
+ const tagsContainer = document.getElementById('recipeTagsCompact');
+ if (tagsContainer) {
+ tagsContainer.querySelector('.editable-content').classList.add('hide');
+ const editor = tagsContainer.querySelector('#recipeTagsEditor');
+ editor.classList.add('active');
+ const input = editor.querySelector('input');
+ input.focus();
+ }
+ }
+
+ saveTagsEdit() {
+ const tagsContainer = document.getElementById('recipeTagsCompact');
+ if (tagsContainer) {
+ const editor = tagsContainer.querySelector('#recipeTagsEditor');
+ const input = editor.querySelector('input');
+ const tagsText = input.value.trim();
+
+ // Parse tags
+ let newTags = [];
+ if (tagsText) {
+ newTags = tagsText.split(',')
+ .map(tag => tag.trim())
+ .filter(tag => tag.length > 0);
+ }
+
+ // Check if tags changed
+ const oldTags = this.currentRecipe.tags || [];
+ const tagsChanged =
+ newTags.length !== oldTags.length ||
+ newTags.some((tag, index) => tag !== oldTags[index]);
+
+ if (tagsChanged) {
+ // Update the recipe on the server
+ this.updateRecipeMetadata({ tags: newTags });
+
+ // Update tags in the UI
+ const tagsDisplay = tagsContainer.querySelector('.tags-display');
+ tagsDisplay.innerHTML = '';
+
+ if (newTags.length > 0) {
+ // Limit displayed tags to 5, show a "+X more" button if needed
+ const maxVisibleTags = 5;
+ const visibleTags = newTags.slice(0, maxVisibleTags);
+ const remainingTags = newTags.length > maxVisibleTags ? newTags.slice(maxVisibleTags) : [];
+
+ // Add visible tags
+ visibleTags.forEach(tag => {
+ const tagElement = document.createElement('div');
+ tagElement.className = 'recipe-tag-compact';
+ tagElement.textContent = tag;
+ tagsDisplay.appendChild(tagElement);
+ });
+
+ // Add "more" button if needed
+ if (remainingTags.length > 0) {
+ const moreButton = document.createElement('div');
+ moreButton.className = 'recipe-tag-more';
+ moreButton.textContent = `+${remainingTags.length} more`;
+ tagsDisplay.appendChild(moreButton);
+
+ // Update tooltip content
+ const tooltipContent = document.getElementById('recipeTagsTooltipContent');
+ if (tooltipContent) {
+ tooltipContent.innerHTML = '';
+ newTags.forEach(tag => {
+ const tooltipTag = document.createElement('div');
+ tooltipTag.className = 'tooltip-tag';
+ tooltipTag.textContent = tag;
+ tooltipContent.appendChild(tooltipTag);
+ });
+ }
+
+ // Re-add tooltip functionality
+ moreButton.addEventListener('mouseenter', () => {
+ document.getElementById('recipeTagsTooltip').classList.add('visible');
+ });
+
+ moreButton.addEventListener('mouseleave', () => {
+ setTimeout(() => {
+ if (!document.getElementById('recipeTagsTooltip').matches(':hover')) {
+ document.getElementById('recipeTagsTooltip').classList.remove('visible');
+ }
+ }, 300);
+ });
+ }
+ } else {
+ tagsDisplay.innerHTML = '
No tags
';
+ }
+
+ // Update the current recipe object
+ this.currentRecipe.tags = newTags;
+ }
+
+ // Hide editor
+ editor.classList.remove('active');
+ tagsContainer.querySelector('.editable-content').classList.remove('hide');
+ }
+ }
+
+ cancelTagsEdit() {
+ const tagsContainer = document.getElementById('recipeTagsCompact');
+ if (tagsContainer) {
+ // Reset input value
+ const editor = tagsContainer.querySelector('#recipeTagsEditor');
+ const input = editor.querySelector('input');
+ input.value = this.currentRecipe.tags ? this.currentRecipe.tags.join(', ') : '';
+
+ // Hide editor
+ editor.classList.remove('active');
+ tagsContainer.querySelector('.editable-content').classList.remove('hide');
+ }
+ }
+
+ // Update recipe metadata on the server
+ async updateRecipeMetadata(updates) {
+ try {
+ const response = await fetch(`/api/recipe/${this.recipeId}/update`, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(updates)
+ });
+
+ const data = await response.json();
+
+ if (data.success) {
+ // 显示保存成功的提示
+ if (updates.title) {
+ showToast('Recipe name updated successfully', 'success');
+ } else if (updates.tags) {
+ showToast('Recipe tags updated successfully', 'success');
+ } else {
+ showToast('Recipe updated successfully', 'success');
+ }
+
+ // 更新当前recipe对象的属性
+ Object.assign(this.currentRecipe, updates);
+
+ // 确保这个更新也传播到卡片视图
+ // 尝试找到可能显示这个recipe的卡片并更新它
+ 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 => `
${tag}
`
+ ).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');
+ }
+ } catch (error) {
+ console.error('Error updating recipe:', error);
+ showToast(`Error updating recipe: ${error.message}`, 'error');
+ }
+ }
+
// Setup copy buttons for prompts and recipe syntax
setupCopyButtons() {
const copyPromptBtn = document.getElementById('copyPromptBtn');
`;
+ // Determine CSS class based on LoRA state
+ let loraItemClass = 'recipe-lora-item';
+ if (existsLocally) {
+ loraItemClass += ' exists-locally';
+ } else if (isDeleted) {
+ loraItemClass += ' is-deleted';
+ } else {
+ loraItemClass += ' missing-locally';
+ }
+
return `
-