条件エディタ実装

frontend/src/components/main/NodeItem.vue

@@ -26,7 +26,11 @@
         </q-toolbar>
         <q-separator />
         <q-card-section>
-          <div class="text-h7">{{ node.title }}</div>
+          <div class="row">
+          <span class="text-h7">{{ node.title }}</span>
+          <q-space></q-space>
+          <q-chip color="info" text-color="white" size="0.70rem" v-if="varName(node)" clickable>{{ varName(node) }}</q-chip>
+          </div>
         </q-card-section>
         <template v-if="hasBranch">
           <q-separator />
@@ -134,7 +138,14 @@ export default defineComponent({
      */
      const onDeleteAllNode=()=>{
       context.emit('deleteAllNextNodes', props.actionNode);
-    }
+    };
+    /**
+     * 変数名取得
+     */
+    const varName =(node:IActionNode)=>{
+      const prop = node.actionProps.find((prop) => prop.props.name === "verName");
+      return prop?.props.modelValue;
+    };
     return {
       node: props.actionNode,
       isRoot: props.actionNode.isRoot,
@@ -145,7 +156,8 @@ export default defineComponent({
       onNodeClick,
       onEditNode,
       onDeleteNode,
-      onDeleteAllNode
+      onDeleteAllNode,
+      varName
     }
   }
 });