chore: 整理代码

# Reviewed, transaction id: 17474
ielgnaw · Sep 5, 2024 · e9075f5 · e9075f5
1 parent befdff2
commit e9075f5
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 44 deletions.
diff --git a/src/dashboard-front/src/views/apiDocs/components/component-searcher.vue b/src/dashboard-front/src/views/apiDocs/components/component-searcher.vue
@@ -1,6 +1,6 @@
 <template>
   <!--  组件搜索器  -->
-  <div class="searcher" v-if="curVersionList.length">
+  <div class="searcher">
     <bk-dropdown ref="dropdown" :popover-options="popoverOptions">
       <div class="dropdown-trigger-btn">
         <span>{{ curVersion.board_label }}</span>
@@ -124,7 +124,7 @@ const hightlightSystemName = (node: any) => {
 
 const triggerHandler = (version: any) => {
   curVersion.value = version;
-  dropdown?.value?.hide && dropdown.value.hide();
+  dropdown.value?.hide?.();
 };
 // 跳转指定组件
 const handleShowDoc = (version: any) => {
@@ -142,7 +142,7 @@ const handleSearch = async () => {
   try {
     isLoading.value = true;
     selectIndex.value = 0;
-    const curKeyword = keyword.value ? keyword.value : '';
+    const curKeyword = keyword.value || '';
     const curBoard = curVersion.value.board;
     const res = await searchAPI(curBoard, '-', { keyword: curKeyword });
     isLoading.value = false;
@@ -154,17 +154,15 @@ const handleSearch = async () => {
 const handleKeyup = (e: any) => {
   const curKeyCode = e.keyCode;
   const curLength = resultList.value.length;
-
+  e.preventDefault();
   switch (curKeyCode) {
     // 上
     case 38:
-      e.preventDefault();
       if (selectIndex.value === -1 || selectIndex.value === 0) {
         selectIndex.value = curLength - 1;
         searchListContainer.value.scrollTop = searchListContainer.value.scrollHeight;
       } else {
-        // eslint-disable-next-line no-plusplus
-        selectIndex.value--;
+        selectIndex.value -= 1;
         nextTick(() => {
           const curSelectNode = searchListContainer.value.querySelector('li.cur');
           const { offsetTop } = curSelectNode;
@@ -176,10 +174,8 @@ const handleKeyup = (e: any) => {
       break;
     // 下
     case 40:
-      e.preventDefault();
       if (selectIndex.value < curLength - 1) {
-        // eslint-disable-next-line no-plusplus
-        selectIndex.value++;
+        selectIndex.value += 1;
         nextTick(() => {
           const curSelectNode = searchListContainer.value.querySelector('li.cur');
           const { offsetTop } = curSelectNode;
@@ -195,11 +191,8 @@ const handleKeyup = (e: any) => {
       }
       break;
     case 13:
-      e.preventDefault();
-      // eslint-disable-next-line no-case-declarations
-      const curSelectIndex: any = selectIndex.value;
-      if (resultList[curSelectIndex as keyof typeof resultList]) {
-        handleShowDoc(resultList[curSelectIndex as keyof typeof resultList]);
+      if (resultList.value[selectIndex.value]) {
+        handleShowDoc(resultList.value[selectIndex.value]);
       }
       break;
     default:

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
@@ -2,8 +2,8 @@
   <!--  页面右侧的网关详情/组件详情  -->
   <div v-if="basics" class="intro-side-content-wrap">
     <header class="intro-header">
-      <main v-if="curTab === 'apigw'" class="title">{{ t('网关详情') }}</main>
-      <main v-else-if="curTab === 'component'" class="title">{{ t('组件详情') }}</main>
+      <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"
@@ -18,15 +18,23 @@
     </header>
     <main v-if="curTab === 'apigw'" class="component-content">
       <div class="ag-markdown-view" id="markdown">
-        <header class="content-title">{{ t('网关描述') }}</header>
-        <main class="content-main">{{ basics.description }}</main>
-        <header class="content-title">{{ t('网关负责人') }}</header>
-        <main class="content-main">{{ basics.maintainers.join(', ') }}</main>
-        <header class="content-title">{{ t('网关访问地址') }}</header>
-        <main class="content-main">{{ basics.api_url }}</main>
+        <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">
-          <header class="content-title">{{ t('网关 SDK') }}</header>
-          <LangSelector :width="90" :margin-bottom="12" @select="handleLangSelect"></LangSelector>
+          <article>
+            <header class="content-title">{{ t('网关 SDK') }}</header>
+            <LangSelector :width="90" :margin-bottom="12" @select="handleLangSelect"></LangSelector>
+          </article>
         </template>
       </div>
 
@@ -84,17 +92,23 @@
 
     <main v-else-if="curTab === 'component'" class="component-content">
       <div class="ag-markdown-view">
-        <header class="content-title">{{ t('网关描述') }}</header>
-        <main class="content-main">{{ basics.comment }}</main>
-        <header class="content-title">{{ t('网关负责人') }}</header>
-        <main class="content-main">{{ basics.maintainers.join(', ') }}</main>
-        <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>
+          <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>

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
@@ -74,8 +74,7 @@ const md = new MarkdownIt({
 
 const initMarkdownHtml = (content: string) => {
   markdownHtml.value = md.render(content);
-  // eslint-disable-next-line no-plusplus
-  renderHtmlIndex.value++;
+  renderHtmlIndex.value += 1;
   nextTick(() => {
     const markdownDom = document.getElementById('markdown');
 
@@ -156,8 +155,7 @@ const init = async () => {
 watch(
   () => curTab.value,
   () => {
-    // eslint-disable-next-line no-plusplus
-    renderKey.value++;
+    renderKey.value += 1;
     init();
   },
   { immediate: true, deep: true },

diff --git a/src/dashboard-front/src/views/apiDocs/doc-detail.vue b/src/dashboard-front/src/views/apiDocs/doc-detail.vue
@@ -420,9 +420,11 @@ const init = async () => {
   if (curTab.value === 'apigw') {
     await fetchApigwStages();
   }
-  await fetchTargetBasics();
-  await fetchSdks();
-  await fetchApiList();
+  await Promise.all([
+    fetchTargetBasics(),
+    fetchSdks(),
+    fetchApiList(),
+  ]);
   if (curTab.value === 'component') {
     await fetchBoardList();
   }

diff --git a/src/dashboard-front/src/views/apiDocs/index.vue b/src/dashboard-front/src/views/apiDocs/index.vue
@@ -153,7 +153,7 @@
                   {{ t('下载 SDK') }}
                 </bk-link>
               </main>
-              <aside>
+              <aside v-if="componentSystemList.length > 0">
                 <ComponentSearcher class="ag-searcher-box" :version-list="componentSystemList"></ComponentSearcher>
               </aside>
             </header>