优化升级

templates/index.html

@@ -166,14 +166,14 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
                             <textarea 
                                 v-if="!isPreviewMode"
                                 v-model="item.title" 
-                                class="w-full text-sm font-medium text-gray-800 bg-transparent resize-none focus:outline-none mb-1 overflow-hidden"
+                                class="w-full text-sm font-medium text-gray-800 bg-transparent resize-none focus:outline-none mb-1 overflow-hidden min-h-[2.5rem]"
                                 rows="2"
                                 placeholder="输入任务内容..."
                                 @input="autoResize($event.target)"
                                 @focus="autoResize($event.target)"
                                 :ref="el => { if(el) autoResize(el) }"
                             ></textarea>
-                            <div v-else class="text-sm font-medium text-gray-800 mb-1 whitespace-pre-wrap break-words leading-relaxed">{{ item.title }}</div>
+                            <div v-else class="text-sm font-medium text-gray-800 mb-1 whitespace-pre-wrap break-words leading-relaxed min-h-[1.5rem]">{{ item.title || '（无内容）' }}</div>
                             
                             <!-- Item Controls (Hover) -->
                             <div class="absolute top-2 right-2 flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity bg-white/90 rounded shadow-sm no-export" v-if="!isPreviewMode">
@@ -315,27 +315,49 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
 
                 // Persistence: Load from Server -> Fallback to LocalStorage
                 const loadData = async () => {
+                    let loadedData = null;
                     try {
                         const res = await fetch('/api/data');
                         const data = await res.json();
-                        if (data) {
-                            columns.value = data;
+                        if (data && Array.isArray(data) && data.length > 0) {
+                            loadedData = data;
                             console.log('Loaded from server');
-                            return;
                         }
                     } catch (e) {
                         console.log('Server load failed, checking local storage');
                     }
                     
-                    const saved = localStorage.getItem('roadmap_data');
-                    if (saved) {
-                        try {
-                            columns.value = JSON.parse(saved);
-                        } catch(e) {
-                            columns.value = JSON.parse(JSON.stringify(defaultColumns));
+                    if (!loadedData) {
+                        const saved = localStorage.getItem('roadmap_data');
+                        if (saved) {
+                            try {
+                                const parsed = JSON.parse(saved);
+                                if (Array.isArray(parsed) && parsed.length > 0) {
+                                    loadedData = parsed;
+                                }
+                            } catch(e) {
+                                console.error('Local storage parse error', e);
+                            }
                         }
-                    } else {
-                        columns.value = JSON.parse(JSON.stringify(defaultColumns));
+                    }
+
+                    // Fallback to default
+                    if (!loadedData) {
+                        loadedData = JSON.parse(JSON.stringify(defaultColumns));
+                    }
+
+                    // Validate and Repair Data
+                    // Ensure every item has a title field, even if empty string
+                    if (loadedData) {
+                        loadedData.forEach(col => {
+                            if (!col.items) col.items = [];
+                            col.items.forEach(item => {
+                                if (item.title === undefined || item.title === null) {
+                                    item.title = '新任务'; // Repair missing title
+                                }
+                            });
+                        });
+                        columns.value = loadedData;
                     }
                 };
 
@@ -386,11 +408,16 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
 
                 const onColDrop = (e, dropIndex) => {
                     if (isPreviewMode.value) return;
-                    const type = e.dataTransfer.getData('type');
-                    if (type === 'col' && dragCol.value !== null && dragCol.value !== dropIndex) {
+                    
+                    // Relaxed check: trust internal state primarily
+                    if (dragCol.value !== null && dragCol.value !== dropIndex) {
                         const item = columns.value[dragCol.value];
-                        columns.value.splice(dragCol.value, 1);
-                        columns.value.splice(dropIndex, 0, item);
+                        // Using explicit array manipulation for reactivity
+                        const newColumns = [...columns.value];
+                        newColumns.splice(dragCol.value, 1);
+                        newColumns.splice(dropIndex, 0, item);
+                        columns.value = newColumns;
+                        console.log('Column moved:', dragCol.value, '->', dropIndex);
                     }
                     dragCol.value = null;
                 };
@@ -400,7 +427,9 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
                     dragItem.value = { colIndex, itemIndex };
                     e.dataTransfer.effectAllowed = 'move';
                     e.dataTransfer.setData('type', 'item');
+                    e.dataTransfer.setData('text/plain', JSON.stringify({ colIndex, itemIndex })); // Fallback
                     e.target.classList.add('opacity-50');
+                    console.log('Drag Start:', colIndex, itemIndex);
                 };
                 
                 const onItemDragEnd = (e) => {
@@ -409,6 +438,9 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
                      document.querySelectorAll('.drop-indicator-top, .drop-indicator-bottom').forEach(el => {
                          el.classList.remove('drop-indicator-top', 'drop-indicator-bottom');
                      });
+                     // Do NOT nullify dragItem here immediately if we want to debug, 
+                     // but for logic safety, we keep it. 
+                     // The drop event happens BEFORE dragEnd, so this is safe.
                      dragItem.value = null;
                 };
 
@@ -441,11 +473,14 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
                         e.currentTarget.classList.remove('drop-indicator-top', 'drop-indicator-bottom');
                     }
 
-                    const type = e.dataTransfer.getData('type');
-                    
-                    if (type === 'item' && dragItem.value) {
+                    // Relaxed check: trust internal state primarily
+                    if (dragItem.value) {
                         const { colIndex: srcColIndex, itemIndex: srcItemIndex } = dragItem.value;
-                        const item = columns.value[srcColIndex].items[srcItemIndex];
+                        console.log('Drop detected:', srcColIndex, srcItemIndex, '->', dropColIndex, dropItemIndex);
+
+                        // Deep clone to avoid reference issues during splice
+                        const newColumns = JSON.parse(JSON.stringify(columns.value));
+                        const item = newColumns[srcColIndex].items[srcItemIndex];
 
                         // Calculate insertion index
                         let insertIndex = dropItemIndex;
@@ -461,7 +496,7 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
                         }
 
                         // Remove from source
-                        columns.value[srcColIndex].items.splice(srcItemIndex, 1);
+                        newColumns[srcColIndex].items.splice(srcItemIndex, 1);
 
                         // Adjust index if moving within same list
                         if (srcColIndex === dropColIndex) {
@@ -470,15 +505,24 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
                             }
                         }
                         
-                        // Handle drop on empty column
+                        // Handle drop on empty column or specific logic
                         if (dropItemIndex === -1) {
-                             insertIndex = columns.value[dropColIndex].items.length;
+                             // Dropped on container, append to end
+                             insertIndex = newColumns[dropColIndex].items.length;
                         }
 
                         // Insert into target
-                        columns.value[dropColIndex].items.splice(insertIndex, 0, item);
+                        // Ensure insertIndex is within bounds [0, length]
+                        insertIndex = Math.max(0, Math.min(insertIndex, newColumns[dropColIndex].items.length));
+                        
+                        newColumns[dropColIndex].items.splice(insertIndex, 0, item);
+                        
+                        // Update state
+                        columns.value = newColumns;
                         
                         dragItem.value = null;
+                    } else {
+                        console.warn('Drop ignored: no dragItem value');
                     }
                 };
 
@@ -596,6 +640,16 @@ <h1 class="text-xl font-bold text-gray-900">产品路线图生成器 <span v-if=
                 return {
                     columns,
                     roadmapContainer,
+                    isPreviewMode,
+                    completionRate,
+                    onColDragStart,
+                    onColDragEnd,
+                    onColDrop,
+                    onItemDragStart,
+                    onItemDragEnd,
+                    onItemDragOver,
+                    onItemDragLeave,
+                    onItemDrop,
                     getTagColor,
                     cycleTag,
                     addItem,