# Layouts Guide

`components/layouts` 是 app shell layout。一般功能需求不應修改這裡。

## 可用 Layout

- **MainLayout**（`layout: 'default'`）：完整 app shell，包含 drawer、app bar、breadcrumb、favorites、toolbar actions 與主內容 slot。
- **PlainLayout**（`layout: 'none'`）：極簡空白佈局，只提供 `<v-app>` / `<v-main>` 外殼與一個 slot。登入頁、錯誤頁、維護中頁使用此 layout。

一般功能頁面統一使用 `layout: 'default'`。

## MainLayout 責任

- drawer
- app bar
- breadcrumb
- favorites
- toolbar actions
- 主內容 slot

## 禁止放入

- 頁面專屬業務流程
- 查詢條件、表單、列表、CRUD
- 特定 dialog 內容
- API 呼叫
- domain-specific 狀態

如果頁面要影響 breadcrumb、favorites、menu 或 toolbar，優先使用 route meta、store 或 `shell/AppShell.vue` 已提供的 props/events。

## `main-layout/` 子目錄

`src/components/layouts/main-layout/` 收納 MainLayout 拆解出的子組件與共用的型別定義：

- `types.ts`：`AdminLayoutMenuItem`、`AdminLayoutBreadcrumbItem`、`AdminLayoutFeatures` 等型別，供 layout composable 與 shell 使用。
- `DrawerDesktopMenu.vue` / `DrawerMobileMenuPanel.vue` / `DrawerMobileFavoritesPanel.vue`：桌面與行動版 drawer 內容。
- `AppBarTopCol.vue` / `AppBarBreadcrumbCol.vue` / `AppBarFavoritesCol.vue`：app bar 不同列的組件。

一般功能需求不應修改這裡的檔案。