feat: 增强代码节点编辑器与放大阅读体验
- tinyflow-ui: 新增 CodeScriptEditor(CodeMirror 6)并支持语法高亮、上下文补全、自动括号与 _result 高亮 - tinyflow-ui: 代码节点接入引擎能力列表与节点说明提示,统一 JS/Python 编辑体验 - tinyflow-ui: 增加放大编辑模式,支持居中弹层、ESC 与点击外部关闭 - app/workflow: 对接 supportedCodeEngines 能力并透传 codeEngine provider
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user