feat(connection): 添加子组时支持定义组名称

- 在创建新子组时，自动展开其父组，支持自定义组名

apps/desktop/src/components/sidebar/ConnectionTree.vue

@@ -447,9 +447,12 @@ function clearSidebarSelection() {
 
 async function createNewGroup() {
   const groupId = store.createConnectionGroup(t("connectionGroup.newGroupDefault"));
+  await startRenamingCreatedGroup(groupId);
+}
+
+async function startRenamingCreatedGroup(groupId: string) {
   pendingRenameGroupId.value = groupId;
   store.selectedTreeNodeId = groupId;
-
   if (isFiltering.value) {
     searchQuery.value = "";
     deferredSearchQuery.value = "";
@@ -921,7 +924,16 @@ defineExpose({ focusSearch, createNewGroup });
         flow-mode
       >
         <template #default="{ item }">
-          <TreeItem :node="item.node" :depth="item.depth" :drag-disabled="isFiltering" :pending-rename="pendingRenameGroupId === item.node.id" :highlighted="highlightedNodeId === item.node.id" @search-toggle="onSearchToggle" @rename-started="pendingRenameGroupId = null" />
+          <TreeItem
+            :node="item.node"
+            :depth="item.depth"
+            :drag-disabled="isFiltering"
+            :pending-rename="pendingRenameGroupId === item.node.id"
+            :highlighted="highlightedNodeId === item.node.id"
+            @search-toggle="onSearchToggle"
+            @rename-started="pendingRenameGroupId = null"
+            @group-created="startRenamingCreatedGroup"
+          />
         </template>
       </RecycleScroller>
       <div v-if="stickyNode" class="sticky-database-header pointer-events-auto absolute inset-x-0 top-0 z-[5] border-b border-border/60" :style="stickyHeaderStyle">
@@ -943,6 +955,7 @@ defineExpose({ focusSearch, createNewGroup });
           :highlighted="highlightedNodeId === item.id"
           @search-toggle="onSearchToggle"
           @rename-started="pendingRenameGroupId = null"
+          @group-created="startRenamingCreatedGroup"
         />
       </div>
       <div v-if="hasSidebarVerticalOverflow" ref="sidebarScrollbarTrackRef" class="sidebar-tree-scrollbar" :class="{ 'sidebar-tree-scrollbar--scrolling': isScrollingSidebar, 'sidebar-tree-scrollbar--dragging': isDraggingSidebarScrollbar }" @pointerdown="onSidebarScrollbarTrackPointerDown">

apps/desktop/src/components/sidebar/TreeItem.vue

@@ -176,6 +176,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   "rename-started": [];
+  "group-created": [groupId: string];
   "node-toggled": [node: TreeNode, wasExpanded: boolean];
   "search-toggle": [node: TreeNode];
 }>();
@@ -3522,6 +3523,7 @@ function newConnectionInGroup() {
 function newSubgroup() {
   const groupId = connectionStore.createConnectionGroup(t("connectionGroup.newGroupDefault"), props.node.id);
   connectionStore.selectedTreeNodeId = groupId;
+  emit("group-created", groupId);
 }
 
 function confirmDeleteGroup() {

apps/desktop/src/lib/sidebarLayout.ts

@@ -248,11 +248,13 @@ export function createGroup(layout: SidebarLayout, name: string, parentGroupId?:
   const group: ConnectionGroup = { id: groupId, name, collapsed: false };
   const order = cloneEntries(layout.order);
   const entry: SidebarOrderEntry = { type: "group", id: groupId, children: [] };
+  let parentFound = false;
 
   if (parentGroupId) {
     const parent = findGroupEntry(order, parentGroupId);
     if (parent) {
       parent.children = [...(parent.children ?? []), entry];
+      parentFound = true;
     } else {
       order.push(entry);
     }
@@ -263,7 +265,7 @@ export function createGroup(layout: SidebarLayout, name: string, parentGroupId?:
   return {
     groupId,
     layout: {
-      groups: [...layout.groups, group],
+      groups: [...layout.groups, group].map((current) => (parentFound && current.id === parentGroupId ? { ...current, collapsed: false } : current)),
       order,
     },
   };