fix(接口测试): 定义页面点击模块时要切换列表tab&定义页面调试模式下显示执行结果&修改样式问题

--bug=1038249 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001038249
--bug=1037030 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001037030
--bug=1037049 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001037049
--bug=1038227 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001038227

frontend/src/models/apiTest/scenario.ts

@@ -419,6 +419,7 @@ export interface ScenarioDetail extends Scenario {
   latest: boolean;
   modulePath: string;
   createUser: string;
+  createUserName: string;
   createTime: number;
   updateTime: number;
   updateUser: string;

frontend/src/views/api-test/components/batchAddKeyVal.vue

@@ -18,7 +18,7 @@
             size="16"
           />
           <template #content>
-            <div>{{ props?.addTypeText || t('apiTestDebug.batchAddParamsTip1') }}</div>
+            <div v-if="props?.addTypeText">{{ props?.addTypeText }}</div>
             <div v-if="!props.noParamType">{{ t('apiTestDebug.batchAddParamsTip2') }}</div>
             <div>{{ t('apiTestDebug.batchAddParamsTip3') }}</div>
           </template>
@@ -35,6 +35,11 @@
         :show-full-screen="false"
         :show-theme-change="false"
       >
+        <template v-if="!props?.addTypeText" #rightTitle>
+          <div class="text-xs text-[var(--color-text-4)]">
+            {{ t('apiTestDebug.batchAddParamsTip1') }}
+          </div>
+        </template>
       </MsCodeEditor>
     </div>
   </MsDrawer>

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

@@ -283,9 +283,11 @@
             <template #second>
               <response
                 v-show="showResponse"
+                ref="responseRef"
                 v-model:active-layout="activeLayout"
                 v-model:active-tab="requestVModel.responseActiveTab"
                 v-model:response-definition="requestVModel.responseDefinition"
+                :show-response-result-button="requestVModel.mode === 'debug'"
                 :is-http-protocol="isHttpProtocol"
                 :is-priority-local-exec="isPriorityLocalExec"
                 :request-url="requestVModel.url"
@@ -1340,6 +1342,8 @@
     requestVModel.value.executeLoading = false;
   }
 
+  const responseRef = ref<InstanceType<typeof response>>();
+
   watch(
     () => requestVModel.value.id,
     async () => {
@@ -1361,6 +1365,9 @@
         // 如果定义有参数BODY/QUERY/REST，用例默认tab是参数tab
         requestVModel.value.activeTab = contentTabList.value[1].value;
       }
+      if (!props.isCase) {
+        responseRef.value?.setActiveResponse(requestVModel.value.mode === 'debug' ? 'result' : 'content');
+      }
       if (props.request.isExecute && !requestVModel.value.executeLoading) {
         // 如果是执行操作打开接口详情，且该接口不在执行状态中，则立即执行
         execute(isPriorityLocalExec.value ? 'localExec' : 'serverExec');
@@ -1376,6 +1383,15 @@
     }
   );
 
+  watch(
+    () => requestVModel.value?.mode,
+    (val: 'debug' | 'definition' | undefined) => {
+      if (val) {
+        responseRef.value?.setActiveResponse(val === 'debug' ? 'result' : 'content');
+      }
+    }
+  );
+
   async function updateRequest() {
     try {
       if (!props.updateApi) return;

frontend/src/views/api-test/components/requestComposition/response/index.vue

@@ -24,10 +24,7 @@
               <icon-right :size="8" />
             </MsButton>
           </template>
-          <div
-            v-if="props.isEdit && props.requestResult?.responseResult?.responseCode"
-            class="ml-[4px] flex items-center"
-          >
+          <div v-if="props.isEdit && props.showResponseResultButton" class="ml-[4px] flex items-center">
             <MsButton
               type="text"
               :class="['font-medium', activeResponseType === 'content' ? '' : '!text-[var(--color-text-n4)]', '!mr-0']"
@@ -116,6 +113,7 @@
       isDefinition?: boolean;
       isResponseModel?: boolean;
       showEmpty?: boolean;
+      showResponseResultButton?: boolean; // 展示执行结果按钮
     }>(),
     {
       isExpanded: true,
@@ -212,6 +210,10 @@
       }
     }
   );
+
+  defineExpose({
+    setActiveResponse,
+  });
 </script>
 
 <style lang="less" scoped>

frontend/src/views/api-test/management/components/management/index.vue

@@ -210,10 +210,15 @@
     }
   );
 
+  // 切换到第一个tab
+  function changeActiveApiTabTofirst() {
+    activeApiTab.value = apiTabs.value[0] as RequestParam;
+  }
+
   // 下拉框切换
   function currentTabChange(val: any) {
     apiTabs.value[0].label = val === 'api' ? t('apiTestManagement.allApi') : t('case.allCase');
-    activeApiTab.value = apiTabs.value[0] as RequestParam;
+    changeActiveApiTabTofirst();
   }
 
   watch(
@@ -305,6 +310,7 @@
     refreshApiTable,
     handleApiUpdateFromModuleTree,
     handleDeleteApiFromModuleTree,
+    changeActiveApiTabTofirst,
   });
 </script>
 

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

@@ -106,6 +106,7 @@
   function handleNodeSelect(keys: string[], _offspringIds: string[]) {
     [activeModule.value] = keys;
     offspringIds.value = _offspringIds;
+    managementRef.value?.changeActiveApiTabTofirst();
   }
 
   function handleApiNodeClick(node: ModuleTreeNode) {

frontend/src/views/api-test/scenario/components/baseInfo.vue

@@ -62,8 +62,8 @@
       />
     </a-form-item>
     <template v-if="props.isEdit">
-      <a-form-item field="createUser" :label="t('apiScenario.table.columns.createUser')" class="mb-[16px]">
-        <a-input :model-value="(scenario as ScenarioDetail).createUser" disabled />
+      <a-form-item field="createUserName" :label="t('apiScenario.table.columns.createUser')" class="mb-[16px]">
+        <a-input :model-value="(scenario as ScenarioDetail).createUserName" disabled />
       </a-form-item>
       <a-form-item field="createTime" :label="t('apiScenario.table.columns.createTime')" class="mb-[16px]">
         <a-input :model-value="dayjs((scenario as ScenarioDetail).createTime).format('YYYY-MM-DD HH:mm:ss')" disabled />