fix(json-schema): 问题修复

frontend/src/assets/style/global.less

@@ -159,11 +159,15 @@ body {
   color: var(--color-text-1);
 }
 .ms-params-popover-value {
+  @apply overflow-y-auto;
+  .ms-scroll-bar();
+
   min-width: 100px;
   max-width: 280px;
+  max-height: 300px;
   font-size: 12px;
-  line-height: 16px;
   color: var(--color-text-1);
+  line-height: 16px;
 }
 
 /* 表格必填按钮 button */

frontend/src/components/pure/ms-form-table/index.vue

@@ -229,7 +229,7 @@
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import type { MsTableColumnData } from '@/components/pure/ms-table/type';
+  import type { MsTableColumnData, MsTableProps } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
@@ -332,7 +332,7 @@
     }
   }
 
-  const { propsRes, propsEvent } = useTable(() => Promise.resolve([]), {
+  const tableProps = ref<Partial<MsTableProps<Record<string, any>>>>({
     firstColumnWidth: 32,
     tableKey: props.showSetting ? props.tableKey : undefined,
     scroll: props.scroll,
@@ -346,6 +346,8 @@
     showPagination: false,
     rowSelection: props.selectable ? undefined : props.rowSelection,
   });
+
+  const { propsRes, propsEvent } = useTable(() => Promise.resolve([]), tableProps.value);
   const selectedKeys = computed(() => propsRes.value.data.filter((e) => e.enable).map((e) => e.id));
   propsEvent.value.rowSelectChange = (record: Record<string, any>) => {
     propsRes.value.data = propsRes.value.data.map((e) => {

frontend/src/components/pure/ms-json-schema/index.vue

@@ -309,6 +309,7 @@
     :width="600"
     :title="t('ms.json.schema.advancedSettings')"
     :ok-text="t('common.save')"
+    :footer="!props.disabled"
     @confirm="applySetting"
   >
     <a-form ref="setting" :model="activeRecord" :disabled="props.disabled" layout="vertical">
@@ -606,6 +607,7 @@
       width: 32,
     };
   });
+
   // 初始化根节点
   watchEffect(() => {
     if (data.value.length === 0) {

frontend/src/views/api-test/components/requestComposition/body.vue

@@ -96,7 +96,7 @@
               ? 'font-medium !text-[rgb(var(--primary-5))]'
               : '!text-[var(--color-text-4)]'
           "
-          @click="innerParams.jsonBody.enableJsonSchema = true"
+          @click="handleChangeJsonType('Schema')"
           >Schema</MsButton
         >
         <a-divider :margin="0" direction="vertical"></a-divider>
@@ -108,7 +108,7 @@
               ? 'font-medium !text-[rgb(var(--primary-5))]'
               : '!text-[var(--color-text-4)]'
           "
-          @click="innerParams.jsonBody.enableJsonSchema = false"
+          @click="handleChangeJsonType('Json')"
           >Json</MsButton
         >
       </div>
@@ -147,11 +147,12 @@
     >
       <template #rightTitle>
         <a-button
-          v-if="innerParams.bodyType === RequestBodyFormat.JSON"
+          v-if="
+            innerParams.bodyType === RequestBodyFormat.JSON && !props.disabledExceptParam && !props.disabledParamValue
+          "
           type="outline"
           class="arco-btn-outline--secondary p-[0_8px]"
           size="mini"
-          :disabled="props.disabledExceptParam || props.disabledParamValue"
           @click="autoMakeJson"
         >
           <div class="text-[var(--color-text-1)]">{{ t('apiTestManagement.autoMake') }}</div>
@@ -465,6 +466,13 @@
     innerParams.value.bodyType = val;
     emit('change');
   }
+
+  function handleChangeJsonType(type: 'Schema' | 'Json') {
+    innerParams.value.jsonBody.enableJsonSchema = type === 'Schema';
+    if (!props.disabledExceptParam && !props.disabledParamValue && innerParams.value.jsonBody.jsonValue === '') {
+      autoMakeJson();
+    }
+  }
 </script>
 
 <style lang="less" scoped></style>

frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue

@@ -215,7 +215,7 @@
           class="sticky-content no-content relative top-0 mx-[16px] border-b"
           @tab-click="requestTabClick"
         />
-        <div :class="`request-content-and-response ${activeLayout}`">
+        <div v-if="visible" :class="`request-content-and-response ${activeLayout}`">
           <a-spin class="request block h-full w-full" :loading="requestVModel.executeLoading || loading">
             <div class="request-tab-pane flex flex-col p-[16px]">
               <a-spin

frontend/src/views/api-test/scenario/components/step/stepTree.vue

@@ -457,6 +457,7 @@
   import { cloneDeep } from 'lodash-es';
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
+  import { parseTableDataToJsonSchema } from '@/components/pure/ms-json-schema/utils';
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
   import MsTree from '@/components/business/ms-tree/index.vue';
@@ -1244,7 +1245,18 @@
       }
       if (realStep && !realStep.isQuoteScenarioStep) {
         request.isNew = false;
-        stepDetails.value[realStep.id] = request;
+        stepDetails.value[realStep.id] = {
+          ...request,
+          body: {
+            ...request.body,
+            jsonBody: {
+              ...request.body.jsonBody,
+              jsonSchema: request.body.jsonBody.jsonSchemaTableData
+                ? parseTableDataToJsonSchema(request.body.jsonBody.jsonSchemaTableData[0])
+                : undefined,
+            },
+          },
+        };
         scenario.value.stepFileParam[realStep?.id] = {
           linkFileIds: request.linkFileIds,
           uploadFileIds: request.uploadFileIds,

frontend/src/views/api-test/scenario/index.vue

@@ -112,6 +112,7 @@
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
   import MsEnvironmentSelect from '@/components/business/ms-environment-select/index.vue';
+  import { RequestParam } from './components/common/customApiDrawer.vue';
   import scenarioModuleTree from './components/scenarioModuleTree.vue';
   import executeButton from '@/views/api-test/components/executeButton.vue';
   import ScenarioTable from '@/views/api-test/scenario/components/scenarioTable.vue';
@@ -530,6 +531,33 @@
     apiTableRef.value?.loadScenarioList();
   }
 
+  function getStepDetails() {
+    const stepDetails: Record<string, ScenarioStepDetails> = {};
+    activeScenarioTab.value.steps.forEach((step) => {
+      const currentDetail = activeScenarioTab.value.stepDetails[step.id] as RequestParam;
+      if (
+        currentDetail &&
+        [ScenarioStepType.API, ScenarioStepType.API_CASE, ScenarioStepType.CUSTOM_REQUEST].includes(step.stepType)
+      ) {
+        // 接口类型需要处理 json-schema 的循环引用
+        stepDetails[step.id] = {
+          ...currentDetail,
+          body: {
+            ...currentDetail.body,
+            jsonBody: {
+              ...currentDetail.body.jsonBody,
+              jsonSchema: currentDetail.body.jsonBody.jsonSchema,
+              jsonSchemaTableData: [], // 原树形结构存在循环引用，这里要去掉以免 axios 序列化失败
+            },
+          },
+        };
+      } else {
+        stepDetails[step.id] = activeScenarioTab.value.stepDetails[step.id];
+      }
+    });
+    return stepDetails;
+  }
+
   async function realSaveScenario() {
     try {
       saveLoading.value = true;
@@ -537,6 +565,7 @@
       if (activeScenarioTab.value.isNew) {
         const res = await addScenario({
           ...activeScenarioTab.value,
+          stepDetails: getStepDetails(),
           steps: mapTree(activeScenarioTab.value.steps, (node) => {
             return {
               ...node,