From ec62fcee51c24207bc4931c6d175c289ee78e6cd Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Fri, 22 May 2026 15:41:52 +0800
Subject: [PATCH] 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.
---
 .../pages/PageSectionFormPageDemo.vue         | 89 +++++++++++++++++++
 src/components/sections/SectionFormPage.vue   |  2 +-
 src/composables/layout/useAppShell.ts         |  5 --
 src/router/routes.ts                          |  6 --
 src/views/demos/SectionFormPageDemo.vue       | 17 ++++
 5 files changed, 107 insertions(+), 12 deletions(-)
 create mode 100644 src/components/pages/PageSectionFormPageDemo.vue
 create mode 100644 src/views/demos/SectionFormPageDemo.vue

diff --git a/src/components/pages/PageSectionFormPageDemo.vue b/src/components/pages/PageSectionFormPageDemo.vue
new file mode 100644
index 0000000..595bff7
--- /dev/null
+++ b/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>
diff --git a/src/components/sections/SectionFormPage.vue b/src/components/sections/SectionFormPage.vue
index fa26773..173d779 100644
--- a/src/components/sections/SectionFormPage.vue
+++ b/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>
diff --git a/src/composables/layout/useAppShell.ts b/src/composables/layout/useAppShell.ts
index 62895d6..0ed5413 100644
--- a/src/composables/layout/useAppShell.ts
+++ b/src/composables/layout/useAppShell.ts
@@ -39,11 +39,6 @@ const fixedMenuItems: LayoutMenuItem[] = [
         path: '/demos/sections/query-page',
       },
       { title: 'SectionFormPage', icon: mdiFileDocumentOutline, path: '/demos/sections/form-page' },
-      {
-        title: 'SectionSearchPanel',
-        icon: mdiFileDocumentOutline,
-        path: '/demos/sections/search-panel',
-      },
     ],
   },
   { title: '登入頁', path: '/login' },
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 08cea1b..9e528eb 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -65,12 +65,6 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/views/demos/SectionFormPageDemo.vue'),
     meta: { title: 'SectionFormPage 示範', layout: 'default' },
   },
-  {
-    path: '/demos/sections/search-panel',
-    name: 'demo-section-search-panel',
-    component: () => import('@/views/demos/SectionSearchPanelDemo.vue'),
-    meta: { title: 'SectionSearchPanel 示範', layout: 'default' },
-  },
   {
     path: '/:fncId([0-9A-Z]{5,6})',
     name: 'fnc-page',
diff --git a/src/views/demos/SectionFormPageDemo.vue b/src/views/demos/SectionFormPageDemo.vue
new file mode 100644
index 0000000..fbea6b2
--- /dev/null
+++ b/src/views/demos/SectionFormPageDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import PageSectionFormPageDemo from '@/components/pages/PageSectionFormPageDemo.vue'
+import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'
+
+// Demo view 維持薄層，只掛 page driver，並把 page model / actions 傳給 page component。
+const page = useSectionsDemoPage()
+</script>
+
+<template>
+  <PageSectionFormPageDemo
+    v-model:demo-form="page.demoForm.value"
+    :page="page.pageModel.value"
+    @back="page.handleFormBack"
+    @reset="page.resetDemoForm"
+    @submit="page.handleFormSubmit"
+  />
+</template>