UI Optimization

apps/frontend/src/components/json-schema/JsonSchemaEditor.vue

@@ -1,8 +1,19 @@
 <script lang="ts" setup>
 import type { LocalSchemaNode } from '@/types/json-schema'
+import { computed, getCurrentInstance } from 'vue'
 import { useApiEditorStore } from '@/stores/useApiEditorStore'
 import JsonSchemaNode from './JsonSchemaNode.vue'
 
+const emits = defineEmits<{
+  (e: 'delRoot'): void
+}>()
+
+const instance = getCurrentInstance()
+
+const allowDelRoot = computed(() => {
+  return !!instance?.vnode.props?.onDelRoot
+})
+
 const apiEditorStore = useApiEditorStore()
 const { setIsDirty } = apiEditorStore
 
@@ -93,8 +104,13 @@ function handleDeleteNode({ path }: { path: string }) {
   root.value.schemaChanged = true
   const pathArr = pathToArr(path)
 
-  if (pathArr.length === 0) {
-    console.warn('[JsonSchemaEditor] 删除节点失败：不能删除根节点')
+  if (pathArr.length === 1) {
+    if (allowDelRoot.value) {
+      emits('delRoot')
+    }
+    else {
+      console.warn('[JsonSchemaEditor] 删除节点失败：不能删除根节点', { path })
+    }
     return
   }
 
@@ -117,6 +133,7 @@ function handleDeleteNode({ path }: { path: string }) {
   <JsonSchemaNode
     :node="root"
     path=""
+    :allow-del-root="allowDelRoot"
     @add-node="handleAddNode"
     @update-node="handleUpdateNode"
     @delete-node="handleDeleteNode"

apps/frontend/src/components/json-schema/JsonSchemaNode.vue

@@ -35,6 +35,8 @@ const props = defineProps<{
   path: string
   /** 嵌套层级 */
   depth?: number
+  /** 是否允许删除根节点 */
+  allowDelRoot?: boolean
 }>()
 
 const emits = defineEmits<{
@@ -62,7 +64,11 @@ const showEmptyChildren = computed(() =>
   && (!props.node.children || props.node.children.length === 0),
 )
 
-const canDelete = computed(() => !props.node.isRoot && !props.node.isArrayItem)
+const canDelete = computed(() =>
+  props.allowDelRoot
+    ? !props.node.isArrayItem
+    : !props.node.isRoot && !props.node.isArrayItem,
+)
 
 const canAddSibling = computed(() => !props.node.isRoot && !props.node.isArrayItem)
 

apps/frontend/src/components/workbench/ApiSidebar.vue

@@ -9,7 +9,6 @@ import CloneApiDialog from './dialogs/CloneApiDialog.vue'
 import DeleteApiDialog from './dialogs/DeleteApiDialog.vue'
 import DeleteGroupDialog from './dialogs/DeleteGroupDialog.vue'
 import GroupFormDialog from './dialogs/GroupFormDialog.vue'
-import ImportOpenapiDialog from './dialogs/import/ImportOpenapiDialog.vue'
 
 const tabStore = useTabStore()
 
@@ -38,12 +37,6 @@ const apiToDelete = ref<ApiBrief | null>(null)
 const isCloneApiDialogOpen = ref(false)
 const apiToClone = ref<ApiBrief | null>(null)
 
-const isImportDialogOpen = ref(false)
-
-function handleImportOpenapi() {
-  isImportDialogOpen.value = true
-}
-
 function handleCreateGroup(parentId?: string) {
   groupDialogMode.value = 'create'
   groupDialogParentId.value = parentId
@@ -103,7 +96,6 @@ function handleDeleteApi(api: ApiBrief) {
       @select-api="handleSelectApi"
       @clone-api="handleCloneApi"
       @delete-api="handleDeleteApi"
-      @import-openapi="handleImportOpenapi"
     />
 
     <div
@@ -138,10 +130,6 @@ function handleDeleteApi(api: ApiBrief) {
       v-model:open="isCloneApiDialogOpen"
       :api="apiToClone"
     />
-
-    <ImportOpenapiDialog
-      v-model:open="isImportDialogOpen"
-    />
   </aside>
 </template>
 

apps/frontend/src/components/workbench/WorkbenchSidebar.vue

@@ -3,6 +3,7 @@ import {
   ChevronRight,
   Globe,
   Home,
+  Import,
   Settings,
 } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
@@ -25,6 +26,7 @@ import {
 } from '@/components/ui/tooltip'
 import { cn, getAbbreviation } from '@/lib/utils'
 import { useProjectStore } from '@/stores/useProjectStore'
+import ImportOpenapiDialog from './dialogs/import/ImportOpenapiDialog.vue'
 import ProjectSettingsSheet from './ProjectSettingsSheet.vue'
 
 const router = useRouter()
@@ -35,6 +37,7 @@ const { setCurEnvId } = projectStore
 
 const isSettingsSheetOpen = ref(false)
 const isEnvPopoverOpen = ref(false)
+const isImportDialogOpen = ref(false)
 
 function goBack() {
   router.push({ name: 'Dashboard' })
@@ -161,6 +164,22 @@ function getEnvColor(envName: string): string {
         </PopoverContent>
       </Popover>
 
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button
+            variant="ghost"
+            size="icon"
+            class="h-8 w-8 mt-1 text-muted-foreground hover:text-foreground"
+            @click="isImportDialogOpen = true"
+          >
+            <Import class="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          导入 OpenAPI
+        </TooltipContent>
+      </Tooltip>
+
       <Tooltip>
         <TooltipTrigger as-child>
           <Button
@@ -184,5 +203,9 @@ function getEnvColor(envName: string): string {
       v-model:open="isSettingsSheetOpen"
       :project="projectDetail"
     />
+
+    <ImportOpenapiDialog
+      v-model:open="isImportDialogOpen"
+    />
   </aside>
 </template>

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

@@ -50,6 +50,10 @@ watch(
   { immediate: true },
 )
 
+function handleDiscardChanges() {
+  apiEditorStore.discardChanges(props.api.id)
+}
+
 async function handleSave() {
   if (!apiTreeStore.projectId)
     return
@@ -96,15 +100,26 @@ function handleKeyDownSave(e: KeyboardEvent) {
         </span>
       </div>
 
-      <Button
-        size="sm"
-        :disabled="!isDirty || isSaving"
-        @click="handleSave"
-      >
-        <Loader2 v-if="isSaving" class="h-4 w-4 mr-1.5 animate-spin" />
-        <Save v-else class="h-4 w-4 mr-1.5" />
-        {{ isSaving ? '保存中...' : '保存' }}
-      </Button>
+      <div class="flex items-center gap-2">
+        <Button
+          v-if="isDirty"
+          size="sm"
+          variant="outline"
+          @click="handleDiscardChanges"
+        >
+          放弃修改
+        </Button>
+
+        <Button
+          size="sm"
+          :disabled="!isDirty || isSaving"
+          @click="handleSave"
+        >
+          <Loader2 v-if="isSaving" class="h-4 w-4 mr-1.5 animate-spin" />
+          <Save v-else class="h-4 w-4 mr-1.5" />
+          {{ isSaving ? '保存中...' : '保存' }}
+        </Button>
+      </div>
     </div>
 
     <Tabs v-model="activeTab" class="flex-1 flex flex-col overflow-hidden">

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

@@ -23,6 +23,7 @@ import {
 } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import { HTTP_STATUS_CODES, httpStatusLabels, resStatusStyles } from '@/constants/api'
+import { genRootSchemaNode } from '@/lib/json-schema'
 import { cn } from '@/lib/utils'
 import { useApiEditorStore } from '@/stores/useApiEditorStore'
 
@@ -90,6 +91,10 @@ function handleAdd() {
   expandedKeys.value.add(newId)
 }
 
+function handleAddBody(index: number) {
+  updateResponseBody(index, genRootSchemaNode())
+}
+
 function handleRemove(index: number) {
   const response = responses.value[index]
   if (response) {
@@ -105,6 +110,10 @@ function updateField<K extends keyof LocalApiResItem>(index: number, key: K, val
 function updateLocalSchema(index: number, schema: LocalSchemaNode) {
   updateResponseBody(index, schema)
 }
+
+function handleDelRoot(index: number) {
+  updateResponseBody(index, undefined)
+}
 </script>
 
 <template>
@@ -212,7 +221,23 @@ function updateLocalSchema(index: number, schema: LocalSchemaNode) {
                 v-if="response.body"
                 :model-value="response.body"
                 @update:model-value="updateLocalSchema(index, $event)"
+                @del-root="handleDelRoot(index)"
               />
+              <div v-else class="space-y-2">
+                <div class="text-center py-8 text-muted-foreground text-sm border rounded-md bg-muted/30">
+                  暂无响应体结构（void）
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  :disabled="disabled"
+                  class="w-full border-dashed"
+                  @click="handleAddBody(index)"
+                >
+                  <Plus class="h-4 w-4 mr-1.5" />
+                  添加响应体结构
+                </Button>
+              </div>
             </div>
           </div>
         </CollapsibleContent>

apps/frontend/src/components/workbench/api-tree/ApiTree.vue

@@ -27,7 +27,6 @@ const emits = defineEmits<{
   (e: 'deleteGroup', group: GroupNodeWithApis): void
   (e: 'cloneApi', api: ApiBrief): void
   (e: 'deleteApi', api: ApiBrief): void
-  (e: 'importOpenapi'): void
 }>()
 
 const apiTreeStore = useApiTreeStore()
@@ -109,7 +108,6 @@ onMounted(() => {
     <ApiTreeToolbar
       @create-api="handleToolbarCreateApi"
       @create-group="emits('createGroup')"
-      @import-openapi="emits('importOpenapi')"
     />
 
     <ScrollArea class="flex-1 px-2 min-h-0">

apps/frontend/src/components/workbench/api-tree/ApiTreeToolbar.vue

@@ -4,7 +4,6 @@ import {
   ChevronsUpDown,
   FilePlus,
   FolderPlus,
-  Import,
   RefreshCw,
   Search,
 } from 'lucide-vue-next'
@@ -23,7 +22,6 @@ import { useApiTreeStore } from '@/stores/useApiTreeStore'
 const emits = defineEmits<{
   (e: 'createGroup'): void
   (e: 'createApi'): void
-  (e: 'importOpenapi'): void
 }>()
 
 const apiTreeStore = useApiTreeStore()
@@ -143,24 +141,6 @@ watch(searchInput, (val) => {
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-
-      <TooltipProvider :delay-duration="300">
-        <Tooltip>
-          <TooltipTrigger as-child>
-            <Button
-              variant="ghost"
-              size="icon"
-              class="h-7 w-7"
-              @click="emits('importOpenapi')"
-            >
-              <Import class="h-3.5 w-3.5" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">
-            导入 OpenAPI
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
     </div>
   </div>
 </template>