From a8b65394762753e3f84cdd962e0c6b5d64b27c9c Mon Sep 17 00:00:00 2001
From: tigerenwork <tigeren.work@gmail.com>
Date: Sun, 9 Aug 2026 20:35:21 +0800
Subject: [PATCH] fix: display connection names and select labels in pipeline
 form

---
 components/pipeline-form.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/components/pipeline-form.tsx b/components/pipeline-form.tsx
index 3879257..769afe0 100644
--- a/components/pipeline-form.tsx
+++ b/components/pipeline-form.tsx
@@ -214,7 +214,12 @@ export function PipelineForm({ initial }: { initial?: Pipeline }) {
                 }}
               >
                 <SelectTrigger className="w-full">
-                  <SelectValue placeholder="选择源连接" />
+                  <SelectValue placeholder="选择源连接">
+                    {(v) => {
+                      const c = connections.find((x) => String(x.id) === String(v));
+                      return c ? `${c.name}（${c.database}）` : String(v ?? "");
+                    }}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {connections.map((c) => (
@@ -229,7 +234,12 @@ export function PipelineForm({ initial }: { initial?: Pipeline }) {
               <Label>目标连接</Label>
               <Select value={targetId} onValueChange={(v) => setTargetId(String(v))}>
                 <SelectTrigger className="w-full">
-                  <SelectValue placeholder="选择目标连接" />
+                  <SelectValue placeholder="选择目标连接">
+                    {(v) => {
+                      const c = connections.find((x) => String(x.id) === String(v));
+                      return c ? `${c.name}（${c.database}）` : String(v ?? "");
+                    }}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {connections.map((c) => (
@@ -245,7 +255,9 @@ export function PipelineForm({ initial }: { initial?: Pipeline }) {
             <Label>同步模式</Label>
             <Select value={mode} onValueChange={(v) => setMode(String(v))}>
               <SelectTrigger className="w-full">
-                <SelectValue />
+                <SelectValue>
+                  {(v) => MODES.find((m) => m.value === v)?.label ?? String(v ?? "")}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 {MODES.map((m) => (
@@ -282,7 +294,9 @@ export function PipelineForm({ initial }: { initial?: Pipeline }) {
               disabled={!schemaSync}
             >
               <SelectTrigger className="w-36">
-                <SelectValue />
+                <SelectValue>
+                  {(v) => (v === "all" ? "整个库" : "仅选中的表")}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="selected">仅选中的表</SelectItem>