skytek_xinliang
66 lines
3.5 KiB
Markdown
66 lines
3.5 KiB
Markdown
## 二、我們專案的現況診斷
|
||
|
||
本文件是 `docs/architecture-strategy.md` 第二章的現況快照。分層細節以 `docs/architecture-strategy.md` 與 `src/**/GUIDE.md` 為準。
|
||
|
||
### 2.1 App Shell 已拆分
|
||
|
||
`App.vue` 目前只掛載 `src/shell/AppShell.vue`，不再承擔 layout props、tabs、搜尋 dialog、訊息 dialog 或 snackbar 的具體組裝。
|
||
|
||
目前責任分布：
|
||
|
||
| 職責 | 目前位置 |
|
||
|------|----------|
|
||
| Layout 切換 | `src/shell/AppShell.vue` |
|
||
| Tabs / keep-alive router-view | `src/shell/AppTabs.vue` |
|
||
| Breadcrumb / favorites / menu wiring | `src/composables/layout/useAppShell.ts` + `AppShell.vue` |
|
||
| Search Dialog / Message Dialog / Snackbar | `src/shell/GlobalOverlays.vue` |
|
||
| Logout / force logout | `src/composables/layout/useAppShell.ts` |
|
||
| HTTP Toast | `src/services/http-toast.ts` + `GlobalOverlays.vue` |
|
||
|
||
### 2.2 Views 已大幅變薄
|
||
|
||
維護頁與一般頁面目前多數已轉為 route-level wiring：
|
||
|
||
- `Home.vue`：呼叫 `useHomePage()`，掛載 `PageHome`。
|
||
- `Settings.vue`：呼叫 `useSettingsPage()`，掛載 `PageSettings`。
|
||
- `FncPage.vue`：呼叫 `useFunctionPage()`，掛載 `PageFunction`。
|
||
- `views/maint/*`：呼叫對應 page driver，掛載 `components/pages/*Maintenance.vue`。
|
||
|
||
`SingleRecord.vue` 已不再直接管理 store mutation、大型 dialog 模板、表格分頁與 CRUD 細節；這些流程已移到 page driver、section component、item component 與 command composable。
|
||
|
||
`Login.vue` 是 template core 例外，仍負責登入頁組合、功能開關、小型提示 dialog 與登入流程協調。登入頁的 captcha、announcement、忘記密碼與記住帳號流程已透過 composable / props / emits 拆分，後續調整應維持該模式。
|
||
|
||
### 2.3 Page Driver / Command / Page Component 已落地
|
||
|
||
目前已存在的主要分層：
|
||
|
||
```txt
|
||
view -> page driver -> page component -> section/item
|
||
↓
|
||
command/store/service
|
||
```
|
||
|
||
- `src/composables/page-drivers/*`：組裝 page model、route/query 轉換與頁面事件。
|
||
- `src/composables/commands/useCrudCommands.ts`：承接維護頁 CRUD 命令流程。
|
||
- `src/components/pages/*`：完整頁面的主畫面組裝。
|
||
- `src/components/sections/*`：搜尋區、表格區、表單 dialog/panel、表單/查詢頁外殼。
|
||
- `src/components/items/*`：欄位群組或單筆資料呈現。
|
||
|
||
### 2.4 Dialog 與區塊拆分狀態
|
||
|
||
維護頁的大型 dialog 與表單欄位已從 view 抽出：
|
||
|
||
- `SectionFormPanel.vue`：維護頁表單 overlay/dialog shell。
|
||
- `MntDialogCard.vue`、`MntRecordNavToolbar.vue`：維護頁 dialog 內部骨架。
|
||
- `ItemFormFieldGroup.vue`：表單欄位群組。
|
||
|
||
新增頁面時，若只是小型提示 dialog 且只屬於單一路由，可先留在 page driver / page component。若 dialog 包含大型表單、確認流程或可重用骨架，優先抽到 section 或 feature component。
|
||
|
||
### 2.5 仍需注意的邊界
|
||
|
||
- `src/models/page.ts` 目前主要服務 maintenance page model；部分頁面仍在各自 page driver 內定義局部 page model 型別。
|
||
- `components/maint/*` 與 maintenance page components 屬於 demo / maintenance 領域，不應直接升格為全域 base 元件。
|
||
- `src/components/base` 目前只放跨頁共用基礎元件，例如 `DraggableDialog`、`BaseFormTextField`、`BaseFormSelect`。
|
||
- `src/stores/app.ts` 仍是 Pinia scaffold，尚未承擔實際 app state。
|
||
- 一般功能需求不應修改 `App.vue`、`src/shell/*`、layout、router guard 或 HTTP core，除非需求明確牽涉這些 template core。
|