@fjyueke/bify-mcp 1.0.0

package/metaData/components/cell/doc.md

@@ -0,0 +1,158 @@
+# Cell 单元格
+
+### 介绍
+
+单元格为列表中的单个展示项。
+
+### 引入
+
+```tsx
+import { Cell } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+`Cell` 可以单独使用，也可以与 `Cell.Group` 搭配使用，`Cell.Group` 可以为 `Cell` 提供上下外边框。
+
+```tsx
+<Cell title="单元格">内容</Cell>
+<Cell title="单元格" brief="描述信息">内容</Cell>
+```
+
+### 单元格大小
+
+通过 `size` 属性可以控制单元格的大小。
+
+```tsx
+<Cell title="单元格">内容</Cell>
+<Cell title="单元格" brief="描述信息" size="large">内容</Cell>
+```
+
+### 展示图标
+
+通过 `icon` 属性在标题左侧展示图标。
+
+```tsx
+<Cell icon={<LocationOutlined />} title="单元格">
+  内容
+</Cell>
+```
+
+### 只设置 value
+
+只设置 `value` 时，内容会靠左对齐。
+
+```tsx
+<Cell>内容</Cell>
+```
+
+### 展示箭头
+
+通过 `rightIcon` 属性在标题右侧展示箭头，并且可以通过不同图标控制箭头方向。
+
+```tsx
+<Cell title="单元格" isLink  />
+<Cell title="单元格" isLink children="内容" />
+<Cell title="单元格" isLink arrowDirection="down" children="内容" />
+```
+
+### 分组标题
+
+通过 `Cell.Group` 的 `title` 属性可以指定分组标题。
+
+```tsx
+<Cell.Group title="分组 1">
+  <Cell title="单元格">内容</Cell>
+</Cell.Group>
+<Cell.Group title="分组 2">
+  <Cell title="单元格">内容</Cell>
+</Cell.Group>
+```
+
+### 对齐方式
+
+通过 `align` 属性可以改变 `Cell` 的左右内容的对齐方式。
+
+```tsx
+<Cell title="单元格" brief="align start" size="large" align="start">内容</Cell>
+<Cell title="单元格" brief="align center" size="large" align="center">内容</Cell>
+<Cell title="单元格" brief="align end" size="large" align="end">内容</Cell>
+```
+
+## API
+
+### Cell.Group Props
+
+| 参数      | 说明                   | 类型      | 默认值  |
+| --------- | ---------------------- | --------- | ------- |
+| title     | 分组标题               | _string_  | `-`     |
+| inset     | 是否展示为圆角卡片风格 | _boolean_ | `false` |
+| bordered  | 是否显示外边框         | _boolean_ | `true`  |
+| clickable | 是否开启点击反馈       | _boolean_ | `false` |
+
+### Cell Props
+
+| 参数                                | 说明                                                    | 类型               | 默认值  |
+| ----------------------------------- | ------------------------------------------------------- | ------------------ | ------- |
+| title                               | 左侧标题                                                | _number \| string_ | -       |
+| children                            | 右侧内容                                                | _number \| string_ | -       |
+| brief                               | 标题下方的描述信息                                      | _string_           | -       |
+| size                                | 单元格大小，可选值为 `large`                            | _string_           | -       |
+| icon                                | 左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_        | -       |
+| rightIcon                           | 右侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_        | -       |
+| bordered                            | 是否显示内边框                                          | _boolean_          | `true`  |
+| clickable                           | 是否开启点击反馈                                        | _boolean_          | `false` |
+| isLink `v0.1.1-alpha.5`         | 是否展示右侧箭头并开启点击反馈                          | _boolean_          | `false` |
+| arrowDirection `v0.1.1-alpha.5` | 箭头方向，可选值为 `left` `right` `up` `down`           | _string_           | `right` |
+| required                            | 是否显示表单必填星号                                    | _boolean_          | `false` |
+| align                               | 对齐方式，可选值为 `start` `center` `end`               | _string_           | -       |
+| titleStyle `v0.8.0`                 | 左侧标题额外样式               | _CSSProperties_           | -       |
+| titleClass `v0.8.0`                 | 左侧标题额外类名               | _string_           | -       |
+| valueClass `v0.8.0`                 | 右侧内容额外类名               | _string_           | -       |
+| briefClass  `v0.8.0`                | 标题下方的描述信息额外类名               | _string_           | -       |
+
+### Cell Events
+
+| 事件名  | 说明             | 回调参数            |
+| ------- | ---------------- | ------------------- |
+| onClick | 点击单元格时触发 | _event: MouseEvent_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                             | 默认值                                                                    | 描述 |
+| -------------------------------- | ------------------------------------------------------------------------- | ---- |
+| --cell-font-size                 | _var(--font-size-md)_                                                     | -    |
+| --cell-line-height               | _24px \* $hd_                                                             | -    |
+| --cell-color                     | _var(--text-color)_                                                       | -    |
+| --cell-background-color          | _var(--white)_                                                            | -    |
+| --cell-border-color              | _var(--border-color)_                                                     | -    |
+| --cell-value-color               | _var(--gray-6)_                                                           | -    |
+| --cell-active-color              | _var(--active-color)_                                                     | -    |
+| --cell-required-color            | _var(--danger-color)_                                                     | -    |
+| --cell-required-padding-right    | _2px \* $hd_                                                              | -    |
+| --cell-icon-size                 | _16px \* $hd_                                                             | -    |
+| --cell-icon-margin-left          | _4px \* $hd_                                                              | -    |
+| --cell-right-icon-margin-right   | _4px \* $hd_                                                              | -    |
+| --cell-brief-margin-top          | _var(--padding-base)_                                                     | -    |
+| --cell-brief-font-size           | _var(--font-size-sm)_                                                     | -    |
+| --cell-brief-line-height         | _var(--line-height-sm)_                                                   | -    |
+| --cell-brief-color               | _var(--gray-6)_                                                           | -    |
+| --cell-vertical-padding          | _10px \* $hd_                                                             | -    |
+| --cell-horizontal-padding        | _var(--padding-md)_                                                       | -    |
+| --cell-vertical-padding-large    | _var(--padding-sm)_                                                       | -    |
+| --cell-title-font-size-large     | _var(--font-size-lg)_                                                     | -    |
+| --cell-subtitle-font-size-large  | _var(--font-size-md)_                                                     | -    |
+| --cell-group-background-color    | _var(--white)_                                                            | -    |
+| --cell-group-title-color         | _var(--gray-6)_                                                           | -    |
+| --cell-group-title-padding       | _var(--padding-md) var(--padding-md) var(--padding-xs)_                   | -    |
+| --cell-group-title-font-size     | _var(--font-size-md)_                                                     | -    |
+| --cell-group-title-line-height   | _16px \* $hd_                                                             | -    |
+| --cell-group-inset-padding       | _0 var(--padding-md)_                                                     | -    |
+| --cell-group-inset-border-radius | _var(--border-radius-lg)_                                                 | -    |
+| --cell-group-inset-title-padding | _var(--padding-md) var(--padding-md) var(--padding-xs) var(--padding-xl)_ | -    |

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

@@ -0,0 +1,44 @@
+import { Cell } from "@fjyueke/bify-core"
+import { ArrowDown, ArrowRight, LocationOutlined } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function CellDemo() {
+  return (
+    <Page title="Cell 单元格" className="cell-demo">
+      <Block title="基础用法">
+        <Cell title="单元格">内容</Cell>
+        <Cell title="单元格" brief="描述信息" children="内容" />
+      </Block>
+      <Block title="单元格大小">
+        <Cell title="单元格">内容</Cell>
+        <Cell title="单元格" brief="描述信息" size="large" children="内容" />
+      </Block>
+      <Block title="展示图标">
+        <Cell icon={<LocationOutlined />} title="单元格" children="内容" />
+      </Block>
+      <Block title="只设置 value">
+        <Cell>内容</Cell>
+      </Block>
+      <Block title="展示箭头">
+        <Cell title="单元格" isLink  />
+        <Cell title="单元格" isLink children="内容" />
+        <Cell title="单元格" isLink arrowDirection="down" children="内容" />
+      </Block>
+      <Block title="分组标题">
+        <Cell.Group title="分组 1">
+          <Cell title="单元格">内容</Cell>
+        </Cell.Group>
+        <Cell.Group title="分组 2">
+          <Cell title="单元格">内容</Cell>
+        </Cell.Group>
+      </Block>
+      <Block title="对齐方式">
+        <Cell title="单元格" brief="align start" size="large" align="start" children="内容" />
+        <Cell title="单元格" brief="align center" size="large" align="center" children="内容" />
+        <Cell title="单元格" brief="align end" size="large" align="end" children="内容" />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/checkbox/api.md

@@ -0,0 +1,35 @@
+## API
+
+### Checkbox Props
+
+| 参数           | 说明                      | 类型               | 默认值    |
+| -------------- | ------------------------- | ------------------ | --------- |
+| defaultChecked | 默认是否为选中状态            | _boolean_          | `false`   |
+| checked        | 是否为选中状态            | _boolean_          | `false`   |
+| name           | 标识符                    | _any_              | -         |
+| shape          | 形状，可选值为 `square`   | _string_           | `round`   |
+| disabled       | 是否禁用复选框            | _boolean_          | `false`   |
+| size      | 图标大小，默认单位为 `px` | _number \| string_ | `20px`    |
+
+### CheckboxGroup Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认所有选中项的标识符 | _any[]_  | -   |
+| value | 所有选中项的标识符 | _any[]_ | - |
+| disabled | 是否禁用所有复选框 | _boolean_ | `false` |
+| max | 最大可选数，`0` 为无限制 | _number \| string_ | `0` |
+| direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
+| size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` |
+
+### Checkbox Events
+
+| 事件名 | 说明                     | 回调参数            |
+| ------ | ------------------------ | ------------------- |
+| onChange | 当绑定值变化时触发的事件 | _checked: boolean_  |
+
+### CheckboxGroup Events
+
+| 事件名 | 说明                     | 回调参数       |
+| ------ | ------------------------ | -------------- |
+| onChange | 当绑定值变化时触发的事件 | _names: any[]_ |

package/metaData/components/checkbox/doc.md

@@ -0,0 +1,203 @@
+# Checkbox 复选框
+
+### 介绍
+
+在一组备选项中进行多选。
+
+### 引入
+
+```tsx
+import { Checkbox } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `checked` 绑定复选框的勾选状态。
+
+```tsx
+<Checkbox>复选框</Checkbox>
+```
+
+### 禁用状态
+
+通过设置 `disabled` 属性可以禁用复选框。
+
+```tsx
+<Checkbox disabled checked={false}>复选框</Checkbox>
+<Checkbox disabled checked>复选框</Checkbox>
+```
+
+### 自定义形状
+
+将 `shape` 属性设置为 `square`，复选框的形状会变成方形。
+
+```tsx
+<Checkbox shape="square">自定义形状</Checkbox>
+```
+
+### 自定义颜色
+
+通过 `css` 设置选中状态的图标颜色。
+
+```tsx
+<Checkbox className="custom-color">
+  自定义颜色
+</Checkbox>
+```
+
+```scss
+.custom-color {
+  --checkbox-checked-icon-border-color: #ee0a24;
+  --checkbox-checked-icon-background-color: #ee0a24;
+}
+```
+
+### 自定义大小
+
+通过 `size` 属性可以自定义图标的大小。
+
+```tsx
+<Checkbox size={24}>自定义大小</Checkbox>
+```
+
+### 自定义图标
+
+通过 `icon` 属性自定义图标。
+
+```tsx
+function CheckboxWithCustomIcon() {
+  const [value, setValue] = useState(false)
+
+  return (
+    <Checkbox
+      icon={
+        <Image
+          src={`https://img.yzcdn.cn/vant/user-${value ? "active" : "inactive"}.png`}
+          style={{
+            width: "25px",
+            height: "20px",
+          }}
+        />
+      }
+      checked={value}
+      onChange={setValue}
+    >
+      自定义图标
+    </Checkbox>
+  )
+}
+```
+
+### 复选框组
+
+复选框可以与复选框组一起使用，复选框组通过 `value` 数组绑定复选框的勾选状态。
+
+```tsx
+<Checkbox.Group>
+  <Checkbox name="a">复选框 a</Checkbox>
+  <Checkbox name="b">复选框 b</Checkbox>
+</Checkbox.Group>
+```
+
+### 水平排列
+
+将 `direction` 属性设置为 `horizontal` 后，复选框组会变成水平排列。
+
+```tsx
+<Checkbox.Group direction="horizontal">
+  <Checkbox name="a">复选框 a</Checkbox>
+  <Checkbox name="b">复选框 b</Checkbox>
+</Checkbox.Group>
+```
+
+### 限制最大可选数
+
+通过 `max` 属性可以限制复选框组的最大可选数。
+
+```tsx
+<Checkbox.Group max={2}>
+  <Checkbox name="a">复选框 a</Checkbox>
+  <Checkbox name="b">复选框 b</Checkbox>
+  <Checkbox name="c">复选框 c</Checkbox>
+</Checkbox.Group>
+```
+
+### 搭配单元格组件使用
+
+此时你需要再引入 `Cell` 和 `Cell.Group` 组件，并通过 `Checkbox` 实例上的 toggle 方法触发切换。
+
+```tsx
+<Checkbox.Group max={2}>
+  <Cell.Group clickable>
+    <Cell title="复选框 a">
+      <Checkbox name="a" />
+    </Cell>
+    <Cell title="复选框 b">
+      <Checkbox name="b" />
+    </Cell>
+  </Cell.Group>
+</Checkbox.Group>
+```
+
+## API
+
+### Checkbox Props
+
+| 参数           | 说明                      | 类型               | 默认值    |
+| -------------- | ------------------------- | ------------------ | --------- |
+| defaultChecked | 默认是否为选中状态            | _boolean_          | `false`   |
+| checked        | 是否为选中状态            | _boolean_          | `false`   |
+| name           | 标识符                    | _any_              | -         |
+| shape          | 形状，可选值为 `square`   | _string_           | `round`   |
+| disabled       | 是否禁用复选框            | _boolean_          | `false`   |
+| size      | 图标大小，默认单位为 `px` | _number \| string_ | `20px`    |
+
+### CheckboxGroup Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认所有选中项的标识符 | _any[]_  | -   |
+| value | 所有选中项的标识符 | _any[]_ | - |
+| disabled | 是否禁用所有复选框 | _boolean_ | `false` |
+| max | 最大可选数，`0` 为无限制 | _number \| string_ | `0` |
+| direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
+| size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` |
+
+### Checkbox Events
+
+| 事件名 | 说明                     | 回调参数            |
+| ------ | ------------------------ | ------------------- |
+| onChange | 当绑定值变化时触发的事件 | _checked: boolean_  |
+
+### CheckboxGroup Events
+
+| 事件名 | 说明                     | 回调参数       |
+| ------ | ------------------------ | -------------- |
+| onChange | 当绑定值变化时触发的事件 | _names: any[]_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                        | 默认值                              | 描述  |
+|-------------------------------------------|----------------------------------|-----|
+| --checkbox-size                           | _20px * $hd_                     | -   |
+| --checkbox-font-size                      | _var(--font-size-lg)_            | -   |
+| --checkbox-border-color                   | _var(--gray-5)_                  | -   |
+| --checkbox-transition-duration            | _var(--animation-duration-fast)_ | -   |
+| --checkbox-gap                            | _var(--padding-sm)_              | -   |
+| --checkbox-label-margin                   | _var(--padding-xs)_              | -   |
+| --checkbox-label-color                    | _var(--text-color)_              | -   |
+| --checkbox-label-line-height              | _var(--checkbox-size)_           | -   |
+| --checkbox-disabled-label-color           | _var(--gray-5)_                  | -   |
+| --checkbox-icon-font-size                 | _var(--checkbox-size)_           | -   |
+| --checkbox-checked-icon-color             | _var(--white)_                   | -   |
+| --checkbox-checked-icon-border-color      | _var(--primary-color)_           | -   |
+| --checkbox-checked-icon-background-color  | _var(--primary-color)_           | -   |
+| --checkbox-disabled-icon-color            | _var(--gray-5)_                  | -   |
+| --checkbox-disabled-icon-border-color     | _var(--gray-5)_                  | -   |
+| --checkbox-disabled-icon-background-color | _var(--border-color)_            | -   |

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

@@ -0,0 +1,94 @@
+import { Cell, Checkbox, Image, Space } from "@fjyueke/bify-core"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function CheckboxWithCustomIcon() {
+  const [value, setValue] = useState(false)
+
+  return (
+    <Checkbox
+      icon={
+        <Image
+          src={`https://img.yzcdn.cn/vant/user-${value ? "active" : "inactive"}.png`}
+          style={{
+            width: "25px",
+            height: "20px",
+          }}
+        />
+      }
+      checked={value}
+      onChange={setValue}
+    >
+      自定义图标
+    </Checkbox>
+  )
+}
+
+export default function CheckboxDemo() {
+  return (
+    <Page title="Checkbox 复选框" className="checkbox-demo">
+      <Block title="基础用法">
+        <Checkbox defaultChecked>复选框</Checkbox>
+      </Block>
+      <Block title="禁用状态">
+        <Space direction="vertical">
+          <Checkbox disabled checked={false}>
+            复选框
+          </Checkbox>
+          <Checkbox disabled checked>
+            复选框
+          </Checkbox>
+        </Space>
+      </Block>
+      <Block title="自定义形状">
+        <Checkbox shape="square">自定义形状</Checkbox>
+      </Block>
+      <Block title="自定义颜色">
+        <Checkbox className="custom-color">自定义颜色</Checkbox>
+      </Block>
+      <Block title="自定义大小">
+        <Checkbox size={24}>自定义大小</Checkbox>
+      </Block>
+      <Block title="自定义图标">
+        <CheckboxWithCustomIcon />
+      </Block>
+      <Block title="复选框组">
+        <Checkbox.Group>
+          <Checkbox name="a">复选框 a</Checkbox>
+          <Checkbox name="b">复选框 b</Checkbox>
+        </Checkbox.Group>
+      </Block>
+      <Block title="水平排列">
+        <Checkbox.Group direction="horizontal">
+          <Checkbox name="a">复选框 a</Checkbox>
+          <Checkbox name="b">复选框 b</Checkbox>
+        </Checkbox.Group>
+      </Block>
+      <Block title="限制最大可选数">
+        <Checkbox.Group max={4}>
+          <Checkbox name="a">复选框 a</Checkbox>
+          <Checkbox name="b">复选框 b</Checkbox>
+          <Checkbox name="c">复选框 c</Checkbox>
+          <Checkbox name="d">复选框 d</Checkbox>
+          <Checkbox name="e">复选框 e</Checkbox>
+          <Checkbox name="f">复选框 f</Checkbox>
+          <Checkbox name="g">复选框 g</Checkbox>
+        </Checkbox.Group>
+      </Block>
+      <Block title="搭配单元格组件使用" className="checkbox-cell-group">
+        <Checkbox.Group max={2}>
+          <Cell.Group clickable>
+            <Cell title="复选框 a">
+              <Checkbox name="a" />
+            </Cell>
+            <Cell title="复选框 b">
+              <Checkbox name="b" />
+            </Cell>
+          </Cell.Group>
+        </Checkbox.Group>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/circle/api.md

@@ -0,0 +1,17 @@
+## API
+
+### Props
+
+| 参数                               | 说明                                                 | 类型               | 默认值    |
+| ---------------------------------- | ---------------------------------------------------- | ------------------ | --------- |
+| percent                            | 当前进度                                             | _number_           | -         |
+| size                               | 圆环直径，默认单位为 `px`                            | _string_           | `100px`   |
+| color                              | 进度条颜色，传入对象格式可以定义渐变色               | _string \| object_ | `#1989fa` |
+| layerColor                         | 轨道颜色                                             | _string_           | `white`   |
+| fill                               | 填充颜色                                             | _string_           | `none`    |
+| speed                              | 动画速度（单位为 rate/s）                            | _number_           | `0`       |
+| strokeWidth                        | 进度条宽度                                           | _number_           | `40`      |
+| strokeLinecap                      | 进度条端点的形状，可选值为 `sqaure` `butt` `round`   | _string_           | `round`   |
+| clockwise                          | 是否顺时针增加                                       | _boolean_          | `true`    |
+| startPosition <br>`v0.4.0-alpha.0` | 进度起始位置，可选值为 `left` `right` `top` `bottom` | _string_           | `top`     |
+| children                           | 文字                                                 | _ReactNode_        | -         |

package/metaData/components/circle/doc.md

@@ -0,0 +1,123 @@
+# Circle 环形进度条
+
+### 介绍
+
+圆环形的进度条组件，支持进度渐变动画。
+
+### 引入
+
+```tsx
+import { Circle } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+`percent` 属性表示进度条的进度，监听 `onChange` 事件可以获得动画过程中的实时进度。
+
+```tsx
+function BasicCircle({ percent }: PercentProps) {
+  const [currentPercent, setCurrentPercent] = useState(70)
+
+  return (
+    <Circle percent={currentPercent} onChange={setCurrentPercent}>
+      {currentPercent.toFixed(0)}%
+    </Circle>
+  )
+}
+```
+
+### 宽度定制
+
+通过 `strokeWidth` 属性来控制进度条宽度。
+
+```tsx
+<Circle percent={70} strokeWidth={60}>
+  宽度定制
+</Circle>
+```
+
+### 颜色定制
+
+通过 `color` 属性来控制进度条颜色，`layerColor` 属性来控制轨道颜色。
+
+```tsx
+<Circle percent={70} color="#ee0a24" layerColor="#ebedf0">
+  颜色定制
+</Circle>
+```
+
+### 渐变色
+
+`color` 属性支持传入对象格式来定义渐变色。
+
+```tsx
+<Circle
+  percent={70}
+  color={{
+    "0%": "#3fecff",
+    "100%": "#6149f6",
+  }}
+>
+  渐变色
+</Circle>
+```
+
+### 逆时针方向
+
+将 `clockwise` 设置为 `false`，进度会从逆时针方向开始。
+
+```tsx
+<Circle percent={70} clockwise={false} color="#07c160">
+  逆时针方向
+</Circle>
+```
+
+### 大小定制
+
+通过 `size` 属性设置圆环直径。
+
+```tsx
+<Circle percent={70} size={120} color="#7232dd">
+  大小定制
+</Circle>
+```
+
+## API
+
+### Props
+
+| 参数                               | 说明                                                 | 类型               | 默认值    |
+| ---------------------------------- | ---------------------------------------------------- | ------------------ | --------- |
+| percent                            | 当前进度                                             | _number_           | -         |
+| size                               | 圆环直径，默认单位为 `px`                            | _string_           | `100px`   |
+| color                              | 进度条颜色，传入对象格式可以定义渐变色               | _string \| object_ | `#1989fa` |
+| layerColor                         | 轨道颜色                                             | _string_           | `white`   |
+| fill                               | 填充颜色                                             | _string_           | `none`    |
+| speed                              | 动画速度（单位为 rate/s）                            | _number_           | `0`       |
+| strokeWidth                        | 进度条宽度                                           | _number_           | `40`      |
+| strokeLinecap                      | 进度条端点的形状，可选值为 `sqaure` `butt` `round`   | _string_           | `round`   |
+| clockwise                          | 是否顺时针增加                                       | _boolean_          | `true`    |
+| startPosition <br>`v0.4.0-alpha.0` | 进度起始位置，可选值为 `left` `right` `top` `bottom` | _string_           | `top`     |
+| children                           | 文字                                                 | _ReactNode_        | -         |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                      | 默认值                    | 描述 |
+| ------------------------- | ------------------------- | ---- |
+| --circle-size             | _100px \* $hd_            | -    |
+| --circle-width            | _var(--circle-size)_      | -    |
+| --circle-height           | _var(--circle-size)_      | -    |
+| --circle-color            | _var(--primary-color)_    | -    |
+| --circle-hover-stroke     | _var(--circle-color)_     | -    |
+| --circle-layer-stroke     | _var(--white)_            | -    |
+| --circle-text-padding     | _0 var(--padding-base)_   | -    |
+| --circle-text-color       | _var(--text-color)_       | -    |
+| --circle-text-font-weight | _var(--font-weight-bold)_ | -    |
+| --circle-text-font-size   | _var(--font-size-md)_     | -    |
+| --circle-text-line-height | _var(--line-height-md)_   | -    |