开发智联笔记项目时所遇问题(4)

问题如图:
image

从图片中的错误信息可以看出,问题出现在 index.html 第209行,错误是 TypeError: %s enable_sheets to see a function。这通常与 jsmind 的初始化或节点操作有关。

问题诊断与解决方案

1. 检查控制台完整错误

首先在浏览器控制台中查看完整的错误堆栈,确定具体是哪行代码出错。

2. 修正 jsmind 初始化

修改 index.html 中的 initMind() 函数:

/* 初始化脑图 */
function initMind(data) {
    try {
        // 确保数据格式正确
        if (!data || typeof data !== 'object') {
            console.error('Invalid data format:', data);
            return;
        }

        jm = new jsMind({
            container: 'jsmind_container',
            theme: 'primary',
            editable: true,
            view: { 
                hmargin: 100, 
                vmargin: 50, 
                line_width: 2, 
                line_color: '#409eff'
            },
            layout: { 
                hspace: 80, 
                vspace: 20, 
                pspace: 13
            },
            shortcut: {
                enable: false  // 暂时禁用快捷键,避免冲突
            }
        });

        // 显示脑图数据
        jm.show(data);
        
        console.log('Mind map initialized successfully');
        
    } catch (error) {
        console.error('Error initializing mind map:', error);
        alert('初始化脑图失败: ' + error.message);
    }
}

3. 修正节点操作函数

更新所有节点操作函数,确保参数正确:

function addChild() {
    if (!jm) return alert('脑图未初始化');
    const node = jm.get_selected_node();
    if (!node) return alert('请先选中一个节点');
    
    try {
        const newId = 'node_' + Date.now();
        jm.add_node(node, newId, '新节点');
    } catch (error) {
        console.error('Add child error:', error);
        alert('添加子节点失败: ' + error.message);
    }
}

function addBro() {
    if (!jm) return alert('脑图未初始化');
    const node = jm.get_selected_node();
    if (!node) return alert('请先选中一个节点');
    if (node.isroot) return alert('不能在根节点下添加兄弟节点');
    
    try {
        const newId = 'node_' + Date.now();
        jm.insert_node_after(node, newId, '兄弟节点');
    } catch (error) {
        console.error('Add brother error:', error);
        alert('添加兄弟节点失败: ' + error.message);
    }
}

function editNode() {
    if (!jm) return;
    const node = jm.get_selected_node();
    if (!node) return;
    try {
        jm.begin_edit(node);
    } catch (error) {
        console.error('Edit node error:', error);
    }
}

function delNode() {
    if (!jm) return;
    const node = jm.get_selected_node();
    if (!node || node.isroot) return;
    try {
        jm.remove_node(node);
    } catch (error) {
        console.error('Delete node error:', error);
    }
}

4. 修正创建脑图的数据结构

确保创建新脑图时使用正确的数据结构:

async function createMap() {
    const name = document.getElementById('mName').value.trim();
    const topic = document.getElementById('mTopic').value.trim();
    if (!name || !topic) return alert('请填写完整');
    
    // 使用 jsmind 标准格式
    const data = {
        "meta": {
            "name": name,
            "author": document.getElementById('user').textContent,
            "version": "1.0"
        },
        "format": "node_tree",
        "data": {
            "id": "root",
            "topic": topic,
            "children": []
        }
    };
    
    try {
        const res = await fetch('/api/mindmaps', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({name, data}),
            credentials: 'include'
        });
        
        if (!res.ok) {
            const error = await res.text();
            throw new Error(error || '创建失败');
        }
        
        const m = await res.json();
        mapList.push(m);
        renderList();
        closeModal();
        openMap(m.id);
    } catch (error) {
        console.error('Create map error:', error);
        alert('创建失败: ' + error.message);
    }
}

5. 添加错误处理到打开脑图功能

async function openMap(id) {
    try {
        currentId = id;
        renderList();
        
        const res = await fetch(`/api/mindmaps/${id}`, {credentials: 'include'});
        if (!res.ok) throw new Error('加载脑图失败');
        
        const m = await res.json();
        console.log('Loaded mind map data:', m);
        
        if (jm) {
            jm.show(m.data);
        } else {
            initMind(m.data);
        }
    } catch (error) {
        console.error('Open map error:', error);
        alert('打开脑图失败: ' + error.message);
    }
}

6. 检查 jsmind 版本兼容性

如果问题仍然存在,可能是 jsmind 版本不兼容。尝试使用更稳定的版本:

# 下载指定版本的 jsmind
curl -o static/jsmind.js https://cdn.jsdelivr.net/npm/jsmind@0.4.6/js/jsmind.js
curl -o static/jsmind.css https://cdn.jsdelivr.net/npm/jsmind@0.4.6/style/jsmind.css

7. 临时解决方案

如果上述方法都不行,可以暂时注释掉有问题的代码,逐步排查:

// 暂时注释插件加载
// <script src="{{ url_for('static', filename='jsmind.draggable.js') }}"></script>
// <script src="{{ url_for('static', filename='jsmind.undo.js') }}"></script>
posted @ 2025-11-21 19:57  Jade_Z  阅读(4)  评论(0)    收藏  举报