feat: 1.14 体验问题修复 (#80)

* feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 在线调试开发 * feat: 1.14 在线调试 * feat: 1.14 在线调试 * feat: 日志剩余需求开发&编译器格式化等功能 * feat: 在线调试体验问题修复 * feat: 在线调试体验问题修复 * feat: 在线调试请求详情接口对接&资源列表接口替换&日志图表和下载参数修改 * feat: 在线调试体验问题修复 * feat: 1.14 版本开发
ielgnaw · Aug 8, 2024 · f8c1b02 · f8c1b02
1 parent cc37965
commit f8c1b02
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 68 deletions.
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
@@ -403,7 +403,12 @@ watch(
 watch(
   () => tableData.value,
   (v) => {
-    emit('change', v);
+    const list = v?.filter((item: any) => item.name);
+    emit('change', list);
+  },
+  {
+    deep: true,
+    immediate: true,
   },
 );
 
@@ -487,11 +492,31 @@ defineExpose({
                 height: 42px;
                 line-height: 42px;
                 border: 0;
+                &--text {
+                  padding: 0 16px;
+                }
+              }
+              .edit-input.bk-input {
+                &:hover {
+                  border: 1px solid #A3C5FD;
+                }
                 &.is-focused {
                   border: 1px solid #3A84FF;
                 }
-                &--text {
-                  padding: 0 16px;
+              }
+              .bk-select {
+                &:hover {
+                  border: 1px solid #A3C5FD;
+                }
+                &.is-focus {
+                  border: 1px solid #3A84FF;
+                }
+              }
+            }
+            &.is-error {
+              .bk-form-content {
+                .bk-input--text {
+                  background: #FFEEEE;
                 }
               }
             }

diff --git a/src/dashboard-front/src/views/online-debug/components/payload-body.vue b/src/dashboard-front/src/views/online-debug/components/payload-body.vue
@@ -3,18 +3,18 @@
     <div class="table-header">
       <div class="body-type">
         <div
-          :class="['body-type-item', type === 'data' ? 'active' : '']"
-          @click="type = 'data'">
+          :class="['body-type-item', type === 'fromData' ? 'active' : '']"
+          @click="handleTabChange('fromData')">
           form-data
         </div>
         <div
           :class="['body-type-item', type === 'urlencoded' ? 'active' : '']"
-          @click="type = 'urlencoded'">
+          @click="handleTabChange('urlencoded')">
           x-www-form-urlencoded
         </div>
         <div
           :class="['body-type-item', type === 'raw' ? 'active' : '']"
-          @click="type = 'raw'">
+          @click="handleTabChange('raw')">
           raw
         </div>
         <bk-select
@@ -45,14 +45,14 @@
         </div> -->
     </div>
     <edit-table
-      v-show="type === 'data'"
+      v-show="type === 'fromData'"
       ref="dataRef"
-      @change="handleDataChange"
+      @change="handleListChange"
       :list="fromDataList" />
     <edit-table
       v-show="type === 'urlencoded'"
       ref="urlencodedRef"
-      @change="handleUrlencodedChange"
+      @change="handleListChange"
       :list="urlencodedList" />
     <div class="raw-content" v-show="type === 'raw'">
       <editor-monaco
@@ -88,7 +88,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['dataChange', 'urlencodedChange']);
+const emit = defineEmits(['change']);
 
 const type = ref<string>('raw');
 const rawType = ref<string>('JSON');
@@ -137,12 +137,26 @@ const getData = () => {
   };
 };
 
-const handleDataChange = (list: any) => {
-  emit('dataChange', list);
+const handleListChange = (list: any) => {
+  const data = {
+    source: type.value,
+    list,
+  };
+  emit('change', data);
 };
 
-const handleUrlencodedChange = (list: any) => {
-  emit('urlencodedChange', list);
+const handleTabChange = (key: string) => {
+  type.value = key;
+
+  let list: any = [];
+  if (key === 'fromData') {
+    list = dataRef.value?.getTableData();
+  } else if (key === 'urlencoded') {
+    list = urlencodedRef.value?.getTableData();
+  }
+  list = list?.filter((item: any) => item.name);
+
+  handleListChange(list);
 };
 
 watch(

diff --git a/src/dashboard-front/src/views/online-debug/components/request-payload.vue b/src/dashboard-front/src/views/online-debug/components/request-payload.vue
@@ -8,36 +8,35 @@
       <template #label>
         <div :class="['tab-label', active?.includes('Body') ? 'active' : '']">
           <span class="title">Body</span>
-          <!-- <span class="count">{{ Number(dataList?.length + urlencodedList?.length) || 0 }}</span> -->
+          <span class="count">{{ bodyData?.list?.length || 0 }}</span>
         </div>
       </template>
       <payload-body
         ref="payloadBodyRef"
         :from-data-payload="schema.fromDataPayload"
         :raw-payload="schema.rawPayload"
-        @data-change="dataChange"
-        @urlencoded-change="urlencodedChange" />
+        @change="handleBodyChange"
+      />
     </bk-tab-panel>
     <bk-tab-panel label="Params" name="Params">
       <template #label>
         <div :class="['tab-label', active?.includes('Params') ? 'active' : '']">
           <span class="title">Params</span>
-          <span class="count">{{ Number(queryList?.length + pathList?.length) || 0 }}</span>
+          <span class="count">{{ queryList?.length }}</span>
         </div>
       </template>
       <payload-params
         :query-payload="schema.queryPayload"
         :path-payload="schema.pathPayload"
         :priority-path="schema.priorityPath"
         @query-change="queryChange"
-        @path-change="pathChange"
         ref="payloadParamsRef" />
     </bk-tab-panel>
     <bk-tab-panel label="Headers" name="Headers">
       <template #label>
         <div :class="['tab-label', active?.includes('Headers') ? 'active' : '']">
           <span class="title">Headers</span>
-          <span class="count">{{ headersList?.length || 0 }}</span>
+          <span class="count">{{ headersList?.length }}</span>
         </div>
       </template>
       <payload-headers
@@ -99,19 +98,14 @@ const queryChange = (list: any) => {
   queryList.value = list;
 };
 
-const pathList = ref<any>([]);
-const pathChange = (list: any) => {
-  pathList.value = list;
-};
-
-const dataList = ref<any>([]);
-const dataChange = (list: any) => {
-  dataList.value = list;
-};
+// const pathList = ref<any>([]);
+// const pathChange = (list: any) => {
+//   pathList.value = list;
+// };
 
-const urlencodedList = ref<any>([]);
-const urlencodedChange = (list: any) => {
-  urlencodedList.value = list;
+const bodyData = ref<any>({});
+const handleBodyChange = (data: any) => {
+  bodyData.value = data;
 };
 
 watch(
@@ -157,4 +151,4 @@ defineExpose({
     }
   }
 }
-</style>
+</style>
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
@@ -71,6 +71,7 @@
                   language="json"
                   :minimap="false"
                   :show-copy="true"
+                  :read-only="true"
                 />
                 <editor-monaco
                   v-else
@@ -79,6 +80,7 @@
                   language="json"
                   :minimap="false"
                   :show-copy="true"
+                  :read-only="true"
                 />
               </div>
             </template>

diff --git a/src/dashboard-front/src/views/online-debug/components/response-content.vue b/src/dashboard-front/src/views/online-debug/components/response-content.vue
@@ -90,15 +90,18 @@
                 />
               </bk-select>
             </div>
-            <div class="response-content">
-              <editor-monaco
-                v-model="editorText"
-                theme="Visual Studio"
-                ref="resourceEditorRef"
-                :minimap="false"
-                :show-copy="true"
-                :show-full-screen="true"
-              />
+            <div class="response-content" id="response-content">
+              <div class="response-editor-box">
+                <editor-monaco
+                  v-model="editorText"
+                  theme="Visual Studio"
+                  ref="resourceEditorRef"
+                  :minimap="false"
+                  :show-copy="true"
+                  :show-full-screen="true"
+                  :read-only="true"
+                />
+              </div>
             </div>
           </div>
         </template>
@@ -108,7 +111,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { AngleUpFill } from 'bkui-vue/lib/icon';
 import { useI18n } from 'vue-i18n';
 import editorMonaco from '@/components/ag-editor.vue';
@@ -122,7 +125,7 @@ const props = defineProps({
   },
 });
 
-const activeIndex = ref<number[]>([1]);
+const activeIndex = ref<number[]>([]);
 const tabActive = ref<string>('body');
 const responseType = ref<string>('JSON');
 const bodyTypeList = ref([
@@ -165,8 +168,30 @@ const setEditorValue = () => {
     editorText.value = data.value?.curl || '';
   }
   resourceEditorRef.value?.setValue(editorText.value);
+  activeIndex.value = [1];
 };
 
+const setHeight = () => {
+  const element = document.getElementById('response-content');
+
+  const resizeObserver = new ResizeObserver((entries: any) => {
+    for (const entry of entries) {
+      const { contentRect } = entry;
+
+      const box: any = document.querySelector('.response-editor-box');
+      if (box) {
+        box.style.height = `${contentRect?.height}px`;
+      }
+    }
+  });
+
+  resizeObserver.observe(element);
+};
+
+onMounted(() => {
+  setHeight();
+});
+
 watch(
   () => tabActive.value,
   () => {
@@ -188,6 +213,7 @@ watch(
 <style lang="scss" scoped>
 .response-container {
   padding-left: 24px;
+  height: 100%;
   .response-title {
     position: relative;
     .response-type {
@@ -238,23 +264,37 @@ watch(
   }
   .response-main {
     padding-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     .response-content-type {
       margin-bottom: 12px;
       .payload-type {
         margin-right: 8px;
       }
     }
     .response-content {
-      width: 100%;
-      height: 235px;
+      flex: 1;
+      overflow: hidden;
       background: #FFFFFF;
       border: 1px solid #DCDEE5;
       border-radius: 2px;
+      .response-editor-box {
+        height: 100%;
+        min-height: 100px;
+        max-height: 70vh;
+      }
     }
   }
   .bk-collapse-response {
+    height: 100%;
+    :deep(.bk-collapse-item) {
+      height: 100%;
+    }
     :deep(.bk-collapse-content) {
       padding: 0;
+      // flex: 1;
+      height: calc(100% - 72px);
     }
   }
 }

diff --git a/src/dashboard-front/src/views/online-debug/index.vue b/src/dashboard-front/src/views/online-debug/index.vue
@@ -257,6 +257,7 @@
         <bk-resize-layout
           class="request-resize"
           placement="top"
+          initial-divide="90%"
         >
           <template #aside>
             <div class="request-payload">
@@ -799,6 +800,11 @@ const handleSend = async (e: Event) => {
     isLoading.value = true;
     const res = await postAPITest(common.apigwId, data);
     response.value = res;
+
+    const aside: any = document.querySelector('.request-resize .bk-resize-layout-aside');
+    if (aside) {
+      aside.style.height = `${100}px`;
+    }
   } catch (e) {
     console.log(e);
   } finally {
@@ -1024,6 +1030,7 @@ watch(
 }
 .request-response {
   background: #FFFFFF;
+  height: 100%;
 }
 .my-menu {
   max-height: 100%;
@@ -1137,6 +1144,7 @@ watch(
   }
 }
 .request-resize {
+  flex: 1;
   :deep(.bk-resize-trigger:hover) {
     border-top: 2px solid #3a84ff;
   }
@@ -1151,7 +1159,9 @@ watch(
   height: 16px;
   line-height: 16px;
 }
-.fixed-w {
-  width: 88px;
+.resize-main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 </style>