docs: clarify optional page drivers in page guide

Update documentation to show that simple pages can define page models
directly in views without creating a page driver. Adjust examples,
section numbering, and naming guidance to better distinguish simple view
state from reusable page-driver patterns.docs: clarify optional page drivers in page guide

Update documentation to show that simple pages can define page models
directly in views without creating a page driver. Adjust examples,
section numbering, and naming guidance to better distinguish simple view
state from reusable page-driver patterns.
This commit is contained in:
skytek_xinliang
2026-05-27 11:18:19 +08:00
parent b8664b5c3e
commit ad00f5c195
8 changed files with 59 additions and 232 deletions
+1 -1
View File
@@ -76,7 +76,7 @@ router -> AppShell -> layout -> view(Page Driver) -> Page Component -> Section -
1. 新增或修改 `views/*` route entry。
2. 若有完整頁面 UI,新增 `components/pages/PageXxx.vue`
3. 若有頁面資料協調或 route param 轉換,新增 `composables/page-drivers/useXxxPage.ts`
3. 若有複雜的資料協調(多 composable、搜尋狀態、CRUD flow、dialog 狀態),新增 `composables/page-drivers/useXxxPage.ts`簡單頁面直接在 view 用 `computed` 組裝 page model。
4. 若畫面有獨立區塊,拆到 `components/sections/*`
5. 若區塊內有欄位群組或單筆資料呈現,拆到 `components/items/*`
6. 跨頁共享狀態才新增或修改 `stores/*`
+1 -1
View File
@@ -23,4 +23,4 @@
- 各頁面的 specific model 擴展 `BasePageModel`(例如 `MaintenancePageModel``type``records`)。
- `PageModel` union 供 page component props 型別使用。
新增頁面類型時,先擴充 `PageModel` union 再新增對應的 page driver
新增頁面類型時,先擴充 `PageModel` union。若頁面需要協調多個 composable(搜尋、表單、CRUD flow、dialog 狀態),再建立對應的 page driver;簡單頁面直接在 view 用 `computed` 組裝 page model 即可
+4 -2
View File
@@ -18,14 +18,16 @@
import PageReports from '@/components/pages/PageReports.vue'
import { useReportsPage } from '@/composables/page-drivers/useReportsPage'
const page = useReportsPage()
const { pageModel } = useReportsPage()
</script>
<template>
<PageReports :page="page.pageModel.value" />
<PageReports :page="pageModel" />
</template>
```
若頁面只是簡單的 `computed` 組裝(無搜尋、無 dialog、無複雜事件),直接在 view 寫 page model,不需要建立 page driver。以 destructure 方式取用 composable 回傳值,模板不寫 `.value`
## Login.vue 開關
`Login.vue` 是登入頁的組合層,登入頁功能開關集中在 view 內宣告,再透過 `PageLogin` / composable 往下傳遞,不在子元件各自決定是否啟用。