Merge pull request #224 from Abeautifulsnow/fix/db-placement-copy

feat(connection): 为不同数据库类型展示各自对应的 connection URL placeholder

src/components/connection/ConnectionDialog.vue

@@ -16,6 +16,7 @@ import DatabaseIcon from "@/components/icons/DatabaseIcon.vue";
 import * as api from "@/lib/api";
 import { isTauriRuntime } from "@/lib/tauriRuntime";
 import { applyParsedConnectionUrl, parseConnectionUrl } from "@/lib/connectionUrl";
+import { connectionUrlPlaceholder as getUrlPlaceholder } from "@/lib/connectionPresentation";
 import { ArrowLeft, ChevronRight, Copy, ExternalLink, FolderOpen, Grid3X3, Link2, List, Search } from "lucide-vue-next";
 
 type DbOption = { value: string; label: string };
@@ -419,6 +420,8 @@ const filteredDbCategories = computed<DbCategory[]>(() => {
 const hasDbPickerResults = computed(() => filteredDbCategories.value.some((category) => category.options.length > 0));
 const selectedDbIcon = computed(() => iconTypeMap[selectedType.value] || selectedProfile().icon || selectedType.value);
 const isJdbcConnection = computed(() => form.value.db_type === "jdbc");
+
+const connectionUrlPlaceholder = computed(() => getUrlPlaceholder(form.value.db_type));
 const canUseSsh = computed(() => form.value.db_type !== "sqlite" && form.value.db_type !== "jdbc");
 const canUseProxy = computed(
   () => form.value.db_type !== "sqlite" && form.value.db_type !== "duckdb" && form.value.db_type !== "jdbc",
@@ -817,7 +820,7 @@ function openExternalUrl(url: string) {
                     <Input
                       v-model="connectionUrlInput"
                       class="flex-1"
-                      :placeholder="t('connection.connectionUrlPlaceholder')"
+                      :placeholder="connectionUrlPlaceholder"
                       @keydown.enter.prevent="applyConnectionUrl"
                     />
                     <Tooltip>

src/lib/connectionPresentation.ts

@@ -1,4 +1,4 @@
-import type { ConnectionConfig } from "@/types/database";
+import type { ConnectionConfig, DatabaseType } from "@/types/database";
 
 type ConnectionPresentationConfig = Pick<
   ConnectionConfig,
@@ -24,6 +24,53 @@ export function connectionEndpointLabel(connection?: ConnectionPresentationConfi
   return connection.host || connection.database || "";
 }
 
+export function connectionUrlPlaceholder(dbType: DatabaseType): string {
+  switch (dbType) {
+    case "mysql":
+    case "doris":
+    case "starrocks":
+      return "mysql://user:password@host:port/database";
+
+    case "postgres":
+    case "gaussdb":
+    case "redshift":
+      return "postgresql://user:password@host:port/database";
+
+    case "redis":
+      return "redis://:password@host:port/0";
+
+    case "sqlite":
+      return "sqlite:///absolute/path/to/database.db";
+
+    case "duckdb":
+      return "duckdb:///absolute/path/to/database.duckdb";
+
+    case "mongodb":
+      return "mongodb://user:password@host:port/database";
+
+    case "clickhouse":
+      return "clickhouse://user:password@host:port/database";
+
+    case "sqlserver":
+      return "mssql://user:password@host:port/database";
+
+    case "oracle":
+      return "oracle://user:password@host:port/service_name";
+
+    case "elasticsearch":
+      return "http://user:password@host:port";
+
+    case "dameng":
+      return "dm://user:password@host:port";
+
+    case "jdbc":
+      return "jdbc:mysql://host:3306/database";
+
+    default:
+      return "postgresql://user:password@host:port/database";
+  }
+}
+
 export function connectionOptionSubtitle(connection?: ConnectionPresentationConfig): string {
   return [connectionDriverLabel(connection), connectionEndpointLabel(connection)].filter(Boolean).join(" · ");
 }