style(接口测试): 定义预览-编辑器复制前置在切换左侧&代码编辑器样式

frontend/src/assets/style/arco-reset.less

@@ -488,6 +488,7 @@
 
 /** radio **/
 .arco-radio-group-button {
+  padding: 2px;
   .arco-radio-button-content {
     @apply break-keep;
   }
@@ -496,6 +497,7 @@
   .arco-radio-button {
     @apply bg-transparent;
 
+    margin: 0;
     line-height: 20px;
   }
   .arco-radio-checked {

frontend/src/components/pure/ms-code-editor/index.vue

@@ -56,7 +56,7 @@
       </div>
     </div>
     <!-- 这里的 32px 是顶部标题的 32px -->
-    <div class="flex w-full flex-1 flex-row rounded-[var(--border-radius-small)]">
+    <div class="flex w-full flex-1 flex-row overflow-hidden rounded-[var(--border-radius-small)]">
       <div
         ref="codeContainerRef"
         :class="['ms-code-editor', isFullScreen ? 'ms-code-editor-full-screen' : '', currentTheme]"

frontend/src/views/api-test/management/components/management/api/preview/detail.vue

@@ -32,11 +32,25 @@
           <div v-if="previewDetail.headers.length > 0" class="detail-item">
             <div class="detail-item-title">
               <div class="detail-item-title-text">{{ t('apiTestManagement.requestHeader') }}</div>
+              <div class="detail-item-title-right">
+                <a-button
+                  v-show="headerShowType === 'raw'"
+                  type="outline"
+                  class="arco-btn-outline--secondary mr-[12px] p-[0_8px]"
+                  size="small"
+                  @click="copyScript(headerRawCode)"
+                >
+                  <template #icon>
+                    <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" />
+                  </template>
+                  {{ t('common.copy') }}
+                </a-button>
                 <a-radio-group v-model:model-value="headerShowType" type="button" size="mini">
                   <a-radio value="table">Table</a-radio>
                   <a-radio value="raw">Raw</a-radio>
                 </a-radio-group>
               </div>
+            </div>
             <MsFormTable
               v-show="headerShowType === 'table'"
               :columns="headerColumns"
@@ -51,30 +65,31 @@
               :show-full-screen="false"
               :show-theme-change="false"
               read-only
-            >
+            />
-              <template #rightTitle>
-                <a-button
-                  type="outline"
-                  class="arco-btn-outline--secondary p-[0_8px]"
-                  size="mini"
-                  @click="copyScript(headerRawCode)"
-                >
-                  <template #icon>
-                    <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
-                  </template>
-                </a-button>
-              </template>
-            </MsCodeEditor>
             <a-divider type="dashed" :margin="0" class="!mt-[16px] border-[var(--color-text-n8)]" />
           </div>
           <div v-if="previewDetail.query.length > 0" class="detail-item">
             <div class="detail-item-title">
               <div class="detail-item-title-text">Query</div>
+              <div class="detail-item-title-right">
+                <a-button
+                  v-show="queryShowType === 'raw'"
+                  type="outline"
+                  class="arco-btn-outline--secondary mr-[12px] p-[0_8px]"
+                  size="small"
+                  @click="copyScript(queryRawCode)"
+                >
+                  <template #icon>
+                    <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" />
+                  </template>
+                  {{ t('common.copy') }}
+                </a-button>
                 <a-radio-group v-model:model-value="queryShowType" type="button" size="mini">
                   <a-radio value="table">Table</a-radio>
                   <a-radio value="raw">Raw</a-radio>
                 </a-radio-group>
               </div>
+            </div>
             <MsFormTable
               v-show="queryShowType === 'table'"
               :columns="queryRestColumns"
@@ -91,30 +106,31 @@
               :show-full-screen="false"
               :show-theme-change="false"
               read-only
-            >
+            />
-              <template #rightTitle>
-                <a-button
-                  type="outline"
-                  class="arco-btn-outline--secondary p-[0_8px]"
-                  size="mini"
-                  @click="copyScript(queryRawCode)"
-                >
-                  <template #icon>
-                    <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
-                  </template>
-                </a-button>
-              </template>
-            </MsCodeEditor>
             <a-divider type="dashed" :margin="0" class="!mt-[16px] border-[var(--color-text-n8)]" />
           </div>
           <div v-if="previewDetail.rest.length > 0" class="detail-item">
             <div class="detail-item-title">
               <div class="detail-item-title-text">REST</div>
+              <div class="detail-item-title-right">
+                <a-button
+                  v-show="restShowType === 'raw'"
+                  type="outline"
+                  class="arco-btn-outline--secondary mr-[12px] p-[0_8px]"
+                  size="small"
+                  @click="copyScript(restRawCode)"
+                >
+                  <template #icon>
+                    <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" />
+                  </template>
+                  {{ t('common.copy') }}
+                </a-button>
                 <a-radio-group v-model:model-value="restShowType" type="button" size="mini">
                   <a-radio value="table">Table</a-radio>
                   <a-radio value="raw">Raw</a-radio>
                 </a-radio-group>
               </div>
+            </div>
             <MsFormTable
               v-show="restShowType === 'table'"
               :columns="queryRestColumns?.filter((e) => e.key !== '')"
@@ -131,20 +147,7 @@
               :show-full-screen="false"
               :show-theme-change="false"
               read-only
-            >
+            />
-              <template #rightTitle>
-                <a-button
-                  type="outline"
-                  class="arco-btn-outline--secondary p-[0_8px]"
-                  size="mini"
-                  @click="copyScript(restRawCode)"
-                >
-                  <template #icon>
-                    <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
-                  </template>
-                </a-button>
-              </template>
-            </MsCodeEditor>
             <a-divider type="dashed" :margin="0" class="!mt-[16px] border-[var(--color-text-n8)]" />
           </div>
           <div v-if="previewDetail.body.bodyType !== RequestBodyFormat.NONE" class="detail-item">
@@ -152,16 +155,31 @@
               <div class="detail-item-title-text">
                 {{ `${t('apiTestManagement.requestBody')}-${previewDetail.body.bodyType}` }}
               </div>
+              <div v-if="previewDetail.body.bodyType === RequestBodyFormat.JSON" class="detail-item-title-right">
+                <a-button
+                  v-show="bodyShowType === 'json' || props.isCase"
+                  type="outline"
+                  class="arco-btn-outline--secondary p-[0_8px]"
+                  size="small"
+                  @click="copyScript(bodyCode)"
+                >
+                  <template #icon>
+                    <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" />
+                  </template>
+                  {{ t('common.copy') }}
+                </a-button>
                 <a-radio-group
-                v-if="previewDetail.body.bodyType === RequestBodyFormat.JSON && !props.isCase"
+                  v-if="!props.isCase"
                   v-model:model-value="bodyShowType"
                   type="button"
                   size="mini"
+                  class="ml-[12px]"
                 >
                   <a-radio value="schema">Schema</a-radio>
                   <a-radio value="json">JSON</a-radio>
                 </a-radio-group>
               </div>
+            </div>
             <!--            <div
               v-if="previewDetail.body.bodyType === RequestBodyFormat.NONE"
               class="flex h-[100px] items-center justify-center rounded-[var(&#45;&#45;border-radius-small)] bg-[var(&#45;&#45;color-text-n9)] text-[var(&#45;&#45;color-text-4)]"
@@ -203,20 +221,7 @@
                 :show-full-screen="false"
                 :show-theme-change="false"
                 read-only
-              >
+              />
-                <template #rightTitle>
-                  <a-button
-                    type="outline"
-                    class="arco-btn-outline--secondary p-[0_8px]"
-                    size="mini"
-                    @click="copyScript(bodyCode)"
-                  >
-                    <template #icon>
-                      <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
-                    </template>
-                  </a-button>
-                </template>
-              </MsCodeEditor>
             </template>
             <a-divider type="dashed" :margin="0" class="!mt-[16px] border-[var(--color-text-n8)]" />
           </div>
@@ -224,11 +229,25 @@
         <div v-else class="detail-item">
           <div class="detail-item-title">
             <div class="detail-item-title-text">{{ t('apiTestManagement.requestData') }}</div>
+            <div class="detail-item-title-right">
+              <a-button
+                v-show="pluginShowType === 'raw'"
+                type="outline"
+                class="arco-btn-outline--secondary mr-[12px] p-[0_8px]"
+                size="small"
+                @click="copyScript(pluginRawCode)"
+              >
+                <template #icon>
+                  <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" />
+                </template>
+                {{ t('common.copy') }}
+              </a-button>
               <a-radio-group v-model:model-value="pluginShowType" type="button" size="mini">
                 <a-radio value="table">Table</a-radio>
                 <a-radio value="raw">Raw</a-radio>
               </a-radio-group>
             </div>
+          </div>
           <MsFormTable
             v-show="pluginShowType === 'table'"
             :columns="pluginTableColumns"
@@ -243,20 +262,7 @@
             :show-full-screen="false"
             :show-theme-change="false"
             read-only
-          >
+          />
-            <template #rightTitle>
-              <a-button
-                type="outline"
-                class="arco-btn-outline--secondary p-[0_8px]"
-                size="mini"
-                @click="copyScript(pluginRawCode)"
-              >
-                <template #icon>
-                  <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
-                </template>
-              </a-button>
-            </template>
-          </MsCodeEditor>
           <a-divider type="dashed" :margin="0" class="!mt-[16px] border-[var(--color-text-n8)]" />
         </div>
       </div>
@@ -304,7 +310,29 @@
             <div class="detail-item-title-text">
               {{ `${t('apiTestDebug.responseBody')}-${activeResponse?.body.bodyType}` }}
             </div>
-            <div v-if="activeResponse?.body.bodyType === ResponseBodyFormat.JSON" class="flex items-center gap-[8px]">
+            <div class="detail-item-title-right">
+              <a-button
+                v-show="
+                  !(
+                    activeResponse?.body.bodyType === ResponseBodyFormat.BINARY ||
+                    (activeResponse?.body.bodyType === ResponseBodyFormat.JSON &&
+                      activeResponse.body.jsonBody.enableJsonSchema)
+                  )
+                "
+                type="outline"
+                class="arco-btn-outline--secondary p-[0_8px]"
+                size="small"
+                @click="copyScript(responseCode || '')"
+              >
+                <template #icon>
+                  <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" />
+                </template>
+                {{ t('common.copy') }}
+              </a-button>
+              <div
+                v-if="activeResponse?.body.bodyType === ResponseBodyFormat.JSON"
+                class="ml-[12px] flex items-center gap-[8px]"
+              >
                 <MsButton
                   type="text"
                   class="!mr-0"
@@ -332,6 +360,7 @@
                 </MsButton>
               </div>
             </div>
+          </div>
           <MsFormTable
             v-if="activeResponse?.body.bodyType === ResponseBodyFormat.BINARY"
             :columns="responseBodyColumns"
@@ -354,20 +383,7 @@
             :show-full-screen="false"
             :show-theme-change="false"
             read-only
-          >
+          />
-            <template #rightTitle>
-              <a-button
-                type="outline"
-                class="arco-btn-outline--secondary p-[0_8px]"
-                size="mini"
-                @click="copyScript(responseCode || '')"
-              >
-                <template #icon>
-                  <MsIcon type="icon-icon_copy_outlined" class="text-var(--color-text-4)" size="12" />
-                </template>
-              </a-button>
-            </template>
-          </MsCodeEditor>
         </div>
         <div v-if="activeResponse?.headers && activeResponse?.headers.length > 0" class="detail-item">
           <div class="detail-item-title">
@@ -935,6 +951,12 @@
 
         color: var(--color-text-1);
       }
+      .detail-item-title-right {
+        @apply flex items-center;
+      }
+    }
+    :deep(.ms-code-editor-container) {
+      padding: 0;
     }
   }
   .response-tab {