# Components

`src/components` 放 Vue 元件，包含 layout、page component、feature/domain component 與少量跨頁共用元件。

## 目前結構

- `PageLogin.vue`、`PageIndex.vue`、`PageMaint.vue`：頁面型元件，接收 view 組好的資料與事件，負責完整頁面主畫面組裝。
- `layouts/*`：app shell 與 layout 子元件。`MainLayout.vue` 負責主框架，`PlainLayout.vue` 負責不套主框架的頁面。
- `layouts/main-layout/*`：`MainLayout.vue` 拆出的 drawer、app bar、breadcrumb、favorites 等骨架子元件。
- `login/*`：登入頁專用 UI 區塊，服務 `PageLogin.vue`。
- `maint/*`：maintenance 領域元件，服務 `views/maint/*`。
- `maint/master-detail/*`：master-detail 維護頁專用子元件。
- `base/*`：真正跨頁重用且不屬於特定 domain 的基礎元件。

## 使用規則

- 不要假設 `src/components` 會自動全域註冊元件；需要使用元件時，依照目前 Vue SFC 慣例明確 import。
- 直接被 route 載入的檔案放在 `src/views`，不要放在 `src/components`。
- 負責完整頁面主畫面組裝的元件使用 `Page` 前綴。
- 只服務單一功能或 domain 的元件，放在對應資料夾，不要放進 `base`。
- layout 元件只處理 app shell 與框架 UI，不放頁面專屬業務流程。

## 資料流

component 以 props 接收資料，以 emit 回報使用者事件。需要跨頁共享的狀態交給 `src/stores`；可重用流程或較複雜 UI state 放到 `src/composables`。