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: '
双击右侧可编辑文字
',
+ 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 @@
-
-
-
-
-
+
-
-
-
-
-
+
+
+
+
+
-
-
-
+-->
\ No newline at end of file
+.text-content:focus {
+ background: rgba(64, 158, 255, 0.1);
+ border-radius: 2px;
+}
+
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<{
-
文本编辑器待实现,当前节点内容:{{ props.node?.properties?.text?.content || '未设置' }}
+
+
+ {{ props.node?.properties?.text || '未设置' }}
+
+
+
+
+ 💡 提示:双击画布中的节点即可编辑文字
+