fix: API Response UI Error

Author: nonhana

apps/frontend/src/components/workbench/api-editor/ApiEditor.vue

@@ -78,7 +78,7 @@ watch([apiId, projectId], ([curApiId, curProjectId]) => {
   <div class="h-full bg-background">
     <div
       v-if="isLoading"
-      class="flex-1 flex items-center justify-center"
+      class="flex items-center justify-center h-full"
     >
       <div class="flex flex-col items-center gap-3 text-muted-foreground">
         <Loader2 class="h-8 w-8 animate-spin" />
@@ -99,7 +99,7 @@ watch([apiId, projectId], ([curApiId, curProjectId]) => {
     <Tabs
       v-else-if="isLoaded && apiDetail"
       v-model="activeTab"
-      class="flex-1 flex flex-col h-full"
+      class="flex-1 flex flex-col size-full"
     >
       <div class="border-b px-4 py-2 bg-muted/20">
         <TabsList class="h-10 bg-transparent p-0 gap-1">

apps/frontend/src/components/workbench/api-editor/doc/ApiRequestBody.vue

@@ -4,7 +4,7 @@ import { FileJson, FormInput } from 'lucide-vue-next'
 import { computed } from 'vue'
 import JsonSchemaPreviewer from '@/components/json-schema/JsonSchemaPreviewer.vue'
 import { Badge } from '@/components/ui/badge'
-import { BODY_NAME_MAP, requestBodyTypeLabels } from '@/constants/api'
+import { CONTENT_TYPE_MAP, requestBodyTypeLabels } from '@/constants/api'
 import ParamTable from './ParamTable.vue'
 
 const props = defineProps<{
@@ -42,8 +42,8 @@ const isFormType = computed(() =>
         <Badge variant="outline" class="font-mono text-xs">
           {{ typeLabel }}
         </Badge>
-        <Badge v-if="BODY_NAME_MAP[body!.type]" variant="secondary" class="font-mono text-xs">
-          {{ BODY_NAME_MAP[body!.type] }}
+        <Badge v-if="CONTENT_TYPE_MAP[body!.type]" variant="secondary" class="font-mono text-xs">
+          {{ CONTENT_TYPE_MAP[body!.type] }}
         </Badge>
       </div>
     </div>

apps/frontend/src/components/workbench/api-editor/editor/RequestBodyEditor.vue

@@ -9,7 +9,7 @@ import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Textarea } from '@/components/ui/textarea'
 import {
-  BODY_NAME_MAP,
+  CONTENT_TYPE_MAP,
   FORM_DATA_TYPES,
   PARAM_TYPES,
   REQUEST_BODY_TYPES,
@@ -63,8 +63,8 @@ const isNoneType = computed(() => currentType.value === 'none')
     <div class="space-y-3">
       <div class="flex items-center gap-3 h-6">
         <Label>请求体类型</Label>
-        <Badge v-if="BODY_NAME_MAP[currentType]" variant="outline" class="font-mono text-xs">
-          {{ BODY_NAME_MAP[currentType] }}
+        <Badge v-if="CONTENT_TYPE_MAP[currentType]" variant="outline" class="font-mono text-xs">
+          {{ CONTENT_TYPE_MAP[currentType] }}
         </Badge>
       </div>
 

apps/frontend/src/components/workbench/api-runner/ResponsePanel.vue

@@ -69,26 +69,26 @@ function formatSize(bytes: number): string {
       </div>
     </div>
 
-    <div class="min-h-60 flex-1 overflow-hidden">
+    <div class="min-h-60 grid place-items-center">
       <div
         v-if="runnerStore.isLoading"
-        class="h-full flex flex-col items-center justify-center gap-3 text-muted-foreground"
+        class="flex flex-col items-center gap-3 text-muted-foreground"
       >
         <Loader2 class="h-8 w-8 animate-spin" />
         <span class="text-sm">请求中...</span>
       </div>
 
       <div
         v-else-if="runnerStore.status === 'error'"
-        class="h-full flex flex-col items-center justify-center gap-3 text-destructive"
+        class="flex flex-col items-center gap-3 text-destructive"
       >
         <AlertCircle class="h-8 w-8" />
         <span class="text-sm">{{ runnerStore.errorMessage ?? '请求失败' }}</span>
       </div>
 
       <div
         v-else-if="runnerStore.status === 'idle'"
-        class="h-full flex flex-col items-center justify-center gap-3 text-muted-foreground"
+        class="flex flex-col items-center gap-3 text-muted-foreground"
       >
         <Code class="h-8 w-8" />
         <span class="text-sm">点击「发送请求」获取响应</span>
@@ -97,7 +97,7 @@ function formatSize(bytes: number): string {
       <Tabs
         v-else
         v-model="activeTab"
-        class="h-full flex flex-col"
+        class="flex flex-col w-full"
       >
         <TabsList class="bg-transparent m-2">
           <TabsTrigger
@@ -111,7 +111,7 @@ function formatSize(bytes: number): string {
           </TabsTrigger>
         </TabsList>
 
-        <div class="flex-1 overflow-hidden">
+        <div class="m-2">
           <TabsContent value="body" class="h-full mt-0">
             <ResponseBody />
           </TabsContent>

apps/frontend/src/components/workbench/api-runner/response/CurlGenerator.vue

@@ -1,59 +1,16 @@
 <script lang="ts" setup>
-import { Check, Copy } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { toast } from 'vue-sonner'
-import { Button } from '@/components/ui/button'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Textarea } from '@/components/ui/textarea'
+import CodeBlock from '@/components/common/CodeBlock.vue'
 import { useApiRunnerStore } from '@/stores/useApiRunnerStore'
 
 const runnerStore = useApiRunnerStore()
 const { curlCommand } = storeToRefs(runnerStore)
-
-const copied = ref(false)
-
-async function copyToClipboard() {
-  try {
-    await navigator.clipboard.writeText(curlCommand.value)
-    copied.value = true
-    toast.success('已复制到剪贴板')
-
-    setTimeout(() => {
-      copied.value = false
-    }, 2000)
-  }
-  catch (error) {
-    console.error('复制失败', error)
-    toast.error('复制失败')
-  }
-}
 </script>
 
 <template>
-  <ScrollArea class="h-full">
-    <div class="p-4 space-y-3">
-      <div class="flex items-center justify-between">
-        <p class="text-sm text-muted-foreground">
-          根据当前配置生成的 cURL 命令
-        </p>
-        <Button
-          variant="outline"
-          size="sm"
-          class="gap-1.5"
-          @click="copyToClipboard"
-        >
-          <Check v-if="copied" class="h-4 w-4 text-emerald-500" />
-          <Copy v-else class="h-4 w-4" />
-          {{ copied ? '已复制' : '复制' }}
-        </Button>
-      </div>
-
-      <Textarea
-        v-model="curlCommand"
-        readonly
-        class="font-mono text-sm min-h-[200px] resize-none bg-muted/30"
-      />
-    </div>
-  </ScrollArea>
+  <CodeBlock
+    :code="curlCommand"
+    lang="shellscript"
+    title="根据当前配置生成的 cURL 命令"
+  />
 </template>

apps/frontend/src/components/workbench/api-runner/response/ResponseBody.vue

@@ -27,7 +27,5 @@ const isJson = computed(() => {
 </script>
 
 <template>
-  <div class="m-2">
-    <CodeBlock :code="formattedBody" :lang="isJson ? 'json' : 'plaintext'" />
-  </div>
+  <CodeBlock :code="formattedBody" :lang="isJson ? 'json' : 'plaintext'" />
 </template>

apps/frontend/src/components/workbench/api-runner/response/ResponseHeaders.vue

@@ -23,37 +23,35 @@ const headersList = computed(() => {
 
 <template>
   <ScrollArea class="h-full">
-    <div class="p-4">
-      <Table>
-        <TableHeader>
-          <TableRow class="hover:bg-transparent">
-            <TableHead class="w-[200px]">
-              Header
-            </TableHead>
-            <TableHead>Value</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow
-            v-for="header in headersList"
-            :key="header.key"
-            class="hover:bg-muted/30"
-          >
-            <TableCell class="font-mono text-sm font-medium">
-              {{ header.key }}
-            </TableCell>
-            <TableCell class="font-mono text-sm text-muted-foreground break-all">
-              {{ header.value }}
-            </TableCell>
-          </TableRow>
+    <Table class="table-fixed w-full">
+      <TableHeader>
+        <TableRow class="hover:bg-transparent">
+          <TableHead class="w-60">
+            Header
+          </TableHead>
+          <TableHead>Value</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow
+          v-for="header in headersList"
+          :key="header.key"
+          class="hover:bg-muted/30"
+        >
+          <TableCell class="font-mono text-sm font-medium">
+            {{ header.key }}
+          </TableCell>
+          <TableCell class="font-mono text-sm text-muted-foreground break-all whitespace-normal">
+            {{ header.value }}
+          </TableCell>
+        </TableRow>
 
-          <TableRow v-if="headersList.length === 0">
-            <TableCell colspan="2" class="text-center text-muted-foreground py-8">
-              暂无响应头
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-    </div>
+        <TableRow v-if="headersList.length === 0">
+          <TableCell colspan="2" class="text-center text-muted-foreground py-8">
+            暂无响应头
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
   </ScrollArea>
 </template>

apps/frontend/src/constants/api.ts

@@ -145,7 +145,7 @@ export const HEADER_PARAMS = [
 ] as const
 
 /** 请求体类型名称映射 */
-export const BODY_NAME_MAP: Record<RequestBodyType, string> = {
+export const CONTENT_TYPE_MAP: Record<RequestBodyType, string> = {
   'json': 'application/json',
   'form-data': 'multipart/form-data',
   'x-www-form-urlencoded': 'application/x-www-form-urlencoded',

apps/frontend/src/stores/useApiRunnerStore.ts

@@ -11,6 +11,7 @@ import type {
 import { defineStore, storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { proxyApi } from '@/api/proxy'
+import { CONTENT_TYPE_MAP } from '@/constants/api'
 import { convertToRuntimeParam, createEmptyRuntimeParam, generateCurl } from '@/lib/api-runner'
 import { useProjectStore } from './useProjectStore'
 
@@ -88,6 +89,11 @@ export const useApiRunnerStore = defineStore('apiRunner', () => {
       }
     }
 
+    // 添加 Content-Type 头
+    if (body.value.type) {
+      result['Content-Type'] = CONTENT_TYPE_MAP[body.value.type]
+    }
+
     // 添加认证头
     if (auth.value.type === 'bearer' && auth.value.bearerToken) {
       result.Authorization = `Bearer ${auth.value.bearerToken}`

apps/frontend/src/views/workbench/ApiDetailView.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useRouteParams } from '@vueuse/router'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import ApiEditor from '@/components/workbench/api-editor/ApiEditor.vue'
@@ -10,12 +10,7 @@ import { useApiTreeStore } from '@/stores/useApiTreeStore'
 import { useTabStore } from '@/stores/useTabStore'
 
 const tabStore = useTabStore()
-const { clearTabsDirty } = tabStore
-
-// 挂载时清除标签页的脏状态
-onMounted(() => {
-  clearTabsDirty()
-})
+// const { clearTabsDirty } = tabStore
 
 const apiTreeStore = useApiTreeStore()
 
@@ -118,7 +113,7 @@ function handleDragEnd() {
 </script>
 
 <template>
-  <div class="flex-1 flex flex-col h-full">
+  <div class="flex-1 flex flex-col min-w-0">
     <div class="h-9 border-b border-border flex items-center bg-muted/30">
       <ScrollArea orientation="horizontal" class="flex-1">
         <div class="flex items-center h-full">