feat: 增强代码节点编辑器与放大阅读体验

- tinyflow-ui: 新增 CodeScriptEditor(CodeMirror 6)并支持语法高亮、上下文补全、自动括号与 _result 高亮

- tinyflow-ui: 代码节点接入引擎能力列表与节点说明提示,统一 JS/Python 编辑体验

- tinyflow-ui: 增加放大编辑模式,支持居中弹层、ESC 与点击外部关闭

- app/workflow: 对接 supportedCodeEngines 能力并透传 codeEngine provider
This commit is contained in:
2026-03-01 19:57:28 +08:00
parent beeb62c4fc
commit ac8de7dbb8
11 changed files with 1541 additions and 23 deletions

View File

@@ -6,6 +6,7 @@
key: string;
icon?: string | Snippet;
title: string | Snippet;
titleHelp?: string;
description?: string | Snippet;
content: string | Snippet;
}
@@ -47,6 +48,15 @@
{/if}
<Render target={item.title} />
{#if item.titleHelp}
<span
class="tf-collapse-item-title-help"
data-help={item.titleHelp}
aria-label="节点使用说明"
>
?
</span>
{/if}
<span class="tf-collapse-item-title-arrow {activeKeys.includes(item.key) ? 'rotate-90' : ''}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path
@@ -75,4 +85,70 @@
transform: rotate(90deg);
transition: transform 0.3s ease;
}
.tf-collapse-item-title-help {
margin-left: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #c6cfdd;
color: #64748b;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
line-height: 1;
cursor: default;
user-select: none;
background: #fff;
position: relative;
}
.tf-collapse-item-title-help:hover {
border-color: #94a3b8;
color: #334155;
background: #f8fafc;
}
.tf-collapse-item-title-help::after {
content: attr(data-help);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
min-width: 260px;
max-width: 420px;
white-space: pre-line;
background: #0f172a;
color: #f8fafc;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.45;
box-shadow: 0 8px 22px rgba(2, 6, 23, 0.25);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 120;
}
.tf-collapse-item-title-help::before {
content: "";
position: absolute;
left: calc(100% + 4px);
top: 50%;
transform: translateY(-50%);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #0f172a;
opacity: 0;
visibility: hidden;
z-index: 121;
}
.tf-collapse-item-title-help:hover::after,
.tf-collapse-item-title-help:hover::before {
opacity: 1;
visibility: visible;
}
</style>