add flow editor left component

frontend/src/components/flowEditor/left/ControlPanelC.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="q-py-md">
+    <q-tree :nodes="LeftDataBus.root" node-key="label">
+      <template #header-rg="p">
+        <ControlPanelTreeRadio
+          :node="p.node"
+          :dataBus="LeftDataBus"
+        ></ControlPanelTreeRadio>
+      </template>
+    </q-tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  LeftDataBus,
+  setControlPanelE,
+} from 'components/flowEditor/left/DataBus';
+import ControlPanelTreeRadio from './ControlPanelTreeRadio.vue';
+
+// 应该在page中用网络请求获取值并初始化组件
+// 然后在page中执行setControlPane设置databus
+setControlPanelE();
+</script>

frontend/src/components/flowEditor/left/ControlPanelTreeRadio.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-radio v-model="model" :val="node.value" :label="node.label" />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { LeftData, ControlPanelData } from 'components/flowEditor/left/DataBus';
+
+const props = defineProps(['node', 'dataBus']);
+
+const node = computed(() => props.node as ControlPanelData);
+
+const model = computed({
+  get() {
+    return (props.dataBus as LeftData).data?.get(node.value.group ?? 'n');
+  },
+  set(newValue) {
+    (props.dataBus as LeftData).data?.set(
+      node.value.group ?? 'n',
+      newValue ?? ''
+    );
+  },
+});
+</script>

frontend/src/components/flowEditor/left/DataBus.ts

@@ -0,0 +1,72 @@
+import { reactive } from 'vue'
+
+export const LeftDataBus = reactive<LeftData>({})
+
+const defaultData = {
+    root: [
+        {
+            label: 'レコードを追加画面',
+            children: [
+                {
+                    label: '追加画面表示した時',
+                    header: 'rg',
+                    value: '1-1',
+                    group: 'g1',
+                    children: []
+                },
+                {
+                    label: '保存をクリックした時',
+                    header: 'rg',
+                    value: '1-2',
+                    group: 'g1',
+                    children: []
+                },
+                {
+                    label: '保存成功した時',
+                    header: 'rg',
+                    value: '1-3',
+                    group: 'g1',
+                    children: []
+                },
+            ]
+        },
+        {
+            label: 'レコード編集画面',
+        },
+        {
+            label: 'レコード詳細画面',
+        },
+        {
+            label: 'レコード一覧画面',
+        },
+    ],
+    data: new Map([['g1', '1-1']])
+}
+
+export const setControlPanel = (rootData: LeftData) => {
+    const { root: dr, data: dd } = defaultData
+    LeftDataBus.title = rootData.title
+    LeftDataBus.root = rootData.root ?? dr
+    LeftDataBus.data = rootData.data ?? dd
+}
+
+export const setControlPanelE = () => {
+    const { root: dr, data: dd } = defaultData
+    // LeftDataBus.title = rootData.title
+    LeftDataBus.root = dr
+    LeftDataBus.data = dd
+}
+
+export interface LeftData {
+    title?: string
+    root?: ControlPanelData[]
+    data?: Map<string, string>
+}
+
+export interface ControlPanelData {
+    label: string,
+    header?: string,
+    value?: string,
+    group?: string,
+    children?: ControlPanelData[]
+}

frontend/src/pages/FlowEditorPage.vue

@@ -9,7 +9,7 @@
       </div>
       <div class="q-pa-md">
         <div class="row">
-          <div class="col-3 column">
+          <div class="col-2 column">
             <ItemSelector />
             <div class="col-auto"><ControlPanel /></div>
           </div>
@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
-import ControlPanel from 'components/flowEditor/left/ControlPanel.vue';
+import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
 interface FlowEditorPageProps {
   title: string;
 }