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

59
easyflow-ui-admin/packages/tinyflow-ui/src/styles/base.less
View File

@@ -3,8 +3,9 @@
align-items: center;
justify-content: center;
gap: 2px;
background: #fff;
border: 1px solid #ccc;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color-strong);
color: var(--tf-text-primary);
cursor: pointer;
border-radius: 5px;
padding: 5px;
@@ -25,11 +26,11 @@
.tf-btn.tf-btn-primary {
background: var(--tf-primary-color);
color: #fff;
color: var(--tf-loop-handle-text);
&:hover {
border: 1px solid #ccc;
background: #3a6fe3;
border: 1px solid var(--tf-border-color-strong);
background: var(--tf-primary-color-hover);
}
}
@@ -37,7 +38,9 @@
.tf-input, .tf-textarea {
display: flex;
border-radius: 5px;
border: 1px solid #ccc;
border: 1px solid var(--tf-border-color-strong);
background: var(--tf-bg-input);
color: var(--tf-text-primary);
padding: 5px 8px;
box-sizing: border-box;
resize: vertical;
@@ -46,21 +49,21 @@
overflow-y: hidden;
&::placeholder {
color: #ccc;
color: var(--tf-text-muted);
font-size: 12px;
}
// 获得焦点时的样式
&:focus {
border-color: var(--tf-primary-color);
box-shadow: 0 0 5px rgba(81, 203, 238, .2);
box-shadow: var(--tf-focus-shadow);
}
// 禁用时的样式
&[disabled] {
background-color: #f0f0f0;
background-color: var(--tf-bg-input-disabled);
cursor: not-allowed;
color: #aaa;
color: var(--tf-text-disabled);
}
}
@@ -68,26 +71,26 @@
.tf-select {
&-input {
display: flex;
border: 1px solid #e5e7eb;
border: 1px solid var(--tf-border-color);
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
justify-content: space-between;
align-items: center;
cursor: pointer;
background: #fff;
background: var(--tf-bg-input);
height: 32px;
transition: all 0.2s;
width: 100%;
color: #111827;
color: var(--tf-text-primary);
&:hover {
border-color: #d1d5db;
border-color: var(--tf-border-color-strong);
}
&:focus, &.active {
border-color: #2563eb;
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
border-color: var(--tf-primary-color);
box-shadow: var(--tf-focus-shadow);
}
&-value {
@@ -105,13 +108,13 @@
display: flex;
width: 16px;
height: 16px;
color: #6b7280;
color: var(--tf-text-secondary);
flex-shrink: 0;
margin-left: 4px;
}
&-placeholder {
color: #9ca3af;
color: var(--tf-text-muted);
}
}
@@ -133,7 +136,7 @@
padding: 5px;
border-radius: 5px;
border: none;
background: #F4F4F5;
background: var(--tf-bg-muted);
.tf-tabs-item {
flex-grow: 1;
@@ -144,14 +147,14 @@
align-items: center;
justify-content: center;
font-size: 14px;
color: #808088;
color: var(--tf-text-secondary);
}
.tf-tabs-item.active {
background: #fff;
color: #333;
background: var(--tf-bg-surface);
color: var(--tf-text-primary);
font-weight: 500;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
box-shadow: var(--tf-shadow-soft);
}
}
@@ -160,7 +163,7 @@ h3.tf-heading {
font-size: 14px;
margin-top: 2px;
margin-bottom: 3px;
color: #333;
color: var(--tf-text-primary);
}
@@ -181,8 +184,8 @@ h3.tf-heading {
display: flex;
width: 26px;
height: 26px;
color: #2563EB;
background: #cedafb;
color: var(--tf-icon-color);
background: var(--tf-icon-bg);
border-radius: 5px;
padding: 3px;
justify-content: center;
@@ -192,7 +195,7 @@ h3.tf-heading {
svg {
width: 22px;
height: 22px;
color: #3474ff;
color: var(--tf-icon-color);
}
}
@@ -208,7 +211,7 @@ h3.tf-heading {
&-description {
font-size: 12px;
margin: 10px 0;
color: #999;
color: var(--tf-text-muted);
}
}
}

24
easyflow-ui-admin/packages/tinyflow-ui/src/styles/tinyflow.less
View File

@@ -18,7 +18,7 @@
&::after {
content: ' ';
background: #2563EB;
background: var(--tf-primary-color);
width: 8px;
height: 8px;
border-radius: 100%;
@@ -36,12 +36,12 @@
div.loop_handle_wrapper {
&::after {
content: '循环体';
background: #2563EB;
background: var(--tf-primary-color);
width: 100px;
height: 20px;
border-radius: 0;
display: flex;
color: #fff;
color: var(--tf-loop-handle-text);
justify-content: center;
align-items: center;
}
@@ -60,17 +60,17 @@
border-radius: 5px;
top: -2px;
left: -2px;
border: 1px solid #ccc;
border: 1px solid var(--tf-node-outline-color);
height: calc(100% + 2px);
width: calc(100% + 2px);
}
&:hover {
border: 3px solid #bacaef7d;
border: 3px solid var(--tf-node-hover-border);
}
&.selectable.selected {
border: 3px solid #bacaef7d;
border: 3px solid var(--tf-node-hover-border);
box-shadow: var(--xy-node-boxshadow-selected);
}
@@ -88,7 +88,7 @@
.tf-node-wrapper {
border-radius: 5px;
min-width: 300px;
background: #fff;
background: var(--tf-bg-surface);
&-body {
padding: 10px;
@@ -114,10 +114,10 @@
}
&-container {
background: #fff;
border: 1px solid #eee;
background: var(--tf-bg-surface);
border: 1px solid var(--tf-border-color);
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: var(--tf-shadow-soft);
padding: 10px;
width: fit-content;
@@ -147,11 +147,11 @@
svg {
width: 20px;
height: 20px;
fill: #2563EB;
fill: var(--tf-primary-color);
}
&:hover {
background: #f1f1f1;
background: var(--tf-bg-hover);
}
}
}

140
easyflow-ui-admin/packages/tinyflow-ui/src/styles/variable.less
View File

@@ -1,14 +1,144 @@
:root,
:root .tf-theme-light {
--tf-primary-color: #2563EB;
--tf-primary-color: #2563eb;
--tf-primary-color-hover: #3a6fe3;
--tf-primary-soft-bg: #eff6ff;
--tf-primary-soft-border: #bfdbfe;
--tf-primary-ghost-bg: rgba(37, 99, 235, 0.08);
--tf-danger-color: #ef4444;
--tf-danger-hover: #dc2626;
--tf-danger-soft-bg: #fff1f1;
--tf-danger-soft-border: #f5c7c4;
--tf-danger-soft-text: #b42318;
--tf-danger-icon-color: #d92d20;
--tf-warning-soft-bg: #fff8e6;
--tf-warning-soft-border: #f7d79e;
--tf-warning-soft-text: #92400e;
--tf-warning-icon-color: #d97706;
--tf-bg-canvas: #f8fafc;
--tf-bg-surface: #ffffff;
--tf-bg-surface-alt: #f9fafb;
--tf-bg-muted: #f3f4f6;
--tf-bg-hover: #f1f5f9;
--tf-bg-active: #e2e8f0;
--tf-bg-input: #ffffff;
--tf-bg-input-disabled: #f3f4f6;
--tf-bg-tag: rgba(0, 0, 0, 0.06);
--tf-border-color: #e5e7eb;
--tf-border-color-strong: #d1d5db;
--tf-border-color-soft: #f3f4f6;
--tf-node-outline-color: #d1d5db;
--tf-node-hover-border: rgba(186, 202, 239, 0.49);
--tf-text-primary: #111827;
--tf-text-secondary: #6b7280;
--tf-text-muted: #9ca3af;
--tf-text-disabled: #9ca3af;
--tf-icon-bg: #cedafb;
--tf-icon-color: #3474ff;
--tf-loop-handle-text: #ffffff;
--tf-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.08);
--tf-shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.15);
--tf-focus-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
--tf-tip-bg: #0f172a;
--tf-tip-text: #f8fafc;
--tf-scrollbar-thumb: #d6dce8;
--tf-slider-track-bg: #d1d5db;
--tf-slider-thumb-bg: var(--tf-primary-color);
--xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
--xy-handle-background-color: var(--tf-primary-color);
--xy-handle-border-color: var(--tf-bg-surface);
--xy-background-color: var(--tf-bg-canvas);
--xy-background-pattern-dots-color: #d1d5db;
--xy-background-pattern-lines-color: #e5e7eb;
--xy-background-pattern-cross-color: #e2e8f0;
--xy-edge-stroke: #94a3b8;
--xy-edge-stroke-selected: var(--tf-primary-color);
--xy-controls-button-background-color: var(--tf-bg-surface);
--xy-controls-button-background-color-hover: var(--tf-bg-hover);
--xy-controls-button-color: var(--tf-text-secondary);
--xy-controls-button-color-hover: var(--tf-text-primary);
--xy-controls-button-border-color: var(--tf-border-color);
--xy-minimap-background-color: var(--tf-bg-surface);
--xy-minimap-mask-background-color: rgba(241, 245, 249, 0.68);
--xy-minimap-node-background-color: #cbd5e1;
--xy-edge-label-background-color: var(--tf-bg-surface);
--xy-edge-label-color: var(--tf-text-primary);
}
//the dark theme variables
:root .tf-theme-dark {
--tf-primary-color: #60a5fa;
--tf-primary-color-hover: #93c5fd;
--tf-primary-soft-bg: rgba(96, 165, 250, 0.18);
--tf-primary-soft-border: rgba(96, 165, 250, 0.35);
--tf-primary-ghost-bg: rgba(96, 165, 250, 0.12);
--tf-danger-color: #f87171;
--tf-danger-hover: #ef4444;
--tf-danger-soft-bg: rgba(248, 113, 113, 0.16);
--tf-danger-soft-border: rgba(248, 113, 113, 0.28);
--tf-danger-soft-text: #fca5a5;
--tf-danger-icon-color: #f87171;
--tf-warning-soft-bg: rgba(217, 119, 6, 0.2);
--tf-warning-soft-border: rgba(217, 119, 6, 0.35);
--tf-warning-soft-text: #fbbf24;
--tf-warning-icon-color: #f59e0b;
--tf-bg-canvas: #0b1220;
--tf-bg-surface: #111827;
--tf-bg-surface-alt: #1f2937;
--tf-bg-muted: #273449;
--tf-bg-hover: #334155;
--tf-bg-active: #3b4b63;
--tf-bg-input: #0f172a;
--tf-bg-input-disabled: #0b1324;
--tf-bg-tag: rgba(148, 163, 184, 0.2);
--tf-border-color: #334155;
--tf-border-color-strong: #475569;
--tf-border-color-soft: #263449;
--tf-node-outline-color: #475569;
--tf-node-hover-border: rgba(96, 165, 250, 0.38);
--tf-text-primary: #e5e7eb;
--tf-text-secondary: #cbd5e1;
--tf-text-muted: #94a3b8;
--tf-text-disabled: #64748b;
--tf-icon-bg: rgba(96, 165, 250, 0.2);
--tf-icon-color: #93c5fd;
--tf-loop-handle-text: #f8fafc;
--tf-shadow-soft: 0 2px 8px rgba(2, 6, 23, 0.35);
--tf-shadow-medium: 0 10px 25px rgba(2, 6, 23, 0.48);
--tf-focus-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
--tf-tip-bg: #020617;
--tf-tip-text: #e2e8f0;
--tf-scrollbar-thumb: #475569;
--tf-slider-track-bg: #475569;
--tf-slider-thumb-bg: #93c5fd;
--xy-node-boxshadow-selected: 0 0 0 1px var(--tf-primary-color);
--xy-handle-background-color: var(--tf-primary-color);
--xy-handle-border-color: var(--tf-bg-canvas);
--xy-background-color: var(--tf-bg-canvas);
--xy-background-pattern-dots-color: #334155;
--xy-background-pattern-lines-color: #334155;
--xy-background-pattern-cross-color: #334155;
--xy-edge-stroke: #64748b;
--xy-edge-stroke-selected: #93c5fd;
--xy-controls-button-background-color: var(--tf-bg-surface);
--xy-controls-button-background-color-hover: var(--tf-bg-hover);
--xy-controls-button-color: var(--tf-text-secondary);
--xy-controls-button-color-hover: var(--tf-text-primary);
--xy-controls-button-border-color: var(--tf-border-color);
--xy-minimap-background-color: var(--tf-bg-surface);
--xy-minimap-mask-background-color: rgba(15, 23, 42, 0.7);
--xy-minimap-node-background-color: #475569;
--xy-edge-label-background-color: var(--tf-bg-surface);
--xy-edge-label-color: var(--tf-text-primary);
}