SwaggerUI на основе реализации vue3
Это всего лишь пробная версия, и стиль пользовательского интерфейса будет продолжать корректироваться. В настоящее время предоставляется только пакет исходного кода, который необходимо установить локально. В будущем он будет выпущен в центральный репозиторий maven, а исходный код пользовательский интерфейс также будет выпущен.
В настоящее время это только скин, но в будущем у него будет два пути: первый - чистый пользовательский интерфейс, а другой - сYDoc — генератор документации, поддерживающий Swagger и YApi.Интеграция для достижения более практичных функций.
Не перехватывать ресурсы: /doc.html /ресурсы/*
github
Билибили (Видео)
Предварительный просмотр (здесь я показываю только темный режим и дневной режим)
Другая версия, почти ок
1. Дом (Темный)
2. Боковая панель API
1. Родитель содержит количество внутренних API, и более интуитивно понятно использовать группировку типов запросов внутри.
2. Если заголовок слишком длинный, весь контент будет отображаться на курсоре мыши.
3. Сгруппированный http-метод добавляет градиенты и различает цвета, которые легче идентифицировать, чем серый.
4. Если родительский заголовок слишком длинный, он будет блокировать количество отображаемых компонентов.Первоначально я хотел поместить его слева, но это было слишком некрасиво, поэтому я отрендерил его во всплывающем компоненте.
3. Свернуть боковую панель
После закрытия боковой панели при наведении мыши по-прежнему будет всплывать группа API, щелкните, чтобы открыть вкладку.
4. Страница документации
Все поля редактирования json имеют функции форматирования и складывания для удобного копирования, увеличения и уменьшения масштаба для просмотра.
5. Возвращаемое значение
Тип выделен.Если имя поля содержит идентификатор, идентификатор будет выделен красным, и добавлена кнопка для быстрого копирования имени поля (экономия 0,8 секунды времени ручного копирования)
6. Пример возвращаемого значения
Автоматически расширяться до json второго уровня, а остальные нужно щелкать вручную, чтобы предотвратить слишком большое расширение и выглядеть усталым.Код остался на месте, а mock.js будет представлен позже.
7. Выполнить (Отладка)
8. Сохраните вариант использования запроса
1. Эта функция в основном предназначена для записи текущих параметров запроса (включая тело запроса), выбора метки состояния возврата и записи ее в локальный кеш, чтобы параметр можно было использовать автоматически в следующий раз.
2. Запишите рассматриваемый запрос напрямую.После того, как бэкенд сообщит вам, что он был исправлен, непосредственно выберите случай запроса, чтобы снова просмотреть результат.
3. Откройте ящик, чтобы сохранить этот вариант использования запроса.
9. Использование вариантов использования запроса
1. После того, как кнопка выбора варианта использования запроса будет включена, появится всплывающее окно выбора, а в раскрывающемся списке будет сохраненный вариант использования запроса, соответствующий API.
2. Выберите вариант использования, который вы только что сохранили, параметры перед выбором пусты.
3. После завершения выбора параметры будут автоматически перезаписаны, и появится сообщение о том, что у меня нет скриншотов.
10. Управление вариантами использования запроса
1. Нажмите на случай запроса на управление, и вы перейдете на страницу управления.Вы можете напрямую скопировать параметры param и body в формате json, а также это место для удаления случая запроса.
2. Чтобы избежать слишком большого количества вариантов использования, чтобы удалить их по одному, я также предоставляю [элегантный] Решение для быстрой очистки
3. Когда не запрашивается вариант использования