diff --git a/backend/src/main/java/io/metersphere/api/controller/ShareInfoController.java b/backend/src/main/java/io/metersphere/api/controller/ShareInfoController.java
index a9e5a831e7..0cc9b81a5f 100644
--- a/backend/src/main/java/io/metersphere/api/controller/ShareInfoController.java
+++ b/backend/src/main/java/io/metersphere/api/controller/ShareInfoController.java
@@ -9,9 +9,11 @@ import io.metersphere.api.service.ShareInfoService;
 import io.metersphere.base.domain.ApiDefinitionWithBLOBs;
 import io.metersphere.base.domain.ReportStatisticsWithBLOBs;
 import io.metersphere.base.domain.ShareInfo;
+import io.metersphere.base.domain.User;
 import io.metersphere.commons.utils.LogUtil;
 import io.metersphere.reportstatistics.dto.ReportStatisticsSaveRequest;
 import io.metersphere.reportstatistics.service.ReportStatisticsService;
+import io.metersphere.service.UserService;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
@@ -34,6 +36,8 @@ public class ShareInfoController {
     ApiDefinitionService apiDefinitionService;
     @Resource
     ReportStatisticsService reportStatisticsService;
+    @Resource
+    UserService userService;
 
     @PostMapping("/selectApiSimpleInfo")
     public List<ApiDocumentInfoDTO> list(@RequestBody ApiDocumentRequest request) {
@@ -53,6 +57,7 @@ public class ShareInfoController {
             //要根据ids的顺序进行返回排序
             List<ApiDefinitionWithBLOBs> apiModels = apiDefinitionService.getBLOBs(request.getApiIdList());
             Map<String, ApiDefinitionWithBLOBs> apiModelMaps = apiModels.stream().collect(Collectors.toMap(ApiDefinitionWithBLOBs::getId, a -> a, (k1, k2) -> k1));
+            Map<String, User> userIdMap = userService.queryName();
             for (String id : request.getApiIdList()) {
                 ApiDefinitionWithBLOBs model = apiModelMaps.get(id);
                 if (model == null) {
@@ -60,7 +65,7 @@ public class ShareInfoController {
                     model.setId(id);
                     model.setName(id);
                 }
-                ApiDocumentInfoDTO returnDTO = shareInfoService.conversionModelToDTO(model);
+                ApiDocumentInfoDTO returnDTO = shareInfoService.conversionModelToDTO(model,userIdMap);
                 returnList.add(returnDTO);
             }
         }
@@ -72,7 +77,8 @@ public class ShareInfoController {
         ApiDefinitionWithBLOBs apiModel = apiDefinitionService.getBLOBs(id);
         ApiDocumentInfoDTO returnDTO = new ApiDocumentInfoDTO();
         try {
-            returnDTO = shareInfoService.conversionModelToDTO(apiModel);
+            Map<String, User> userIdMap = userService.queryName();
+            returnDTO = shareInfoService.conversionModelToDTO(apiModel,userIdMap);
         } catch (Exception e) {
             LogUtil.error(e);
         }
diff --git a/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java b/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java
index 1f3566702b..bd3f1203b0 100644
--- a/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java
+++ b/backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java
@@ -18,8 +18,15 @@ public class ApiDocumentInfoDTO {
     private String name;
     private String status;
 
+    private String tags;
+    private String modules;
+    private String createUser;
+    private String responsibler;
+    private String desc;
+
     private String requestHead;
     private String urlParams;
+    private String restParams;
     private String requestBodyParamType;
     private String requestBodyFormData;
     private String requestBodyStrutureData;
diff --git a/backend/src/main/java/io/metersphere/api/service/ApiModuleService.java b/backend/src/main/java/io/metersphere/api/service/ApiModuleService.java
index f7eb907fb0..6bfd2681d7 100644
--- a/backend/src/main/java/io/metersphere/api/service/ApiModuleService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ApiModuleService.java
@@ -563,4 +563,8 @@ public class ApiModuleService extends NodeTreeService<ApiModuleDTO> {
         example.createCriteria().andProjectIdEqualTo(projectId).andProtocolEqualTo(protocol).andStatusEqualTo("Trash");
         return extApiDefinitionMapper.countByExample(example);
     }
+
+    public String getModuleNameById(String moduleId) {
+        return extApiModuleMapper.getNameById(moduleId);
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java b/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java
index 1e4fee821c..4c18a644df 100644
--- a/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java
+++ b/backend/src/main/java/io/metersphere/api/service/ShareInfoService.java
@@ -110,7 +110,7 @@ public class ShareInfoService {
         return true;
     }
 
-    public ApiDocumentInfoDTO conversionModelToDTO(ApiDefinitionWithBLOBs apiModel) {
+    public ApiDocumentInfoDTO conversionModelToDTO(ApiDefinitionWithBLOBs apiModel, Map<String,User> userIdMap) {
         ApiDocumentInfoDTO apiInfoDTO = new ApiDocumentInfoDTO();
         JSONArray previewJsonArray = new JSONArray();
         if (apiModel != null) {
@@ -120,6 +120,23 @@ public class ShareInfoService {
             apiInfoDTO.setUri(apiModel.getPath());
             apiInfoDTO.setStatus(apiModel.getStatus());
 
+            if(StringUtils.isNotEmpty(apiModel.getTags())){
+                JSONArray tagsArr = JSONArray.parseArray(apiModel.getTags());
+                List<String> tagList = new ArrayList<>();
+                for(int i = 0;i < tagsArr.size();i ++){
+                    tagList.add(tagsArr.getString(i));
+                }
+                if(!tagList.isEmpty()){
+                    apiInfoDTO.setTags(StringUtils.join(tagList,","));
+                }
+            }
+
+            apiInfoDTO.setResponsibler(userIdMap.get(apiModel.getUserId()) == null? apiModel.getUserId() : userIdMap.get(apiModel.getUserId()).getName());
+            apiInfoDTO.setCreateUser(userIdMap.get(apiModel.getCreateUser()) == null? apiModel.getCreateUser() : userIdMap.get(apiModel.getCreateUser()).getName());
+            apiInfoDTO.setDesc(apiModel.getDescription());
+            ApiModuleService apiModuleService = CommonBeanFactory.getBean(ApiModuleService.class);
+            apiInfoDTO.setModules(apiModuleService.getModuleNameById(apiModel.getModuleId()));
+
             if (apiModel.getRequest() != null) {
                 JSONObject requestObj = this.genJSONObject(apiModel.getRequest());
                 if (requestObj != null) {
@@ -150,6 +167,8 @@ public class ShareInfoService {
                         } catch (Exception e) {
                         }
                     }
+                    //rest参数设置
+                    JSONArray restParamArr = new JSONArray();
                     if (requestObj.containsKey("rest")) {
                         try {
                             //urlParam -- rest赋值
@@ -157,13 +176,14 @@ public class ShareInfoService {
                             for (int index = 0; index < headArr.size(); index++) {
                                 JSONObject headObj = headArr.getJSONObject(index);
                                 if (headObj.containsKey("name")) {
-                                    urlParamArr.add(headObj);
+                                    restParamArr.add(headObj);
                                 }
                             }
                         } catch (Exception e) {
                         }
                     }
                     apiInfoDTO.setUrlParams(urlParamArr.toJSONString());
+                    apiInfoDTO.setRestParams(restParamArr.toJSONString());
                     //请求体参数类型
                     if (requestObj.containsKey("body")) {
                         try {
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.java
index 20ef2f4557..6fd85f532a 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.java
@@ -12,4 +12,6 @@ public interface ExtApiModuleMapper {
     List<ApiModuleDTO> getNodeTreeByProjectId(@Param("projectId") String projectId, @Param("protocol") String protocol);
 
     void updatePos(String id, Double pos);
+
+    String getNameById(String moduleId);
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.xml
index 8e0937ac1f..65dd9745c0 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.xml
@@ -21,6 +21,10 @@
         and api_module.protocol = #{protocol}
         order by api_module.pos asc
     </select>
+    <select id="getNameById" resultType="java.lang.String">
+        select name from api_module
+        where id = #{0}
+    </select>
 
     <update id="updatePos">
         update api_module set pos = #{pos} where id = #{id}
diff --git a/backend/src/main/java/io/metersphere/track/service/TestPlanReportService.java b/backend/src/main/java/io/metersphere/track/service/TestPlanReportService.java
index da55384c0d..de41ed2c22 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestPlanReportService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestPlanReportService.java
@@ -3,6 +3,7 @@ package io.metersphere.track.service;
 import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
+import com.esotericsoftware.minlog.Log;
 import io.metersphere.api.dto.automation.TestPlanFailureApiDTO;
 import io.metersphere.api.dto.automation.TestPlanFailureScenarioDTO;
 import io.metersphere.api.service.ShareInfoService;
@@ -53,8 +54,6 @@ import java.util.stream.Collectors;
 @Transactional(rollbackFor = Exception.class)
 public class TestPlanReportService {
 
-    Logger testPlanLog = LoggerFactory.getLogger("testPlanExecuteLog");
-
     @Resource
     TestPlanReportMapper testPlanReportMapper;
     @Resource
@@ -74,7 +73,6 @@ public class TestPlanReportService {
     @Lazy
     @Resource
     TestPlanService testPlanService;
-    @Lazy
     @Resource
     TestPlanReportContentMapper testPlanReportContentMapper;
     @Resource
@@ -854,6 +852,7 @@ public class TestPlanReportService {
     }
 
     public TestPlanSimpleReportDTO getReport(String reportId) {
+        Log.info("----> SELECT REPORT: "+ reportId);
         TestPlanReportContentExample example = new TestPlanReportContentExample();
         example.createCriteria().andTestPlanReportIdEqualTo(reportId);
         List<TestPlanReportContentWithBLOBs> testPlanReportContents = testPlanReportContentMapper.selectByExampleWithBLOBs(example);
@@ -865,8 +864,11 @@ public class TestPlanReportService {
             return null;
         }
         if (this.isDynamicallyGenerateReports(testPlanReportContent)) {
+            Log.info("----> GenerateReports: "+ JSONObject.toJSONString(testPlanReportContent));
             testPlanReportContent = this.dynamicallyGenerateReports(testPlanReportContent);
+            Log.info("----> GenerateReports OVER: "+ JSONObject.toJSONString(testPlanReportContent));
         }
+        Log.info("----> parse return object: "+ JSONObject.toJSONString(testPlanReportContent));
         TestPlanSimpleReportDTO testPlanReportDTO = new TestPlanSimpleReportDTO();
         BeanUtils.copyBean(testPlanReportDTO, testPlanReportContent);
         if (StringUtils.isNotBlank(testPlanReportContent.getFunctionResult())) {
@@ -914,6 +916,7 @@ public class TestPlanReportService {
         testPlanReportDTO.setId(reportId);
         TestPlanReport testPlanReport = testPlanReportMapper.selectByPrimaryKey(testPlanReportContent.getTestPlanReportId());
         testPlanReportDTO.setName(testPlanReport.getName());
+        Log.info("----> SELECT REPORT OVER ");
         return testPlanReportDTO;
     }
 
diff --git a/frontend/src/business/components/api/definition/components/document/components/ApiInfoCollapse.vue b/frontend/src/business/components/api/definition/components/document/components/ApiInfoCollapse.vue
new file mode 100644
index 0000000000..ee1db31bf7
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/document/components/ApiInfoCollapse.vue
@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <el-row class="apiInfoRow">
+      <div class="blackFontClass">
+        <el-row>
+          <div class="tip" style="float: left">
+            <span>{{ title }}</span>
+            <span v-if="remarks" style="font-weight: 400;font-size: smaller;background: #F1F0F0;margin-left: 5px;">
+              {{ remarks }}
+            </span>
+          </div>
+          <div class="right-button">
+            <el-link v-if="active" @click="changeActive">
+              {{ $t('api_test.definition.document.close') }} <i class="el-icon-arrow-up"/>
+            </el-link>
+            <el-link v-if="!active" @click="changeActive">
+              {{ $t('api_test.definition.document.open') }} <i class="el-icon-arrow-down"/>
+            </el-link>
+          </div>
+        </el-row>
+        <el-collapse-transition>
+          <div v-show="active">
+            <div v-if="!showSlotCompnent">
+              <div v-if="isText">
+                <div class="showDataDiv">
+                  <br/>
+                  <p style="margin: 0px 20px;"
+                     v-html="stringData">
+                  </p>
+                  <br/>
+                </div>
+              </div>
+              <div v-else-if="getJsonArr(stringData).length===0">
+                <div class="simpleFontClass" style="margin-top: 10px">
+                  {{ $t('api_test.definition.document.data_set.none') }}
+                </div>
+              </div>
+              <div v-else>
+                <el-table border :show-header="true"
+                          :data="getJsonArr(stringData)" class="test-content document-table">
+                  <el-table-column v-for="item in tableColoumArr" :key="item.id"
+                                   :prop="item.prop"
+                                   :label="item.label"
+                                   show-overflow-tooltip/>
+                </el-table>
+              </div>
+            </div>
+            <slot name="request"></slot>
+            <slot name="response"></slot>
+          </div>
+        </el-collapse-transition>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "ApiInfoCollapse",
+  components: {},
+  data() {
+    return {
+      active: true,
+      tableColoumArr: [
+        {id: 1, prop: "name", label: this.$t('api_test.definition.document.table_coloum.name')},
+        {id: 2, prop: "isRequired", label: this.$t('api_test.definition.document.table_coloum.is_required')},
+        {id: 3, prop: "value", label: this.$t('api_test.definition.document.table_coloum.value')},
+        {id: 4, prop: "description", label: this.$t('api_test.definition.document.table_coloum.desc')},
+      ],
+    };
+  },
+  props: {
+    title: String,
+    tableColoumType: String,
+    remarks: String,
+    isRequest: Boolean,
+    isResponse: Boolean,
+    isText:Boolean,
+    stringData: {
+      type: String,
+      default() {
+        return "{}";
+      }
+    },
+  },
+  activated() {
+  },
+  created: function () {
+  },
+  mounted() {
+  },
+  computed: {
+    showSlotCompnent() {
+      return this.isRequest || this.isResponse;
+    }
+  },
+  watch: {},
+  methods: {
+    getJsonArr(jsonString) {
+      let returnJsonArr = [];
+      if (jsonString === '无' || jsonString === null) {
+        return returnJsonArr;
+      }
+      let jsonArr = JSON.parse(jsonString);
+      //遍历，把必填项空的数据去掉
+      for (var index = 0; index < jsonArr.length; index++) {
+        var item = jsonArr[index];
+        if (item.name !== "" && item.name !== null) {
+          if (item.required) {
+            item.isRequired = "true";
+          } else {
+            item.isRequired = "false";
+          }
+          returnJsonArr.push(item);
+        }
+      }
+      return returnJsonArr;
+    },
+    changeActive() {
+      this.active = !this.active;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+.apiInfoRow {
+  margin: 10px 10px;
+}
+
+.apiInfoRow.el-row {
+  margin: 10px 10px;
+}
+
+.simpleFontClass {
+  font-weight: normal;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+.blackFontClass {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.document-table {
+  margin: 10px 0px 10px 10px;
+  width: auto;
+}
+
+.document-table /deep/ .el-table__row {
+  font-size: 12px;
+  font-weight: initial;
+}
+
+.document-table /deep/ .has-gutter {
+  font-size: 12px;
+  color: #404040;
+}
+
+.document-table /deep/ td {
+  border-right: 0px solid #EBEEF5
+}
+
+.document-table /deep/ th {
+  background-color: #FAFAFA;
+  border-right: 0px solid #EBEEF5
+}
+
+.right-button {
+  float: right;
+}
+
+.showDataDiv {
+  background-color: #F5F7F9;
+  margin: 10px 10px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+</style>
diff --git a/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue b/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
index d1d73d6149..4cc5eaf1cf 100644
--- a/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
+++ b/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
@@ -1,11 +1,11 @@
 <template>
-  <div ref="baseDiv">
+  <div style="margin-bottom: 50px;border-bottom-width: 2px" ref="baseDiv">
     <div style="font-size: 17px">
       <el-popover
-        v-if="projectId"
-        placement="right"
-        width="260"
-        @show="shareApiDocument('false')">
+          v-if="projectId"
+          placement="right"
+          width="260"
+          @show="shareApiDocument('false')">
         <p>{{ shareUrl }}</p>
         <div style="text-align: right; margin: 0">
           <el-button type="primary" size="mini"
@@ -20,11 +20,6 @@
             </span>
     </div>
     <!--api请求信息-->
-    <el-row class="apiInfoRow">
-      <div class="tip">
-        {{ $t('api_test.definition.document.request_info') }}
-      </div>
-    </el-row>
     <el-row class="apiInfoRow">
       <div class="simpleFontClass">
         <el-tag size="medium"
@@ -33,225 +28,59 @@
         </el-tag>
         {{ apiInfo.uri }}
       </div>
+      <div class="attacInfo">
+        <el-row :gutter="10">
+          <el-col :span="6"> {{ $t('test_track.module.module') }} : {{ apiInfo.modules }}</el-col>
+          <el-col :span="6">{{ $t('commons.tag') }} : {{ apiInfo.tags }}</el-col>
+          <el-col :span="6">{{ $t('api_test.definition.request.responsible') }} : {{ apiInfo.responsibler }}</el-col>
+          <el-col :span="6">{{ $t('commons.create_user') }} : {{ apiInfo.createUser }}</el-col>
+        </el-row>
+        <el-row style="margin-top: 10px">
+          {{ $t('commons.description') }} : {{ apiInfo.desc }}
+        </el-row>
+      </div>
     </el-row>
     <!--api请求头-->
-    <el-row class="apiInfoRow">
-      <div class="blackFontClass">
-        {{ $t('api_test.definition.document.request_head') }}：
-        <div v-if="getJsonArr(apiInfo.requestHead).length==0">
-          <div class="simpleFontClass" style="margin-top: 10px">
-            {{ $t('api_test.definition.document.data_set.none') }}
-          </div>
-        </div>
-        <div v-else>
-          <el-table border :show-header="false"
-                    :data="getJsonArr(apiInfo.requestHead)" class="test-content document-table">
-            <el-table-column prop="name"
-                             :label="$t('api_test.definition.document.table_coloum.name')"
-                             show-overflow-tooltip/>
-            <el-table-column prop="value"
-                             :label="$t('api_test.definition.document.table_coloum.value')"
-                             show-overflow-tooltip/>
-          </el-table>
-        </div>
-      </div>
-    </el-row>
-    <!--URL参数-->
-    <el-row class="apiInfoRow">
-      <div class="blackFontClass">
-        URL{{ $t('api_test.definition.document.request_param') }}：
-        <div v-if="getJsonArr(apiInfo.urlParams).length==0">
-          <div class="simpleFontClass" style="margin-top: 10px">
-            {{ $t('api_test.definition.document.data_set.none') }}
-          </div>
-        </div>
-        <div v-else>
-          <el-table border
-                    :data="getJsonArr(apiInfo.urlParams)" class="test-content document-table">
-            <el-table-column prop="name"
-                             :label="$t('api_test.definition.document.table_coloum.name')"
-                             min-width="120px"
-                             show-overflow-tooltip/>
-            <el-table-column prop="required"
-                             :label="$t('api_test.definition.document.table_coloum.is_required')"
-                             :formatter="formatBoolean"
-                             min-width="80px"
-                             show-overflow-tooltip/>
-            <el-table-column prop="value"
-                             :label="$t('api_test.definition.document.table_coloum.value')"
-                             min-width="120px"
-                             show-overflow-tooltip/>
-            <el-table-column prop="description"
-                             :label="$t('api_test.definition.document.table_coloum.desc')"
-                             min-width="280px"
-                             show-overflow-tooltip/>
-          </el-table>
-        </div>
-      </div>
-    </el-row>
+    <api-info-collapse table-coloum-type="nameAndValue" :title="$t('api_test.definition.document.request_head')"
+                       :string-data="apiInfo.requestHead"/>
+    <!--QUERY参数-->
+    <api-info-collapse table-coloum-type="simple" :title="'QUERY'+$t('api_test.definition.document.request_param')"
+                       :string-data="apiInfo.urlParams"/>
+    <!--REST参数-->
+    <api-info-collapse table-coloum-type="simple" :title="'REST'+$t('api_test.definition.document.request_param')"
+                       :string-data="apiInfo.restParams"/>
     <!--api请求体 以及表格-->
-    <el-row class="apiInfoRow">
-      <div class="blackFontClass">
-        {{ $t('api_test.definition.document.request_body') }}
-      </div>
-      <div class="smallFontClass">
-        {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.requestBodyParamType }}
-      </div>
-      <div>
-        <el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)"
-                  :data="getJsonArr(apiInfo.requestBodyFormData)"
-                  class="test-content document-table">
-          <el-table-column prop="name"
-                           :label="$t('api_test.definition.document.table_coloum.name')"
-                           min-width="120px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="contentType"
-                           :label="$t('api_test.definition.document.table_coloum.type')"
-                           min-width="120px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="description"
-                           :label="$t('api_test.definition.document.table_coloum.desc')"
-                           min-width="280px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="required"
-                           :label="$t('api_test.definition.document.table_coloum.is_required')"
-                           :formatter="formatBoolean"
-                           min-width="80px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="value"
-                           :label="$t('api_test.definition.document.table_coloum.default_value')"
-                           min-width="120px"
-                           show-overflow-tooltip/>
-        </el-table>
-        <div v-else-if="apiInfo.requestBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
-          <ms-json-code-edit :show-preview="false" :body="apiInfo.jsonSchemaBody" ref="jsonCodeEdit"/>
-        </div>
-        <div v-else-if="formatRowDataToJsonSchema(apiInfo,'request') " style="margin-left: 10px">
-          <ms-json-code-edit :show-preview="false" :body="apiInfo.requestJsonSchema" ref="jsonCodeEdit"/>
-        </div>
-        <div v-else class="showDataDiv">
-          <br/>
-          <p style="margin: 0px 20px;"
-             v-html="formatRowData(apiInfo.requestBodyParamType,apiInfo.requestBodyStrutureData)">
-          </p>
-          <br/>
-        </div>
-      </div>
-    </el-row>
-    <!--范例展示-->
-    <el-row class="apiInfoRow">
-      <div class="blackFontClass">
-        {{ $t('api_test.definition.document.example_presentation') }}
-      </div>
-      <div class="showDataDiv">
-        <br/>
-        <p style="margin: 0px 20px;"
-           v-html="genPreviewData(apiInfo.requestPreviewData)">
-        </p>
-        <br/>
-      </div>
-    </el-row>
-    <!--响应信息-->
-    <el-row class="apiInfoRow">
-      <div class="tip">
-        {{ $t('api_test.definition.document.response_info') }}
-      </div>
-    </el-row>
-    <el-row class="apiInfoRow">
+    <api-info-collapse :is-request="true" :remarks="apiInfo.requestBodyParamType"
+                       :title="$t('api_test.definition.document.request_body')">
+      <api-request-info slot="request" :api-info="apiInfo"></api-request-info>
+    </api-info-collapse>
 
-    </el-row>
     <!--响应头-->
-    <el-row class="apiInfoRow">
-      <div class="blackFontClass">
-        {{ $t('api_test.definition.document.response_head') }}:
-        <el-table border :show-header="false"
-                  :data="getJsonArr(apiInfo.responseHead)" class="test-content document-table">
-          <el-table-column prop="name"
-                           :label="$t('api_test.definition.document.table_coloum.name')"
-                           show-overflow-tooltip/>
-          <el-table-column prop="value"
-                           :label="$t('api_test.definition.document.table_coloum.value')"
-                           show-overflow-tooltip/>
-        </el-table>
-      </div>
-    </el-row>
+    <api-info-collapse table-coloum-type="nameAndValue" :title="$t('api_test.definition.document.response_head')"
+                       :string-data="apiInfo.responseHead"/>
     <!--响应体-->
-    <el-row class="apiInfoRow">
-      <div class="blackFontClass">
-        {{ $t('api_test.definition.document.response_body') }}
-      </div>
-      <div class="smallFontClass">
-        {{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.responseBodyParamType }}
-      </div>
-      <div>
-        <el-table border v-if="formParamTypes.includes(apiInfo.responseBodyParamType)"
-                  :data="getJsonArr(apiInfo.responseBodyFormData)"
-                  class="test-content document-table">
-          <el-table-column prop="name"
-                           :label="$t('api_test.definition.document.table_coloum.name')"
-                           min-width="120px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="contentType"
-                           :label="$t('api_test.definition.document.table_coloum.type')"
-                           min-width="120px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="description"
-                           :label="$t('api_test.definition.document.table_coloum.desc')"
-                           min-width="280px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="required"
-                           :label="$t('api_test.definition.document.table_coloum.is_required')"
-                           :formatter="formatBoolean"
-                           min-width="80px"
-                           show-overflow-tooltip/>
-          <el-table-column prop="value"
-                           :label="$t('api_test.definition.document.table_coloum.default_value')"
-                           min-width="120px"
-                           show-overflow-tooltip/>
-        </el-table>
-        <div v-else-if="apiInfo.responseBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
-          <ms-json-code-edit :show-preview="false" :body="apiInfo.jsonSchemaResponseBody" ref="jsonCodeEdit"/>
-        </div>
-        <div v-else-if="formatRowDataToJsonSchema(apiInfo,'response') " style="margin-left: 10px">
-          <ms-json-code-edit :show-preview="false" :body="apiInfo.responseJsonSchema" ref="jsonCodeEdit"/>
-        </div>
-        <div v-else class="showDataDiv">
-          <br/>
-          <p style="margin: 0px 20px;"
-             v-html="formatRowData(apiInfo.responseBodyParamType,apiInfo.responseBodyStrutureData)">
-          </p>
-          <br/>
-        </div>
-      </div>
-    </el-row>
+    <api-info-collapse :is-response="true" :remarks="apiInfo.responseBodyParamType"
+                       :title="$t('api_test.definition.document.response_body')">
+      <api-response-info slot="response" :api-info="apiInfo"></api-response-info>
+    </api-info-collapse>
+
     <!--响应状态码-->
-    <el-row class="apiInfoRow">
-      <div class="blackFontClass">
-        {{ $t('api_test.definition.document.response_code') }}:
-        <el-table border :show-header="false"
-                  :data="getJsonArr(apiInfo.responseCode)" class="test-content document-table">
-          <el-table-column prop="name"
-                           :label="$t('api_test.definition.document.table_coloum.name')"
-                           show-overflow-tooltip/>
-          <el-table-column prop="value"
-                           :label="$t('api_test.definition.document.table_coloum.value')"
-                           show-overflow-tooltip/>
-        </el-table>
-      </div>
-    </el-row>
+    <api-info-collapse :is-text="true" :string-data="getName(apiInfo.responseCode)"
+                       :title="$t('api_test.definition.document.response_code')"/>
+    <el-divider></el-divider>
   </div>
 </template>
 
 <script>
 import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/JsonData";
 import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
-import {formatJson,} from "@/common/js/format-utils";
 import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
-import {calculate} from "@/business/components/api/definition/model/ApiTestModel";
 import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
 import Api from "@/business/components/api/router";
 import {generateApiDocumentShareInfo} from "@/network/share";
-import Convert from "@/business/components/common/json-schema/convert/convert";
+import ApiInfoCollapse from "@/business/components/api/definition/components/document/components/ApiInfoCollapse";
+import ApiRequestInfo from "@/business/components/api/definition/components/document/components/ApiRequestInfo";
+import ApiResponseInfo from "@/business/components/api/definition/components/document/components/ApiResponseInfo";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const apiDocumentBatchShare = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./share/ApiDocumentBatchShare.vue") : {};
@@ -261,12 +90,13 @@ export default {
   components: {
     Api,
     MsJsonCodeEdit,
-    ApiStatus, MsCodeEdit,
+    ApiStatus, MsCodeEdit, ApiInfoCollapse, ApiRequestInfo, ApiResponseInfo,
     "ApiDocumentBatchShare": apiDocumentBatchShare.default
   },
   data() {
     return {
       shareUrl: "",
+      apiActiveInfoNames: ["info"],
       batchShareUrl: "",
       apiStepIndex: 0,
       apiInfoArray: [],
@@ -286,6 +116,7 @@ export default {
         id: "",
         requestHead: "无",
         urlParams: "无",
+        restParams: "无",
         requestBodyParamType: "无",
         requestBodyFormData: '[]',
         requestBodyStrutureData: "",
@@ -309,7 +140,7 @@ export default {
   },
   props: {
     projectId: String,
-    apiInfo:Object
+    apiInfo: Object
   },
   activated() {
   },
@@ -321,43 +152,14 @@ export default {
   mounted() {
   },
   computed: {},
-  watch: {
-  },
+  watch: {},
   methods: {
-    getId(){
+    getId() {
       return this.apiInfo.id;
     },
-    getHeight(){
+    getHeight() {
       return this.$refs.baseDiv.offsetHeight;
     },
-    formatRowDataToJsonSchema(api, jsonType) {
-      if (jsonType === 'request' && api.requestBodyStrutureData) {
-        try {
-          let bodyStructData = JSON.parse(api.requestBodyStrutureData);
-          api.requestJsonSchema = {'raw': bodyStructData};
-          return true;
-        } catch (e) {
-          return false;
-        }
-      } else if (jsonType === 'response' && api.responseBodyStrutureData) {
-        try {
-          JSON.parse(api.responseBodyStrutureData);
-          api.responseJsonSchema = {'raw': api.responseBodyStrutureData};
-          return true;
-        } catch (e) {
-          return false;
-        }
-      } else {
-        return false;
-      }
-    },
-    formatRowData(dataType, data) {
-      var returnData = data;
-      if (data) {
-        returnData = "<xmp>" + returnData + "</xmp>";
-      }
-      return returnData;
-    },
     shareApiDocument(isBatchShare) {
       this.shareUrl = "";
       this.batchShareUrl = "";
@@ -391,72 +193,27 @@ export default {
     getColor(enable, method) {
       return this.methodColorMap.get(method);
     },
-    formatBoolean(row, column, cellValue) {
-      var ret = '';  //你想在页面展示的值
-      if (cellValue) {
-        ret = "是";  //根据自己的需求设定
-      } else {
-        ret = "否";
-      }
-      return ret;
-    },
-    getJsonArr(jsonString) {
-      let returnJsonArr = [];
+    getName(jsonString) {
+      let returnString = "无";
       if (jsonString == '无' || jsonString == null) {
-        return returnJsonArr;
+        return returnString;
       }
 
-      let jsonArr = JSON.parse(jsonString);
-      //遍历，把必填项空的数据去掉
-      for (var index = 0; index < jsonArr.length; index++) {
-        var item = jsonArr[index];
-        if (item.name != "" && item.name != null) {
-          returnJsonArr.push(item);
-        }
-      }
-      return returnJsonArr;
-    },
-    //构建预览数据
-    genPreviewData(previewData) {
-      if (previewData != null && previewData != '') {
-        let showDataObj = {};
-        for (var key in previewData) {
-          // showDataObj.set(key,previewData[key]);
-          let value = previewData[key];
-          if (typeof (value) == 'string') {
-            if (value.indexOf("@") >= 0) {
-              value = this.showPreview(value);
-            }
+      try {
+        let jsonArr = JSON.parse(jsonString);
+        //遍历，把必填项空的数据去掉
+        for (var index = 0; index < jsonArr.length; index++) {
+          var item = jsonArr[index];
+          if (item.name !== "") {
+            returnString = item.name;
+            break;
           }
-          showDataObj[key] = value;
         }
-        showDataObj = JSON.stringify(showDataObj);
-        previewData = formatJson(showDataObj);
-      }
-      return previewData;
-    },
-    showPreview(itemValue) {
-      // 找到变量本身
-      if (!itemValue) {
-        return;
-      }
-      let index = itemValue.indexOf("|");
-      if (index > -1) {
-        itemValue = itemValue.substring(0, index).trim();
+      } catch (e) {
+        returnString = jsonString;
       }
 
-      this.mockVariableFuncs.forEach(f => {
-        if (!f.name) {
-          return;
-        }
-        itemValue += "|" + f.name;
-        if (f.params) {
-          itemValue += ":" + f.params.map(p => p.value).join(",");
-        }
-      });
-
-      itemValue = calculate(itemValue);
-      return itemValue;
+      return returnString;
     },
   },
 };
@@ -469,16 +226,6 @@ export default {
   margin-left: 10px;
 }
 
-.blackFontClass {
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.smallFontClass {
-  font-size: 13px;
-  margin: 20px 5px;
-}
-
 .apiInfoRow {
   margin: 10px 10px;
 }
@@ -491,17 +238,9 @@ export default {
   margin: 10px 10px;
 }
 
-.showDataDiv {
-  background-color: #F5F7F9;
-  margin: 10px 10px;
-  max-height: 300px;
-  overflow: auto;
-}
-
 /*
 步骤条中，已经完成后的节点样式和里面a标签的样式
 */
-
 /deep/ .el-step {
   flex-basis: 40px !important;
 }
@@ -544,37 +283,14 @@ export default {
   left: 9px;
 }
 
-
 /deep/ .el-step__icon {
   width: 20px;
   height: 20px;
 }
 
-.document-table {
-  margin: 10px 10px;
-  width: auto;
-}
-
-.document-table /deep/ .el-table__row {
+.attacInfo {
   font-size: 12px;
-  font-weight: initial;
-}
-
-.document-table /deep/ .has-gutter {
-  font-size: 12px;
-  color: #404040;
-}
-
-.document-table /deep/ td {
-  border-right: 0px solid #EBEEF5
-}
-
-.document-table /deep/ th {
-  background-color: #FAFAFA;
-  border-right: 0px solid #EBEEF5
-}
-
-.el-divider--horizontal {
-  margin: 12px 0;
+  color: #A0A0A0;
+  margin: 10px;
 }
 </style>
diff --git a/frontend/src/business/components/api/definition/components/document/components/ApiRequestInfo.vue b/frontend/src/business/components/api/definition/components/document/components/ApiRequestInfo.vue
new file mode 100644
index 0000000000..3915042917
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/document/components/ApiRequestInfo.vue
@@ -0,0 +1,179 @@
+<template>
+  <div>
+    <el-row class="apiInfoRow">
+      <div>
+        <el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)"
+                  :data="getJsonArr(apiInfo.requestBodyFormData)"
+                  class="test-content document-table">
+          <el-table-column prop="name"
+                           :label="$t('api_test.definition.document.table_coloum.name')"
+                           min-width="120px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="contentType"
+                           :label="$t('api_test.definition.document.table_coloum.type')"
+                           min-width="120px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="description"
+                           :label="$t('api_test.definition.document.table_coloum.desc')"
+                           min-width="280px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="required"
+                           :label="$t('api_test.definition.document.table_coloum.is_required')"
+                           :formatter="formatBoolean"
+                           min-width="80px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="value"
+                           :label="$t('api_test.definition.document.table_coloum.default_value')"
+                           min-width="120px"
+                           show-overflow-tooltip/>
+        </el-table>
+        <div v-else-if="apiInfo.requestBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
+          <ms-json-code-edit :show-preview="false" :json-schema-disable="true" :body="apiInfo.jsonSchemaBody"
+                             ref="jsonCodeEdit"/>
+        </div>
+        <div v-else-if="formatRowDataToJsonSchema(apiInfo,'request') " style="margin-left: 10px">
+          <ms-json-code-edit :show-preview="false" :json-schema-disable="true" :body="apiInfo.requestJsonSchema"
+                             ref="jsonCodeEdit"/>
+        </div>
+        <div v-else class="showDataDiv">
+          <br/>
+          <p style="margin: 0px 20px;"
+             v-html="formatRowData(apiInfo.requestBodyParamType,apiInfo.requestBodyStrutureData)">
+          </p>
+          <br/>
+        </div>
+      </div>
+    </el-row>
+
+    <el-row class="apiInfoRow">
+      <div class="blackFontClass">
+        {{ $t('api_test.definition.document.example_presentation') }}
+      </div>
+      <div class="showDataDiv">
+        <br/>
+        <p style="margin: 0px 20px;"
+           v-html="genPreviewData(apiInfo.requestPreviewData)">
+        </p>
+        <br/>
+      </div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import {formatJson} from "@/common/js/format-utils";
+import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
+
+export default {
+  name: "ApiRequestInfo",
+  components: {MsJsonCodeEdit},
+  data() {
+    return {
+      active: true,
+      formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
+    };
+  },
+  props: {
+    apiInfo:Object,
+  },
+  activated() {
+  },
+  created: function () {
+  },
+  mounted() {
+  },
+  computed: {
+  },
+  watch: {},
+  methods: {
+    formatBoolean(row, column, cellValue) {
+      var ret = '';  //你想在页面展示的值
+      if (cellValue) {
+        ret = "是";  //根据自己的需求设定
+      } else {
+        ret = "否";
+      }
+      return ret;
+    },
+    formatRowData(dataType, data) {
+      var returnData = data;
+      if (data) {
+        returnData = "<xmp>" + returnData + "</xmp>";
+      }
+      return returnData;
+    },
+    getJsonArr(jsonString) {
+      let returnJsonArr = [];
+      if (jsonString === '无' || jsonString === null) {
+        return returnJsonArr;
+      }
+
+      let jsonArr = JSON.parse(jsonString);
+      //遍历，把必填项空的数据去掉
+      for (var index = 0; index < jsonArr.length; index++) {
+        var item = jsonArr[index];
+        if (item.name !== "" && item.name !== null) {
+          returnJsonArr.push(item);
+        }
+      }
+      return returnJsonArr;
+    },
+    formatRowDataToJsonSchema(api, jsonType) {
+      if (jsonType === 'request' && api.requestBodyStrutureData) {
+        try {
+          let bodyStructData = JSON.parse(api.requestBodyStrutureData);
+          api.requestJsonSchema = {'raw': bodyStructData};
+          return true;
+        } catch (e) {
+          return false;
+        }
+      } else if (jsonType === 'response' && api.responseBodyStrutureData) {
+        try {
+          JSON.parse(api.responseBodyStrutureData);
+          api.responseJsonSchema = {'raw': api.responseBodyStrutureData};
+          return true;
+        } catch (e) {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    //构建预览数据
+    genPreviewData(previewData) {
+      if (previewData !== null && previewData !== '') {
+        let showDataObj = {};
+        for (var key in previewData) {
+          let value = previewData[key];
+          if (typeof (value) == 'string') {
+            if (value.indexOf("@") >= 0) {
+              value = this.showPreview(value);
+            }
+          }
+          showDataObj[key] = value;
+        }
+        showDataObj = JSON.stringify(showDataObj);
+        previewData = formatJson(showDataObj);
+      }
+      return previewData;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.apiInfoRow {
+  margin: 10px 10px;
+}
+.blackFontClass {
+  font-weight: bold;
+  font-size: 14px;
+}
+.showDataDiv {
+  background-color: #F5F7F9;
+  margin: 10px 10px;
+  max-height: 300px;
+  overflow: auto;
+}
+</style>
diff --git a/frontend/src/business/components/api/definition/components/document/components/ApiResponseInfo.vue b/frontend/src/business/components/api/definition/components/document/components/ApiResponseInfo.vue
new file mode 100644
index 0000000000..92d7baa889
--- /dev/null
+++ b/frontend/src/business/components/api/definition/components/document/components/ApiResponseInfo.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-row class="apiInfoRow">
+      <div>
+        <el-table border v-if="formParamTypes.includes(apiInfo.responseBodyParamType)"
+                  :data="getJsonArr(apiInfo.responseBodyFormData)"
+                  class="test-content document-table">
+          <el-table-column prop="name"
+                           :label="$t('api_test.definition.document.table_coloum.name')"
+                           min-width="120px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="contentType"
+                           :label="$t('api_test.definition.document.table_coloum.type')"
+                           min-width="120px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="description"
+                           :label="$t('api_test.definition.document.table_coloum.desc')"
+                           min-width="280px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="required"
+                           :label="$t('api_test.definition.document.table_coloum.is_required')"
+                           :formatter="formatBoolean"
+                           min-width="80px"
+                           show-overflow-tooltip/>
+          <el-table-column prop="value"
+                           :label="$t('api_test.definition.document.table_coloum.default_value')"
+                           min-width="120px"
+                           show-overflow-tooltip/>
+        </el-table>
+        <div v-else-if="apiInfo.responseBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
+          <ms-json-code-edit :json-schema-disable="true" :show-preview="false" :body="apiInfo.jsonSchemaResponseBody" ref="jsonCodeEdit"/>
+        </div>
+        <div v-else-if="formatRowDataToJsonSchema(apiInfo,'response') " style="margin-left: 10px">
+          <ms-json-code-edit :json-schema-disable="true" :show-preview="false" :body="apiInfo.responseJsonSchema" ref="jsonCodeEdit"/>
+        </div>
+        <div v-else class="showDataDiv">
+          <br/>
+          <p style="margin: 0px 20px;"
+             v-html="formatRowData(apiInfo.responseBodyParamType,apiInfo.responseBodyStrutureData)">
+          </p>
+          <br/>
+        </div>
+      </div>
+    </el-row>
+
+
+  </div>
+</template>
+
+<script>
+
+import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
+
+export default {
+  name: "ApiResponseInfo",
+  components: {MsJsonCodeEdit},
+  data() {
+    return {
+      active: true,
+      formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
+    };
+  },
+  props: {
+    apiInfo: Object,
+  },
+  activated() {
+  },
+  created: function () {
+  },
+  mounted() {
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    formatRowData(dataType, data) {
+      var returnData = data;
+      if (data) {
+        returnData = "<xmp>" + returnData + "</xmp>";
+      }
+      return returnData;
+    },
+    getJsonArr(jsonString) {
+      let returnJsonArr = [];
+      if (jsonString === '无' || jsonString === null) {
+        return returnJsonArr;
+      }
+
+      let jsonArr = JSON.parse(jsonString);
+      //遍历，把必填项空的数据去掉
+      for (var index = 0; index < jsonArr.length; index++) {
+        var item = jsonArr[index];
+        if (item.name !== "" && item.name !== null) {
+          returnJsonArr.push(item);
+        }
+      }
+      return returnJsonArr;
+    },
+    formatBoolean(row, column, cellValue) {
+      var ret = '';  //你想在页面展示的值
+      if (cellValue) {
+        ret = "是";  //根据自己的需求设定
+      } else {
+        ret = "否";
+      }
+      return ret;
+    },
+    formatRowDataToJsonSchema(api, jsonType) {
+      if (jsonType === 'request' && api.requestBodyStrutureData) {
+        try {
+          let bodyStructData = JSON.parse(api.requestBodyStrutureData);
+          api.requestJsonSchema = {'raw': bodyStructData};
+          return true;
+        } catch (e) {
+          return false;
+        }
+      } else if (jsonType === 'response' && api.responseBodyStrutureData) {
+        try {
+          JSON.parse(api.responseBodyStrutureData);
+          api.responseJsonSchema = {'raw': api.responseBodyStrutureData};
+          return true;
+        } catch (e) {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.apiInfoRow {
+  margin: 10px 10px;
+}
+
+.blackFontClass {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.showDataDiv {
+  background-color: #F5F7F9;
+  margin: 10px 10px;
+  max-height: 300px;
+  overflow: auto;
+}
+</style>
+
+<style scoped>
+.apiInfoRow {
+  margin: 10px 10px;
+}
+</style>
diff --git a/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue b/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
index 298e604eff..7d4e3eb120 100644
--- a/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
+++ b/frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
@@ -2,11 +2,12 @@
   <div id="app" v-loading="loading">
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane :label="$t('organization.message.template')" name="apiTemplate">
-        <el-button type="primary" size="mini" style="margin: 10px 10px 0px" @click="openOneClickOperation">
+        <el-button v-show="!jsonSchemaDisable" type="primary" size="mini" style="margin: 10px 10px 0px" @click="openOneClickOperation">
           {{ this.$t('commons.import') }}
         </el-button>
-        <div style="min-height: 200px">
+        <div :style="jsonSchemaDisable? '' : 'min-height: 200px'">
           <json-schema-editor class="schema"
+                              :disabled="jsonSchemaDisable"
                               :value="schema"
                               :show-mock-vars="showMockVars"
                               :scenario-definition="scenarioDefinition"
@@ -16,7 +17,7 @@
       </el-tab-pane>
       <el-tab-pane v-if="showPreview" :label="$t('schema.preview')" name="preview">
         <div style="min-height: 200px">
-          <pre>{{this.preview}}</pre>
+          <pre>{{ this.preview }}</pre>
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -26,107 +27,109 @@
 </template>
 
 <script>
-  import MsImportJson from './import/ImportJson';
+import MsImportJson from './import/ImportJson';
 
-  const Convert = require('./convert/convert.js');
-  const MsConvert = new Convert();
+const Convert = require('./convert/convert.js');
+const MsConvert = new Convert();
 
-  export default {
-    name: 'App',
-    components: {MsImportJson},
-    props: {
-      body: {},
-      showPreview: {
-        type: Boolean,
-        default: true
-      },
-      showMockVars: {
-        type: Boolean,
-        default() {
-          return false;
-        }
-      },
-      scenarioDefinition: Array,
+export default {
+  name: 'App',
+  components: {MsImportJson},
+  props: {
+    body: {},
+    showPreview: {
+      type: Boolean,
+      default: true
     },
-    created() {
-      if (!this.body.jsonSchema && this.body.raw && this.checkIsJson(this.body.raw)) {
-        let obj = {"root": MsConvert.format(JSON.parse(this.body.raw))}
-        this.schema = obj;
-      }
-      else if (this.body.jsonSchema) {
-        this.schema = {"root": this.body.jsonSchema};
-      }
-      this.body.jsonSchema = this.schema.root;
+    jsonSchemaDisable: {
+      type: Boolean,
+      default: false
     },
-    watch: {
-      schema: {
-        handler(newValue, oldValue) {
-          this.body.jsonSchema = this.schema.root;
-        },
-        deep: true
-      },
-      body: {
-        handler(newValue, oldValue) {
-          if (!this.body.jsonSchema && this.body.raw && this.checkIsJson(this.body.raw)) {
-            let obj = {"root": MsConvert.format(JSON.parse(this.body.raw))}
-            this.schema = obj;
-          }
-          else if (this.body.jsonSchema) {
-            this.schema = {"root": this.body.jsonSchema};
-          }
-          this.body.jsonSchema = this.schema.root;
-        },
-        deep: true
+    showMockVars: {
+      type: Boolean,
+      default() {
+        return false;
       }
     },
-    data() {
-      return {
-        schema:
-          {
-            "root": {
-              "type": "object",
-              "properties": {},
-            }
-          },
-        loading: false,
-        preview: null,
-        activeName: "apiTemplate",
-      }
-    },
-    methods: {
-      handleClick() {
-        if (this.activeName === 'preview') {
-          this.loading = true;
-          // 后台转换
-          MsConvert.schemaToJsonStr(this.schema.root, (result) => {
-            this.preview = result;
-            this.loading = false;
-          });
-        }
-      },
-      openOneClickOperation() {
-        this.$refs.importJson.openOneClickOperation();
-      },
-      checkIsJson(json) {
-        try {
-          JSON.parse(json);
-          return true;
-        } catch (e) {
-          return false;
-        }
-      },
-      jsonData(data) {
-        this.schema.root = {};
-        this.$nextTick(() => {
-          this.schema.root = data;
-          this.body.jsonSchema = this.schema.root;
-        })
-      },
-      editScenarioAdvance(data) {
-        this.$emit('editScenarioAdvance', data);
-      },
+    scenarioDefinition: Array,
+  },
+  created() {
+    if (!this.body.jsonSchema && this.body.raw && this.checkIsJson(this.body.raw)) {
+      let obj = {"root": MsConvert.format(JSON.parse(this.body.raw))}
+      this.schema = obj;
+    } else if (this.body.jsonSchema) {
+      this.schema = {"root": this.body.jsonSchema};
     }
+    this.body.jsonSchema = this.schema.root;
+  },
+  watch: {
+    schema: {
+      handler(newValue, oldValue) {
+        this.body.jsonSchema = this.schema.root;
+      },
+      deep: true
+    },
+    body: {
+      handler(newValue, oldValue) {
+        if (!this.body.jsonSchema && this.body.raw && this.checkIsJson(this.body.raw)) {
+          let obj = {"root": MsConvert.format(JSON.parse(this.body.raw))}
+          this.schema = obj;
+        } else if (this.body.jsonSchema) {
+          this.schema = {"root": this.body.jsonSchema};
+        }
+        this.body.jsonSchema = this.schema.root;
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      schema:
+        {
+          "root": {
+            "type": "object",
+            "properties": {},
+          }
+        },
+      loading: false,
+      preview: null,
+      activeName: "apiTemplate",
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.activeName === 'preview') {
+        this.loading = true;
+        // 后台转换
+        MsConvert.schemaToJsonStr(this.schema.root, (result) => {
+          this.preview = result;
+          this.loading = false;
+        });
+      }
+    },
+    openOneClickOperation() {
+      this.$refs.importJson.openOneClickOperation();
+    },
+    checkIsJson(json) {
+      try {
+        JSON.parse(json);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+    jsonData(data) {
+      this.schema.root = {};
+      this.$nextTick(() => {
+        this.schema.root = data;
+        this.body.jsonSchema = this.schema.root;
+      })
+    },
+    editScenarioAdvance(data) {
+      this.$emit('editScenarioAdvance', data);
+    },
   }
+}
 </script>
 <style>
 
diff --git a/frontend/src/business/components/common/json-schema/schema/editor/main.vue b/frontend/src/business/components/common/json-schema/schema/editor/main.vue
index f9e71d717a..9b92ce6143 100644
--- a/frontend/src/business/components/common/json-schema/schema/editor/main.vue
+++ b/frontend/src/business/components/common/json-schema/schema/editor/main.vue
@@ -9,28 +9,28 @@
         <input class="el-input el-input__inner" style="height: 32px" :disabled="disabled || root" :value="pickKey" @blur="onInputName" size="small"/>
 
         <el-tooltip v-if="root" :content="$t('schema.checked_all')" placement="top">
-          <input type="checkbox" :disabled="!isObject && !isArray" class="ms-col-name-required" @change="onRootCheck"/>
+          <input type="checkbox" :disabled="disabled || (!isObject && !isArray)" class="ms-col-name-required" @change="onRootCheck"/>
         </el-tooltip>
         <el-tooltip v-else :content="$t('schema.required')" placement="top">
-          <input type="checkbox" :disabled="isItem" :checked="checked" class="ms-col-name-required" @change="onCheck"/>
+          <input type="checkbox" :disabled="disabled || isItem" :checked="checked" class="ms-col-name-required" @change="onCheck"/>
         </el-tooltip>
       </el-col>
       <el-col :span="4">
-        <el-select v-model="pickValue.type" :disabled="disabledType" class="ms-col-type" @change="onChangeType" size="small">
+        <el-select v-model="pickValue.type" :disabled="disabled||disabledType" class="ms-col-type" @change="onChangeType" size="small">
           <el-option :key="t" :value="t" :label="t" v-for="t in types"/>
         </el-select>
       </el-col>
       <el-col :span="4">
-        <ms-mock :disabled="pickValue.type==='object' || pickKey ==='root' || pickValue.type==='array' || pickValue.type==='null'"
+        <ms-mock :disabled="disabled || pickValue.type==='object' || pickKey ==='root' || pickValue.type==='array' || pickValue.type==='null'"
                  :schema="pickValue"
                  :scenario-definition="scenarioDefinition"
                  :show-mock-vars="showMockVars"
                  @editScenarioAdvance="editScenarioAdvance"/>
       </el-col>
       <el-col :span="4">
-        <el-input v-model="pickValue.description" class="ms-col-title" :placeholder="$t('schema.description')" size="small"/>
+        <el-input :disabled="disabled" v-model="pickValue.description" class="ms-col-title" :placeholder="$t('schema.description')" size="small"/>
       </el-col>
-      <el-col :span="4" class="col-item-setting">
+      <el-col :span="4" class="col-item-setting" v-if="!disabled">
         <el-tooltip class="item" effect="dark" :content="$t('schema.adv_setting')" placement="top">
           <i class="el-icon-setting" @click="onSetting"/>
         </el-tooltip>
@@ -48,6 +48,7 @@
                           :parent="pickValue" :key="index" :deep="deep+1" :root="false" class="children"
                           :scenario-definition="scenarioDefinition"
                           :show-mock-vars="showMockVars"
+                          :disabled="disabled"
                           @editScenarioAdvance="editScenarioAdvance"
                           :lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType" @reloadItems="reloadItems"/>
     </template>
diff --git a/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue b/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
index 56985704cc..fc9eff81d9 100644
--- a/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
+++ b/frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
@@ -10,7 +10,7 @@
       value-key="name"
       highlight-first-item
       @select="change">
-      <i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced(mock)"></i>
+      <i slot="suffix" v-if="!disabled" class="el-input__icon el-icon-edit pointer" @click="advanced(mock)"></i>
     </el-autocomplete>
     <ms-api-variable-advance :show-mock-vars="showMockVars" :scenario-definition="scenarioDefinition" :current-item="mock" ref="variableAdvance"/>
 
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 0f888cd8a0..12d812791f 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -1,7 +1,7 @@
 export default {
   commons: {
     project_permission: 'Please add the project permission first',
-    no_permission:'No permission yet',
+    no_permission: 'No permission yet',
     failure_continues: "Failure continues",
     full_screen_editing: "Full screen editing",
     trash: "Trash",
@@ -243,8 +243,8 @@ export default {
     cancel_follow_success: "Cancel Follow Success",
     generate_test_data: "Generate test data",
     type: "Type",
-    type_of_num:"Please enter an integer type",
-    validity_period:'Validity Period',
+    type_of_num: "Please enter an integer type",
+    validity_period: 'Validity Period',
     please_select_a_deadline: "Please select a deadline",
     relationship: {
       name: 'Dependencies',
@@ -1152,14 +1152,14 @@ export default {
       rule: {
         input_code: "Please input HTTP Code"
       },
-      range_type:{
+      range_type: {
         value_eq: "value=",
         value_not_eq: "value!=",
-        value_contain:"include=",
+        value_contain: "include=",
         length_eq: "length=",
         length_not_eq: "length!=",
-        length_large_than:"length>",
-        length_shot_than:"length<",
+        length_large_than: "length>",
+        length_shot_than: "length<",
         regular_match: "Regular match",
       }
     },
@@ -1282,6 +1282,8 @@ export default {
         esb_title: "You can use ${name} or ${parent name.child name} to generate xml struct in report template",
       },
       document: {
+        open: "Open",
+        close: "Close",
         order: "Order",
         create_time_sort: "From back to front by create time",
         edit_time_positive_sequence: "From front to back by update time",
@@ -3043,8 +3045,8 @@ export default {
       delete: "DELETE",
       read: "READ",
     },
-    personal_information:{
-      name:'Setting',
+    personal_information: {
+      name: 'Setting',
       personal_setting: 'Personal Setting',
       api_keys: 'API Keys',
       edit_password: "EDIT PASSWORD",
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 13e2232a06..700df7d9ce 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -1287,6 +1287,8 @@ export default {
         esb_title: "可以在报文模板中使用${参数名} 或 ${父节点参数名.子节点参数名}来生成xml数据结构",
       },
       document: {
+        open: "展开",
+        close: "收起",
         order: "排序方式",
         create_time_sort: "按创建时间从后到前",
         edit_time_positive_sequence: "按更新时间从前到后",
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 8dfacf981a..64ea9d8a61 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -1287,6 +1287,8 @@ export default {
         esb_title: "可以在報文模板中使用${參數名} 或 ${父節點參數名.子節點參數名}來生成xml數據結構",
       },
       document: {
+        open: "展開",
+        close: "收起",
         order: "排序方式",
         create_time_sort: "按創建時間從後到前",
         edit_time_positive_sequence: "按更新時間從前到後",