From eb26deff7257e13f569cafec5cddbf14a200ac3d Mon Sep 17 00:00:00 2001
From: rookie4show <rookie4show@gmail.com>
Date: Sat, 14 Feb 2026 23:47:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=AE=80=E5=8C=96=20TextNode=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=EF=BC=8C=E5=AE=8C=E5=85=A8=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=20LogicFlow=20=E5=8E=9F=E7=94=9F=E6=96=87=E6=9C=AC=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除自定义文本编辑逻辑，交由 LogicFlow 和 TextNodeModel 处理
- TextNode.vue 简化为空容器，LogicFlow 自动渲染文本内容
- 保留 TextNodeModel.ts 用于配置文本样式和编辑行为
- 采用模型-视图分离架构，符合 LogicFlow 设计模式
---
 src/components/flow/ComponentsPanel.vue       |  4 +-
 src/components/flow/FlowEditor.vue            | 23 +++++-
 src/components/flow/nodes/common/TextNode.vue | 75 +++++++------------
 .../flow/nodes/common/TextNodeModel.ts        | 37 +++++++++
 src/components/flow/panels/TextPanel.vue      | 10 ++-
 5 files changed, 95 insertions(+), 54 deletions(-)
 create mode 100644 src/components/flow/nodes/common/TextNodeModel.ts

diff --git a/src/components/flow/ComponentsPanel.vue b/src/components/flow/ComponentsPanel.vue
index 285d147..1d497ae 100644
--- a/src/components/flow/ComponentsPanel.vue
+++ b/src/components/flow/ComponentsPanel.vue
@@ -45,9 +45,9 @@ const componentGroups = [
         id: 'text',
         name: '文字编辑框',
         type: 'textNode',
-        description: '可编辑富文本的节点',
+        description: '可编辑文本的节点',
         data: {
-          html: '<div>双击右侧可编辑文字</div>',
+          text: '双击编辑文字',
           width: 200,
           height: 120
         }
diff --git a/src/components/flow/FlowEditor.vue b/src/components/flow/FlowEditor.vue
index eea842d..748ad80 100644
--- a/src/components/flow/FlowEditor.vue
+++ b/src/components/flow/FlowEditor.vue
@@ -74,7 +74,8 @@ import YuhunSelectNode from './nodes/yys/YuhunSelectNode.vue';
 import PropertySelectNode from './nodes/yys/PropertySelectNode.vue';
 import ImageNode from './nodes/common/ImageNode.vue';
 import AssetSelectorNode from './nodes/common/AssetSelectorNode.vue';
-// import TextNode from './nodes/common/TextNode.vue';
+import TextNode from './nodes/common/TextNode.vue';
+import TextNodeModel from './nodes/common/TextNodeModel';
 import PropertyPanel from './PropertyPanel.vue';
 import { useGlobalMessage } from '@/ts/useGlobalMessage';
 import { setLogicFlowInstance, destroyLogicFlowInstance } from '@/ts/useLogicFlow';
@@ -312,7 +313,7 @@ function bringForward(nodeId?: string) {
   if (!targetId) return;
 
   const currentNode = lfInstance.getNodeModelById(targetId);
-  if (!currentNode) return;
+  if (!currentNode) return;t
 
   const currentZIndex = currentNode.zIndex;
   currentNode.setZIndex(currentZIndex + 1);
@@ -662,7 +663,7 @@ function registerNodes(lfInstance: LogicFlow) {
 
   register({ type: 'imageNode', component: ImageNode }, lfInstance);
   register({ type: 'assetSelector', component: AssetSelectorNode }, lfInstance);
-  // register({ type: 'textNode', component: TextNode }, lfInstance);
+  register({ type: 'textNode', component: TextNode, model: TextNodeModel }, lfInstance);
 }
 
 // 初始化 LogicFlow
@@ -677,6 +678,22 @@ onMounted(() => {
     keyboard: {
       enabled: true
     },
+    style: {
+      text: {
+        color: '#333333',
+        fontSize: 14,
+        background: {
+          fill: '#ffffff',
+          stroke: '#dcdfe6',
+          strokeWidth: 1,
+          radius: 4
+        }
+      },
+      nodeText: {
+        color: '#333333',
+        fontSize: 14
+      }
+    },
     plugins: [Menu, Label, Snapshot, SelectionSelect, MiniMap, Control],
     pluginsOptions: {
       label: {
diff --git a/src/components/flow/nodes/common/TextNode.vue b/src/components/flow/nodes/common/TextNode.vue
index c2d1703..9afe0b9 100644
--- a/src/components/flow/nodes/common/TextNode.vue
+++ b/src/components/flow/nodes/common/TextNode.vue
@@ -1,51 +1,30 @@
-<!--<script setup lang="ts">-->
-<!--import { ref, watch } from 'vue';-->
-<!--import { Handle, useVueFlow } from '@vue-flow/core';-->
-<!--import { NodeResizer } from '@vue-flow/node-resizer';-->
-<!--import '@vue-flow/node-resizer/dist/style.css';-->
+<script setup lang="ts">
+// LogicFlow 会自动处理文本节点的渲染和编辑
+</script>
 
-<!--const props = defineProps({-->
-<!--  data: Object,-->
-<!--  id: String,-->
-<!--  selected: Boolean-->
-<!--});-->
+<template>
+  <div class="text-content">
+    <!-- LogicFlow 会自动渲染 text 内容 -->
+  </div>
+</template>
 
-<!--const nodeWidth = ref(200);-->
-<!--const nodeHeight = ref(120);-->
-<!--const html = ref('');-->
+<style scoped>
+.text-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  outline: none;
+  word-break: break-word;
+  padding: 4px;
+  box-sizing: border-box;
+  cursor: text;
+}
 
-<!--watch(() => props.data, (newData) => {-->
-<!--  if (newData && newData.html !== undefined) html.value = newData.html;-->
-<!--  if (newData && newData.width) nodeWidth.value = newData.width;-->
-<!--  if (newData && newData.height) nodeHeight.value = newData.height;-->
-<!--}, { immediate: true });-->
-<!--</script>-->
-<!--<template>-->
-<!--  <div class="text-node" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">-->
-<!--    <NodeResizer v-if="selected" :min-width="80" :min-height="40" :max-width="400" :max-height="400" />-->
-<!--    <Handle type="target" position="left" :id="`${id}-target`" />-->
-<!--    <div class="text-content" v-html="html"></div>-->
-<!--    <Handle type="source" position="right" :id="`${id}-source`" />-->
-<!--  </div>-->
-<!--</template>-->
-<!--<style scoped>-->
-<!--.text-node {-->
-<!--  background: #fff;-->
-<!--  border: 1px solid #dcdfe6;-->
-<!--  border-radius: 4px;-->
-<!--  display: flex;-->
-<!--  flex-direction: column;-->
-<!--  align-items: center;-->
-<!--  justify-content: center;-->
-<!--  overflow: hidden;-->
-<!--}-->
-<!--.text-content {-->
-<!--  width: 100%;-->
-<!--  height: 100%;-->
-<!--  padding: 8px;-->
-<!--  font-size: 15px;-->
-<!--  color: #333;-->
-<!--  word-break: break-all;-->
-<!--  overflow: auto;-->
-<!--}-->
-<!--</style>-->
\ No newline at end of file
+.text-content:focus {
+  background: rgba(64, 158, 255, 0.1);
+  border-radius: 2px;
+}
+</style>
diff --git a/src/components/flow/nodes/common/TextNodeModel.ts b/src/components/flow/nodes/common/TextNodeModel.ts
new file mode 100644
index 0000000..0fe91c0
--- /dev/null
+++ b/src/components/flow/nodes/common/TextNodeModel.ts
@@ -0,0 +1,37 @@
+import { HtmlNodeModel } from '@logicflow/core';
+
+class TextNodeModel extends HtmlNodeModel {
+  initNodeData(data: any) {
+    super.initNodeData(data);
+    // 启用文本编辑功能，支持双击编辑
+    this.text.editable = true;
+    this.text.draggable = false;
+
+    // 如果有 text 属性，设置为文本内容
+    if (data.properties?.text) {
+      this.text.value = data.properties.text;
+    }
+  }
+
+  setAttributes() {
+    // 设置默认尺寸
+    this.width = 200;
+    this.height = 120;
+  }
+
+  // 自定义文本样式
+  getTextStyle() {
+    const style = super.getTextStyle();
+    style.fontSize = 14;
+    style.color = '#333';
+    return style;
+  }
+
+  // 当文本被编辑后，同步到 properties
+  updateText(value: string) {
+    super.updateText(value);
+    this.setProperty('text', value);
+  }
+}
+
+export default TextNodeModel;
diff --git a/src/components/flow/panels/TextPanel.vue b/src/components/flow/panels/TextPanel.vue
index 3d2a6e2..1d17be6 100644
--- a/src/components/flow/panels/TextPanel.vue
+++ b/src/components/flow/panels/TextPanel.vue
@@ -8,7 +8,15 @@ const props = defineProps<{
   <div class="property-section">
     <div class="section-header">文本节点</div>
     <div class="property-item">
-      <div class="property-value">文本编辑器待实现，当前节点内容：{{ props.node?.properties?.text?.content || '未设置' }}</div>
+      <label class="property-label">内容</label>
+      <div class="property-value">
+        {{ props.node?.properties?.text || '未设置' }}
+      </div>
+    </div>
+    <div class="property-item">
+      <div class="property-note">
+        💡 提示：双击画布中的节点即可编辑文字
+      </div>
     </div>
   </div>
 </template>