feat: implement api docs using vue

package.json

@@ -18,6 +18,7 @@
     "safe-eval": "^0.4.1",
     "sass": "^1.26.10",
     "sass-loader": "^9.0.2",
+    "swagger-ui": "^3.37.2",
     "vee-validate": "^2.2.8",
     "vue": "^2.6.10",
     "vue-click-outside": "^1.1.0",

src/_pages/other/ApiDoc.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="swagger-ui"></div>
+</template>
+
+<style lang="scss">
+.opblock-post {
+  border-color: #fca130 !important;
+  background: rgba(#fca130, 0.1) !important;
+
+  .opblock-summary-method {
+    background: #fca130 !important;
+  }
+
+  .opblock-summary {
+    border-color: #fca130 !important;
+  }
+
+  .tab-header .tab-item.active h4 span:after {
+    background: #fca130 !important;
+  }
+}
+
+.opblock-put {
+  border-color: #49cc90 !important;
+  background: rgba(#49cc90, 0.1) !important;
+
+  .opblock-summary-method {
+    background: #49cc90 !important;
+  }
+
+  .opblock-summary {
+    border-color: #49cc90 !important;
+  }
+
+  .tab-header .tab-item.active h4 span:after {
+    background: #49cc90 !important;
+  }
+}
+</style>
+
+<script>
+import SwaggerUI from 'swagger-ui';
+import 'swagger-ui/dist/swagger-ui.css';
+
+export default {
+  mounted() {
+    SwaggerUI({
+      url: '/api/openapi.json',
+      dom_id: '#swagger-ui',
+      deepLinking: true,
+      apisSorter: 'alpha',
+      tagsSorter: 'alpha',
+    });
+  },
+};
+</script>

src/_router/index.js

@@ -91,6 +91,10 @@ export const router = new Router({
           component: () => import('~/_pages/main/Layout'),
           children: [
             { path: '', component: DashboardPage },
+            {
+              path: 'apiDoc',
+              component: () => import('~/_pages/other/ApiDoc'),
+            },
             {
               path: 'bubble',
               component: () => import('~/_pages/main/bubble/MyBubble'),
@@ -253,6 +257,7 @@ const publicPages = [
   '/activate',
   '/legal',
   '/support',
+  '/apiDoc',
 
   '/me/action',
 ];