From ea44035ffc96e123a9b838d09d18a07ebe946f64 Mon Sep 17 00:00:00 2001
From: non_hana <nonhana@outlook.com>
Date: Fri, 30 Jan 2026 11:44:52 +0800
Subject: [PATCH 1/3] feat: allow void response

---
 .../json-schema/JsonSchemaEditor.vue          | 21 ++++++++++++++--
 .../components/json-schema/JsonSchemaNode.vue |  8 +++++-
 .../api-editor/editor/ResponsesEditor.vue     | 25 +++++++++++++++++++
 apps/frontend/src/stores/useApiEditorStore.ts | 12 ++++++---
 4 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/json-schema/JsonSchemaEditor.vue b/apps/frontend/src/components/json-schema/JsonSchemaEditor.vue
index 49d6bfd..03153cc 100644
--- a/apps/frontend/src/components/json-schema/JsonSchemaEditor.vue
+++ b/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"
diff --git a/apps/frontend/src/components/json-schema/JsonSchemaNode.vue b/apps/frontend/src/components/json-schema/JsonSchemaNode.vue
index 9ef7869..3a313b1 100644
--- a/apps/frontend/src/components/json-schema/JsonSchemaNode.vue
+++ b/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)
 
diff --git a/apps/frontend/src/components/workbench/api-editor/editor/ResponsesEditor.vue b/apps/frontend/src/components/workbench/api-editor/editor/ResponsesEditor.vue
index 41c7416..b23d8c2 100644
--- a/apps/frontend/src/components/workbench/api-editor/editor/ResponsesEditor.vue
+++ b/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>
diff --git a/apps/frontend/src/stores/useApiEditorStore.ts b/apps/frontend/src/stores/useApiEditorStore.ts
index ff3a107..7cad3be 100644
--- a/apps/frontend/src/stores/useApiEditorStore.ts
+++ b/apps/frontend/src/stores/useApiEditorStore.ts
@@ -519,15 +519,21 @@ export const useApiEditorStore = defineStore('apiEditor', () => {
   }
 
   /** 更新响应体 Schema */
-  function updateResponseBody(index: number, schema: LocalSchemaNode) {
+  function updateResponseBody(index: number, schema: LocalSchemaNode | undefined) {
     if (!currentApiId.value)
       return
 
     const cache = getCurrentCache()
     const response = cache.data.responses[index]
     if (response) {
-      response.body = schema
-      // 注意：JsonSchemaEditor 内部已经调用了 markDirty，这里不重复调用
+      if (schema) {
+        response.body = schema
+      }
+      // 显式设置 schema 为 undefined 意为删除响应体
+      else {
+        delete response.body
+      }
+      markDirty()
     }
   }
 

From fa3a36afd201dda02a439a348f5e8f8c60975fe0 Mon Sep 17 00:00:00 2001
From: non_hana <nonhana@outlook.com>
Date: Fri, 30 Jan 2026 13:35:28 +0800
Subject: [PATCH 2/3] feat: add discard api change button

---
 .../workbench/api-editor/ApiEditView.vue      | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/components/workbench/api-editor/ApiEditView.vue b/apps/frontend/src/components/workbench/api-editor/ApiEditView.vue
index 997859c..cbbf830 100644
--- a/apps/frontend/src/components/workbench/api-editor/ApiEditView.vue
+++ b/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">

From e4b211679c5b284f2b5634bb2dec418c0eee31d0 Mon Sep 17 00:00:00 2001
From: non_hana <nonhana@outlook.com>
Date: Fri, 30 Jan 2026 14:24:53 +0800
Subject: [PATCH 3/3] refactor: import open api btn position change

---
 .../src/components/workbench/ApiSidebar.vue   |  12 --
 .../components/workbench/WorkbenchSidebar.vue |  23 ++++
 .../components/workbench/api-tree/ApiTree.vue |   2 -
 .../workbench/api-tree/ApiTreeToolbar.vue     |  20 ---
 .../dialogs/import/ImportOpenapiPreview.vue   | 126 ++++++++----------
 apps/frontend/src/stores/useApiTreeStore.ts   |  16 +++
 6 files changed, 97 insertions(+), 102 deletions(-)

diff --git a/apps/frontend/src/components/workbench/ApiSidebar.vue b/apps/frontend/src/components/workbench/ApiSidebar.vue
index 814c62c..19dc852 100644
--- a/apps/frontend/src/components/workbench/ApiSidebar.vue
+++ b/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>
 
diff --git a/apps/frontend/src/components/workbench/WorkbenchSidebar.vue b/apps/frontend/src/components/workbench/WorkbenchSidebar.vue
index 5c92484..d398fe2 100644
--- a/apps/frontend/src/components/workbench/WorkbenchSidebar.vue
+++ b/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>
diff --git a/apps/frontend/src/components/workbench/api-tree/ApiTree.vue b/apps/frontend/src/components/workbench/api-tree/ApiTree.vue
index ced9f42..a7b49af 100644
--- a/apps/frontend/src/components/workbench/api-tree/ApiTree.vue
+++ b/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">
diff --git a/apps/frontend/src/components/workbench/api-tree/ApiTreeToolbar.vue b/apps/frontend/src/components/workbench/api-tree/ApiTreeToolbar.vue
index 84f271d..95598e5 100644
--- a/apps/frontend/src/components/workbench/api-tree/ApiTreeToolbar.vue
+++ b/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>
diff --git a/apps/frontend/src/components/workbench/dialogs/import/ImportOpenapiPreview.vue b/apps/frontend/src/components/workbench/dialogs/import/ImportOpenapiPreview.vue
index 1707d54..0b60061 100644
--- a/apps/frontend/src/components/workbench/dialogs/import/ImportOpenapiPreview.vue
+++ b/apps/frontend/src/components/workbench/dialogs/import/ImportOpenapiPreview.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type { GroupNodeWithApis, HttpMethod } from '@/types/api'
+import type { HttpMethod } from '@/types/api'
 import type { ConflictStrategy, ImportPreview } from '@/types/import'
 import { AlertTriangle, ChevronDown, ChevronRight, FileText, FolderOpen } from 'lucide-vue-next'
+import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
@@ -13,7 +14,6 @@ import {
 } from '@/components/ui/collapsible'
 import { Label } from '@/components/ui/label'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Select,
   SelectContent,
@@ -40,30 +40,19 @@ const emits = defineEmits<{
 }>()
 
 const apiTreeStore = useApiTreeStore()
+const { flatGroups } = storeToRefs(apiTreeStore)
+
+/** 按 tags 自动创建分组（Reka-ui 不支持清空选项，，，） */
+const AUTO_GROUP_VALUE = '__auto__'
 
 // 配置选项
 const conflictStrategy = ref<ConflictStrategy>('skip')
-const targetGroupId = ref<string>('')
+const targetGroupId = ref<string>(AUTO_GROUP_VALUE)
 const createMissingGroups = ref(true)
 
 // 分组展开状态
 const expandedGroups = ref<Set<string>>(new Set())
 
-// 扁平化分组列表
-const flatGroups = computed(() => {
-  const result: { id: string, name: string, level: number }[] = []
-
-  function traverse(nodes: GroupNodeWithApis[], level: number) {
-    for (const node of nodes) {
-      result.push({ id: node.id, name: node.name, level })
-      traverse(node.children, level + 1)
-    }
-  }
-
-  traverse(apiTreeStore.tree, 0)
-  return result
-})
-
 // 按分组组织 API
 const apisGroupedByGroup = computed(() => {
   const groups = new Map<string, typeof props.preview.apis>()
@@ -87,7 +76,7 @@ function toggleGroup(groupName: string) {
 function handleSubmit() {
   emits('submit', {
     conflictStrategy: conflictStrategy.value,
-    targetGroupId: targetGroupId.value || undefined,
+    targetGroupId: targetGroupId.value === AUTO_GROUP_VALUE ? undefined : targetGroupId.value,
     createMissingGroups: createMissingGroups.value,
   })
 }
@@ -194,11 +183,14 @@ function getMethodClass(method: HttpMethod) {
       <!-- 目标分组 -->
       <div class="space-y-2">
         <Label for="target-group">目标分组（可选）</Label>
-        <Select v-model="targetGroupId" :disabled="!flatGroups.length">
+        <Select v-model="targetGroupId">
           <SelectTrigger id="target-group">
-            <SelectValue :placeholder="`${flatGroups.length > 0 ? '' : '无可选分组，'}按 tags 自动创建分组`" />
+            <SelectValue placeholder="按 tags 自动创建分组" />
           </SelectTrigger>
           <SelectContent>
+            <SelectItem :value="AUTO_GROUP_VALUE">
+              <span class="text-muted-foreground">按 tags 自动创建分组</span>
+            </SelectItem>
             <SelectItem
               v-for="group in flatGroups"
               :key="group.id"
@@ -218,7 +210,7 @@ function getMethodClass(method: HttpMethod) {
         <Checkbox
           id="create-groups"
           :checked="createMissingGroups"
-          :disabled="!!targetGroupId"
+          :disabled="targetGroupId !== AUTO_GROUP_VALUE"
           @update:checked="createMissingGroups = $event as boolean"
         />
         <Label for="create-groups" class="font-normal cursor-pointer">
@@ -232,54 +224,52 @@ function getMethodClass(method: HttpMethod) {
     <!-- API 预览列表 -->
     <div class="space-y-2">
       <Label>接口预览</Label>
-      <ScrollArea class="h-[200px] rounded-md border">
-        <div class="p-2 space-y-1">
-          <Collapsible
-            v-for="[groupName, apis] in apisGroupedByGroup"
-            :key="groupName"
-            :open="expandedGroups.has(groupName)"
-            @update:open="toggleGroup(groupName)"
-          >
-            <CollapsibleTrigger class="flex items-center gap-2 w-full p-2 hover:bg-muted rounded-md text-left">
-              <component
-                :is="expandedGroups.has(groupName) ? ChevronDown : ChevronRight"
-                class="h-4 w-4 text-muted-foreground shrink-0"
-              />
-              <FolderOpen class="h-4 w-4 text-muted-foreground shrink-0" />
-              <span class="text-sm font-medium flex-1 truncate">{{ groupName }}</span>
-              <Badge variant="secondary" class="ml-auto">
-                {{ apis.length }}
-              </Badge>
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-              <div class="ml-6 pl-4 border-l space-y-1">
-                <div
-                  v-for="api in apis"
-                  :key="`${api.method}-${api.path}`"
-                  class="flex items-center gap-2 p-2 text-sm rounded-md"
-                  :class="api.hasConflict ? 'bg-amber-50 dark:bg-amber-950/20' : 'hover:bg-muted'"
+      <div class="p-2 space-y-1">
+        <Collapsible
+          v-for="[groupName, apis] in apisGroupedByGroup"
+          :key="groupName"
+          :open="expandedGroups.has(groupName)"
+          @update:open="toggleGroup(groupName)"
+        >
+          <CollapsibleTrigger class="flex items-center gap-2 w-full p-2 hover:bg-muted rounded-md text-left">
+            <component
+              :is="expandedGroups.has(groupName) ? ChevronDown : ChevronRight"
+              class="h-4 w-4 text-muted-foreground shrink-0"
+            />
+            <FolderOpen class="h-4 w-4 text-muted-foreground shrink-0" />
+            <span class="text-sm font-medium flex-1 truncate">{{ groupName }}</span>
+            <Badge variant="secondary" class="ml-auto">
+              {{ apis.length }}
+            </Badge>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div class="ml-6 pl-4 border-l space-y-1">
+              <div
+                v-for="api in apis"
+                :key="`${api.method}-${api.path}`"
+                class="flex items-center gap-2 p-2 text-sm rounded-md"
+                :class="api.hasConflict ? 'bg-amber-50 dark:bg-amber-950/20' : 'hover:bg-muted'"
+              >
+                <span
+                  class="font-mono text-xs font-bold w-16 shrink-0"
+                  :class="getMethodClass(api.method)"
                 >
-                  <span
-                    class="font-mono text-xs font-bold w-16 shrink-0"
-                    :class="getMethodClass(api.method)"
-                  >
-                    {{ api.method }}
-                  </span>
-                  <span class="font-mono text-xs text-muted-foreground truncate flex-1">
-                    {{ api.path }}
-                  </span>
-                  <span class="text-xs truncate max-w-[120px]">
-                    {{ api.name }}
-                  </span>
-                  <Badge v-if="api.hasConflict" variant="outline" class="text-amber-600 border-amber-300 shrink-0">
-                    冲突
-                  </Badge>
-                </div>
+                  {{ api.method }}
+                </span>
+                <span class="font-mono text-xs text-muted-foreground truncate flex-1">
+                  {{ api.path }}
+                </span>
+                <span class="text-xs truncate max-w-[120px]">
+                  {{ api.name }}
+                </span>
+                <Badge v-if="api.hasConflict" variant="outline" class="text-amber-600 border-amber-300 shrink-0">
+                  冲突
+                </Badge>
               </div>
-            </CollapsibleContent>
-          </Collapsible>
-        </div>
-      </ScrollArea>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
     </div>
 
     <!-- 操作按钮 -->
diff --git a/apps/frontend/src/stores/useApiTreeStore.ts b/apps/frontend/src/stores/useApiTreeStore.ts
index e12436a..1e8ebf7 100644
--- a/apps/frontend/src/stores/useApiTreeStore.ts
+++ b/apps/frontend/src/stores/useApiTreeStore.ts
@@ -44,6 +44,21 @@ export const useApiTreeStore = defineStore('apiTree', () => {
     return filterTreeByQuery(tree.value, query)
   })
 
+  /** 扁平化分组列表 */
+  const flatGroups = computed(() => {
+    const result: { id: string, name: string, level: number }[] = []
+
+    function traverse(nodes: GroupNodeWithApis[], level: number) {
+      for (const node of nodes) {
+        result.push({ id: node.id, name: node.name, level })
+        traverse(node.children, level + 1)
+      }
+    }
+
+    traverse(tree.value, 0)
+    return result
+  })
+
   // ========== 辅助方法 ==========
 
   /** 根据关键词过滤树 */
@@ -417,6 +432,7 @@ export const useApiTreeStore = defineStore('apiTree', () => {
     // 计算属性
     hasTree,
     filteredTree,
+    flatGroups,
 
     // 方法
     setProjectId,