EasyFlow-Tech-Dev/EasyFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 完善黑夜模式的表现效果，工作流编排幕布和节点在黑夜模式正常表现

Browse Source
This commit is contained in:
陈子默
2026-03-04 19:56:20 +08:00
parent 27376a5f33
commit a79718b03b
33 changed files with 605 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/CodeScriptEditor.svelte
View File

@@ -10,7 +10,12 @@
} from '@codemirror/autocomplete';
import {defaultKeymap, history, historyKeymap, indentWithTab} from '@codemirror/commands';
import {javascript} from '@codemirror/lang-javascript';
import {defaultHighlightStyle, indentOnInput, indentUnit, syntaxHighlighting} from '@codemirror/language';
import {
defaultHighlightStyle,
indentOnInput,
indentUnit,
syntaxHighlighting
} from '@codemirror/language';
import {python} from '@codemirror/lang-python';
import {
Decoration,
@@ -25,8 +30,8 @@
import type {Parameter} from '#types';
import {flattenParameterCandidates} from '../utils/paramToken';
import {
createBusinessCompletionSource,
type CodeEngine,
createBusinessCompletionSource,
normalizeCodeEngine,
shouldAutoAppendCallParens
} from '../utils/codeCompletion';
@@ -230,18 +235,18 @@
function createEditorTheme() {
return EditorView.theme({
'&': {
border: '1px solid #dcdfe6',
border: '1px solid var(--tf-border-color)',
borderRadius: '6px',
backgroundColor: '#fff',
backgroundColor: 'var(--tf-bg-surface)',
fontSize: '13px'
},
'&.cm-focused': {
outline: 'none',
borderColor: '#4c82f7',
boxShadow: '0 0 0 1px rgba(76, 130, 247, 0.25)'
borderColor: 'var(--tf-primary-color)',
boxShadow: '0 0 0 1px var(--tf-primary-ghost-bg)'
},
'&.cm-editor.cm-disabled': {
backgroundColor: '#f5f7fa',
backgroundColor: 'var(--tf-bg-input-disabled)',
opacity: 0.85
},
'.cm-scroller': {
@@ -252,17 +257,17 @@
},
'.cm-content': {
padding: '8px 38px 8px 10px',
caretColor: '#1f2937'
caretColor: 'var(--tf-text-primary)'
},
'.cm-gutters': {
border: 'none',
background: 'transparent'
},
'.cm-activeLine': {
background: 'rgba(76, 130, 247, 0.06)'
background: 'var(--tf-primary-ghost-bg)'
},
'.cm-placeholder': {
color: '#c0c4cc'
color: 'var(--tf-text-muted)'
}
});
}
@@ -687,8 +692,9 @@
padding: 0 4px;
font-size: 10px;
border-radius: 4px;
color: #666;
background: rgba(255, 255, 255, 0.9);
color: var(--tf-text-secondary);
background: var(--tf-bg-surface);
border-color: var(--tf-border-color);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -704,9 +710,9 @@
min-width: 20px;
padding: 0 4px;
font-size: 10px;
border-color: #d3defd;
color: #1d4ed8;
background: #f5f8ff;
border-color: var(--tf-primary-soft-border);
color: var(--tf-primary-color);
background: var(--tf-primary-soft-bg);
}
@media (max-width: 900px) {
@@ -719,9 +725,9 @@
}
:global(.code-script-button:hover) {
background: #f0f3ff;
color: #2563eb;
border-color: #d3defd;
background: var(--tf-primary-soft-bg);
color: var(--tf-primary-color);
border-color: var(--tf-primary-soft-border);
}
.code-script-panel {
@@ -729,10 +735,10 @@
max-width: 340px;
max-height: 240px;
overflow: auto;
background: #fff;
border: 1px solid #ddd;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-medium);
padding: 6px;
display: flex;
flex-direction: column;
@@ -741,14 +747,14 @@
.code-script-item {
border: none;
background: #fff;
background: var(--tf-bg-surface);
padding: 6px 8px;
text-align: left;
cursor: pointer;
border-radius: 4px;
font-size: 12px;
line-height: 1.3;
color: #333;
color: var(--tf-text-primary);
display: flex;
align-items: center;
justify-content: space-between;
@@ -756,13 +762,13 @@
}
.code-script-item:hover {
background: #f5f7ff;
color: #2563eb;
background: var(--tf-bg-surface-alt);
color: var(--tf-primary-color);
}
.code-script-item.unresolved {
background: #fff8e6;
color: #92400e;
background: var(--tf-warning-soft-bg);
color: var(--tf-warning-soft-text);
}
.code-script-item-warn {
@@ -772,8 +778,8 @@
align-items: center;
justify-content: center;
border-radius: 50%;
background: #d97706;
color: #fff;
background: var(--tf-warning-icon-color);
color: var(--tf-bg-surface);
font-size: 10px;
line-height: 1;
flex-shrink: 0;
@@ -782,38 +788,38 @@
.code-script-empty {
padding: 8px;
font-size: 12px;
color: #999;
color: var(--tf-text-muted);
text-align: center;
}
.code-script-editor :global(.cm-special-result) {
color: #1d4ed8;
color: var(--tf-primary-color);
font-weight: 700;
}
.code-script-editor :global(.cm-template-token-valid) {
color: #1e4ed8;
background: rgba(37, 99, 235, 0.12);
color: var(--tf-primary-color);
background: var(--tf-primary-ghost-bg);
border-radius: 4px;
}
.code-script-editor :global(.cm-template-token-unresolved) {
color: #92400e;
background: rgba(217, 119, 6, 0.16);
color: var(--tf-warning-soft-text);
background: var(--tf-warning-soft-bg);
border-radius: 4px;
}
.code-script-editor :global(.cm-template-token-invalid) {
color: #b42318;
background: rgba(217, 45, 32, 0.14);
color: var(--tf-danger-soft-text);
background: var(--tf-danger-soft-bg);
border-radius: 4px;
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete) {
border: 1px solid #e6eaf2;
background: #ffffff;
border: 1px solid var(--tf-border-color);
background: var(--tf-bg-surface);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
box-shadow: var(--tf-shadow-medium);
padding: 6px;
min-width: 260px;
max-width: 360px;
@@ -838,29 +844,29 @@
display: flex;
align-items: center;
gap: 8px;
color: #1f2937;
color: var(--tf-text-primary);
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]) {
background: #eef4ff;
color: #1d4ed8;
background: var(--tf-primary-soft-bg);
color: var(--tf-primary-color);
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover) {
background: #f6f8fc;
background: var(--tf-bg-surface-alt);
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon) {
width: 16px;
height: 16px;
color: #6b7280;
color: var(--tf-text-secondary);
opacity: 1;
font-size: 12px;
margin-right: 0;
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionIcon) {
color: #2563eb;
color: var(--tf-primary-color);
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel) {
@@ -870,14 +876,14 @@
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete .cm-completionDetail) {
margin-left: auto;
color: #94a3b8;
color: var(--tf-text-muted);
font-style: normal;
font-size: 12px;
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete .cm-completionMatchedText) {
text-decoration: none;
color: #2563eb;
color: var(--tf-primary-color);
font-weight: 700;
}
@@ -886,7 +892,7 @@
}
.code-script-editor :global(.cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb) {
background: #d6dce8;
background: var(--tf-scrollbar-thumb);
border-radius: 999px;
}

8
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/ConfirmParameterItem.svelte
View File

@@ -158,18 +158,18 @@
flex-direction: column;
gap: 10px;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
border-radius: 5px;
width: 200px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-medium);
.input-more-item {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}

4
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/ConfirmParameterList.svelte
View File

@@ -45,7 +45,7 @@
.none-params {
font-size: 12px;
background: #f8f8f8;
background: var(--tf-bg-muted);
height: 40px;
display: flex;
justify-content: center;
@@ -57,7 +57,7 @@
.input-header {
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}

10
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/DefinedParameterItem.svelte
View File

@@ -156,7 +156,7 @@
display: flex;
align-items: center;
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
.input-more-setting {
@@ -164,18 +164,18 @@
flex-direction: column;
gap: 10px;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
border-radius: 5px;
width: 200px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-medium);
.input-more-item {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}

4
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/DefinedParameterList.svelte
View File

@@ -34,7 +34,7 @@
.none-params {
font-size: 12px;
background: #f8f8f8;
background: var(--tf-bg-muted);
height: 40px;
display: flex;
justify-content: center;
@@ -46,7 +46,7 @@
.input-header {
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}

25
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/NodeWrapper.svelte
View File

@@ -263,9 +263,9 @@
gap: 5px;
padding: 5px;
border-radius: 5px;
background: #fff;
border: 1px solid #eee;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color);
box-shadow: var(--tf-shadow-soft);
}
:global(.tf-node-toolbar-item) {
@@ -277,25 +277,34 @@
flex-direction: column;
gap: 10px;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
border-radius: 5px;
width: 200px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-medium);
.input-item {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
.input-item-inline {
display: flex;
align-items: center;
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
input[type='checkbox'] {
width: 14px;
height: 14px;
accent-color: var(--tf-primary-color);
background: var(--tf-bg-input);
border: 1px solid var(--tf-border-color-strong);
border-radius: 3px;
}
}
</style>

9
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/OutputDefItem.svelte
View File

@@ -205,21 +205,20 @@
flex-direction: column;
gap: 10px;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
border-radius: 5px;
width: 200px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-medium);
.input-more-item {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}
</style>

4
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/OutputDefList.svelte
View File

@@ -55,7 +55,7 @@
.none-params {
font-size: 12px;
background: #f8f8f8;
background: var(--tf-bg-muted);
height: 40px;
display: flex;
justify-content: center;
@@ -67,7 +67,7 @@
.input-header {
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}

77
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/ParamTokenEditor.svelte
View File

@@ -1,12 +1,12 @@
<script lang="ts">
import { tick } from 'svelte';
import {tick} from 'svelte';
import {Button, FloatingTrigger} from '../base';
import type {Parameter} from '#types';
import {
escapeHtml,
flattenParameterCandidates,
findBackspaceTokenRange,
findTokenRangeAtCursor,
flattenParameterCandidates,
insertTextAtCursor,
parseTokenParts,
splitTokenDisplay
@@ -534,22 +534,22 @@
}
.hint-item.hint-unresolved {
background: #fff8e6;
border-color: #f6d99a;
color: #8a5a00;
background: var(--tf-warning-soft-bg);
border-color: var(--tf-warning-soft-border);
color: var(--tf-warning-soft-text);
.hint-item-icon {
color: #d97706;
color: var(--tf-warning-icon-color);
}
}
.hint-item.hint-undefined {
background: #fff1f1;
border-color: #f5c7c4;
color: #b42318;
background: var(--tf-danger-soft-bg);
border-color: var(--tf-danger-soft-border);
color: var(--tf-danger-soft-text);
.hint-item-icon {
color: #d92d20;
color: var(--tf-danger-icon-color);
}
}
@@ -570,7 +570,7 @@
border-radius: 5px;
padding: 5px 8px;
box-sizing: border-box;
color: #333;
color: var(--tf-text-primary);
pointer-events: none;
z-index: 0;
font-family: inherit;
@@ -598,7 +598,7 @@
z-index: 1;
background: transparent;
color: transparent;
caret-color: #333;
caret-color: var(--tf-text-primary);
padding-right: 36px;
font-family: inherit;
font-size: inherit;
@@ -609,7 +609,7 @@
.param-token-input::placeholder,
.param-token-textarea::placeholder {
color: #ccc;
color: var(--tf-text-muted);
}
.param-token-textarea {
@@ -630,14 +630,15 @@
padding: 0 4px;
font-size: 10px;
border-radius: 4px;
color: #666;
background: rgba(255, 255, 255, 0.9);
color: var(--tf-text-secondary);
background: var(--tf-bg-surface);
border-color: var(--tf-border-color);
}
:global(.param-token-button:hover) {
background: #f0f3ff;
color: #2563eb;
border-color: #d3defd;
background: var(--tf-primary-soft-bg);
color: var(--tf-primary-color);
border-color: var(--tf-primary-soft-border);
}
.param-token-panel {
@@ -645,10 +646,10 @@
max-width: 320px;
max-height: 220px;
overflow: auto;
background: #fff;
border: 1px solid #ddd;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-medium);
padding: 6px;
display: flex;
flex-direction: column;
@@ -657,14 +658,14 @@
.param-token-item {
border: none;
background: #fff;
background: var(--tf-bg-surface);
padding: 6px 8px;
text-align: left;
cursor: pointer;
border-radius: 4px;
font-size: 12px;
line-height: 1.3;
color: #333;
color: var(--tf-text-primary);
display: flex;
align-items: center;
justify-content: space-between;
@@ -672,13 +673,13 @@
}
.param-token-item:hover {
background: #f5f7ff;
color: #2563eb;
background: var(--tf-bg-surface-alt);
color: var(--tf-primary-color);
}
.param-token-item.unresolved {
background: #fff8e6;
color: #92400e;
background: var(--tf-warning-soft-bg);
color: var(--tf-warning-soft-text);
}
.param-token-item-warn {
@@ -687,7 +688,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
color: #d97706;
color: var(--tf-warning-icon-color);
flex-shrink: 0;
svg {
@@ -700,7 +701,7 @@
.param-token-empty {
padding: 8px;
font-size: 12px;
color: #999;
color: var(--tf-text-muted);
text-align: center;
}
@@ -729,20 +730,20 @@
}
:global(.param-token-valid) {
background: #eaf2ff;
color: #1e4ed8;
box-shadow: inset 0 0 0 1px #c6d8ff;
background: var(--tf-primary-soft-bg);
color: var(--tf-primary-color);
box-shadow: inset 0 0 0 1px var(--tf-primary-soft-border);
}
:global(.param-token-invalid) {
background: #fff1f1;
color: #b42318;
box-shadow: inset 0 0 0 1px #f5c7c4;
background: var(--tf-danger-soft-bg);
color: var(--tf-danger-soft-text);
box-shadow: inset 0 0 0 1px var(--tf-danger-soft-border);
}
:global(.param-token-warning) {
background: #fff8e6;
color: #92400e;
box-shadow: inset 0 0 0 1px #f7d79e;
background: var(--tf-warning-soft-bg);
color: var(--tf-warning-soft-text);
box-shadow: inset 0 0 0 1px var(--tf-warning-soft-border);
}
</style>

8
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/RefParameterItem.svelte
View File

@@ -155,18 +155,18 @@
flex-direction: column;
gap: 10px;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
border-radius: 5px;
width: 200px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-medium);
.input-more-item {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}

4
easyflow-ui-admin/packages/tinyflow-ui/src/components/core/RefParameterList.svelte
View File

@@ -47,7 +47,7 @@
.none-params {
font-size: 12px;
background: #f8f8f8;
background: var(--tf-bg-muted);
height: 40px;
display: flex;
justify-content: center;
@@ -59,7 +59,7 @@
.input-header {
font-size: 12px;
color: #666;
color: var(--tf-text-secondary);
}
}