mirror of
https://github.com/t8y2/dbx.git
synced 2026-10-30 00:19:35 +00:00
feat(connection): 为不同数据库类型展示各自对应的 connection URL placeholder
## 修改内容 - 新增 connectionUrlPlaceholder 纯函数于 connectionPresentation.ts,根据 db_type 返回对应 URL 格式 - ConnectionDialog.vue 中引用该函数替换原有统一的 i18n placeholder - 新增 20 个单元测试覆盖所有数据库类型及边界场景
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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(" · ");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user