今天试了一下用RapiDoc替换项目中的SwaggerUI，发现它的现有接口中无法实现下拉式的接口切换，只能通过选择接口json文件的方式。翻看了一下它的接口文档，发现自己扩展一下还是比较简单的：
<!doctype html> <!-- Important: must specify --> <html> <head> <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters --> <!--<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>--> <script type="module" src="/js/rapidoc-min.js"></script> </head> <body> <rapi-doc id="rapidoc" spec-url="/swagger/v1/swagger.json" allow-server-selection="false" heading-text="12345" schema-style="table" show-header="false" show-info="false"> <header> <div class="root"> <div class="header">TianFang Open API</div> <select name="" id="apis" class="list"> <option class="opt" value="/swagger/v1/swagger.json">/swagger/v1/swagger.json</option> <option class="opt" value="/v3/api3-docs">/v3/api3-docs</option> </select> </div> </header> </rapi-doc> <script> const selector = document.getElementById(‘apis‘); selector.onchange = function (e) { const value = e.target.value; const docEl = document.getElementById(‘rapidoc‘); docEl.loadSpec(value); } </script> <style> .root { padding: 8px 4px 8px 4px; color: var(--header-fg); background-color: var(--header-bg); display: flex; align-items:center; flex-direction: row; } .header { font-size: 20px; padding: 0px 8px; } .list { background: var(--header-color-darker); color: var(--header-fg); padding:4px; width:500px; } </style> </body> </html>
简单来说，就是将RapiDoc的Head隐藏起来，自己注入了一个下拉框作为Head，下拉选项改变时，调用RapiDoc的接口切换接口。随手写的，没有美化，先凑活着用吧。说不定下个版本就有支持官方的切换接口的界面了。