@fjyueke/bify-mcp 1.0.0

package/metaData/components/flex/example/index.tsx

@@ -0,0 +1,58 @@
+import { Flex } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function FlexDemo() {
+  return (
+    <Page title="Flex 布局" className="flex-demo">
+      <Block title="基础用法">
+        <Flex>
+          <Flex.Item span={8}>span: 8</Flex.Item>
+          <Flex.Item span={8}>span: 8</Flex.Item>
+          <Flex.Item span={8}>span: 8</Flex.Item>
+        </Flex>
+        <Flex>
+          <Flex.Item span={4}>span: 4</Flex.Item>
+          <Flex.Item span={10} offset={4}>
+            offset: 4, span: 10
+          </Flex.Item>
+        </Flex>
+        <Flex>
+          <Flex.Item offset={12} span={12}>
+            offset: 12, span: 12
+          </Flex.Item>
+        </Flex>
+      </Block>
+      <Block title="在列元素之间增加间距">
+        <Flex gutter={12}>
+          <Flex.Item span={8}>span: 8</Flex.Item>
+          <Flex.Item span={8}>span: 8</Flex.Item>
+          <Flex.Item span={8}>span: 8</Flex.Item>
+        </Flex>
+      </Block>
+      <Block title="Flex 布局">
+        <Flex justify="center">
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+        </Flex>
+        <Flex justify="end">
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+        </Flex>
+        <Flex justify="space-between">
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+        </Flex>
+        <Flex justify="space-around">
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+          <Flex.Item span={6}>span: 6</Flex.Item>
+        </Flex>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/floating-bubble/api.md

@@ -0,0 +1,18 @@
+## API
+
+### Flex Props
+
+| 参数     | 说明                                                    | 类型                         | 默认值           |
+| -------- | ------------------------------------------------------- | ---------------------------- | ---------------- |
+| offset   | 控制气泡位置                                            | OffsetType                   | `默认右下角坐标` |
+| axis     | 拖拽的方向，`xy` 代表自由拖拽，`lock` 代表禁止拖拽      | _x_ \| _y_ \| _xy_ \| _lock_ | `y`              |
+| magnetic | 自动磁吸的方向                                          | _x_ \| _y_                   | `-`              |
+| icon     | 左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_                  | `-`              |
+| gap      | 气泡与窗口的最小间距，单位为 `px`                       | _Number_                     | `48`             |
+
+### Events
+
+| 事件名         | 说明                         | 回调参数               |
+| -------------- | ---------------------------- | ---------------------- |
+| onClick        | 点击组件时触发               | _ITouchEvent_          |
+| onOffsetChange | 由用户拖拽导致位置改变后触发 | _x: string, y: string_ |

package/metaData/components/floating-bubble/doc.md

@@ -0,0 +1,94 @@
+# FloatingBubble 浮动气泡
+
+### 介绍
+
+悬浮在页面边缘的可点击气泡。
+
+请升级 `taroify` 到 >= `v0.1.1-alpha.1` 版本来使用该组件。
+
+### 引入
+
+```tsx
+import { FloatingBubble } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+浮动气泡默认展示在右下角，并允许在 y 轴方向上下拖拽，你可以通过 `icon` 属性设置气泡的图标。
+
+```tsx
+function BasicFloatingBubble() {
+  const onClick = () => {
+    showToast({
+      title: "点击气泡",
+      icon: "none",
+      duration: 1000,
+    })
+  }
+
+  return <FloatingBubble icon={<ChatOutlined />} onClick={onClick} />
+}
+```
+
+### 自由拖拽和磁吸
+
+允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边。
+
+```tsx
+function CustomFloatingBubble() {
+  const onOffsetChange = (x: number, y: number) => {
+    showToast({
+      title: `x: ${x.toFixed(0)}, y: ${y.toFixed(0)}`,
+      icon: "none",
+      duration: 1000,
+    })
+  }
+
+  return (
+    <FloatingBubble
+      axis="xy"
+      magnetic="x"
+      icon={<ChatOutlined />}
+      onOffsetChange={onOffsetChange}
+    />
+  )
+}
+```
+
+## API
+
+### Flex Props
+
+| 参数     | 说明                                                    | 类型                         | 默认值           |
+| -------- | ------------------------------------------------------- | ---------------------------- | ---------------- |
+| offset   | 控制气泡位置                                            | OffsetType                   | `默认右下角坐标` |
+| axis     | 拖拽的方向，`xy` 代表自由拖拽，`lock` 代表禁止拖拽      | _x_ \| _y_ \| _xy_ \| _lock_ | `y`              |
+| magnetic | 自动磁吸的方向                                          | _x_ \| _y_                   | `-`              |
+| icon     | 左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_                  | `-`              |
+| gap      | 气泡与窗口的最小间距，单位为 `px`                       | _Number_                     | `48`             |
+
+### Events
+
+| 事件名         | 说明                         | 回调参数               |
+| -------------- | ---------------------------- | ---------------------- |
+| onClick        | 点击组件时触发               | _ITouchEvent_          |
+| onOffsetChange | 由用户拖拽导致位置改变后触发 | _x: string, y: string_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                            | 默认值                 | 描述 |
+| ------------------------------- | ---------------------- | ---- |
+| --floating-bubble-size          | _96px_                 | -    |
+| --floating-bubble-initial-gap   | _48px_                 | -    |
+| --floating-bubble-background    | _var(--blue, $blue)_   | -    |
+| --floating-bubble-color         | _var(--white, $white)_ | -    |
+| --floating-bubble-border-radius | _999px_                | -    |
+| --floating-bubble-z-index       | _999_                  | -    |
+| --floating-bubble-duratio       | _0.3s_                 | -    |
+| --floating-bubble-icon-size     | _56px_                 | -    |

package/metaData/components/floating-bubble/example/index.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react"
+import { showToast } from "@tarojs/taro"
+import { FloatingBubble, Tabs } from "@fjyueke/bify-core"
+import { ChatOutlined } from "@fjyueke/bify-icons"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+function BasicFloatingBubble() {
+  const onClick = () => {
+    showToast({
+      title: "点击气泡",
+      icon: "none",
+      duration: 1000,
+    })
+  }
+
+  return <FloatingBubble icon={<ChatOutlined />} onClick={onClick} />
+}
+
+function CustomFloatingBubble() {
+  const onOffsetChange = (x: number, y: number) => {
+    showToast({
+      title: `x: ${x.toFixed(0)}, y: ${y.toFixed(0)}`,
+      icon: "none",
+      duration: 1000,
+    })
+  }
+
+  return (
+    <FloatingBubble
+      axis="xy"
+      magnetic="x"
+      icon={<ChatOutlined />}
+      onOffsetChange={onOffsetChange}
+    />
+  )
+}
+
+export default function FloatingPanelDemo() {
+  const [value, setValue] = useState(0)
+
+  return (
+    <Page className="floating-bubble-demo" title="FloatingBubble 浮动气泡">
+      <Tabs value={value} onChange={setValue}>
+        <Tabs.TabPane title="基础用法">
+          <BasicFloatingBubble />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="自由拖拽和磁吸">
+          <CustomFloatingBubble />
+        </Tabs.TabPane>
+      </Tabs>
+    </Page>
+  )
+}

package/metaData/components/floating-panel/api.md

@@ -0,0 +1,19 @@
+## API
+
+### Flex Props
+
+| 参数                | 说明                                    | 类型       | 默认值                           |
+| ------------------- | --------------------------------------- | ---------- | -------------------------------- |
+| height              | 当前面板的显示高度                      | _number_   | `0`                              |
+| anchors             | 设置自定义锚点, 单位 `px`               | _number[]_ | `[100, window.innerWidth * 0.6]` |
+| duration            | 动画时长，单位秒，设置为 0 可以禁用动画 | _number_   | `0.3`                            |
+| contentDraggable    | 允许拖拽内容容器                        | _boolean_  | `true`                           |
+| safeAreaInsetBottom | 是否开启底部安全区适配                  | _boolean_  | `true`                           |
+
+### 方法
+
+通过 ref 可以获取到 FloatingPanel 实例并调用实例方法。
+
+| 方法名     | 说明                                       | 参数  | 返回值 |
+|---------|------------------------------------------|-----|-----|
+| setHieght   | 设置面板高度                                    | _number_   | -   |

package/metaData/components/floating-panel/doc.md

@@ -0,0 +1,174 @@
+# FloatingPanel 浮动面板
+
+### 介绍
+
+浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。
+
+请升级 `taroify` 到 >= `v0.1.0-alpha.3` 版本来使用该组件。
+
+### 引入
+
+```tsx
+import { FloatingPanel } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+FloatingPanel 的默认高度为 `100px`，用户可以拖动来展开面板，使高度达到 `60%` 的屏幕高度。
+
+```tsx
+<FloatingPanel>
+  <Cell.Group>
+    <Cell>1</Cell>
+    <Cell>2</Cell>
+    <Cell>3</Cell>
+    <Cell>4</Cell>
+    <Cell>5</Cell>
+    <Cell>6</Cell>
+    <Cell>7</Cell>
+    <Cell>8</Cell>
+    <Cell>9</Cell>
+    <Cell>10</Cell>
+    <Cell>11</Cell>
+    <Cell>12</Cell>
+    <Cell>13</Cell>
+  </Cell.Group>
+</FloatingPanel>
+```
+
+### 自定义锚点
+
+你可以通过 `anchors` 属性来设置 FloatingPanel 的锚点位置，并通过 `height` 来控制当前面板的显示高度。
+比如，使面板的高度在 `100px`、40% 屏幕高度和 70% 屏幕高度三个位置停靠：
+
+```tsx
+function CustomAnchors() {
+  const windowHeight = useMemo(() => getWindowInfo().windowHeight, [])
+
+  const anchors = useMemo(
+    () => [200, Math.round(0.4 * windowHeight), Math.round(0.7 * windowHeight)],
+    [windowHeight],
+  )
+
+  return (
+    <FloatingPanel anchors={anchors} height={anchors[0]}>
+      <Cell.Group>
+        <Cell>1</Cell>
+        <Cell>2</Cell>
+        <Cell>3</Cell>
+        <Cell>4</Cell>
+        <Cell>5</Cell>
+        <Cell>6</Cell>
+        <Cell>7</Cell>
+        <Cell>8</Cell>
+        <Cell>9</Cell>
+        <Cell>10</Cell>
+        <Cell>11</Cell>
+        <Cell>12</Cell>
+        <Cell>13</Cell>
+      </Cell.Group>
+    </FloatingPanel>
+  )
+}
+```
+
+### 仅头部拖拽
+
+默认情况下，FloatingPanel 的头部区域和内容区域都可以被拖拽，你可以通过 `contentDraggable` 属性来禁用内容区域的拖拽。
+
+```tsx
+function HeadDragOnly() {
+  return (
+    <FloatingPanel contentDraggable={false}>
+      <Cell.Group>
+        <Cell>1</Cell>
+        <Cell>2</Cell>
+        <Cell>3</Cell>
+        <Cell>4</Cell>
+        <Cell>5</Cell>
+        <Cell>6</Cell>
+        <Cell>7</Cell>
+        <Cell>8</Cell>
+        <Cell>9</Cell>
+        <Cell>10</Cell>
+        <Cell>11</Cell>
+        <Cell>12</Cell>
+        <Cell>13</Cell>
+      </Cell.Group>
+    </FloatingPanel>
+  )
+}
+```
+
+### 手动设置高度
+
+通过 `ref` 可以获取到 FloatingPanel 的实例，调用 `setHeight` 方法可以手动设置 FloatingPanel 的高度。
+
+```tsx
+function CustomHeight() {
+  const floatingPanelRef = useRef<any>()
+  const resetHeight = () => {
+    floatingPanelRef.current?.setHeight(100)
+  }
+
+  return (<>
+  <Button color="default" onClick={resetHeight}>重置高度</Button>
+  <FloatingPanel ref={floatingPanelRef}>
+    <Cell.Group>
+      <Cell>1</Cell>
+      <Cell>2</Cell>
+      <Cell>3</Cell>
+      <Cell>4</Cell>
+      <Cell>5</Cell>
+      <Cell>6</Cell>
+      <Cell>7</Cell>
+      <Cell>8</Cell>
+      <Cell>9</Cell>
+      <Cell>10</Cell>
+      <Cell>11</Cell>
+      <Cell>12</Cell>
+      <Cell>13</Cell>
+    </Cell.Group>
+  </FloatingPanel>
+</>)
+}
+```
+
+## API
+
+### Flex Props
+
+| 参数                | 说明                                    | 类型       | 默认值                           |
+| ------------------- | --------------------------------------- | ---------- | -------------------------------- |
+| height              | 当前面板的显示高度                      | _number_   | `0`                              |
+| anchors             | 设置自定义锚点, 单位 `px`               | _number[]_ | `[100, window.innerWidth * 0.6]` |
+| duration            | 动画时长，单位秒，设置为 0 可以禁用动画 | _number_   | `0.3`                            |
+| contentDraggable    | 允许拖拽内容容器                        | _boolean_  | `true`                           |
+| safeAreaInsetBottom | 是否开启底部安全区适配                  | _boolean_  | `true`                           |
+
+### 方法
+
+通过 ref 可以获取到 FloatingPanel 实例并调用实例方法。
+
+| 方法名     | 说明                                       | 参数  | 返回值 |
+|---------|------------------------------------------|-----|-----|
+| setHieght   | 设置面板高度                                    | _number_   | -   |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                   | 默认值                          | 描述 |
+| -------------------------------------- | ------------------------------- | ---- |
+| --floating-panel-z-index               | _1010_                          | -    |
+| --floating-panel-rounded-border-radius | _16px \* $hd_                   | -    |
+| --floating-panel-header-height         | _60px_                          | -    |
+| --floating-panel-bar-height            | _6px_                           | -    |
+| --floating-panel-bar-width             | _40px_                          | -    |
+| --floating-panel-bar-color             | _var(--gray-5, $gray-5)_        | -    |
+| --floating-panel-background            | _var(--background-color-light)_ | -    |

package/metaData/components/floating-panel/example/index.tsx

@@ -0,0 +1,131 @@
+import { FloatingPanel, Cell, Tabs, Button } from "@fjyueke/bify-core"
+import { useState, useMemo, useRef } from "react"
+import { getWindowInfo } from "@tarojs/taro"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+function BasicFloatingPanel() {
+  return (
+    <FloatingPanel>
+      <Cell.Group>
+        <Cell>1</Cell>
+        <Cell>2</Cell>
+        <Cell>3</Cell>
+        <Cell>4</Cell>
+        <Cell>5</Cell>
+        <Cell>6</Cell>
+        <Cell>7</Cell>
+        <Cell>8</Cell>
+        <Cell>9</Cell>
+        <Cell>10</Cell>
+        <Cell>11</Cell>
+        <Cell>12</Cell>
+        <Cell>13</Cell>
+      </Cell.Group>
+    </FloatingPanel>
+  )
+}
+
+function CustomAnchors() {
+  const windowHeight = useMemo(() => getWindowInfo().windowHeight, [])
+
+  const anchors = useMemo(
+    () => [200, Math.round(0.4 * windowHeight), Math.round(0.7 * windowHeight)],
+    [windowHeight],
+  )
+
+  return (
+    <FloatingPanel anchors={anchors} height={anchors[0]}>
+      <Cell.Group>
+        <Cell>1</Cell>
+        <Cell>2</Cell>
+        <Cell>3</Cell>
+        <Cell>4</Cell>
+        <Cell>5</Cell>
+        <Cell>6</Cell>
+        <Cell>7</Cell>
+        <Cell>8</Cell>
+        <Cell>9</Cell>
+        <Cell>10</Cell>
+        <Cell>11</Cell>
+        <Cell>12</Cell>
+        <Cell>13</Cell>
+      </Cell.Group>
+    </FloatingPanel>
+  )
+}
+
+function HeadDragOnly() {
+  return (
+    <FloatingPanel contentDraggable={false}>
+      <Cell.Group>
+        <Cell>1</Cell>
+        <Cell>2</Cell>
+        <Cell>3</Cell>
+        <Cell>4</Cell>
+        <Cell>5</Cell>
+        <Cell>6</Cell>
+        <Cell>7</Cell>
+        <Cell>8</Cell>
+        <Cell>9</Cell>
+        <Cell>10</Cell>
+        <Cell>11</Cell>
+        <Cell>12</Cell>
+        <Cell>13</Cell>
+      </Cell.Group>
+    </FloatingPanel>
+  )
+}
+
+function CustomHeight() {
+  const floatingPanelRef = useRef<any>()
+
+  const resetHeight = () => {
+    floatingPanelRef.current?.setHeight(100)
+  }
+
+  return (<>
+  <Button color="default" onClick={resetHeight}>重置高度</Button>
+  <FloatingPanel ref={floatingPanelRef}>
+    <Cell.Group>
+      <Cell>1</Cell>
+      <Cell>2</Cell>
+      <Cell>3</Cell>
+      <Cell>4</Cell>
+      <Cell>5</Cell>
+      <Cell>6</Cell>
+      <Cell>7</Cell>
+      <Cell>8</Cell>
+      <Cell>9</Cell>
+      <Cell>10</Cell>
+      <Cell>11</Cell>
+      <Cell>12</Cell>
+      <Cell>13</Cell>
+    </Cell.Group>
+  </FloatingPanel>
+</>)
+}
+
+export default function FloatingPanelDemo() {
+  const [value, setValue] = useState(0)
+
+  return (
+    <Page className="floating-panel-demo" title="FloatingPanel 浮动面板">
+      <Tabs value={value} onChange={setValue}>
+        <Tabs.TabPane title="基础用法">
+          <BasicFloatingPanel />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="自定义锚点">
+          <CustomAnchors />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="仅头部拖拽">
+          <HeadDragOnly />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="手动设置高度">
+          <CustomHeight />
+        </Tabs.TabPane>
+      </Tabs>
+    </Page>
+  )
+}

package/metaData/components/form/api.md

@@ -0,0 +1,124 @@
+## API
+
+### Form Props
+
+| 参数                          | 说明                                                        | 类型      | 默认值   |
+| ----------------------------- | ----------------------------------------------------------- | --------- | -------- |
+| defaultValues                 | 表单默认值                                                  | _object_  |          |
+| labelAlign                    | 表单项 label 对齐方式，可选值为 `center` `right`            | _string_  | `left`   |
+| controlAlign                  | 表单项 control 对齐方式，可选值为 `center` `right`          | _string_  | `left`   |
+| validateTrigger               | 表单校验触发时机，可选值为 `onChange`、`onSubmit`，详见下表 | _string_  | `onBlur` |
+| colon                         | 是否在 label 后面添加冒号                                   | _boolean_ | `false`  |
+| disabled <br>`v0.3.1-alpha.0` | 是否禁用表单                                                | _boolean_ | `false`  |
+
+### Form Events
+
+| 事件名         | 说明                       | 回调参数                                              |
+| -------------- | -------------------------- | ----------------------------------------------------- |
+| onSubmit       | 提交表单且验证通过后触发   | _event: BaseEventOrig<FormProps.onSubmitEventDetail>_ |
+| onReset        | 重置表单后触发             | _event: BaseEventOrig_                                |
+| onValidate     | 提交表单且验证不通过后触发 | _errors: { name: string, errors: string[] }[]_        |
+| onValuesChange | 字段值更新后触发           | _changedValues: object, allValues: object_            |
+
+### Form Methods
+
+通过 ref 可以获取到 Form 实例并调用实例方法。
+
+| 方法名                      | 说明                                                         | 参数                        | 返回值             |
+| --------------------------- | ------------------------------------------------------------ | --------------------------- | ------------------ |
+| setValues                   | 设置表单值(浅合并)                                           | _object_                    | -                  |
+| getValues                   | 获得表单值，支持传入 `name` 来获得单个或部分表单项           | _name?: string \| string[]_ | _object_           |
+| setErrors                   | 设置表单验证错误信息(浅合并)                                 | _FormValidError[]_          | _void_             |
+| getErrors                   | 获得表单验证错误信息，支持传入 `name` 来获得单个或部分表单项 | _name?: string \| string[]_ | _FormValidError[]_ |
+| validate                    | 验证表单，支持传入 `name` 来验证单个或部分表单项             | _name?: string \| string[]_ | _Promise_          |
+| submit <br>`v0.3.1-alpha.0` | 提交表单，与点击提交按钮的效果等价                           | -                           | -                  |
+| reset                       | 重置表单                                                     | -                           | _void_             |
+
+### validateTrigger 可选值
+
+通过 `validateTrigger` 属性可以自定义表单校验的触发时机。
+
+| 值       | 描述                                 |
+| -------- | ------------------------------------ |
+| onSubmit | 仅在提交表单时触发校验               |
+| onBlur   | 在提交表单和输入框失焦时触发校验     |
+| onChange | 在提交表单和输入框内容变化时触发校验 |
+
+### Form.Item Props
+
+| 参数                              | 说明                                 | 类型                                          | 默认值  |
+| --------------------------------- | ------------------------------------ | --------------------------------------------- | ------- |
+| name                              | 表单项名称，提交表单的标识符         | _string_                                      | -       |
+| defaultValue                      | 表单项默认值                         | _any_                                         | -       |
+| required                          | 是否显示表单必填星号                 | _boolean_                                     | `false` |
+| rules                             | 表单校验规则                         | _FormRule[]_                                  | -       |
+| dependencies <br>`v0.1.6-alpha.0` | 当依赖的字段值改变时，触发自身的校验 | _string[]_                                    | -       |
+| shouldUpdate <br>`v0.1.6-alpha.0` | 当值为 true 时，触发当前区域重新渲染 | _boolean\|(prevValues, curValues) => boolean_ | -       |
+| noStyle <br>`v0.1.6-alpha.0`      | 直接渲染 children                    | boolean                                       | -       |
+
+> 属性继承自 Cell 组件，更多属性参见：[Cell 组件](/components/cell/#cell-props)
+
+### Rule 数据结构
+
+使用 Form.Item 的 `rules` 属性可以定义校验规则，可选属性如下：
+
+| 键名 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段，当值为空字符串、空数组、`undefined`、`null` 时，校验不通过 | _boolean_ |
+| message | 错误提示文案 | _string \| (value, rule) => string_ |
+| validator | 通过函数进行校验 | _(value, rule) => boolean \| string \| Promise_ |
+| validateFirst `v0.5.0-alpha.0` | 当某一规则校验不通过时，是否停止剩下的规则的校验。 | _boolean_ | `false` |
+| pattern | 通过正则表达式进行校验 | _RegExp_ |
+| trigger | 本项规则的触发时机，可选值为 `onChange`、`onBlur` | _string_ |
+| formatter | 格式化函数，将表单项的值转换后进行校验 | _(value, rule) => any_ |
+
+### Form.Label Props
+
+| 参数  | 说明                                | 类型      | 默认值  |
+| ----- | ----------------------------------- | --------- | ------- |
+| align | 对齐方式，可选值为 `center` `right` | _string_  | `left`  |
+| colon | 是否在 label 后面添加冒号           | _boolean_ | `false` |
+
+### Form.Feedback Props
+
+| 参数   | 说明                                           | 类型     | 默认值 |
+| ------ | ---------------------------------------------- | -------- | ------ |
+| align  | 对齐方式，可选值为 `center` `right`            | _string_ | `left` |
+| status | 反馈状态，可选值为 `valid` `warning` `invalid` | _string_ | -      |
+
+### Form.Control Props
+
+| 参数     | 说明                                | 类型                                                        | 默认值 |
+| -------- | ----------------------------------- | ----------------------------------------------------------- | ------ |
+| align    | 对齐方式，可选值为 `center` `right` | _string_                                                    | `left` |
+| children | 内容                                | _ReactNode\|((controller: FormController<V>) => ReactNode)_ | --     |
+
+```tsx
+interface FormController<V> {
+  value?: V // 当前表单项值
+  validateStatus?: FormValidateStatus // 当前表单项验证状态
+  disabled?: boolean // 当前表单项是否禁用
+
+  onChange?(value: V): void // 改变当前表单项值
+
+  onBlur?(value: V): void // 触发onBlur当前表单项校验
+}
+```
+
+> Tips: 使用 onBlur 触发表单验证，自定义表单项时，要手动调用 onBlur，才能触发校验
+
+### Form.List
+
+| 参数         | 说明                         | 类型                                                                                 |
+| ------------ | ---------------------------- | ------------------------------------------------------------------------------------ | --- |
+| children     | 渲染函数                     | _(fields: { key: string, name: string }[], operation: { add, remove }) => ReactNode_ | \_  |
+| name         | 表单项名称，提交表单的标识符 | _string_                                                                             |
+| defaultValue | 表单项默认值                 | _any_                                                                                |
+
+### 类型定义
+
+通过`@fjyueke/bify-core/form`导入组件类型：
+
+```tsx
+import { FormRule, FormItemInstance, FormListInstance, FormInstance } from "@fjyueke/bify-core/form"
+```