☰

Swagger Tool DAWN

内部使用swagger-ui增强脚本，方便复制url为函数

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

  1. // ==UserScript==
  2. // @name         Swagger Tool DAWN
  3. // @version      1.0.2
  4. // @description  内部使用swagger-ui增强脚本，方便复制url为函数
  5. // @author      lixiang
  6. // @match        http://*/swagger-ui.html*
  7. // @require     https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js
  8.  
  9. // @grant        GM_addStyle
  10. // @run-at       document-end
  11. // @license     MIT
  12. // @namespace https://greasyfork.org/users/559637
  13. // ==/UserScript==
  14. // https://developer.chrome.com/extensions/match_patterns
  15. (async function (open) {
  16.   function splitLast (str) {
  17.     const lastIndex = str.lastIndexOf('/')
  18.     return str.slice(lastIndex + 1)
  19.   }
  20.   function highlight () {
  21.     for (const codeblock of document.getElementsByTagName('code')) {
  22.       hljs.highlightBlock(codeblock)
  23.     }
  24.   }
  25.   function addOutCss (href) {
  26.     var head = document.querySelector('head')
  27.     var link = document.createElement('link')
  28.     link.href = href + ''
  29.     link.rel = 'stylesheet'
  30.     link.type = 'text/css'
  31.     head.appendChild(link)
  32.   }
  33.   function firstUpperCase (str) {
  34.     return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
  35.   }
  36.   function splitLastSecond (str) {
  37.     const arr = str.split('/')
  38.     return arr[arr.length - 2]
  39.   }
  40.   function toHump (str) {
  41.     if (!str) { return }
  42.     let newStr = ''
  43.     let big = false
  44.     for (const i in str) {
  45.       let s = str[i]
  46.       if (big) {
  47.         s = s.toLocaleUpperCase()
  48.         big = false
  49.       }
  50.       if (s === '_') { big = true } else newStr += s
  51.     }
  52.     return newStr
  53.   }
  54.   function getSelectValue () {
  55.     const selectUrl = document.querySelector('#selectUrl')
  56.     const index = selectUrl.selectedIndex // 序号，取当前选中选项的序号
  57.     const select = selectUrl.options[index].value
  58.     return select
  59.   }
  60.   function getUrlName (url) {
  61.     const type = getSelectValue()
  62.     let urlName = ''
  63.     if (type === 'first') {
  64.       urlName = toHump(splitLast(url))
  65.     } else if (type === 'second') {
  66.       const urlName2 = firstUpperCase(toHump(splitLast(url)))
  67.       const urlName1 = toHump(splitLastSecond(url))
  68.       urlName = urlName1 + urlName2
  69.     }
  70.     return urlName
  71.   }
  72.   function getPrefix () {
  73.     return document.querySelector('#urlPrefix').value ? '/' + document.querySelector('#urlPrefix').value : ''
  74.   }
  75.   function setClipboardDisplay (e) {
  76.     const text = e.text
  77.     document.querySelector('#cliDisplaySpan').textContent = text
  78.     highlight()
  79.     e.clearSelection()
  80.   }
  81.   function addSheet (params) {
  82.     GM_addStyle(
  83.       `
  84.       #cliDisplay .hljs {
  85.   display: block !important;
  86.   overflow-x: auto !important;
  87.   padding: 0.5em !important;
  88.   color: #abb2bf !important;
  89.   background: #282c34 !important;
  90. }
  91.  
  92. #cliDisplay .hljs-comment,
  93. #cliDisplay .hljs-quote {
  94.   color: #5c6370 !important;
  95.   font-style: italic !important;
  96. }
  97.  
  98. #cliDisplay .hljs-doctag,
  99. #cliDisplay .hljs-keyword,
  100. #cliDisplay .hljs-formula {
  101.   color: #c678dd !important;
  102. }
  103.  
  104. #cliDisplay .hljs-section,
  105. #cliDisplay .hljs-name,
  106. #cliDisplay .hljs-selector-tag,
  107. #cliDisplay .hljs-deletion,
  108. #cliDisplay .hljs-subst {
  109.   color: #e06c75 !important;
  110. }
  111.  
  112. #cliDisplay .hljs-literal {
  113.   color: #56b6c2 !important;
  114. }
  115.  
  116. #cliDisplay .hljs-string,
  117. #cliDisplay .hljs-regexp,
  118. #cliDisplay .hljs-addition,
  119. #cliDisplay .hljs-attribute,
  120. #cliDisplay .hljs-meta-string {
  121.   color: #98c379 !important;
  122. }
  123.  
  124. #cliDisplay .hljs-built_in,
  125. #cliDisplay .hljs-class .hljs-title {
  126.   color: #e6c07b !important;
  127. }
  128.  
  129. #cliDisplay .hljs-attr,
  130. #cliDisplay .hljs-variable,
  131. #cliDisplay .hljs-template-variable,
  132. #cliDisplay .hljs-type,
  133. #cliDisplay .hljs-selector-class,
  134. #cliDisplay .hljs-selector-attr,
  135. #cliDisplay .hljs-selector-pseudo,
  136. #cliDisplay .hljs-number {
  137.   color: #d19a66 !important;
  138. }
  139.  
  140. #cliDisplay .hljs-symbol,
  141. #cliDisplay .hljs-bullet,
  142. #cliDisplay .hljs-link,
  143. #cliDisplay .hljs-meta,
  144. #cliDisplay .hljs-selector-id,
  145. #cliDisplay .hljs-title {
  146.   color: #61aeee !important;
  147. }
  148.  
  149. #cliDisplay .hljs-emphasis {
  150.   font-style: italic !important;
  151. }
  152.  
  153. #cliDisplay .hljs-strong {
  154.   font-weight: bold !important;
  155. }
  156.  
  157. #cliDisplay .hljs-link {
  158.   text-decoration: underline !important;
  159. }
  160.  
  161.       `
  162.     )
  163.     GM_addStyle(
  164.       `
  165. ::-webkit-scrollbar {
  166.     width: 6px;
  167.     height: 6px;
  168. }
  169. ::-webkit-scrollbar-track {
  170.     border-radius: 3px;
  171.     background: #c678dd57;
  172.     -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
  173. }
  174. ::-webkit-scrollbar-thumb {
  175.     border-radius: 3px;
  176.     background: rgba(0,0,0,0.12);
  177.     -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  178. }
  179. .swagger-section #header {
  180.   position:relative;
  181. }
  182. .search_wrapper {
  183.  
  184. }
  185. .setting_card {
  186.        position: absolute;
  187.     background: #fff;
  188.     border: 1px solid rgba(0,0,0,0.2);
  189.     border-radius: 8px;
  190.     box-shadow: 0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15);
  191.     overflow-x: hidden;
  192.     padding-top: 0;
  193.     height: 120px;
  194.     width: 320px;
  195.     right: 10px;
  196.     top: 60px;
  197.     padding: 10px 10px;
  198.     visibility:hidden;
  199.     z-index:1
  200. }
  201. .setting_item {
  202.       padding: 5px 0;
  203.     margin-bottom: 5px;
  204.     border-bottom: 1px solid #f2f2f2;
  205. }
  206. .setting_icon {
  207.   position:absolute;
  208.   right:10px;
  209.   top:10px;
  210.    cursor: pointer;
  211. }
  212. .setting_icon:hover {
  213.    animation: myRotate 3s linear infinite;
  214. }
  215. @keyframes myRotate{
  216.     0%{ -webkit-transform: rotate(0deg);}
  217.     50%{ -webkit-transform: rotate(180deg);}
  218.     100%{ -webkit-transform: rotate(360deg);}
  219. }
  220.         .card {
  221.           position: relative;
  222.           background: #282c34 !important;
  223.  
  224.           margin: 1rem 0;
  225.           padding: 1em 1em;
  226.           border-radius: 0.2rem;
  227.           border:none !important;
  228.         max-height: 150px;
  229.     overflow: auto;
  230.         }
  231.         .card:hover {
  232.           box-shadow:2px 2px 9px 0px #1e3b50;
  233.         }
  234.         .header-label {
  235.           color:#666;
  236.               width: 120px;
  237.     display: inline-block;
  238.         }
  239.         select {
  240.           border: 1px solid #ccc;
  241.           padding: 7px 0px;
  242.           border-radius: 3px;
  243.           padding-left: 5px;
  244.           -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  245.           box-shadow: inset 0 1px 1px rgba(80, 69, 69, 0.075);
  246.           -webkit-transition: border-color ease-in-out 0.15s,
  247.             -webkit-box-shadow ease-in-out 0.15s;
  248.           -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  249.           transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  250.         }
  251.         option {
  252.           height: 30px;
  253.           padding: 5px 4px;
  254.         }
  255.         input {
  256.           border: 1px solid #ccc;
  257.           padding: 7px 0px;
  258.           border-radius: 3px;
  259.           padding-left: 5px;
  260.           -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  261.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  262.           -webkit-transition: border-color ease-in-out 0.15s,
  263.             -webkit-box-shadow ease-in-out 0.15s;
  264.           -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  265.           transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  266.         }
  267.         input:focus {
  268.           border-color: #66afe9;
  269.           outline: 0;
  270.           -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  271.             0 0 8px rgba(102, 175, 233, 0.6);
  272.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  273.             0 0 8px rgba(102, 175, 233, 0.6);
  274.         }
  275.         button {
  276.           display: inline-block;
  277.           position: relative;
  278.           cursor: pointer;
  279.           padding: 7px 4px;
  280.           color: white;
  281.           font-size: 0.7em;
  282.           text-align: center;
  283.           text-decoration: none;
  284.           text-transform: uppercase;
  285.           vertical-align: middle;
  286.           white-space: nowrap;
  287.           outline: none;
  288.           border: none;
  289.           -webkit-user-select: none;
  290.           -moz-user-select: none;
  291.           -ms-user-select: none;
  292.           user-select: none;
  293.           border-radius: 2px;
  294.           background-color: #89bf04;
  295.         }
  296.         button + button {
  297.           margin-left: 5px;
  298.         }
  299.         button:hover {
  300.           background-color: #aee032;
  301.           text-decoration: none;
  302.           box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.225);
  303.         }
  304.     `)
  305.   }
  306.   function readyAsync () {
  307.     return new Promise((resolve, reject) => {
  308.       XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
  309.         console.log('XMLHttpRequest.prototype.open -> url', url)
  310.         this.addEventListener('readystatechange', () => {
  311.         }, false)
  312.         let timer = null
  313.         let inited = false
  314.         let myUrl = null
  315.         if (url.includes('api-docs')) {
  316.           myUrl = url
  317.           timer = setInterval(() => {
  318.             if (inited) {
  319.               clearInterval(timer)
  320.               inited = false
  321.             } else {
  322.               const elementArr = document.querySelectorAll('.http_method')
  323.               if (elementArr.length !== 0) {
  324.                 if (myUrl.includes('api-docs')) {
  325.                   inited = true
  326.                   resolve(myUrl)
  327.                 }
  328.               }
  329.             }
  330.           }, 1000)
  331.         }
  332.         open.call(this, method, url, async, user, pass)
  333.       }
  334.     })
  335.   }
  336.   function readyAndWatch (func) {
  337.     XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
  338.       this.addEventListener('readystatechange', () => {
  339.       }, false)
  340.       let timer = null
  341.       let inited = false
  342.       let myUrl = null
  343.       if (url.includes('api-docs')) {
  344.         myUrl = url
  345.         timer = setInterval(() => {
  346.           if (inited) {
  347.             clearInterval(timer)
  348.             inited = false
  349.           } else {
  350.             const elementArr = document.querySelectorAll('.http_method')
  351.             if (elementArr.length !== 0) {
  352.               if (myUrl.includes('api-docs')) {
  353.                 console.log('timer -> myUrl', myUrl)
  354.                 inited = true
  355.                 func(myUrl)
  356.               }
  357.             }
  358.           }
  359.         }, 1000)
  360.       }
  361.       open.call(this, method, url, async, user, pass)
  362.     }
  363.   }
  364.   function getJsonAsync (url) {
  365.     return new Promise((resolve, reject) => {
  366.       const res = fetch(url)
  367.         .then(res => {
  368.           return res.json()
  369.         })
  370.         .catch(e => {
  371.           reject(e)
  372.         })
  373.       res.then(res => {
  374.         const totalRes = res
  375.         resolve(totalRes)
  376.       })
  377.     })
  378.   }
  379.  
  380.   function createExpand () {
  381.     document.querySelector('#message-bar').insertAdjacentHTML('afterbegin', `
  382.       <button id='collapse'>合起全部</button>
  383.       <button id='expandAll'>展开全部</button>
  384.     `)
  385.     document.querySelector('#collapse').onclick = collapse
  386.     document.querySelector('#expandAll').onclick = expandAll
  387.     function expandAll () {
  388.       const list = document.querySelector('#resources')
  389.       const items = list.children;
  390.       [...items].forEach(li => {
  391.         li.classList.add('active')
  392.         li.querySelector('ul.endpoints').style.display = 'block'
  393.       })
  394.     }
  395.     function collapse () {
  396.       const list = document.querySelector('#resources')
  397.       const items = list.children;
  398.       [...items].forEach(li => {
  399.         li.classList.remove('active')
  400.         li.querySelector('ul.endpoints').style.display = 'none'
  401.       })
  402.     }
  403.   }
  404.  
  405.   function createCliDisplay () {
  406.     document.querySelector('#message-bar').insertAdjacentHTML('afterbegin',
  407.         `
  408.           <pre class='card' id='cliDisplay'><code class='code javascript' id='cliDisplaySpan'>剪贴板展示</code></pre>   
  409.         `
  410.     )
  411.   }
  412.   function createCopyUrlAll (totalRes) {
  413.     const blockArr = document.querySelectorAll('#resources > .resource')
  414.  
  415.     blockArr.forEach(ele => {
  416.       const button = document.createElement('button')
  417.       button.innerHTML = '复制所有url'
  418.       button.classList.add('copy_url_all')
  419.  
  420.       ele.querySelector('.heading').children[0].prepend(button)
  421.  
  422.       const paths = new Set();
  423.  
  424.       [...ele.querySelector('.endpoints').children].forEach(li => {
  425.         const url = li.querySelector('.path').children[0].innerHTML
  426.         const method = li
  427.           .querySelector('.http_method')
  428.           .children[2].innerHTML.toUpperCase()
  429.         const note = li.querySelector('.markdown').children[0].innerHTML
  430.         const obj = {
  431.           url,
  432.           method,
  433.           note
  434.         }
  435.         const objStr = JSON.stringify(obj)
  436.         paths.add(objStr)
  437.       })
  438.       button.dataset.clipboardText = Array.from(paths).join(';')
  439.     })
  440.   }
  441.   function createCopyUrl () {
  442.     const elementArr = document.querySelectorAll('.endpoint')
  443.     elementArr.forEach(ele => {
  444.       const button = document.createElement('button')
  445.       button.innerHTML = '复制url'
  446.       button.classList.add('copy_url')
  447.       ele.querySelector('.http_method').prepend(button)
  448.       const url = ele.querySelector('.path').children[0].innerHTML
  449.       const method = ele.querySelector('.http_method').children[2].innerHTML.toUpperCase()
  450.       const note = ele.querySelector('.markdown').children[0].innerHTML
  451.       const obj = {
  452.         url,
  453.         method,
  454.         note
  455.       }
  456.       const objStr = JSON.stringify(obj)
  457.       button.dataset.clipboardText = objStr
  458.     })
  459.   }
  460.   function createCopyFunc (totalRes) {
  461.     const elementArr = document.querySelectorAll('.endpoint')
  462.     elementArr.forEach(ele => {
  463.       const button = document.createElement('button')
  464.       button.innerHTML = '复制为async函数'
  465.       button.classList.add('copy_func')
  466.       ele.querySelector('.http_method').prepend(button)
  467.       const url = ele.querySelector('.path').children[0].innerHTML
  468.  
  469.       const pathRes = totalRes.paths[url].get || totalRes.paths[url].post
  470.       const parameters = pathRes.parameters
  471.       if (!parameters) {
  472.         return
  473.       }
  474.       const parameterLast = parameters[parameters.length - 1]
  475.  
  476.       let ref
  477.       let comment
  478.       if (parameterLast.in === 'body') {
  479.         if (parameterLast.schema.$ref) {
  480.           ref = splitLast(parameterLast.schema.$ref)
  481.  
  482.           const definition = totalRes.definitions[ref]
  483.           if (definition) {
  484.             const properties = definition.properties
  485.  
  486.             const parameters = Object.keys(properties).map(key => {
  487.               const property = properties[key]
  488.               const obj = {}
  489.               obj.name = key
  490.               obj.description = property.description
  491.               obj.type = property.type
  492.  
  493.               return obj
  494.             })
  495.  
  496.             comment = parameters.reduce((acc, cur) => {
  497.               if (cur.name == 'token') {
  498.                 return acc
  499.               }
  500.               acc = `${acc}
  501.                     ${cur.name}:'',//${cur.description} ${cur.type}`
  502.               return acc
  503.             }, '')
  504.           }
  505.         }
  506.       } else {
  507.         comment = parameters.reduce((acc, cur) => {
  508.           if (cur.name == 'token') {
  509.             return acc
  510.           }
  511.           acc = `${acc}
  512.                 ${cur.name}:'', //${cur.description} ${cur.type}`
  513.           return acc
  514.         }, '')
  515.       }
  516.  
  517.       if (!comment) {
  518.         comment = '//无需参数'
  519.       }
  520.       const obj = {
  521.         url,
  522.         comment
  523.       }
  524.       button.dataset.clipboardText = JSON.stringify(obj)
  525.     })
  526.   }
  527.   function createButtonTable (ele) {
  528.     const elementArr = document.querySelectorAll('.endpoint')
  529.     elementArr.forEach(ele => {
  530.       const button = document.createElement('button')
  531.       button.innerHTML = '复制为列表项'
  532.       button.classList.add('copy_table')
  533.       if (ele.querySelector('.description')) {
  534.         ele.querySelector('.description').prepend(button)
  535.         const description = ele.querySelector('.description')
  536.         const div = description.querySelectorAll('div')
  537.         const list = [...div]
  538.         const table = list.reduce((acc, cur) => {
  539.           if (cur.querySelector('.propDesc')) {
  540.             const propName = cur.querySelector('.propName').innerHTML
  541.             const noPropNameList = ['code', 'data', 'message', 'list', 'pageNum', 'pageSize', 'total ']
  542.             if (noPropNameList.includes(propName)) {
  543.               return acc
  544.             }
  545.             const propDesc = cur.querySelector('.propDesc').querySelector('p').innerHTML
  546.             acc = `
  547.             ${acc}
  548.               {
  549.                 prop:"${propName}",
  550.                 label:"${propDesc}"
  551.               },
  552.               `
  553.             return acc
  554.           } else {
  555.             return acc
  556.           }
  557.         }, '')
  558.         button.dataset.clipboardText = table
  559.       }
  560.     })
  561.   }
  562.  
  563.   function clipboard () {
  564.     const clipboardUrl = new ClipboardJS('.copy_url', {
  565.       text: function (trigger) {
  566.         const objStr = trigger.dataset.clipboardText
  567.         const obj = JSON.parse(objStr)
  568.         const urlPrefix = getPrefix()
  569.         const urlName = getUrlName(obj.url)
  570.         const url = `export const ${urlName}  = data => request('${urlPrefix}${obj.url}', data,"${obj.method}")//${obj.note}`
  571.         return url
  572.       }
  573.     })
  574.  
  575.     const clipboardUrlAll = new ClipboardJS('.copy_url_all', {
  576.       text: function (trigger) {
  577.         const arr = trigger.dataset.clipboardText.split(';')
  578.         const paths = new Set()
  579.         arr.forEach(objStr => {
  580.           const obj = JSON.parse(objStr)
  581.           const urlPrefix = getPrefix()
  582.           const urlName = getUrlName(obj.url)
  583.           const url = `export const ${urlName}  = data => request('${urlPrefix}${obj.url}', data,"${obj.method}")//${obj.note}`
  584.           paths.add(url)
  585.         })
  586.         return Array.from(paths).join('\n')
  587.       }
  588.     })
  589.  
  590.     const clipboardFunc = new ClipboardJS('.copy_func', {
  591.       text: function (trigger) {
  592.         const objStr = trigger.dataset.clipboardText
  593.         const obj = JSON.parse(objStr)
  594.         const comment = obj.comment
  595.         const asyncName = getUrlName(obj.url)
  596.         const fun = `
  597.         async ${asyncName}Async() {
  598.           let params = {
  599.           ${comment}
  600.           }
  601.           let res = await api.${asyncName}(params)
  602.           },
  603.           `
  604.         return fun
  605.       }
  606.     })
  607.     const clipboardTable = new ClipboardJS('.copy_table', {
  608.       text: function (trigger) {
  609.         const table = trigger.dataset.clipboardText
  610.         return table
  611.       }
  612.     })
  613.  
  614.     clipboardUrl.on('success', setClipboardDisplay)
  615.     clipboardUrlAll.on('success', setClipboardDisplay)
  616.     clipboardFunc.on('success', setClipboardDisplay)
  617.     clipboardTable.on('success', setClipboardDisplay)
  618.   }
  619.   function createSelect () {
  620.     document.querySelector('.setting_card').insertAdjacentHTML('afterbegin',
  621.         `
  622.         <div class='setting_item'>
  623.            <label for="selectUrl" class='header-label'>url截取范围:</label>
  624.         <select name='selectUrl' id='selectUrl'>
  625.           <option value="first"  selected = "selected">最后一级</option>
  626.           <option value="second">最后二级</option>
  627.         </select>
  628.         </div>
  629.         `
  630.     )
  631.   }
  632.   function createInput () {
  633.     document.querySelector('.setting_card').insertAdjacentHTML('afterbegin',
  634.         `
  635.         <div class='setting_item'>
  636.            <label for="prefix" class='header-label'>url前缀:</label>
  637.           <input type="text" id="urlPrefix" name="prefix" placeholder='后端微服务名'>
  638.         </div>
  639.          
  640.         `
  641.     )
  642.   }
  643.   function createSetting () {
  644.     document.querySelector('#header').insertAdjacentHTML('beforeend',
  645.         `
  646.           <div class='setting_icon'>
  647.            <svg t="1589098334770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2404" width="35" height="35"><path d="M935.69113 523.130435c0-58.590609 36.797217-108.232348 88.30887-128a513.669565 513.669565 0 0 0-56.097391-135.635478 136.97113 136.97113 0 0 1-181.047652-181.092174A515.962435 515.962435 0 0 0 651.152696 22.26087 137.371826 137.371826 0 0 1 523.130435 110.569739 137.171478 137.171478 0 0 1 395.130435 22.26087a513.669565 513.669565 0 0 0-135.635478 56.141913 137.126957 137.126957 0 0 1-28.093218 152.932174 137.371826 137.371826 0 0 1-152.887652 28.16A510.21913 510.21913 0 0 0 22.26087 395.130435 137.371826 137.371826 0 0 1 110.569739 523.130435c0 58.590609-36.797217 108.232348-88.308869 128a513.669565 513.669565 0 0 0 56.141913 135.635478 136.97113 136.97113 0 0 1 180.980869 181.092174A515.650783 515.650783 0 0 0 395.130435 1024a137.371826 137.371826 0 0 1 128.022261-88.30887c58.590609 0 108.232348 36.797217 128 88.30887a513.669565 513.669565 0 0 0 135.635478-56.097391 137.126957 137.126957 0 0 1 28.093217-152.998957 137.371826 137.371826 0 0 1 152.887652-28.137739A510.21913 510.21913 0 0 0 1024 651.130435a137.171478 137.171478 0 0 1-88.30887-128.022261z m-401.719652 152.442435a141.55687 141.55687 0 1 1 0.111305-283.11374 141.55687 141.55687 0 0 1-0.111305 283.11374z" fill="#2DAA9D" p-id="2405"></path><path d="M754.042435 512c0-34.370783 21.593043-63.510261 51.801043-75.108174a301.345391 301.345391 0 0 0-32.901565-79.560348 80.361739 80.361739 0 0 1-106.22887-106.228869 302.703304 302.703304 0 0 0-79.604869-32.946087A80.584348 80.584348 0 0 1 512 269.957565 80.473043 80.473043 0 0 1 436.891826 218.156522c-27.959652 7.123478-54.761739 18.209391-79.560348 32.946087a80.450783 80.450783 0 0 1-16.473043 89.711304 80.584348 80.584348 0 0 1-89.711305 16.517565A299.341913 299.341913 0 0 0 218.156522 436.891826 80.584348 80.584348 0 0 1 269.957565 512c0 34.370783-21.593043 63.510261-51.801043 75.108174 7.123478 27.959652 18.209391 54.761739 32.946087 79.560348a80.361739 80.361739 0 0 1 106.184348 106.228869 302.525217 302.525217 0 0 0 79.604869 32.946087A80.584348 80.584348 0 0 1 512 754.042435c34.370783 0 63.510261 21.593043 75.108174 51.801043 27.959652-7.123478 54.761739-18.18713 79.560348-32.901565a80.450783 80.450783 0 0 1 16.473043-89.755826 80.584348 80.584348 0 0 1 89.711305-16.517565 299.341913 299.341913 0 0 0 32.990608-79.560348A80.473043 80.473043 0 0 1 754.042435 512z m-235.675826 89.421913a83.033043 83.033043 0 1 1 0.044521-166.066087 83.033043 83.033043 0 0 1-0.044521 166.066087z" fill="#A4E8E1" p-id="2406"></path></svg>
  648.           </div>
  649.           <div class='setting_card'>
  650.            
  651.           </div>
  652.         `
  653.     )
  654.     document.querySelector('.setting_icon').onclick = changeShow
  655.     let isShow = false
  656.     function changeShow () {
  657.       if (isShow) {
  658.         isShow = false
  659.         document.querySelector('.setting_card').style.visibility = 'hidden'
  660.       } else {
  661.         isShow = true
  662.         document.querySelector('.setting_card').style.visibility = 'visible'
  663.       }
  664.     }
  665.   }
  666.   function createSearch (params) {
  667.     document.querySelector('#header').insertAdjacentHTML('beforeend',
  668.         `
  669.           <div class='search_wrapper'>
  670.             <label for="search" class='header-label'>搜索：</label>
  671.           <input type="text" id="search" name="search" placeholder='输入汉字'>
  672.           </div>
  673.           
  674.         `
  675.     )
  676.   }
  677.   addSheet()
  678.   async function init (url) {
  679.     const totalRes = await getJsonAsync(url)
  680.     createExpand()
  681.     createSetting()
  682.     createSelect()
  683.     createInput()
  684.  
  685.     createCliDisplay()
  686.     createCopyFunc(totalRes)
  687.     createCopyUrl()
  688.     createCopyUrlAll()
  689.     createButtonTable()
  690.     clipboard()
  691.     highlight()
  692.   }
  693.   readyAndWatch(init)
  694. }
  695. )(XMLHttpRequest.prototype.open)