docs: refresh template documentation and examples

Update README and frontend layering docs to reflect the current template core structure, use relative repository links, and remove outdated demo guidance.

Add expanded API response examples for common features and ignore local Codex configuration.docs: refresh template documentation and examples

Update README and frontend layering docs to reflect the current template core structure, use relative repository links, and remove outdated demo guidance.

Add expanded API response examples for common features and ignore local Codex configuration.
This commit is contained in:
skytek_xinliang
2026-05-11 15:45:31 +08:00
parent 71683482e1
commit a45563685f
8 changed files with 946 additions and 193 deletions
+83 -160
View File
@@ -4,8 +4,6 @@
這份文件只描述目前 repo 已經落地的前端分層與命名規則,讓後續新增檔案、搬移檔案、或重構時有一致判斷基準。
重點不是追求理想化架構,而是避免把舊名稱、過渡寫法、或已刪除的結構繼續當成規則。
目前專案的主要責任鏈如下:
- `router` 決定 route 與 layout meta
@@ -22,9 +20,9 @@
目前路由集中在:
- [routes.ts](/home/carl/git/skt-vuetify-templates/src/router/routes.ts)
- [index.ts](/home/carl/git/skt-vuetify-templates/src/router/index.ts)
- [guards.ts](/home/carl/git/skt-vuetify-templates/src/router/guards.ts)
- [routes.ts](../src/router/routes.ts)
- [index.ts](../src/router/index.ts)
- [guards.ts](../src/router/guards.ts)
責任:
@@ -34,12 +32,12 @@
目前 `meta.layout` 已是 app shell 切換的正式入口:
- `default` 走 [MainLayout.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/MainLayout.vue)
- `none` 走 [PlainLayout.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/PlainLayout.vue)
- `default` 走 [MainLayout.vue](../src/components/layouts/MainLayout.vue)
- `none` 走 [PlainLayout.vue](../src/components/layouts/PlainLayout.vue)
### `src/App.vue`
[App.vue](/home/carl/git/skt-vuetify-templates/src/App.vue) 目前不是單純掛載入口,而是實際的應用組裝層。
[App.vue](../src/App.vue) 目前不是單純掛載入口,而是實際的應用組裝層。
目前承擔的責任包含:
@@ -61,23 +59,25 @@
目前較薄的 view
- [Home.vue](/home/carl/git/skt-vuetify-templates/src/views/Home.vue)
- [Login.vue](/home/carl/git/skt-vuetify-templates/src/views/Login.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)
- [NetworkError.vue](/home/carl/git/skt-vuetify-templates/src/views/errors/NetworkError.vue)
- [Maintenance.vue](/home/carl/git/skt-vuetify-templates/src/views/errors/Maintenance.vue)
- [NotFound.vue](/home/carl/git/skt-vuetify-templates/src/views/errors/NotFound.vue)
- [FncPage.vue](/home/carl/git/skt-vuetify-templates/src/views/FncPage.vue)
- [Home.vue](../src/views/Home.vue)
- [Login.vue](../src/views/Login.vue)
- [EditableGrid.vue](../src/views/maint/EditableGrid.vue)
- [Forbidden.vue](../src/views/errors/Forbidden.vue)
- [ServerError.vue](../src/views/errors/ServerError.vue)
- [ServiceUnavailable.vue](../src/views/errors/ServiceUnavailable.vue)
- [NetworkError.vue](../src/views/errors/NetworkError.vue)
- [Maintenance.vue](../src/views/errors/Maintenance.vue)
- [NotFound.vue](../src/views/errors/NotFound.vue)
- [ErrorShell.vue](../src/views/errors/ErrorShell.vue)
- [FncPage.vue](../src/views/FncPage.vue)
- [Settings.vue](../src/views/Settings.vue)
目前仍偏厚的 view
- [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)
- [SingleRecord.vue](../src/views/maint/SingleRecord.vue)
- [MasterDetailA.vue](../src/views/maint/MasterDetailA.vue)
- [MasterDetailB.vue](../src/views/maint/MasterDetailB.vue)
- [MasterDetailC.vue](../src/views/maint/MasterDetailC.vue)
`views` 應遵守的原則:
@@ -94,9 +94,9 @@
目前以下元件實際上扮演 page component
- [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/PageMaint.vue)
- [PageLogin.vue](../src/components/PageLogin.vue)
- [PageIndex.vue](../src/components/PageIndex.vue)
- [PageMaint.vue](../src/components/PageMaint.vue)
這些檔案的責任是:
@@ -114,14 +114,14 @@
登入頁的較細 UI 區塊已集中到:
- [CreateAccountLink.vue](/home/carl/git/skt-vuetify-templates/src/components/login/CreateAccountLink.vue)
- [LoginAnnouncementBoard.vue](/home/carl/git/skt-vuetify-templates/src/components/login/LoginAnnouncementBoard.vue)
- [LoginBrand.vue](/home/carl/git/skt-vuetify-templates/src/components/login/LoginBrand.vue)
- [LoginForm.vue](/home/carl/git/skt-vuetify-templates/src/components/login/LoginForm.vue)
- [LoginHeader.vue](/home/carl/git/skt-vuetify-templates/src/components/login/LoginHeader.vue)
- [LoginIllustration.vue](/home/carl/git/skt-vuetify-templates/src/components/login/LoginIllustration.vue)
- [LoginToolBar.vue](/home/carl/git/skt-vuetify-templates/src/components/login/LoginToolBar.vue)
- [LoginVerify.vue](/home/carl/git/skt-vuetify-templates/src/components/login/LoginVerify.vue)
- [CreateAccountLink.vue](../src/components/login/CreateAccountLink.vue)
- [LoginAnnouncementBoard.vue](../src/components/login/LoginAnnouncementBoard.vue)
- [LoginBrand.vue](../src/components/login/LoginBrand.vue)
- [LoginForm.vue](../src/components/login/LoginForm.vue)
- [LoginHeader.vue](../src/components/login/LoginHeader.vue)
- [LoginIllustration.vue](../src/components/login/LoginIllustration.vue)
- [LoginToolBar.vue](../src/components/login/LoginToolBar.vue)
- [LoginVerify.vue](../src/components/login/LoginVerify.vue)
這一層的定位是:
@@ -133,7 +133,7 @@
目前 `components/base` 只剩下:
- [DraggableDialog.vue](/home/carl/git/skt-vuetify-templates/src/components/base/DraggableDialog.vue)
- [DraggableDialog.vue](../src/components/base/DraggableDialog.vue)
目前判斷原則很直接:
@@ -144,18 +144,18 @@
目前 layout 實作集中於:
- [MainLayout.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/MainLayout.vue)
- [PlainLayout.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/PlainLayout.vue)
- [MainLayout.vue](../src/components/layouts/MainLayout.vue)
- [PlainLayout.vue](../src/components/layouts/PlainLayout.vue)
- `src/components/layouts/main-layout/*`
其中 `main-layout/*``MainLayout` 底下拆出的骨架子元件:
- [AppBarBreadcrumbCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/AppBarBreadcrumbCol.vue)
- [AppBarFavoritesCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/AppBarFavoritesCol.vue)
- [AppBarTopCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/AppBarTopCol.vue)
- [DrawerDesktopMenu.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/DrawerDesktopMenu.vue)
- [DrawerMobileFavoritesPanel.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/DrawerMobileFavoritesPanel.vue)
- [DrawerMobileMenuPanel.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/DrawerMobileMenuPanel.vue)
- [AppBarBreadcrumbCol.vue](../src/components/layouts/main-layout/AppBarBreadcrumbCol.vue)
- [AppBarFavoritesCol.vue](../src/components/layouts/main-layout/AppBarFavoritesCol.vue)
- [AppBarTopCol.vue](../src/components/layouts/main-layout/AppBarTopCol.vue)
- [DrawerDesktopMenu.vue](../src/components/layouts/main-layout/DrawerDesktopMenu.vue)
- [DrawerMobileFavoritesPanel.vue](../src/components/layouts/main-layout/DrawerMobileFavoritesPanel.vue)
- [DrawerMobileMenuPanel.vue](../src/components/layouts/main-layout/DrawerMobileMenuPanel.vue)
layout 應只承擔:
@@ -172,22 +172,22 @@ layout 不應承擔:
這個目錄目前是最接近 feature folder 的區域,放 maintenance 領域的 page component 與 domain component
- [PageMaint.vue](/home/carl/git/skt-vuetify-templates/src/components/PageMaint.vue)
- [CommonConfirmDialog.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/CommonConfirmDialog.vue)
- [EditableGrid.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/EditableGrid.vue)
- [MasterFileFormFields.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/MasterFileFormFields.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](../src/components/PageMaint.vue)
- [CommonConfirmDialog.vue](../src/components/maint/CommonConfirmDialog.vue)
- [EditableGrid.vue](../src/components/maint/EditableGrid.vue)
- [MasterFileFormFields.vue](../src/components/maint/MasterFileFormFields.vue)
- [MntDialogCard.vue](../src/components/maint/MntDialogCard.vue)
- [MntRecordNavToolbar.vue](../src/components/maint/MntRecordNavToolbar.vue)
- `master-detail/*`
`master-detail/*` 目前屬於維護頁專用的較細組件群:
- [CourseMobilePanel.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/master-detail/CourseMobilePanel.vue)
- [DetailCollapseGropus.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/master-detail/DetailCollapseGropus.vue)
- [DetailFullHeightPanel.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/master-detail/DetailFullHeightPanel.vue)
- [DetailNavigation.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/master-detail/DetailNavigation.vue)
- [DetailSidePanel.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/master-detail/DetailSidePanel.vue)
- [DetailSimpleList.vue](/home/carl/git/skt-vuetify-templates/src/components/maint/master-detail/DetailSimpleList.vue)
- [CourseMobilePanel.vue](../src/components/maint/master-detail/CourseMobilePanel.vue)
- [DetailCollapseGropus.vue](../src/components/maint/master-detail/DetailCollapseGropus.vue)
- [DetailFullHeightPanel.vue](../src/components/maint/master-detail/DetailFullHeightPanel.vue)
- [DetailNavigation.vue](../src/components/maint/master-detail/DetailNavigation.vue)
- [DetailSidePanel.vue](../src/components/maint/master-detail/DetailSidePanel.vue)
- [DetailSimpleList.vue](../src/components/maint/master-detail/DetailSimpleList.vue)
結論:
@@ -204,12 +204,12 @@ layout 不應承擔:
代表性檔案:
- [useAdminLayoutState.ts](/home/carl/git/skt-vuetify-templates/src/composables/layout/useAdminLayoutState.ts)
- [useThemeToggle.ts](/home/carl/git/skt-vuetify-templates/src/composables/layout/useThemeToggle.ts)
- [useMaintenanceCrudFlow.ts](/home/carl/git/skt-vuetify-templates/src/composables/maint/useMaintenanceCrudFlow.ts)
- [useStudentMaintenanceForm.ts](/home/carl/git/skt-vuetify-templates/src/composables/maint/useStudentMaintenanceForm.ts)
- [useEditableStudentGrid.ts](/home/carl/git/skt-vuetify-templates/src/composables/maint/useEditableStudentGrid.ts)
- [useApiCall.ts](/home/carl/git/skt-vuetify-templates/src/composables/useApiCall.ts)
- [useAdminLayoutState.ts](../src/composables/layout/useAdminLayoutState.ts)
- [useThemeToggle.ts](../src/composables/layout/useThemeToggle.ts)
- [useMaintenanceCrudFlow.ts](../src/composables/maint/useMaintenanceCrudFlow.ts)
- [useStudentMaintenanceForm.ts](../src/composables/maint/useStudentMaintenanceForm.ts)
- [useEditableStudentGrid.ts](../src/composables/maint/useEditableStudentGrid.ts)
- [useApiCall.ts](../src/composables/useApiCall.ts)
`composables` 的責任:
@@ -223,21 +223,23 @@ layout 不應承擔:
代表性檔案:
- [auth.ts](/home/carl/git/skt-vuetify-templates/src/stores/auth.ts)
- [menu.ts](/home/carl/git/skt-vuetify-templates/src/stores/menu.ts)
- [breadcrumbs.ts](/home/carl/git/skt-vuetify-templates/src/stores/breadcrumbs.ts)
- [favorites.ts](/home/carl/git/skt-vuetify-templates/src/stores/favorites.ts)
- [messages.ts](/home/carl/git/skt-vuetify-templates/src/stores/messages.ts)
- [snackbar.ts](/home/carl/git/skt-vuetify-templates/src/stores/snackbar.ts)
- [loginAnnouncements.ts](/home/carl/git/skt-vuetify-templates/src/stores/loginAnnouncements.ts)
- [students.ts](/home/carl/git/skt-vuetify-templates/src/stores/students.ts)
- [semesters.ts](/home/carl/git/skt-vuetify-templates/src/stores/semesters.ts)
- [auth.ts](../src/stores/auth.ts)
- [app.ts](../src/stores/app.ts)
- [menu.ts](../src/stores/menu.ts)
- [breadcrumbs.ts](../src/stores/breadcrumbs.ts)
- [favorites.ts](../src/stores/favorites.ts)
- [messages.ts](../src/stores/messages.ts)
- [snackbar.ts](../src/stores/snackbar.ts)
- [loginAnnouncements.ts](../src/stores/loginAnnouncements.ts)
- [students.ts](../src/stores/students.ts)
- [semesters.ts](../src/stores/semesters.ts)
責任:
- 承接跨頁共享狀態
- 承接畫面快取與顯示狀態
- 作為 view 與 services 之間的狀態收斂點
- `app.ts` 目前是空的 Pinia scaffold,尚未承擔實際 app state
規則:
@@ -250,13 +252,13 @@ layout 不應承擔:
代表性檔案:
- [client.ts](/home/carl/git/skt-vuetify-templates/src/services/client.ts)
- [interceptors.ts](/home/carl/git/skt-vuetify-templates/src/services/interceptors.ts)
- [error.ts](/home/carl/git/skt-vuetify-templates/src/services/error.ts)
- [http-error.ts](/home/carl/git/skt-vuetify-templates/src/services/http-error.ts)
- [http-toast.ts](/home/carl/git/skt-vuetify-templates/src/services/http-toast.ts)
- [session.ts](/home/carl/git/skt-vuetify-templates/src/services/session.ts)
- [token.ts](/home/carl/git/skt-vuetify-templates/src/services/token.ts)
- [client.ts](../src/services/client.ts)
- [interceptors.ts](../src/services/interceptors.ts)
- [error.ts](../src/services/error.ts)
- [http-error.ts](../src/services/http-error.ts)
- [http-toast.ts](../src/services/http-toast.ts)
- [session.ts](../src/services/session.ts)
- [token.ts](../src/services/token.ts)
- `services/modules/*`
責任:
@@ -272,61 +274,6 @@ layout 不應承擔:
## 目前已落地的分層模式
## Template Core 與 Demo 邊界
### Template Core
以下檔案屬於 template core,負責 app shell、layout、route、plugin、theme、HTTP 基礎設施與全域狀態:
- [main.ts](/home/carl/git/skt-vuetify-templates/src/main.ts)
- [App.vue](/home/carl/git/skt-vuetify-templates/src/App.vue)
- `src/router/index.ts`
- `src/router/guards.ts`
- `src/components/layouts/*`
- `src/views/Login.vue`
- `src/plugins/*`
- `src/styles/*`
- `src/services/client.ts`
- `src/services/interceptors.ts`
- `src/services/token.ts`
- `src/services/session.ts`
- `src/services/error.ts`
- `src/services/http-error.ts`
- `src/services/http-toast.ts`
- `src/stores/auth.ts`
- `src/stores/menu.ts`
- `src/stores/breadcrumbs.ts`
- `src/stores/favorites.ts`
- `src/stores/messages.ts`
- `src/stores/snackbar.ts`
- `src/composables/layout/*`
一般功能開發優先不要修改 template core;只有需求明確要求改變框架行為時才調整。
`src/router/routes.ts` 是新增功能 route 的正式入口,可新增 route,但不要破壞既有 layout meta、auth meta 與 catch-all route 規則。
### Demo / Example
以下檔案偏向示範資料與範例頁,可在正式專案中替換或刪除:
- `src/views/Home.vue`
- `src/components/PageIndex.vue`
- `src/views/maint/*`
- `src/components/maint/*`
- `src/composables/maint/*`
- `src/components/PageMaint.vue`
- `src/stores/students.ts`
- `src/stores/semesters.ts`
- `src/views/FncPage.vue`
- `src/views/Settings.vue`
- `src/assets/logo.png`
- `src/assets/logo.svg`
- `src/assets/robot-svgrepo-com.svg`
`maint` 是可參考的 demo feature,不是所有新專案都必須保留的核心功能。
移除 demo/example 時,要同步清理 routes、menu、language、store import、component import 與 assets。
### 模式 1`view -> page component -> page family components`
已落地頁面:
@@ -351,11 +298,11 @@ layout 不應承擔:
這一層目前是 maintenance 領域最清楚的結構:
- `views/maint/*` 承接 route 與頁面流程協調
- [PageMaint.vue](/home/carl/git/skt-vuetify-templates/src/components/PageMaint.vue) 承接維護頁共用頁面骨架
- [PageMaint.vue](../src/components/PageMaint.vue) 承接維護頁共用頁面骨架
- `components/maint/*` 承接維護頁專用元件
- `composables/maint/*` 承接 CRUD 流程、表單狀態與 editable grid 狀態
[EditableGrid.vue](/home/carl/git/skt-vuetify-templates/src/views/maint/EditableGrid.vue) 是目前最接近薄 view 的 maintenance 頁面。
[EditableGrid.vue](../src/views/maint/EditableGrid.vue) 是目前最接近薄 view 的 maintenance 頁面。
### 模式 3`router meta -> App.vue -> layout`
@@ -377,9 +324,9 @@ 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/PageMaint.vue)
- [PageLogin.vue](../src/components/PageLogin.vue)
- [PageIndex.vue](../src/components/PageIndex.vue)
- [PageMaint.vue](../src/components/PageMaint.vue)
### 資料夾命名
@@ -397,30 +344,6 @@ layout 不應承擔:
- 不要為了抽象而保留含糊的舊前綴
- 若元件只在 maint 領域使用,就留在 `components/maint`
## 目前仍待整理的區域
### 高優先度
- 繼續瘦身:
- [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)
原因:
- 這些頁面仍保留較多頁面內資料轉換與事件協調
### 中優先度
- 檢查 `components/maint` 內是否仍有可再明確命名的舊名稱
-`PageMaint` 的後續演進,決定是否維持在 `components` 根目錄
### 中低優先度
- 持續檢查 `views` 是否有可再下放到 page component 的模板片段
- 清理命名調整後留下的空資料夾或死連結
## 新增或修改檔案時的判斷準則
1. 這個檔案是否直接被 route 載入?
+2
View File
@@ -63,6 +63,7 @@ router -> App.vue -> layout -> view -> component -> composable/store -> service
- 一般被主 layout 包住的頁面:參考 `src/views/Home.vue``src/views/maint/EditableGrid.vue`
- 登入相關 UI:參考 `src/components/PageLogin.vue``src/components/login/*`
- 維護頁:參考 `src/views/maint/*``src/components/maint/*``src/composables/maint/*`
- 維護頁範本選擇:參考 `src/views/maint/README.md`
- API 呼叫:參考 `src/services/modules/*` 與使用它們的 store/composable
- 全域提示:參考 `src/stores/snackbar.ts``src/composables/useApiCall.ts`
@@ -91,6 +92,7 @@ router -> App.vue -> layout -> view -> component -> composable/store -> service
- `src/stores/favorites.ts`
- `src/stores/messages.ts`
- `src/stores/snackbar.ts`
- `src/stores/app.ts`
- `src/composables/layout/*`
以下內容偏向 demo/example,建立正式專案時可依需求替換或刪除: