JSON格式化工具的折叠和展开逻辑优化

apps/json-format/format-lib.js

@@ -366,30 +366,28 @@ window.Formatter = (function () {
 
 
     /**
-     * 折叠所有
+     * 递归折叠所有层级的对象和数组节点
      * @param elements
      */
     function collapse(elements) {
-        let el;
-
-        $.each(elements, function (i) {
-            el = $(this);
+        elements.each(function () {
+            var el = $(this);
             if (el.children('.kv-list').length) {
                 el.addClass('collapsed');
 
+                // 只给没有id的节点分配唯一id，并生成注释
                 if (!el.attr('id')) {
                     el.attr('id', 'item' + (++lastItemIdGiven));
-
                     let count = el.children('.kv-list').eq(0).children().length;
-                    // Generate comment text eg "4 items"
                     let comment = count + (count === 1 ? ' item' : ' items');
-                    // Add CSS that targets it
                     jfStyleEl[0].insertAdjacentHTML(
                         'beforeend',
                         '\n#item' + lastItemIdGiven + '.collapsed:after{color: #aaa; content:" // ' + comment + '"}'
                     );
                 }
 
+                // 递归对子节点继续折叠，确保所有嵌套层级都被处理
+                collapse(el.children('.kv-list').children('.item-object, .item-block'));
             }
         });
     }
@@ -436,9 +434,11 @@ window.Formatter = (function () {
 
             if (buttonCollapseAll.text() === '折叠所有') {
                 buttonCollapseAll.text('展开所有');
-                collapse($('.item-object,.item-block'));
+                // 递归折叠所有层级的对象和数组，确保所有内容都被折叠
+                collapse($('#jfContent .item-object, #jfContent .item-block'));
             } else {
                 buttonCollapseAll.text('折叠所有');
+                // 展开所有内容
                 $('.item-object,.item-block').removeClass('collapsed');
             }
             jfStatusBar && jfStatusBar.hide();

apps/json-format/json-worker.js

@@ -203,32 +203,27 @@ function createNode(value) {
             keys.forEach((key, index) => {
                 let prop = this.value[key];
                 let childNode = createNode(prop);
-                
-                html += '<div class="item">';
-                
+                // 判断子节点是否为对象或数组，决定是否加item-block
+                let itemClass = (childNode.type === 'object' || childNode.type === 'array') ? 'item item-block' : 'item';
+                html += '<div class="' + itemClass + '">';
                 // 如果值是对象或数组，在key前面添加展开按钮
                 if (childNode.type === 'object' || childNode.type === 'array') {
                     html += '<span class="expand"></span>';
                 }
-                
                 html += '<span class="quote">"</span>' +
                     '<span class="key">' + htmlspecialchars(key) + '</span>' +
                     '<span class="quote">"</span>' +
                     '<span class="colon">: </span>';
-                
                 // 添加值
                 if (childNode.type === 'object' || childNode.type === 'array') {
-                    // 对于对象和数组，将开始大括号/方括号放在同一行，但不包含展开按钮
                     html += childNode.getInlineHTMLWithoutExpand();
                 } else {
                     html += childNode.getHTML().replace(/^<div class="item item-line">/, '').replace(/<\/div>$/, '');
                 }
-                
                 // 如果不是最后一个属性，添加逗号
                 if (index < keys.length - 1) {
                     html += '<span class="comma">,</span>';
                 }
-                
                 html += '</div>';
             });
             
@@ -300,44 +295,34 @@ function createNode(value) {
             if (!this.value || Object.keys(this.value).length === 0) {
                 return '<span class="brace">{</span><span class="brace">}</span>';
             }
-            
             let html = '<span class="brace">{</span>' +
                 '<span class="expand"></span>' +
                 '<span class="ellipsis"></span>' +
                 '<div class="kv-list">';
-                
             let keys = Object.keys(this.value);
             keys.forEach((key, index) => {
                 let prop = this.value[key];
                 let childNode = createNode(prop);
-                
-                html += '<div class="item">';
-                
-                // 如果值是对象或数组，在key前面添加展开按钮
+                // 判断子节点是否为对象或数组，决定是否加item-block
+                let itemClass = (childNode.type === 'object' || childNode.type === 'array') ? 'item item-block' : 'item';
+                html += '<div class="' + itemClass + '">';
                 if (childNode.type === 'object' || childNode.type === 'array') {
                     html += '<span class="expand"></span>';
                 }
-                
                 html += '<span class="quote">"</span>' +
                     '<span class="key">' + htmlspecialchars(key) + '</span>' +
                     '<span class="quote">"</span>' +
                     '<span class="colon">: </span>';
-                
-                // 添加值
                 if (childNode.type === 'object' || childNode.type === 'array') {
                     html += childNode.getInlineHTMLWithoutExpand();
                 } else {
                     html += childNode.getHTML().replace(/^<div class="item item-line">/, '').replace(/<\/div>$/, '');
                 }
-                
-                // 如果不是最后一个属性，添加逗号
                 if (index < keys.length - 1) {
                     html += '<span class="comma">,</span>';
                 }
-                
                 html += '</div>';
             });
-            
             html += '</div><span class="brace">}</span>';
             return html;
         },
@@ -381,43 +366,33 @@ function createNode(value) {
             if (!this.value || Object.keys(this.value).length === 0) {
                 return '<span class="brace">{</span><span class="brace">}</span>';
             }
-            
             let html = '<span class="brace">{</span>' +
                 '<span class="ellipsis"></span>' +
                 '<div class="kv-list">';
-                
             let keys = Object.keys(this.value);
             keys.forEach((key, index) => {
                 let prop = this.value[key];
                 let childNode = createNode(prop);
-                
-                html += '<div class="item">';
-                
-                // 如果值是对象或数组，在key前面添加展开按钮
+                // 判断子节点是否为对象或数组，决定是否加item-block
+                let itemClass = (childNode.type === 'object' || childNode.type === 'array') ? 'item item-block' : 'item';
+                html += '<div class="' + itemClass + '">';
                 if (childNode.type === 'object' || childNode.type === 'array') {
                     html += '<span class="expand"></span>';
                 }
-                
                 html += '<span class="quote">"</span>' +
                     '<span class="key">' + htmlspecialchars(key) + '</span>' +
                     '<span class="quote">"</span>' +
                     '<span class="colon">: </span>';
-                
-                // 添加值
                 if (childNode.type === 'object' || childNode.type === 'array') {
                     html += childNode.getInlineHTMLWithoutExpand();
                 } else {
                     html += childNode.getHTML().replace(/^<div class="item item-line">/, '').replace(/<\/div>$/, '');
                 }
-                
-                // 如果不是最后一个属性，添加逗号
                 if (index < keys.length - 1) {
                     html += '<span class="comma">,</span>';
                 }
-                
                 html += '</div>';
             });
-            
             html += '</div><span class="brace">}</span>';
             return html;
         },