skytek_xinliang
7b0cfe4448
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.
2.9 KiB
2.9 KiB
Views Guide
views 是 route entry。View 自含 page model 組裝與頁面 UI，若邏輯複雜才抽到 page driver composable。
規則
- 使用
<script setup lang="ts">。 - 直接 route component 放在
src/views或src/views/<feature>。 - route params/query 的解析可在 view 做簡單轉換；超過簡單轉換時放進 page driver。
- 不直接 import 或包住
MainLayout.vue。 - 複雜 UI 拆到
components/sections/*或components/items/*。
建議形狀
簡單頁面：直接在 view 組裝 page model 與 template。
<script setup lang="ts">
import { computed } from 'vue'
const pageModel = computed(() => ({ title: '我的頁面' }))
</script>
<template>
<v-card>{{ pageModel.title }}</v-card>
</template>
複雜頁面：透過 page driver composable 協調多個資料來源。
<script setup lang="ts">
import MaintShell from '@/components/MaintShell.vue'
import { useXxxPage } from '@/composables/page-drivers/useXxxPage'
const { pageModel, search, handleSave, ... } = useXxxPage()
</script>
<template>
<MaintShell :title="pageModel.title" @create="handleCreate">
<template #table>...</template>
</MaintShell>
</template>
以 destructure 方式取用 composable 回傳值，模板不寫 .value。
Login.vue 開關
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、form component 只依 props 呈現 UI 與發出事件。
子目錄
views/demos是一般頁面與 section 使用方式的 demo route entry，仍需維持薄 view。views/maint是 maintenance demo route entry。詳見src/views/maint/GUIDE.md。views/errors是錯誤頁入口，通常使用meta.layout = 'none'。每個錯誤頁（Forbidden.vue、ServerError.vue、NotFound.vue等）只傳入 props 給共用的ErrorShell.vue，不再各自重複佈局邏輯。ErrorShell.vue提供標題、圖示、顏色、描述、後端訊息、操作按鈕（返回上頁 / 回首頁 / 前往登入）等 slots。