diff --git a/apps/desktop/src/components/connection/ConnectionDialog.vue b/apps/desktop/src/components/connection/ConnectionDialog.vue index 53bcb489d..23231b3ca 100644 --- a/apps/desktop/src/components/connection/ConnectionDialog.vue +++ b/apps/desktop/src/components/connection/ConnectionDialog.vue @@ -213,6 +213,7 @@ function initialConfigTab(): ConfigTab { const defaultForm = (): ConnectionForm => ({ name: "", + note: "", db_type: "mysql", driver_profile: "mysql", driver_label: "MySQL", @@ -444,6 +445,23 @@ function sshLayersForConfig(config: LegacyConnectionConfig): SshTunnelConfig[] { } const form = ref(defaultForm()); +const noteTextareaRef = ref(null); + +function resizeNoteTextarea() { + const textarea = noteTextareaRef.value; + if (!textarea) return; + + const style = window.getComputedStyle(textarea); + const lineHeight = Number.parseFloat(style.lineHeight) || 20; + const paddingHeight = (Number.parseFloat(style.paddingTop) || 0) + (Number.parseFloat(style.paddingBottom) || 0); + const borderHeight = (Number.parseFloat(style.borderTopWidth) || 0) + (Number.parseFloat(style.borderBottomWidth) || 0); + const maxContentHeight = lineHeight * 3 + paddingHeight; + + textarea.style.height = "auto"; + textarea.style.height = `${Math.min(textarea.scrollHeight, maxContentHeight) + borderHeight}px`; + textarea.style.overflowY = textarea.scrollHeight > maxContentHeight ? "auto" : "hidden"; +} + const showJdbcDependencyDriverManagerAction = computed(() => form.value.db_type === "jdbc" && isJdbcMissingRuntimeDependencyError(connectionErrorDetail.value)); function externalConfigRecord(value: unknown): Record { @@ -517,6 +535,9 @@ const dbPickerView = ref(loadConnectionPickerView()); const dbSearchQuery = ref(""); const selectedDbCategory = ref("sql"); const configTab = ref("connection"); +watch([() => form.value.note, configTab, dialogStep, open], () => { + void nextTick(resizeNoteTextarea); +}); const MQ_KAFKA_SECURITY_PROTOCOL_AUTO = "__auto"; const mqAdminUrl = ref("http://127.0.0.1:8080"); const mqSystemKind = ref("pulsar"); @@ -1922,6 +1943,7 @@ watch( const profileConfig = driverProfiles[profile]; form.value = { name: config.name, + note: config.note || "", db_type: oceanbasePatch?.db_type || profileConfig?.type || config.db_type, driver_profile: oceanbasePatch?.driver_profile || profile, driver_label: config.driver_label || oceanbasePatch?.driver_label || driverProfiles[profile]?.label || config.db_type, @@ -3035,6 +3057,7 @@ function generateConnectionName(): string { function connectionConfigForSubmit(id: string, generatedName = ""): ConnectionConfig { const config = { ...formValueForSubmit(), id } as LegacyConnectionConfig; config.database_info = undefined; + config.note = config.note?.trim() || undefined; if (selectedType.value === "oceanbase" && (config.driver_profile === "oceanbase" || config.driver_profile === "oceanbase-oracle")) { Object.assign(config, oceanbaseModeConnectionPatch(oceanbaseSubMode.value)); } @@ -4744,7 +4767,7 @@ function openExternalUrl(url: string) { -
+
@@ -6148,6 +6171,18 @@ function openExternalUrl(url: string) {
+ +
+ +