☰

Vue API 看板 (^2.0.0)

更方便的查看 Vue API

当前为 2020-07-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name:zh-CN   Vue API 看板 (^2.0.0)
  3. // @name         Vue API Dashboard (^2.0.0)
  4. // @namespace    https://github.com/xianghongai/Vue-API-Dashboard
  5. // @version      0.0.1
  6. // @description:zh-CN  更方便的查看 Vue API
  7. // @description  Better view for Vue API
  8. // @author       Nicholas Hsiang / 山茶树和葡萄树
  9. // @icon         https://xinlu.ink/favicon.ico
  10. // @match        https://ant.design/components/*
  11. // @grant        none
  12. // ==/UserScript==
  13. (() => {
  14.   "use strict";
  15.  
  16.   const titleText = "Vue API Dashboard";
  17.  
  18.   const gridSelector = ".sidebar-inner .menu-root";
  19.   const girdIsList = false; // 如果提取的是一个 Node 数组
  20.   const columnSelector = ".menu-root>li";
  21.   const columnTitleSelector = ".menu-root>li>a.section-link";
  22.   const menuListSelector = ".menu-sub";
  23.   const menuItemSelector = ".menu-sub li";
  24.  
  25.   const menuItemActionSelector = null;
  26.  
  27.   const helpEnable = false;
  28.   const helpSelector = "";
  29.  
  30.   // 使用本扩展的样式风格，将会替换原站点的菜单风格
  31.   const customStyleEnable = true; // Dark & Light
  32.   const cloneNodeEnable = true; // 保留原 DOM 节点?
  33.  
  34.   const compactColumnEnable = true; // 紧凑模式，将会合并一些少的列
  35.   const compactColumnLimit = 13; // 多列数据组合上限
  36.  
  37.   function initialExtraStyle() {
  38.     return `
  39.   .hs-dashboard__toggle {
  40.     top: 5px;
  41.   }
  42. `;
  43.   }
  44.  
  45.   /* ------------------------------------------------------------------------- */
  46.  
  47.   let wrapperEle = null;
  48.   let themeSwitchEle = null;
  49.   let themeSwitchForm = null;
  50.  
  51.   const bodyContainer = document.querySelector("body");
  52.  
  53.   function initialDashboard() {
  54.     initialToggle();
  55.     initialStyle(initialExtraStyle);
  56.     initialMenu(cloneNodeEnable);
  57.     initialHelp();
  58.     handleEvent();
  59.     handleTheme(true);
  60.   }
  61.  
  62.   let interval = null;
  63.  
  64.   function ready() {
  65.     const originEle = document.querySelector(gridSelector);
  66.  
  67.     if (originEle) {
  68.       clearInterval(interval);
  69.       // Dashboard
  70.       initialDashboard();
  71.       // Other
  72.     }
  73.   }
  74.  
  75.   interval = setInterval(ready, 1000);
  76.  
  77.   // #region MENU
  78.   /** 生成 Menu */
  79.   function initialMenu(clone) {
  80.     // Wrapper
  81.     wrapperEle = document.createElement("section");
  82.     wrapperEle.classList.add("hs-dashboard__wrapper", "hs-hide");
  83.  
  84.     if (customStyleEnable) {
  85.       wrapperEle.setAttribute("id", "hs-dashboard");
  86.     }
  87.  
  88.     // Header
  89.     const headerEle = document.createElement("header");
  90.     headerEle.classList.add("hs-dashboard__header");
  91.  
  92.     // Title → Header
  93.     const titleEle = document.createElement("h1");
  94.     titleEle.classList.add("hs-dashboard__title");
  95.     titleEle.innerText = titleText || "";
  96.     headerEle.appendChild(titleEle);
  97.  
  98.     // Theme → Header
  99.     if (customStyleEnable) {
  100.       const themeEle = document.createElement("div");
  101.       themeEle.classList.add("hs-theme-switch");
  102.       themeEle.innerHTML = initialThemeTpl();
  103.       headerEle.appendChild(themeEle);
  104.     }
  105.  
  106.     // Menu
  107.     const containerEle = document.createElement("div");
  108.     containerEle.classList.add("hs-dashboard__container");
  109.  
  110.     // 1. 先从页面上获取 DOM 生成 gird
  111.     let gridEle = null;
  112.     let nodeTemp = null;
  113.  
  114.     if (girdIsList) {
  115.       gridEle = document.createElement("div");
  116.       const gridListEle = document.querySelectorAll(gridSelector);
  117.       gridListEle &&
  118.         gridListEle.forEach((element) => {
  119.           nodeTemp = clone ? element.cloneNode(true) : element;
  120.           gridEle.appendChild(nodeTemp);
  121.         });
  122.     } else {
  123.       nodeTemp = document.querySelector(gridSelector);
  124.       gridEle = clone ? nodeTemp.cloneNode(true) : nodeTemp;
  125.       gridEle && nodeTemp.removeAttribute("id");
  126.     }
  127.  
  128.     gridEle.classList.add("hs-dashboard__grid"); // 追加新的样式
  129.  
  130.     // Menu → Container
  131.     containerEle.appendChild(gridEle);
  132.  
  133.     // 2. 内部元素追加新的样式
  134.     // 2.1 column
  135.     const columnEle = containerEle.querySelectorAll(columnSelector);
  136.     columnEle.forEach((element) => {
  137.       element.classList.add("hs-dashboard__column");
  138.     });
  139.  
  140.     // 2.2 title
  141.     const columnTitleEle = containerEle.querySelectorAll(columnTitleSelector);
  142.     columnTitleEle.forEach((element) => {
  143.       element.classList.add("hs-dashboard__title");
  144.     });
  145.  
  146.     // 2.3 menu list
  147.     const menuListEle = containerEle.querySelectorAll(menuListSelector);
  148.     menuListEle.forEach((element) => {
  149.       element.classList.add("hs-dashboard__list");
  150.     });
  151.  
  152.     // 2.4 menu item
  153.     const menuItemEle = containerEle.querySelectorAll(menuItemSelector);
  154.     menuItemEle.forEach((element) => {
  155.       element.classList.add("hs-dashboard__item");
  156.     });
  157.  
  158.     // 2.5 menu item action
  159.     if (menuItemActionSelector) {
  160.       const actionEle = containerEle.querySelector(menuItemActionSelector);
  161.       const menuItemTemp = getParents(actionEle, menuItemSelector);
  162.       menuItemTemp.classList.add("hs-active");
  163.     }
  164.  
  165.     if (compactColumnEnable) {
  166.       const { columns, layout } = compactColumn(containerEle, compactColumnLimit);
  167.  
  168.       const ul = document.createElement("ul");
  169.       ul.classList.add("hs-dashboard__grid");
  170.  
  171.       Array.isArray(layout) &&
  172.         layout.forEach((item) => {
  173.           const li = document.createElement("li");
  174.           li.classList.add("hs-dashboard__column");
  175.  
  176.           if (Array.isArray(item)) {
  177.             item.forEach((index) => {
  178.               const columnItem = columns[index];
  179.               const title = columnItem.querySelector(".hs-dashboard__title");
  180.               const list = columnItem.querySelector(".hs-dashboard__list");
  181.               title && li.appendChild(title);
  182.               list && li.appendChild(list);
  183.             });
  184.           } else {
  185.             const columnItem = columns[item];
  186.             const title = columnItem.querySelector(".hs-dashboard__title");
  187.             const list = columnItem.querySelector(".hs-dashboard__list");
  188.             title && li.appendChild(title);
  189.             list && li.appendChild(list);
  190.           }
  191.  
  192.           ul.appendChild(li);
  193.         });
  194.  
  195.       containerEle.removeChild(gridEle);
  196.       containerEle.appendChild(ul);
  197.     }
  198.  
  199.     // header,container → wrapper
  200.     wrapperEle.appendChild(headerEle);
  201.     wrapperEle.appendChild(containerEle);
  202.  
  203.     // wrapper → body
  204.     bodyContainer.appendChild(wrapperEle);
  205.   }
  206.  
  207.   function compactColumn(containerEle, limit) {
  208.     // 只能按列去查，有的列里面是没有 list 的
  209.     let columns = containerEle.querySelectorAll(".hs-dashboard__column");
  210.     let columnCount = []; // 相邻的数相加不超过指定值，就合并到一个新数组，将组成新的 column
  211.     let layout = []; // 计算出来的新的数据布局方式
  212.  
  213.     if (columns && columns.length) {
  214.       columns.forEach((element) => {
  215.         const listItem = element.querySelectorAll(".hs-dashboard__item");
  216.         columnCount.push(listItem.length);
  217.       });
  218.  
  219.       /**
  220.        * DESIGN NOTES
  221.        *
  222.        * 相邻的数相加
  223.        *
  224.        * 1. 将相邻的坐标存放在 arr
  225.        * 2. 计算 arr 中坐标的数据量是否超过指定值
  226.        * 3. 没超过，继续往 arr 推坐标
  227.        * 4. 原先没超过，新的一进来就超过了，说明原先的已经到了阈值，原先的可以合并了推到布局中，但新的要记录下来，参与下一轮计算
  228.        * 5. 下一个本身已经超过了阈值，看原先是否有参与计算的，然后各自推到布局中
  229.        */
  230.  
  231.       limit = limit || 12;
  232.  
  233.       let arr = []; // 待合并的对象
  234.       let acc = 0; // 累加判断是否临界
  235.       const length = columnCount.length; // 是否到最后
  236.  
  237.       columnCount.forEach((item, index) => {
  238.         // 1. 新的值临界
  239.         if (item > limit) {
  240.           // 原先的是一个待合并的集合，还是只是一个单独的值
  241.           if (arr.length > 1) {
  242.             layout.push(arr);
  243.           } else if (arr.length === 1) {
  244.             layout.push(arr[0]);
  245.           }
  246.  
  247.           layout.push(index);
  248.  
  249.           arr = [];
  250.           acc = 0;
  251.         } else {
  252.           // 计算总的数据量
  253.           acc += item;
  254.  
  255.           // 总数据量临界
  256.           if (acc > limit) {
  257.             if (arr.length) {
  258.               if (arr.length > 1) {
  259.                 layout.push(arr);
  260.               } else {
  261.                 layout.push(arr[0]);
  262.               }
  263.             }
  264.  
  265.             // 新的值参与下一次计算
  266.             arr = [index];
  267.             acc = item;
  268.           } else {
  269.             // 新的值没有临界
  270.             arr.push(index);
  271.           }
  272.         }
  273.  
  274.         if (index === length - 1 && arr.length) {
  275.           layout.push(arr);
  276.         }
  277.       });
  278.     }
  279.  
  280.     return { columns, layout };
  281.   }
  282.   // #endregion MENU
  283.  
  284.   // #region Event
  285.   /** 注册(不可用)事件 */
  286.   function handleEvent() {
  287.     if (!wrapperEle) {
  288.       wrapperEle = document.querySelector(".hs-dashboard__wrapper");
  289.     }
  290.  
  291.     if (!themeSwitchEle) {
  292.       themeSwitchEle = document.querySelector(".hs-theme-switch");
  293.     }
  294.  
  295.     if (!themeSwitchForm) {
  296.       themeSwitchForm = document.querySelector(".hs-theme-switch__form-control");
  297.     }
  298.  
  299.     bodyContainer.addEventListener("click", (event) => {
  300.       const targetEle = event.target;
  301.  
  302.       const itemEle = getParents(targetEle, ".hs-dashboard__item");
  303.  
  304.       const isItem = hasClass(targetEle, "hs-dashboard__item");
  305.  
  306.       const isItemWrapper = getParents(targetEle, ".hs-dashboard__column") && getParents(targetEle, ".hs-dashboard__list");
  307.  
  308.       const isToggle = getParents(targetEle, ".hs-dashboard__toggle-menu") || hasClass(targetEle, "hs-dashboard__toggle-menu");
  309.  
  310.       const isHelp = getParents(targetEle, ".hs-dashboard__toggle-help") || hasClass(targetEle, "hs-dashboard__toggle-help");
  311.  
  312.       const isTheme = getParents(targetEle, ".hs-theme-switch") || hasClass(targetEle, "hs-theme-switch");
  313.  
  314.       if (itemEle || isItem || isItemWrapper) {
  315.         window.setTimeout(() => {
  316.           clearStyle(wrapperEle);
  317.         }, 300);
  318.  
  319.         handleItemClick(itemEle, isItem, targetEle);
  320.       } else if (isToggle) {
  321.         wrapperEle.classList.toggle("hs-hide");
  322.         bodyContainer.classList.toggle("hs-body-overflow_hide");
  323.       } else if (isHelp) {
  324.         clearStyle(wrapperEle);
  325.         handleHelp();
  326.       } else if (isTheme) {
  327.         handleTheme();
  328.       }
  329.     });
  330.   }
  331.  
  332.   /** 导航点击 */
  333.   function handleItemClick(itemEle, isItem, targetEle) {
  334.     let itemTemp = null;
  335.  
  336.     if (itemEle) {
  337.       itemTemp = itemEle;
  338.     } else if (isItem) {
  339.       itemTemp = targetEle;
  340.     }
  341.  
  342.     if (itemTemp) {
  343.       const items = wrapperEle.querySelectorAll(".hs-dashboard__item");
  344.       items.forEach((element) => {
  345.         element.classList.remove("hs-active");
  346.         element.querySelector("a").classList.remove("active");
  347.       });
  348.       itemTemp.classList.add("hs-active");
  349.     }
  350.   }
  351.  
  352.   /** 退出预览 */
  353.   function clearStyle(wrapperEle) {
  354.     wrapperEle.classList.add("hs-hide");
  355.     bodyContainer.classList.remove("hs-body-overflow_hide");
  356.   }
  357.   // #endregion Event
  358.  
  359.   // #region HELP
  360.   /** 是否启用‘页面滚动至指定位置’ */
  361.   function initialHelp() {
  362.     if (!helpEnable) {
  363.       const ele = document.querySelector(".hs-dashboard__toggle-help");
  364.       ele.classList.add("hs-hide");
  365.     }
  366.   }
  367.  
  368.   /** 页面滚动至指定位置 */
  369.   function handleHelp() {
  370.     if (!helpSelector) {
  371.       return false;
  372.     }
  373.  
  374.     const helpEle = document.querySelector(helpSelector);
  375.     const top = helpEle.getBoundingClientRect().top + window.pageYOffset;
  376.  
  377.     window.scrollTo({
  378.       top,
  379.       behavior: "smooth",
  380.     });
  381.   }
  382.   // #endregion HELP
  383.  
  384.   // #region STYLE
  385.   /** 添加样式 */
  386.   function initialStyle(param) {
  387.     let tpl = initialStyleTpl();
  388.     const headEle = document.head || document.getElementsByTagName("head")[0];
  389.     const styleEle = document.createElement("style");
  390.  
  391.     let str = null;
  392.  
  393.     if (typeof param === "function") {
  394.       str = param();
  395.     } else if (typeof param === "string") {
  396.       str = param;
  397.     }
  398.  
  399.     if (typeof str === "string") {
  400.       tpl += str;
  401.     }
  402.  
  403.     styleEle.type = "text/css";
  404.  
  405.     if (styleEle.styleSheet) {
  406.       styleEle.styleSheet.cssText = tpl;
  407.     } else {
  408.       styleEle.appendChild(document.createTextNode(tpl));
  409.     }
  410.  
  411.     headEle.appendChild(styleEle);
  412.   }
  413.  
  414.   /** 样式表 */
  415.   function initialStyleTpl() {
  416.     return `
  417.  
  418.     :root {
  419.       --item-height: 36px;
  420.       --hs-font-size-base: 15px;
  421.       --hs-global-spacing: 1rem;
  422.       --hs-color-primary: #1890ff;
  423.       --hs-spacing-horizontal: var(--hs-global-spacing);
  424.  
  425.       --hs-color-white: #fff;
  426.       --hs-color-black: #000;
  427.       --hs-color-gray-0: var(--hs-color-white);
  428.       --hs-color-gray-100: #f5f6f7;
  429.       --hs-color-gray-200: #ebedf0;
  430.       --hs-color-gray-300: #dadde1;
  431.       --hs-color-gray-400: #ccd0d5;
  432.       --hs-color-gray-500: #bec3c9;
  433.       --hs-color-gray-600: #8d949e;
  434.       --hs-color-gray-700: #606770;
  435.       --hs-color-gray-800: #444950;
  436.       --hs-color-gray-900: #1c1e21;
  437.       --hs-color-gray-1000: var(--hs-color-black);
  438.       --hs-color-emphasis-0: var(--hs-color-gray-0);
  439.       --hs-color-emphasis-100: var(--hs-color-gray-100);
  440.       --hs-color-emphasis-200: var(--hs-color-gray-200);
  441.       --hs-color-emphasis-300: var(--hs-color-gray-300);
  442.       --hs-color-emphasis-400: var(--hs-color-gray-400);
  443.       --hs-color-emphasis-500: var(--hs-color-gray-500);
  444.       --hs-color-emphasis-600: var(--hs-color-gray-600);
  445.       --hs-color-emphasis-700: var(--hs-color-gray-700);
  446.       --hs-color-emphasis-800: var(--hs-color-gray-800);
  447.       --hs-color-emphasis-900: var(--hs-color-gray-900);
  448.       --hs-color-emphasis-1000: var(--hs-color-gray-1000);
  449.     }
  450.     .hs-hide {
  451.       display: none !important;
  452.     }
  453.  
  454.     .hs-body-overflow_hide {
  455.       height: 100% !important;
  456.       overflow: hidden !important;
  457.     }
  458.  
  459.     /* #region toggle */
  460.     .hs-dashboard__toggle {
  461.       position: fixed;
  462.       z-index: 99999;
  463.       top: 15px;
  464.       right: 5px;
  465.     }
  466.  
  467.     .hs-dashboard__toggle-item {
  468.       position: relative;
  469.       width: 28px;
  470.       height: 28px;
  471.       margin-top: 10px;
  472.       margin-bottom: 10px;
  473.       overflow: hidden;
  474.       line-height: 1 !important;
  475.       border-radius: 50%;
  476.       border: 1px solid #ccc;
  477.       text-align: center;
  478.       color: #555;
  479.       background-color: #fff;
  480.       cursor: pointer;
  481.       transition: all 0.2s;
  482.     }
  483.  
  484.     .hs-dashboard__toggle-item:hover {
  485.       border-color: #aaa;
  486.       color: #111;
  487.     }
  488.  
  489.     .hs-dashboard__toggle-icon svg{
  490.       position: absolute;
  491.       top: 50%;
  492.       left: 50%;
  493.       z-index: 9;
  494.       transform: translate(-50%, -50%);
  495.       font-style: normal !important;
  496.     }
  497.     /* #endregion toggle */
  498.  
  499.     /* #region wrapper */
  500.     .hs-dashboard__wrapper {
  501.       position: fixed;
  502.       top: 0;
  503.       right: 0;
  504.       bottom: 0;
  505.       left: 0;
  506.       z-index: 99998;
  507.       overflow-y: auto;
  508.       background-color: #fff;
  509.       font-size: var(--hs-font-size-base);
  510.     }
  511.  
  512.     .hs-dashboard__wrapper::-webkit-scrollbar {
  513.       width: 8px;
  514.       height: 6px;
  515.       background: rgba(0, 0, 0, 0.1);
  516.     }
  517.  
  518.     .hs-dashboard__wrapper::-webkit-scrollbar-thumb {
  519.       background: rgba(0, 0, 0, 0.3);
  520.     }
  521.  
  522.     .hs-dashboard__wrapper::-webkit-scrollbar-track {
  523.       background: rgba(0, 0, 0, 0.1);
  524.     }
  525.     /* #endregion wrapper */
  526.  
  527.     .hs-dashboard__header {
  528.       position: relative;
  529.       padding-top: 10px;
  530.       text-align: center;
  531.     }
  532.  
  533.     .hs-dashboard__header .hs-dashboard__title {
  534.       margin: 0;
  535.       padding-top: 10px;
  536.       padding-bottom: 10px;
  537.       font-size: 1em;
  538.       font-weight: normal;
  539.     }
  540.  
  541.     /* #region theme */
  542.     .hs-theme-switch {
  543.       display: flex;
  544.       touch-action: pan-x;
  545.       position: relative;
  546.       background-color: #fff;
  547.       border: 0;
  548.       margin: 0;
  549.       padding: 0;
  550.       user-select: none;
  551.       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  552.       -webkit-tap-highlight-color: transparent;
  553.       cursor: pointer;
  554.     }
  555.  
  556.     .hs-theme-switch {
  557.       width: 50px;
  558.       height: 24px;
  559.       padding: 0;
  560.       border-radius: 30px;
  561.       background-color: #4d4d4d;
  562.       transition: all 0.2s ease;
  563.     }
  564.  
  565.     .hs-dashboard__header .hs-theme-switch {
  566.       position: absolute;
  567.       top: 10px;
  568.       left: 10px;
  569.     }
  570.  
  571.     .hs-theme-switch__style {
  572.       position: relative;
  573.       width: 24px;
  574.       height: 24px;
  575.       line-height: 1;
  576.       font-size: 20px;
  577.       text-align: center;
  578.     }
  579.  
  580.     .hs-theme-switch__icon svg {
  581.       position: absolute;
  582.       top: 50%;
  583.       left: 50%;
  584.       transform: translate(-50%, -50%);
  585.     }
  586.  
  587.     .hs-theme-switch__thumb {
  588.       position: absolute;
  589.       top: 1px;
  590.       left: 1px;
  591.       width: 22px;
  592.       height: 22px;
  593.       border: 1px solid #ff7938;
  594.       border-radius: 50%;
  595.       background-color: #fafafa;
  596.       box-sizing: border-box;
  597.       transition: all 0.25s ease;
  598.     }
  599.  
  600.     .hs-theme-switch_checked .hs-theme-switch__thumb {
  601.       left: 27px;
  602.       border-color: #4d4d4d;
  603.     }
  604.  
  605.     .hs-toggle-screenreader-only {
  606.       border: 0;
  607.       clip: rect(0 0 0 0);
  608.       height: 1px;
  609.       margin: -1px;
  610.       overflow: hidden;
  611.       padding: 0;
  612.       position: absolute;
  613.       width: 1px;
  614.     }
  615.     /* #endregion theme */
  616.  
  617.     /* #region grid */
  618.     .hs-dashboard__grid {
  619.       display: flex;
  620.       justify-content: space-around;
  621.       margin: 0;
  622.       padding: 0 40px;
  623.       list-style: none;
  624.     }
  625.  
  626.     .hs-dashboard__column {
  627.       padding-right: 10px;
  628.       padding-left: 10px;
  629.     }
  630.  
  631.     .hs-dashboard__column a {
  632.       display: block;
  633.       padding-left: 20px !important;
  634.       padding-right: 40px !important;
  635.       text-decoration: none;
  636.     }
  637.  
  638.     .hs-dashboard__container ul:not(.hs-dashboard__grid) {
  639.       padding: 0;
  640.     }
  641.  
  642.     .hs-dashboard__container li {
  643.       padding-left: 0 !important;
  644.       list-style: none;
  645.     }
  646.  
  647.     .hs-dashboard__column .hs-dashboard__title {
  648.       display: block;
  649.       padding-left: var(--hs-spacing-horizontal) !important;
  650.       padding-right: calc(var(--hs-spacing-horizontal) * 2) !important;
  651.       text-align: left;
  652.       margin-top: 10px !important;
  653.     }
  654.  
  655.     .hs-dashboard__column .hs-dashboard__list {
  656.       margin-top: 10px !important;
  657.     }
  658.  
  659.     .hs-dashboard__column .hs-dashboard__list+.hs-dashboard__title {
  660.       margin-top: var(--hs-global-spacing);
  661.       padding-top: var(--hs-global-spacing);
  662.     }
  663.  
  664.     .hs-dashboard__column .hs-dashboard__list .hs-dashboard__item {
  665.       margin: 0 !important;
  666.       padding-left: 0 !important;
  667.       padding-right: 0 !important;
  668.       height: var(--item-height);
  669.       line-height: var(--item-height);
  670.     }
  671.     /* #endregion grid */
  672.  
  673.     /* #region custom */
  674.     #hs-dashboard.hs-dashboard__wrapper {
  675.       transition: all 0.2s ease;
  676.     }
  677.  
  678.     #hs-dashboard .hs-dashboard__column .hs-dashboard__title {
  679.       font-size: 14px;
  680.       line-height: 1.5715;
  681.       color: rgba(0, 0, 0, 0.45);
  682.     }
  683.  
  684.     #hs-dashboard a {
  685.       overflow: hidden;
  686.       white-space: nowrap;
  687.       font-size: 14px;
  688.       text-overflow: ellipsis;
  689.       text-decoration: none;
  690.       color: rgba(0, 0, 0, 0.85);
  691.       transition: color 0.3s ease;
  692.     }
  693.  
  694.     #hs-dashboard a:hover {
  695.       color: var(--hs-color-primary);
  696.       text-decoration: none;
  697.       outline: 0;
  698.     }
  699.  
  700.     /* light */
  701.     #hs-dashboard.hs-dashboard__wrapper_light {
  702.       color: #161616;
  703.       background-color: #fff;
  704.     }
  705.  
  706.     #hs-dashboard.hs-dashboard__wrapper_light .hs-dashboard__list+.hs-dashboard__title {
  707.       border-top: 1px solid var(--hs-color-gray-300);
  708.     }
  709.  
  710.     /* dark */
  711.     #hs-dashboard.hs-dashboard__wrapper_dark {
  712.       color: #fff;
  713.       background-color: #161616;
  714.     }
  715.  
  716.     #hs-dashboard.hs-dashboard__wrapper_dark .hs-dashboard__list+.hs-dashboard__title {
  717.       border-top: 1px solid var(--hs-color-gray-600);
  718.     }
  719.  
  720.     #hs-dashboard.hs-dashboard__wrapper_dark .hs-dashboard__title {
  721.       font-weight: bold;
  722.       color: #fff;
  723.     }
  724.  
  725.     #hs-dashboard.hs-dashboard__wrapper_dark a {
  726.       color: #fff;
  727.     }
  728.  
  729.     #hs-dashboard.hs-dashboard__wrapper_dark a:hover {
  730.       color: var(--hs-color-primary);
  731.     }
  732.  
  733.     #hs-dashboard .hs-dashboard__item.active,
  734.     #hs-dashboard .hs-dashboard__item.active a,
  735.     #hs-dashboard .hs-dashboard__item .active,
  736.     #hs-dashboard .hs-dashboard__item.hs-active,
  737.     #hs-dashboard .hs-dashboard__item.hs-active a {
  738.       color: var(--hs-color-primary);
  739.     }
  740.  
  741.     #hs-dashboard .hs-dashboard__item.hs-active {
  742.       background-color: #e6f7ff;
  743.     }
  744.  
  745.     #hs-dashboard .hs-dashboard__item {
  746.       position: relative;
  747.     }
  748.  
  749.     #hs-dashboard .hs-dashboard__item::after {
  750.       content: ' ';
  751.       position: absolute;
  752.       top: 0;
  753.       right: 0;
  754.       bottom: 0;
  755.       border-right: 3px solid var(--hs-color-primary);
  756.       transform: scaleY(0.0001);
  757.       transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
  758.         opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
  759.         -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
  760.       opacity: 0;
  761.     }
  762.  
  763.     #hs-dashboard .hs-dashboard__item.hs-active::after {
  764.       transform: scaleY(1);
  765.       opacity: 1;
  766.       transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
  767.         opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
  768.         -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
  769.     }
  770.     /* #endregion custom */
  771.  
  772.     `;
  773.   }
  774.   // #endregion STYLE
  775.  
  776.   // #region TOGGLE
  777.   /** 生成 Dashboard 开关 */
  778.   function initialToggle() {
  779.     const tpl = initialToggleTpl();
  780.     const ele = document.createElement("section");
  781.     // ele.className = 'hs-dashboard__toggle';
  782.     // ele.setAttribute("class", "hs-dashboard__toggle");
  783.     ele.classList.add("hs-dashboard__toggle");
  784.     ele.innerHTML = tpl;
  785.  
  786.     // toggle → body
  787.     bodyContainer.appendChild(ele);
  788.   }
  789.   /** Dashboard 开关 DOM */
  790.   function initialToggleTpl() {
  791.     return `
  792.         <!-- menu -->
  793.         <div class="hs-dashboard__toggle-item hs-dashboard__toggle-menu">
  794.           <i class="hs-dashboard__toggle-icon">
  795.             <svg
  796.               viewBox="64 64 896 896"
  797.               focusable="false"
  798.               data-icon="appstore"
  799.               width="1em"
  800.               height="1em"
  801.               fill="currentColor"
  802.               aria-hidden="true"
  803.             >
  804.               <path
  805.                 d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
  806.               ></path>
  807.             </svg>
  808.           </i>
  809.         </div>
  810.         <!-- api -->
  811.         <div class="hs-dashboard__toggle-item hs-dashboard__toggle-help">
  812.           <i class="hs-dashboard__toggle-icon">
  813.             <svg
  814.               viewBox="64 64 896 896"
  815.               focusable="false"
  816.               class=""
  817.               data-icon="bulb"
  818.               width="1em"
  819.               height="1em"
  820.               fill="currentColor"
  821.               aria-hidden="true"
  822.             >
  823.               <path
  824.                 d="M632 888H392c-4.4 0-8 3.6-8 8v32c0 17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32v-32c0-4.4-3.6-8-8-8zM512 64c-181.1 0-328 146.9-328 328 0 121.4 66 227.4 164 284.1V792c0 17.7 14.3 32 32 32h264c17.7 0 32-14.3 32-32V676.1c98-56.7 164-162.7 164-284.1 0-181.1-146.9-328-328-328zm127.9 549.8L604 634.6V752H420V634.6l-35.9-20.8C305.4 568.3 256 484.5 256 392c0-141.4 114.6-256 256-256s256 114.6 256 256c0 92.5-49.4 176.3-128.1 221.8z"
  825.               ></path>
  826.             </svg>
  827.           </i>
  828.         </div>
  829.           `;
  830.   }
  831.   // #endregion TOGGLE
  832.  
  833.   // #region THEME
  834.   function handleTheme(isInit) {
  835.     if (isInit) {
  836.       const theme = localStorage.getItem("hs_dashboard_theme");
  837.  
  838.       if (theme && theme === "dark") {
  839.         themeSwitchForm.checked = true;
  840.       } else {
  841.         themeSwitchForm.checked = false;
  842.       }
  843.     } else {
  844.       themeSwitchForm.click();
  845.     }
  846.  
  847.     const checked = themeSwitchForm.checked;
  848.  
  849.     if (checked) {
  850.       localStorage.setItem("hs_dashboard_theme", "dark");
  851.       wrapperEle.classList.add("hs-dashboard__wrapper_dark");
  852.       wrapperEle.classList.remove("hs-dashboard__wrapper_light");
  853.       themeSwitchEle.classList.add("hs-theme-switch_checked");
  854.     } else {
  855.       localStorage.setItem("hs_dashboard_theme", "light");
  856.       wrapperEle.classList.add("hs-dashboard__wrapper_light");
  857.       wrapperEle.classList.remove("hs-dashboard__wrapper_dark");
  858.       themeSwitchEle.classList.remove("hs-theme-switch_checked");
  859.     }
  860.   }
  861.  
  862.   function initialThemeTpl() {
  863.     return `
  864.       <input type="checkbox" class="hs-toggle-screenreader-only hs-theme-switch__form-control" title="Dark mode" />
  865.       <div class="hs-theme-switch__style hs-theme-switch__style_dark">
  866.         <i class="hs-theme-switch__icon">
  867.           <svg
  868.             t="1588325093630"
  869.             class="icon"
  870.             viewBox="0 0 1024 1024"
  871.             version="1.1"
  872.             xmlns="http://www.w3.org/2000/svg"
  873.             p-id="11008"
  874.             width="1em"
  875.             height="1em"
  876.           >
  877.             <path
  878.               d="M483.555556 964.266667c-164.977778 0-315.733333-85.333333-398.222223-224.711111 19.911111 2.844444 39.822222 2.844444 56.888889 2.844444 275.911111 0 500.622222-224.711111 500.622222-500.622222 0-68.266667-14.222222-133.688889-39.822222-193.422222 201.955556 54.044444 347.022222 238.933333 347.022222 449.422222 0 256-210.488889 466.488889-466.488888 466.488889z"
  879.               fill="#F7FF53"
  880.               p-id="11009"
  881.             ></path>
  882.             <path
  883.               d="M631.466667 73.955556c179.2 62.577778 301.511111 230.4 301.511111 423.822222 0 247.466667-201.955556 449.422222-449.422222 449.422222-147.911111 0-281.6-71.111111-364.088889-187.733333H142.222222c284.444444 0 517.688889-233.244444 517.688889-517.688889 0-56.888889-8.533333-113.777778-28.444444-167.822222M571.733333 22.755556C605.866667 88.177778 625.777778 162.133333 625.777778 241.777778c0 267.377778-216.177778 483.555556-483.555556 483.555555-31.288889 0-59.733333-2.844444-88.177778-8.533333 79.644444 156.444444 241.777778 264.533333 429.511112 264.533333 267.377778 0 483.555556-216.177778 483.555555-483.555555C967.111111 261.688889 796.444444 65.422222 571.733333 22.755556z"
  884.               fill="#303133"
  885.               p-id="11010"
  886.             ></path>
  887.             <path
  888.               d="M787.911111 455.111111c-5.688889-2.844444-8.533333-8.533333-5.688889-14.222222 5.688889-17.066667-2.844444-42.666667-19.911111-48.355556-17.066667-5.688889-39.822222 8.533333-45.511111 22.755556-2.844444 5.688889-8.533333 8.533333-14.222222 5.688889-5.688889-2.844444-8.533333-8.533333-5.688889-14.222222 8.533333-25.6 42.666667-45.511111 73.955555-34.133334 28.444444 11.377778 39.822222 48.355556 31.288889 73.955556-2.844444 5.688889-8.533333 8.533333-14.222222 8.533333"
  889.               fill="#303133"
  890.               p-id="11011"
  891.             ></path>
  892.             <path
  893.               d="M608.711111 620.088889c-14.222222 0-28.444444-2.844444-39.822222-11.377778-31.288889-22.755556-31.288889-65.422222-31.288889-68.266667 0-8.533333 8.533333-17.066667 17.066667-17.066666s17.066667 8.533333 17.066666 17.066666 2.844444 31.288889 17.066667 39.822223c11.377778 8.533333 25.6 8.533333 45.511111 0 8.533333-2.844444 19.911111 2.844444 22.755556 11.377777 2.844444 8.533333-2.844444 19.911111-11.377778 22.755556-14.222222 2.844444-25.6 5.688889-36.977778 5.688889zM571.733333 540.444444z"
  894.               fill="#FF2929"
  895.               p-id="11012"
  896.             ></path>
  897.             <path
  898.               d="M810.666667 588.8c-5.688889 19.911111-36.977778 28.444444-68.266667 19.911111-31.288889-8.533333-54.044444-34.133333-48.355556-54.044444 5.688889-19.911111 36.977778-28.444444 68.266667-19.911111 34.133333 11.377778 54.044444 34.133333 48.355556 54.044444"
  899.               fill="#FFA450"
  900.               p-id="11013"
  901.             ></path>
  902.             <path
  903.               d="M864.711111 270.222222c14.222222 42.666667 19.911111 91.022222 19.911111 136.533334 0 258.844444-213.333333 466.488889-477.866666 466.488888-96.711111 0-187.733333-28.444444-264.533334-76.8 82.488889 93.866667 204.8 156.444444 344.177778 156.444445C736.711111 952.888889 938.666667 756.622222 938.666667 512c0-88.177778-28.444444-173.511111-73.955556-241.777778z"
  904.               fill="#FF7938"
  905.               p-id="11014"
  906.             ></path>
  907.           </svg>
  908.         </i>
  909.       </div>
  910.       <div class="hs-theme-switch__style hs-theme-switch__style_light">
  911.         <i class="hs-theme-switch__icon">
  912.           <svg
  913.             t="1588324703446"
  914.             class="icon"
  915.             viewBox="0 0 1024 1024"
  916.             version="1.1"
  917.             xmlns="http://www.w3.org/2000/svg"
  918.             p-id="6232"
  919.             width="1em"
  920.             height="1em"
  921.           >
  922.             <path
  923.               d="M792.35 835.94l-128.09-30.32c-17.73-4.2-36.12 3.66-45.34 19.37l-66.64 113.52c-15.83 26.97-54.67 27.4-71.1 0.79l-69.14-112.02c-9.57-15.5-28.13-22.95-45.76-18.36l-127.39 33.15c-30.26 7.88-58.03-19.29-50.83-49.72l30.32-128.09c4.2-17.73-3.66-36.12-19.37-45.34L85.49 552.28c-26.97-15.83-27.4-54.67-0.79-71.1l112.02-69.14c15.5-9.57 22.95-28.13 18.36-45.76l-33.15-127.39c-7.88-30.26 19.29-58.03 49.72-50.83l128.09 30.32c17.73 4.2 36.12-3.66 45.34-19.37l66.64-113.52c15.83-26.97 54.67-27.4 71.1-0.79l69.14 112.02c9.57 15.5 28.13 22.95 45.76 18.36l127.39-33.15c30.26-7.88 58.03 19.29 50.83 49.72l-30.32 128.09c-4.2 17.73 3.66 36.12 19.37 45.34l113.52 66.64c26.97 15.83 27.4 54.67 0.79 71.1l-112.02 69.14c-15.5 9.57-22.95 28.13-18.36 45.76l33.15 127.39c7.88 30.26-19.29 58.03-49.72 50.83z"
  924.               fill="#FF7938"
  925.               p-id="6233"
  926.             ></path>
  927.             <path
  928.               d="M512 512m-207.66 0a207.66 207.66 0 1 0 415.32 0 207.66 207.66 0 1 0-415.32 0Z"
  929.               fill="#F7FF53"
  930.               p-id="6234"
  931.             ></path>
  932.             <path
  933.               d="M442.78 468.74m-25.96 0a25.96 25.96 0 1 0 51.92 0 25.96 25.96 0 1 0-51.92 0Z"
  934.               fill="#303133"
  935.               p-id="6235"
  936.             ></path>
  937.             <path
  938.               d="M581.22 468.74m-25.96 0a25.96 25.96 0 1 0 51.92 0 25.96 25.96 0 1 0-51.92 0Z"
  939.               fill="#303133"
  940.               p-id="6236"
  941.             ></path>
  942.             <path
  943.               d="M442.78 582.02s17.31 48.31 69.22 48.31 69.22-48.31 69.22-48.31H442.78z"
  944.               fill="#FF2929"
  945.               p-id="6237"
  946.             ></path>
  947.           </svg>
  948.         </i>
  949.       </div>
  950.       <div class="hs-theme-switch__thumb"></div>
  951.     `;
  952.   }
  953.   // #endregion THEME
  954.  
  955.   // #region COMMON
  956.   function hasClass(el, className) {
  957.     if (el.classList) {
  958.       return el.classList.contains(className);
  959.     } else {
  960.       return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
  961.     }
  962.   }
  963.  
  964.   function getParents(elem, selector) {
  965.     // Element.matches() polyfill
  966.     if (!Element.prototype.matches) {
  967.       Element.prototype.matches =
  968.         Element.prototype.matchesSelector ||
  969.         Element.prototype.mozMatchesSelector ||
  970.         Element.prototype.msMatchesSelector ||
  971.         Element.prototype.oMatchesSelector ||
  972.         Element.prototype.webkitMatchesSelector ||
  973.         function (s) {
  974.           var matches = (this.document || this.ownerDocument).querySelectorAll(s),
  975.             i = matches.length;
  976.           while (--i >= 0 && matches.item(i) !== this) {}
  977.           return i > -1;
  978.         };
  979.     }
  980.  
  981.     // Get the closest matching element
  982.     for (; elem && elem !== document; elem = elem.parentNode) {
  983.       if (elem.matches(selector)) return elem;
  984.     }
  985.     return null;
  986.   }
  987.  
  988.   function queryDirectChildren(parent, selector) {
  989.     const nodes = parent.querySelectorAll(selector);
  990.     const filteredNodes = [].slice.call(nodes).filter((item) => item.parentNode.closest(selector) === parent.closest(selector));
  991.     return filteredNodes;
  992.   }
  993.   // #endregion
  994. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址