FeHelper/apps/json-diff/index.js

// 创建Vue实例并暴露到全局供事件处理使用
window.vueApp = new Vue({
    el: '#pageContainer',
    data: {
        errorMessage: '',
        tipMessage: 'Tips：',
        errorHighlight: false,
        hasErrorClass: false,
        leftSideError: false,
        rightSideError: false,
        differenceCount: 0,
        isDifferent: false,
        jsonExamples: {
            userInfo: {
                left: {
                    "id": 1001,
                    "name": "张三",
                    "age": 28,
                    "email": "[email protected]",
                    "address": {
                        "city": "北京",
                        "district": "朝阳区",
                        "street": "建国路88号"
                    },
                    "tags": ["前端", "JavaScript", "Vue"],
                    "isActive": true,
                    "lastLogin": "2023-01-15T08:30:00Z"
                },
                right: {
                    "id": 1001,
                    "name": "张三",
                    "age": 30,
                    "email": "[email protected]",
                    "address": {
                        "city": "上海",
                        "district": "浦东新区",
                        "street": "建国路88号"
                    },
                    "tags": ["前端", "JavaScript", "React"],
                    "isActive": true,
                    "lastLogin": "2023-02-20T10:45:00Z"
                }
            },
            productData: {
                left: {
                    "products": [
                        {
                            "id": "p001",
                            "name": "智能手机",
                            "price": 4999,
                            "inventory": 100,
                            "category": "电子产品",
                            "specs": {
                                "brand": "小米",
                                "model": "Mi 11",
                                "color": "黑色",
                                "storage": "128GB"
                            }
                        },
                        {
                            "id": "p002",
                            "name": "笔记本电脑",
                            "price": 6999,
                            "inventory": 50,
                            "category": "电子产品",
                            "specs": {
                                "brand": "联想",
                                "model": "ThinkPad",
                                "color": "银色",
                                "storage": "512GB"
                            }
                        }
                    ]
                },
                right: {
                    "products": [
                        {
                            "id": "p001",
                            "name": "智能手机",
                            "price": 5299,
                            "inventory": 85,
                            "category": "电子产品",
                            "specs": {
                                "brand": "小米",
                                "model": "Mi 11 Pro",
                                "color": "蓝色",
                                "storage": "256GB"
                            }
                        },
                        {
                            "id": "p002",
                            "name": "笔记本电脑",
                            "price": 6999,
                            "inventory": 50,
                            "category": "电子产品",
                            "specs": {
                                "brand": "联想",
                                "model": "ThinkPad",
                                "color": "银色",
                                "storage": "512GB"
                            }
                        }
                    ]
                }
            },
            configOptions: {
                left: {
                    "appConfig": {
                        "theme": "light",
                        "language": "zh-CN",
                        "notifications": {
                            "email": true,
                            "push": true,
                            "sms": false
                        },
                        "security": {
                            "twoFactorAuth": true,
                            "passwordExpiry": 90,
                            "ipRestriction": false
                        },
                        "performance": {
                            "cacheEnabled": true,
                            "compressionLevel": "high",
                            "preload": ["home", "dashboard"]
                        }
                    }
                },
                right: {
                    "appConfig": {
                        "theme": "dark",
                        "language": "zh-CN",
                        "notifications": {
                            "email": true,
                            "push": false,
                            "sms": true
                        },
                        "security": {
                            "twoFactorAuth": true,
                            "passwordExpiry": 60,
                            "ipRestriction": true
                        },
                        "performance": {
                            "cacheEnabled": true,
                            "compressionLevel": "medium",
                            "preload": ["home", "profile", "dashboard"]
                        }
                    }
                }
            },
            apiResponse: {
                left: {
                    "status": "success",
                    "code": 200,
                    "data": {
                        "users": [
                            {"id": 1, "name": "李明", "role": "admin"},
                            {"id": 2, "name": "王芳", "role": "user"},
                            {"id": 3, "name": "赵强", "role": "editor"}
                        ],
                        "pagination": {
                            "total": 25,
                            "page": 1,
                            "limit": 10
                        },
                        "timestamp": 1642558132,
                        "version": "1.0.0"
                    }
                },
                right: {
                    "status": "success",
                    "code": 200,
                    "data": {
                        "users": [
                            {"id": 1, "name": "李明", "role": "admin"},
                            {"id": 2, "name": "王芳", "role": "user"},
                            {"id": 3, "name": "赵强", "role": "moderator"}
                        ],
                        "pagination": {
                            "total": 28,
                            "page": 1,
                            "limit": 10
                        },
                        "timestamp": 1652558132,
                        "version": "1.2.0"
                    }
                }
            }
        }
    },
    computed: {
        // 显示的消息，计算属性替代v-html
        displayMessage: function() {
            return this.tipMessage + this.errorMessage;
        }
    },
    methods: {
        fillExample: function(exampleType) {
            if (this.jsonExamples[exampleType]) {
                const example = this.jsonExamples[exampleType];
                jsonBox.left.setValue(JSON.stringify(example.left, null, 4));
                jsonBox.right.setValue(JSON.stringify(example.right, null, 4));
                
                // 触发比对
                setTimeout(() => {
                    jsonBox.left.refresh();
                    jsonBox.right.refresh();
                    this.compareJson(); // 使用Vue实例的方法进行比对
                }, 100);
            }
        },
        // 添加比对JSON的方法
        compareJson: function() {
            // 使用全局变量中的实例
            let leftText = jsonBox.left.getValue();
            let rightText = jsonBox.right.getValue();
            let leftJson, rightJson;
            
            try {
                if (leftText) {
                    leftJson = JSON.parse(leftText);
                }
                this.errorHandler('left', true);
            } catch (e) {
                console.log('left ==>', e);
                this.errorHandler('left', false);
                return;
            }
            
            try {
                if (rightText) {
                    rightJson = JSON.parse(rightText);
                }
                this.errorHandler('right', true);
            } catch (e) {
                console.log('right ==>', e);
                this.errorHandler('right', false);
                return;
            }
            
            if (!leftJson || !rightJson) {
                if (!leftJson && !rightJson) {
                    this.errorHandler('left-right', false);
                } else if (!leftJson) {
                    this.errorHandler('left', false);
                } else {
                    this.errorHandler('right', false);
                }
                return;
            }
            
            try {
                // 调用jsonpatch的compare方法进行比对
                let diffs = jsonpatch.compare(leftJson, rightJson);
                this.diffHandler(diffs);
                
                // 清除所有之前的标记
                this.clearMarkers();
                
                // 高亮差异
                diffs.forEach((diff) => {
                    try {
                        if (diff.op === 'remove') {
                            this.highlightDiff(diff, 'remove');
                        } else if (diff.op === 'add') {
                            this.highlightDiff(diff, 'add');
                        } else if (diff.op === 'replace') {
                            this.highlightDiff(diff, 'replace');
                        }
                    } catch (e) {
                        console.warn('error while trying to highlight diff', e);
                    }
                });
            } catch (e) {
                console.error('比对过程出错:', e);
            }
        },
        // 清除所有标记
        clearMarkers: function() {
            jsonBox.left.getAllMarks().forEach(function(marker) {
                marker.clear();
            });
            jsonBox.right.getAllMarks().forEach(function(marker) {
                marker.clear();
            });
        },
        // 高亮差异
        highlightDiff: function(diff, op) {
            if (op === 'remove') {
                this.highlightRemoval(jsonBox.left, diff);
            } else if (op === 'add') {
                this.highlightAddition(jsonBox.right, diff);
            } else if (op === 'replace') {
                this.highlightChange(jsonBox.left, diff);
                this.highlightChange(jsonBox.right, diff);
            }
        },
        // 高亮删除
        highlightRemoval: function(editor, diff) {
            this._highlight(editor, diff, '#DD4444');
        },
        // 高亮添加
        highlightAddition: function(editor, diff) {
            this._highlight(editor, diff, '#4ba2ff');
        },
        // 高亮修改
        highlightChange: function(editor, diff) {
            this._highlight(editor, diff, '#E5E833');
        },
        // 高亮辅助方法
        _highlight: function(editor, diff, color) {
            try {
                let textValue = editor.getValue();
                // 使用全局jsonSourceMap对象
                let result = jsonSourceMap.parse(textValue);
                let pointers = result.pointers;
                let path = diff.path;
                
                if (!pointers[path]) {
                    console.warn('找不到路径的指针:', path);
                    return;
                }
                
                let start = {
                    line: pointers[path].key ? pointers[path].key.line : pointers[path].value.line,
                    ch: pointers[path].key ? pointers[path].key.column : pointers[path].value.column
                };
                let end = {
                    line: pointers[path].valueEnd.line,
                    ch: pointers[path].valueEnd.column
                };
                
                editor.markText(start, end, {
                    css: 'background-color: ' + color
                });
            } catch (e) {
                console.error('高亮过程出错:', e);
            }
        },
        // 错误处理
        errorHandler: function(which, ok) {
            if (ok) {
                this.errorMessage = '两侧JSON比对完成！';
                this.errorHighlight = false;
                this.leftSideError = false;
                this.rightSideError = false;
            } else {
                let side = {'left': '左', 'right': '右', 'left-right': '两'}[which];
                if(!jsonBox.left.getValue().trim().length) {
                    this.errorMessage = '请在左侧填入待比对的JSON内容！';
                    this.leftSideError = true;
                    this.rightSideError = false;
                }else if(!jsonBox.right.getValue().trim().length) {
                    this.errorMessage = '请在右侧填入待比对的JSON内容！';
                    this.leftSideError = false;
                    this.rightSideError = true;
                }else{
                    this.errorMessage = side + '侧JSON不合法！';
                    if (which === 'left') {
                        this.leftSideError = true;
                        this.rightSideError = false;
                    } else if (which === 'right') {
                        this.leftSideError = false;
                        this.rightSideError = true;
                    } else {
                        this.leftSideError = true;
                        this.rightSideError = true;
                    }
                }
                this.errorHighlight = true;
            }
        },
        // diff处理器
        diffHandler: function(diffs) {
            if (!this.errorHighlight) {
                this.differenceCount = diffs.length;
                this.isDifferent = diffs.length > 0;
                if (diffs.length) {
                    this.errorMessage += '共有 ' + diffs.length + ' 处不一致！';
                } else {
                    this.errorMessage += '且JSON内容一致！';
                }
            }
        },

        // 打开工具市场页面
        openOptionsPage: function(event){
            event.preventDefault();
            event.stopPropagation();
            chrome.runtime.openOptionsPage();
        },

        openDonateModal: function(event){
            event.preventDefault();
            event.stopPropagation();
            chrome.runtime.sendMessage({
                type: 'fh-dynamic-any-thing',
                thing: 'open-donate-modal',
                params: { toolName: 'json-diff' }
            });
        },


        loadPatchHotfix() {
            // 页面加载时自动获取并注入页面的补丁
            chrome.runtime.sendMessage({
                type: 'fh-dynamic-any-thing',
                thing: 'fh-get-tool-patch',
                toolName: 'json-diff'
            }, patch => {
                if (patch) {
                    if (patch.css) {
                        const style = document.createElement('style');
                        style.textContent = patch.css;
                        document.head.appendChild(style);
                    }
                    if (patch.js) {
                        try {
                            if (window.evalCore && window.evalCore.getEvalInstance) {
                                window.evalCore.getEvalInstance(window)(patch.js);
                            }
                        } catch (e) {
                            console.error('json-diff补丁JS执行失败', e);
                        }
                    }
                }
            });
        },
    },
    mounted: function () {
        // 初始化JSON编辑器
        let jsonBox = JsonDiff.init(this.$refs.srcLeft, this.$refs.srcRight, 
            this.errorHandler.bind(this), 
            this.diffHandler.bind(this)
        );
        
        // 添加比较方法
        jsonBox.compare = this.compareJson.bind(this);
        
        // 初始化文本变更监听
        jsonBox.left.on('change', () => {
            setTimeout(() => this.compareJson(), 300);
        });
        jsonBox.right.on('change', () => {
            setTimeout(() => this.compareJson(), 300);
        });
        
        // 暴露到全局，供示例数据使用
        window.jsonBox = jsonBox;

        this.loadPatchHotfix();
    }
});