# Composables Guide

`composables` 放可重用流程、page driver、command flow 與較複雜 UI state。簡單模板顯示不要為了形式新增 composable。

## 子目錄

- `page-drivers/`：頁面資料協調與 page model 組裝。
- `commands/`：命令式副作用流程，例如 create/edit/save/delete。
- `layout/`：AppShell / layout 狀態與事件協調。
- `maint/`：maintenance demo 的表單、CRUD、editable grid 狀態。

頂層也可放通用 composable，例如 `useApiCall.ts`：封裝 loading / data / error / execute 模式、自動 snackbar 錯誤提示與取消請求過濾。適合為單一 API 呼叫提供輕量狀態管理，但不替代 page driver 或 command composable。

## 新增規則

- 用 `useXxx.ts` 命名。
- 參數較多時使用 options object。
- source state 盡量集中，衍生值用 `computed`。
- 副作用放在明確 action 或 watcher，不放在 computed。
- 不 import component 或 view。
- 不持有 service module 的底層 HTTP 細節。

## Page Driver

Page driver 負責：

- route param/query 轉成頁面資料
- 組裝 page model
- 組裝 page component 需要的 props/events
- 協調 store、command composable、表單 composable

View 只呼叫 page driver 並掛載 page component。

## Commands

Command composable 負責副作用流程，不負責畫面布局：

- 新增 / 編輯 / 刪除 / 儲存
- 儲存前確認
- 成功後重新載入或 highlight
- 與 store/service 的 mutation 流程