feat: 旅程配置增加添加说明

src/components/flow/CustomTextNode.vue

+<script setup lang="ts">
+import type { NodeProps } from '@vue-flow/core'
+import { useVueFlow } from '@vue-flow/core'
+import { Delete } from '@element-plus/icons-vue'
+
+interface Props {
+  node: NodeProps
+}
+
+const props = defineProps<Props>()
+
+const { findNode, removeNodes, nodesDraggable } = useVueFlow()
+
+const formInput = ref<null | HTMLInputElement>(null)
+const form = reactive({
+  label: ''
+})
+watchEffect(() => {
+  form.label = props.node.label as string
+})
+
+function onBlur() {
+  const node = findNode(props.node.id)
+  if (node) {
+    node.label = form.label
+  }
+}
+
+// 删除
+function onRemove() {
+  const node = findNode(props.node.id)
+  if (node) removeNodes([node])
+}
+</script>
+<template>
+  <div class="node-text">
+    <el-input
+      type="text"
+      :readonly="!nodesDraggable"
+      v-model="form.label"
+      :maxlength="20"
+      ref="formInput"
+      @blur="onBlur" />
+    <p>{{ form.label }}</p>
+    <el-icon v-if="nodesDraggable" size="14" @click="onRemove"><Delete /></el-icon>
+  </div>
+</template>
+
+<style lang="scss">
+.node-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  p {
+    min-width: 100px;
+    font-size: var(--el-font-size-base);
+    line-height: 30px;
+    color: var(--el-input-text-color, var(--el-text-color-regular));
+    text-align: center;
+  }
+  .el-input {
+    width: 100px;
+    display: none;
+  }
+  .el-input__wrapper {
+    padding: 0 5px;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .el-input__inner {
+    text-align: center;
+  }
+  .el-icon {
+    opacity: 0;
+  }
+}
+.vue-flow__node {
+  &.selected {
+    .node-text {
+      p {
+        display: none;
+      }
+      .el-input {
+        display: block;
+      }
+      .el-input__wrapper {
+        border-bottom: 1px solid var(--el-input-border-color);
+      }
+      .el-icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/components/flow/Index.vue

@@ -9,11 +9,12 @@ import { nanoid } from 'nanoid'
 import { VueFlow, useVueFlow, PanelPosition, MarkerType, ConnectionLineType } from '@vue-flow/core'
 import { Controls } from '@vue-flow/controls'
 import CustomNode from './CustomNode.vue'
+import CustomTextNode from './CustomTextNode.vue'
 import CustomEdge from './CustomEdge.vue'
 
 interface Props {
-  action: string
-  role: string
+  action?: string
+  role?: string
   templateType?: string
   score?: number
 }
@@ -103,6 +104,20 @@ const onDrop = (event: DragEvent) => {
     )
   })
 }
+
+const onAddText = () => {
+  if (!vueFlowRef.value) return
+
+  const { left, top } = vueFlowRef.value.getBoundingClientRect()
+  console.log(left, top)
+  const newNode = {
+    id: nanoid(4),
+    type: 'text',
+    position: { x: 0, y: 0 },
+    label: '说明'
+  }
+  addNodes([newNode])
+}
 </script>
 <template>
   <div class="flow">
@@ -110,7 +125,6 @@ const onDrop = (event: DragEvent) => {
     <el-card shadow="never" class="flow-main" @drop="onDrop">
       <slot name="header"> </slot>
       <VueFlow
-        snap-to-grid
         :zoom-on-scroll="false"
         :prevent-scrolling="false"
         :connection-radius="30"
@@ -120,10 +134,18 @@ const onDrop = (event: DragEvent) => {
         <template #node-custom="node">
           <CustomNode :node="node" />
         </template>
+        <template #node-text="node">
+          <CustomTextNode :node="node" />
+        </template>
         <template #edge-custom="props">
           <CustomEdge v-bind="props" />
         </template>
-        <Controls :showInteractive="false" :position="PanelPosition.BottomRight" />
+        <Controls :show-interactive="false" :show-fit-view="false" :position="PanelPosition.TopRight">
+          <template #top>
+            <slot name="controls"></slot>
+            <el-button type="primary" size="small" @click="onAddText">添加说明</el-button>
+          </template>
+        </Controls>
       </VueFlow>
       <slot name="footer"></slot>
     </el-card>
@@ -152,5 +174,20 @@ const onDrop = (event: DragEvent) => {
   .vue-flow {
     flex: 1;
   }
+  .vue-flow__controls {
+    display: flex;
+    align-items: center;
+    margin: 15px 5px;
+    box-shadow: none;
+    .vue-flow__controls-button {
+      border: 1px solid #eee;
+      + .vue-flow__controls-button {
+        border-left: none;
+      }
+    }
+    .el-button {
+      margin-right: 10px;
+    }
+  }
 }
 </style>

src/components/flow/components/NodeTemplate.vue

@@ -152,6 +152,7 @@ function onRemove() {
   top: 100%;
   left: 50%;
   font-size: 14px;
+  color: var(--el-input-text-color, var(--el-text-color-regular));
   text-align: center;
   white-space: nowrap;
   transform: translateX(-50%);

src/modules/trip/template/views/Setting.vue

@@ -12,9 +12,6 @@ const BindConnection = defineAsyncComponent(() => import('../components/BindConn
 
 const props = defineProps<{ id: string }>()
 
-const action = inject('action') as string
-const role = inject('role') as string
-
 const statusList = useMapStore().getMapValuesByKey('system_status')
 
 const detail = ref<TripTemplate>()
@@ -99,7 +96,7 @@ function handleConfig() {
         </el-row>
       </el-form>
     </el-card>
-    <TripFlow v-model="elements" :action="action" :role="role" :templateType="detail?.type" :score="score">
+    <TripFlow v-model="elements" :templateType="detail?.type" :score="score">
       <template #left-panel>
         <TripFlowSidebar :connectionIds="connectionIds" />
       </template>
@@ -128,6 +125,5 @@ function handleConfig() {
     v-model="configVisible"
     :data="detail"
     v-if="configVisible && detail"
-    @update="fetchConnections"
-  ></BindConnection>
+    @update="fetchConnections"></BindConnection>
 </template>