Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 工作流画布支持一键展开，一件收起节点 #1644

Merged
merged 1 commit into from
Nov 18, 2024
Merged

feat: 工作流画布支持一键展开，一件收起节点 #1644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 58 additions & 21 deletions ui/src/components/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1249,26 +1249,63 @@ export const iconMap: any = {
)
])
}
},
'app-retract': {
iconReader: () => {
return h('i', [
h(
'svg',
{
style: { height: '100%', width: '100%' },
viewBox: '0 0 16 16',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M5.44661 0.747985C5.55509 0.639506 5.73097 0.639506 5.83945 0.747985L8.00004 2.90858L10.1606 0.748004C10.2691 0.639525 10.445 0.639525 10.5534 0.748004L11.1034 1.29798C11.2119 1.40645 11.2119 1.58233 11.1034 1.69081L8.7488 4.04544L8.74644 4.04782L8.19647 4.59779C8.16892 4.62534 8.13703 4.64589 8.10299 4.65945C8.003 4.6993 7.88453 4.67875 7.80359 4.59781L7.25362 4.04784L7.25003 4.04419L4.89664 1.69079C4.78816 1.58232 4.78816 1.40644 4.89664 1.29796L5.44661 0.747985Z',
fill: 'currentColor'
}),
h('path', {
d: 'M1.99999 5.82774C1.63181 5.82774 1.33333 6.12622 1.33333 6.49441V9.16107C1.33333 9.52926 1.63181 9.82774 2 9.82774H14C14.3682 9.82774 14.6667 9.52926 14.6667 9.16107V6.49441C14.6667 6.12622 14.3682 5.82774 14 5.82774H1.99999ZM13.3333 7.16108V8.49441H2.66666V7.16108H13.3333Z',
fill: 'currentColor'
}),
h('path', {
d: 'M10.1605 14.9075C10.269 15.016 10.4449 15.016 10.5534 14.9075L11.1033 14.3575C11.2118 14.249 11.2118 14.0732 11.1033 13.9647L8.75 11.6113L8.74637 11.6076L8.1964 11.0577C8.11546 10.9767 7.99699 10.9562 7.897 10.996C7.86296 11.0096 7.83107 11.0301 7.80352 11.0577L7.25354 11.6077L7.25117 11.6101L4.89657 13.9647C4.78809 14.0731 4.78809 14.249 4.89657 14.3575L5.44654 14.9075C5.55502 15.016 5.7309 15.016 5.83938 14.9075L7.99995 12.7469L10.1605 14.9075Z',
fill: 'currentColor'
})
]
)
])
}
},
'app-extend': {
iconReader: () => {
return h('i', [
h(
'svg',
{
style: { height: '100%', width: '100%' },
viewBox: '0 0 16 16',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg'
},
[
h('path', {
d: 'M10.5534 5.07974C10.4449 5.18822 10.269 5.18822 10.1605 5.07974L7.99992 2.91915L5.83935 5.07972C5.73087 5.1882 5.555 5.1882 5.44652 5.07972L4.89654 4.52975C4.78807 4.42127 4.78807 4.24539 4.89654 4.13691L7.25117 1.78229L7.25352 1.77991L7.80349 1.22994C7.83019 1.20324 7.86098 1.18311 7.89384 1.16955C7.99448 1.12801 8.11459 1.14813 8.19638 1.22992L8.74635 1.77989L8.74998 1.78359L11.1033 4.13693C11.2118 4.24541 11.2118 4.42129 11.1033 4.52977L10.5534 5.07974Z',
fill: 'currentColor'
}),
h('path', {
d: 'M5.83943 10.9202C5.73095 10.8118 5.55507 10.8118 5.44659 10.9202L4.89662 11.4702C4.78814 11.5787 4.78814 11.7546 4.89662 11.863L7.24997 14.2164L7.25359 14.2201L7.80357 14.7701C7.8862 14.8527 8.00795 14.8724 8.10922 14.8291C8.14091 14.8156 8.17059 14.7959 8.19645 14.77L8.74642 14.2201L8.74873 14.2177L11.1034 11.8631C11.2119 11.7546 11.2119 11.5787 11.1034 11.4702L10.5534 10.9202C10.4449 10.8118 10.2691 10.8118 10.1606 10.9202L8.00002 13.0808L5.83943 10.9202Z',
fill: 'currentColor'
}),
h('path', {
d: 'M2.00004 6C1.63185 6 1.33337 6.29848 1.33337 6.66667V9.33333C1.33337 9.70152 1.63185 10 2.00004 10H14C14.3682 10 14.6667 9.70152 14.6667 9.33333V6.66667C14.6667 6.29848 14.3682 6 14 6H2.00004ZM13.3334 7.33333V8.66667H2.66671V7.33333H13.3334Z',
fill: 'currentColor'
})
]
)
])
}
}
// 'app-history-outlined': {
// iconReader: () => {
// return h('i', [
// h(
// 'svg',
// {
// style: { height: '100%', width: '100%' },
// viewBox: '0 0 1024 1024',
// version: '1.1',
// xmlns: 'http://www.w3.org/2000/svg'
// },
// [
// h('path', {
// d: 'M955.733333 512c0 235.648-191.018667 426.666667-426.666666 426.666667a425.898667 425.898667 0 0 1-334.677334-162.005334l67.797334-51.84a341.333333 341.333333 0 1 0-69.717334-269.653333h30.08c18.176-0.042667 29.013333 20.181333 18.944 35.328L170.24 597.333333a22.741333 22.741333 0 0 1-37.888 0l-71.253333-106.88a22.741333 22.741333 0 0 1 18.944-35.413333h26.112C133.973333 246.4 312.746667 85.333333 529.066667 85.333333c235.648 0 426.666667 191.018667 426.666666 426.666667z" p-id="16742"></path><path d="M554.666667 497.792V364.074667A22.741333 22.741333 0 0 0 531.925333 341.333333h-39.850666a22.741333 22.741333 0 0 0-22.741334 22.741334v196.266666c0 12.586667 10.197333 22.784 22.741334 22.784H674.133333a22.741333 22.741333 0 0 0 22.741334-22.784V520.533333a22.741333 22.741333 0 0 0-22.741334-22.741333H554.666667z',
// fill: 'currentColor'
// })
// ]
// )
// ])
// }
// }
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此代码包含了一些不标准的地方和可复用性的问题。

  1. 函数 iconReader 应该返回 JSX 元素，并在渲染时调用。例如，将两个不同的图标组合在一起并按顺序分组到一个数组中：
const iconMap = (name) => {
  if(name === "app-retrieve") {
    return (
      <div>
        <img src="/image.jpg" alt="Image Description" />
      </div>
    );
  } 
};
  1. 在 export default class App extends React.Component {} 下部应该使用 ES6 类声明语法。
  2. 没有提供关于如何管理状态或处理事件等逻辑信息。
  3. 缺少对用户输入数据的处理（如从表单字段获取）和错误处理（当操作失败时）。这需要更具体地说明应用的需求以及预期的行为。

27 changes: 24 additions & 3 deletions ui/src/workflow/common/NodeControl.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,24 @@
<el-button link @click="zoomIn">
<el-icon :size="16" title="放大"><ZoomIn /></el-icon>
</el-button>

<el-divider direction="vertical" />
<el-button link @click="fitView">
<AppIcon iconName="app-fitview" title="适应"></AppIcon>
</el-button>
<el-divider direction="vertical" />
<el-button link @click="retract">
<el-tooltip class="box-item" effect="dark" content="收起全部节点" placement="top">
<AppIcon iconName="app-retract" title="收起全部节点"></AppIcon>
</el-tooltip>
</el-button>
<el-button link @click="extend">
<el-tooltip class="box-item" effect="dark" content="展开全部节点" placement="top">
<AppIcon iconName="app-extend" title="展开全部节点"></AppIcon>
</el-tooltip>
</el-button>
<el-button link @click="layout">
<AppIcon iconName="app-beautify" title="美化"></AppIcon>
<el-tooltip class="box-item" effect="dark" content="一键美化" placement="top">
<AppIcon iconName="app-beautify" title="一键美化"></AppIcon>
</el-tooltip>
</el-button>
</el-card>
</template>
Expand All @@ -36,5 +47,15 @@ function fitView() {
const layout = () => {
props.lf?.extension.dagre.layout()
}
const retract = () => {
props.lf?.graphModel.nodes.forEach((element: any) => {
element.properties.showNode = false
})
}
const extend = () => {
props.lf?.graphModel.nodes.forEach((element: any) => {
element.properties.showNode = true
})
}
</script>
<style scoped></style>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段CSS样式存在一些问题和可以进行改进的地方。首先，我们对代码稍作调整如下：

.el-button.link {
  text-decoration: none;
}

.app-icon--inner-container::after {
  border-right-color: var(--el-primary-color-light);
}

在上述修改后：

  1. 去除了多余的空格。
  2. 添加了text-decoration: none;来去除按钮链接的颜色。
  3. 使用自定义组件的属性替换原生元素（如zoomIn, fitView, retract, 和 extend）以更简洁的方式显示操作图标。

这些更改不会显著影响当前代码的功能性，但会使用户界面更加一致并且更具吸引力。你可以选择将此样本来替换原始样式，并确保与你的应用整体风格保持一致。

Loading