@fjyueke/bify-mcp 1.0.0

package/metaData/components/progress/doc.md

@@ -0,0 +1,105 @@
+# Progress 进度条
+
+### 介绍
+
+用于展示操作的当前进度。
+
+### 引入
+
+```tsx
+import { Progress } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+进度条默认为蓝色，使用 `percentage` 属性来设置当前进度。
+
+```tsx
+<Progress percent={50} />
+```
+
+### 线条粗细
+
+通过 `stroke-width` 可以设置进度条的粗细。
+
+```tsx
+<Progress percent={50} strokeWidth={8} />
+```
+
+### 置灰
+
+设置 `inactive` 属性后进度条将置灰。
+
+```tsx
+<Progress percent={50} inactive />
+```
+
+### 样式定制
+
+可以使用 `pivot-text` 属性自定义文字，`color` 属性自定义进度条颜色。
+
+```tsx
+<Progress className="custom-color1" percent={25} />
+<Progress className="custom-color2" percent={50} />
+<Progress className="custom-color3" percent={75} />
+```
+
+```scss
+.custom-color1 {
+  &:not(.taroify-progress--inactive) {
+    .taroify-progress__portion {
+      background: #f2826a;
+    }
+  }
+}
+
+.custom-color2 {
+  &:not(.taroify-progress--inactive) {
+    .taroify-progress__portion {
+      background: #ee0a24;
+    }
+  }
+}
+
+.custom-color3 {
+  &:not(.taroify-progress--inactive) {
+    .taroify-progress__portion {
+      background: linear-gradient(to right, #be99ff, #7232dd) _ | - |;
+    }
+  }
+}
+```
+
+## API
+
+### Props
+
+| 参数        | 说明                       | 类型                   | 默认值    |
+| ----------- | -------------------------- | ---------------------- | --------- |
+| percent     | 进度百分比                 | _number \| string_     | `0`       |
+| strokeWidth | 进度条粗细，默认单位为`px` | _number \| string_     | `4px`     |
+| color       | 进度条颜色                 | _string_               | `primary` |
+| inactive    | 是否置灰                   | _boolean_              | `false`   |
+| label       | 进度文字                   | _boolean \| ReactNode_ | `true`    |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                        | 默认值                   | 描述 |
+| ------------------------------------------- | ------------------------ | ---- |
+| --progress-height                           | _14px \* $hd_            | -    |
+| --progress-border-radius                    | _var(--progress-height)_ | -    |
+| --progress-background-color                 | _var(--gray-3)_          | -    |
+| --progress-portion-color                    | _var(--white)_           | -    |
+| --progress-portion-font-size                | _var(--font-size-xs)_    | -    |
+| --progress-inactive-background-color        | _#cacaca_                | -    |
+| --progress-portion-primary-background-color | _var(--primary-color)_   | -    |
+| --progress-portion-info-background-color    | _var(--info-color)_      | -    |
+| --progress-portion-success-background-color | _var(--success-color)_   | -    |
+| --progress-portion-warning-background-color | _var(--warning-color)_   | -    |
+| --progress-portion-danger-background-color  | _var(--danger-color)_    | -    |

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

@@ -0,0 +1,58 @@
+import { Progress } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicProgress() {
+  return (
+    <Block title="基础用法">
+      <Progress percent={50} />
+    </Block>
+  )
+}
+
+function StripedProgress() {
+  return (
+    <Block title="条纹线条">
+      <Progress percent={50} striped />
+    </Block>
+  )
+}
+
+function AnimatedProgress() {
+  return (
+    <Block title="动画条纹">
+      <Progress percent={50} striped animated />
+    </Block>
+  )
+}
+
+function InactiveProgress() {
+  return (
+    <Block title="置灰">
+      <Progress percent={50} inactive />
+    </Block>
+  )
+}
+
+function ProgressWithCustomColors() {
+  return (
+    <Block title="样式定制">
+      <Progress className="custom-color1" percent={25} />
+      <Progress className="custom-color2" percent={50} />
+      <Progress className="custom-color3" percent={75} />
+    </Block>
+  )
+}
+
+export default function ProgressDemo() {
+  return (
+    <Page title="Progress 进度条" className="progress-demo">
+      <BasicProgress />
+      <StripedProgress />
+      <AnimatedProgress />
+      <InactiveProgress />
+      <ProgressWithCustomColors />
+    </Page>
+  )
+}

package/metaData/components/pull-refresh/api.md

@@ -0,0 +1,18 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| loading | 是否处于加载中状态 | _boolean_ | - |
+| duration | 动画时长 | _number \| string_ | `300` |
+| headHeight | 顶部内容高度 | _number \| string_ | `50` |
+| reachTop | 是否处于顶部下拉 | _boolean_ | `true` |
+| pullDistance | 触发下拉刷新的距离 | _number \| string_ | 与 `headHeight` 一致 |
+| disabled | 是否禁用下拉刷新 | _boolean_ | `false` |
+
+### Events
+
+| 事件名  | 说明           | 回调参数 |
+| ------- | -------------- | -------- |
+| onRefresh | 下拉刷新时触发 | -        |

package/metaData/components/pull-refresh/doc.md

@@ -0,0 +1,198 @@
+# PullRefresh 下拉刷新
+
+### 介绍
+
+用于提供下拉刷新的交互操作。
+
+### 引入
+
+```tsx
+import { PullRefresh } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+下拉刷新时会触发 `onRefresh` 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 `loading` 设置为 `false`，表示加载完成。
+
+```tsx
+function BasicPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <PullRefresh
+      loading={loading}
+      reachTop={reachTop}
+      onRefresh={() => {
+        setLoading(true)
+        setTimeout(() => {
+          setCounter(counter + 1)
+          setLoading(false)
+        }, 1000)
+      }}
+    >
+      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+    </PullRefresh>
+  )
+}
+```
+
+> Tips：在 PullRefresh 组件内部采用 Selector API 获得父滚动元素的 scrollTop 值会带来下拉卡顿的性能问题。因此需要在 PullRefresh 组件外部判断 scrollTop 值，在页面中使用 usePageScroll() 钩子获得 scrollTop 值，在 ScrollView 组件内监听 onScroll 事件获得 scrollTop 值。
+
+### 完成提示
+
+通过 `PullRefresh.Completed` 可以设置刷新成功后的顶部提示文案。
+
+```tsx
+function CompletedPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <PullRefresh
+      loading={loading}
+      reachTop={reachTop}
+      onRefresh={() => {
+        setLoading(true)
+        setTimeout(() => {
+          setLoading(false)
+          setCounter(counter + 1)
+        }, 1000)
+      }}
+    >
+      <PullRefresh.Completed>刷新成功</PullRefresh.Completed>
+      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+    </PullRefresh>
+  )
+}
+```
+
+### 自定义提示
+
+通过子组件可以自定义下拉刷新过程中的提示内容。
+
+```tsx
+function CustomPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <PullRefresh
+      loading={loading}
+      headHeight={80}
+      reachTop={reachTop}
+      onRefresh={() => {
+        setLoading(true)
+        setTimeout(() => {
+          setCounter(counter + 1)
+          setLoading(false)
+        }, 1000)
+      }}
+    >
+      <PullRefresh.Pulling>
+        {({ distance = 0 }) => (
+          <Image
+            className="doge"
+            style={{ transform: `scale(${distance / 80})` }}
+            src="https://img.yzcdn.cn/vant/doge.png"
+          />
+        )}
+      </PullRefresh.Pulling>
+      <PullRefresh.Loosing>
+        <Image className="doge" src="https://img.yzcdn.cn/vant/doge.png" />
+      </PullRefresh.Loosing>
+      <PullRefresh.Loading>
+        <Image className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
+      </PullRefresh.Loading>
+      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+    </PullRefresh>
+  )
+}
+```
+
+```scss
+.doge {
+  width: 140px * 2;
+  height: 72px * 2;
+  margin-top: 8px * 2;
+  border-radius: 4px * 2;
+}
+```
+
+### 搭配 ScrollView
+
+可搭配 ScrollView 组件
+
+```tsx
+function BasicPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <ScrollView scrollY>
+      <PullRefresh
+        loading={loading}
+        reachTop={reachTop}
+        onRefresh={() => {
+          setLoading(true)
+          setTimeout(() => {
+            setCounter(counter + 1)
+            setLoading(false)
+          }, 1000)
+        }}
+      >
+        <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+      </PullRefresh>
+    </ScrollView>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| loading | 是否处于加载中状态 | _boolean_ | - |
+| duration | 动画时长 | _number \| string_ | `300` |
+| headHeight | 顶部内容高度 | _number \| string_ | `50` |
+| reachTop | 是否处于顶部下拉 | _boolean_ | `true` |
+| pullDistance | 触发下拉刷新的距离 | _number \| string_ | 与 `headHeight` 一致 |
+| disabled | 是否禁用下拉刷新 | _boolean_ | `false` |
+
+### Events
+
+| 事件名  | 说明           | 回调参数 |
+| ------- | -------------- | -------- |
+| onRefresh | 下拉刷新时触发 | -        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                 | 默认值                                     | 描述  |
+|------------------------------------|-----------------------------------------|-----|
+| --pull-refresh-head-height         | _50px * $hd_                            | -   |
+| --pull-refresh-head-line-height    | _var(--pull-refresh-head-height)_       | -   |
+| --pull-refresh-head-font-size      | _var(--font-size-md)_                   | -   |
+| --pull-refresh-head-color          | _var(--gray-6)_                         | -   |
+| --pull-refresh-loading-icon-size   | _16px * $hd_                            | -   |
+| --pull-refresh-loading-icon-width  | _var(--pull-refresh-loading-icon-size)_ | -   |
+| --pull-refresh-loading-icon-height | _var(--pull-refresh-loading-icon-size)_ | -   |

package/metaData/components/pull-refresh/example/index.tsx

@@ -0,0 +1,153 @@
+import { Image, PullRefresh, Tabs } from "@fjyueke/bify-core"
+import { ScrollView, View } from "@tarojs/components"
+import { usePageScroll } from "@tarojs/taro"
+import { useState } from "react"
+import CustomWrapper from "../../../components/custom-wrapper"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <PullRefresh
+      loading={loading}
+      reachTop={reachTop}
+      onRefresh={() => {
+        setLoading(true)
+        setTimeout(() => {
+          setCounter(counter + 1)
+          setLoading(false)
+        }, 1000)
+      }}
+    >
+      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+    </PullRefresh>
+  )
+}
+
+function CompletedPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <PullRefresh
+      loading={loading}
+      reachTop={reachTop}
+      onRefresh={() => {
+        setLoading(true)
+        setTimeout(() => {
+          setLoading(false)
+          setCounter(counter + 1)
+        }, 1000)
+      }}
+    >
+      <PullRefresh.Completed>刷新成功</PullRefresh.Completed>
+      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+    </PullRefresh>
+  )
+}
+
+function CustomPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <PullRefresh
+      loading={loading}
+      headHeight={80}
+      reachTop={reachTop}
+      onRefresh={() => {
+        setLoading(true)
+        setTimeout(() => {
+          setCounter(counter + 1)
+          setLoading(false)
+        }, 1000)
+      }}
+    >
+      <PullRefresh.Pulling>
+        {({ distance = 0 }) => (
+          <Image
+            className="doge"
+            style={{ transform: `scale(${distance / 80})` }}
+            src="https://img.yzcdn.cn/vant/doge.png"
+          />
+        )}
+      </PullRefresh.Pulling>
+      <PullRefresh.Loosing>
+        <Image className="doge" src="https://img.yzcdn.cn/vant/doge.png" />
+      </PullRefresh.Loosing>
+      <PullRefresh.Loading>
+        <Image className="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
+      </PullRefresh.Loading>
+      <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+    </PullRefresh>
+  )
+}
+
+
+function ScrollViewPullRefresh() {
+  const [loading, setLoading] = useState(false)
+  const [counter, setCounter] = useState(0)
+  const [reachTop, setReachTop] = useState(true)
+
+  usePageScroll(({ scrollTop }) => setReachTop(scrollTop === 0))
+
+  return (
+    <ScrollView scrollY>
+      <PullRefresh
+        loading={loading}
+        reachTop={reachTop}
+        onRefresh={() => {
+          setLoading(true)
+          setTimeout(() => {
+            setCounter(counter + 1)
+            setLoading(false)
+          }, 1000)
+        }}
+      >
+        <View className="pull-text">{counter ? "刷新次数：" + counter : "下拉试试"}</View>
+      </PullRefresh>
+    </ScrollView>
+  )
+}
+
+export default function PullRefreshDemo() {
+  const [tab, setTab] = useState(0)
+  return (
+    <Page title="PullRefresh 下拉刷新" className="pull-refresh-demo">
+      <Tabs value={tab} onChange={setTab}>
+        <Tabs.TabPane title="基本用法">
+          <CustomWrapper>
+            <BasicPullRefresh />
+          </CustomWrapper>
+        </Tabs.TabPane>
+        <Tabs.TabPane title="完成提示">
+          <CustomWrapper>
+            <CompletedPullRefresh />
+          </CustomWrapper>
+        </Tabs.TabPane>
+        <Tabs.TabPane title="自定义提示">
+          <CustomWrapper>
+            <CustomPullRefresh />
+          </CustomWrapper>
+        </Tabs.TabPane>
+        <Tabs.TabPane title="ScrollView">
+          <CustomWrapper>
+            <ScrollViewPullRefresh />
+          </CustomWrapper>
+        </Tabs.TabPane>
+      </Tabs>
+    </Page>
+  )
+}

package/metaData/components/radio/api.md

@@ -0,0 +1,26 @@
+## 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_ |