feat(sections): add SectionFormPage demo

Add a dedicated SectionFormPage demo component and view to showcase form fields, detail sections, notices, and page-driver-managed state.

Remove the obsolete SectionSearchPanel demo route and menu entry, and add spacing to SectionFormPage cards for improved layout.feat(sections): add SectionFormPage demo

Add a dedicated SectionFormPage demo component and view to showcase form fields, detail sections, notices, and page-driver-managed state.

Remove the obsolete SectionSearchPanel demo route and menu entry, and add spacing to SectionFormPage cards for improved layout.

src/components/pages/PageSectionFormPageDemo.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
+import SectionFormPage from '@/components/sections/SectionFormPage.vue'
+import type {
+  DemoFormState,
+  SectionsDemoPageModel,
+} from '@/composables/page-drivers/useSectionsDemoPage'
+
+defineProps<{
+  page: SectionsDemoPageModel
+}>()
+
+// 表單內容由 page driver 持有，Page component 只透過 v-model 呈現與回寫。
+const demoForm = defineModel<DemoFormState>('demoForm', { required: true })
+
+// 送出、清除、返回都往上 emit，讓 page driver 統一處理訊息與副作用。
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'reset'): void
+  (e: 'submit'): void
+}>()
+</script>
+
+<template>
+  <SectionFormPage
+    back-label="回到列表"
+    reset-label="清除"
+    submit-label="送出"
+    :message="page.formMessage"
+    title="SectionFormPage 報表申請"
+    @back="emit('back')"
+    @reset="emit('reset')"
+    @submit="emit('submit')"
+  >
+    <!-- SectionFormPage 決定表單頁外殼；fields slot 放實際欄位組合。 -->
+    <template #fields>
+      <v-row density="compact">
+        <v-col cols="12" md="6">
+          <BaseFormTextField v-model="demoForm.title" label="標題" />
+        </v-col>
+        <v-col cols="12" md="3">
+          <BaseFormSelect v-model="demoForm.owner" label="單位" :items="page.ownerOptions" />
+        </v-col>
+        <v-col cols="12" md="3">
+          <BaseFormSelect v-model="demoForm.category" label="類型" :items="page.categoryOptions" />
+        </v-col>
+        <v-col cols="12">
+          <BaseFormTextField v-model="demoForm.description" label="說明" />
+        </v-col>
+      </v-row>
+    </template>
+
+    <!-- sections slot 放表單主欄位以外的子區段，例如明細表格或補充資訊。 -->
+    <template #sections>
+      <v-card class="mb-2">
+        <v-card-title class="text-title-medium font-weight-bold">明細</v-card-title>
+        <v-card-text>
+          <v-table density="compact">
+            <thead>
+              <tr>
+                <th>欄位</th>
+                <th>值</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>單位</td>
+                <td>{{ demoForm.owner }}</td>
+              </tr>
+              <tr>
+                <td>類型</td>
+                <td>{{ demoForm.category }}</td>
+              </tr>
+            </tbody>
+          </v-table>
+        </v-card-text>
+      </v-card>
+    </template>
+
+    <!-- notices slot 放配合事項，讓外殼固定、內容由頁面決定。 -->
+    <template #notices>
+      <v-list class="bg-yellow-lighten-5" density="compact">
+        <v-list-item>送出前確認標題與單位。</v-list-item>
+        <v-list-item>表單狀態由 page driver 管理。</v-list-item>
+      </v-list>
+    </template>
+  </SectionFormPage>
+</template>

src/components/sections/SectionFormPage.vue

@@ -25,7 +25,7 @@ const emit = defineEmits<{
 <template>
   <v-form @submit.prevent="emit('submit')">
     <v-container fluid class="pt-2 px-1">
-      <v-card>
+      <v-card class="mb-2">
         <v-card-title class="bg-primary text-title-large text-center py-2">
           {{ title }}
         </v-card-title>