+
+
+ {{ data.status }}
+
+ {{ data.name }}
+
+
+```
+
+### 4.3 容器/內容分離的具體規範
+
+| 場景 | 容器（Section） | 內容（Item） |
+|------|-----------------|--------------|
+| 資料表格 | `SectionDataTable`（決定 headers、分頁、排序） | `ItemStudentRow`（決定單列呈現） |
+| 搜尋面板 | `SectionSearchPanel`（決定展開/收合、grid 佈局） | `ItemFormField`（單一輸入框呈現） |
+| 圖文列表 | `SectionCardGrid`（決定欄數、gap、RWD） | `ItemProductCard`（卡片內容） |
+| 表單對話框 | `SectionFormPanel`（決定 dialog 外殼、actions） | `ItemFormFieldGroup`（欄位群組） |
+
+- **原則**：若同一組資料在不同頁面需要「水平捲軸 vs 網格」兩種呈現，只換 Section，不換 Item。
+
+### 4.4 Provide / Inject 作為跨層依賴注入
+
+對齊 App Store 的 `getJet()` / `getI18n()`，在 Vue 中建立明確的 inject API：
+
+```ts
+// src/providers/page.ts
+import { inject, provide } from 'vue'
+import type { PageDriver } from '@/composables/page-drivers/types'
+
+const PageDriverKey = Symbol('page-driver')
+
+export function providePageDriver(driver: PageDriver) {
+ provide(PageDriverKey, driver)
+}
+
+export function usePageDriverInjected(): PageDriver {
+ const driver = inject(PageDriverKey)
+ if (!driver) throw new Error('usePageDriverInjected called without provider')
+ return driver
+}
+```
+
+- **提供時機**：Page Component (`PageXxx.vue`) 在掛載時 provide。
+- **使用時機**：深層的 Item 元件需要觸發 page-level action 時 inject，避免 props drilling。
+- **禁止**：用 provide/inject 傳遞會頻繁變動的 UI 狀態（如 `dialogVisible`）。這類狀態應透過 props + emits。
+
+### 4.5 Dialog 外層化策略
+
+將 dialog 從 view 中完全抽出，形成「Dialog Shell + Content Slot」模式：
+
+```
+views/xxx.vue
+ └── PageXxx.vue
+ ├── SectionDataTable
+ └── SectionFormPanel（dialog shell）
+ ├── MntDialogCard（外殼：標題、toolbar、actions）
+ └── ItemFormFieldGroup（內容：欄位）
+```
+
+- `SectionFormPanel` 管理 dialog 的開關、mode、loading、saving。
+- `ItemFormFieldGroup` 純粹呈現欄位，不知道自己在 dialog 裡。
+- View 中不再出現 `