feat: v3 style of node body (#5169)

* feat: v3 style of node body

* Update src/renderer/extensions/vueNodes/components/LGraphNode.vue

* fix: review's issues

* fix: review's issue

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { COMFY_VUE_NODE_DIMENSIONS } from '@/lib/litegraph/src/litegraph'
+import { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+defineProps<{
+  widget: Pick<SimplifiedWidget<string | number | undefined>, 'name'>
+}>()
+
+// Get widget height from litegraph constants
+const widgetHeight = COMFY_VUE_NODE_DIMENSIONS.components.STANDARD_WIDGET_HEIGHT
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between gap-2"
+    :style="{ height: widgetHeight + 'px' }"
+  >
+    <p
+      v-if="widget.name"
+      class="text-sm text-[#888682] dark-theme:text-[#9FA2BD] font-normal flex-1 truncate w-20"
+    >
+      {{ widget.name }}
+    </p>
+    <div class="w-75">
+      <slot />
+    </div>
+  </div>
+</template>