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.
This commit is contained in:
skytek_xinliang
2026-05-20 17:41:19 +08:00
parent 8af82f5900
commit ea1aec67dc
4 changed files with 202 additions and 0 deletions
+15
View File
@@ -58,6 +58,8 @@
- 新 route:讀 `src/router/GUIDE.md`
- 一般頁面:讀 `src/views/GUIDE.md``src/components/GUIDE.md``src/composables/GUIDE.md`
- 維護頁:讀 `src/views/maint/GUIDE.md`
- 查詢/列表頁(篩選 + 表格):讀 `src/components/sections/GUIDE.md``SectionQueryPage`)。
- 申請/填寫頁(送出按鈕):讀 `src/components/sections/GUIDE.md``SectionFormPage`)。
- layout / AppShell / tabs / global overlay:讀 `src/shell/GUIDE.md``src/components/layouts/GUIDE.md`
- API 串接:讀 `src/services/GUIDE.md`
- 跨頁共享狀態:讀 `src/stores/GUIDE.md`
@@ -77,6 +79,19 @@
- 是否應定義新的 model 型別(`src/models/`)。
- 是否需要更新語系、menu、breadcrumb、favorites。
## 從視覺特徵選擇 section 元件
當收到 prototype 截圖或設計稿時,依畫面特徵選擇 section 外殼:
| 特徵 | 選擇 |
|------|------|
| 有「送出/存檔」按鈕,且畫面為填寫表單(欄位 + 配合事項 + 動作按鈕) | `SectionFormPage` |
| 有「查詢」按鈕,且畫面為篩選條件 + 結果表格/列表 | `SectionQueryPage` |
| 純粹表格列表(無送出/查詢按鈕,只有 CRUD 操作) | 不用 section 外殼,直接組合 `v-data-table` |
| 混合結構(有查詢也有表單填寫) | 評估是否拆成兩頁;若必須同頁,不用通用外殼 |
判斷順序:先看有無「送出/存檔」→ 再看有無「查詢」→ 其餘視為一般列表頁。
## 完成前驗證
- Vue / TypeScript 結構有變更:`pnpm -s type-check`