快速预览 Ant Design 组件菜单面板
目前為
// ==UserScript==
// @name Ant Design 组件菜单
// @namespace https://xianghongai.github.io/
// @version 0.0.3
// @description 快速预览 Ant Design 组件菜单面板
// @author Nicholas Hsiang / 山茶树和葡萄树
// @icon https://xinlu.ink/favicon.ico
// @match https://ant.design/*
// @grant none
// ==/UserScript==
(function() {
"use strict";
function init() {
const STYLE = ` .overflow-hide { height: 100%; overflow: hidden; } #component-menu-toggle, #component-api { position: fixed; z-index: 99999; top: 15px; right: 5px; cursor: pointer; width: 28px; height: 28px; overflow: hidden; line-height: 28px; border-radius: 50%; border: 1px solid #999; text-align: center; vertical-align: middle; background-color: #fff; } #component-api { top: 55px; } .hs-component-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99998; display: flex; justify-content: space-around; margin: 0; padding: 50px 0; overflow-y: auto; background-color: #fff; } /* #region scrollbar */ .hs-component-menu::-webkit-scrollbar { width: 8px; height: 6px; background: rgba(0, 0, 0, 0.1); } .hs-component-menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); } .hs-component-menu::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } /* #endregion */ .hs-component-menu li { list-style: none; } .hs-component-menu .ant-menu-item-group-title { padding-left: 0; } .hs-component-menu .ant-menu-item-group-list { margin: 0; padding: 0; line-height: 38px; } .hs-component-menu .ant-menu-item-group-list .ant-menu-item { padding-left: 0 !important; } .component-menu_hide { display: none !important; } `;
const TPL = `<!-- toggole --><div id="component-menu-toggle" title="快速预览组件"> <i aria-label="图标: appstore" class="anticon anticon-appstore"><svg viewBox="64 64 896 896" focusable="false" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path 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"></path></svg ></i> </div> <!-- api --> <div id="component-api"> <i aria-label="图标: bulb" class="anticon anticon-bulb" ><svg viewBox="64 64 896 896" focusable="false" class="" data-icon="bulb" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path 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"></path></svg ></i> </div> `;
const bodyEle = document.querySelector("body");
const wrapperEle = document.querySelector("#react-content");
// #region GET TPL
const PAGE_ELE = document.getElementById("Components$Menu"); //.cloneNode(true);
PAGE_ELE.setAttribute("id", "Components$Menu2");
PAGE_ELE.classList.add("hs-component-menu");
// #endregion
// #region COMMON
function hasClass(el, className) {
if (el.classList) {
return el.classList.contains(className);
} else {
return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
}
}
function getParents(elem, selector) {
// Element.matches() polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Get the closest matching element
for (; elem && elem !== document; elem = elem.parentNode) {
if (elem.matches(selector)) return elem;
}
return null;
}
// #endregion
// #region ADD STYLE
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
style.type = "text/css";
if (style.styleSheet) {
style.styleSheet.cssText = STYLE;
} else {
style.appendChild(document.createTextNode(STYLE));
}
head.appendChild(style);
// #endregion
// #region ADD TPL
const wrapper = document.createElement("section");
wrapper.setAttribute("id", "component-menu-wrapper");
wrapper.innerHTML = TPL;
wrapperEle.appendChild(wrapper);
wrapperEle.appendChild(PAGE_ELE);
// #endregion
// #region EVENT
const componentMenuToggleEle = document.getElementById("component-menu-toggle");
const componentApiEle = document.getElementById("component-api");
const componentMenuEle = document.querySelector(".hs-component-menu");
componentMenuEle.classList.add("component-menu_hide");
componentMenuToggleEle.addEventListener("click", event => {
componentMenuEle.classList.toggle("component-menu_hide");
bodyEle.classList.toggle("overflow-hide");
});
componentMenuEle.addEventListener("click", event => {
const targetEle = event.target;
if (getParents(targetEle, ".ant-menu-item") || hasClass(targetEle, "ant-menu-item")) {
componentMenuEle.classList.add("component-menu_hide");
bodyEle.classList.remove("overflow-hide");
}
});
componentApiEle.addEventListener("click", event => {
const targetEle = document.getElementById("API");
const top = targetEle.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({
top,
behavior: "smooth"
});
});
// #endregion
}
let interval = null;
function isLoaded(params) {
let wrapperEle = document.querySelector("#react-content");
if (wrapperEle) {
clearInterval(interval);
init();
}
}
interval = setInterval(isLoaded, 1000);
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址