参数文本

src/stores/modules/workflow.ts

@@ -117,6 +117,7 @@ export const useWorkflowStore = defineStore('workflow', {
       return options
     },
     autoSave() {
+      console.log('自动保存触发')
       this.autoSaveFlag = !this.autoSaveFlag
     },
   },

src/views/workflow/instance/answer/default.ts

@@ -1,5 +1,7 @@
 const nodeDefault = {
-  defaultValue: () => ({}),
+  defaultValue: () => ({
+    answer: '',
+  }),
 }
 
 export default nodeDefault

src/views/workflow/instance/answer/panel/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="panel-block" v-if="state.nodeData">
-    <!--    <div class="_p-title" style="margin-top: 0">-->
-    <!--      <div class="text-sm">可用变量</div>-->
-    <!--    </div>-->
-    <varsSelect :node="props.node" />
-    <paramsTextarea :node="props.node" class="max-h-50" />
+    <paramsTextarea
+      v-model="state.nodeData.answer"
+      :node="props.node"
+      class="mt-4 max-h-100"
+    />
   </div>
 </template>
 

src/views/workflow/instance/component/params-textarea/index.vue

@@ -29,7 +29,7 @@
         style="line-height: 1.5"
         ref="ref_textarea"
         contenteditable="true"
-        @input="updateMarkdown"
+        @input="handleInput"
         @paste="handlePaste"
         @focus="state.isFocus = true"
         @blur="state.isFocus = false"
@@ -90,8 +90,7 @@ watch(
   },
   { immediate: true },
 )
-const updateMarkdown = (e) => {
-  const selection: any = window.getSelection()
+const handleInput = (e) => {
   let lastReplacedSpan: any = null
 
   const regex = /\{\{#([^#]+)#\}\}/g
@@ -138,6 +137,7 @@ const updateMarkdown = (e) => {
     newSelection.addRange(newRange)
   }
   state.textCount = e.target.innerText?.length || 0
+  emitValue()
 }
 const handlePaste = (e) => {
   e.preventDefault()
@@ -151,7 +151,8 @@ const onCopy = (text) => {
 const initVarsDom = (vars) => {
   const dom = document.createElement('div')
   dom.setAttribute('contenteditable', 'false')
-  dom.style.display = 'inline-block'
+  dom.setAttribute('sign', `{{#${vars.nodeId}_${vars.key}#}}`)
+  dom.className = 'vars-dom inline-block'
   const app = createApp(paramValue, {
     vars,
   })
@@ -180,6 +181,7 @@ const setVars = (vars) => {
   }
   // 可选：滚动到插入的元素
   nodeToInsert.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+  emitValue()
 }
 const handleSelectionchange = () => {
   if (state.isFocus) {
@@ -189,7 +191,36 @@ const handleSelectionchange = () => {
     }
   }
 }
+const emitValue = () => {
+  const newDom = document.createElement('div')
+  newDom.innerHTML = ref_textarea.value.innerHTML
+  const varsDomDivs = newDom.querySelectorAll('div[class*="vars-dom"]')
+  // 遍历每个匹配的元素
+  varsDomDivs.forEach((div: any) => {
+    // 获取sign属性的值
+    const signValue = div.getAttribute('sign')
+    // 如果sign值存在，就用它替换整个div
+    if (signValue) {
+      // 创建一个文本节点来替换原div
+      const textNode = document.createTextNode(signValue)
+      // 用文本节点替换原div
+      div.parentNode.replaceChild(textNode, div)
+    }
+  })
+  emit('update:modelValue', newDom.innerHTML)
+}
 onMounted(() => {
+  if (props.modelValue) {
+    setTimeout(() => {
+      ref_textarea.value.innerHTML = props.modelValue
+      ref_textarea.value.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      )
+    }, 1000)
+  }
   document.addEventListener('selectionchange', handleSelectionchange)
 })
 onUnmounted(() => {