feat(ui): enhance workflow logs display

This commit is contained in:
Fu Diwei
2025-03-19 10:09:30 +08:00
parent fd6e41c566
commit 882f802585
16 changed files with 168 additions and 69 deletions

View File

@@ -10,8 +10,6 @@ import AddNode from "./AddNode";
import WorkflowElement from "../WorkflowElement";
import { type SharedNodeProps } from "./_SharedNode";
const { useToken } = theme;
export type BrandNodeProps = SharedNodeProps;
const BranchNode = ({ node, disabled }: BrandNodeProps) => {
@@ -19,7 +17,7 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));
const token = useToken();
const { token: themeToken } = theme.useToken();
const renderBranch = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
const elements: JSX.Element[] = [];
@@ -38,7 +36,7 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
<div
className="relative flex gap-x-16 before:absolute before:inset-x-[128px] before:top-0 before:h-[2px] before:bg-stone-200 before:content-[''] after:absolute after:inset-x-[128px] after:bottom-0 after:h-[2px] after:bg-stone-200 after:content-['']"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
>
<Button
@@ -64,13 +62,13 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
<div
className="absolute -left-px -top-1 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
<div
className="absolute -bottom-1 -left-px z-50 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
</>
@@ -80,13 +78,13 @@ const BranchNode = ({ node, disabled }: BrandNodeProps) => {
<div
className="absolute -right-px -top-1 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
<div
className="absolute -bottom-1 -right-px z-50 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
</>

View File

@@ -7,12 +7,10 @@ import AddNode from "./AddNode";
import WorkflowElement from "../WorkflowElement";
import { type SharedNodeProps } from "./_SharedNode";
const { useToken } = theme;
export type BrandNodeProps = SharedNodeProps;
const ExecuteResultBranchNode = ({ node, disabled }: BrandNodeProps) => {
const token = useToken();
const { token: themeToken } = theme.useToken();
const renderBranch = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
const elements: JSX.Element[] = [];
@@ -31,7 +29,7 @@ const ExecuteResultBranchNode = ({ node, disabled }: BrandNodeProps) => {
<div
className="relative flex gap-x-16 before:absolute before:inset-x-[128px] before:top-0 before:h-[2px] before:bg-stone-200 before:content-[''] after:absolute after:inset-x-[128px] after:bottom-0 after:h-[2px] after:bg-stone-200 after:content-['']"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
>
{node.branches?.map((branch, index) => (
@@ -44,13 +42,13 @@ const ExecuteResultBranchNode = ({ node, disabled }: BrandNodeProps) => {
<div
className="absolute -left-px -top-1 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
<div
className="absolute -bottom-1 -left-px z-50 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
</>
@@ -60,13 +58,13 @@ const ExecuteResultBranchNode = ({ node, disabled }: BrandNodeProps) => {
<div
className="absolute -right-px -top-1 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
<div
className="absolute -bottom-1 -right-px z-50 h-2 w-1/2"
style={{
backgroundColor: token.token.colorBgContainer,
backgroundColor: themeToken.colorBgContainer,
}}
></div>
</>