|
|
@@ -2,12 +2,11 @@
|
|
|
<div class="flow-editor">
|
|
|
<el-card>
|
|
|
<div slot="header">
|
|
|
- <span>编排画布{{ flowId ? '(编辑)' : '(新建)' }}</span>
|
|
|
- <div style="float:right">
|
|
|
+ <PageHeader :title="flowId ? '编排画布(编辑)' : '编排画布(新建)'">
|
|
|
<el-button size="small" @click="saveDraft">保存草稿</el-button>
|
|
|
<el-button size="small" type="primary" @click="publishFlow">发布</el-button>
|
|
|
<el-button size="small" @click="$router.push('/orchestration')">返回列表</el-button>
|
|
|
- </div>
|
|
|
+ </PageHeader>
|
|
|
</div>
|
|
|
|
|
|
<el-form :inline="true">
|
|
|
@@ -359,18 +358,18 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.editor-layout { display: flex; height: 600px; border: 1px solid #EBEEF5; border-radius: 4px; overflow: hidden; }
|
|
|
-.node-palette { width: 180px; border-right: 1px solid #EBEEF5; padding: 10px; overflow-y: auto; }
|
|
|
+.editor-layout { display: flex; height: 600px; border: 1px solid var(--adm-border-split); border-radius: 4px; overflow: hidden; }
|
|
|
+.node-palette { width: 180px; border-right: 1px solid var(--adm-border-split); padding: 10px; overflow-y: auto; }
|
|
|
.palette-title { font-weight: bold; margin-bottom: 10px; font-size: 13px; }
|
|
|
-.palette-item { background: #F4F4F5; border-radius: 4px; padding: 8px; margin-bottom: 8px; cursor: grab; font-size: 12px; border: 1px solid #DCDFE6; }
|
|
|
-.palette-item:hover { border-color: #409EFF; color: #409EFF; }
|
|
|
-.palette-empty { color: #909399; font-size: 12px; }
|
|
|
+.palette-item { background: var(--adm-fill); border-radius: 4px; padding: 8px; margin-bottom: 8px; cursor: grab; font-size: 12px; border: 1px solid var(--adm-border-base); }
|
|
|
+.palette-item:hover { border-color: var(--adm-primary); color: var(--adm-primary); }
|
|
|
+.palette-empty { color: var(--adm-text-45); font-size: 12px; }
|
|
|
.canvas-wrap { flex: 1; position: relative; }
|
|
|
-.jsplumb-canvas { position: relative; width: 100%; height: 100%; background: #FAFAFA; }
|
|
|
-.canvas-tip { position: absolute; bottom: 8px; left: 8px; color: #C0C4CC; font-size: 12px; pointer-events: none; }
|
|
|
-.prop-panel { width: 240px; border-left: 1px solid #EBEEF5; padding: 10px; overflow-y: auto; }
|
|
|
+.jsplumb-canvas { position: relative; width: 100%; height: 100%; background: var(--adm-bg-header); }
|
|
|
+.canvas-tip { position: absolute; bottom: 8px; left: 8px; color: var(--adm-text-25); font-size: 12px; pointer-events: none; }
|
|
|
+.prop-panel { width: 240px; border-left: 1px solid var(--adm-border-split); padding: 10px; overflow-y: auto; }
|
|
|
.prop-title { font-weight: bold; margin-bottom: 10px; font-size: 13px; }
|
|
|
-.prop-empty { color: #909399; font-size: 12px; }
|
|
|
-.flow-node { position: absolute; width: 120px; padding: 8px; background: #fff; border: 2px solid #409EFF; border-radius: 6px; text-align: center; font-size: 12px; cursor: move; user-select: none; }
|
|
|
-.flow-node .node-id { display: block; color: #C0C4CC; font-size: 10px; margin-top: 2px; }
|
|
|
+.prop-empty { color: var(--adm-text-45); font-size: 12px; }
|
|
|
+.flow-node { position: absolute; width: 120px; padding: 8px; background: var(--adm-bg-container); border: 2px solid var(--adm-primary); border-radius: 6px; text-align: center; font-size: 12px; cursor: move; user-select: none; }
|
|
|
+.flow-node .node-id { display: block; color: var(--adm-text-25); font-size: 10px; margin-top: 2px; }
|
|
|
</style>
|