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

docs: reorganize component guide structure and indexes

Browse Source 
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:
skytek_xinliang
2026-05-20 17:06:09 +08:00
parent 4d66718b05
commit 8af82f5900
10 changed files with 296 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/GUIDE.md
+46
View File
@@ -0,0 +1,46 @@
# Base Components Guide
`src/components/base` 放真正跨頁共用且不屬於特定 domain 的基礎元件。
## 規則
- 只服務單一 domain 的元件不要放進 `base`。
- 命名不使用 `Page`/`Section`/`Item` 前綴，直接以功能命名。
## BaseFormTextField
前置 label + `v-text-field`，預設 `variant="outlined"`、`density="compact"`、`hide-details`。
| Prop | 型別 | 預設 | 說明 |
|------|------|------|------|
| `modelValue` | `string` | — | 雙向綁定字串值 |
| `label` | `string` | `undefined` | `#prepend` 內 `<span>` 的文字 |
| `labelCharCount` | `number` | `undefined` | 字數，用於計算 `min-width: 字數 × 0.785rem` |
| `prependMarginEnd` | `number` | `8` | `#prepend` 的 `margin-inline-end`（px） |
| `readonly` | `boolean` | `undefined` | 是否唯讀 |
```vue
<BaseFormTextField
v-model="form.cellPhone"
label="手機"
class="ml-2"
:label-char-count="4"
:prepend-margin-end="16"
/>
```
## BaseFormSelect
前置 label + `v-select`，預設 `variant="outlined"`、`density="compact"`、`hide-details`。
| Prop | 型別 | 預設 | 說明 |
|------|------|------|------|
| `modelValue` | `any` | — | 雙向綁定值 |
| `items` | `any[]` | — | `v-select` 的 `items` |
| `label` | `string` | `undefined` | `#prepend` 內 `<span>` 的文字 |
| `labelCharCount` | `number` | `undefined` | 字數，用於計算 `min-width` |
| `prependMarginEnd` | `number` | `8` | `#prepend` 的 `margin-inline-end`（px） |
```vue
<BaseFormSelect v-model="form.status" label="狀態" :items="statusOptions" class="ml-2" />
```