[fix]流程图 #0.1.2 fix 加载流程图后保存不生效

Author: darksheep

src/main/java/com/darksheep/sheepnote/config/NoteDataRepository.java

@@ -115,11 +115,12 @@ public static void deleteNoteData(Integer noteId){
 
     // 流程图相关方法
     public static void saveFlowchart(FlowchartData flowchart) {
-        String sql = "INSERT INTO flowcharts (name, data, create_time) VALUES (?, ?, ?)";
+        String sql = "INSERT OR REPLACE INTO flowcharts (name, data, create_time,id) VALUES (?, ?, ?,?)";
         try (PreparedStatement pstmt = getConnection().prepareStatement(sql)) {
             pstmt.setString(1, flowchart.getName());
             pstmt.setString(2, flowchart.getData());
             pstmt.setLong(3, flowchart.getCreateTime());
+            pstmt.setInt(4, flowchart.getId());
             pstmt.executeUpdate();
         } catch (SQLException e) {
             e.printStackTrace();

src/main/java/com/darksheep/sheepnote/data/service/FlowchartService.java

@@ -23,11 +23,10 @@ public FlowchartService() {
         this.gson = new Gson();
     }
 
-    public void saveFlowchart(@NotNull String name, @NotNull String flowchartData) {
+    public void saveFlowchart(FlowchartData flowchartData) {
         // 解析流程图内容
-        JsonObject flowchartContent = gson.fromJson(flowchartData, JsonObject.class);
+        JsonObject flowchartContent = gson.fromJson(flowchartData.getData(), JsonObject.class);
         JsonArray nodes = flowchartContent.getAsJsonArray("nodes");
-        
         // 收集需要更新标签的笔记
         Set<NoteData> notesToUpdate = new HashSet<>();
 
@@ -41,16 +40,12 @@ public void saveFlowchart(@NotNull String name, @NotNull String flowchartData) {
                 // 获取笔记并更新标签
                 NoteData note = NoteDataRepository.getNoteById(noteId);
                 if (note != null) {
-                    note.addTag(name);
+                    note.addTag(flowchartData.getName());
                     notesToUpdate.add(note);
                 }
             }
         }
-        
-        // 保存流程图
-        FlowchartData data = new FlowchartData(name, flowchartData);
-        NoteDataRepository.saveFlowchart(data);
-        
+        NoteDataRepository.saveFlowchart(flowchartData);
         // 更新笔记的标签
         for (NoteData note : notesToUpdate) {
             NoteDataRepository.updateNoteTags(note);
@@ -72,7 +67,7 @@ public List<Map<String, String>> getFlowcharts() {
     public String getFlowchartById(String id) {
         try {
             FlowchartData flowchart = NoteDataRepository.getFlowchartById(Integer.parseInt(id));
-            return flowchart != null ? flowchart.getData() : null;
+            return gson.toJson(flowchart);
         } catch (NumberFormatException e) {
             return null;
         }

src/main/java/com/darksheep/sheepnote/ui/web/container/NoteFlowchartPanel.java

@@ -1,5 +1,6 @@
 package com.darksheep.sheepnote.ui.web.container;
 
+import com.darksheep.sheepnote.data.FlowchartData;
 import com.darksheep.sheepnote.data.NoteData;
 import com.darksheep.sheepnote.data.service.FlowchartService;
 import com.darksheep.sheepnote.ui.web.handler.WebResourceManager;
@@ -51,10 +52,8 @@ private void initJSBridge() {
         JBCefJSQuery saveFlowchartQuery = JBCefJSQuery.create((JBCefBrowserBase)browser);
         saveFlowchartQuery.addHandler((String data) -> {
             try {
-                Map<String, Object> flowchartData = gson.fromJson(data, Map.class);
-                String name = (String) flowchartData.get("name");
-                String content = gson.toJson(flowchartData.get("content"));
-                flowchartService.saveFlowchart(name, content);
+                FlowchartData flowchartData = gson.fromJson(data, FlowchartData.class);
+                flowchartService.saveFlowchart(flowchartData);
                 return new JBCefJSQuery.Response("OK");
             } catch (Exception e) {
                 e.printStackTrace();
@@ -192,15 +191,6 @@ private void injectJSBridge(JBCefJSQuery saveFlowchartQuery, JBCefJSQuery search
 
         browser.getCefBrowser().executeJavaScript(script.toString(), "", 0);
     }
-
-    public void loadSavedFlowchart(String flowchartId) {
-        String flowchartData = flowchartService.getFlowchartById(flowchartId);
-        if (flowchartData != null) {
-            System.out.println(flowchartData);
-            String script = String.format("loadFlowchart(%s);", gson.toJson(flowchartData) );
-            browser.getCefBrowser().executeJavaScript(script, "", 0);
-        }
-    }
     private String getExtension(String fileName) {
         int dotIndex = fileName.lastIndexOf('.');
         return (dotIndex == -1) ? "" : fileName.substring(dotIndex + 1);

src/main/resources/META-INF/web/flowchart/index.html

@@ -8,21 +8,23 @@
 </head>
 <body>
     <div class="toolbar">
-        <button id="newNode" class="toolbar-btn">
-            <span class="icon">+</span>新建节点
-        </button>
-        <button id="loadFlowchart" class="toolbar-btn">
-            <span class="icon">📂</span>加载流程图
-        </button>
-        <button id="save" class="toolbar-btn">
-            <span class="icon">💾</span>保存流程图
-        </button>
-        <button id="toggleAllCode" class="toolbar-btn">
-            <span class="icon">📝</span><span id="toggleAllCodeText">展开所有代码</span>
-        </button>
-        <button id="refresh" class="toolbar-btn" style="margin-left: auto;">
-            <span class="icon">⟳</span>刷新页面
-        </button>
+        <div class="toolbar-group">
+            <button id="newNode" class="toolbar-btn">
+                <span class="icon">＋</span>新建节点
+            </button>
+            <button id="loadFlowchart" class="toolbar-btn">
+                <span class="icon">📂</span>加载流程图
+            </button>
+            <button id="save" class="toolbar-btn">
+                <span class="icon">💾</span>保存流程图
+            </button>
+            <button id="toggleAllCode" class="toolbar-btn">
+                <span class="icon">📝</span><span id="toggleAllCodeText">展开代码</span>
+            </button>
+            <button id="refresh" class="toolbar-btn">
+                <span class="icon">⟳</span>刷新
+            </button>
+        </div>
     </div>
 
     <div id="searchPanel" class="search-panel">
@@ -65,24 +67,77 @@ <h3>加载流程图</h3>
     <div id="flowchartContainer"></div>
 
     <style>
+        /* iOS 风格的工具栏样式 */
+        .toolbar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            padding: 8px 16px;
+            z-index: 100;
+            display: flex;
+            justify-content: center;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+
+        .toolbar-group {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
         .toolbar-btn {
             display: flex;
             align-items: center;
             padding: 8px 16px;
-            margin: 0 4px;
             border: none;
-            border-radius: 4px;
-            background: #f0f0f0;
+            border-radius: 8px;
+            background: rgba(0, 122, 255, 0.1);
+            color: #007AFF;
+            font-size: 14px;
+            font-weight: 500;
             cursor: pointer;
-            transition: all 0.3s;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            white-space: nowrap;
         }
 
         .toolbar-btn:hover {
-            background: #e0e0e0;
+            background: rgba(0, 122, 255, 0.15);
+            transform: translateY(-1px);
+        }
+
+        .toolbar-btn:active {
+            transform: translateY(0);
         }
 
         .toolbar-btn .icon {
-            margin-right: 8px;
+            margin-right: 6px;
+            font-size: 16px;
+        }
+
+        /* 暗色模式支持 */
+        @media (prefers-color-scheme: dark) {
+            .toolbar {
+                background: rgba(0, 0, 0, 0.8);
+                border-bottom-color: rgba(255, 255, 255, 0.1);
+            }
+
+            .toolbar-btn {
+                background: rgba(0, 122, 255, 0.2);
+                color: #0A84FF;
+            }
+
+            .toolbar-btn:hover {
+                background: rgba(0, 122, 255, 0.25);
+            }
+        }
+
+        /* 调整流程图容器的上边距，为工具栏留出空间 */
+        #flowchartContainer {
+            margin-top: 60px;
         }
 
         .flowchart-node {
@@ -199,6 +254,8 @@ <h3>加载流程图</h3>
         let nodeCounter = 0;
         let currentMousePos = { x: 0, y: 0 };
         let activeNode = null;
+        let currentFlowchartId = null; // 添加当前流程图ID的跟踪
+        let currentFlowchartName = null;
 
         // 跟踪鼠标位置
         document.addEventListener('mousemove', (e) => {
@@ -210,36 +267,38 @@ <h3>加载流程图</h3>
             showSearchPanel();
         });
 
-        document.getElementById('save').addEventListener('click', () => {
-            document.getElementById('saveDialog').style.display = 'block';
+        document.getElementById('save').addEventListener('click', async () => {
+            if (currentFlowchartId) {
+                // 如果有当前流程图ID，直接保存
+                await saveCurrentFlowChart();
+            } else {
+                // 否则显示保存对话框
+                document.getElementById('saveDialog').style.display = 'block';
+            }
         });
 
-        document.getElementById('confirmSave').addEventListener('click', async () => {
-            const name = document.getElementById('flowchartName').value;
+        async function saveCurrentFlowChart() {
+            const name = document.getElementById('flowchartName').value || currentFlowchartName;
             if (name) {
                 try {
-                    const flowchartContent = saveCurrentFlowchart();
-                    // 为所有带 noteData 的节点添加流程图名称作为 tag
-                    flowchartContent.nodes.forEach(node => {
-                        if (node.noteData) {
-                            const tags = node.noteData.tags || [];
-                            if (!tags.includes(name)) {
-                                tags.push(name);
-                                node.noteData.tags = tags;
-                            }
-                        }
-                    });
-
+                    const flowchartContent = getCurrentFlowChartData();
                     const flowchartData = {
+                        id: currentFlowchartId, // 添加ID用于更新
                         name: name,
-                        content: flowchartContent
+                        data: JSON.stringify(flowchartContent)
                     };
+                    console.log('await saveFlowchart:', flowchartData);
                     await window.saveFlowchart(flowchartData);
                     document.getElementById('saveDialog').style.display = 'none';
                 } catch (error) {
                     console.error('保存失败:', error);
                 }
             }
+        }
+
+        document.getElementById('confirmSave').addEventListener('click', async () => {
+            console.log('confirmSave');
+            await saveCurrentFlowChart();
         });
 
         document.getElementById('cancelSave').addEventListener('click', () => {
@@ -298,7 +357,7 @@ <h3>加载流程图</h3>
             });
         }
 
-        function saveCurrentFlowchart() {
+        function getCurrentFlowChartData() {
             const nodes = Array.from(document.querySelectorAll('.flowchart-node')).map(node => {
                 const nodeData = {
                     id: node.id,
@@ -340,7 +399,11 @@ <h3>加载流程图</h3>
                     return;
                 }
 
-                const data = flowchartData;
+                // 设置当前流程图ID
+                currentFlowchartId = flowchartId;
+                currentFlowchartName = flowchartData.name;
+                
+                const data = JSON.parse(flowchartData.data);
                 if (!data || !data.nodes || !Array.isArray(data.nodes)) {
                     console.error('流程图数据格式不正确');
                     return;
@@ -352,9 +415,11 @@ <h3>加载流程图</h3>
                 container.innerHTML = '';
                 nodeCounter = 0;
 
+                // 设置流程图名称
+                document.getElementById('flowchartName').value = data.name || '';
+
                 // 创建节点
                 data.nodes.forEach(nodeData => {
-                    // 确保 noteData 的字段名称正确
                     let noteDataForCreate = null;
                     if (nodeData.noteData) {
                         noteDataForCreate = {
@@ -466,9 +531,7 @@ <h3>加载流程图</h3>
                     try {
                         const tags = document.createElement('div');
                         tags.className = 'node-tags';
-                        const tagArray = noteData.tags.split(',')
-                            .map(tag => tag.trim())
-                            .filter(tag => tag.length > 0);
+                        const tagArray = noteData.tags.split(',').map(t => t.trim()).filter(t => t);
                         if (tagArray.length > 0) {
                             tags.innerHTML = tagArray.map(tag => 
                                 `<span class="node-tag">${tag}</span>`
@@ -628,6 +691,20 @@ <h3>加载流程图</h3>
             document.getElementById('contextMenu').style.display = 'none';
             activeNode = null;
         }
+
+        // 添加快捷键保存功能
+        document.addEventListener('keydown', async (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+                e.preventDefault();
+                if (currentFlowchartId) {
+                    // 如果有当前流程图ID，直接保存
+                    await saveCurrentFlowChart();
+                } else {
+                    // 否则显示保存对话框
+                    document.getElementById('saveDialog').style.display = 'block';
+                }
+            }
+        });
     </script>
 </body>
 </html>