fix: 修复新版导航体验问题 (#898)

# Reviewed, transaction id: 17978

src/dashboard-front/src/language/lang.ts

@@ -1612,6 +1612,10 @@ const lang: ILANG = {
   '未匹配到资源': ['Resource not matched'],
   '启用 WebSocket': ['Enable WebSocket'],
   '启用 WebSocket：': ['Enable WebSocket: '],
+  '网关详情': ['Gateway detail'],
+  '组件详情': ['Component detail'],
+  'API列表': ['API list'],
+  '权限申请': ['Permission application'],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })

src/dashboard-front/src/router/index.ts

@@ -322,7 +322,7 @@ const routes: RouteRecordRaw[] = [
     component: docsComponent,
     children: [
       {
-        path: 'apigw-api/:curTab?',
+        path: 'api-docs/:curTab?',
         name: 'apiDocs',
         component: ApiDocs,
         meta: {
@@ -334,7 +334,7 @@ const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: ':curTab/:targetName/:componentName?',
+        path: 'api-docs/:curTab/:targetName/:componentName?',
         name: 'apiDocDetail',
         component: APIDocDetail,
         meta: {

src/dashboard-front/src/views/apiDocs/components/component-searcher.vue

@@ -1,7 +1,7 @@
 <template>
   <!--  组件搜索器  -->
   <div class="searcher">
-    <bk-dropdown ref="dropdown" :popover-options="popoverOptions">
+    <bk-dropdown ref="dropdown" :popover-options="popoverOptions" :disabled="curVersionList.length < 2">
       <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>

src/dashboard-front/src/views/apiDocs/components/doc-detail-main-content.vue

@@ -100,18 +100,18 @@ const props = withDefaults(defineProps<IProps>(), {
   updatedTime: () => null,
 });
 
+// 注入当前的总 tab 变量
+const curTab = inject<Ref<TabType>>('curTab');
+
+const emit = defineEmits(['show-sdk-instruction']);
+
 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);
 
@@ -133,6 +133,18 @@ const userVerifiedTooltips = computed(() => {
   return '--';
 });
 
+watch(markdownHtml, () => {
+  initMarkdownHtml('resMarkdown');
+});
+
+// 切换 api 时滚动到顶部
+watch(api, () => {
+  if (y.value === 0) return;
+  nextTick(() => {
+    y.value = 0;
+  });
+});
+
 const initMarkdownHtml = (box: string) => {
   nextTick(() => {
     const markdownDom = document.getElementById(box);
@@ -175,18 +187,6 @@ 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">

src/dashboard-front/src/views/apiDocs/components/sdk-instruction-content.vue

@@ -1,7 +1,15 @@
 <template>
   <!--  SDK使用说明 Slider 的内容  -->
   <div class="sdk-wrapper">
-    <LangSelector v-model="language" :margin-bottom="0" @select="handleLangSelect"></LangSelector>
+    <LangSelector
+      v-if="curTab === 'apigw'"
+      v-model="language"
+      :margin-bottom="0"
+      @select="handleLangSelect"
+    />
+    <div v-else class="bk-button-group">
+      <bk-button class="is-selected" style="width: 150px">Python</bk-button>
+    </div>
     <!-- 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

src/dashboard-front/src/views/apiDocs/doc-detail.vue

@@ -301,7 +301,8 @@ const fetchApigwStages = async () => {
       offset: 0,
     };
     stageList.value = await getApigwStagesDocs(curTargetName.value, query);
-    curStageName.value = stageList.value[0]?.name ?? '';
+    const prodStage = stageList.value.find(stage => stage.name === 'prod');
+    curStageName.value = prodStage?.name || stageList.value[0]?.name || '';
   } catch {
     stageList.value = [];
   }

src/dashboard-front/src/views/apiDocs/index.vue

@@ -106,6 +106,8 @@
                   <bk-button
                     text
                     theme="primary"
+                    :disabled="!row.sdks?.length"
+                    v-bk-tooltips="{ content: t('SDK未生成，可联系负责人生成SDK'), disabled: row.sdks?.length }"
                     @click="handleSdkDetailClick(row)"
                   >
                     {{ t('查看 SDK') }}
@@ -165,7 +167,7 @@
                 v-for="cat in systemBoard.categories"
                 :key="cat.id"
                 :data-_nav-id="`${systemBoard.board}-${cat.id}`"
-                :ref="catRefs.set"
+                :ref="categoryRefs.set"
               >
                 <header class="group-title">
                   <span class="name">{{ cat.name }}</span>
@@ -225,7 +227,7 @@
                       v-for="cat in systemBoard.categories"
                       :key="cat.id"
                       class="panel-content-cat-item"
-                      :class="{ 'active': curCatNavId === cat._navId }"
+                      :class="{ 'active': curCategoryNavId === cat._navId }"
                       @click="handleNavClick(cat)"
                     >{{ cat.name }}
                     </article>
@@ -293,6 +295,8 @@ const {
   getList,
 } = useQueryList(getGatewaysDocs, filterData, null, true);
 
+// 组件分类模板引用列表
+const categoryRefs = useTemplateRefsList<HTMLElement>();
 
 // 当前视口高度能展示最多多少条表格数据
 const maxTableLimit = ref(10);
@@ -312,17 +316,24 @@ const tableEmptyConf = ref<{ keyword: string, isAbnormal: boolean }>({
 const curTab = ref<TabType>('apigw');
 const curTargetName = ref('');
 const board = ref('default');
-const curCatNavId = ref('');
+const curCategoryNavId = ref('');
 const navPanelNamesList = ref<string[]>([]);
-
-const catRefs = useTemplateRefsList<HTMLElement>();
+const isSdkInstructionSliderShow = ref(false);
+const isSdkDetailDialogShow = ref(false);
+const componentSystemList = ref<IBoard[]>([]); // 组件系统列表
+const curSdks = ref<ISdk[]>([]);
 
 // 提供当前 tab 的值
 // 注入时请使用：const curTab = inject<Ref<TabType>>('curTab');
 provide('curTab', curTab);
 
-const isSdkInstructionSliderShow = ref(false);
-const isSdkDetailDialogShow = ref(false);
+watch(
+  tableData,
+  () => {
+    updateTableEmptyConfig();
+  },
+  { deep: true },
+);
 
 const gotoDetails = (row: IApiGatewayBasics | ISystem) => {
   router.push({
@@ -357,8 +368,6 @@ const updateTableEmptyConfig = () => {
   tableEmptyConf.value.keyword = '';
 };
 
-const componentSystemList = ref<IBoard[]>([]);
-
 const fetchComponentSystemList = async () => {
   try {
     const res = await getComponentSystemList(board.value) as IBoard[];
@@ -377,30 +386,19 @@ const fetchComponentSystemList = async () => {
 
 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' });
+  curCategoryNavId.value = _navId;
+  const categoryRef = categoryRefs.value.find(item => item.dataset?._navId === _navId);
+  if (categoryRef?.scrollIntoView) {
+    categoryRef.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