工艺流程操作提示

src/view/process/process-flow/config/ProcessConfig.js

@@ -446,7 +446,7 @@ export default class Process {
     })
     // endregion
 
-    // region 鼠标移入移出 动态添加连接线托拽工具
+    // region 鼠标移入移出 动态添加连接线托拽工具 废弃
     // this.graph.on('edge:mouseenter', ({ cell }) => {
     //   cell.addTools([
     //     {

src/view/process/process-flow/process-setting.vue

@@ -8,11 +8,24 @@
       <Layout>
         <!-- 顶部工具栏 -->
         <Header class="header">
-          <Button @click="()=>{this.graph.exportPNG('',{padding:50})}">导出PNG</Button>
-          <Button @click="exportJson" style="margin-left:10px;">导出JSON</Button>
-          <Upload action="" accept=".json" :before-upload="uploadJson">
-            <Button style="margin:7px 0 0 10px;">导入JSON</Button>
-          </Upload>
+          <div style="display: flex;align-items: center;margin-right: 50px">
+            <Button @click="()=>{this.graph.exportPNG('',{padding:50})}">导出PNG</Button>
+            <Button @click="exportJson" style="margin-left:10px;">导出JSON</Button>
+            <Upload action="" accept=".json" :before-upload="uploadJson">
+              <Button style="margin:7px 0 0 10px;">导入JSON</Button>
+            </Upload>
+          </div>
+          <div style="min-width: 800px">
+            <Tag color="blue">方向键移动</Tag>
+            <Tag color="blue">右键画布拖动</Tag>
+            <Tag color="blue">ctrl+C 复制</Tag>
+            <Tag color="blue">ctrl+X 剪切</Tag>
+            <Tag color="blue">ctrl+V 粘贴</Tag>
+            <Tag color="blue">ctrl+X 撤销</Tag>
+            <Tag color="blue">ctrl+shift+Z 撤回撤销</Tag>
+            <Tag color="blue">ctrl+alt+A 全选</Tag>
+            <Tag color="blue">del 删除</Tag>
+          </div>
         </Header>
         <!--   中间流程图  -->
         <Content>
@@ -416,6 +429,7 @@ export default {
   background: #ededed;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 /deep/ .ivu-layout-header {