Quellcode durchsuchen

json格式化的状态栏增加语言选择 path

zxlie vor 3 Monaten
Ursprung
Commit
320df1ce88
2 geänderte Dateien mit 293 neuen und 16 gelöschten Zeilen
  1. 88 0
      apps/json-format/content-script.css
  2. 205 16
      apps/json-format/format-lib.js

+ 88 - 0
apps/json-format/content-script.css

@@ -480,8 +480,49 @@ html.fh-jf .hide-status-bar #statusBar {
     height:0;
     opacity: 0;
 }
+/* JSON Path 语言选择器容器 */
+#jsonPathContainer {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+/* 语言选择下拉框样式 */
+#jsonPathLangSelector {
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    padding: 2px 5px;
+    font-size: 11px;
+    color: #333;
+    outline: none;
+    cursor: pointer;
+    min-width: 80px;
+}
+
+#jsonPathLangSelector:hover {
+    border-color: #999;
+}
+
+#jsonPathLangSelector:focus {
+    border-color: #0066cc;
+    box-shadow: 0 0 3px rgba(0, 102, 204, 0.3);
+}
+
+/* JSON路径显示样式优化 */
 #jsonPath {
     cursor: default;
+    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
+    background: #f8f8f8;
+    padding: 3px 8px;
+    border-radius: 3px;
+    border: 1px solid #e0e0e0;
+    font-size: 11px;
+    word-break: break-all;
+    max-width: calc(100vw - 200px);
+    overflow-x: auto;
+    white-space: nowrap;
 }
 
 html.fh-jf .boxOpt {
@@ -851,6 +892,27 @@ html.fh-jf .theme-dark #statusBar {
     color: #ddd;
     border-top: 1px solid #555;
 }
+
+/* 深色主题的JSON路径组件适配 */
+html.fh-jf .theme-dark #jsonPathLangSelector {
+    background: #333;
+    border-color: #555;
+    color: #ccc;
+}
+
+html.fh-jf .theme-dark #jsonPathLangSelector:hover {
+    border-color: #777;
+}
+
+html.fh-jf .theme-dark #jsonPathLangSelector:focus {
+    border-color: #0066cc;
+}
+
+html.fh-jf .theme-dark #jsonPath {
+    background: #2a2a2a;
+    border-color: #444;
+    color: #ccc;
+}
 html.fh-jf .theme-dark .boxOpt {
     background: -webkit-linear-gradient(#222,#222,#111);
     border: 1px solid #333;
@@ -946,6 +1008,19 @@ html.fh-jf .theme-dark .x-other-tools {
 }
 
 /*================ 皮肤:theme-vscode ===================*/
+/* VSCode主题的JSON路径组件适配 */
+.theme-vscode #jsonPathLangSelector {
+    background: #f8f8f8;
+    border-color: #ccc;
+    color: #333;
+}
+
+.theme-vscode #jsonPath {
+    background: #f8f8f8;
+    border-color: #ddd;
+    color: #333;
+}
+
 .theme-vscode .item .key {
     color: #f00;
 }
@@ -989,6 +1064,19 @@ html.fh-jf .theme-dark .x-other-tools {
 
 
 /*================ 皮肤:theme-github ===================*/
+/* GitHub主题的JSON路径组件适配 */
+.theme-github #jsonPathLangSelector {
+    background: #fff;
+    border-color: #d1d5da;
+    color: #24292e;
+}
+
+.theme-github #jsonPath {
+    background: #f6f8fa;
+    border-color: #d1d5da;
+    color: #24292e;
+}
+
 .theme-github {
     background: #f8f8f8;
 }

+ 205 - 16
apps/json-format/format-lib.js

@@ -294,27 +294,216 @@ window.Formatter = (function () {
         // 过滤掉空值和无效的key
         let validKeys = keys.filter(key => key && key.trim() !== '');
         
-        // 构建路径
+        // 创建或获取语言选择器和路径显示区域
+        let jfPathContainer = $('#jsonPathContainer');
+        if (!jfPathContainer.length) {
+            jfPathContainer = $('<div id="jsonPathContainer"/>').prependTo(jfStatusBar);
+            
+            // 创建语言选择下拉框
+            let langSelector = $('<select id="jsonPathLangSelector" title="选择编程语言格式">' +
+                '<option value="javascript">JavaScript</option>' +
+                '<option value="php">PHP</option>' +
+                '<option value="python">Python</option>' +
+                '<option value="java">Java</option>' +
+                '<option value="csharp">C#</option>' +
+                '<option value="golang">Go</option>' +
+                '<option value="ruby">Ruby</option>' +
+                '<option value="swift">Swift</option>' +
+                '</select>').appendTo(jfPathContainer);
+            
+            // 创建路径显示区域
+            let jfPath = $('<span id="jsonPath"/>').appendTo(jfPathContainer);
+            
+            // 绑定语言切换事件
+            langSelector.on('change', function() {
+                // 保存选择的语言到本地存储
+                localStorage.setItem('fehelper_json_path_lang', $(this).val());
+                // 从容器中获取当前保存的keys,而不是使用闭包中的validKeys
+                let currentKeys = jfPathContainer.data('currentKeys') || [];
+                _updateJsonPath(currentKeys, $(this).val());
+            });
+            
+            // 从本地存储恢复语言选择
+            let savedLang = localStorage.getItem('fehelper_json_path_lang') || 'javascript';
+            langSelector.val(savedLang);
+        }
+        
+        // 保存当前的keys到容器的data属性中,供语言切换时使用
+        jfPathContainer.data('currentKeys', validKeys);
+        
+        // 获取当前选择的语言
+        let selectedLang = $('#jsonPathLangSelector').val() || 'javascript';
+        _updateJsonPath(validKeys, selectedLang);
+    };
+
+    // 根据不同编程语言格式化JSON路径
+    let _updateJsonPath = function(keys, language) {
+        let path = _formatJsonPath(keys, language);
+        $('#jsonPath').html('当前节点:' + path);
+    };
+
+    // 格式化JSON路径为不同编程语言格式
+    let _formatJsonPath = function(keys, language) {
+        if (!keys.length) {
+            return _getLanguageRoot(language);
+        }
+
         let path = '';
-        for (let i = 0; i < validKeys.length; i++) {
-            let key = validKeys[i];
-            if (key.startsWith('[') && key.endsWith(']')) {
-                // 数组索引,直接拼接
-                path += key;
-            } else {
-                // 对象属性
-                if (i > 0) {
-                    path += '.';
+        
+        switch (language) {
+            case 'javascript':
+                path = '$';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        path += key;
+                    } else {
+                        // 对象属性
+                        if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)) {
+                            // 有效的标识符,使用点语法
+                            path += '.' + key;
+                        } else {
+                            // 包含特殊字符,使用方括号语法
+                            path += '["' + key.replace(/"/g, '\\"') + '"]';
+                        }
+                    }
                 }
-                path += key;
-            }
+                break;
+                
+            case 'php':
+                path = '$data';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        path += key;
+                    } else {
+                        // 对象属性
+                        path += '["' + key.replace(/"/g, '\\"') + '"]';
+                    }
+                }
+                break;
+                
+            case 'python':
+                path = 'data';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        path += key;
+                    } else {
+                        // 对象属性
+                        if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key) && !/^(and|as|assert|break|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|not|or|pass|print|raise|return|try|while|with|yield)$/.test(key)) {
+                            // 有效的标识符且不是关键字,可以使用点语法
+                            path += '.' + key;
+                        } else {
+                            // 使用方括号语法
+                            path += '["' + key.replace(/"/g, '\\"') + '"]';
+                        }
+                    }
+                }
+                break;
+                
+            case 'java':
+                path = 'jsonObject';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        let index = key.slice(1, -1);
+                        path += '.get(' + index + ')';
+                    } else {
+                        // 对象属性
+                        path += '.get("' + key.replace(/"/g, '\\"') + '")';
+                    }
+                }
+                break;
+                
+            case 'csharp':
+                path = 'jsonObject';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        path += key;
+                    } else {
+                        // 对象属性
+                        path += '["' + key.replace(/"/g, '\\"') + '"]';
+                    }
+                }
+                break;
+                
+            case 'golang':
+                path = 'data';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        let index = key.slice(1, -1);
+                        path += '.(' + index + ')';
+                    } else {
+                        // 对象属性
+                        path += '["' + key.replace(/"/g, '\\"') + '"]';
+                    }
+                }
+                break;
+                
+            case 'ruby':
+                path = 'data';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        path += key;
+                    } else {
+                        // 对象属性
+                        if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
+                            // 可以使用符号访问
+                            path += '[:"' + key + '"]';
+                        } else {
+                            // 字符串键
+                            path += '["' + key.replace(/"/g, '\\"') + '"]';
+                        }
+                    }
+                }
+                break;
+                
+            case 'swift':
+                path = 'jsonObject';
+                for (let i = 0; i < keys.length; i++) {
+                    let key = keys[i];
+                    if (key.startsWith('[') && key.endsWith(']')) {
+                        // 数组索引
+                        path += key;
+                    } else {
+                        // 对象属性
+                        path += '["' + key.replace(/"/g, '\\"') + '"]';
+                    }
+                }
+                break;
+                
+            default:
+                // 默认使用JavaScript格式
+                return _formatJsonPath(keys, 'javascript');
         }
+        
+        return path;
+    };
 
-        let jfPath = $('#jsonPath');
-        if (!jfPath.length) {
-            jfPath = $('<span id="jsonPath"/>').prependTo(jfStatusBar);
+    // 获取不同语言的根对象表示
+    let _getLanguageRoot = function(language) {
+        switch (language) {
+            case 'javascript': return '$';
+            case 'php': return '$data';
+            case 'python': return 'data';
+            case 'java': return 'jsonObject';
+            case 'csharp': return 'jsonObject';
+            case 'golang': return 'data';
+            case 'ruby': return 'data';
+            case 'swift': return 'jsonObject';
+            default: return '$';
         }
-        jfPath.html('当前节点:$.' + path);
     };
 
     // 给某个节点增加操作项