diff --git a/src/dashboard-front/package.json b/src/dashboard-front/package.json
index 71a80028f..ad9a87a37 100644
--- a/src/dashboard-front/package.json
+++ b/src/dashboard-front/package.json
@@ -28,18 +28,20 @@
     "@blueking/platform-config": "^1.0.3",
     "@blueking/release-note": "0.0.1-beta.14",
     "@vueuse/core": "^11.0.3",
+    "@vueuse/integrations": "^11.0.3",
     "art-template": "^4.13.2",
     "bkui-vue": "1.0.3-beta.58",
+    "change-case": "^5",
     "connect-history-api-fallback": "^2.0.0",
     "cookie": "^0.5.0",
     "cookie-parser": "^1.4.5",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.2",
+    "dayjs": "^1.11.12",
     "echarts": "^4.6.0",
     "eslint": "~7.30.0",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "express-art-template": "^1.0.1",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.10.0",
     "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",
     "jsonpath-plus": "^9.0.0",
@@ -50,13 +52,13 @@
     "moment": "^2.29.4",
     "monaco-editor": "^0.44.0",
     "monaco-editor-webpack-plugin": "^7.0.0",
-    "pinia": "^2.0.23",
+    "pinia": "^2.2.2",
     "request": "^2.88.2",
-    "semver": "^7.6.0",
+    "semver": "^7.6.3",
     "transliteration": "^2.3.5",
-    "vue": "^3.4.27",
-    "vue-i18n": "^9.5.0",
-    "vue-router": "^4.1.6"
+    "vue": "^3.4.38",
+    "vue-i18n": "^9.14.0",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@blueking/babel-preset-bk": "2.1.0-beta.10",
@@ -67,29 +69,29 @@
     "@types/echarts": "^4.9.22",
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.9",
-    "@types/lodash": "^4.14.201",
+    "@types/lodash": "^4.17.7",
     "@types/markdown-it": "^13.0.7",
     "@types/node": "^20.6.3",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.20.0",
-    "enhanced-resolve": "^5.10.0",
+    "enhanced-resolve": "^5.17.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-vue": "^9.20.1",
+    "eslint-plugin-vue": "^9.27.0",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
-    "postcss": "~8.4.16",
+    "postcss": "^8.4.41",
     "postcss-import": "^15.0.0",
     "postcss-mixins": "^9.0.4",
-    "postcss-nested": "^6.0.0",
+    "postcss-nested": "^6.2.0",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-preset-env": "^7.8.2",
     "postcss-simple-vars": "^7.0.0",
     "postcss-url": "^10.1.3",
-    "sass": "^1.52.3",
+    "sass": "^1.77.8",
     "sass-loader": "^13.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "5.4.5",
-    "vue-eslint-parser": "^9.4.2"
+    "typescript": "^5.5.4",
+    "vue-eslint-parser": "^9.4.3"
   },
   "engines": {
     "node": ">= 14.16.1",
diff --git a/src/dashboard-front/src/app.vue b/src/dashboard-front/src/app.vue
index b05cd3958..c9f285cd7 100644
--- a/src/dashboard-front/src/app.vue
+++ b/src/dashboard-front/src/app.vue
@@ -184,39 +184,46 @@ const headerList = computed(() => ([
     link: '',
   },
   {
-    name: t('网关API文档'),
+    name: t('API 文档'),
     id: 3,
-    url: 'apigwDoc',
+    url: 'apiDocs',
     enabled: true,
     link: '',
   },
-  {
-    name: t('组件API文档'),
-    id: 4,
-    url: 'componentDoc',
-    enabled: user.featureFlags?.MENU_ITEM_ESB_API_DOC,
-    link: '',
-  },
-  {
-    name: t('网关API SDK'),
-    id: 5,
-    params: {
-      type: 'apigateway',
-    },
-    url: 'apigwSDK',
-    enabled: user.featureFlags?.ENABLE_SDK,
-    link: '',
-  },
-  {
-    name: t('组件API SDK'),
-    id: 6,
-    params: {
-      type: 'esb',
-    },
-    url: 'esbSDK',
-    enabled: user.featureFlags?.ENABLE_SDK,
-    link: '',
-  },
+  // {
+  //   name: t('网关API文档'),
+  //   id: 3,
+  //   url: 'apigwDoc',
+  //   enabled: true,
+  //   link: '',
+  // },
+  // {
+  //   name: t('组件API文档'),
+  //   id: 4,
+  //   url: 'componentDoc',
+  //   enabled: user.featureFlags?.MENU_ITEM_ESB_API_DOC,
+  //   link: '',
+  // },
+  // {
+  //   name: t('网关API SDK'),
+  //   id: 5,
+  //   params: {
+  //     type: 'apigateway',
+  //   },
+  //   url: 'apigwSDK',
+  //   enabled: user.featureFlags?.ENABLE_SDK,
+  //   link: '',
+  // },
+  // {
+  //   name: t('组件API SDK'),
+  //   id: 6,
+  //   params: {
+  //     type: 'esb',
+  //   },
+  //   url: 'esbSDK',
+  //   enabled: user.featureFlags?.ENABLE_SDK,
+  //   link: '',
+  // },
 ]));
 
 const systemCls = ref('mac');
@@ -339,7 +346,7 @@ const goPage = (routeName: string) => {
     router.push({
       name: routeName,
       params: {
-        id: ['home', 'apigwDoc'].includes(routeName) ? '' : apigwId.value,
+        id: ['home', 'apigwDoc', 'apiDocs'].includes(routeName) ? '' : apigwId.value,
       },
     });
   }
diff --git a/src/dashboard-front/src/css/common.css b/src/dashboard-front/src/css/common.css
index 7a3b62d29..113626bce 100644
--- a/src/dashboard-front/src/css/common.css
+++ b/src/dashboard-front/src/css/common.css
@@ -193,6 +193,9 @@
 .mb20 {
   margin-bottom: 20px !important;
 }
+.mb24 {
+  margin-bottom: 24px !important;
+}
 .mb25 {
   margin-bottom: 25px !important;
 }
@@ -214,6 +217,9 @@
 .ml0 {
   margin-left: 0px !important;
 }
+.ml4 {
+  margin-left: 4px !important;
+}
 .ml5 {
   margin-left: 5px !important;
 }
@@ -229,6 +235,9 @@
 .ml20 {
   margin-left: 20px !important;
 }
+.ml24 {
+  margin-left: 24px !important;
+}
 .ml25 {
   margin-left: 25px !important;
 }
@@ -268,6 +277,9 @@
 .mr20 {
   margin-right: 20px !important;
 }
+.mr24 {
+  margin-right: 24px !important;
+}
 .mr25 {
   margin-right: 25px !important;
 }
@@ -394,6 +406,9 @@
 .pl5 {
   padding-left: 5px !important;
 }
+.pl8 {
+  padding-left: 8px !important;
+}
 .pl10 {
   padding-left: 10px !important;
 }
@@ -427,6 +442,9 @@
 .pr5 {
   padding-right: 5px !important;
 }
+.pr8 {
+  padding-right: 8px !important;
+}
 .pr10 {
   padding-right: 10px !important;
 }
@@ -492,6 +510,10 @@
   width: 700px !important;
 }
 
+.fw-normal {
+  font-weight: normal;
+}
+
 .fw700{
   font-weight: 700;
 }
diff --git a/src/dashboard-front/src/hooks/use-max-table-limit.ts b/src/dashboard-front/src/hooks/use-max-table-limit.ts
new file mode 100644
index 000000000..7eb13ebb7
--- /dev/null
+++ b/src/dashboard-front/src/hooks/use-max-table-limit.ts
@@ -0,0 +1,15 @@
+/**
+ * @description 获取表格最大显示行数
+ * @param {Number} heightTaken 已被占用不能用来展示表格行的高度，单位 px
+ * @param {Number} lineHeight 单行表格高度，单位 px
+ * @returns {Number} 最大显示行数, 最小为 1
+ */
+import { useWindowSize } from '@vueuse/core';
+import { toValue } from 'vue';
+
+export default function useMaxTableLimit(heightTaken = 347, lineHeight = 42) {
+  const viewportHeight = toValue(useWindowSize().height);
+  const heightToUse = viewportHeight - heightTaken;
+  const limit = Math.floor(heightToUse / lineHeight);
+  return limit > 0 ? limit : 1;
+}
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index d53081e05..21e8ce52d 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -690,7 +690,9 @@ const lang: ILANG = {
   '发布状态': ['Release Status'],
   '查看资源': ['View'],
   '克隆': ['Clone'],
-  '删除资源后，需要生成新的版本，并发布到目标环境才能生效': ['After deletion, a new version needs to be generated and released to the target stage to take effect'],
+  // 以下行有重复，暂时注释掉
+  // '删除资源后，需要生成新的版本，并发布到目标环境才能生效':
+  // ['After deletion, a new version needs to be generated and released to the target stage to take effect'],
   '请选择导出的格式': ['Select export format'],
   '选择全部资源': ['Select all resources'],
   '已选择全部资源': ['Selected all resources'],
@@ -1140,6 +1142,14 @@ const lang: ILANG = {
   '网关API文档': ['Gateway API Doc'],
   '组件API SDK': ['Component API SDK'],
   '网关API SDK': ['Gateway API SDK'],
+  '组件 API 文档': ['Component API Doc'],
+  '网关 API 文档': ['Gateway API Doc'],
+  '没有对应文档': ['No Doc'],
+  '组件 API SDK': ['Component API SDK'],
+  '网关 API SDK': ['Gateway API SDK'],
+  '网关 API SDK: {name}': ['Gateway API SDK: {name}'],
+  '查看 SDK': ['Check SDK'],
+  '下载 SDK': ['Download SDK'],
   '上下结构无侧栏导航': ['Top-down Structure Without Sidebar Navigation'],
   '跳转到 PC 端': ['Switch to PC Version'],
   '跳转到移动端': ['Switch to Mobile Version'],
@@ -1163,6 +1173,7 @@ const lang: ILANG = {
   '返回首页': ['Back to home'],
   '默认': ['Default'],
   '应用访问该网关API时，是否需提供应用认证信息': ['Whether the app needs to provide app authentication when accessing the API'],
+  '应用访问该网关API时，是否需要提供用户认证信息': ['Whether the app needs to provide user authentication when accessing the API'],
   '应用访问该组件API时，是否需要提供用户认证信息': ['Whether the app needs to provide user authentication when accessing the API'],
   '是否需申请权限': ['Permission Required'],
   '应用访问该网关API前，是否需要在开发者中心申请该网关API权限': ['Whether the app needs to apply for API permission in the Developer Center before accessing the API'],
@@ -1179,6 +1190,8 @@ const lang: ILANG = {
   '查看': ['View'],
   '未生成-doc': ['No SDK'],
   '若资源版本对应的SDK未生成，可联系网关负责人生成SDK': ['If the SDK corresponding to the resource version is not generated, you can contact the gateway maintainers to generate the SDK'],
+  'SDK未生成，可联系负责人生成SDK': ['SDK not generated, contact maintainers to generate it'],
+  '{lang} SDK未生成，可联系负责人生成SDK': ['{lang} SDK not generated, contact maintainers to generate it'],
   '网关API资源版本对应的SDK': ['The SDK corresponding to the resource version'],
   '所有系统': ['All Systems'],
   'API 列表': ['APIs'],
@@ -1192,8 +1205,11 @@ const lang: ILANG = {
   '网关最新SDK，对应已生成SDK的最新资源版本': ['The latest SDK of the gateway, corresponding to the latest resource version of the generated SDK'],
   'SDK版本': ['Version'],
   'SDK地址': ['URL'],
-  '在{resourceLength}个资源中搜索...': ['Search in {resourceLength} resources'],
+  '在{resourceLength}个{type}中搜索...': ['Search in {resourceLength} {type}'],
   'SDK使用样例': ['SDK Usage Sample'],
+  'SDK 使用说明': ['SDK Usage'],
+  'SDK 包名称': ['SDK Package Name'],
+  'SDK 最新版本': ['SDK Latest Version'],
   '网关当前环境【{curStageText}】对应的资源版本未生成 SDK，可联系网关负责人生成 SDK': ['Gateway resource version corresponding to the stage [{curStageText}] does not generate SDK, you can contact the gateway maintainers to generate SDK'],
   'SDK及示例': ['SDK & Sample'],
   'SDK信息-doc': ['SDK'],
diff --git a/src/dashboard-front/src/router/index.ts b/src/dashboard-front/src/router/index.ts
index f8566e63b..45fe17283 100644
--- a/src/dashboard-front/src/router/index.ts
+++ b/src/dashboard-front/src/router/index.ts
@@ -8,6 +8,8 @@ import globalConfig from '@/constant/config';
 const { t } = i18n.global;
 
 const Home = () => import(/* webpackChunkName: "Home" */ '@/views/home.vue');
+const ApiDocs = () => import(/* webpackChunkName: "ApiDocs" */ '@/views/apiDocs/index.vue');
+const APIDocDetail = () => import(/* webpackChunkName: "ApiDocDetail" */ '@/views/apiDocs/doc-detail.vue');
 const ApigwDocs = () => import(/* webpackChunkName: "ApigwDocs" */ '@/views/apigwDocs/index.vue');
 const ApigwAPIDetail = () => import(/* webpackChunkName: "apigw-doc" */ '@/views/apigwDocs/components/detail.vue');
 const ApigwAPIDetailIntro = () => import(/* webpackChunkName: "apigw-doc" */ '@/views/apigwDocs/components/intro.vue');
@@ -319,6 +321,27 @@ const routes: RouteRecordRaw[] = [
     name: 'docsMain',
     component: docsComponent,
     children: [
+      {
+        path: 'apigw-api/:curTab?',
+        name: 'apiDocs',
+        component: ApiDocs,
+        meta: {
+          matchRoute: 'apiDocs',
+          topMenu: 'apiDocs',
+          notAppHeader: true,
+          isDocRouter: true,
+          isMenu: false,   // 是否作为侧边栏菜单
+        },
+      },
+      {
+        path: ':curTab/:targetName/:componentName?',
+        name: 'apiDocDetail',
+        component: APIDocDetail,
+        meta: {
+          matchRoute: 'apiDocDetail',
+          topMenu: 'apiDocs',
+        },
+      },
       {
         path: 'apigw-api',
         name: 'apigwDoc',
diff --git a/src/dashboard-front/src/views/apiDocs/components/component-searcher.vue b/src/dashboard-front/src/views/apiDocs/components/component-searcher.vue
new file mode 100644
index 000000000..285b7e0d9
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/component-searcher.vue
@@ -0,0 +1,345 @@
+<template>
+  <!--  组件搜索器  -->
+  <div class="searcher">
+    <bk-dropdown ref="dropdown" :popover-options="popoverOptions">
+      <div class="dropdown-trigger-btn">
+        <span>{{ curVersion.board_label }}</span>
+        <i class="ag-doc-icon doc-down-shape apigateway-icon icon-ag-down-shape"></i>
+      </div>
+      <template #content>
+        <bk-dropdown-menu class="dropdown-trigger-content bk-dropdown-list">
+          <bk-dropdown-item v-for="item in curVersionList" :key="item.board_label" :title="item.board_label">
+            <a href="javascript:;" @click="triggerHandler(item)" class="f14">{{ item.board_label }}</a>
+          </bk-dropdown-item>
+        </bk-dropdown-menu>
+      </template>
+    </bk-dropdown>
+    <div class="input-wrapper bk-dropdown-menu search-result-box">
+      <input
+        type="text" v-model="keyword" class="input" :placeholder="t('搜索内部版组件')" @input="handleSearch"
+        @keydown="handleKeyup">
+      <div class="bk-dropdown-content is-show left-align" v-if="keyword">
+        <bk-loading :loading="isLoading" :opacity="1">
+          <ul
+            ref="searchListContainer" id="result-list" class="bk-dropdown-list"
+            :style="{ 'max-height': `${contentMaxHeight}px` }">
+            <template v-if="resultList.length">
+              <li
+                v-for="(item, index) of resultList" :key="index" :class="selectIndex === index ? 'cur' : ''"
+                @click="handleShowDoc(item)">
+                <a href="javascript:;">
+                  <p class="name">
+                    <!-- eslint-disable-next-line vue/no-v-html -->
+                    <strong class="mr5" v-html="hightlightSystemName(item)"></strong>
+                    <!-- eslint-disable-next-line vue/no-v-html -->
+                    <span v-html="hightlight(item)"></span>
+                  </p>
+                  <p class="desc">{{ item.description || t('暂无描述') }}</p>
+                </a>
+              </li>
+            </template>
+            <template v-else>
+              <li>
+                <a href="javascript:;" class="search-empty">
+                  {{ t('没有找到相应记录') }}
+                </a>
+              </li>
+            </template>
+          </ul>
+        </bk-loading>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import {
+  searchAPI,
+} from '@/http';
+const { t } = useI18n();
+const router = useRouter();
+
+const props = defineProps({
+  versionList: {
+    type: Array,
+    default() {
+      return [{
+        board: '',
+        board_label: '',
+        categories: [],
+      }];
+    },
+  },
+});
+
+const curVersionList = ref([]);
+const resultList = ref([]);
+const keyword = ref<string>('');
+const contentMaxHeight = ref<number>(410);
+const selectIndex = ref<number>(0);
+const isLoading = ref<boolean>(false);
+const dropdown = ref(null);
+const searchListContainer = ref(null);
+const curVersion = ref<any>({
+  board: '',
+  board_label: '',
+  categories: [],
+});
+const popoverOptions = {
+  boundary: 'body',
+  placement: 'bottom-start',
+};
+
+watch(
+  () => props.versionList,
+  () => {
+    if (props.versionList.length) {
+      // eslint-disable-next-line prefer-destructuring
+      curVersion.value = props.versionList[0];
+      curVersionList.value = props.versionList;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const hightlight = (node: any) => {
+  if (keyword.value) {
+    return node.name.replace(new RegExp(`(${keyword.value})`), '<em class="keyword">$1</em>');
+  }
+  return node.name;
+};
+const hightlightSystemName = (node: any) => {
+  if (keyword.value) {
+    return node.system_name.replace(new RegExp(`(${keyword.value.toUpperCase()})`), '<em class="keyword">$1</em>');
+  }
+  return node.system_name;
+};
+
+const triggerHandler = (version: any) => {
+  curVersion.value = version;
+  dropdown.value?.hide?.();
+};
+// 跳转指定组件
+const handleShowDoc = (version: any) => {
+  router.push({
+    name: 'apiDocDetail',
+    params: {
+      curTab: 'component',
+      targetName: version.system_name,
+      componentName: version.name,
+    },
+  });
+};
+// 搜索
+const handleSearch = async () => {
+  try {
+    isLoading.value = true;
+    selectIndex.value = 0;
+    const curKeyword = keyword.value || '';
+    const curBoard = curVersion.value.board;
+    const res = await searchAPI(curBoard, '-', { keyword: curKeyword });
+    isLoading.value = false;
+    resultList.value = res;
+  } catch (error) {
+    console.log('error', error);
+  }
+};
+const handleKeyup = (e: any) => {
+  const curKeyCode = e.keyCode;
+  const curLength = resultList.value.length;
+  e.preventDefault();
+  switch (curKeyCode) {
+    // 上
+    case 38:
+      if (selectIndex.value === -1 || selectIndex.value === 0) {
+        selectIndex.value = curLength - 1;
+        searchListContainer.value.scrollTop = searchListContainer.value.scrollHeight;
+      } else {
+        selectIndex.value -= 1;
+        nextTick(() => {
+          const curSelectNode = searchListContainer.value.querySelector('li.cur');
+          const { offsetTop } = curSelectNode;
+          if (offsetTop < searchListContainer.value.scrollTop) {
+            searchListContainer.value.scrollTop -= 41;
+          }
+        });
+      }
+      break;
+    // 下
+    case 40:
+      if (selectIndex.value < curLength - 1) {
+        selectIndex.value += 1;
+        nextTick(() => {
+          const curSelectNode = searchListContainer.value.querySelector('li.cur');
+          const { offsetTop } = curSelectNode;
+          // searchListContainer 上下各有 6px 的 padding
+          if (offsetTop > contentMaxHeight.value - 2 * 6) {
+            // 每一个 item 是 41px height
+            searchListContainer.value.scrollTop += 41;
+          }
+        });
+      } else {
+        selectIndex.value = 0;
+        searchListContainer.value.scrollTop = 0;
+      }
+      break;
+    case 13:
+      if (resultList.value[selectIndex.value]) {
+        handleShowDoc(resultList.value[selectIndex.value]);
+      }
+      break;
+    default:
+      break;
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+
+.search-empty {
+  text-align: center;
+  line-height: 30px;
+}
+
+.bk-dropdown-content {
+  background: #fff;
+  padding: 4px 0;
+  width: 300px;
+  min-width: 300px;
+  top: 43px;
+  max-height: 550px;
+  overflow: auto;
+  border: 1px solid #dcdee5;
+
+  .bk-dropdown-list {
+    width: 100%;
+  }
+}
+
+.searcher {
+  position: relative;
+  width: 320px;
+  height: 30px;
+  display: flex;
+  background: #FFF;
+  border: 1px solid #C4C6CC;
+  border-radius: 2px;
+  z-index: 1;
+
+  .dropdown-trigger-btn {
+    height: 30px;
+    line-height: 28px;
+    padding-inline: 6px;
+    color: #63656E;
+    font-size: 12px;
+  }
+
+  .input-wrapper {
+    flex: 1;
+    width: 220px;
+    line-height: 28px;
+  }
+
+  .input {
+    color: #000;
+    outline: none;
+    border: none;
+    line-height: 12px;
+    font-size: 12px;
+    background: transparent;
+    padding-left: 20px;
+    border-left: 1px solid #c4c6cc;
+    position: relative;
+
+    &::placeholder {
+      color: #c4c6cc;
+    }
+  }
+}
+
+.dropdown-trigger-content {
+  :deep(.bk-dropdown-item) {
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+
+.bk-dropdown-content {
+  box-shadow: none !important;
+  -webkit-box-shadow: none !important;
+
+  .bk-dropdown-list {
+    a {
+      color: #63656e;
+
+      &:hover {
+        background-color: #eaf3ff;
+        color: #3a84ff
+      }
+    }
+  }
+}
+
+.search-empty{
+  text-align: center;
+  line-height: 30px !important;
+}
+
+.search-result-box {
+  :deep(.bk-dropdown-list) {
+    font-size: 12px;
+    width: 100%;
+
+    li {
+      width: 100%;
+      a {
+        height: auto;
+        line-height: 1;
+        padding: 6px 10px;
+        margin-bottom: 9px;
+        display: block;
+        white-space: nowrap;
+        color: #63656e;
+
+        &:hover {
+          background-color: #eaf3ff;
+          color: #3a84ff
+        }
+
+        .name {
+          margin-bottom: 5px;
+          color: #63656E;
+          display: block;
+
+          .keyword {
+            color: #3a84ff;
+            font-style: normal;
+          }
+        }
+
+        .desc {
+          color: #C4C6CC;
+          max-width: 290px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+      }
+    }
+  }
+
+
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/doc-detail-main-content.vue b/src/dashboard-front/src/views/apiDocs/components/doc-detail-main-content.vue
new file mode 100644
index 000000000..8509af190
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/doc-detail-main-content.vue
@@ -0,0 +1,493 @@
+<template>
+  <!--  文档详情主内容  -->
+  <div class="content-wrap">
+    <main v-if="api" class="target-detail custom-scroll-bar" ref="detailWrapRef">
+      <header class="detail-header">
+        <header class="res-name">{{ api.name ?? '--' }}</header>
+        <footer class="res-header-footer">
+          <main class="res-desc">{{ api.description ?? '--' }}</main>
+          <aside class="res-sdk">
+            <span class="f12" @click="handleSdkInstructionClick">
+              <i class="apigateway-icon icon-ag-document f14"></i>
+              {{ t('SDK 使用说明') }}
+            </span>
+          </aside>
+        </footer>
+      </header>
+      <main class="detail-main">
+        <article class="res-basics">
+          <section class="basic-cell">
+            <span>
+              <span class="label">{{ t('更新时间') }}</span>：
+              {{ updatedTime ?? '--' }}
+            </span>
+          </section>
+          <section class="basic-cell">
+            <span>
+              <span class="label" v-bk-tooltips="appVerifiedTooltips">
+                {{ t('应用认证') }}
+              </span>：
+              {{ api.verified_app_required ? t('是') : t('否') }}
+            </span>
+          </section>
+          <section class="basic-cell">
+            <span>
+              <span
+                class="label" v-bk-tooltips="resourcePermTooltips"
+              >
+                {{ t('权限申请') }}
+              </span>：
+              {{ (api.allow_apply_permission || api.component_permission_required) ? t('是') : t('否') }}
+            </span>
+          </section>
+          <section class="basic-cell">
+            <span>
+              <span class="label" v-bk-tooltips="userVerifiedTooltips">
+                {{ t('用户认证') }}
+              </span>：
+              {{ api.verified_user_required ? t('是') : t('否') }}
+            </span>
+          </section>
+        </article>
+        <!--  API markdown 文档  -->
+        <article v-if="markdownHtml" class="res-detail-content">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div class="ag-markdown-view" id="resMarkdown" v-html="markdownHtml"></div>
+        </article>
+      </main>
+    </main>
+    <!--  右侧导航栏  -->
+    <aside class="detail-nav-box">
+      <DocDetailSideNav :list="navList"></DocDetailSideNav>
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DocDetailSideNav from './doc-detail-side-nav.vue';
+import {
+  IComponent,
+  INavItem,
+  IResource,
+  TabType,
+} from '@/views/apiDocs/types';
+import {
+  computed,
+  inject,
+  nextTick,
+  ref,
+  Ref,
+  toRefs,
+  watch,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { copy } from '@/common/util';
+import { useScroll } from '@vueuse/core';
+
+const { t } = useI18n();
+
+interface IProps {
+  api: IResource & IComponent | null;
+  navList: INavItem[];
+  markdownHtml: string;
+  updatedTime: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  api: () => null,
+  navList: () => [],
+  markdownHtml: () => '',
+  updatedTime: () => null,
+});
+
+const {
+  api,
+  navList,
+  markdownHtml,
+  updatedTime,
+} = toRefs(props);
+
+// 注入当前的总 tab 变量
+const curTab = inject<Ref<TabType>>('curTab');
+
+const emit = defineEmits(['show-sdk-instruction']);
+
+const detailWrapRef = ref<HTMLElement | null>(null);
+const { y } = useScroll(detailWrapRef);
+
+const appVerifiedTooltips = computed(() => {
+  if (curTab.value === 'apigw') return t('应用访问该网关API时，是否需提供应用认证信息');
+  if (curTab.value === 'component') return t('应用访问该组件API时，是否需提供应用认证信息');
+  return '--';
+});
+
+const resourcePermTooltips = computed(() => {
+  if (curTab.value === 'apigw') return t('应用访问该网关API前，是否需要在开发者中心申请该网关API权限');
+  if (curTab.value === 'component') return t('应用访问该组件API前，是否需要在开发者中心申请该组件API权限');
+  return '--';
+});
+
+const userVerifiedTooltips = computed(() => {
+  if (curTab.value === 'apigw') return t('应用访问该网关API时，是否需要提供用户认证信息');
+  if (curTab.value === 'component') return t('应用访问该组件API时，是否需要提供用户认证信息');
+  return '--';
+});
+
+const initMarkdownHtml = (box: string) => {
+  nextTick(() => {
+    const markdownDom = document.getElementById(box);
+    // 复制代码
+    markdownDom?.querySelectorAll('a')?.forEach((item) => {
+      item.target = '_blank';
+    });
+    markdownDom?.querySelectorAll('pre')?.forEach((item) => {
+      const parentDiv = document.createElement('div');
+      const btn = document.createElement('button');
+      const codeBox = document.createElement('div');
+      const code = item?.querySelector('code')?.innerText;
+      parentDiv.className = 'pre-wrapper';
+      btn.className = 'ag-copy-btn';
+      codeBox.className = 'code-box';
+      btn.innerHTML = '<span title="复制"><i class="apigateway-icon icon-ag-copy-info"></i></span>';
+      btn.setAttribute('data-copy', code);
+      parentDiv?.appendChild(btn);
+      codeBox?.appendChild(item?.querySelector('code'));
+      item?.appendChild(codeBox);
+      item?.parentNode?.replaceChild(parentDiv, item);
+      parentDiv?.appendChild(item);
+    });
+
+    setTimeout(() => {
+      const copyDoms = Array.from(document.getElementsByClassName('ag-copy-btn'));
+
+      const handleCopy = function (this: any) {
+        copy(this.dataset?.copy);
+      };
+
+      copyDoms.forEach((dom: any) => {
+        dom.onclick = handleCopy;
+      });
+    }, 1000);
+  });
+};
+
+const handleSdkInstructionClick = () => {
+  emit('show-sdk-instruction');
+};
+
+watch(markdownHtml, () => {
+  initMarkdownHtml('resMarkdown');
+});
+
+// 切换 api 时滚动到顶部
+watch(api, () => {
+  if (y.value === 0) return;
+  nextTick(() => {
+    y.value = 0;
+  });
+});
+
+</script>
+
+<style scoped lang="scss">
+$primary-color: #3a84ff;
+$code-bc: #f5f7fa;
+$code-color: #63656e;
+
+.content-wrap {
+  display: flex;
+  align-items: flex-start;
+
+  .target-detail {
+    flex-grow: 1;
+    padding-right: 8px;
+    padding-left: 8px;
+    max-width: 1000px;
+    height: calc(100vh - 144px);
+    overflow-y: scroll;
+
+    .detail-header {
+      margin-bottom: 16px;
+
+      .res-name {
+        margin-bottom: 4px;
+        font-weight: 700;
+        font-size: 20px;
+        color: #313238;
+        line-height: 28px;
+      }
+
+      .res-header-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .res-desc {
+          font-size: 14px;
+          color: #979ba5;
+          letter-spacing: 0;
+          line-height: 22px;
+        }
+
+        .res-sdk {
+          color: #3a84ff;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .detail-main {
+      .res-basics,
+      .res-detail-content {
+        padding: 24px;
+        background-color: #fff;
+        box-shadow: 0 2px 4px 0 #1919290d;
+        border-radius: 2px;
+      }
+
+      .res-basics {
+        margin-bottom: 16px;
+        display: grid;
+        grid-template-columns: 280px 280px;
+        grid-template-rows: 40px 40px;
+
+        .basic-cell {
+          display: flex;
+          align-items: center;
+          line-height: 22px;
+          color: #313238;
+
+          .label {
+            font-size: 14px;
+            color: #63656e;
+            border-bottom: 1px dashed #979ba5;
+          }
+
+          &:first-of-type .label {
+            border: none;
+          }
+        }
+      }
+    }
+
+  }
+
+  .detail-nav-box {
+    padding-left: 12px;
+  }
+}
+
+.custom-scroll-bar {
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: lighten(#c4c6cc, 80%);
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: #c4c6cc;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: 5px;
+    border-radius: 2px;
+    background-color: #f5f7fb;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #f5f7fb;
+  }
+}
+
+:deep(.ag-markdown-view) {
+  font-size: 14px;
+  text-align: left;
+  color: $code-color;
+  line-height: 19px;
+  font-style: normal;
+
+  .pre-wrapper {
+    .ag-copy-btn {
+      right: 12px;
+      top: 12px;
+      background-color: $code-bc;
+      color: $primary-color;
+      z-index: 1;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding: 0;
+    margin: 25px 0 10px 0 !important;
+    font-weight: bold;
+    text-align: left;
+    color: #313238;
+    line-height: 22px;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 17px;
+  }
+
+  h3 {
+    font-size: 16px;
+
+    &:first-of-type {
+      margin-top: 0 !important;
+    }
+  }
+
+  h4 {
+    font-size: 13px;
+  }
+
+  h5 {
+    font-size: 12px;
+  }
+
+  h6 {
+    font-size: 12px;
+  }
+
+  p {
+    font-size: 14px;
+    color: $code-color;
+    line-height: 22px;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  ul {
+    padding-left: 17px;
+    line-height: 22px;
+
+    li {
+      list-style: disc;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  ol {
+    padding-left: 15px;
+    line-height: 22px;
+    margin: 14px 0;
+
+    li {
+      list-style: decimal;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  a {
+    color: #3a84ff;
+  }
+
+  tt {
+    margin: 0 2px;
+    padding: 0 5px;
+    white-space: nowrap;
+    border: 1px solid #eaeaea;
+    background-color: #f8f8f8;
+    border-radius: 3px;
+    font-size: 75%;
+  }
+
+  table {
+    font-size: 14px;
+    color: $code-color;
+    width: 100%;
+    text-align: left;
+    margin: 10px 0;
+    font-style: normal;
+    border: 1px solid #dcdee5;
+
+    &.field-list {
+      th {
+        width: 12%;
+      }
+    }
+
+    em {
+      font-style: normal;
+    }
+
+    th {
+      background: #f0f1f5;
+      font-size: 13px;
+      font-weight: bold;
+      color: $code-color;
+      border-bottom: 1px solid #dcdee5;
+      padding: 10px;
+      min-width: 70px;
+
+    }
+
+    th:nth-child(1) {
+      width: 20%;
+    }
+
+    td {
+      padding: 10px;
+      font-size: 13px;
+      color: $code-color;
+      border-bottom: 1px solid #dcdee5;
+      max-width: 250px;
+      font-style: normal;
+      word-break: break-all;
+    }
+  }
+
+  pre {
+    border-radius: 2px;
+    background: $code-bc;
+    padding: 10px;
+    font-size: 14px;
+    text-align: left;
+    color: $code-color;
+    line-height: 24px;
+    position: relative;
+    overflow: auto;
+    margin: 14px 0;
+
+    code {
+      font-family: "Lucida Console", "Courier New", "Monaco", monospace;
+      color: $code-color;
+    }
+
+    .hljs {
+      margin: -10px;
+    }
+  }
+}
+
+:deep(.code-box) {
+  // 代码块高亮字体颜色
+  .hljs-string {
+    color: #ff9c01;
+  }
+
+  .hljs-keyword {
+    color: #ea3636;
+  }
+
+  .hljs-comment {
+    color: #c4c6cc;
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/doc-detail-side-content.vue b/src/dashboard-front/src/views/apiDocs/components/doc-detail-side-content.vue
new file mode 100644
index 000000000..d1efb84d1
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/doc-detail-side-content.vue
@@ -0,0 +1,222 @@
+<template>
+  <!--  页面右侧的网关详情/组件详情  -->
+  <div v-if="basics" class="intro-side-content-wrap">
+    <header class="intro-header">
+      <article v-if="curTab === 'apigw'" class="title">{{ t('网关详情') }}</article>
+      <article v-else-if="curTab === 'component'" class="title">{{ t('组件详情') }}</article>
+      <aside>
+        <chat
+          v-if="userStore.featureFlags?.ALLOW_CREATE_APPCHAT"
+          :default-user-list="userList"
+          :owner="curUser.username"
+          :name="chatName"
+          :content="chatContent"
+          :is-query="true"
+        >
+        </chat>
+      </aside>
+    </header>
+    <main v-if="curTab === 'apigw'" class="component-content">
+      <div class="ag-markdown-view" id="markdown">
+        <article>
+          <header class="content-title">{{ t('网关描述') }}</header>
+          <main class="content-main">{{ basics.description }}</main>
+        </article>
+        <article>
+          <header class="content-title">{{ t('网关负责人') }}</header>
+          <main class="content-main">{{ basics.maintainers.join(', ') }}</main>
+        </article>
+        <article>
+          <header class="content-title">{{ t('网关访问地址') }}</header>
+          <main class="content-main">{{ basics.api_url }}</main>
+        </article>
+        <template v-if="userStore.featureFlags?.ENABLE_SDK">
+          <article>
+            <header class="content-title">{{ t('网关 SDK') }}</header>
+            <LangSelector :width="90" :margin-bottom="12" @select="handleLangSelect"></LangSelector>
+          </article>
+        </template>
+      </div>
+
+      <!--  网关SDK信息表格  -->
+      <template v-if="userStore.featureFlags?.ENABLE_SDK && curTab === 'apigw'">
+        <bk-table
+          :data="sdks"
+          show-overflow-tooltip
+          :border="['outer']"
+          :size="'small'"
+        >
+          <!-- <template #empty>
+          <table-empty
+            :abnormal="isAbnormal"
+            @reacquire="getApigwSDK('python')"
+          />
+        </template> -->
+
+          <bk-table-column :label="t('网关环境')" field="stage_name">
+            <template #default="{ row }: { row: IApiGatewaySdkDoc }">
+              {{ row.stage?.name || '--' }}
+            </template>
+          </bk-table-column>
+
+          <bk-table-column :label="t('网关API资源版本')" field="resource_version_display">
+            <template #default="{ row }: { row: IApiGatewaySdkDoc }">
+              {{ row.resource_version?.version || '--' }}
+            </template>
+          </bk-table-column>
+
+          <bk-table-column :label="t('SDK 版本号')" field="sdk_version_number">
+            <template #default="{ row }: { row: IApiGatewaySdkDoc }">
+              {{ row.sdk?.version || '--' }}
+            </template>
+          </bk-table-column>
+
+          <bk-table-column :label="t('SDK下载')">
+            <template #default="{ row }: { row: IApiGatewaySdkDoc }">
+              <template v-if="row.sdk?.url">
+                <bk-button theme="primary" text @click="handleDownload(row)"> {{ t('下载') }}</bk-button>
+              </template>
+              <template v-else>
+                {{ t('未生成-doc') }}
+              </template>
+            </template>
+          </bk-table-column>
+        </bk-table>
+
+        <p class="ag-tip mt5">
+          <info-line style="margin-right: 8px;" />
+          {{ t('若资源版本对应的SDK未生成，可联系网关负责人生成SDK') }}
+        </p>
+      </template>
+    </main>
+
+    <main v-else-if="curTab === 'component'" class="component-content">
+      <div class="ag-markdown-view">
+        <article>
+          <header class="content-title">{{ t('网关描述') }}</header>
+          <main class="content-main">{{ basics.comment }}</main>
+        </article>
+        <article>
+          <header class="content-title">{{ t('网关负责人') }}</header>
+          <main class="content-main">{{ basics.maintainers.join(', ') }}</main>
+        </article>
+        <article>
+          <header class="content-title">
+            {{ t('组件 API SDK') }}
+            <bk-tag class="ml20 fw-normal" theme="info">Python</bk-tag>
+          </header>
+          <main class="content-main">
+            <SdkDetail :sdk="sdks[0]"></SdkDetail>
+          </main>
+        </article>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  inject,
+  Ref,
+  toRefs,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import chat from '@/components/chat/index.vue';
+import SdkDetail from './sdk-detail.vue';
+import { InfoLine } from 'bkui-vue/lib/icon';
+import { useUser } from '@/store';
+import {
+  IApiGatewayBasics,
+  IApiGatewaySdkDoc,
+  IComponentSdk,
+  ISystemBasics,
+  LanguageType,
+  TabType,
+} from '@/views/apiDocs/types';
+import LangSelector from '@/views/apiDocs/components/lang-selector.vue';
+
+const { t } = useI18n();
+
+// 注入当前的总 tab 变量
+const curTab = inject<Ref<TabType>>('curTab');
+
+interface IProps {
+  basics: IApiGatewayBasics & ISystemBasics | null;
+  sdks: IApiGatewaySdkDoc[] & IComponentSdk[];
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  basics: () => null,
+  sdks: () => [],
+});
+
+const {
+  basics,
+  sdks,
+} = toRefs(props);
+
+const emit = defineEmits<{
+  'lang-change': [language: LanguageType]
+}>();
+
+const userStore = useUser();
+
+const curUser = computed(() => userStore?.user);
+const userList = computed(() => {
+  // 去重
+  const set = new Set([
+    curUser.value?.username,
+    ...basics.value?.maintainers,
+  ]);
+  return [...set];
+});
+const chatName = computed(() => `${t('[蓝鲸网关API咨询] 网关')}${basics.value?.name}`);
+const chatContent = computed(() => `${t('网关API文档')}:${location.href}`);
+
+const handleDownload = (row: IApiGatewaySdkDoc) => {
+  window.open(row.sdk?.url);
+};
+
+const handleLangSelect = (language: LanguageType) => {
+  emit('lang-change', language);
+};
+
+</script>
+
+<style lang="scss" scoped>
+.intro-side-content-wrap {
+  padding: 0 24px 12px 24px;
+
+  .intro-header {
+    margin-bottom: 12px;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .component-content {
+    width: auto;
+
+    .ag-markdown-view {
+      .content-title,
+      .content-main {
+        font-size: 14px;
+        color: #63656e;
+        letter-spacing: 0;
+        line-height: 22px;
+      }
+
+      .content-title {
+        margin-bottom: 12px;
+        font-weight: 700;
+      }
+
+      .content-main {
+        margin-bottom: 32px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/doc-detail-side-nav.vue b/src/dashboard-front/src/views/apiDocs/components/doc-detail-side-nav.vue
new file mode 100644
index 000000000..37d191ccb
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/doc-detail-side-nav.vue
@@ -0,0 +1,79 @@
+<template>
+  <!--  文档详情的内容导航栏  -->
+  <ul class="ag-component-nav">
+    <li v-for="nav of list" :key="nav.id">
+      <span
+        class="nav"
+        :class="{ active: curNav?.id === nav.id }"
+        @click="handleAnchor(nav)"
+      >
+        {{ nav.name }}
+      </span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import {
+  defineModel,
+  toRefs,
+  watch,
+} from 'vue';
+import { INavItem } from '@/views/apiDocs/types';
+
+const curNav = defineModel<INavItem | null>({
+  default: (): INavItem | null => null,
+});
+
+const props = defineProps({
+  list: {
+    type: Array<INavItem>,
+    default() {
+      return [];
+    },
+  },
+});
+
+const { list } = toRefs(props);
+
+const handleAnchor = (nav: INavItem) => {
+  const element = document.getElementById(nav.name);
+  if (element) {
+    curNav.value = nav;
+    element.scrollIntoView({
+      behavior: 'smooth', // 平滑滚动
+      block: 'start', // 元素顶部与视口顶部对齐
+    });
+  }
+};
+
+watch(() => props.list, () => {
+  curNav.value = null;
+}, { deep: true });
+
+</script>
+
+<style lang="scss" scoped>
+.ag-component-nav {
+  width: 160px;
+  font-size: 12px;
+  text-align: left;
+  color: #979ba5;
+  line-height: 28px;
+  border-left: 1px solid #dcdee5;
+
+  .nav {
+    padding-left: 16px;
+    display: block;
+    text-decoration: none;
+    color: #63656e;
+    cursor: pointer;
+
+    &.active {
+      color: #3a84ff;
+      border-left: 1px solid #3a84ff;
+      margin-left: -1px;
+    }
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/lang-selector.vue b/src/dashboard-front/src/views/apiDocs/components/lang-selector.vue
new file mode 100644
index 000000000..b954ebfd0
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/lang-selector.vue
@@ -0,0 +1,76 @@
+<template>
+  <!--  sdk语言选择器  -->
+  <div class="lang-selector-wrap bk-button-group">
+    <bk-button
+      v-for="lang in langList"
+      :key="lang"
+      :class="{ 'is-selected': lang === language }"
+      :disabled="!isSdkGenerated(lang)"
+      :style="{
+        width: `${width}px`,
+        'margin-bottom': `${marginBottom}px`,
+      }"
+      v-bk-tooltips="{ content: t(`{lang} SDK未生成，可联系负责人生成SDK`, { lang }), disabled: isSdkGenerated(lang) }"
+      @click="handleSelect(lang)"
+    >
+      {{ useChangeCase(lang, 'capitalCase') }}
+    </bk-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  toRefs,
+} from 'vue';
+import { useChangeCase } from '@vueuse/integrations/useChangeCase';
+import { LanguageType } from '@/views/apiDocs/types';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const language = defineModel<LanguageType>({
+  default: 'python',
+});
+
+interface IProps {
+  width: number;
+  marginBottom: number;
+  sdkLanguages: LanguageType[],
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  width: 150,  // 按钮宽度
+  marginBottom: 24,
+  sdkLanguages: () => [
+    'python',
+    'java',
+  ],
+});
+
+const { width, marginBottom, sdkLanguages } = toRefs(props);
+
+const langList = ref<LanguageType[]>([
+  'python',
+  'java',
+]);
+
+const emit = defineEmits<{
+  'select': [language: LanguageType]
+}>();
+
+// 检查是否已生成该语言的sdk
+const isSdkGenerated = (lang: LanguageType) => {
+  return sdkLanguages.value.includes(lang);
+};
+
+const handleSelect = (lang: LanguageType) => {
+  language.value = lang;
+  emit('select', language.value);
+};
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/sdk-detail-dialog.vue b/src/dashboard-front/src/views/apiDocs/components/sdk-detail-dialog.vue
new file mode 100644
index 000000000..c8e3d760b
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/sdk-detail-dialog.vue
@@ -0,0 +1,108 @@
+<template>
+  <!--  网关 SDK 详情弹窗  -->
+  <bk-dialog
+    v-model:is-show="isShow"
+    :title="title"
+    class="custom-main-dialog"
+    width="640"
+    mask-close
+  >
+    <main class="dialog-content">
+      <div class="dialog-main">
+        <LangSelector v-model="language" :sdk-languages="sdks.map(item => item.language)"></LangSelector>
+        <SdkDetail :sdk="curSdk" is-apigw></SdkDetail>
+      </div>
+    </main>
+  </bk-dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  defineModel,
+  ref,
+  toRefs,
+} from 'vue';
+import LangSelector from '@/views/apiDocs/components/lang-selector.vue';
+import {
+  ISdk,
+  LanguageType,
+} from '@/views/apiDocs/types';
+import SdkDetail from '@/views/apiDocs/components/sdk-detail.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const isShow = defineModel<boolean>({
+  required: true,
+  default: false,
+});
+
+interface IProps {
+  sdks: ISdk[];
+  apigwName: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  sdks: () => [],
+  apigwName: '',
+});
+
+const { sdks, apigwName } = toRefs(props);
+
+const language = ref<LanguageType>('python');
+
+const curSdk = computed(() => {
+  return sdks.value.find(item => item.language === language.value) ?? null;
+});
+
+const title = computed(() => {
+  return apigwName.value ? t('网关 API SDK: {name}', { name: apigwName.value }) : t('网关 API SDK');
+});
+
+</script>
+
+<style scoped lang="scss">
+.custom-main-dialog {
+  :deep(.bk-dialog-title) {
+    line-height: 28px;
+  }
+
+  :deep(.bk-dialog-content) {
+    margin-top: 20px;
+    padding-right: 8px;
+  }
+
+  :deep(.bk-modal-footer) {
+    display: none;
+  }
+
+  .dialog-content {
+
+    .dialog-main {
+
+      .data-box {
+        padding: 24px 12px;
+        background: #f5f7fa;
+
+        .row-item {
+          display: flex;
+          line-height: 40px;
+
+          .key {
+            width: 100px;
+            text-align: right;
+            padding-right: 10px;
+          }
+
+          .value {
+            flex: 1;
+            white-space: nowrap;
+            color: #313238;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/sdk-detail.vue b/src/dashboard-front/src/views/apiDocs/components/sdk-detail.vue
new file mode 100644
index 000000000..2d66582f5
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/sdk-detail.vue
@@ -0,0 +1,197 @@
+<template>
+  <!--  sdk内容展示  -->
+  <div v-if="sdk" class="data-box wrapper">
+    <div class="row-item mb10">
+      <div class="key">
+        <span class="column-key"> {{ t('SDK包名称') }}: </span>
+      </div>
+      <div class="value">
+        <span class="column-value" v-bk-overflow-tips>{{ sdk.name || sdk.sdk_name || '--' }}</span>
+      </div>
+    </div>
+    <div class="row-item mb10">
+      <div class="key">
+        <span class="column-key"> {{ t('SDK版本') }}: </span>
+      </div>
+      <div class="value">
+        <span class="column-value" v-bk-overflow-tips>{{ sdk.version || sdk.sdk_version_number || '--' }}</span>
+      </div>
+    </div>
+
+    <div class="row-item mb10">
+      <div class="key">
+        <span class="column-key"> {{ t('SDK地址') }}: </span>
+      </div>
+      <div class="value">
+        <bk-popover placement="top" width="600" :disabled="!sdk.url && !sdk.sdk_download_url">
+          <main class="column-value vm">{{ sdk.url || sdk.sdk_download_url || '--'}}</main>
+          <template #content>
+            <div style="white-space: normal;word-break: break-all;">
+              {{ sdk.url || sdk.sdk_download_url }}
+            </div>
+          </template>
+        </bk-popover>
+      </div>
+      <aside class="suffix">
+        <i
+          class="doc-copy vm icon-hover apigateway-icon icon-ag-copy ag-doc-icon"
+          v-if="sdk.url || sdk.sdk_download_url"
+          v-bk-tooltips="t('复制')"
+          @click="copy(sdk.url || sdk.sdk_download_url)"
+        >
+        </i>
+        <i
+          class="ag-doc-icon doc-download-line vm icon-hover apigateway-icon icon-ag-download-line"
+          v-if="sdk.url || sdk.sdk_download_url"
+          v-bk-tooltips="t('下载')"
+          @click="handleDownload">
+        </i>
+      </aside>
+    </div>
+
+    <div class="row-item mb10">
+      <div class="key">
+        <span class="column-key"> {{ t('安装') }}: </span>
+      </div>
+      <div class="value">
+        <bk-popover placement="top" width="600" v-if="sdk.install_command || sdk.sdk_install_command">
+          <main class="column-value vm">{{sdk.install_command || sdk.sdk_install_command}}</main>
+          <template #content>
+            <div style="white-space: normal;word-break: break-all;">
+              {{ sdk.install_command || sdk.sdk_install_command }}
+            </div>
+          </template>
+        </bk-popover>
+        <span v-else>--</span>
+      </div>
+      <aside class="suffix">
+        <i
+          class="ag-doc-icon doc-copy vm icon-hover apigateway-icon icon-ag-copy"
+          v-if="sdk.install_command || sdk.sdk_install_command"
+          v-bk-tooltips="t('复制')"
+          @click="copy(sdk.install_command || sdk.sdk_install_command)"
+        >
+        </i>
+      </aside>
+    </div>
+
+    <template v-if="isApigw && doc">
+      <div class="row-item mb10">
+        <div class="key">
+          <span class="column-key">
+            {{ t('资源版本') }}
+            <help-fill style="font-size: 16px; margin-left: 4px;" v-bk-tooltips="t('该SDK关联的API资源版本')" />
+            :
+          </span>
+        </div>
+        <div class="value">
+          <span
+            class="column-value"
+            v-bk-tooltips.top="{ content: doc.resource_version ?? '--', allowHTML: false }">
+            {{ doc.resource_version ?? '--'}}
+          </span>
+        </div>
+      </div>
+
+      <div class="row-item mb10" v-if="doc.stage?.name">
+        <div class="key">
+          <span class="column-key">
+            {{ t('版本已发环境') }}:
+          </span>
+        </div>
+        <div class="value">
+          <span class="column-value" v-bk-tooltips.top="doc.stage?.name">{{ doc.stage?.name || '--' }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { copy } from '@/common/util';
+import { HelpFill } from 'bkui-vue/lib/icon';
+import {
+  IApiGatewaySdkDoc,
+  ISdk,
+} from '@/views/apiDocs/types';
+import { toRefs } from 'vue';
+
+const { t } = useI18n();
+
+interface IProps {
+  isApigw: boolean;
+  sdk: ISdk | null
+  doc: IApiGatewaySdkDoc | null
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  isApigw: false,
+  sdk: () => null,
+  doc: () => null,
+});
+
+const { sdk, doc } = toRefs(props);
+
+const handleDownload = () => {
+  if (sdk.value.url || sdk.value.sdk_download_url) {
+    window.open(sdk.value.url || sdk.value.sdk_download_url);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.data-box {
+  padding: 12px 16px;
+  background: #fafbfd;
+
+  .row-item {
+    display: flex;
+
+    .key {
+      flex-shrink: 0;
+      width: 90px;
+      padding-right: 10px;
+      text-align: right;
+    }
+
+    .value {
+      width: calc(100% - 140px);
+    }
+
+    .suffix {
+      flex-shrink: 0;
+      padding-left: 4px;
+      width: 50px;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.column-key {
+  font-size: 14px;
+  color: #63656E;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.column-value {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ag-doc-icon {
+  font-size: 16px;
+  color: #979BA5;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.icon-hover:hover {
+  color: #3a84ff;
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-content.vue b/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-content.vue
new file mode 100644
index 000000000..63318d321
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-content.vue
@@ -0,0 +1,368 @@
+<template>
+  <!--  SDK使用说明 Slider 的内容  -->
+  <div class="sdk-wrapper">
+    <LangSelector v-model="language" :margin-bottom="0" @select="handleLangSelect"></LangSelector>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-if="sdkDoc" class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="markdownHtml"></div>
+    <bk-exception
+      v-else
+      class="exception-wrap-item exception-part"
+      :description="t('没有对应文档')"
+      scene="part"
+      type="empty"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  inject,
+  nextTick,
+  ref,
+  Ref,
+  watch,
+} from 'vue';
+import MarkdownIt from 'markdown-it';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/monokai-sublime.css';
+
+import { copy } from '@/common/util';
+
+import {
+  getESBSDKDoc,
+  getGatewaySDKDoc,
+} from '@/http';
+import {
+  LanguageType,
+  TabType,
+} from '@/views/apiDocs/types';
+import LangSelector from '@/views/apiDocs/components/lang-selector.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const curTab = inject<Ref<TabType>>('curTab');
+
+const language = ref<LanguageType>('python');
+const board = ref('default');
+const sdkDoc = ref('');
+const markdownHtml = ref('');
+const renderKey = ref(0);
+const renderHtmlIndex = ref(0);
+const isLoading = ref(false);
+const pagination = ref({
+  offset: 0,
+  count: 0,
+  limit: 10,
+});
+
+const md = new MarkdownIt({
+  linkify: false,
+  html: true,
+  breaks: true,
+  highlight(str: string, lang: string) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(lang, str, true).value;
+      } catch (__) {
+      }
+    }
+
+    return '';
+  },
+});
+
+const initMarkdownHtml = (content: string) => {
+  markdownHtml.value = md.render(content);
+  renderHtmlIndex.value += 1;
+  nextTick(() => {
+    const markdownDom = document.getElementById('markdown');
+
+    // 复制代码
+    markdownDom.querySelectorAll('a')
+      .forEach((item: any) => {
+        item.target = '_blank';
+      });
+    markdownDom?.querySelectorAll('pre')
+      ?.forEach((item) => {
+        const parentDiv = document.createElement('div');
+        const btn = document.createElement('button');
+        const codeBox = document.createElement('div');
+        const code = item?.querySelector('code')?.innerText;
+        parentDiv.className = 'pre-wrapper';
+        btn.className = 'ag-copy-btn';
+        codeBox.className = 'code-box';
+        btn.innerHTML = '<span title="复制"><i class="apigateway-icon icon-ag-copy-info"></i></span>';
+        btn.setAttribute('data-copy', code);
+        parentDiv?.appendChild(btn);
+        codeBox?.appendChild(item?.querySelector('code'));
+        item?.appendChild(codeBox);
+        item?.parentNode?.replaceChild(parentDiv, item);
+        parentDiv?.appendChild(item);
+      });
+    setTimeout(() => {
+      const copyDoms = Array.from(document.getElementsByClassName('ag-copy-btn'));
+      const handleCopy = function (this: any) {
+        copy(this.dataset?.copy);
+      };
+      copyDoms.forEach((dom: any) => {
+        dom.onclick = handleCopy;
+      });
+    }, 1000);
+  });
+};
+
+// 获取SDK 说明
+const getSDKDoc = async () => {
+  const params = { language: language.value };
+  isLoading.value = true;
+  try {
+    if (curTab.value === 'apigw') {
+      const res = await getGatewaySDKDoc(params);
+      sdkDoc.value = res.content;
+    } else {
+      const res = await getESBSDKDoc(board.value, params);
+      sdkDoc.value = res.content;
+    }
+    isLoading.value = false;
+    initMarkdownHtml(sdkDoc.value);
+  } catch (e) {
+    isLoading.value = false;
+    throw e;
+  }
+};
+
+const handleLangSelect = (lang: LanguageType) => {
+  if (lang === language.value) return;
+  init();
+};
+
+const init = async () => {
+  try {
+    await getSDKDoc();
+  } catch {
+    sdkDoc.value = '';
+    markdownHtml.value = '';
+    pagination.value = {
+      offset: 0,
+      count: 0,
+      limit: 10,
+    };
+  }
+};
+
+// 监听 tab 的变化，改变内容时重新渲染
+watch(
+  () => curTab.value,
+  () => {
+    renderKey.value += 1;
+    init();
+  },
+  { immediate: true, deep: true },
+);
+
+</script>
+
+<style lang="scss" scoped>
+$primary-color: #3a84ff;
+$code-bc: #f5f7fa;
+$code-color: #63656e;
+
+.sdk-wrapper {
+  padding: 24px 40px;
+}
+
+:deep(.bk-button-group) {
+  .is-selected {
+    background-color: #f6f9ff !important;
+  }
+}
+
+:deep(.ag-markdown-view) {
+  font-size: 14px;
+  text-align: left;
+  color: $code-color;
+  line-height: 19px;
+  font-style: normal;
+
+  .pre-wrapper {
+    .ag-copy-btn {
+      right: 12px;
+      top: 12px;
+      background-color: $code-bc;
+      color: $primary-color;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding: 0;
+    margin: 25px 0 10px 0 !important;
+    font-weight: bold;
+    text-align: left;
+    color: #313238;
+    line-height: 21px;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 17px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  h4 {
+    font-size: 13px;
+  }
+
+  h5 {
+    font-size: 12px;
+  }
+
+  h6 {
+    font-size: 12px;
+  }
+
+  p {
+    font-size: 14px;
+    color: $code-color;
+    line-height: 22px;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  ul {
+    padding-left: 17px;
+    line-height: 22px;
+
+    li {
+      list-style: disc;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  ol {
+    padding-left: 15px;
+    line-height: 22px;
+    margin: 14px 0;
+
+    li {
+      list-style: decimal;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  a {
+    color: #3a84ff;
+  }
+
+  tt {
+    margin: 0 2px;
+    padding: 0 5px;
+    white-space: nowrap;
+    border: 1px solid #eaeaea;
+    background-color: #f8f8f8;
+    border-radius: 3px;
+    font-size: 75%;
+  }
+
+  table {
+    font-size: 14px;
+    color: $code-color;
+    width: 100%;
+    text-align: left;
+    margin: 10px 0;
+    font-style: normal;
+    border: 1px solid #dcdee5;
+
+    &.field-list {
+      th {
+        width: 12%;
+      }
+    }
+
+    em {
+      font-style: normal;
+    }
+
+    th {
+      background: #f0f1f5;
+      font-size: 13px;
+      font-weight: bold;
+      color: $code-color;
+      border-bottom: 1px solid #dcdee5;
+      padding: 10px;
+      min-width: 70px;
+
+    }
+
+    th:nth-child(1) {
+      width: 20%;
+    }
+
+    td {
+      padding: 10px;
+      font-size: 13px;
+      color: $code-color;
+      border-bottom: 1px solid #dcdee5;
+      max-width: 250px;
+      font-style: normal;
+      word-break: break-all;
+    }
+  }
+
+  pre {
+    border-radius: 2px;
+    background: $code-bc;
+    padding: 10px;
+    font-size: 14px;
+    text-align: left;
+    color: $code-color;
+    line-height: 24px;
+    position: relative;
+    overflow: auto;
+    margin: 14px 0;
+
+    code {
+      font-family: "Lucida Console", "Courier New", "Monaco", monospace;
+      color: $code-color;
+    }
+
+    .hljs {
+      margin: -10px;
+    }
+  }
+}
+
+:deep(.code-box) {
+  // 代码块高亮字体颜色
+  .hljs-string {
+    color: #ff9c01;
+  }
+
+  .hljs-keyword {
+    color: #ea3636;
+  }
+
+  .hljs-comment {
+    color: #c4c6cc;
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-slider.vue b/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-slider.vue
new file mode 100644
index 000000000..68be16fa7
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-slider.vue
@@ -0,0 +1,39 @@
+<template>
+  <!--  SDK使用说明 Slider  -->
+  <div class="sdk-instruction-slider">
+    <bk-sideslider
+      v-model:isShow="isShow"
+      width="960"
+      :title="t('SDK 使用说明')"
+      quick-close
+    >
+      <template #default>
+        <div class="content-wrap">
+          <SdkInstructionContent></SdkInstructionContent>
+        </div>
+      </template>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { defineModel } from 'vue';
+
+import SdkInstructionContent from '@/views/apiDocs/components/sdk-instruction-content.vue';
+
+const { t } = useI18n();
+
+const isShow = defineModel<boolean>({
+  required: true,
+  default: false,
+});
+</script>
+
+<style scoped lang="scss">
+.sdk-instruction-slider {
+  .content-wrap {
+    padding: 24px 24px 0 24px;
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/doc-detail.vue b/src/dashboard-front/src/views/apiDocs/doc-detail.vue
new file mode 100644
index 000000000..c1da755c9
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/doc-detail.vue
@@ -0,0 +1,675 @@
+<template>
+  <!--  文档详情页  -->
+  <div class="page-wrap">
+    <!-- 顶部带返回按钮和系统切换器的通栏 -->
+    <header class="page-header">
+      <main class="flex-row align-items-center header-main">
+        <!--  返回按钮  -->
+        <i
+          class="icon apigateway-icon icon-ag-return-small"
+          @click="handleGoBack()"
+        ></i>
+        {{ curTab === 'apigw' ? curTargetName : curTargetBasics?.description ?? '' }}
+        <!--  组件系统下拉菜单  -->
+        <aside v-if="curTab === 'component'" class="system-dropdown-wrap">
+          <bk-dropdown ref="dropdown" :popover-options="{ boundary: 'body', placement: 'bottom-start' }">
+            <div class="dropdown-trigger-btn">
+              <span>{{ curTargetName }}</span>
+              <i class="ag-doc-icon doc-down-shape apigateway-icon icon-ag-down-shape"></i>
+            </div>
+            <template #content>
+              <bk-dropdown-menu class="dropdown-trigger-content bk-dropdown-list">
+                <bk-dropdown-item
+                  v-for="system in allSystemList"
+                  :key="system.name"
+                  :title="system.description"
+                  @click="handleSystemChange(system)"
+                >
+                  <span class="f14">{{ system.description }}</span>
+                </bk-dropdown-item>
+              </bk-dropdown-menu>
+            </template>
+          </bk-dropdown>
+        </aside>
+      </main>
+      <!--  展示右侧网关/组件基础信息的开关  -->
+      <aside
+        class="detail-toggle"
+        :class="{ 'active': isAsideVisible }"
+        @click="toggleAsideVisible()"
+      ><i class="apigateway-icon icon-ag-document f14"></i>
+      </aside>
+    </header>
+    <!--  正文  -->
+    <main class="page-content">
+      <bk-resize-layout
+        ref="outerResizeLayoutRef"
+        placement="right"
+        :border="false"
+        collapsible
+        initial-divide="392px"
+        :max="480"
+        :min="293"
+        style="flex-grow: 1;"
+        @collapse-change="updateIsRightAsideCollapsed"
+      >
+        <template #main>
+          <bk-resize-layout
+            placement="left"
+            style="margin-left: 40px;"
+            initial-divide="288px"
+            :max="400"
+            :min="288"
+            :border="false"
+          >
+            <!--  左栏，API 列表  -->
+            <template #aside>
+              <div class="left">
+                <div class="left-aside-wrap">
+                  <!--  筛选器  -->
+                  <header class="left-aside-header">
+                    <header class="title">
+                      {{ curTab === 'apigw' ? t('资源列表') : t('API列表') }}
+                      <aside v-if="apiList.length" class="sub-title">{{ filteredApiList.length }}</aside>
+                    </header>
+                    <main class="nav-filters">
+                      <article v-if="curTab === 'apigw'">
+                        <bk-select
+                          v-model="curStageName"
+                          :clearable="false"
+                          filterable
+                          :input-search="false"
+                          :prefix="t('环境')"
+                          @change="handleStageChange"
+                        >
+                          <bk-option
+                            v-for="option in stageList"
+                            :key="option.id"
+                            :value="option.name"
+                            :label="option.name"
+                          >
+                          </bk-option>
+                        </bk-select>
+                      </article>
+                      <article>
+                        <bk-input
+                          type="search"
+                          v-model="keyword"
+                          :placeholder="searchPlaceholder"
+                          clearable
+                        >
+                        </bk-input>
+                      </article>
+                    </main>
+                  </header>
+                  <!--  API 列表  -->
+                  <main class="resource-list custom-scroll-bar">
+                    <template v-if="filteredApiList.length">
+                      <article
+                        class="resource-item"
+                        v-for="api in filteredApiList"
+                        :key="api.id"
+                        :class="{ active: api.id === curApi?.id }"
+                        @click="handleApiClick(api.id)"
+                      >
+                        <!-- eslint-disable-next-line vue/no-v-html -->
+                        <header class="res-item-name" v-html="getHighlightedHtml(api.name)" v-bk-overflow-tips
+                        ></header>
+                        <!-- eslint-disable-next-line vue/no-v-html -->
+                        <main class="res-item-desc" v-html="getHighlightedHtml(api.description)"></main>
+                      </article>
+                    </template>
+                    <template v-else-if="keyword">
+                      <TableEmpty
+                        :keyword="keyword"
+                        @clear-filter="keyword = ''"
+                      />
+                    </template>
+                  </main>
+                </div>
+              </div>
+            </template>
+            <!--  中间栏，当前 API 文档内容  -->
+            <template #main>
+              <div class="main-content-wrap">
+                <DocDetailMainContent
+                  :api="curApi"
+                  :nav-list="navList"
+                  :markdown-html="curApiMarkdownHtml"
+                  :updated-time="updatedTime"
+                  @show-sdk-instruction="isSdkInstructionSliderShow = true"
+                  v-bkloading="{ loading: isLoading }"
+                ></DocDetailMainContent>
+              </div>
+            </template>
+          </bk-resize-layout>
+        </template>
+        <!--  右栏，网关/组件主要信息和SDK  -->
+        <template #aside>
+          <aside class="aside-right">
+            <main class="apigw-desc-wrap custom-scroll-bar">
+              <DocDetailSideContent
+                :basics="curTargetBasics"
+                :sdks="sdks"
+                @lang-change="handleLangChange"
+              ></DocDetailSideContent>
+            </main>
+          </aside>
+        </template>
+      </bk-resize-layout>
+    </main>
+    <!--  SDK使用说明 Slider  -->
+    <SdkInstructionSlider v-model="isSdkInstructionSliderShow"></SdkInstructionSlider>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  nextTick,
+  onBeforeMount,
+  provide,
+  ref,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import {
+  useRoute,
+  useRouter,
+} from 'vue-router';
+import {
+  getApigwResourceDocDocs,
+  getApigwResourcesDocs,
+  getApigwSDKDocs,
+  getApigwStagesDocs,
+  getComponenSystemDetail,
+  getComponentSystemList,
+  getESBSDKDetail,
+  getGatewaysDetailsDocs,
+  getSystemAPIList,
+  getSystemComponentDoc,
+} from '@/http';
+import {
+  IApiGatewayBasics,
+  IApiGatewaySdkDoc,
+  IComponent,
+  IComponentSdk,
+  INavItem,
+  IResource,
+  IStage,
+  IBoard,
+  ISystemBasics,
+  LanguageType,
+  TabType,
+  ISystem,
+} from '@/views/apiDocs/types';
+import MarkdownIt from 'markdown-it';
+import { ResizeLayout } from 'bkui-vue';
+import DocDetailMainContent from '@/views/apiDocs/components/doc-detail-main-content.vue';
+import DocDetailSideContent from '@/views/apiDocs/components/doc-detail-side-content.vue';
+import SdkInstructionSlider from '@/views/apiDocs/components/sdk-instruction-slider.vue';
+import TableEmpty from '@/components/table-empty.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const curTab = ref<TabType>('apigw');
+const board = ref('default');
+// 提供当前 tab 的值
+// 注入时请使用：const curTab = inject<Ref<TabType>>('curTab');
+provide('curTab', curTab);
+
+const stageList = ref<IStage[]>([]);
+const curStageName = ref('');
+
+// 当前的网关或组件被命名为 target
+const curTargetName = ref(''); // 当前文档所属的网关或组件名称
+const curTargetBasics = ref<IApiGatewayBasics & ISystemBasics | null>(null); // 当前文档所属的target主要信息
+const apiList = ref<(IResource & IComponent)[]>([]); // 当前target下的所有api
+const curComponentApiName = ref(''); // 当前组件api名称，路由用
+const curApi = ref<IResource & IComponent | null>(null); // 当前选中的 api
+const curApiMarkdownHtml = ref('');
+const updatedTime = ref<string | null>(null);
+const sdks = ref<IApiGatewaySdkDoc[] & IComponentSdk[]>([]);
+const isSdkInstructionSliderShow = ref(false);
+const navList = ref<INavItem[]>([]);
+const outerResizeLayoutRef = ref<InstanceType<typeof ResizeLayout> | null>(null);
+// 记录右栏折叠状态
+const isAsideVisible = ref(true);
+const isLoading = ref(false);
+const keyword = ref('');  // 筛选器输入框的搜索关键字
+
+const searchPlaceholder = computed(() => {
+  return t(
+    '在{resourceLength}个{type}中搜索...',
+    {
+      resourceLength: apiList.value.length,
+      type: curTab.value === 'apigw' ? t('资源') : 'API',
+    },
+  );
+});
+
+const filteredApiList = computed(() => {
+  return apiList.value.filter(res => res.name.includes(keyword.value) || res.description.includes(keyword.value));
+});
+
+const allSystemList = computed(() => {
+  const curBoard = boardList.value[0];
+  const systems: ISystem[] = [];
+  curBoard.categories.forEach(cat => cat.systems.forEach(system => systems.push(system)));
+  return systems;
+});
+
+const fetchTargetBasics = async () => {
+  try {
+    if (curTab.value === 'apigw') {
+      curTargetBasics.value = await getGatewaysDetailsDocs(curTargetName.value);
+    } else if (curTab.value === 'component') {
+      curTargetBasics.value = await getComponenSystemDetail(board.value, curTargetName.value);
+    }
+  } catch {
+    curTargetBasics.value = null;
+  }
+};
+
+const fetchSdks = async (language: LanguageType = 'python') => {
+  try {
+    if (curTab.value === 'apigw') {
+      const query = {
+        limit: 10000,
+        offset: 0,
+        language,
+      };
+      sdks.value = await getApigwSDKDocs(curTargetName.value, query);
+    } else if (curTab.value === 'component') {
+      const res = await getESBSDKDetail(board.value, { language });
+      sdks.value = res ? [{ language, ...res }] : [];
+    }
+  } catch {
+    sdks.value = [];
+  }
+};
+
+const handleLangChange = async (language: LanguageType) => {
+  await fetchSdks(language);
+};
+
+const fetchApigwStages = async () => {
+  try {
+    const query = {
+      limit: 10000,
+      offset: 0,
+    };
+    stageList.value = await getApigwStagesDocs(curTargetName.value, query);
+    curStageName.value = stageList.value[0]?.name ?? '';
+  } catch {
+    stageList.value = [];
+  }
+};
+
+const fetchApiList = async () => {
+  try {
+    let res: (IResource & IComponent)[] = [];
+    navList.value = [];
+    if (curTab.value === 'apigw') {
+      const query = {
+        limit: 10000,
+        offset: 0,
+        stage_name: curStageName.value,
+      };
+      res = await getApigwResourcesDocs(curTargetName.value, query) as (IResource & IComponent)[];
+    } else if (curTab.value === 'component') {
+      res = await getSystemAPIList(board.value, curTargetName.value) as (IResource & IComponent)[];
+    }
+    apiList.value = res ?? [];
+    if (curComponentApiName.value) {
+      curApi.value = apiList.value.find(api => api.name === curComponentApiName.value) ?? null;
+    } else {
+      curApi.value = apiList.value[0] ?? null;
+    }
+    if (curApi.value) {
+      await getApigwResourceDoc();
+    }
+  } catch {
+    apiList.value = [];
+  }
+};
+
+const handleApiClick = async (resId: number) => {
+  if (curApi.value.id === resId) return;
+  navList.value = [];
+  curApi.value = apiList.value.find(res => res.id === resId) ?? null;
+  if (curApi.value) {
+    await getApigwResourceDoc();
+  }
+};
+
+const md = new MarkdownIt({
+  linkify: false,
+  html: true,
+  breaks: true,
+});
+
+// markdown 解析器自定义规则，用于给 ### 标题添加 id，导航要用
+md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
+  const curToken = tokens[idx];
+  const nextToken = tokens[idx + 1];
+  let count = 2;
+  // 找到 ### 标题，并且只包含一行文本的 token
+  if (curToken.markup === '###' && nextToken?.type === 'inline') {
+    let headingText = nextToken.content;
+    if (navList.value.find(item => item.name === headingText)) {
+      headingText = `${headingText}${count}`;
+      count = count + 1;
+    }
+    curToken.attrPush(['id', headingText]);
+    navList.value.push({ id: headingText, name: headingText });
+  }
+  return self.renderToken(tokens, idx, options);
+};
+
+const getApigwResourceDoc = async () => {
+  try {
+    isLoading.value = true;
+    let res: any;
+    if (curTab.value === 'apigw') {
+      const query = {
+        stage_name: curStageName.value,
+      };
+      res = await getApigwResourceDocDocs(curTargetName.value, curApi.value.name, query);
+    } else if (curTab.value === 'component') {
+      res = await getSystemComponentDoc(board.value, curTargetName.value, curApi.value.name);
+    }
+    const { content, updated_time } = res;
+    curApiMarkdownHtml.value = md.render(content);
+    updatedTime.value = updated_time;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleStageChange = async () => {
+  await fetchApiList();
+};
+
+const getHighlightedHtml = (value: string) => {
+  if (keyword.value) {
+    return value.replace(new RegExp(`(${keyword.value})`), '<em class="ag-keyword">$1</em>');
+  }
+  return value;
+};
+
+const boardList = ref<IBoard[]>([]);
+
+const fetchBoardList = async () => {
+  try {
+    boardList.value = await getComponentSystemList(board.value) as IBoard[];
+  } catch {
+    boardList.value = [];
+  }
+};
+
+const handleSystemChange = async (system: ISystem) => {
+  if (system.name === curTargetName.value) return;
+  curTargetName.value = system.name;
+  curComponentApiName.value = '';
+  await init();
+};
+
+const init = async () => {
+  if (curTab.value === 'apigw') {
+    await fetchApigwStages();
+  }
+  await Promise.all([
+    fetchTargetBasics(),
+    fetchSdks(),
+    fetchApiList(),
+  ]);
+  if (curTab.value === 'component') {
+    await fetchBoardList();
+  }
+};
+
+const toggleAsideVisible = () => {
+  nextTick(() => {
+    outerResizeLayoutRef.value?.setCollapse(isAsideVisible.value);
+  });
+};
+
+const updateIsRightAsideCollapsed = (collapsed: boolean) => {
+  isAsideVisible.value = !collapsed;
+};
+
+const handleGoBack = () => {
+  router.push({
+    name: 'apiDocs',
+    params: {
+      curTab: curTab.value,
+    },
+  });
+};
+
+onBeforeMount(() => {
+  const { params } = route;
+  curTab.value = params.curTab as TabType || 'apigw';
+  curTargetName.value = params.targetName as string;
+  curComponentApiName.value = params.componentName as string || '';
+  init();
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+.page-header {
+  position: sticky;
+  top: 0;
+  padding-inline: 24px;
+  background: #fff;
+  border-bottom: 1px solid #dcdee5;
+  box-shadow: 0 3px 4px 0 #0000000a;
+  height: 52px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1;
+
+  .header-main {
+    flex-grow: 1;
+    display: flex;
+    flex-basis: 52px;
+    box-sizing: border-box;
+    margin-right: auto;
+    color: #313238;
+    font-size: 16px;
+
+    .icon-ag-return-small {
+      font-size: 32px;
+      color: #3a84ff;
+      cursor: pointer;
+    }
+
+    .system-dropdown-wrap {
+      display: flex;
+      align-items: center;
+      margin-left: 8px;
+
+      .dropdown-trigger-btn {
+        height: 30px;
+        line-height: 28px;
+        padding-inline: 6px;
+        color: #63656E;
+        font-size: 12px;
+      }
+
+      .dropdown-trigger-content {
+        :deep(.bk-dropdown-item) {
+          max-width: 300px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  .detail-toggle {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    border-radius: 2px;
+    color: #63656e;
+    cursor: pointer;
+
+    &:hover {
+      background: #f0f1f5;
+    }
+
+    &.active {
+      background: #e1ecff;
+      color: #3a84ff;
+    }
+  }
+}
+
+.page-content {
+  display: flex;
+  margin: 0 auto;
+
+  .left {
+    padding: 16px 8px 0 0;
+  }
+
+  .left-aside-wrap {
+    min-width: 280px;
+    width: auto;
+    box-shadow: 0 2px 4px 0 #1919290d;
+    border-radius: 2px;
+    background-color: #ffffff;
+
+    .left-aside-header {
+      padding: 16px 24px 12px;
+
+      .title {
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #313238;
+        letter-spacing: 0;
+        line-height: 22px;
+
+        .sub-title {
+          margin-left: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 30px;
+          height: 16px;
+          background: #f0f1f5;
+          border-radius: 2px;
+          font-size: 12px;
+          color: #979ba5;
+        }
+      }
+
+      .nav-filters {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+    }
+
+    .resource-list {
+      height: calc(100vh - 282px);
+      overflow-y: scroll;
+
+      .resource-item {
+        padding-left: 24px;
+        height: 52px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background: #fff;
+        cursor: pointer;
+
+        .res-item-name,
+        .res-item-desc {
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        .res-item-name {
+          font-size: 14px;
+          color: #313238;
+          line-height: 22px;
+        }
+
+        .res-item-desc {
+          font-size: 12px;
+          color: #979ba5;
+          line-height: 20px;
+        }
+
+        &:hover, &.active {
+          background: #e1ecff;
+
+          .res-item-name {
+            color: #3a84ff;
+          }
+        }
+      }
+    }
+  }
+
+  .main-content-wrap {
+    padding-top: 16px;
+  }
+
+  .aside-right {
+    .apigw-desc-wrap {
+      height: calc(100vh - 144px);
+      overflow-y: scroll;
+      background-color: #fff;
+    }
+  }
+
+  // 去掉左侧伸缩栏的拉伸线
+  :deep(.bk-resize-layout-left>.bk-resize-layout-aside) {
+    padding-right: 8px;
+    border-right: none;
+  }
+
+  // 去掉右侧伸缩栏的拉伸线
+  :deep(.bk-resize-layout-right>.bk-resize-layout-aside) {
+    border-left: none;
+  }
+
+  // 隐藏的折叠按钮
+  :deep(.bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse) {
+    display: none !important;
+  }
+}
+
+.custom-scroll-bar {
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: lighten(#c4c6cc, 80%);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: 5px;
+    border-radius: 2px;
+    background-color: #c4c6cc;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/index.vue b/src/dashboard-front/src/views/apiDocs/index.vue
new file mode 100644
index 000000000..1a77f84be
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/index.vue
@@ -0,0 +1,656 @@
+<template>
+  <div class="docs-main" ref="docsMain">
+    <!--  顶部 网关 / 组件 Tab  -->
+    <header class="page-tabs">
+      <nav class="tabs-group">
+        <section
+          class="page-tab"
+          :class="{ 'active': curTab === 'apigw' }"
+          @click="curTab = 'apigw'"
+        >{{ t('网关 API 文档') }}
+        </section>
+        <section
+          class="page-tab"
+          :class="{ 'active': curTab === 'component' }"
+          @click="curTab = 'component'"
+        >{{ t('组件 API 文档') }}
+        </section>
+      </nav>
+    </header>
+    <!--  正文  -->
+    <main class="docs-main-content">
+      <!--  当选中 网关API文档 时  -->
+      <div v-if="curTab === 'apigw'" class="content-of-apigw">
+        <!--  搜索栏和 SDK使用说明  -->
+        <header class="top-bar">
+          <bk-input
+            type="search"
+            :placeholder="t('请输入网关名称或描述')"
+            v-model="filterData.keyword"
+            clearable
+            style="width: 400px"
+          />
+          <bk-link theme="primary" class="f12 ml24" @click.prevent="isSdkInstructionSliderShow = true">
+            <i class="apigateway-icon icon-ag-document f14"></i>
+            {{ t('SDK 使用说明') }}
+          </bk-link>
+          <!-- <bk-button
+            theme="primary"
+            @click="handleGoApigw"
+          >
+            {{ t('网关管理') }}
+          </bk-button> -->
+        </header>
+        <!--  网关列表  -->
+        <main class="docs-list">
+          <bk-loading :loading="isLoading">
+            <bk-table
+              :data="tableData"
+              remote-pagination
+              :pagination="pagination"
+              show-overflow-tooltip
+              @page-limit-change="handlePageSizeChange"
+              @page-value-change="handlePageChange"
+              :border="['outer']"
+            >
+              <bk-table-column
+                :label="t('网关名称')"
+                field="name"
+              >
+                <template #default="{ row }: { row: IApiGatewayBasics }">
+                  <span class="link-name" @click="gotoDetails(row)">{{ row.name || '--' }}</span>
+                  <bk-tag theme="success" v-if="row.is_official">
+                    {{ t('官方') }}
+                  </bk-tag>
+                </template>
+              </bk-table-column>
+              <bk-table-column
+                :label="t('网关描述')"
+                field="description"
+                :min-width="500"
+              >
+                <template #default="{ row }">
+                  {{ row.description || '--' }}
+                </template>
+              </bk-table-column>
+              <bk-table-column
+                :label="t('网关负责人')"
+                field="maintainers"
+              >
+                <template #default="{ row }">
+                  {{ row.maintainers?.join(', ') || '--' }}
+                </template>
+              </bk-table-column>
+              <!--  <bk-table-column
+                :label="t('SDK 包名称')"
+                field="maintainers"
+              >
+                <template #default="{ row }">
+                  {{ row?.sdk?.name || '&#45;&#45;' }}
+                </template>
+              </bk-table-column>
+              <bk-table-column
+                :label="t('SDK 最新版本')"
+                field="maintainers"
+              >
+                <template #default="{ row }">
+                  {{ row?.sdk?.version || '&#45;&#45;' }}
+                </template>
+              </bk-table-column>-->
+              <bk-table-column
+                :label="t('操作')"
+                width="180"
+                fixed="right"
+              >
+                <template #default="{ row }: { row: IApiGatewayBasics }">
+                  <bk-button
+                    text
+                    theme="primary"
+                    @click="handleSdkDetailClick(row)"
+                  >
+                    {{ t('查看 SDK') }}
+                  </bk-button>
+                  <!--                  <a-->
+                  <!--                    class="ag-link pl10 pr10"-->
+                  <!--        :href="row?.sdk_download_url ?? ''"-->
+                  <!--                  >-->
+                  <!--                    {{ t('下载 SDK') }}-->
+                  <!--                  </a>-->
+                </template>
+              </bk-table-column>
+              <template #empty>
+                <TableEmpty
+                  :keyword="tableEmptyConf.keyword"
+                  :abnormal="tableEmptyConf.isAbnormal"
+                  @reacquire="getList"
+                  @clear-filter="handleClearFilterKey"
+                />
+              </template>
+            </bk-table>
+          </bk-loading>
+        </main>
+      </div>
+      <!--  当选中 组件API文档 时  -->
+      <div v-else-if="curTab === 'component'" class="content-of-component">
+        <main class="category-list">
+          <article class="category-wrap" v-for="systemBoard in componentSystemList" :key="systemBoard.board">
+            <!--  system 类别 title 和搜索栏  -->
+            <header class="top-bar">
+              <main class="bar-title">
+                <span class="title">{{ systemBoard.board_label }}</span>
+                <bk-link theme="primary" class="f12" @click.prevent="isSdkInstructionSliderShow = true">
+                  <i class="apigateway-icon icon-ag-document f14"></i>
+                  {{ t('查看 SDK') }}
+                </bk-link>
+                <bk-link
+                  :href="systemBoard.sdk?.sdk_download_url"
+                  :disabled="!systemBoard.sdk?.sdk_download_url"
+                  theme="primary"
+                  v-bk-tooltips="{ content: t('SDK未生成，可联系负责人生成SDK'), disabled: systemBoard.sdk?.sdk_download_url }"
+                  class="f12"
+                >
+                  <i class="apigateway-icon icon-ag-download f14"></i>
+                  {{ t('下载 SDK') }}
+                </bk-link>
+              </main>
+              <aside v-if="componentSystemList.length > 0">
+                <ComponentSearcher class="ag-searcher-box" :version-list="componentSystemList"></ComponentSearcher>
+              </aside>
+            </header>
+            <!--  组件  -->
+            <main class="components-wrap">
+              <!--  组件分类  -->
+              <article
+                class="component-group"
+                v-for="cat in systemBoard.categories"
+                :key="cat.id"
+                :data-_nav-id="`${systemBoard.board}-${cat.id}`"
+                :ref="catRefs.set"
+              >
+                <header class="group-title">
+                  <span class="name">{{ cat.name }}</span>
+                  <span class="count">{{ `(${cat.systems.length})` }}</span>
+                </header>
+                <!--  分类中的组件卡片  -->
+                <main class="group-items">
+                  <article
+                    class="item"
+                    v-for="system in cat.systems"
+                    :key="system.name"
+                    @click="gotoDetails(system)"
+                  >
+                    <main class="title">
+                      <div class="name">{{ system.description }}</div>
+                      <div class="name-en">{{ system.name }}</div>
+                    </main>
+                    <aside class="background-image">
+                      <i class="apigateway-icon icon-ag-component-intro"></i>
+                    </aside>
+                  </article>
+                </main>
+              </article>
+            </main>
+          </article>
+        </main>
+        <!--  右侧导航目录  -->
+        <bk-affix :offset-top="128">
+          <aside class="component-nav-list">
+            <bk-collapse
+              class="collapse-cls"
+              v-model="navPanelNamesList"
+              use-card-theme
+            >
+              <bk-collapse-panel
+                v-for="systemBoard in componentSystemList"
+                :key="systemBoard.board"
+                :name="systemBoard.board"
+              >
+                <template #header>
+                  <div class="panel-header">
+                    <main class="flex-row align-items-center">
+                      <angle-up-fill
+                        :class="[
+                          navPanelNamesList.includes(systemBoard.board) ? 'panel-header-show' : 'panel-header-hide'
+                        ]"
+                      />
+                      <div class="title ml4">
+                        {{ systemBoard.board_label }}
+                      </div>
+                    </main>
+                  </div>
+                </template>
+                <template #content>
+                  <nav class="panel-content">
+                    <article
+                      v-for="cat in systemBoard.categories"
+                      :key="cat.id"
+                      class="panel-content-cat-item"
+                      :class="{ 'active': curCatNavId === cat._navId }"
+                      @click="handleNavClick(cat)"
+                    >{{ cat.name }}
+                    </article>
+                  </nav>
+                </template>
+              </bk-collapse-panel>
+            </bk-collapse>
+          </aside>
+        </bk-affix>
+      </div>
+    </main>
+    <!--  SDK使用说明 Slider  -->
+    <SdkInstructionSlider v-model="isSdkInstructionSliderShow"></SdkInstructionSlider>
+    <!--  网关 SDK 地址 dialog  -->
+    <SdkDetailDialog v-model="isSdkDetailDialogShow" :sdks="curSdks" :apigw-name="curTargetName"></SdkDetailDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  onBeforeMount,
+  onMounted,
+  provide,
+  ref,
+  watch,
+} from 'vue';
+import { useQueryList } from '@/hooks';
+import { useI18n } from 'vue-i18n';
+import {
+  getComponentSystemList,
+  getGatewaysDocs,
+} from '@/http';
+import {
+  useRoute,
+  useRouter,
+} from 'vue-router';
+import useMaxTableLimit from '@/hooks/use-max-table-limit';
+import TableEmpty from '@/components/table-empty.vue';
+import SdkInstructionSlider from '@/views/apiDocs/components/sdk-instruction-slider.vue';
+import SdkDetailDialog from '@/views/apiDocs/components/sdk-detail-dialog.vue';
+import ComponentSearcher from '@/views/apiDocs/components/component-searcher.vue';
+import {
+  IApiGatewayBasics,
+  ICategory,
+  ISdk,
+  IBoard,
+  TabType,
+  ISystem,
+} from '@/views/apiDocs/types';
+import { AngleUpFill } from 'bkui-vue/lib/icon';
+import { useTemplateRefsList } from '@vueuse/core';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const filterData = ref({ keyword: '' });
+
+const {
+  tableData,
+  pagination,
+  isLoading,
+  handlePageChange,
+  handlePageSizeChange,
+  getList,
+} = useQueryList(getGatewaysDocs, filterData, null, true);
+
+
+// 当前视口高度能展示最多多少条表格数据
+const maxTableLimit = ref(10);
+maxTableLimit.value = useMaxTableLimit(271);
+
+// 注意，pagination 的 limit 必须在 limitList 里才能生效
+// 所以要先放进 limitList 里
+pagination.value.limitList.unshift(maxTableLimit.value);
+pagination.value.limit = maxTableLimit.value;
+
+const tableEmptyConf = ref<{ keyword: string, isAbnormal: boolean }>({
+  keyword: '',
+  isAbnormal: false,
+});
+
+// 当前展示的是 网关 | 组件 相关内容
+const curTab = ref<TabType>('apigw');
+const curTargetName = ref('');
+const board = ref('default');
+const curCatNavId = ref('');
+const navPanelNamesList = ref<string[]>([]);
+
+const catRefs = useTemplateRefsList<HTMLElement>();
+
+// 提供当前 tab 的值
+// 注入时请使用：const curTab = inject<Ref<TabType>>('curTab');
+provide('curTab', curTab);
+
+const isSdkInstructionSliderShow = ref(false);
+const isSdkDetailDialogShow = ref(false);
+
+const gotoDetails = (row: IApiGatewayBasics | ISystem) => {
+  router.push({
+    name: 'apiDocDetail',
+    params: {
+      targetName: row.name,
+      curTab: curTab.value,
+    },
+  });
+};
+
+const handleClearFilterKey = () => {
+  filterData.value = { keyword: '' };
+  getList();
+  updateTableEmptyConfig();
+};
+
+const updateTableEmptyConfig = () => {
+  const searchParams = {
+    ...filterData.value,
+  };
+  const list = Object.values(searchParams).filter(item => item !== '');
+  tableEmptyConf.value.isAbnormal = pagination.value.abnormal;
+  if (list.length && !tableData.value.length) {
+    tableEmptyConf.value.keyword = 'placeholder';
+    return;
+  }
+  if (list.length) {
+    tableEmptyConf.value.keyword = '$CONSTANT';
+    return;
+  }
+  tableEmptyConf.value.keyword = '';
+};
+
+const componentSystemList = ref<IBoard[]>([]);
+
+const fetchComponentSystemList = async () => {
+  try {
+    const res = await getComponentSystemList(board.value) as IBoard[];
+    res.forEach((system) => {
+      // 给组件分类添加一个跳转用的 _navId
+      system.categories.forEach((cat) => {
+        cat._navId = `${system.board}-${cat.id}`;
+      });
+      componentSystemList.value.push(system);
+      navPanelNamesList.value.push(system.board);
+    });
+  } catch {
+    componentSystemList.value = [];
+  }
+};
+
+const handleNavClick = (cat: ICategory) => {
+  const { _navId } = cat;
+  curCatNavId.value = _navId;
+  const catRef = catRefs.value.find(item => item.dataset?._navId === _navId);
+  if (catRef?.scrollIntoView) {
+    catRef.scrollIntoView({ behavior: 'smooth' });
+  }
+};
+
+const curSdks = ref<ISdk[]>([]);
+
+const handleSdkDetailClick = (row: IApiGatewayBasics) => {
+  curTargetName.value = row.name;
+  curSdks.value = row.sdks ?? [];
+  isSdkDetailDialogShow.value = true;
+};
+
+watch(
+  () => tableData.value, () => {
+    updateTableEmptyConfig();
+  },
+  {
+    deep: true,
+  },
+);
+
+onBeforeMount(() => {
+  const { params } = route;
+  // 记录返回到此页时选中的 tab
+  curTab.value = params.curTab as TabType || 'apigw';
+});
+
+onMounted(async () => {
+  await fetchComponentSystemList();
+});
+
+</script>
+
+<style lang="scss" scoped>
+$primary-color: #3a84ff;
+
+.docs-main {
+
+  .page-tabs {
+    height: 52px;
+    margin-bottom: 24px;
+    position: sticky;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    box-shadow: 0 3px 4px 0 #0000000a;
+    z-index: 2;
+
+    .tabs-group {
+      display: flex;
+      justify-content: center;
+
+      .page-tab {
+        width: 135px;
+        height: 52px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+          color: #3a84ff;
+        }
+
+        &.active {
+          background-color: #f0f5ff;
+          border-top: 3px solid #3a84ff;
+          color: #3a84ff;
+        }
+      }
+    }
+  }
+
+  .docs-main-content {
+    width: 1280px;
+    margin: auto;
+
+    .content-of-apigw {
+      .top-bar {
+        margin-bottom: 16px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+
+      .link-name {
+        color: #3a84ff;
+        cursor: pointer;
+      }
+    }
+
+    .content-of-component {
+      padding-bottom: 12px;
+      display: flex;
+
+      .category-list {
+        width: 1000px;
+
+        .category-wrap {
+          margin-bottom: 4px;
+
+          .top-bar {
+            margin-bottom: 16px;
+            height: 32px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .bar-title {
+              display: flex;
+              align-items: center;
+              gap: 24px;
+
+              .title {
+                font-weight: 700;
+                font-size: 16px;
+                color: #313238;
+                letter-spacing: 0;
+                line-height: 24px;
+              }
+            }
+          }
+
+          .components-wrap {
+            .component-group {
+              margin-bottom: 16px;
+              scroll-margin-top: 68px;
+
+              .group-title {
+                padding-inline: 16px;
+                margin-bottom: 16px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+                border-radius: 2px;
+                background: #eaebf0;
+
+                .name {
+                  margin-right: 8px;
+                  font-size: 14px;
+                  color: #313238;
+                }
+
+                .count {
+                  color: #979ba5;
+                }
+              }
+
+              .group-items {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 16px;
+
+                .item {
+                  position: relative;
+                  padding: 16px;
+                  width: 238px;
+                  height: 80px;
+                  background: #fff;
+                  box-shadow: 0 2px 4px 0 #1919290d;
+                  border-radius: 2px;
+                  transition: box-shadow .2s ease-in-out;
+
+                  .title {
+                    .name, .name-en {
+                      font-size: 14px;
+                      letter-spacing: 0;
+                      line-height: 22px;
+                    }
+
+                    .name {
+                      margin-bottom: 5px;
+                      color: #313238;
+                      transition: color .2s ease-in-out;
+                    }
+
+                    .name-en {
+                      color: #c4c6cc;
+                    }
+                  }
+
+                  .background-image {
+                    position: absolute;
+                    top: 20px;
+                    right: 16px;
+                    width: 40px;
+                    height: 40px;
+                    display: flex;
+                    align-items: center;
+                    font-size: 40px;
+                    color: #f0f5ff;
+                  }
+
+                  &:hover {
+                    box-shadow: 0 2px 4px 0 #0000001a, 0 2px 4px 0 #1919290d;
+                    cursor: pointer;
+
+                    .title {
+                      .name {
+                        color: $primary-color;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .component-nav-list {
+        padding-left: 24px;
+        width: 187px;
+
+        :deep(.collapse-cls) {
+          .bk-collapse-item {
+            box-shadow: none;
+          }
+        }
+
+        :deep(.bk-collapse-content) {
+          padding: 0 !important;
+          font-size: 14px;
+        }
+
+        .panel-header {
+          padding-left: 9px;
+          padding-bottom: 7px;
+          display: flex;
+          align-items: center;
+          border-left: 1px solid #dcdee5;
+          cursor: pointer;
+
+          .title {
+            height: 22px;
+          }
+
+          .panel-header-show {
+            transition: .2s;
+            transform: rotate(0deg);
+          }
+
+          .panel-header-hide {
+            transition: .2s;
+            transform: rotate(-90deg);
+          }
+        }
+
+        .panel-content {
+
+          .panel-content-cat-item {
+            padding-left: 40px;
+            padding-block: 7px;
+            line-height: 22px;
+            border-left: 1px solid #dcdee5;
+            cursor: pointer;
+
+            &:hover {
+              color: $primary-color;
+            }
+
+            &.active {
+              border-color: $primary-color;
+            }
+          }
+        }
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/dashboard-front/src/views/apiDocs/types.d.ts b/src/dashboard-front/src/views/apiDocs/types.d.ts
new file mode 100644
index 000000000..ef3ea0771
--- /dev/null
+++ b/src/dashboard-front/src/views/apiDocs/types.d.ts
@@ -0,0 +1,129 @@
+type TabType = 'apigw' | 'component';
+type LanguageType = 'python' | 'java';
+
+interface INavItem {
+  id: number | string;
+  name: string;
+}
+
+// 网关类型
+
+interface IApiGatewayBasics {
+  id: number;
+  name: string;
+  description: string;
+  maintainers: string[];
+  is_official: boolean;
+  api_url: string;
+  sdks?: IApiGatewaySdk[];
+}
+
+interface IApiGatewaySdkDoc {
+  language: LanguageType;
+  resource_version: IResourceVersion;
+  sdk: IApiGatewaySdk;
+  stage: { id: number, name: string }
+}
+
+interface IApiGatewaySdk {
+  language: LanguageType;
+  name: string;
+  version: string;
+  url: string;
+  install_command: string;
+}
+
+interface IResourceVersion {
+  id: number;
+  version: string;
+}
+
+interface IResource {
+  id: number;
+  name: string;
+  description: string;
+  method: string;
+  path: string;
+  verified_user_required: boolean;
+  verified_app_required: boolean;
+  resource_perm_required: boolean;
+  allow_apply_permission: boolean;
+  labels: string[];
+}
+
+interface IStage {
+  id: number;
+  name: string;
+  description: string;
+}
+
+// 组件类型
+
+interface IBoard {
+  board: string;
+  board_label: string;
+  categories: ICategory[];
+  sdk?: IComponentSdk;
+}
+
+interface ICategory {
+  id: string;
+  name: string;
+  systems: ISystem[];
+  _navId?: string;
+}
+
+interface ISystem {
+  name: string;
+  description: string;
+}
+
+interface ISystemBasics {
+  name: string;
+  description: string;
+  comment: string;
+  maintainers: string[];
+}
+
+interface IComponent {
+  id: number;
+  name: string;
+  description: string;
+  verified_app_required: boolean;
+  verified_user_required: boolean;
+  component_permission_required: boolean;
+}
+
+interface IComponentSdk {
+  board_label: string;
+  sdk_name: string;
+  sdk_description: string;
+  sdk_version_number: string;
+  sdk_download_url: string;
+  sdk_install_command: string;
+  language: LanguageType;
+}
+
+// 其他
+
+interface ISdk extends Partial<IApiGatewaySdk>, Partial<IComponentSdk> {
+}
+
+export {
+  IApiGatewayBasics,
+  IApiGatewaySdk,
+  IApiGatewaySdkDoc,
+  IBoard,
+  ICategory,
+  IComponent,
+  IComponentSdk,
+  INavItem,
+  IResource,
+  IResourceVersion,
+  ISdk,
+  IStage,
+  ISystem,
+  ISystemBasics,
+  LanguageType,
+  TabType,
+};
diff --git a/src/dashboard-front/src/views/apigwDocs/components/doc.vue b/src/dashboard-front/src/views/apigwDocs/components/doc.vue
index 3503c9d4a..ce461a933 100644
--- a/src/dashboard-front/src/views/apigwDocs/components/doc.vue
+++ b/src/dashboard-front/src/views/apigwDocs/components/doc.vue
@@ -63,7 +63,7 @@
                 <i class="ml5 bk-icon icon-question-circle" v-bk-tooltips="$t('应用访问该网关API前，是否需要在开发者中心申请该网关API权限')"></i>
                 ：
               </div>
-              <div class="v">{{curComponent.resource_perm_required ? $t('是') : $t('否')}}</div>
+              <div class="v">{{curComponent.allow_apply_permission ? $t('是') : $t('否')}}</div>
             </div>
           </div>
           <!-- eslint-disable-next-line vue/no-v-html -->
diff --git a/src/dashboard-front/src/views/resource/setting/index.vue b/src/dashboard-front/src/views/resource/setting/index.vue
index 9d379f183..1efba5aea 100644
--- a/src/dashboard-front/src/views/resource/setting/index.vue
+++ b/src/dashboard-front/src/views/resource/setting/index.vue
@@ -504,6 +504,7 @@ import { IDialog, IDropList, MethodsEnum } from '@/types';
 import { is24HoursAgo } from '@/common/util';
 import {  useCommon, useResourceVersion } from '@/store';
 import ResourceDocSideSlider from '@/views/components/resource-doc-slider/index.vue';
+import useMaxTableLimit from '@/hooks/use-max-table-limit';
 
 const props = defineProps({
   apigwId: {
@@ -766,16 +767,7 @@ const labelsList = computed(() => {
 
 // 当前视口高度能展示最多多少条表格数据
 const maxTableLimit = ref(10);
-
-// 计算当前视口高度下能展示多少表格行
-const calcMaxTableLimit = (lineHeight = 42, heightTaken = 347) => {
-  const viewportHeight = window.innerHeight;
-  const heightToUse = viewportHeight - heightTaken;
-  const limit = Math.floor(heightToUse / lineHeight);
-  return limit > 0 ? limit : 1;
-};
-
-maxTableLimit.value = calcMaxTableLimit();
+maxTableLimit.value = useMaxTableLimit();
 
 // 列表hooks
 const {
diff --git a/src/dashboard-front/src/views/resource/version/components/createSdk.vue b/src/dashboard-front/src/views/resource/version/components/createSdk.vue
index ebe91f601..898c3df41 100644
--- a/src/dashboard-front/src/views/resource/version/components/createSdk.vue
+++ b/src/dashboard-front/src/views/resource/version/components/createSdk.vue
@@ -37,7 +37,7 @@
         <bk-form-item :label="$t('生成语言')" required property="language">
           <bk-radio-group v-model="formData.language" type="card">
             <bk-radio-button label="python">Python</bk-radio-button>
-            <bk-radio-button label="golang">Golang</bk-radio-button>
+            <bk-radio-button label="java">Java</bk-radio-button>
           </bk-radio-group>
         </bk-form-item>
       </bk-form>
diff --git a/src/dashboard-front/yarn.lock b/src/dashboard-front/yarn.lock
index 961f5dae7..457b2f752 100644
--- a/src/dashboard-front/yarn.lock
+++ b/src/dashboard-front/yarn.lock
@@ -236,11 +236,21 @@
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz"
   integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
 
+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
 "@babel/helper-validator-identifier@^7.22.20":
   version "7.22.20"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
 "@babel/helper-validator-option@^7.23.5":
   version "7.23.5"
   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz"
@@ -278,6 +288,13 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz"
   integrity sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==
 
+"@babel/parser@^7.24.7":
+  version "7.25.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
+  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+  dependencies:
+    "@babel/types" "^7.25.2"
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.23.3":
   version "7.23.3"
   resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz"
@@ -1008,6 +1025,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
+  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@blueking/babel-preset-bk@2.1.0-beta.10":
   version "2.1.0-beta.10"
   resolved "https://registry.npmjs.org/@blueking/babel-preset-bk/-/babel-preset-bk-2.1.0-beta.10.tgz"
@@ -1475,26 +1501,26 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
-"@intlify/core-base@9.9.1":
-  version "9.9.1"
-  resolved "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.1.tgz"
-  integrity sha512-qsV15dg7jNX2faBRyKMgZS8UcFJViWEUPLdzZ9UR0kQZpFVeIpc0AG7ZOfeP7pX2T9SQ5jSiorq/tii9nkkafA==
+"@intlify/core-base@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.14.0.tgz#63ce687a6560c0af6a16cb567d9d8a1ea1a5a65e"
+  integrity sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==
   dependencies:
-    "@intlify/message-compiler" "9.9.1"
-    "@intlify/shared" "9.9.1"
+    "@intlify/message-compiler" "9.14.0"
+    "@intlify/shared" "9.14.0"
 
-"@intlify/message-compiler@9.9.1":
-  version "9.9.1"
-  resolved "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.1.tgz"
-  integrity sha512-zTvP6X6HeumHOXuAE1CMMsV6tTX+opKMOxO1OHTCg5N5Sm/F7d8o2jdT6W6L5oHUsJ/vvkGefHIs7Q3hfowmsA==
+"@intlify/message-compiler@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.14.0.tgz#e767141dd12862b3c1bf02ab5fc4852792812381"
+  integrity sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==
   dependencies:
-    "@intlify/shared" "9.9.1"
+    "@intlify/shared" "9.14.0"
     source-map-js "^1.0.2"
 
-"@intlify/shared@9.9.1":
-  version "9.9.1"
-  resolved "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.1.tgz"
-  integrity sha512-b3Pta1nwkz5rGq434v0psHwEwHGy1pYCttfcM22IE//K9owbpkEvFptx9VcuRAxjQdrO2If249cmDDjBu5wMDA==
+"@intlify/shared@9.14.0":
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.14.0.tgz#e8fb3693ad4171442cbe6cb8922a9b5a22ffb4ef"
+  integrity sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==
 
 "@jest/schemas@^29.6.3":
   version "29.6.3"
@@ -1779,10 +1805,10 @@
   resolved "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz"
   integrity sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==
 
-"@types/lodash@^4.14.201":
-  version "4.14.202"
-  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz"
-  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+"@types/lodash@^4.17.7":
+  version "4.17.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.7.tgz#2f776bcb53adc9e13b2c0dfd493dfcbd7de43612"
+  integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
 
 "@types/markdown-it@^13.0.7":
   version "13.0.7"
@@ -2126,6 +2152,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
 
+"@vue/compiler-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.38.tgz#326dfe3c92fa2b0f1dc9b39a948a231980253496"
+  integrity sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/shared" "3.4.38"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-dom@3.4.27":
   version "3.4.27"
   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz"
@@ -2134,7 +2171,30 @@
     "@vue/compiler-core" "3.4.27"
     "@vue/shared" "3.4.27"
 
-"@vue/compiler-sfc@3.4.27", "@vue/compiler-sfc@^3.4.15":
+"@vue/compiler-dom@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz#90348fac1130e0bbd408b650635cb626b3b9df06"
+  integrity sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==
+  dependencies:
+    "@vue/compiler-core" "3.4.38"
+    "@vue/shared" "3.4.38"
+
+"@vue/compiler-sfc@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz#954c3f6777bbbcca28771ba59b795f12f76ef188"
+  integrity sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==
+  dependencies:
+    "@babel/parser" "^7.24.7"
+    "@vue/compiler-core" "3.4.38"
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.10"
+    postcss "^8.4.40"
+    source-map-js "^1.2.0"
+
+"@vue/compiler-sfc@^3.4.15":
   version "3.4.27"
   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz"
   integrity sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==
@@ -2157,6 +2217,14 @@
     "@vue/compiler-dom" "3.4.27"
     "@vue/shared" "3.4.27"
 
+"@vue/compiler-ssr@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz#9ded18f6d9c8b2440039a58492cfff36fa1a7774"
+  integrity sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/shared" "3.4.38"
+
 "@vue/component-compiler-utils@^3.1.0":
   version "3.3.0"
   resolved "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz"
@@ -2173,11 +2241,16 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
+"@vue/devtools-api@^6.5.0":
   version "6.6.1"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz"
   integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
 
+"@vue/devtools-api@^6.6.3":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
+  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
+
 "@vue/eslint-config-standard@^8.0.1":
   version "8.0.1"
   resolved "https://registry.npmjs.org/@vue/eslint-config-standard/-/eslint-config-standard-8.0.1.tgz"
@@ -2199,44 +2272,50 @@
     "@typescript-eslint/parser" "^6.7.0"
     vue-eslint-parser "^9.3.1"
 
-"@vue/reactivity@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz"
-  integrity sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==
+"@vue/reactivity@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.38.tgz#ec2d549f4b831cd03d0baabf7d77e840b8536000"
+  integrity sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==
   dependencies:
-    "@vue/shared" "3.4.27"
+    "@vue/shared" "3.4.38"
 
-"@vue/runtime-core@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.27.tgz"
-  integrity sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==
+"@vue/runtime-core@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.38.tgz#bead9085e9a1c5a446e27d74ffb450f9261cf097"
+  integrity sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==
   dependencies:
-    "@vue/reactivity" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/reactivity" "3.4.38"
+    "@vue/shared" "3.4.38"
 
-"@vue/runtime-dom@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz"
-  integrity sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==
+"@vue/runtime-dom@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz#52678ba0b85f94400a0a9c8dd23ddef4dd65657d"
+  integrity sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==
   dependencies:
-    "@vue/runtime-core" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/reactivity" "3.4.38"
+    "@vue/runtime-core" "3.4.38"
+    "@vue/shared" "3.4.38"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.27.tgz"
-  integrity sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==
+"@vue/server-renderer@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.38.tgz#457401ef2b0f969156702061e56915acecc9fe2c"
+  integrity sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==
   dependencies:
-    "@vue/compiler-ssr" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/compiler-ssr" "3.4.38"
+    "@vue/shared" "3.4.38"
 
 "@vue/shared@3.4.27":
   version "3.4.27"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz"
   integrity sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==
 
-"@vueuse/core@^11.0.3":
+"@vue/shared@3.4.38":
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.38.tgz#552a6770098bfd556fa3e2c686c9d3b4f4cd94c2"
+  integrity sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==
+
+"@vueuse/core@11.0.3", "@vueuse/core@^11.0.3":
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-11.0.3.tgz#e5fb5aa6580c6e505cecea43518fcb66cb56a3ef"
   integrity sha512-RENlh64+SYA9XMExmmH1a3TPqeIuJBNNB/63GT35MZI+zpru3oMRUA6cEFr9HmGqEgUisurwGwnIieF6qu3aXw==
@@ -2246,6 +2325,15 @@
     "@vueuse/shared" "11.0.3"
     vue-demi ">=0.14.10"
 
+"@vueuse/integrations@^11.0.3":
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-11.0.3.tgz#38c91fe555175a382d43548138fca615fc42a4bf"
+  integrity sha512-w6CDisaxs19S5Fd+NPPLFaA3GoX5gxuxrbTTBu0EYap7oH13w75L6C/+7e9mcoF9akhcR6GyYajwVMQEjdapJg==
+  dependencies:
+    "@vueuse/core" "11.0.3"
+    "@vueuse/shared" "11.0.3"
+    vue-demi ">=0.14.10"
+
 "@vueuse/metadata@11.0.3":
   version "11.0.3"
   resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-11.0.3.tgz#f3f20066fb5217df24614de92162b65c24475e1b"
@@ -2790,6 +2878,24 @@ body-parser@1.20.1:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
+body-parser@1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
+  integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==
+  dependencies:
+    bytes "3.1.2"
+    content-type "~1.0.5"
+    debug "2.6.9"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    on-finished "2.4.1"
+    qs "6.11.0"
+    raw-body "2.5.2"
+    type-is "~1.6.18"
+    unpipe "1.0.0"
+
 bonjour-service@^1.0.11:
   version "1.2.1"
   resolved "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.2.1.tgz"
@@ -2932,9 +3038,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001578, caniuse-lite@^1.0.30001587:
-  version "1.0.30001591"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz"
-  integrity sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==
+  version "1.0.30001651"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz"
+  integrity sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -2963,6 +3069,11 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+change-case@^5:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-5.4.4.tgz#0d52b507d8fb8f204343432381d1a6d7bff97a02"
+  integrity sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.6.0"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
@@ -3157,7 +3268,7 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
-content-type@~1.0.4:
+content-type@~1.0.4, content-type@~1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
@@ -3190,6 +3301,11 @@ cookie@0.5.0, cookie@^0.5.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+cookie@0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
+  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
+
 copy-anything@^2.0.1:
   version "2.0.6"
   resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz"
@@ -3455,10 +3571,10 @@ date-fns@~2.30.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
-dayjs@^1.11.2:
-  version "1.11.10"
-  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz"
-  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+dayjs@^1.11.12:
+  version "1.11.12"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.12.tgz#5245226cc7f40a15bf52e0b99fd2a04669ccac1d"
+  integrity sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==
 
 debounce@^1.2.1:
   version "1.2.1"
@@ -3729,7 +3845,7 @@ encodeurl@~1.0.2:
   resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0, enhanced-resolve@^5.15.0, enhanced-resolve@^5.7.0:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.15.0, enhanced-resolve@^5.7.0:
   version "5.15.1"
   resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.1.tgz"
   integrity sha512-3d3JRbwsCLJsYgvb6NuWEG44jjPSOMuS73L/6+7BZuoKm3W+qXnSoIYVHi8dG7Qcg4inAY4jbzkZ7MnskePeDg==
@@ -3737,6 +3853,14 @@ enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0, enhanced-resolve@^5.15.0, enh
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
+enhanced-resolve@^5.17.1:
+  version "5.17.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
+  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enquirer@^2.3.5:
   version "2.4.1"
   resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz"
@@ -4043,7 +4167,7 @@ eslint-plugin-standard@~5.0.0:
   resolved "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-5.0.0.tgz"
   integrity sha512-eSIXPc9wBM4BrniMzJRBm2uoVuXz2EPa+NXPk2+itrVt+r5SbKFERx/IgrK/HmfjddyKVz2f+j+7gBRvu19xLg==
 
-eslint-plugin-vue@^9.16.1, eslint-plugin-vue@^9.20.1:
+eslint-plugin-vue@^9.16.1:
   version "9.22.0"
   resolved "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.22.0.tgz"
   integrity sha512-7wCXv5zuVnBtZE/74z4yZ0CM8AjH6bk4MQGm7hZjUC2DBppKU5ioeOk5LGSg/s9a1ZJnIsdPLJpXnu1Rc+cVHg==
@@ -4056,6 +4180,20 @@ eslint-plugin-vue@^9.16.1, eslint-plugin-vue@^9.20.1:
     vue-eslint-parser "^9.4.2"
     xml-name-validator "^4.0.0"
 
+eslint-plugin-vue@^9.27.0:
+  version "9.27.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz#c22dae704a03d9ecefa81364ff89f60ce0481f94"
+  integrity sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    globals "^13.24.0"
+    natural-compare "^1.4.0"
+    nth-check "^2.1.1"
+    postcss-selector-parser "^6.0.15"
+    semver "^7.6.0"
+    vue-eslint-parser "^9.4.3"
+    xml-name-validator "^4.0.0"
+
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
@@ -4294,7 +4432,7 @@ express-art-template@^1.0.1:
   resolved "https://registry.npmjs.org/express-art-template/-/express-art-template-1.0.1.tgz"
   integrity sha512-uHzOOO2uNHelEI520KBvGw0c7Lu4opa7iczkYgHe5AcN1MYEh1ovmis7BMwjyRiJIv2Zt3ovTMko5FiDb/ydWg==
 
-express@^4.17.3, express@^4.18.2:
+express@^4.17.3:
   version "4.18.2"
   resolved "https://registry.npmjs.org/express/-/express-4.18.2.tgz"
   integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
@@ -4331,6 +4469,43 @@ express@^4.17.3, express@^4.18.2:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
+express@^4.19.2:
+  version "4.19.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465"
+  integrity sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==
+  dependencies:
+    accepts "~1.3.8"
+    array-flatten "1.1.1"
+    body-parser "1.20.2"
+    content-disposition "0.5.4"
+    content-type "~1.0.4"
+    cookie "0.6.0"
+    cookie-signature "1.0.6"
+    debug "2.6.9"
+    depd "2.0.0"
+    encodeurl "~1.0.2"
+    escape-html "~1.0.3"
+    etag "~1.8.1"
+    finalhandler "1.2.0"
+    fresh "0.5.2"
+    http-errors "2.0.0"
+    merge-descriptors "1.0.1"
+    methods "~1.1.2"
+    on-finished "2.4.1"
+    parseurl "~1.3.3"
+    path-to-regexp "0.1.7"
+    proxy-addr "~2.0.7"
+    qs "6.11.0"
+    range-parser "~1.2.1"
+    safe-buffer "5.2.1"
+    send "0.18.0"
+    serve-static "1.15.0"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
+    type-is "~1.6.18"
+    utils-merge "1.0.1"
+    vary "~1.1.2"
+
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
@@ -4673,7 +4848,7 @@ globals@^11.1.0:
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.19.0, globals@^13.6.0, globals@^13.9.0:
+globals@^13.19.0, globals@^13.24.0, globals@^13.6.0, globals@^13.9.0:
   version "13.24.0"
   resolved "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
@@ -4823,10 +4998,10 @@ he@1.2.x, he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-highlight.js@^11.9.0:
-  version "11.9.0"
-  resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz"
-  integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
+highlight.js@^11.10.0:
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.10.0.tgz#6e3600dc4b33d6dc23d5bd94fbf72405f5892b92"
+  integrity sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==
 
 hosted-git-info@^2.1.4:
   version "2.8.9"
@@ -6379,6 +6554,11 @@ picocolors@^1.0.0:
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
@@ -6394,13 +6574,13 @@ pify@^4.0.1:
   resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pinia@^2.0.23:
-  version "2.1.7"
-  resolved "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz"
-  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+pinia@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.2.2.tgz#dcf576c9a778187d1542c5e6a9f8b8cd5b6aea14"
+  integrity sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==
   dependencies:
-    "@vue/devtools-api" "^6.5.0"
-    vue-demi ">=0.14.5"
+    "@vue/devtools-api" "^6.6.3"
+    vue-demi "^0.14.10"
 
 pkg-dir@^7.0.0:
   version "7.0.0"
@@ -6718,12 +6898,12 @@ postcss-nested-ancestors@^3.0.0:
     escape-string-regexp "^4.0.0"
     postcss-resolve-nested-selector "^0.1.1"
 
-postcss-nested@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz"
-  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
-    postcss-selector-parser "^6.0.11"
+    postcss-selector-parser "^6.1.1"
 
 postcss-nesting@^10.2.0:
   version "10.2.0"
@@ -6939,6 +7119,14 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.11, postcss-select
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-simple-vars@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz"
@@ -6987,7 +7175,7 @@ postcss@^7.0.36:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.11, postcss@^8.4.19, postcss@^8.4.24, postcss@^8.4.33, postcss@^8.4.38, postcss@~8.4.16:
+postcss@^8.3.11, postcss@^8.4.19, postcss@^8.4.24, postcss@^8.4.33, postcss@^8.4.38:
   version "8.4.38"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz"
   integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -6996,6 +7184,15 @@ postcss@^8.3.11, postcss@^8.4.19, postcss@^8.4.24, postcss@^8.4.33, postcss@^8.4
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+postcss@^8.4.40, postcss@^8.4.41:
+  version "8.4.41"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
+  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -7101,6 +7298,16 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-body@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+  dependencies:
+    bytes "3.1.2"
+    http-errors "2.0.0"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
@@ -7376,10 +7583,10 @@ sass-loader@^13.0.0, sass-loader@^13.0.2:
   dependencies:
     neo-async "^2.6.2"
 
-sass@^1.52.3:
-  version "1.71.1"
-  resolved "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz"
-  integrity sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==
+sass@^1.77.8:
+  version "1.77.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
+  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -7439,6 +7646,11 @@ semver@^7.0.0, semver@^7.2.1, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6, semve
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.6.3:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.npmjs.org/send/-/send-0.18.0.tgz"
@@ -8207,11 +8419,16 @@ typed-array-length@^1.0.4:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@5.4.5, typescript@^5.1.6, typescript@^5.3.2:
+typescript@^5.1.6, typescript@^5.3.2:
   version "5.4.5"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz"
   integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
+typescript@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz"
@@ -8345,16 +8562,11 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-vue-demi@>=0.14.10:
+vue-demi@>=0.14.10, vue-demi@^0.14.10:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
-vue-demi@>=0.14.5:
-  version "0.14.7"
-  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz"
-  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
-
 vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.2:
   version "9.4.2"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz"
@@ -8368,18 +8580,31 @@ vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
+  dependencies:
+    debug "^4.3.4"
+    eslint-scope "^7.1.1"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.1"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^7.3.6"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-i18n@^9.5.0:
-  version "9.9.1"
-  resolved "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.1.tgz"
-  integrity sha512-xyQ4VspLdNSPTKBFBPWa1tvtj+9HuockZwgFeD2OhxxXuC2CWeNvV4seu2o9+vbQOyQbhAM5Ez56oxUrrnTWdw==
+vue-i18n@^9.14.0:
+  version "9.14.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.14.0.tgz#d6f1b3d95bfc4f40e630ff9456c78ab5becfd933"
+  integrity sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==
   dependencies:
-    "@intlify/core-base" "9.9.1"
-    "@intlify/shared" "9.9.1"
+    "@intlify/core-base" "9.14.0"
+    "@intlify/shared" "9.14.0"
     "@vue/devtools-api" "^6.5.0"
 
 vue-loader-bk@^15.10.0:
@@ -8409,12 +8634,12 @@ vue-loader@^17.3.1:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
-vue-router@^4.1.6:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz"
-  integrity sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==
+vue-router@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.3.tgz#58a39dc804632bfb6d26f052aa8f6718bd130299"
+  integrity sha512-sv6wmNKx2j3aqJQDMxLFzs/u/mjA9Z5LCgy6BE0f7yFWMjrPLnS/sPNn8ARY/FXw6byV18EFutn5lTO6+UsV5A==
   dependencies:
-    "@vue/devtools-api" "^6.5.1"
+    "@vue/devtools-api" "^6.6.3"
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
@@ -8436,16 +8661,16 @@ vue-types@~4.1.1:
   dependencies:
     is-plain-object "5.0.0"
 
-vue@^3.4.27:
-  version "3.4.27"
-  resolved "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz"
-  integrity sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==
-  dependencies:
-    "@vue/compiler-dom" "3.4.27"
-    "@vue/compiler-sfc" "3.4.27"
-    "@vue/runtime-dom" "3.4.27"
-    "@vue/server-renderer" "3.4.27"
-    "@vue/shared" "3.4.27"
+vue@^3.4.38:
+  version "3.4.38"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.38.tgz#0ccbb64ed03ef3c4ab73e540793290b18e7c4236"
+  integrity sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.38"
+    "@vue/compiler-sfc" "3.4.38"
+    "@vue/runtime-dom" "3.4.38"
+    "@vue/server-renderer" "3.4.38"
+    "@vue/shared" "3.4.38"
 
 watchpack@^2.4.0:
   version "2.4.0"