linx6g/skt-vuetify-templates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(login): compose page from focused login components

Browse Source 
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:
skytek_xinliang
2026-05-27 13:43:43 +08:00
parent 7b99087cbb
commit 7b0cfe4448
18 changed files with 614 additions and 1007 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/GUIDE.md
+5 -5
View File
@@ -29,15 +29,15 @@ const pageModel = computed(() => ({ title: '我的頁面' }))
```vue
<script setup lang="ts">
import PageMaint from '@/components/PageMaint.vue'
import MaintShell from '@/components/MaintShell.vue'
import { useXxxPage } from '@/composables/page-drivers/useXxxPage'
const { pageModel, search, handleSave, ... } = useXxxPage()
</script>
<template>
<PageMaint :title="pageModel.title" @create="handleCreate">
<MaintShell :title="pageModel.title" @create="handleCreate">
<template #table>...</template>
</PageMaint>
</MaintShell>
</template>
```
@@ -45,14 +45,14 @@ const { pageModel, search, handleSave, ... } = useXxxPage()
## Login.vue 開關
`Login.vue` 是登入頁的組合層，登入頁功能開關集中在 view 內宣告，再透過 `PageLogin` / composable 往下傳遞，不在子元件各自決定是否啟用。
`Login.vue` 是登入頁的完整入口，登入頁功能開關集中在 view 內宣告，透過 composable 往下傳遞，不在子元件各自決定是否啟用。
- `withCaptcha`：控制驗證碼 UI、captcha API 載入/刷新，以及登入 payload 是否帶 captcha 資料。關閉時不應發出 captcha API，也不應檢查或送出 captcha 欄位。
- `withAnnouncement`：控制公告 UI、公告 mock data/composable 資料流與公告詳情互動。關閉時公告板、手機公告列與公告對話框資料來源都應停用。
- `withForgotPassword`：控制忘記密碼連結與事件。關閉時 UI 不顯示，也不應觸發忘記密碼事件。
- `withRememberAccount`：控制記住帳號 UI 與 localStorage 讀寫。關閉時不顯示 checkbox、不讀寫記住帳號 storage，送出資料固定視為未記住帳號。
新增登入頁選配功能時，優先維持同樣模式：view 宣告開關、composable 負責資料流與 side effect、page/form component 只依 props 呈現 UI 與發出事件。
新增登入頁選配功能時，優先維持同樣模式：view 宣告開關、composable 負責資料流與 side effect、form component 只依 props 呈現 UI 與發出事件。
## 子目錄