skytek_xinliang
cad44db4c7
Add inline comments to page components documenting how page models, v-model state, and emitted user intents flow through the page driver. This clarifies that page components remain presentation-focused while routing, dialog state, CRUD side effects, and command handling stay in the page driver or related composables.docs(pages): clarify page driver component boundaries Add inline comments to page components documenting how page models, v-model state, and emitted user intents flow through the page driver. This clarifies that page components remain presentation-focused while routing, dialog state, CRUD side effects, and command handling stay in the page driver or related composables.
2.5 KiB
2.5 KiB
Views Guide
views 是 route entry。View 應維持薄層，負責掛載 page driver 與 page component，不承載大段 UI、dialog、表單欄位或 store mutation 細節。
規則
- 使用
<script setup lang="ts">。 - 直接 route component 放在
src/views或src/views/<feature>。 - 一般 view 目標 < 80 行。
- route params/query 的解析可在 view 做簡單轉換；超過簡單轉換時放進 page driver。
- 不直接 import 或包住
MainLayout.vue。 - 不直接定義大型
<v-dialog>、<v-overlay>、大型表格或大型表單。
建議形狀
<script setup lang="ts">
import PageReports from '@/components/pages/PageReports.vue'
import { useReportsPage } from '@/composables/page-drivers/useReportsPage'
const page = useReportsPage()
</script>
<template>
<PageReports :page="page.pageModel.value" />
</template>
Login.vue 開關
Login.vue 是登入頁的組合層，登入頁功能開關集中在 view 內宣告，再透過 PageLogin / 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 與發出事件。
子目錄
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。