diff --git a/docs/FEATURES.md b/docs/FEATURES.md index 988ef40..90c71b2 100644 --- a/docs/FEATURES.md +++ b/docs/FEATURES.md @@ -191,6 +191,10 @@ > 按时间倒序追加;每次改动功能都要在此登记。 +### 2026-08-17 + +- 工作流画布顶栏微调:名称输入框宽度改为按文本实际宽度计算(中文按 2 倍字符宽折算,可完整显示名称),空间不足时自动收缩,保证右侧「保存 / 运行」按钮不被遮挡。 + ### 2026-08-16 - 工作流画布顶栏修正:名称输入框改为随内容自适应宽度(不再占大块空白),名称长度限制为英文 ≤150 字符 / 中文 ≤50 字符(混排按中文字符权重折算);顶栏改为可收缩布局,保证「保存 / 运行」按钮始终靠右可见不被挤出。 diff --git a/ui/src/pages/WorkflowCanvasPage.tsx b/ui/src/pages/WorkflowCanvasPage.tsx index 2718c13..18c9607 100644 --- a/ui/src/pages/WorkflowCanvasPage.tsx +++ b/ui/src/pages/WorkflowCanvasPage.tsx @@ -80,6 +80,13 @@ function clampWorkflowName(value: string) { return out; } +/** 名称框宽度:中文字符约 2ch、其余约 1ch,按内容自适应;上限防止过宽,空间不足时由 flex 收缩(不遮住右侧按钮)。 */ +function workflowNameWidth(value: string) { + let w = 0; + for (const ch of value) w += isCjkChar(ch) ? 2 : 1; + return `${Math.min(160, Math.max(8, w + 3))}ch`; +} + export default function WorkflowCanvasPage() { const { workflowId } = useParams<{ workflowId: string }>(); const workflows = useStore((s) => s.workflows); @@ -561,12 +568,12 @@ export default function WorkflowCanvasPage() { 返回工作流 setName(clampWorkflowName(e.target.value))} placeholder="工作流名称" title="英文不超过 150 个字符,中文不超过 50 个(混排按中文字符权重折算)" - style={{ width: `${Math.min(44, Math.max(6, [...name].length + 2))}ch` }} + style={{ width: workflowNameWidth(name) }} />