Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2026-03-05 15:05:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

固定useStore核心功能，调用解耦，优化代码

Browse Source
This commit is contained in:
rookie4show
2025-07-30 17:04:36 +08:00
parent b904b257e5
commit 7a87ca6c03
7 changed files with 386 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/flow/nodes/common/TextNode.vue
View File

@@ -1,51 +1,51 @@
<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">-->
<!--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';-->
const props = defineProps({
data: Object,
id: String,
selected: Boolean
});
<!--const props = defineProps({-->
<!-- data: Object,-->
<!-- id: String,-->
<!-- selected: Boolean-->
<!--});-->
const nodeWidth = ref(200);
const nodeHeight = ref(120);
const html = ref('');
<!--const nodeWidth = ref(200);-->
<!--const nodeHeight = ref(120);-->
<!--const html = ref('');-->
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>
<!--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>-->