Remove unnecessary components, add an action bar.

frontend/src/pages/FlowEditorPage.vue

@@ -1,11 +1,46 @@
 <template>
   <div>
-    <div class="q-pa-md">
-      <div class="q-gutter-sm row items-start">
-        <q-breadcrumbs>
-          <q-breadcrumbs-el icon="home" to="/" />
-          <q-breadcrumbs-el :label="title" icon="rule" />
+    <div class="q-ma-md">
+      <div class="q-gutter-xs row items-start">
+        <q-breadcrumbs class="q-pt-xs q-mr-sm">
+          <q-breadcrumbs-el icon="home" />
+          <q-breadcrumbs-el :label="actName" />
+          <q-breadcrumbs-el
+            v-for="flowName in flowNames"
+            :key="flowName"
+            :label="flowName"
+          />
         </q-breadcrumbs>
+        <q-separator vertical class="q-mr-xs" />
+        <q-btn
+          flat
+          class="q-py-sm"
+          padding="none"
+          color="primary"
+          size="md"
+          @click="drawerLeft = !drawerLeft"
+          label="変 更"
+          icon="expand_more"
+          dense
+        />
+
+        <q-space />
+        <q-btn
+          class="q-px-sm q-mr-sm"
+          color="white"
+          size="sm"
+          text-color="black"
+          label="キャンセル"
+          dense
+        />
+
+        <q-btn
+          class="q-px-sm"
+          color="primary"
+          size="sm"
+          label="保存する"
+          dense
+        />
       </div>
     </div>
     <q-layout
@@ -23,62 +58,56 @@
             @click="drawerLeft = !drawerLeft"
           />
         </div>
-        <div class="q-mt-md q-pa-sm">
-          <ControlPanel />
+
+        <div class="q-mt-lg q-pa-sm">
+          <q-card-section>
+            <p class="text-h6 q-pl-md">ページ選択</p>
+            <ItemSelector />
+          </q-card-section>
         </div>
+        <q-separator />
+        <div class="q-mt-md q-pa-sm">
+          <q-card-section>
+            <p class="text-h6 q-pl-md q-mb-none">フロー選択</p>
+            <ControlPanel />
+          </q-card-section>
+        </div>
+        <q-separator />
+        <q-card-actions align="right">
+          <div class="q-pa-sm">
+            <q-btn
+              flat
+              color="primary"
+              size="md"
+              @click="drawerLeft = !drawerLeft"
+              label="ジャンプ"
+              dense
+            />
+          </div>
+        </q-card-actions>
       </q-drawer>
 
-      <div class="q-mt-lg q-mx-lg">
-        <div class="row">
-          <div class="col-2">
-            <div class="ItemSelector q-pa-sm">
-              <div class="row">
-                <div class="col-auto">
-                  <q-icon name="widgets" color="primary" size="2.5em" />
-                </div>
-                <div class="col flex">
-                  <div class="q-pa-sm flex" style="align-items: center">
-                    {{ actName }}
-                  </div>
-                </div>
-                <div class="col-auto flex">
-                  <div class="flex" style="align-items: center">
-                    <q-btn
-                      class="q-px-sm"
-                      color="white"
-                      size="sm"
-                      text-color="black"
-                      @click="drawerLeft = !drawerLeft"
-                      label="変 更"
-                      dense
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col"><FlowChartTest /></div>
-        </div>
-      </div>
+      <FlowChartTest />
     </q-layout>
   </div>
 </template>
 
 <script setup lang="ts">
 import FlowChartTest from 'pages/FlowChartTest.vue';
-import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
 import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
+import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
 import { computed, ref } from 'vue';
 interface FlowEditorPageProps {
-  title: string;
   actName: string;
+  flowNames: string[];
 }
 
 const props = withDefaults(defineProps<FlowEditorPageProps>(), {
-  title: 'FlowEditor',
-  actName: '勤怠管理',
+  actName: '勤怠管理 - 4',
+  flowNames: () => ['レコードを追加画面', '保存をクリックした時'],
 });
 const actName = computed(() => props.actName);
+const flowNames = computed(() => props.flowNames);
 
 const drawerLeft = ref(false);
 </script>