开发智联笔记项目时所遇问题（4）

问题如图：

从图片中的错误信息可以看出，问题出现在 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>