☰

Swagger Compact UI

Swagger紧凑版UI

  1. // ==UserScript==
  2. // @name         Swagger Compact UI
  3. // @version      0.0.5
  4. // @description  Swagger紧凑版UI
  5. // @author       user
  6. // @match        *://*/swagger-ui/*
  7. // @namespace    cn.upall.greasyfork.swagger.ui
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     // 优化样式
  15.     let style = document.createElement('style')
  16.     style.innerText = `
  17.      body { background: #7e7e7e; }
  18.      .try-out, .execute-wrapper { display:none; }
  19.      .swagger-ui .wrapper { max-width:1000px; background: #fff; margin:15px auto; padding:15px; border-radius:5px; }
  20.      .swagger-ui .info {    margin: 0;}
  21.      .swagger-ui .scheme-container {     padding: 5px 0; }
  22.      .swagger-ui .opblock-tag { padding: 5px; margin: -1px 0 0; font-size: 12px;font-weight: normal; }
  23.      .swagger-ui .opblock-tag:hover,
  24.      .swagger-ui .opblock-tag:hover .markdown p { color:#C00; }
  25.      .swagger-ui .opblock-tag small { color:#000; }
  26.      .swagger-ui .opblock-tag .markdown p { margin: 0; }
  27.      .swagger-ui .opblock { margin:0 10px 5px; border:none; }
  28.      .swagger-ui .opblock-tag a { display:inline-block;min-width:20em;text-align:right; }
  29.      .opblock-tag-section.is-open .opblock-tag { border-top:solid 1px #C00; border-bottom-color:transparent; color:#C00; }
  30.      .opblock-tag-section.is-open .opblock-tag small { color:#C00; }
  31.      .swagger-ui .opblock { box-shadow: none; }
  32.      .swagger-ui .opblock:hover .opblock-summary { box-shadow: none; background: rgba(0,0,0,.08) !important; }
  33.      .swagger-ui .authorization__btn.unlocked { display: none; }
  34.      .swagger-ui .opblock.opblock-post { background: none; }
  35.      .swagger-ui .opblock.opblock-get { background: none; }
  36.      .swagger-ui .opblock.opblock-put { background: none; }
  37.      .swagger-ui .opblock.opblock-delete { background: none; }
  38.      .swagger-ui .opblock.opblock-patch { background: none; }
  39.      .swagger-ui .opblock .opblock-summary { display: block; }
  40.      .swagger-ui .opblock .opblock-summary-path { font-weight: normal; font-family: monaco; display:inline-block; font-size: 12px; }
  41.      .swagger-ui .opblock .opblock-summary-description { float: left; min-width: 18em; margin-right:1em; text-align: right; }
  42.      .swagger-ui .opblock .opblock-summary-method {     font-size: 12px;    font-weight: normal;    min-width: 50px;    padding: 0 3px;    line-height: 1;display: inline-block;}
  43.      .swagger-ui .opblock-description-wrapper, .swagger-ui .opblock-external-docs-wrapper, .swagger-ui .opblock-title_normal {    font-size: 12px;    margin: 0;    padding: 0 10px;}
  44.      .swagger-ui .markdown p, .swagger-ui .markdown pre, .swagger-ui .renderedMarkdown p, .swagger-ui .renderedMarkdown pre { margin: 3px 0; }
  45.      .swagger-ui .opblock .opblock-section-header {    display: flex;    align-items: center;    padding: 0px 20px;  background:none;  min-height: 0;    box-shadow: none;}
  46.      .swagger-ui .table-container {    padding: 0 20px;}
  47.      .swagger-ui .opblock .opblock-section-header h4 { color:#C00; cursor:pointer; }
  48.      .swagger-ui table { font-size:12px; }
  49.      .swagger-ui table tbody tr td:first-of-type { max-width:100%; padding:0; }
  50.      .swagger-ui .parameters-col_description { width:auto; color:#000; }
  51.      .swagger-ui .parameter__name,      .swagger-ui .parameter__type,     .swagger-ui .parameter__deprecated,     .swagger-ui .parameter__in , .swagger-ui .parameters-col_description .markdown, .swagger-ui .parameters-col_description .markdown p { margin:0;padding:0; display:inline-block;}
  52.      .swagger-ui .parameters-col_description input[type=text] { float:right; text-align:right; background: none; }
  53.      .swagger-ui .parameters-col_description input { margin:0;padding:0;border:none;cursor:default; }
  54.      .swagger-ui .parameter__name { float:right; font-size:inherit; padding-right:0.5em; }
  55.      .swagger-ui table tbody tr td { padding: 0; }
  56.      .swagger-ui .parameter__type, .swagger-ui .prop-format, .swagger-ui .parameter__in, .swagger-ui .parameters-col_description input { user-select: none; }
  57.      .swagger-ui table tbody tr:hover { background: #f0f0f0; }
  58.      .swagger-ui .opblock .opblock-section-header .opblock-title::after { content:''; display:inline-block; width:0.5em;height:0.5em;border-top:solid 1px #c00;border-right:solid 1px #c00;transform: rotate(45deg); margin-left: 0.1em;}
  59.      .swagger-ui .responses-inner { padding:0 20px; }
  60.      .swagger-ui .expand-methods svg, .swagger-ui .expand-operation svg { width:10px;height:10px;opacity: 0.3; }
  61.      .swagger-ui .opblock-tag { border-bottom: 1px solid rgb(59 65 81 / 11%); }
  62.      .swagger-ui .response .property-row .model .prop .markdown,.response .property-row .model .prop .markdown p { display:inline; }
  63.      .swagger-ui .response tr.property-row td:first-child { text-align:right; }
  64.      .swagger-ui .model-box { display:block; }
  65.      .swagger-ui .prop-type, .swagger-ui .prop-format { float: right; }
  66.      `
  67.     document.head.append(style)
  68.  
  69.     document.body.addEventListener('click', function(e) {
  70.         try {
  71.             var target = e.target;
  72.             var parent = target.parentNode.parentNode;
  73.             var className = parent.getAttribute('class');
  74.             console.log(className)
  75.             if (className == 'info') {
  76.                 // 展开所有
  77.                 document.querySelectorAll('.opblock-tag').forEach((item) => item.click());
  78.             }
  79.             // 点击复制接口地址
  80.             if (className == 'opblock-summary-path') {
  81.                 var text = parent.dataset.path;
  82.                 if (navigator.clipboard) {
  83.                     navigator.clipboard.writeText(text);
  84.                 } else {
  85.                     var textarea = document.createElement('textarea');
  86.                     document.body.appendChild(textarea);
  87.                     textarea.style.position = 'fixed';
  88.                     textarea.style.clip = 'rect(0 0 0 0)';
  89.                     textarea.style.top = '10px';
  90.                     textarea.value = text;
  91.                     textarea.select();
  92.                     document.execCommand('copy', true);
  93.                     document.body.removeChild(textarea);
  94.                 }
  95.             }
  96.             // 折叠请求参数
  97.             if (className == 'opblock-section-header'){
  98.                 var next = parent.nextSibling;
  99.                 if (next.getAttribute('class') == 'parameters-container') {
  100.                     if (next.offsetParent === null) {
  101.                         next.style.display = 'block';
  102.                     } else {
  103.                         next.style.display = 'none';
  104.                     }
  105.                 }
  106.             }
  107.         } catch (err) {
  108.             console.error('Failed to copy: ', err);
  109.         }
  110.     });
  111.  
  112.   })();