支持组件缩放

src/components/flow/nodes/common/ImageNode.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import {ref, watch} from 'vue';
-import { Handle, useVueFlow } from '@vue-flow/core';
+import {Handle, useVueFlow} from '@vue-flow/core';
-import { NodeResizer } from '@vue-flow/node-resizer';
+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"/>
-    <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`" />
+    <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;

src/components/flow/nodes/yys/PropertySelectNode.vue

@@ -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) {

src/components/flow/nodes/yys/YuhunSelectNode.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import {ref, onMounted, onUnmounted, watch} from 'vue';
-import { Handle, Position, useVueFlow } from '@vue-flow/core';
+import {Handle, Position, useVueFlow} from '@vue-flow/core';
-import { NodeResizer } from '@vue-flow/node-resizer'
+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,18 +34,18 @@ 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;
-  
+
   // 更新Vue Flow中的节点
   const node = findNode(props.id);
   if (node) {
@@ -65,7 +65,7 @@ onMounted(() => {
   console.log('YuhunSelectNode mounted:', props.id);
   // 添加全局事件监听
   window.addEventListener('update-yuhun', handleYuhunUpdate);
-  
+
   // 初始化时检查是否有数据
   if (props.data && props.data.yuhun) {
     currentYuhun.value = props.data.yuhun;
@@ -84,26 +84,25 @@ 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">
         <div class="node-title">御魂选择</div>
       </div>
-      
+
       <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">
           点击选择御魂
@@ -112,19 +111,35 @@ defineExpose({
         <div v-if="currentYuhun.type" class="yuhun-type">{{ currentYuhun.type }}</div>
       </div>
     </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) {