feat(doc-detail): 新增文档详情页网关SDK展示

TencentBlueKing · Oct 31, 2024 · cff7885 · cff7885
1 parent 56b990f
commit cff7885
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 87 deletions.
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -1667,6 +1667,7 @@ const lang: ILANG = {
   '暂无版本': ['No Version'],
   '待发布（{version}）': ['To Be Published({version})'],
   '删除操作无法撤回，请谨慎操作': ['Deletion can\'t be reverted, please be cautious'],
+  '默认分类': ['Default'],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })

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
@@ -30,64 +30,25 @@
           <header class="content-title">{{ t('网关访问地址') }}</header>
           <main class="content-main">{{ basics.api_url }}</main>
         </article>
+        <!--  网关 SDK 信息  -->
         <template v-if="userStore.featureFlags?.ENABLE_SDK">
           <article>
             <header class="content-title">{{ t('网关 SDK') }}</header>
-            <LangSelector :width="90" :margin-bottom="12" @select="handleLangSelect"></LangSelector>
+            <LangSelector
+              v-model="language"
+              :sdk-languages="sdks.map(item => item.language)"
+              :width="90"
+              :margin-bottom="12"
+            />
+            <main class="content-main">
+              <SdkDetail v-if="curSdk" :sdk="curSdk" is-apigw />
+              <p v-else class="ag-tip mt5">
+                {{ t('SDK未生成，可联系负责人生成SDK') }}
+              </p>
+            </main>
           </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">
@@ -106,7 +67,7 @@
             <bk-tag class="ml20 fw-normal" theme="info">Python</bk-tag>
           </header>
           <main class="content-main">
-            <SdkDetail :sdk="sdks[0]"></SdkDetail>
+            <SdkDetail :sdk="sdks[0]" />
           </main>
         </article>
       </div>
@@ -118,13 +79,14 @@
 import {
   computed,
   inject,
+  ref,
   Ref,
   toRefs,
+  watchEffect,
 } 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,
@@ -156,12 +118,10 @@ const {
   sdks,
 } = toRefs(props);
 
-const emit = defineEmits<{
-  'lang-change': [language: LanguageType]
-}>();
-
 const userStore = useUser();
 
+const language = ref<LanguageType>('python');
+
 const curUser = computed(() => userStore?.user);
 const userList = computed(() => {
   // 去重
@@ -174,13 +134,13 @@ const userList = computed(() => {
 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 curSdk = computed(() => {
+  return sdks.value.find(item => item.language === language.value) ?? null;
+});
 
-const handleLangSelect = (language: LanguageType) => {
-  emit('lang-change', language);
-};
+watchEffect(() => {
+  language.value = sdks.value[0]?.language || 'python';
+});
 
 </script>
 

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
@@ -14,7 +14,7 @@
           :sdk-languages="sdks.map(item => item.language)"
           :lang-list="languages"
         />
-        <SdkDetail :sdk="curSdk" is-apigw></SdkDetail>
+        <SdkDetail :sdk="curSdk" is-apigw />
       </div>
     </main>
   </bk-dialog>
@@ -26,6 +26,7 @@ import {
   defineModel,
   ref,
   toRefs,
+  watchEffect,
 } from 'vue';
 import LangSelector from '@/views/apiDocs/components/lang-selector.vue';
 import {
@@ -65,6 +66,10 @@ const title = computed(() => {
   return targetName.value ? t('{name} SDK', { name: targetName.value }) : t('查看 SDK');
 });
 
+watchEffect(() => {
+  language.value = sdks.value[0]?.language || 'python';
+});
+
 </script>
 
 <style scoped lang="scss">

diff --git a/src/dashboard-front/src/views/apiDocs/doc-detail.vue b/src/dashboard-front/src/views/apiDocs/doc-detail.vue
@@ -168,8 +168,7 @@
               <DocDetailSideContent
                 :basics="curTargetBasics"
                 :sdks="sdks"
-                @lang-change="handleLangChange"
-              ></DocDetailSideContent>
+              />
             </main>
           </aside>
         </template>
@@ -197,7 +196,6 @@ import {
 import {
   getApigwResourceDocDocs,
   getApigwResourcesDocs,
-  getApigwSDKDocs,
   getApigwStagesDocs,
   getComponenSystemDetail,
   getComponentSystemList,
@@ -216,7 +214,6 @@ import {
   IStage,
   IBoard,
   ISystemBasics,
-  LanguageType,
   TabType,
   ISystem,
 } from '@/views/apiDocs/types';
@@ -309,7 +306,9 @@ const allSystemList = computed(() => {
 const fetchTargetBasics = async () => {
   try {
     if (curTab.value === 'apigw') {
-      curTargetBasics.value = await getGatewaysDetailsDocs(curTargetName.value);
+      const { sdks: sdksResponse, ...restResponse } = await getGatewaysDetailsDocs(curTargetName.value);
+      curTargetBasics.value = restResponse;
+      sdks.value = sdksResponse;
     } else if (curTab.value === 'component') {
       curTargetBasics.value = await getComponenSystemDetail(board.value, curTargetName.value);
     }
@@ -318,28 +317,18 @@ const fetchTargetBasics = async () => {
   }
 };
 
-const fetchSdks = async (language: LanguageType = 'python') => {
+const fetchEsbSdks = async () => {
+  if (curTab.value !== 'component') {
+    return;
+  }
   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 }] : [];
-    }
+    const response = await getESBSDKDetail(board.value, { language: 'python' });
+    sdks.value = [{ language: 'python', ...response }];
   } catch {
     sdks.value = [];
   }
 };
 
-const handleLangChange = async (language: LanguageType) => {
-  await fetchSdks(language);
-};
-
 const fetchApigwStages = async () => {
   try {
     const query = {
@@ -491,7 +480,7 @@ const init = async () => {
   }
   await Promise.all([
     fetchTargetBasics(),
-    fetchSdks(),
+    fetchEsbSdks(),
     fetchApiList(),
   ]);
   if (curTab.value === 'component') {