diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 17488a4617..b2c75e7f32 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -1379,6 +1379,8 @@ export default {
                   this.onSampleError = obj.onSampleError;
                 }
                 this.dataProcessing(obj.hashTree);
+                 this.addNum(obj.hashTree);
+
 
                 this.scenarioDefinition = obj.hashTree;
               }
@@ -1635,6 +1637,63 @@ export default {
           });
         }
       }
+    },
+    addNum(hashTree){
+      let funcs = [];
+      for (let i = 0; i < hashTree.length; i++) {
+        let data = hashTree[i];
+        if(!data.num){
+          if(data.refType){
+            if(data.refType==='API'){
+              funcs.push(this.getApiDefinitionNumById(data.id));
+            }else if(data.refType==='CASE'){
+              funcs.push(this.getApiTestCaseNumById(data.id));
+            }
+          }else {
+            funcs.push(this.getScenarioNumById(data.id));
+          }
+        }
+      }
+      Promise.all(funcs).then(([result1, result2, result3]) =>{
+        for (let i = 0; i < hashTree.length; i++) {
+          let data = hashTree[i];
+          if(!data.num){
+            if(data.refType){
+              if(data.refType==='API'){
+                this.$set(data,'num',result1);
+              }else if(data.refType==='CASE'){
+                this.$set(data,'num',result2);
+              }
+            }else {
+              this.$set(data,'num',result3);
+            }
+          }
+        }
+      });
+    },
+    getApiDefinitionNumById(id){
+      return new Promise((resolve) => {
+        let url = '/api/definition/get/'+id;
+        this.$get(url, response => {
+          resolve(response.data.num);
+        });
+      });
+    },
+    getApiTestCaseNumById(id){
+      return new Promise((resolve) => {
+        let url = '/api/testcase/findById/'+id;
+        this.$get(url, response => {
+          resolve(response.data.num);
+        });
+      });
+    },
+    getScenarioNumById(id){
+      return new Promise((resolve) => {
+        let url = '/api/automation/getApiScenario/'+id;
+        this.$get(url, response => {
+          resolve(response.data.num);
+        });
+      });
     }
   }
 }
diff --git a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
index bd05dc5924..6ad362672a 100644
--- a/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue
@@ -5,10 +5,9 @@
         <div v-if="data.index" class="el-step__icon is-text enable-switch" :style="{'color': color, 'background-color': backgroundColor}">
           <div class="el-step__icon-inner">{{ data.index }}</div>
         </div>
+        <slot name="behindHeaderLeft" v-if="!isMax"></slot>
         <el-tag class="ms-left-btn" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{ title }}</el-tag>
-        <el-tag size="mini" v-if="data.method && !data.pluginId">{{ getMethod() }}</el-tag>
       </slot>
-      <slot name="behindHeaderLeft" v-if="!isMax"></slot>
       <span>
         <slot name="headerLeft">
           <i class="icon el-icon-arrow-right" :class="{'is-active': data.active}"  @click="active(data)" v-if="data.type!='scenario' && !isMax " @click.stop/>
@@ -22,9 +21,11 @@
             <el-tooltip placement="top" :content="data.name">
               <span>{{ data.name }}</span>
             </el-tooltip>
+            <el-tag size="mini" v-if="data.method && !data.pluginId" style="margin-left: 1rem">{{ getMethod() }}</el-tag>
+            <slot name = "afterTitle" v-if="data.num"/>
           </span>
-        </slot>
 
+        </slot>
         <slot name="scenarioEnable"/>
 
       </span>
@@ -192,6 +193,7 @@ export default {
 .ms-left-btn {
   font-size: 13px;
   margin-right: 15px;
+  margin-left: 10px;
 }
 
 .header-right {
diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
index bd3031ef44..0bf724e10b 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
@@ -16,6 +16,10 @@
         <span class="ms-tag ms-step-name-api">{{ getProjectName(request.projectId) }}</span>
       </template>
 
+      <template v-slot:afterTitle>
+        <span @click = "clickResource(request)">{{"（ ID: "+request.num+"）"}}</span>
+      </template>
+
       <template v-slot:behindHeaderLeft>
         <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Deleted'" type="danger">{{ $t('api_test.automation.reference_deleted') }}</el-tag>
         <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
@@ -140,6 +144,7 @@ import ApiBaseComponent from "../common/ApiBaseComponent";
 import ApiResponseComponent from "./ApiResponseComponent";
 import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo";
 import TemplateComponent from "@/business/components/track/plan/view/comonents/report/TemplateComponent/TemplateComponent";
+import {getUrl} from "@/business/components/api/automation/scenario/component/urlhelper";
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
@@ -265,7 +270,7 @@ export default {
     },
     displayTitle() {
       if (this.isApiImport) {
-        return this.$t('api_test.automation.api_list_import');
+        return this.request.refType==='API'?'API':'CASE';
       } else if (this.isExternalImport) {
         return this.$t('api_test.automation.external_import');
       } else if (this.isCustomizeReq) {
@@ -560,8 +565,54 @@ export default {
         const project = this.projectList.find(p => p.id === id);
         return project ? project.name : "";
       }
+    },
 
-    }
+    clickResource(resource) {
+      if(resource.refType&&resource.refType==='API'){
+        let definitionData = this.$router.resolve({
+          name: 'ApiDefinition',
+          params: {redirectID: getUUID(), dataType: "api", dataSelectRange: 'edit:' + resource.id}
+        });
+        window.open(definitionData.href, '_blank');
+      }else if(resource.refType&&resource.refType==='CASE'){
+        this.$get("/api/testcase/findById/" + resource.id, response => {
+          if (response.data) {
+            response.data.sourceId = resource.resourceId;
+            response.data.type = resource.type;
+            response.data.refType = resource.refType;
+            this.clickCase(response.data)
+          } else {
+            this.$error("接口用例场景场景已经被删除");
+          }
+        });
+      }
+
+    },
+    clickCase(resource) {
+      let uri = getUrl(resource);
+      let resourceId = resource.sourceId;
+      if (resourceId && resourceId.startsWith("\"" || resourceId.startsWith("["))) {
+        resourceId = JSON.parse(resource.sourceId);
+      }
+      if (resourceId instanceof Array) {
+        resourceId = resourceId[0];
+      }
+      this.$get('/user/update/currentByResourceId/' + resourceId, () => {
+        this.toPage(uri);
+      });
+    },
+    toPage(uri) {
+      let id = "new_a";
+      let a = document.createElement("a");
+      a.setAttribute("href", uri);
+      a.setAttribute("target", "_blank");
+      a.setAttribute("id", id);
+      document.body.appendChild(a);
+      a.click();
+
+      let element = document.getElementById(id);
+      element.parentNode.removeChild(element);
+    },
   }
 }
 </script>
@@ -608,7 +659,7 @@ export default {
 }
 
 .ms-tag {
-  margin-left: 10px;
+  margin-left: 0px;
 }
 
 .ms-step-debug-code {
diff --git a/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue b/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
index f00496b2c9..876461affc 100644
--- a/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue
@@ -13,7 +13,11 @@
     :show-btn="showBtn"
     color="#606266"
     background-color="#F4F4F5"
-    :title="$t('api_test.automation.scenario_import')">
+    title='场景'>
+
+    <template v-slot:afterTitle>
+      <span @click = "clickResource(scenario)">{{"（ ID: "+scenario.num+"）"}}</span>
+    </template>
 
     <template v-slot:behindHeaderLeft>
       <el-tag size="mini" class="ms-tag" v-if="scenario.referenced==='Deleted'" type="danger">{{ $t('api_test.automation.reference_deleted') }}</el-tag>
@@ -57,7 +61,8 @@ import MsTcpBasisParameters from "../../../definition/components/request/tcp/Tcp
 import MsDubboBasisParameters from "../../../definition/components/request/dubbo/BasisParameters";
 import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
 import ApiBaseComponent from "../common/ApiBaseComponent";
-import {getCurrentProjectID} from "@/common/js/utils";
+import {getCurrentProjectID, getUUID} from "@/common/js/utils";
+import {getUrl} from "@/business/components/api/automation/scenario/component/urlhelper";
 
 export default {
   name: "ApiScenarioComponent",
@@ -235,7 +240,15 @@ export default {
         return project ? project.name : "";
       }
 
-    }
+    },
+
+    clickResource(resource) {
+      let automationData = this.$router.resolve({
+        name: 'ApiAutomation',
+        params: {redirectID: getUUID(), dataType: "scenario", dataSelectRange: 'edit:' + resource.id}
+      });
+      window.open(automationData.href, '_blank');
+    },
   }
 }
 </script>
diff --git a/frontend/src/business/components/api/automation/scenario/component/urlhelper.js b/frontend/src/business/components/api/automation/scenario/component/urlhelper.js
new file mode 100644
index 0000000000..647c05bd24
--- /dev/null
+++ b/frontend/src/business/components/api/automation/scenario/component/urlhelper.js
@@ -0,0 +1,32 @@
+export function getUrl(d) {
+  let url = "/#";
+  let resourceId = d.sourceId;
+  if (resourceId && (resourceId.startsWith("\"") || resourceId.startsWith("["))) {
+    resourceId = JSON.parse(d.sourceId);
+  }
+  if (resourceId instanceof Array) {
+    if (resourceId.length === 1) {
+      resourceId = resourceId[0];
+    } else {
+      return url;
+    }
+  }
+  switch (d.type) {
+    case "HTTPSamplerProxy":
+      switch (d.refType){
+        case "API":
+          url += "/api/definition?resourceId=" + resourceId;
+        break;
+        case "CASE":
+          url += "/api/definition?caseId=" + d.id;
+        break;
+      }
+      break;
+    case "scenario":
+      url += "/api/automation?resourceId=" + resourceId;
+      break;
+    default:
+      break;
+  }
+  return url;
+}
diff --git a/frontend/src/business/components/api/definition/ApiDefinition.vue b/frontend/src/business/components/api/definition/ApiDefinition.vue
index 35c053dbdd..4d115c8a9b 100644
--- a/frontend/src/business/components/api/definition/ApiDefinition.vue
+++ b/frontend/src/business/components/api/definition/ApiDefinition.vue
@@ -646,6 +646,19 @@ export default {
       if (routeTestCase) {
         this.editApi(routeTestCase)
       }
+      let dataRange = this.$route.params.dataSelectRange;
+      let dataType = this.$route.params.dataType;
+      if(dataRange){
+        let selectParamArr = dataRange.split("edit:");
+        if (selectParamArr.length === 2) {
+          let scenarioId = selectParamArr[1];
+          if(dataType==='api'){
+            this.$get('/api/definition/get/' + scenarioId, (response) => {
+              this.editApi(response.data);
+            });
+          }
+        }
+      }
     },
     editApi(row) {
       const index = this.apiTabs.find(p => p.api && p.api.id === row.id);