fix: 工作流画布名称框按实际文本宽度显示(中文2倍宽折算),空间不足时收缩且不遮住保存/运行按钮
This commit is contained in:
@@ -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() {
|
||||
返回工作流
|
||||
</Link>
|
||||
<input
|
||||
className="input min-w-0 px-2 py-1 text-sm"
|
||||
className="input min-w-0 shrink px-2 py-1 text-sm"
|
||||
value={name}
|
||||
onChange={(e) => 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) }}
|
||||
/>
|
||||
<span
|
||||
className="shrink-0 rounded bg-panel-2 px-1.5 py-0.5 text-[10px] text-slate-400"
|
||||
|
||||
Reference in New Issue
Block a user