☰

Apollo JSON 校验

ApolloJSON校验内容

  1. // ==UserScript==
  2. // @name         Apollo JSON 校验
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  ApolloJSON校验内容
  6. // @author       You
  7. // @match        https://rdfa-cfg-portal.dev.ennew.com/config.html
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=ennew.com
  9. // @grant        none
  10. // @license      none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     function createCustomElement(mountContainer){
  16.         // 创建一个文档碎片
  17.         const fragment = document.createDocumentFragment();
  18.         // 创建一个新的div元素
  19.         const divElement = document.createElement("div");
  20.         divElement.style.position = "absolute";
  21.         divElement.style.top = "10px"; // 设置固定位置的垂直位置
  22.         divElement.style.left = "10px"; // 设置固定位置的水平位置
  23.         divElement.style.background = "#ffffff"; // 背景颜色
  24.         divElement.style.padding = "10px"; // 内边距
  25.         divElement.style.gap = "10px";
  26.         divElement.style.height = "50px";
  27.         divElement.style.display="none"
  28.  
  29.         // 创建第一个按钮（检查JSON）
  30.         const checkJSONButton = document.createElement("button");
  31.         checkJSONButton.classList.add('el-button', 'el-button--primary')
  32.         checkJSONButton.textContent = "检查JSON";
  33.         checkJSONButton.addEventListener("click", function (event) {
  34.             event.preventDefault();
  35.             const valueEditorContext = document.querySelector("#itemModal .modal-dialog #valueEditor")
  36.             try {
  37.                 JSON.parse(valueEditorContext.value);
  38.                 showText.classList = [];
  39.                 showText.classList.add('el-button','el-button--success','is-text')
  40.                 showText.textContent = 'JSON合法'
  41.             } catch (error) {
  42.                 debugger
  43.                 showText.classList = [];
  44.                 showText.classList.add('el-button','el-button--danger','is-text')
  45.                 showText.textContent = 'JSON不合法，请打开控制台查看！'
  46.                 console.log(error)
  47.                 console.error(error)
  48.             }
  49.         });
  50.  
  51.         // 创建第二个按钮（美化JSON）
  52.         const prettifyJSONButton = document.createElement("button");
  53.         prettifyJSONButton.textContent = "美化JSON";
  54.         prettifyJSONButton.classList.add('el-button','el-button--secondary')
  55.         prettifyJSONButton.addEventListener("click", function (event) {
  56.             // 添加你的JSON美化逻辑
  57.             event.preventDefault();
  58.             const valueEditorContext = document.querySelector("#itemModal .modal-dialog #valueEditor")
  59.             const jsonObject = JSON.parse(valueEditorContext.value);
  60.             const prettyJSON = JSON.stringify(jsonObject, null, 2);
  61.             valueEditorContext.value = prettyJSON;
  62.             showText.textContent = "已美化~";
  63.             showText.classList = [];
  64.             showText.classList.add('el-button','el-button--success','is-text')
  65.         });
  66.         //
  67.         var showText = document.createElement("span");
  68.         showText.textContent = "";
  69.  
  70.         // 将按钮添加到div元素中
  71.         divElement.appendChild(checkJSONButton);
  72.         divElement.appendChild(prettifyJSONButton);
  73.         divElement.appendChild(showText);
  74.         // 将div元素添加到文档碎片
  75.         fragment.appendChild(divElement);
  76.         // 将文档碎片的内容一次性添加到
  77.         mountContainer.appendChild(fragment);
  78.         return divElement
  79.     }
  80.  
  81.     function loadEncyCss(){
  82.         // 创建一个<link>元素
  83.         var link = document.createElement("link");
  84.         // 设置<link>元素的属性
  85.         link.rel = "stylesheet";
  86.         link.href = "https://oss-statics.icomecloud.com/statics/@enn/ency-design/dist/1.8.19/index.css";
  87.         // 将<link>元素添加到文档的<head>部分，这会触发CSS文件的加载
  88.         document.head.appendChild(link);
  89.     }
  90.     loadEncyCss()
  91.     window.onload=function(){
  92.         var dialogFooter = document.querySelector("#itemModal .modal-dialog .modal-footer")
  93.         dialogFooter.style.position = 'relative'
  94.         var divElement = createCustomElement(dialogFooter)
  95.         var itemModal = document.querySelector("#itemModal .modal-dialog");
  96.         // 创建 IntersectionObserver 的回调函数
  97.         var callback = function(entries, observer) {
  98.             entries.forEach(function(entry) {
  99.                 if (entry.isIntersecting) {
  100.                     // 在这里执行元素可见时的操作
  101.                     divElement.style.display="flex"
  102.                 } else {
  103.                     // 在这里执行隐藏后的操作
  104.                     divElement.style.display="none"
  105.                 }
  106.             });
  107.         };
  108.         var observer = new IntersectionObserver(callback);
  109.         observer.observe(itemModal);
  110.     };
  111. })();