skytek_xinliang
96b96bcaaa
Split current project diagnostics into a dedicated analysis document and trim the main architecture strategy to focus on core guidance. This makes the documentation easier to navigate and separates observed issues from recommended architectural principles.docs: reorganize architecture strategy documentation Split current project diagnostics into a dedicated analysis document and trim the main architecture strategy to focus on core guidance. This makes the documentation easier to navigate and separates observed issues from recommended architectural principles.
48 lines
1.8 KiB
Markdown
48 lines
1.8 KiB
Markdown
## 二、我們專案的現況診斷
|
||
|
||
### 2.1 App.vue 過度臃腫（~590 行）
|
||
|
||
| 職責 | 行數 | 應屬層級 |
|
||
|------|------|----------|
|
||
| Layout 切換 | ~20 | App Shell |
|
||
| Tabs 管理 | ~80 | Page Driver |
|
||
| Breadcrumb 組裝 | ~40 | Layout |
|
||
| Favorites 管理 | ~60 | Store |
|
||
| Search Dialog | ~80 | App Shell / Widget |
|
||
| Message Dialog | ~60 | App Shell / Widget |
|
||
| Snackbar | ~10 | Global Overlay |
|
||
| Logout / Force logout | ~30 | Auth Flow |
|
||
| HTTP Toast | ~20 | Service Layer |
|
||
|
||
- **問題**：App.vue 同時承擔 App Shell、Page Driver、Global Widget、Auth Flow 四種責任。
|
||
- **對比**：App Store 的 `App.svelte` 只有 161 行，只負責 `Navigation + PageResolver + Footer`。
|
||
|
||
### 2.2 Views 過厚（SingleRecord.vue ~830 行）
|
||
|
||
- 混雜：表格呈現、搜尋表單、dialog 模板、表單狀態、CRUD 流程、驗證邏輯、分頁、snackbar。
|
||
- **對比**：App Store 的 `ProductPage.svelte` 只有 77 行，只負責「把 page 轉成 DefaultPageRequirements + 一個 slot override」。
|
||
|
||
### 2.3 缺乏統一的頁面資料門面
|
||
|
||
```
|
||
現況：
|
||
view → store → service（直接鏈式呼叫）
|
||
view 自己管理 loading / error / dialog visible
|
||
|
||
App Store：
|
||
UI → jet.dispatch(intent) → runtime → controller → page model
|
||
UI 只接收 page model，不管理載入狀態
|
||
```
|
||
|
||
### 2.4 Dialog 狀態與模板內嵌於 View
|
||
|
||
- `SingleRecord.vue` 內含 5 個 `ConfirmDialog` 實例 + 1 個大 form overlay。
|
||
- 任何 dialog 更動都需要修改 view 檔案。
|
||
|
||
### 2.5 沒有容器/內容分離的 Section 層
|
||
|
||
- 表格、表單、搜尋區塊都是直接寫在 view 或 page component 中。
|
||
- 缺乏類似 `ShelfItemLayout` 的通用佈局抽象：「這一區是水平捲軸還是網格」應該由容器決定，裡面的內容元件不應該知道。
|
||
|
||
---
|