diff --git a/src/renderer/src/pages/EditorPage.tsx b/src/renderer/src/pages/EditorPage.tsx index f0bf626..e67bb23 100644 --- a/src/renderer/src/pages/EditorPage.tsx +++ b/src/renderer/src/pages/EditorPage.tsx @@ -185,10 +185,9 @@ export function EditorPage({ catalog, onToast, onBack }: EditorPageProps) {
- - / 编辑流程
@@ -223,7 +222,7 @@ export function EditorPage({ catalog, onToast, onBack }: EditorPageProps) { - {running ? ( diff --git a/src/renderer/src/panels/Properties.tsx b/src/renderer/src/panels/Properties.tsx index 3f521d3..149baa2 100644 --- a/src/renderer/src/panels/Properties.tsx +++ b/src/renderer/src/panels/Properties.tsx @@ -130,6 +130,14 @@ export function Properties({ catalog, onToast }: PropertiesProps) { {node.label || component.name} {component.id}
+
+ + +
@@ -174,14 +182,6 @@ export function Properties({ catalog, onToast }: PropertiesProps) {
{component.implemented ? "已接入执行器" : "待接入执行器"} -
- - -
) : ( diff --git a/src/renderer/src/styles/app.css b/src/renderer/src/styles/app.css index c91d878..da2d529 100644 --- a/src/renderer/src/styles/app.css +++ b/src/renderer/src/styles/app.css @@ -682,6 +682,39 @@ textarea:focus-visible { border-color: var(--line); } +/* 保存按钮:悬停泛蓝 + 图标弹性放大,呼应"落盘"动作 */ +.icon-btn.save-btn:not(:disabled):hover { + color: var(--blue); + border-color: var(--blue); + background: var(--blue-soft); +} + +.icon-btn.save-btn:not(:disabled):hover .icon { + animation: save-pop 0.32s ease; +} + +@keyframes save-pop { + 0% { transform: scale(1); } + 45% { transform: scale(1.22) translateY(1px); } + 100% { transform: scale(1); } +} + +/* 运行按钮:悬停上浮 + 光晕阴影 + 播放图标微放大 */ +.toolbar-actions .btn-primary:not(:disabled):hover, +.toolbar-actions .btn-danger:not(:disabled):hover { + transform: translateY(-1px); + box-shadow: 0 4px 10px rgba(34, 100, 229, 0.32); +} + +.toolbar-actions .btn-primary:not(:disabled):hover .icon { + transform: scale(1.12); +} + +.toolbar-actions .btn-primary .icon, +.toolbar-actions .btn-danger .icon { + transition: transform 0.16s ease; +} + .icon-btn:disabled { opacity: 0.4; cursor: default; @@ -1018,6 +1051,37 @@ textarea:focus-visible { flex: none; } +/* 节点复制/删除:移到面板右上角,删除红色更醒目 */ +.props-head-actions { + margin-left: auto; + display: flex; + gap: 4px; + flex: none; +} + +.props-head-actions .head-action { + width: 28px; + height: 28px; + border-radius: 8px; + transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease; +} + +.props-head-actions .head-action:hover { + transform: translateY(-1px); +} + +.props-head-actions .head-action:not(.head-action-danger):hover { + color: var(--blue); + border-color: var(--blue); + background: var(--blue-soft); +} + +.props-head-actions .head-action-danger:hover { + color: #d64545; + border-color: #f2b8b8; + background: #fdeeee; +} + .props-icon { width: 34px; height: 34px; @@ -3229,7 +3293,7 @@ textarea:focus-visible { .editor-breadcrumb { display: flex; align-items: center; - gap: 7px; + gap: 10px; color: var(--ink-2); font-size: 12.5px; flex: none; @@ -3245,27 +3309,40 @@ textarea:focus-visible { font-weight: 650; } -.back-link { +/* 圆形返回按钮:边框 + 悬停反馈(背景加深 + 箭头左移动画),明确表达"返回" */ +.back-btn { display: inline-flex; align-items: center; - gap: 5px; - color: var(--blue-dark); - font-size: 12.5px; - font-weight: 650; - padding: 4px 8px; - margin-left: -8px; - border-radius: 8px; - transition: background 0.14s ease; + justify-content: center; + width: 30px; + height: 30px; + padding: 0; + border: 1px solid var(--line); + border-radius: 50%; + background: #fff; + color: var(--ink-2); + cursor: pointer; + transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } -.back-link:hover { +.back-btn .icon { + width: 15px; + height: 15px; + transition: transform 0.15s ease; +} + +.back-btn:hover { + border-color: var(--blue); color: var(--blue); background: var(--blue-soft); } -.back-link .icon { - width: 15px; - height: 15px; +.back-btn:hover .icon { + transform: translateX(-2px); +} + +.back-btn:active { + transform: scale(0.94); } .rpa-error-handle {