docs: simplify page architecture and component guidance

Update the src documentation to emphasize building pages from route views,
composables, sections, and items instead of a dedicated pages layer.

Clarify the recommended data flow and new feature workflow so template users
start from views and only introduce page-driver composables when coordination
logic becomes complex.docs: simplify page architecture and component guidance

Update the src documentation to emphasize building pages from route views,
composables, sections, and items instead of a dedicated pages layer.

Clarify the recommended data flow and new feature workflow so template users
start from views and only introduce page-driver composables when coordination
logic becomes complex.

src/views/demos/SectionFormPageDemo.vue

@@ -1,16 +1,71 @@
 <script setup lang="ts">
-import PageSectionFormPageDemo from '@/components/pages/PageSectionFormPageDemo.vue'
+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
+import SectionFormPage from '@/components/sections/SectionFormPage.vue'
 import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'
 
 const { demoForm, handleFormBack, handleFormSubmit, pageModel, resetDemoForm } = useSectionsDemoPage()
 </script>
 
 <template>
-  <PageSectionFormPageDemo
-    v-model:demo-form="demoForm"
-    :page="pageModel"
+  <SectionFormPage
+    back-label="回到列表"
+    reset-label="清除"
+    submit-label="送出"
+    :message="pageModel.formMessage"
+    title="SectionFormPage 報表申請"
     @back="handleFormBack"
     @reset="resetDemoForm"
     @submit="handleFormSubmit"
-  />
+  >
+    <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="pageModel.ownerOptions" />
+        </v-col>
+        <v-col cols="12" md="3">
+          <BaseFormSelect v-model="demoForm.category" label="類型" :items="pageModel.categoryOptions" />
+        </v-col>
+        <v-col cols="12">
+          <BaseFormTextField v-model="demoForm.description" label="說明" />
+        </v-col>
+      </v-row>
+    </template>
+
+    <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>
+
+    <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>