feat(workflow): edit node names in drawer header

This commit is contained in:
Xin Wang
2026-08-03 10:52:25 +08:00
parent cff591aa13
commit 2e84de0798
5 changed files with 48 additions and 45 deletions
@@ -90,9 +90,15 @@ export function AssistantIdentity({ assistantId }: { assistantId: string | null
export function EditableTitle({
value,
onChange,
placeholder = "未命名助手",
editLabel = "助手名称",
variant = "page",
}: {
value: string;
onChange: (value: string) => void;
placeholder?: string;
editLabel?: string;
variant?: "page" | "panel";
}) {
const [editing, setEditing] = useState(false);
const [draft, setDraft] = useState(value);
@@ -134,7 +140,12 @@ export function EditableTitle({
setEditing(false);
}
}}
className="font-display display-sm w-[min(60vw,420px)] border-b border-primary bg-transparent text-ink outline-none"
aria-label={`修改${editLabel}`}
className={
variant === "panel"
? "min-w-0 flex-1 border-b border-primary bg-transparent px-3 py-1.5 text-sm font-medium text-foreground outline-none"
: "font-display display-sm w-[min(60vw,420px)] border-b border-primary bg-transparent text-ink outline-none"
}
/>
);
}
@@ -143,14 +154,24 @@ export function EditableTitle({
<button
type="button"
onClick={startEdit}
title="点击修改助手名称"
className="group -mx-2 flex min-w-0 items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors hover:bg-surface-strong"
title={`点击修改${editLabel}`}
className={
variant === "panel"
? "group flex min-w-0 items-center gap-2 rounded-lg px-3 py-1.5 text-left transition-colors hover:bg-surface-strong"
: "group -mx-2 flex min-w-0 items-center gap-2 rounded-lg px-2 py-1 text-left transition-colors hover:bg-surface-strong"
}
>
<span className="font-display display-sm truncate text-ink">
{value || "未命名助手"}
<span
className={
variant === "panel"
? "truncate text-sm font-medium text-foreground"
: "font-display display-sm truncate text-ink"
}
>
{value || placeholder}
</span>
<Pencil
size={16}
size={variant === "panel" ? 14 : 16}
className="shrink-0 text-muted-soft opacity-0 transition-opacity group-hover:opacity-100"
/>
</button>