feat(docs): add bilingual package documentation site

2026-09-20 15:53:28 +08:00
parent 60f6f1fb1a
commit dc80bd8ae0
111 changed files with 6531 additions and 0 deletions
@@ -0,0 +1,37 @@
+---
+title: 组合表单
+description: 组合 Field、Input 和 Button，同时让领域状态继续由应用管理。
+order: 30
+toc:
+  - id: create-the-form
+    title: 创建表单
+  - id: validation
+    title: 表单验证
+  - id: styling
+    title: 样式
+---
+
+## 创建表单 {#create-the-form}
+
+```tsx
+import { Button } from "@workspace/ui/components/button"
+import { Field, FieldError, FieldLabel } from "@workspace/ui/components/field"
+import { Input } from "@workspace/ui/components/input"
+
+;<form onSubmit={saveProfile}>
+  <Field>
+    <FieldLabel htmlFor="display-name">显示名称</FieldLabel>
+    <Input id="display-name" name="displayName" />
+    <FieldError>{errors.displayName}</FieldError>
+  </Field>
+  <Button type="submit">保存资料</Button>
+</form>
+```
+
+## 表单验证 {#validation}
+
+UI 包负责渲染验证状态，但不会指定表单库或 Schema。请在应用边界连接原生表单数据、React 状态或表单框架。
+
+## 样式 {#styling}
+
+受支持的语义变化使用组件变体，局部布局使用 `className`。需要合并条件类名或消费者覆盖时，使用 `@workspace/ui/lib/utils` 中的 `cn`。