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/SectionQueryPageDemo.vue

@@ -1,15 +1,53 @@
 <script setup lang="ts">
-import PageSectionQueryPageDemo from '@/components/pages/PageSectionQueryPageDemo.vue'
+import BaseFormSelect from '@/components/base/BaseFormSelect.vue'
+import BaseFormTextField from '@/components/base/BaseFormTextField.vue'
+import SectionQueryPage from '@/components/sections/SectionQueryPage.vue'
 import { useSectionsDemoPage } from '@/composables/page-drivers/useSectionsDemoPage'
 
 const { handleQueryBack, handleQuerySearch, pageModel, queryFilters } = useSectionsDemoPage()
 </script>
 
 <template>
-  <PageSectionQueryPageDemo
-    v-model:query-filters="queryFilters"
-    :page="pageModel"
+  <SectionQueryPage
+    back-label="回到列表"
+    title="查詢頁DEMO"
     @back="handleQueryBack"
     @search="handleQuerySearch"
-  />
+  >
+    <template #filters>
+      <v-col cols="12" md="4">
+        <BaseFormTextField v-model="queryFilters.keyword" label="關鍵字" />
+      </v-col>
+      <v-col cols="12" md="4">
+        <BaseFormSelect v-model="queryFilters.owner" label="單位" :items="pageModel.ownerOptions" />
+      </v-col>
+    </template>
+
+    <template #results>
+      <v-alert v-if="pageModel.queryMessage" class="mb-3" type="success" variant="tonal">
+        {{ pageModel.queryMessage }}
+      </v-alert>
+      <v-table density="compact">
+        <thead class="bg-primary">
+          <tr>
+            <th>名稱</th>
+            <th>單位</th>
+            <th>狀態</th>
+            <th>更新日</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="pageModel.reports.length === 0">
+            <td class="text-center" colspan="4">尚無查詢結果</td>
+          </tr>
+          <tr v-for="row in pageModel.reports" :key="row.id">
+            <td>{{ row.title }}</td>
+            <td>{{ row.owner }}</td>
+            <td>{{ row.status }}</td>
+            <td>{{ row.updatedAt }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </template>
+  </SectionQueryPage>
 </template>