docs: reorganize component guide structure and indexes
Update documentation rules for GUIDE.md files to keep higher-level guides focused on constraints, conventions, and indexes. Add base and section component guides to the LLM development index, clarify component layering responsibilities, and fix architecture references from README to GUIDE.md.docs: reorganize component guide structure and indexes Update documentation rules for GUIDE.md files to keep higher-level guides focused on constraints, conventions, and indexes. Add base and section component guides to the LLM development index, clarify component layering responsibilities, and fix architecture references from README to GUIDE.md.
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
# Section Components Guide
|
||||
|
||||
`src/components/sections` 放頁面區塊容器,例如搜尋區、表格、dialog shell、panel。
|
||||
|
||||
## 規則
|
||||
|
||||
- 決定布局與區塊互動,不知道 route。
|
||||
- 檔名使用 `Section` 前綴。
|
||||
|
||||
## SectionFormPage
|
||||
|
||||
表單申請/填寫頁面通用外殼。最外層為 `v-form`,內含標題卡片、表單欄位區、子區段插槽、配合事項與動作按鈕列。
|
||||
|
||||
### 使用時機
|
||||
|
||||
- 頁面包含**送出/存檔按鈕**(`type="submit"`)
|
||||
- 需要**表單驗證**與整體 `v-form` 包覆
|
||||
- 具有**標題卡片**、**配合事項/注意事項區**、**動作按鈕列**的固定結構
|
||||
- 例如:申請單、借用單、報名表、維護單等填寫頁面
|
||||
|
||||
不適用情境:純粹列表/查詢頁面(無送出按鈕)、結構差異過大的頁面。
|
||||
|
||||
### Props
|
||||
|
||||
| Prop | 型別 | 預設 | 說明 |
|
||||
|------|------|------|------|
|
||||
| `title` | `string` | — | 頁面標題 |
|
||||
| `loading` | `boolean` | `undefined` | 是否顯示 loading |
|
||||
| `error` | `string` | `undefined` | 錯誤訊息 |
|
||||
| `message` | `string` | `undefined` | 成功訊息 |
|
||||
| `submitLabel` | `string` | `'存檔'` | 送出按鈕文字 |
|
||||
| `resetLabel` | `string` | `'清除'` | 清除按鈕文字 |
|
||||
| `backLabel` | `string` | `'返回'` | 返回按鈕文字 |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot | 用途 |
|
||||
|------|------|
|
||||
| `#fields` | 表單欄位區,用 `v-row`/`v-col` 配置 |
|
||||
| `#sections` | 額外子區段卡片(明細、表格等) |
|
||||
| `#notices` | 配合事項/注意事項清單 |
|
||||
|
||||
### Emits
|
||||
|
||||
| Emit | 說明 |
|
||||
|------|------|
|
||||
| `@submit` | 點擊存檔時觸發 |
|
||||
| `@reset` | 點擊清除時觸發 |
|
||||
| `@back` | 點擊返回時觸發 |
|
||||
|
||||
### 範例
|
||||
|
||||
```vue
|
||||
<SectionFormPage
|
||||
title="設備借用申請"
|
||||
:loading="loading"
|
||||
:error="error"
|
||||
:message="message"
|
||||
@submit="save"
|
||||
@reset="reset"
|
||||
@back="router.push('/venue/apply-choose')"
|
||||
>
|
||||
<template #fields>
|
||||
<v-row density="compact">
|
||||
<v-col cols="12" md="4">
|
||||
<BaseFormTextField v-model="form.cellPhone" label="手機" class="ml-2" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<template #sections>
|
||||
<v-card>
|
||||
<v-card-title class="text-title-medium font-weight-bold">設備明細</v-card-title>
|
||||
<!-- 明細表格 -->
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<template #notices>
|
||||
<v-list class="bg-yellow-lighten-5">
|
||||
<v-list-item>借用設備時,請愛惜公物。</v-list-item>
|
||||
</v-list>
|
||||
</template>
|
||||
</SectionFormPage>
|
||||
```
|
||||
Reference in New Issue
Block a user