fix(接口调试): 组件显隐切换问题解决

frontend/config/vite.config.prod.ts

@@ -9,7 +9,6 @@ export default mergeConfig(
     mode: 'production',
     plugins: [configCompressPlugin('gzip'), configVisualizerPlugin(), configImageminPlugin()],
     build: {
-      minify: false, // TODO:临时关闭，排查问题
       rollupOptions: {
         output: {
           manualChunks: {

frontend/package.json

@@ -9,6 +9,7 @@
     "dev": "vite --config ./config/vite.config.dev.ts",
     "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
     "build:local": "vue-tsc --noEmit &&  vite build --config ./config/vite.config.prod.ts --mode development",
+    "build:localProd": "vue-tsc --noEmit &&  vite build --config ./config/vite.config.prod.ts --mode prod",
     "report": "cross-env REPORT=true npm run build",
     "preview": "npm run build && vite preview --host",
     "type:check": "vue-tsc --noEmit --skipLibCheck",
@@ -71,7 +72,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "sortablejs": "^1.15.0",
     "tippy.js": "^6.3.7",
-    "vue": "^3.4.15",
+    "vue": "^3.4.20",
     "vue-dompurify-html": "^4.1.4",
     "vue-draggable-plus": "^0.3.5",
     "vue-echarts": "^6.6.1",

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

@@ -130,11 +130,8 @@
                 />
               </div>
               <div class="tab-pane-container">
-                <a-spin
+                <div v-show="requestVModel.activeTab === RequestComposition.PLUGIN">
-                  v-if="requestVModel.activeTab === RequestComposition.PLUGIN"
+                  <a-spin :loading="pluginLoading" class="min-h-[100px] w-full">
-                  :loading="pluginLoading"
-                  class="min-h-[100px] w-full"
-                >
                     <MsFormCreate
                       v-model:api="fApi"
                       :rule="currentPluginScript"
@@ -142,58 +139,62 @@
                       @change="handlePluginFormChange"
                     />
                   </a-spin>
+                </div>
+                <div v-show="requestVModel.activeTab === RequestComposition.HEADER">
                   <debugHeader
-                  v-if="requestVModel.activeTab === RequestComposition.HEADER"
+                    v-show="requestVModel.activeTab === RequestComposition.HEADER"
                     v-model:params="requestVModel.headers"
                     :layout="activeLayout"
                     :second-box-height="secondBoxHeight"
                     @change="handleActiveDebugChange"
                   />
+                </div>
+                <div v-show="requestVModel.activeTab === RequestComposition.BODY">
                   <debugBody
-                  v-else-if="requestVModel.activeTab === RequestComposition.BODY"
                     v-model:params="requestVModel.body"
                     :layout="activeLayout"
                     :second-box-height="secondBoxHeight"
                     :upload-temp-file-api="props.uploadTempFileApi"
                     @change="handleActiveDebugChange"
                   />
+                </div>
+                <div v-show="requestVModel.activeTab === RequestComposition.QUERY">
                   <debugQuery
-                  v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
                     v-model:params="requestVModel.query"
                     :layout="activeLayout"
                     :second-box-height="secondBoxHeight"
                     @change="handleActiveDebugChange"
                   />
+                </div>
+                <div v-show="requestVModel.activeTab === RequestComposition.REST">
                   <debugRest
-                  v-else-if="requestVModel.activeTab === RequestComposition.REST"
                     v-model:params="requestVModel.rest"
                     :layout="activeLayout"
                     :second-box-height="secondBoxHeight"
                     @change="handleActiveDebugChange"
                   />
+                </div>
+                <div v-show="requestVModel.activeTab === RequestComposition.PRECONDITION">
                   <precondition
-                  v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
                     v-model:config="requestVModel.children[0].preProcessorConfig"
                     @change="handleActiveDebugChange"
                   />
+                </div>
+                <div v-show="requestVModel.activeTab === RequestComposition.POST_CONDITION">
                   <postcondition
-                  v-else-if="requestVModel.activeTab === RequestComposition.POST_CONDITION"
                     v-model:config="requestVModel.children[0].postProcessorConfig"
                     :response="requestVModel.response.requestResults[0]?.responseResult.body"
                     :layout="activeLayout"
                     :second-box-height="secondBoxHeight"
                     @change="handleActiveDebugChange"
                   />
-                <debugAuth
+                </div>
-                  v-else-if="requestVModel.activeTab === RequestComposition.AUTH"
+                <div v-show="requestVModel.activeTab === RequestComposition.AUTH">
-                  v-model:params="requestVModel.authConfig"
+                  <debugAuth v-model:params="requestVModel.authConfig" @change="handleActiveDebugChange" />
-                  @change="handleActiveDebugChange"
+                </div>
-                />
+                <div v-show="requestVModel.activeTab === RequestComposition.SETTING">
-                <debugSetting
+                  <debugSetting v-model:params="requestVModel.otherConfig" @change="handleActiveDebugChange" />
-                  v-else-if="requestVModel.activeTab === RequestComposition.SETTING"
+                </div>
-                  v-model:params="requestVModel.otherConfig"
-                  @change="handleActiveDebugChange"
-                />
               </div>
             </div>
           </template>