mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 10:12:51 +00:00
c1c0c6a5a5
* perf: icon optimize * perf: Optimize login page --------- Co-authored-by: wangdan-fit2cloud <dan.wang@fit2cloud.com>
111 lines
3.0 KiB
Vue
111 lines
3.0 KiB
Vue
<template>
|
|
<el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
|
|
<el-button link @click="zoomOut" style="border: none">
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('views.applicationWorkflow.control.zoomOut')"
|
|
placement="top"
|
|
>
|
|
<el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomOut')"
|
|
><ZoomOut
|
|
/></el-icon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
<el-button link @click="zoomIn" style="border: none">
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('views.applicationWorkflow.control.zoomIn')"
|
|
placement="top"
|
|
>
|
|
<el-icon :size="16" :title="$t('views.applicationWorkflow.control.zoomIn')"
|
|
><ZoomIn
|
|
/></el-icon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
<el-button link @click="fitView" style="border: none">
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('views.applicationWorkflow.control.fitView')"
|
|
placement="top"
|
|
>
|
|
<AppIcon
|
|
iconName="app-fitview"
|
|
:title="$t('views.applicationWorkflow.control.fitView')"
|
|
></AppIcon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
<el-divider direction="vertical" />
|
|
<el-button link @click="retract" style="border: none">
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('views.applicationWorkflow.control.retract')"
|
|
placement="top"
|
|
>
|
|
<AppIcon
|
|
style="font-size: 16px"
|
|
iconName="app-retract"
|
|
:title="$t('views.applicationWorkflow.control.retract')"
|
|
></AppIcon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
<el-button link @click="extend" style="border: none">
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('views.applicationWorkflow.control.extend')"
|
|
placement="top"
|
|
>
|
|
<AppIcon
|
|
style="font-size: 16px"
|
|
iconName="app-extend"
|
|
:title="$t('views.applicationWorkflow.control.extend')"
|
|
></AppIcon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
<el-button link @click="layout" style="border: none">
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="$t('views.applicationWorkflow.control.beautify')"
|
|
placement="top"
|
|
>
|
|
<AppIcon
|
|
style="font-size: 16px"
|
|
iconName="app-beautify"
|
|
:title="$t('views.applicationWorkflow.control.beautify')"
|
|
></AppIcon>
|
|
</el-tooltip>
|
|
</el-button>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
lf: Object || String || null,
|
|
})
|
|
|
|
function zoomIn() {
|
|
props.lf?.zoom(true, [0, 0])
|
|
}
|
|
function zoomOut() {
|
|
props.lf?.zoom(false, [0, 0])
|
|
}
|
|
function fitView() {
|
|
props.lf?.resetZoom()
|
|
props.lf?.resetTranslate()
|
|
props.lf?.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>
|