From 4c986053cc301a81d94f2a6aa941c979bb9d1ed8 Mon Sep 17 00:00:00 2001
From: shuzhenyang <shuzhen.yang2@gientech.com>
Date: Fri, 25 Oct 2024 17:18:52 +0800
Subject: [PATCH] =?UTF-8?q?fix(online-debug):=20=E5=9C=A8=E7=BA=BF?=
 =?UTF-8?q?=E8=B0=83=E8=AF=95=E4=BD=93=E9=AA=8C=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(online-debug): 在线调试体验问题修复

optimized code
---
 .../src/components/ag-editor.vue              | 16 +++---
 src/dashboard-front/src/language/lang.ts      |  1 +
 .../online-debug/components/edit-table.vue    |  7 +++
 .../components/request-record.vue             | 19 ++++++-
 .../src/views/online-debug/index.vue          | 50 +++++++++++++++++--
 5 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/src/dashboard-front/src/components/ag-editor.vue b/src/dashboard-front/src/components/ag-editor.vue
index 9d2dc7486..17516e9eb 100644
--- a/src/dashboard-front/src/components/ag-editor.vue
+++ b/src/dashboard-front/src/components/ag-editor.vue
@@ -329,17 +329,21 @@ defineExpose({
 
 </script>
 <style scoped lang="scss">
-.codemirror,
-.monaco-editor {
-  width: 100%;
-  height: 100%;
-}
 .codemirror {
   position: relative;
+  width: 100%;
+  height: calc(100% - 26px);
+  .monaco-editor {
+    position: absolute;
+    top: 26px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
   .tools {
     position: absolute;
     top: 5px;
-    right: 28px;
+    right: 14px;
     display: flex;
     align-items: center;
     .tool-icon {
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index b3ade410d..13d29cac2 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -938,6 +938,7 @@ const lang: ILANG = {
   '发布时间：': ['Release Time:'],
   '你可能想进行以下操作：': ['You may want to perform the following actions:'],
   '在线调试 API 资源': ['Online debugging APIs'],
+  '至少需要保留一行！': ['You need to keep at least one line! '],
   '查看 API 文档': ['View api doc'],
   '为蓝鲸应用主动授权': ['Add permissions for app'],
   '生成 API 资源 SDK': ['Generate SDK'],
diff --git a/src/dashboard-front/src/views/online-debug/components/edit-table.vue b/src/dashboard-front/src/views/online-debug/components/edit-table.vue
index 89271f904..0f9b6c413 100644
--- a/src/dashboard-front/src/views/online-debug/components/edit-table.vue
+++ b/src/dashboard-front/src/views/online-debug/components/edit-table.vue
@@ -317,6 +317,13 @@ const addRow = (index: number) => {
 };
 
 const delRow = (index: number) => {
+  if (tableData.value.length === 1) {
+    Message({
+      theme: 'warning',
+      message: t('至少需要保留一行！'),
+    });
+    return;
+  }
   const row = tableData.value[index];
   checkedList.value = checkedList.value.filter(item => item.id !== row.id);
   tableData.value?.splice(index, 1);
diff --git a/src/dashboard-front/src/views/online-debug/components/request-record.vue b/src/dashboard-front/src/views/online-debug/components/request-record.vue
index 107f8aef2..48e1a9bb0 100644
--- a/src/dashboard-front/src/views/online-debug/components/request-record.vue
+++ b/src/dashboard-front/src/views/online-debug/components/request-record.vue
@@ -1,6 +1,6 @@
 <template>
   <bk-sideslider
-    v-model:isShow="isShow"
+    v-model:is-show="isShow"
     :title="t('调用历史')"
     :width="960"
     class="sutra-scrollbar"
@@ -44,6 +44,7 @@
             :data="tableList"
             :row-style="{ cursor: 'pointer' }"
             :show-overflow-tooltip="true"
+            :cell-class="getCellClass"
           >
             <bk-table-column :label="t('资源名称')" prop="resource_name"></bk-table-column>
             <bk-table-column :label="t('响应状态码')" prop="status_code">
@@ -122,6 +123,7 @@ const tableEmptyConf = reactive<any>({
   keyword: '',
   isAbnormal: false,
 });
+let expandIds: number[] = [];
 
 const updateTableEmptyConfig = () => {
   // if (!curPagination.value.count) {
@@ -177,6 +179,7 @@ const handleRowClick = async (e: Event, row: Record<string, any>) => {
     await getDetails(row.id, row);
   } else {
     row.isExpand = !row.isExpand;
+    expandIds = expandIds.filter((id: number) => id !== row.id);
     nextTick(() => {
       tableRef.value.setRowExpand(row,  row.isExpand);
     });
@@ -215,11 +218,19 @@ const getDetails = async (id: number, row: Record<string, any>) => {
 
   row.editorText = res?.response?.data?.curl;
   row.isExpand = !row.isExpand;
+  expandIds.push(id);
   nextTick(() => {
     tableRef.value.setRowExpand(row,  row.isExpand);
   });
 };
 
+const getCellClass = (_column: any, _index: number, row: any) => {
+  if (expandIds.includes(row.id)) {
+    return 'td-highlight-bg';
+  }
+  return '';
+};
+
 defineExpose({
   show,
 });
@@ -262,3 +273,9 @@ defineExpose({
   }
 }
 </style>
+
+<style>
+.td-highlight-bg {
+  background: #f5f7fa !important;
+}
+</style>
diff --git a/src/dashboard-front/src/views/online-debug/index.vue b/src/dashboard-front/src/views/online-debug/index.vue
index 57c67e9dd..6c9fc0bb3 100644
--- a/src/dashboard-front/src/views/online-debug/index.vue
+++ b/src/dashboard-front/src/views/online-debug/index.vue
@@ -31,7 +31,7 @@
             type="search"
           />
         </div>
-        <bk-collapse class="my-menu" v-model="activeName" v-if="Object.keys(resourceGroup).length">
+        <bk-collapse class="my-menu" v-model="activeName" v-if="resourceGroupLength">
           <template v-for="group of resourceGroup">
             <bk-collapse-panel
               v-if="group?.resources?.length"
@@ -79,7 +79,7 @@
       </div>
     </template>
     <template #main>
-      <div class="resize-main">
+      <div class="resize-main" v-show="resourceGroupLength">
         <div class="request-setting">
           <bk-collapse
             class="request-setting-collapse"
@@ -225,7 +225,7 @@
 
                             <div class="edit-user-tips">
                               <info-line class="icon" />
-                              <span class="tips">{{ t('默认测试应用，网关自动为其短期授权；自定义应用，需主动为应用授权资源访问权限') }}</span>
+                              <span class="tips">{{ t('默认用户认证，将默认从 Cookies 中获取用户认证信息；自定义用户认证，可自定义用户认证信息') }}</span>
                             </div>
                             <!-- <div class="edit-user-btns">
                           <bk-button theme="primary" @click="saveUserAuthEdit">{{ t('保存') }}</bk-button>
@@ -277,11 +277,20 @@
           </template>
         </bk-resize-layout>
       </div>
+
+      <div class="exception-part" v-show="!resourceGroupLength">
+        <bk-exception
+          class="exception-wrap-item"
+          :description="t('暂无数据')"
+          scene="part"
+          type="empty"
+        />
+      </div>
     </template>
   </bk-resize-layout>
 
   <!-- 查看文档侧栏 -->
-  <bk-sideslider v-model:isShow="isShowDoc" :width="960" quick-close>
+  <bk-sideslider v-model:is-show="isShowDoc" :width="960" quick-close>
     <template #header>
       <div class="custom-side-header">
         <div class="title">{{ t('查看文档详情') }}</div>
@@ -289,7 +298,7 @@
         <div class="subtitle">{{ curResource?.name }}</div>
 
         <div class="opt-btns">
-          <share class="opt-share" />
+          <share class="opt-share" v-show="curResource?.is_public" @click="openTab(curResource?.name)" />
           <close-line class="opt-close" @click="isShowDoc = false" />
         </div>
       </div>
@@ -312,6 +321,7 @@ import responseContent from '@/views/online-debug/components/response-content.vu
 import doc from '@/views/online-debug/components/doc.vue';
 import TableEmpty from '@/components/table-empty.vue';
 import { useCommon } from '@/store';
+import { useRouter } from 'vue-router';
 import { Message } from 'bkui-vue';
 import {
   getStages,
@@ -324,6 +334,7 @@ import {
 
 const { t } = useI18n();
 const common = useCommon();
+const router = useRouter();
 
 const isLoading = ref<boolean>(false);
 const keyword = ref<string>('');
@@ -542,6 +553,10 @@ const resourceGroup = computed(() => {
   return group;
 });
 
+const resourceGroupLength = computed(() => {
+  return Object.keys(resourceGroup.value)?.length;
+});
+
 const getItemName = (item: any) => {
   if (!['unreleased', 'failure'].includes(item?.release?.status)) {
     return item.name;
@@ -844,6 +859,21 @@ const viewDoc = (e: Event) => {
   isShowDoc.value = true;
 };
 
+const openTab = (name?: string) => {
+  if (!name) {
+    return;
+  }
+  const routeData = router.resolve({
+    name: 'apiDocDetail',
+    params: {
+      curTab: 'apigw',
+      targetName: common?.apigwName,
+      componentName: name,
+    },
+  });
+  window.open(routeData.href, '_blank');
+};
+
 const init = async () => {
   await getApigwDetail();
   getApigwStages();
@@ -1198,4 +1228,14 @@ watch(
   flex-direction: column;
   height: 100%;
 }
+.exception-part {
+  background-color: #fff;
+  height: 100%;
+  margin: 24px;
+  box-sizing: border-box;
+  .exception-wrap-item {
+    height: 100%;
+    justify-content: center;
+  }
+}
 </style>