Rulr Editor 作成

frontend/src/pages/IndexPage.vue

@@ -1,6 +1,12 @@
 <template>
   <q-page>
+
     <div class="q-pa-md">
+      <div class="q-gutter-sm row items-start">
+        <q-breadcrumbs>
+          <q-breadcrumbs-el icon="home" label="ホーム" />
+        </q-breadcrumbs>
+     </div>
       <div class="q-gutter-sm row items-start">
         <doc-uploader></doc-uploader>
       </div>

frontend/src/pages/RuleEditor.vue

@@ -2,16 +2,48 @@
   <q-page>
     <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" />
+        </q-breadcrumbs>
+      </div>
+      <div id="q-app" style="min-height: 100vh;">
+        <div class="q-pa-md">
+            <q-btn-dropdown
+              split
+              color="primary"
+              label="ルール新規作成"
+              size="lg"
+            >
+              <q-list>
+                <q-item
+                    v-for="action in actions"
+                    clickable v-close-popup
+                    @click="onItemClick"
+                    :key="action"
+                  >
+                  <q-item-section>
+                    <q-item-label>{{ action }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+        </div>
       </div>
     </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import { Todo, Meta } from 'components/models';
-import DocUploader from 'components/DocUpload.vue';
-// import ExampleComponent from 'components/ExampleComponent.vue';
-import { ref } from 'vue';
-
+interface Props {
+  title: string;
+  actions:string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  title:"ルールエディター",
+  actions:()=>["フィールド制御","一覧画面","その他"]
+});
+function onItemClick(evt: Event){
+  return;
+}
 </script>