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:
@@ -67,23 +67,15 @@ Read only when needed: [analyse now](./analyse-now.md)
|
||||
範例:
|
||||
|
||||
```ts
|
||||
// src/composables/usePageDriver.ts
|
||||
export function useMaintenancePage() {
|
||||
const studentStore = useStudentStore()
|
||||
const { records, loading, error, load } = useCrudDriver({
|
||||
store: studentStore,
|
||||
loadAction: () => studentStore.fetchStudents(),
|
||||
})
|
||||
|
||||
const pageModel = computed(() => ({
|
||||
title: '單筆資料維護',
|
||||
records: records.value,
|
||||
loading: loading.value,
|
||||
error: error.value,
|
||||
}))
|
||||
|
||||
return { pageModel, load }
|
||||
}
|
||||
// views/maint/Example.vue — 簡單頁面直接在 view 組裝 page model
|
||||
const studentStore = useStudentStore()
|
||||
const pageModel = computed<MaintenancePageModel>(() => ({
|
||||
type: 'maintenance',
|
||||
title: '單筆資料維護',
|
||||
records: studentStore.students,
|
||||
loading: false,
|
||||
error: null,
|
||||
}))
|
||||
```
|
||||
|
||||
### 3.3 查詢(Query)與命令(Command)分離
|
||||
@@ -164,8 +156,8 @@ src/
|
||||
│ └── DraggableDialog.vue
|
||||
│
|
||||
├── composables/
|
||||
│ ├── page-drivers/ ← 新增:頁面資料協調
|
||||
│ │ └── useMaintenancePage.ts
|
||||
│ ├── page-drivers/ ← 新增:頁面資料協調(僅複雜頁面需要)
|
||||
│ │ └── useSingleRecordMaintenancePage.ts
|
||||
│ ├── commands/ ← 新增:命令流程(對齊 Jet Action)
|
||||
│ │ └── useCrudCommands.ts
|
||||
│ ├── forms/ ← 維持/重組:表單狀態機
|
||||
@@ -201,14 +193,10 @@ src/
|
||||
```vue
|
||||
<!-- views/maint/SingleRecord.vue(優化後) -->
|
||||
<script setup lang="ts">
|
||||
import { useMaintenancePage } from '@/composables/page-drivers/useMaintenancePage'
|
||||
import PageMaintenance from '@/components/pages/PageMaintenance.vue'
|
||||
import { useSingleRecordMaintenancePage } from '@/composables/page-drivers/useSingleRecordMaintenancePage'
|
||||
|
||||
const { pageModel, load } = useMaintenancePage({
|
||||
title: '單筆資料維護',
|
||||
records: [],
|
||||
})
|
||||
load()
|
||||
const { pageModel, commands, formPanelProps, formPanelEvents } = useSingleRecordMaintenancePage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -356,9 +344,10 @@ views/xxx.vue
|
||||
3. [x] 新增 `src/components/pages/`:建立第一個 `PageMaintenance.vue`(可從 `PageMaint.vue` 擴展)。
|
||||
- 定義 `MaintenancePageModel` props 與 `create/edit/view/delete/search` emits。
|
||||
- 使用 `PageMaint.vue` 作為佈局外殼,搜尋與表格區塊以 slot 開放,不綁定特定領域型別。
|
||||
4. [x] 新增 `src/composables/page-drivers/`:建立 `useMaintenancePage.ts`。
|
||||
- 透過 options 傳入 title 與 records,協調搜尋條件、分頁與 `pageModel`。
|
||||
- 提供 `load()` 與 `resetSearch()` 供 Page Driver 呼叫。
|
||||
4. [x] 新增 `src/composables/page-drivers/`:建立第一個 page driver 範例。
|
||||
- 協調搜尋條件、分頁與 `pageModel`。
|
||||
- 提供 `load()` 與 `resetSearch()` 供 Page Driver 呼叫。
|
||||
- 後續已刪除純包裝型 driver(如 `useMaintenancePage`)。僅當頁面需要協調多個 composable 時才建立 page driver。
|
||||
|
||||
### Phase 2:遷移最厚的 view(SingleRecord.vue) ✅ 已完成
|
||||
|
||||
@@ -382,6 +371,8 @@ views/xxx.vue
|
||||
|
||||
### Phase 3:推廣到所有 maintenance 頁面 ✅ 已完成
|
||||
|
||||
> 後續簡化時,B/C/EditableGrid 的薄 page driver 已 inline 回 view,只保留有真實複雜邏輯的 driver。
|
||||
|
||||
1. [x] `EditableGrid.vue` 依 Page Driver + Page Component 模式重構。
|
||||
- `src/views/maint/EditableGrid.vue` 縮減為 10 行 route-level wiring。
|
||||
- 新增 `src/composables/page-drivers/useEditableGridMaintenancePage.ts`。
|
||||
@@ -399,6 +390,8 @@ views/xxx.vue
|
||||
|
||||
### Phase 4:非 maintenance 頁面統一 ✅ 已完成
|
||||
|
||||
> 後續簡化時,Settings/FncPage 的薄 page driver 已 inline 回 view,型別移至 page component 自身。
|
||||
|
||||
1. [x] `Home.vue`、`Settings.vue`、`FncPage.vue` 套用 Page Driver + Page Component 模式。
|
||||
- `src/views/Home.vue` 縮減為 17 行,新增 `src/components/pages/PageHome.vue` 與 `src/composables/page-drivers/useHomePage.ts`。
|
||||
- `src/views/Settings.vue` 縮減為 10 行,新增 `src/components/pages/PageSettings.vue` 與 `src/composables/page-drivers/useSettingsPage.ts`。
|
||||
@@ -421,7 +414,7 @@ views/xxx.vue
|
||||
| Item / Atom | `src/components/items/` | `ItemDataRow.vue`、`ItemFormField.vue` |
|
||||
| Layout | `src/components/layouts/` | `MainLayout.vue`(維持) |
|
||||
| Base | `src/components/base/` | `DraggableDialog.vue`(維持) |
|
||||
| Page Driver Composable | `src/composables/page-drivers/` | `useMaintenancePage.ts` |
|
||||
| Page Driver Composable | `src/composables/page-drivers/` | `useSingleRecordMaintenancePage.ts` |
|
||||
| Command Composable | `src/composables/commands/` | `useCrudCommands.ts` |
|
||||
| Form Composable | `src/composables/forms/` | `useForm.ts` |
|
||||
| Domain Store | `src/stores/` | `students.ts`(維持) |
|
||||
|
||||
Reference in New Issue
Block a user