diff --git a/src/views/demo/api-doc.vue b/src/views/demo/api/apifox.vue
similarity index 100%
rename from src/views/demo/api-doc.vue
rename to src/views/demo/api/apifox.vue
diff --git a/src/views/demo/api/knife4j.vue b/src/views/demo/api/knife4j.vue
new file mode 100644
index 0000000..4929cc6
--- /dev/null
+++ b/src/views/demo/api/knife4j.vue
@@ -0,0 +1,27 @@
+<!-- 接口文档 -->
+<template>
+  <div class="app-container">
+    <iframe
+      src="http://vapi.youlai.tech/doc.html"
+      width="100%"
+      height="100%"
+      frameborder="0"
+    ></iframe>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** 关闭tag标签  */
+.app-container {
+  /* 50px = navbar = 50px */
+  height: calc(100vh - 50px);
+}
+
+/** 开启tag标签  */
+.hasTagsView {
+  .app-container {
+    /* 84px = navbar + tags-view = 50px + 34px */
+    height: calc(100vh - 84px);
+  }
+}
+</style>
diff --git a/src/views/demo/api/swagger.vue b/src/views/demo/api/swagger.vue
new file mode 100644
index 0000000..dd6dc9d
--- /dev/null
+++ b/src/views/demo/api/swagger.vue
@@ -0,0 +1,27 @@
+<!-- 接口文档 -->
+<template>
+  <div class="app-container">
+    <iframe
+      src="http://vapi.youlai.tech/swagger-ui.html"
+      width="100%"
+      height="100%"
+      frameborder="0"
+    ></iframe>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** 关闭tag标签  */
+.app-container {
+  /* 50px = navbar = 50px */
+  height: calc(100vh - 50px);
+}
+
+/** 开启tag标签  */
+.hasTagsView {
+  .app-container {
+    /* 84px = navbar + tags-view = 50px + 34px */
+    height: calc(100vh - 84px);
+  }
+}
+</style>