@fjyueke/bify-mcp 1.0.0

package/metaData/components/radio/doc.md

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

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

@@ -0,0 +1,103 @@
+import { Cell, Image, Radio } from "@fjyueke/bify-core"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function CustomIconRadio() {
+  const [value, setValue] = useState("1")
+  return (
+    <Radio.Group value={value} onChange={setValue}>
+      <Radio
+        name="1"
+        icon={
+          <Image
+            src={`https://img.yzcdn.cn/vant/user-${value === "1" ? "active" : "inactive"}.png`}
+            style={{
+              width: "25px",
+              height: "20px",
+            }}
+          />
+        }
+      >
+        单选框 1
+      </Radio>
+      <Radio
+        name="2"
+        icon={
+          <Image
+            src={`https://img.yzcdn.cn/vant/user-${value === "2" ? "active" : "inactive"}.png`}
+            style={{
+              width: "25px",
+              height: "20px",
+            }}
+          />
+        }
+      >
+        单选框 1
+      </Radio>
+    </Radio.Group>
+  )
+}
+
+export default function RadioDemo() {
+  return (
+    <Page title="Radio 单选框" className="radio-demo">
+      <Block title="基础用法">
+        <Radio.Group defaultValue="1">
+          <Radio name="1">单选框 1</Radio>
+          <Radio name="2">单选框 2</Radio>
+        </Radio.Group>
+      </Block>
+      <Block title="水平排列">
+        <Radio.Group defaultValue="1" direction="horizontal">
+          <Radio name="1">单选框 1</Radio>
+          <Radio name="2">单选框 2</Radio>
+        </Radio.Group>
+      </Block>
+      <Block title="禁用状态">
+        <Radio.Group defaultValue="1" disabled>
+          <Radio name="1">单选框 1</Radio>
+          <Radio name="2">单选框 2</Radio>
+        </Radio.Group>
+      </Block>
+      <Block title="自定义形状">
+        <Radio.Group defaultValue="1">
+          <Radio name="1" shape="square">
+            单选框 1
+          </Radio>
+          <Radio name="2" shape="square">
+            单选框 2
+          </Radio>
+        </Radio.Group>
+      </Block>
+      <Block title="自定义颜色">
+        <Radio.Group className="custom-color" defaultValue="1">
+          <Radio name="1">单选框 1</Radio>
+          <Radio name="2">单选框 2</Radio>
+        </Radio.Group>
+      </Block>
+      <Block title="自定义大小">
+        <Radio.Group defaultValue="1" size={24}>
+          <Radio name="1">单选框 1</Radio>
+          <Radio name="2">单选框 2</Radio>
+        </Radio.Group>
+      </Block>
+      <Block title="自定义图标">
+        <CustomIconRadio />
+      </Block>
+      <Block title="与 Cell 组件一起使用" className="radio-cell-group">
+        <Radio.Group defaultValue="1">
+          <Cell.Group clickable>
+            <Cell title="单选框 1">
+              <Radio name="1" />
+            </Cell>
+            <Cell title="单选框 2">
+              <Radio name="2" />
+            </Cell>
+          </Cell.Group>
+        </Radio.Group>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/rate/api.md

@@ -0,0 +1,23 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认当前分值 | _number_ | - |
+| value | 当前分值 | _number_ | - |
+| count | 图标总数 | _number \| string_ | `5` |
+| size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
+| gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` |
+| icon | 选中时的图标 | _string_ | `<Star />` |
+| emptyIcon | 未选中时的图标 | _string_ | `<StarOutlined />` |
+| allowHalf | 是否允许半选 | _boolean_ | `false` |
+| readonly | 是否为只读状态，只读状态下无法修改评分 | _boolean_ | `false` |
+| disabled | 是否禁用评分 | _boolean_ | `false` |
+| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
+
+### Events
+
+| 事件名 | 说明                     | 回调参数 |
+| ------ | ------------------------ | -------- |
+| onChange | 当前分值变化时触发的事件 | _value :number_ |

package/metaData/components/rate/doc.md

@@ -0,0 +1,122 @@
+# Rate 评分
+
+### 介绍
+
+用于对事物进行评级操作。
+
+### 引入
+
+```tsx
+import { Rate } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `value` 来绑定当前评分值。
+
+```tsx
+<Rate value={3} />
+```
+
+### 自定义图标
+
+通过 `fullIcon` 属性设置选中时的图标，`voidIcon` 属性设置未选中时的图标。
+
+```tsx
+<Rate defaultValue={3} icon={<Like />} emptyIcon={<LikeOutlined />} />
+```
+
+### 自定义样式
+
+通过 `size` 属性设置图标大小，`css` 设置选中时的颜色，`emptyIcon` 设置未选中时的颜色。
+
+```tsx
+ <Rate className="custom-color" defaultValue={3} allowHalf size={25} emptyIcon={<Star />} />
+```
+
+```scss
+.custom-color {
+  --rate-icon-empty-color: #eee;
+  --rate-icon-full-color: #ffd21e;
+}
+```
+
+### 半星
+
+设置 `allowHalf` 属性后可以选中半星。
+
+```tsx
+<Rate defaultValue={3} allowHalf />
+```
+
+### 自定义数量
+
+通过 `count` 属性设置评分总数。
+
+```tsx
+<Rate defaultValue={3} count={6} />
+```
+
+### 禁用状态
+
+通过 `disabled` 属性来禁用评分。
+
+```tsx
+<Rate defaultValue={3} disabled />
+```
+
+### 只读状态
+
+通过 `readonly` 属性将评分设置为只读状态。
+
+```tsx
+<Rate defaultValue={3} readonly />
+```
+
+### 只读状态显示小数
+
+设置 `readonly` 和 `allowHalf` 属性后，Rate 组件可以展示任意小数结果。
+
+```tsx
+<Rate defaultValue={3.3} readonly allowHalf />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认当前分值 | _number_ | - |
+| value | 当前分值 | _number_ | - |
+| count | 图标总数 | _number \| string_ | `5` |
+| size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
+| gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` |
+| icon | 选中时的图标 | _string_ | `<Star />` |
+| emptyIcon | 未选中时的图标 | _string_ | `<StarOutlined />` |
+| allowHalf | 是否允许半选 | _boolean_ | `false` |
+| readonly | 是否为只读状态，只读状态下无法修改评分 | _boolean_ | `false` |
+| disabled | 是否禁用评分 | _boolean_ | `false` |
+| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
+
+### Events
+
+| 事件名 | 说明                     | 回调参数 |
+| ------ | ------------------------ | -------- |
+| onChange | 当前分值变化时触发的事件 | _value :number_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                       | 默认值                   | 描述  |
+|--------------------------|-----------------------|-----|
+| rate-icon-size           | _20px * $hd_          | -   |
+| rate-icon-gutter         | _var(--padding-base)_ | -   |
+| rate-icon-empty-color    | _var(--gray-5)_       | -   |
+| rate-icon-full-color     | _var(--danger-color)_ | -   |
+| rate-icon-disabled-color | _var(--gray-5)_       | -   |

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

@@ -0,0 +1,36 @@
+import { Rate } from "@fjyueke/bify-core"
+import { Like, LikeOutlined, Star } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function RateDemo() {
+  return (
+    <Page title="Rate 评分" className="rate-demo">
+      <Block title="基础用法">
+        <Rate defaultValue={3} />
+      </Block>
+      <Block title="自定义图标">
+        <Rate defaultValue={3} icon={<Like />} emptyIcon={<LikeOutlined />} />
+      </Block>
+      <Block title="自定义样式">
+        <Rate className="custom-color" defaultValue={3} allowHalf size={25} emptyIcon={<Star />} />
+      </Block>
+      <Block title="半星">
+        <Rate defaultValue={3} allowHalf />
+      </Block>
+      <Block title="自定义数量">
+        <Rate defaultValue={3} count={6} />
+      </Block>
+      <Block title="禁用状态">
+        <Rate defaultValue={3} disabled />
+      </Block>
+      <Block title="只读状态">
+        <Rate defaultValue={3} readonly />
+      </Block>
+      <Block title="只读状态显示小数">
+        <Rate defaultValue={3.3} readonly allowHalf />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/rolling-text/api.md

@@ -0,0 +1,23 @@
+## API
+
+### Props
+
+| 参数      | 说明                                          | 类型       | 默认值 |
+| :-------- | --------------------------------------------- | ---------- | ------ |
+| startNum  | 起始数值                                      | _number_   | `0`    |
+| targetNum | 目标数值                                      | _number_   | `-`    |
+| textList  | 内容数组，用于翻转非数字内                    | _string[]_ | `[]`   |
+| duration  | 动画时长，单位为秒                            | _number_   | `2`    |
+| direction | 文本翻滚方向，值为 `down` 和 `up`             | _string_   | `down` |
+| autoStart | 是否自动开始动画                              | _boolean_  | `true` |
+| stopOrder | 各个数位动画停止先后顺序，值为 `ltr` 和 `rtl` | _string_   | `ltr`  |
+| height    | 数字高度，单位为 `px`                         | _number_   | `40`   |
+
+### 方法
+
+通过 `ref` 可以获取到 RollingText 实例并调用实例方法
+
+| 方法名 | 说明     | 参数 | 返回值 |
+| :----- | -------- | ---- | ------ |
+| start  | 开始动画 | \_   | -      |
+| reset  | 重置动画 | \_   | -      |

package/metaData/components/rolling-text/doc.md

@@ -0,0 +1,153 @@
+# RollingText 翻滚文本动效
+
+### 介绍
+
+文本翻滚动效，可以翻滚数字和其他类型文本。
+
+请升级 `taroify` 到 >= `v0.1.0-alpha.6` 版本来使用该组件。
+
+### 引入
+
+```tsx
+import { RollingText } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+你可以通过 `startNum` 设置起始数值，`targetNum` 设置目标数值。RollingText 组件会自动开始动画，从起始数值翻滚到目标数值。
+
+```tsx
+<RollingText startNum={0} targetNum={123} />
+```
+
+### 设置翻滚方向
+
+你可以通过 `direction` 属性设置数字的翻滚方向，默认为向下翻滚，设置为 `up` 即可向上翻滚。
+
+```tsx
+<RollingText startNum={0} targetNum={432} direction="up" />
+```
+
+### 设置各数位停止顺序
+
+你可以通过 `stopOrder` 属性设置动画各个数位的停止先后顺序。默认先停止高位，设置为 `rtl` 可以先从个位停止。
+
+```tsx
+<RollingText startNum={0} targetNum={54321} stopOrder="rtl" />
+```
+
+### 翻转非数字内容
+
+你可以使用 `textList` 属性设置非数字内容的翻转。组件会从数组的第一项翻转到最后一项，请确保数组长度大于等于 2，以及每一项的长度一致。
+
+```javascript
+const textList = ["aaaaa", "bbbbb", "ccccc", "ddddd", "eeeee", "fffff", "ggggg"]
+```
+
+```tsx
+<RollingText textList={textList} duration={1} />
+```
+
+### 自定义样式
+
+RollingText 组件提供了一些 CSS 变量，你可以覆盖这些变量来自定义样式，也可以直接修改组件的样式。此外，你还可以通过 `height` 属性设置数字高度。
+
+```tsx
+<RollingText className="my-rolling-text" height={54} startNum={12345} targetNum={54321} />
+```
+
+```css
+.my-rolling-text {
+  --rolling-text-background: #1989fa;
+  --rolling-text-color: white;
+  --rolling-text-font-size: 48px;
+  --rolling-text-gap: 12px;
+  --rolling-text-item-border-radius: 10px;
+  --rolling-text-item-width: 80px;
+}
+```
+
+### 手动控制
+
+通过 ref 获取到组件实例后，你可以调用 `start`、`reset` 方法，`start` 方法用于开始动画，`reset` 方法用于重置动画。
+
+```tsx
+import { useRef } from "react"
+import { View } from "@tarojs/components"
+import { RollingText, Button } from "@fjyueke/bify-core"
+import type { RollingTextRef } from "@fjyueke/bify-core/rolling-text"
+
+function HandRollingText() {
+  const ref = useRef<RollingTextRef>()
+
+  const start = () => {
+    ref.current?.start()
+  }
+
+  const reset = () => {
+    ref.current?.reset()
+  }
+
+  return (
+    <View>
+      <RollingText
+        ref={ref}
+        className="my-rolling-text"
+        height={54}
+        startNum={0}
+        targetNum={54321}
+        autoStart={false}
+      />
+      <View className="rolling-text-btn">
+        <Button color="primary" onClick={start}>
+          开始
+        </Button>
+        <Button color="primary" className="rolling-text-right" onClick={reset}>
+          重置
+        </Button>
+      </View>
+    </View>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数      | 说明                                          | 类型       | 默认值 |
+| :-------- | --------------------------------------------- | ---------- | ------ |
+| startNum  | 起始数值                                      | _number_   | `0`    |
+| targetNum | 目标数值                                      | _number_   | `-`    |
+| textList  | 内容数组，用于翻转非数字内                    | _string[]_ | `[]`   |
+| duration  | 动画时长，单位为秒                            | _number_   | `2`    |
+| direction | 文本翻滚方向，值为 `down` 和 `up`             | _string_   | `down` |
+| autoStart | 是否自动开始动画                              | _boolean_  | `true` |
+| stopOrder | 各个数位动画停止先后顺序，值为 `ltr` 和 `rtl` | _string_   | `ltr`  |
+| height    | 数字高度，单位为 `px`                         | _number_   | `40`   |
+
+### 方法
+
+通过 `ref` 可以获取到 RollingText 实例并调用实例方法
+
+| 方法名 | 说明     | 参数 | 返回值 |
+| :----- | -------- | ---- | ------ |
+| start  | 开始动画 | \_   | -      |
+| reset  | 重置动画 | \_   | -      |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                              | 默认值    | 描述             |
+| --------------------------------- | --------- | ---------------- |
+| --rolling-text-background         | _inherit_ | 单个数位背景色   |
+| --rolling-text-color              | _#323233_ | 数字颜色         |
+| --rolling-text-font-size          | _28px_    | 字体大小         |
+| --rolling-text-gap                | _0px_     | 数位之间的间隔   |
+| --rolling-text-item-width         | _30px_    | 单个数位宽度     |
+| --rolling-text-item-border-radius | _0px_     | 单个数位边框圆角 |