docs: document visual cues for section page selection

Add guidance for choosing SectionFormPage and SectionQueryPage based on
visible UI patterns in prototypes or screenshots. Document required visual
feature descriptions for new page/section components and expand section
component usage notes with query page guidance.docs: document visual cues for section page selection

Add guidance for choosing SectionFormPage and SectionQueryPage based on
visible UI patterns in prototypes or screenshots. Document required visual
feature descriptions for new page/section components and expand section
component usage notes with query page guidance.

src/components/sections/GUIDE.md

@@ -20,6 +20,14 @@
 
 不適用情境：純粹列表/查詢頁面（無送出按鈕）、結構差異過大的頁面。
 
+### 視覺特徵
+
+- 頂部標題卡片（`bg-primary`）
+- 中間為表單欄位區（`v-text-field`/`v-select`）
+- 可能有子區段卡片（明細表格）
+- 底部有「配合事項」提示區（`bg-yellow-lighten-5`）
+- 最底部為動作按鈕列（存檔 + 清除 + 返回）
+
 ### Props
 
 | Prop | 型別 | 預設 | 說明 |
@@ -82,3 +90,135 @@
   </template>
 </SectionFormPage>
 ```
+
+## SectionQueryPage
+
+查詢/列表頁面通用外殼。包含標題卡片、篩選條件區、查詢按鈕、結果表格區與返回按鈕。
+
+### 使用時機
+
+- 頁面具有**篩選條件** + **查詢按鈕** + **結果表格**的固定結構
+- 例如：單筆查詢、列表查詢、報表查詢等頁面
+
+不適用情境：
+
+- 純粹 CRUD 維護頁面（含新增/編輯/刪除操作）→ 用 `SectionFormPage`
+- 頁面結構差異過大（如沒有篩選條件或沒有結果表格）
+
+### 視覺特徵
+
+- 頂部標題卡片（`bg-primary`）
+- 標題下方為篩選條件區（`v-text-field`/`v-select` + 查詢按鈕）
+- 下方為結果區：可能是單一表格，也可能是多張獨立卡片表格
+- 最底部為返回按鈕
+- 與 `SectionFormPage` 最大差異：**沒有「存檔」按鈕，也沒有「配合事項」區**
+
+### Props
+
+| Prop | 型別 | 預設 | 說明 |
+|------|------|------|------|
+| `title` | `string` | — | 頁面標題 |
+| `loading` | `boolean` | `undefined` | 是否顯示 loading |
+| `error` | `string` | `undefined` | 錯誤訊息 |
+| `backLabel` | `string` | `'返回'` | 返回按鈕文字 |
+
+### Slots
+
+| Slot | 用途 |
+|------|------|
+| `#filters` | 篩選條件欄位，用 `v-col` 配置 |
+| `#results` | 單一結果表格區（會自動包一層 `v-card`） |
+| `#sections` | 多區段結果卡片（需自行用 `v-card` 包覆，適用多表格情境） |
+
+`#results` 與 `#sections` 擇一使用：
+
+- 單一表格結果 → 用 `#results`
+- 多張獨立表格/列表 → 用 `#sections`，在 slot 內自行配置 `v-card` 與標題
+
+### Emits
+
+| Emit | 說明 |
+|------|------|
+| `@search` | 點擊查詢時觸發 |
+| `@back` | 點擊返回時觸發 |
+
+### 範例：單一結果表格
+
+```vue
+<SectionQueryPage
+  title="全校設備查詢"
+  :loading="loading"
+  :error="error"
+  @search="search"
+  @back="router.push('/venue/query-choose')"
+>
+  <template #filters>
+    <v-col cols="12" md="4">
+      <BaseFormSelect v-model="filters.facId" label="設備" :items="facilityItems" />
+    </v-col>
+    <v-col cols="12" md="4">
+      <BaseFormTextField v-model="filters.asOfDate" label="截止日" />
+    </v-col>
+  </template>
+
+  <template #results>
+    <v-table density="compact">
+      <thead class="bg-primary">
+        <tr>
+          <th>設備代碼</th>
+          <th>名稱</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!result">
+          <td class="text-center" colspan="2">尚無查詢結果</td>
+        </tr>
+        <tr v-else>
+          <td>{{ result.facId }}</td>
+          <td>{{ result.facName }}</td>
+        </tr>
+      </tbody>
+    </v-table>
+  </template>
+</SectionQueryPage>
+```
+
+### 範例：多區段結果（多表格）
+
+```vue
+<SectionQueryPage
+  title="我的申請紀錄"
+  :loading="loading"
+  :error="error"
+  @search="search"
+  @back="router.push('/venue/apply-choose')"
+>
+  <template #filters>
+    <v-col cols="12" md="3">
+      <BaseFormTextField v-model="filters.startDate" label="查詢起日" />
+    </v-col>
+    <v-col cols="12" md="3">
+      <BaseFormTextField v-model="filters.endDate" label="查詢迄日" />
+    </v-col>
+    <v-col cols="12" md="3">
+      <BaseFormSelect v-model="filters.status" label="狀態" :items="statusItems" />
+    </v-col>
+  </template>
+
+  <template #sections>
+    <v-card>
+      <v-card-title class="text-title-medium font-weight-bold py-2">場地申請</v-card-title>
+      <v-table density="compact">
+        <!-- 場地表格 -->
+      </v-table>
+    </v-card>
+
+    <v-card>
+      <v-card-title class="text-title-medium font-weight-bold py-2">設備申請</v-card-title>
+      <v-table density="compact">
+        <!-- 設備表格 -->
+      </v-table>
+    </v-card>
+  </template>
+</SectionQueryPage>
+```