如何修改Swagger-UI布局？求满足左右分栏多标签需求的定制分支项目

嘿，这个需求确实挺贴合实际使用场景的，我刚好了解几个能满足你要求的Swagger-UI定制分支和方案，给你梳理一下：

• 现成的定制分支项目：有开发者基于官方Swagger-UI做了专门的定制，实现了左侧固定侧边栏展示所有API标签与端点，点击左侧的任意端点后，右侧会自动新增（或切换到已有的）标签页，展示对应的API定义、请求参数、响应示例等操作内容。这类分支基本保留了官方Swagger-UI的核心功能，只是调整了布局结构和交互逻辑，你可以直接克隆仓库部署，或者把相关的UI组件代码整合到自己的项目中。

• 自行二次开发的思路：如果找不到完全匹配的现成分支，也可以基于官方Swagger-UI（基于React开发）自己动手改造，核心步骤大概是：

  • 将原有的侧边栏组件改成固定左侧布局，单独负责渲染所有API标签和端点列表；
  • 把右侧主内容区域替换成标签页容器组件，维护一个标签页状态列表；
  • 给左侧端点添加点击事件，触发时检查对应标签是否已存在，不存在则创建新标签，然后切换到该标签并渲染对应的API操作详情组件；
  • 可以用React的useState或useContext来管理标签页的状态和当前激活的标签。

另外，你可以通过搜索类似swagger-ui left sidebar tabs的关键词，找到更多相关的定制仓库，大部分都是开源许可，使用起来没有限制。

内容的提问来源于stack exchange，提问作者Lyons Huang