diff --git a/apps/desktop/src/components/editor/EditorSettingsDialog.vue b/apps/desktop/src/components/editor/EditorSettingsDialog.vue index e5b1a256b..5fdfc9ad5 100644 --- a/apps/desktop/src/components/editor/EditorSettingsDialog.vue +++ b/apps/desktop/src/components/editor/EditorSettingsDialog.vue @@ -4660,9 +4660,9 @@ onUnmounted(() => { + {{ t("settings.sidebarObjectInfoModeCommentInline") }} {{ t("settings.sidebarObjectInfoModeCommentAligned") }} {{ t("settings.sidebarObjectInfoModeCommentRight") }} - {{ t("settings.sidebarObjectInfoModeCommentInline") }} {{ t("settings.sidebarObjectInfoModeSize") }} {{ t("settings.sidebarObjectInfoModeHidden") }} diff --git a/apps/desktop/src/components/sidebar/TreeItem.vue b/apps/desktop/src/components/sidebar/TreeItem.vue index f06481af0..ee222190b 100644 --- a/apps/desktop/src/components/sidebar/TreeItem.vue +++ b/apps/desktop/src/components/sidebar/TreeItem.vue @@ -428,6 +428,7 @@ const detailTooltip = computed(() => { { label: t("connection.user"), value: cleanTooltipValue(config.username) }, { label: t("connection.type"), value: config.driver_label || config.driver_profile || config.db_type }, { label: t("connection.databaseInfo.productVersion"), value: cleanTooltipValue(config.database_info?.productVersion) }, + { label: t("connection.note"), value: cleanTooltipValue(config.note), multiline: true }, ].filter((row) => row.value); return { rows }; } @@ -612,7 +613,9 @@ function formattedObjectStorage(): string { return formatSidebarObjectStorage(activeNode.value.sizeBytes); } -const alignedCommentLabelWidth = computed(() => (settingsStore.editorSettings.sidebarObjectInfoMode === "comment-aligned" ? props.commentLabelWidth : undefined)); +// 连接节点不参与 aligned 对齐:顶层连接各自独立,按同层最大 label 宽对齐只会让短连接名 +// 后留下一大段空白。无论全局是 aligned 还是 inline,连接节点的 comment 都紧跟 label。 +const alignedCommentLabelWidth = computed(() => (settingsStore.editorSettings.sidebarObjectInfoMode === "comment-aligned" && activeNode.value.type !== "connection" ? props.commentLabelWidth : undefined)); function alignedCommentLeadingStyle(): { width: string } | undefined { const width = alignedCommentLeadingWidth(alignedCommentLabelWidth.value, canTreeNodePin(activeNode.value.type)); @@ -627,7 +630,13 @@ const usesFullWidthLabel = computed(() => usesFullWidthTreeLabel(activeNode.valu const rowWidthClass = computed(() => (usesFullWidthLabel.value ? "w-max min-w-full" : "w-full min-w-0")); -const labelWidthClass = computed(() => treeLabelWidthClass({ fullWidth: usesFullWidthLabel.value, hasTrailingComment: hasTrailingMetadata(), hasInlineAction: isPinned.value })); +const labelWidthClass = computed(() => { + // aligned 模式靠 leading 块固定宽度对齐 comment 列,label 需 flex-1 撑满 leading 块; + // inline/right 模式 leading 块无固定宽度,label 用 shrink 让 comment 紧跟 label, + // 避免 label flex-1 把 leading 块撑到整行、comment 被推到视口最右端。 + const alignLeading = alignedCommentLabelWidth.value !== undefined; + return treeLabelWidthClass({ fullWidth: usesFullWidthLabel.value, hasTrailingComment: hasTrailingMetadata(), hasInlineAction: isPinned.value, alignLeading }); +}); watch(() => [isRightAlignedComment(), visibleLabel(activeNode.value), trailingComment.value, trailingCommentLayoutRef.value, trailingCommentLeadingRef.value], refreshTrailingCommentMeasurement, { flush: "post", immediate: true }); @@ -1151,7 +1160,7 @@ function onKeydown(event: KeyboardEvent) { @keydown.escape.prevent="isRenamingGroup = false" @click.stop /> - {{ visibleLabel(node) }} + {{ visibleLabel(node) }}