feat: Implement editable student grid and refactor maintenance dialogs
This commit is contained in:
skytek_xinliang
+25
-25
@@ -61,7 +61,7 @@
|
||||
|
||||
目前已接近薄 view 的頁面：
|
||||
|
||||
- [EditableGridMnt.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/EditableGridMnt.vue)
|
||||
- [EditableGrid.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/EditableGrid.vue)
|
||||
- [Forbidden.vue](/home/carl/git/skt-vuetify-templates/src/views/errors/Forbidden.vue)
|
||||
- [ServerError.vue](/home/carl/git/skt-vuetify-templates/src/views/errors/ServerError.vue)
|
||||
- [ServiceUnavailable.vue](/home/carl/git/skt-vuetify-templates/src/views/errors/ServiceUnavailable.vue)
|
||||
@@ -74,10 +74,10 @@
|
||||
|
||||
- [Login.vue](/home/carl/git/skt-vuetify-templates/src/views/Login.vue)
|
||||
- [Home.vue](/home/carl/git/skt-vuetify-templates/src/views/Home.vue)
|
||||
- [SingleRecordMnt.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/SingleRecordMnt.vue)
|
||||
- [MasterDetailMnt.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailMnt.vue)
|
||||
- [MasterDetailMntB.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailMntB.vue)
|
||||
- [MasterDetailMntC.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailMntC.vue)
|
||||
- [SingleRecord.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/SingleRecord.vue)
|
||||
- [MasterDetailA.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailA.vue)
|
||||
- [MasterDetailB.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailB.vue)
|
||||
- [MasterDetailC.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailC.vue)
|
||||
|
||||
目前 `views` 應遵守的原則：
|
||||
|
||||
@@ -144,23 +144,22 @@ layout 不應承擔：
|
||||
- 頁面專屬業務流程
|
||||
- 特定 domain 的資料規則
|
||||
|
||||
#### 3. `components/maintenance`
|
||||
#### 3. `components/maint`
|
||||
|
||||
這個目錄目前已經是最接近 feature folder 的區域：
|
||||
|
||||
- [EditableStudentGrid.vue](/home/carl/git/skt-vuetify-templates/src/components/maintenance/EditableStudentGrid.vue)
|
||||
- [MaintenanceCrudDialogs.vue](/home/carl/git/skt-vuetify-templates/src/components/maintenance/MaintenanceCrudDialogs.vue)
|
||||
- [MaintenanceStudentFormFields.vue](/home/carl/git/skt-vuetify-templates/src/components/maintenance/MaintenanceStudentFormFields.vue)
|
||||
- [MntDialogCard.vue](/home/carl/git/skt-vuetify-templates/src/components/maintenance/MntDialogCard.vue)
|
||||
- [MntPageCards.vue](/home/carl/git/skt-vuetify-templates/src/components/maintenance/MntPageCards.vue)
|
||||
- [MntRecordNavToolbar.vue](/home/carl/git/skt-vuetify-templates/src/components/maintenance/MntRecordNavToolbar.vue)
|
||||
- [CommonConfirmDialog.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/CommonConfirmDialog.vue)
|
||||
- [EditableStudentGrid.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/EditableStudentGrid.vue)
|
||||
- [MasterFormFields.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/MasterFormFields.vue)
|
||||
- [MntDialogCard.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/MntDialogCard.vue)
|
||||
- [MntRecordNavToolbar.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/MntRecordNavToolbar.vue)
|
||||
- [PageMaint.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/PageMaint.vue)
|
||||
- `master-detail/*`
|
||||
- `master-detail-b/*`
|
||||
- `master-detail-c/*`
|
||||
|
||||
結論：
|
||||
|
||||
- `components/maintenance` 已實質扮演 domain component 層
|
||||
- `components/maint` 主要扮演 maintenance domain component 層
|
||||
- 像 `ConfirmDialog` 這類通用確認視窗可以直接在頁面使用，不需要再包一層 page-specific dialog aggregator
|
||||
- 目前沒有必要為了形式硬搬到 `components/features/maintenance`
|
||||
|
||||
### `src/composables`
|
||||
@@ -254,15 +253,15 @@ layout 不應承擔：
|
||||
|
||||
這是目前在一般展示頁面中最明確的頁面分層。
|
||||
|
||||
### 模式 2：`view -> maintenance components + maintenance composables`
|
||||
### 模式 2：`view -> page-level maintenance component + maintenance components + maintenance composables`
|
||||
|
||||
已落地區域：
|
||||
|
||||
- `views/maint/*`
|
||||
- `components/maintenance/*`
|
||||
- `components/maint/*`
|
||||
- `composables/maintenance/*`
|
||||
|
||||
其中 [EditableGridMnt.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/EditableGridMnt.vue) 是目前最接近目標狀態的 maintenance 頁面。
|
||||
其中 [EditableGrid.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/EditableGrid.vue) 是目前最接近目標狀態的 maintenance 頁面。
|
||||
|
||||
### 模式 3：`router meta -> App.vue -> layout`
|
||||
|
||||
@@ -279,7 +278,7 @@ layout 不應承擔：
|
||||
以下是文件與實際程式碼之間原本不一致的地方，這次同步後已改成以現況描述：
|
||||
|
||||
- `components/base` 並非只放真正通用元件
|
||||
- 專案目前不只 maintenance 有分層，`login / dashboard / analysis / management` 也已形成 `view -> page component` 模式
|
||||
- 專案目前除了 `login / home` 的 `view -> page component` 模式外，`maintenance` 也已形成頁面級元件 + domain component 的模式
|
||||
- `stores` 與 `services` 已經是正式架構層，不能繼續省略不寫
|
||||
- `App.vue` 目前實際承擔全域 UI 組裝責任，不能只把它視為掛載入口
|
||||
- 錯誤頁已明確收斂到 `views/errors/*`
|
||||
@@ -289,10 +288,10 @@ layout 不應承擔：
|
||||
### 高優先度
|
||||
|
||||
- 繼續瘦身：
|
||||
- [SingleRecordMnt.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/SingleRecordMnt.vue)
|
||||
- [MasterDetailMnt.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailMnt.vue)
|
||||
- [MasterDetailMntB.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailMntB.vue)
|
||||
- [MasterDetailMntC.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailMntC.vue)
|
||||
- [SingleRecord.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/SingleRecord.vue)
|
||||
- [MasterDetailA.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailA.vue)
|
||||
- [MasterDetailB.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailB.vue)
|
||||
- [MasterDetailC.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/MasterDetailC.vue)
|
||||
- 重新整理：
|
||||
- [Login.vue](/home/carl/git/skt-vuetify-templates/src/views/Login.vue)
|
||||
|
||||
@@ -305,6 +304,7 @@ layout 不應承擔：
|
||||
- 重新命名或重新安置頁面型元件：
|
||||
- [PageLogin.vue](/home/carl/git/skt-vuetify-templates/src/components/PageLogin.vue)
|
||||
- [PageIndex.vue](/home/carl/git/skt-vuetify-templates/src/components/PageIndex.vue)
|
||||
- [PageMaint.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/PageMaint.vue)
|
||||
|
||||
原因：
|
||||
|
||||
@@ -322,7 +322,7 @@ layout 不應承擔：
|
||||
1. 這個檔案是否直接被 route 載入？
|
||||
- 是：優先放 `views`
|
||||
2. 這個檔案是否負責某個完整頁面的主畫面組裝？
|
||||
- 是：放頁面型元件層，不要塞進 `base`
|
||||
- 是：放頁面型元件層，且命名以 `Page` 為前綴，不要塞進 `base`
|
||||
3. 這段重複的是模板還是流程？
|
||||
- 模板：抽元件
|
||||
- 流程：抽 composable 或 store
|
||||
@@ -331,6 +331,6 @@ layout 不應承擔：
|
||||
5. 這個邏輯是否在處理 API、token、session、錯誤正規化？
|
||||
- 是：放 `services`
|
||||
6. 這個元件是否只屬於單一 domain？
|
||||
- 是：優先放到該 domain 目錄，例如 `components/maintenance`
|
||||
- 是：優先放到該 domain 目錄，例如 `components/maint`
|
||||
7. 這個抽象是否真的降低重複與理解成本？
|
||||
- 否：不要抽
|
||||
|
||||
Reference in New Issue
Block a user