# 表单配方

> Token：[tokens.md](tokens.md) | 代码骨架：[scenes/form-page.md](../scenes/form-page.md)

## 查询表单（列表页顶部）

```
[条件行 × N]  [查询] [重置]  （必要时 [展开/收起]）
```

| 规则       | 值                                                              |
| ---------- | --------------------------------------------------------------- |
| 对齐       | `label-position="right"`                                        |
| 栅格       | `w-row :gutter="16"`，`w-col :span="6"` 四列或 `:span="8"` 三列 |
| 行距       | 行与行 `margin-bottom: 12px`（gutter 只管列间距）               |
| 按钮顺序   | 同行有余量：`[查询] [重置]`；另起一行右对齐：`[重置] [查询]`    |
| 未占满一行 | 按钮紧跟最后一个条件                                            |
| 占满一行   | 按钮另起一行右对齐                                              |

## 录入表单

| 规则       | 值                                                                            |
| ---------- | ----------------------------------------------------------------------------- |
| label 宽度 | `label-width="100px"` 起，按最长 label 统一                                   |
| 校验       | `rules` 必须带 `type`（`string` / `number` / `array` 等）                     |
| 下拉       | 优先 `w-select-v2`（大数据）或 `w-select`                                     |
| 日期       | **一律** `w-date-picker-pro`（含 `datetime` / `daterange` / `datetimerange`） |
| 时间       | **一律** `w-time-picker-pro`                                                  |

## 纯展示

`w-form` 设 `text` + `show-colon`，或 `w-descriptions`

## 禁止

- 查询区不要用 `label-position="top"`（登录页除外）
- 不要省略 `w-form-item` 的 `prop`（有校验时）
- 日期 / 时间勿用非 Pro 组件（见 [date-time-advanced.md](../date-time-advanced.md)）

---

代码骨架见 [scenes/form-page.md](../scenes/form-page.md)；日期时间选型见 [date-time-advanced.md](../date-time-advanced.md)。
