refactor(login): compose page from focused login components
Split the login page into smaller reusable components for branding, toolbar, header, form, announcements, and mobile layout behavior. This keeps the view responsible for orchestration while moving UI sections into focused components. Update page creation docs to reflect the simplified flow where views render sections/items directly and composables coordinate store/service access when needed.refactor(login): compose page from focused login components Split the login page into smaller reusable components for branding, toolbar, header, form, announcements, and mobile layout behavior. This keeps the view responsible for orchestration while moving UI sections into focused components. Update page creation docs to reflect the simplified flow where views render sections/items directly and composables coordinate store/service access when needed.
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
|
||||
1. `src/GUIDE.md`
|
||||
2. `docs/architecture-strategy.md`
|
||||
3. 依 `maintenanceContract.pageKind` 閱讀對應的 `src/**/GUIDE.md`(查 `src/GUIDE.md` 中的「依 pageKind 選擇起點」表格)
|
||||
3. 依 `maintenanceContract.pageKind` 閱讀對應的 demo 與 `src/**/GUIDE.md`(查 `docs/architecture-strategy.md` 的分層說明)
|
||||
4. `docs/add-page-example.md`(需要新增頁面時)
|
||||
|
||||
`frontend-layering.md` 是歷史參考,後續以 `docs/architecture-strategy.md` 與 `src/**/GUIDE.md` 為準。
|
||||
@@ -40,7 +40,6 @@
|
||||
一般功能需求優先修改:
|
||||
|
||||
- `src/views/*`
|
||||
- `src/components/pages/*`
|
||||
- `src/components/sections/*`
|
||||
- `src/components/items/*`
|
||||
- `src/composables/page-drivers/*`
|
||||
@@ -72,7 +71,7 @@
|
||||
- 是否碰到 template core。
|
||||
- 是否已有同類型範例可沿用。
|
||||
- 是否需要新增 route。
|
||||
- 是否應拆成 page / section / item。
|
||||
- 是否應拆成 section / item。
|
||||
- 是否應新增 page driver 或 command composable。
|
||||
- 是否需要 store,或只需要頁面內 state。
|
||||
- 是否應定義新的 model 型別(`src/models/`)。
|
||||
@@ -97,11 +96,13 @@
|
||||
|
||||
### query(查詢頁)→ `SectionQueryPage`
|
||||
|
||||
參考:`src/views/demos/SectionQueryPageDemo.vue`、`src/components/pages/PageSectionQueryPageDemo.vue`、`src/composables/page-drivers/useSectionsDemoPage.ts`
|
||||
參考:`src/views/demos/SectionQueryPageDemo.vue`、`src/composables/page-drivers/useSectionsDemoPage.ts`
|
||||
|
||||
架構:
|
||||
```
|
||||
View (薄層) → composable (page driver) → PageSectionQueryPageDemo → SectionQueryPage
|
||||
View(自含 page model + UI) → SectionQueryPage
|
||||
↓
|
||||
composable (page driver)
|
||||
```
|
||||
|
||||
**composable 必須回傳:**
|
||||
@@ -124,11 +125,13 @@ View (薄層) → composable (page driver) → PageSectionQueryPageDemo → Sect
|
||||
|
||||
### application(申請/表單頁)→ `SectionFormPage`
|
||||
|
||||
參考:`src/views/demos/SectionFormPageDemo.vue`、`src/components/pages/PageSectionFormPageDemo.vue`
|
||||
參考:`src/views/demos/SectionFormPageDemo.vue`
|
||||
|
||||
架構:
|
||||
```
|
||||
View (薄層) → composable (page driver) → PageSectionFormPageDemo → SectionFormPage
|
||||
View(自含 page model + UI) → SectionFormPage
|
||||
↓
|
||||
composable (page driver)
|
||||
```
|
||||
|
||||
**composable 必須回傳:**
|
||||
@@ -145,11 +148,6 @@ View (薄層) → composable (page driver) → PageSectionFormPageDemo → Secti
|
||||
- `apiCatalog.fieldRules` 中的 `field` 與 `rule` 決定必填、長度、格式驗證
|
||||
- 型別轉換依 `field.type`:number 欄位不可包成 string 送出
|
||||
|
||||
**page component emits:**
|
||||
- `@submit` → 呼叫 `handleFormSubmit`
|
||||
- `@reset` → 呼叫 `resetForm`
|
||||
- `@back` → 呼叫 `handleFormBack`
|
||||
|
||||
### maintenance(維護/CRUD 頁)→ `maint/*`
|
||||
|
||||
參考:`src/views/maint/README.md` — 依資料結構選擇最接近的範本(EditableGrid / SingleRecord / MasterDetail A/B/C)
|
||||
|
||||
Reference in New Issue
Block a user