Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2025-07-08 13:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

支持组件缩放

Browse Source
This commit is contained in:
rookie4show
2025-05-27 18:22:32 +08:00
parent a465450bf1
commit 45565de5ef
3 changed files with 72 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/flow/nodes/common/ImageNode.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { Handle, useVueFlow } from '@vue-flow/core';
import { NodeResizer } from '@vue-flow/node-resizer';
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({
@ -17,18 +17,19 @@ const nodeHeight = ref(120);
watch(() => props.data, (newData) => {
if (newData && newData.width) nodeWidth.value = newData.width;
if (newData && newData.height) nodeHeight.value = newData.height;
}, { immediate: true });
}, {immediate: true});
</script>
<template>
<div class="image-node" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">
<NodeResizer v-if="selected" :min-width="60" :min-height="60" :max-width="400" :max-height="400" />
<Handle type="target" position="left" :id="`${id}-target`" />
<NodeResizer v-if="selected" :min-width="60" :min-height="60" :max-width="400" :max-height="400"/>
<div class="image-node">
<Handle type="target" position="left" :id="`${id}-target`"/>
<div class="image-content">
<img v-if="props.data && props.data.url" :src="props.data.url" alt="图片节点" style="width:100%;height:100%;object-fit:contain;" />
<img v-if="props.data && props.data.url" :src="props.data.url" alt="图片节点"
style="width:100%;height:100%;object-fit:contain;"/>
<div v-else class="image-placeholder">未上传图片</div>
</div>
<Handle type="source" position="right" :id="`${id}-source`" />
<Handle type="source" position="right" :id="`${id}-source`"/>
</div>
</template>
<style scoped>
@ -41,14 +42,22 @@ watch(() => props.data, (newData) => {
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
}
.image-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image-placeholder {
color: #bbb;
font-size: 14px;

23
src/components/flow/nodes/yys/PropertySelectNode.vue
View File

@ -205,15 +205,14 @@ defineExpose({
</script>
<template>
<div class="property-node" :class="[currentProperty.priority ? `priority-${currentProperty.priority}` : '']" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">
<NodeResizer
<NodeResizer
v-if="selected"
:min-width="150"
:min-height="150"
:max-width="300"
:max-height="300"
/>
/>
<div class="property-node" :class="[currentProperty.priority ? `priority-${currentProperty.priority}` : '']" >
<!-- 输入连接点 -->
<Handle type="target" position="left" :id="`${id}-target`" />
@ -252,12 +251,28 @@ defineExpose({
</template>
<style scoped>
.property-node {
position: relative;
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
}
.node-content {
position: relative;
background-color: white;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
}
:deep(.vue-flow__node-resizer) {

45
src/components/flow/nodes/yys/YuhunSelectNode.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import { Handle, Position, useVueFlow } from '@vue-flow/core';
import { NodeResizer } from '@vue-flow/node-resizer'
import {ref, onMounted, onUnmounted, watch} from 'vue';
import {Handle, Position, useVueFlow} from '@vue-flow/core';
import {NodeResizer} from '@vue-flow/node-resizer'
import '@vue-flow/node-resizer/dist/style.css';
const props = defineProps({
@ -11,10 +11,10 @@ const props = defineProps({
});
// 获取Vue Flow的实例和节点更新方法
const { findNode, updateNode } = useVueFlow();
const {findNode, updateNode} = useVueFlow();
// 御魂信息保存在节点数据中
const currentYuhun = ref({ name: '未选择御魂', avatar: '', type: '' });
const currentYuhun = ref({name: '未选择御魂', avatar: '', type: ''});
// 节点尺寸
const nodeWidth = ref(180);
@ -25,7 +25,7 @@ watch(() => props.data, (newData) => {
if (newData && newData.yuhun) {
currentYuhun.value = newData.yuhun;
}
}, { immediate: true });
}, {immediate: true});
// 更新御魂信息的方法（将由App.vue调用）
const updateNodeYuhun = (yuhun) => {
@ -34,14 +34,14 @@ const updateNodeYuhun = (yuhun) => {
// 备用方案：通过全局事件总线监听更新
const handleYuhunUpdate = (event) => {
const { nodeId, yuhun } = event.detail;
const {nodeId, yuhun} = event.detail;
if (nodeId === props.id) {
updateNodeYuhun(yuhun);
}
};
// 处理调整大小
const handleResize = (event, { width, height }) => {
const handleResize = (event, {width, height}) => {
// 更新本地状态
nodeWidth.value = width;
nodeHeight.value = height;
@ -84,17 +84,16 @@ defineExpose({
</script>
<template>
<div class="yuhun-node" :style="{ width: `${nodeWidth}px`, height: `${nodeHeight}px` }">
<NodeResizer
<NodeResizer
v-if="selected"
:min-width="150"
:min-height="150"
:max-width="300"
:max-height="300"
/>
/>
<div class="yuhun-node" >
<!-- 输入连接点 -->
<Handle type="target" position="left" :id="`${id}-target`" />
<Handle type="target" position="left" :id="`${id}-target`"/>
<div class="node-content">
<div class="node-header">
@ -103,7 +102,7 @@ defineExpose({
<div class="node-body">
<div v-if="currentYuhun.avatar" class="yuhun-avatar">
<img :src="currentYuhun.avatar" alt="御魂图片" />
<img :src="currentYuhun.avatar" alt="御魂图片"/>
</div>
<div v-else class="yuhun-placeholder">
点击选择御魂
@ -114,17 +113,33 @@ defineExpose({
</div>
<!-- 输出连接点 -->
<Handle type="source" position="right" :id="`${id}-source`" />
<Handle type="source" position="right" :id="`${id}-source`"/>
</div>
</template>
<style scoped>
.yuhun-node {
position: relative;
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
}
.node-content {
position: relative;
background-color: white;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
min-width: 180px;
min-height: 180px;
}
:deep(.vue-flow__node-resizer) {