@fjyueke/bify-mcp 1.0.0

package/metaData/components/signature/doc.md

@@ -0,0 +1,115 @@
+# Signature 签名
+
+### 介绍
+
+用于签名场景的组件，基于 Canvas 实现。
+
+请升级 `taroify` 到 >= `v0.1.1-alpha.2` 版本来使用该组件。
+
+### 引入
+
+```ts
+import { Signature } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+Canvas 实例提供两个方法
+
+- `getImage`
+  - `image`：签名对应的图片，为 base64 字符串格式。若签名为空，则返回空字符串。
+  - `canvas`：Canvas 元素。
+- `clear`：清空
+
+```tsx
+import { Signature, SignatureInstance, Flex, Button } from "@fjyueke/bify-core"
+
+function BasicSignature() {
+  const ref = useRef<SignatureInstance>(null)
+  return (
+    <>
+      <Signature ref={ref} />
+      <Flex justify="end">
+        <Button
+          size="small"
+          onClick={() => {
+            ref.current?.clear()
+          }}
+          style={{ marginRight: "1rem" }}
+        >
+          取消
+        </Button>
+        <Button
+          size="small"
+          color="primary"
+          onClick={() => {
+            console.log(ref.current?.getImage())
+          }}
+        >
+          确认
+        </Button>
+      </Flex>
+    </>
+  )
+}
+```
+
+### 自定义颜色
+
+通过 `penColor` 来自定义笔触颜色。
+
+```tsx
+<Signature penColor="#ff0000" />
+```
+
+### 自定义线宽
+
+通过 `lineWidth` 来自定义线条宽度。
+
+```tsx
+<Signature lineWidth={6} />
+```
+
+### 自定义背景颜色
+
+通过 `backgroundColor` 来自定义背景颜色。
+
+```tsx
+<Signature backgroundColor="#eee" />
+```
+
+## API
+
+### Signature Props
+
+| 参数            | 说明               | 类型     | 默认值           |
+| --------------- | ------------------ | -------- | ---------------- |
+| type            | 导出图片类型       | _string_ | `png`            |
+| penColor        | 笔触颜色，默认黑色 | _string_ | `#000`           |
+| lineWidth       | 线条宽度           | _number_ | `3`              |
+| backgroundColor | 背景颜色           | _string_ | -                |
+| canvasId        | canvas id          | _string_ | `taroify-canvas` |
+
+### Signature Events
+
+| 事件名    | 说明           | 回调参数 |
+| --------- | -------------- | -------- |
+| onStart   | 开始签名时触发 | -        |
+| onEnd     | 结束签名时触发 | -        |
+| onSigning | 签名过程中触发 | -        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                           | 默认值                      | 描述         |
+| ------------------------------ | --------------------------- | ------------ |
+| --signature-padding            | _var(--van-padding-xs)_     | -            |
+| --signature-content-height     | _200px_                     | 画布高度     |
+| --signature-content-background | _var(--background-color-2)_ | 画布背景色   |
+| --signature-content-border     | _1px dotted #dadada_        | 画布边框样式 |
+| --signature-border-radius      | _8px_                       | 画布圆角     |

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

@@ -0,0 +1,56 @@
+import { useRef } from "react"
+import { Signature, SignatureInstance, Flex, Button } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+
+function BasicSignature() {
+  const ref = useRef<SignatureInstance>(null)
+  return <>
+    <Signature ref={ref} />
+    <Flex justify="end">
+      <Button size="small" onClick={() => { ref.current?.clear() }} style={{ marginRight: "1rem" }}>取消</Button>
+      <Button size="small" color="primary" onClick={() => { console.log(ref.current?.getImage()) }}>确认</Button>
+    </Flex>
+  </>
+}
+
+function PenColorSignature() {
+  return <Signature penColor="#ff0000" />
+}
+
+function LineWidthSignature() {
+  return <Signature lineWidth={6} />
+}
+
+function BackgroundColorSignature() {
+  const ref = useRef<SignatureInstance>(null)
+  return <>
+    <Signature ref={ref} backgroundColor="#eee"  />
+    <Flex justify="end">
+      <Button size="small" onClick={() => { ref.current?.clear() }} style={{ marginRight: "1rem" }}>取消</Button>
+      <Button size="small" color="primary" onClick={() => { console.log(ref.current?.getImage()) }}>确认</Button>
+    </Flex>
+  </>
+}
+
+
+export default function SignatureDemo() {
+  return (
+    <Page title="Signature 签名" className="signature-demo">
+      <Block title="基础用法">
+        <BasicSignature />
+      </Block>
+      <Block title="自定义颜色">
+        <PenColorSignature />
+      </Block>
+      <Block title="自定义线宽">
+        <LineWidthSignature />
+      </Block>
+      <Block title="自定义背景颜色">
+        <BackgroundColorSignature />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/skeleton/api.md

@@ -0,0 +1,45 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| row | 段落占位图行数 | _number \| string_ | `0` |
+| rowWidth | 段落占位图宽度，可传数组来设置每一行的宽度 | _number \| string \| (number \| string)[]_ | `100%` |
+| title | 是否显示标题占位图 | _boolean_ | `false` |
+| avatar | 是否显示头像占位图 | _boolean_ | `false` |
+| loading | 是否显示骨架屏，传 `false` 时会展示子组件内容 | _boolean_ | `true` |
+| animate | 是否开启动画 | _boolean_ | `true` |
+| round | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` |
+| titleWidth | 标题占位图宽度 | _number \| string_ | `40%` |
+| avatarSize | 头像占位图大小 | _number \| string_ | `32px` |
+| avatarShape | 头像占位图形状，可选值为 `square` | _square \| round_ | `round` |
+| template | 骨架屏自定义 | _ReactNode_ | `-` |
+
+### Skeleton.Paragraph Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| round | 是否将段落显示为圆角风格 | _boolean_ | `false` |
+| rowWidth | 段落占位图宽度 | _number \| string_ | `100%` |
+
+### Skeleton.Title Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| round | 是否将段落显示为圆角风格 | _boolean_ | `false` |
+| titleWidth | 标题占位图宽度 | _number \| string_ | `100%` |
+
+### Skeleton.Avatar Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| avatarSize | 头像占位图大小 | _number \| string_ | `32px` |
+| avatarShape | 头像占位图形状，可选值为 `square` | _square \| round_ | `round` |
+
+### Skeleton.Image Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| imageSize | 图片占位图大小 | _number \| string_ | `32px` |
+| imageShape | 图片占位图形状，可选值为 `square` | _square \| round_ | `round` |

package/metaData/components/skeleton/doc.md

@@ -0,0 +1,131 @@
+# Skeleton 骨架屏
+
+### 介绍
+
+用于在内容加载过程中展示一组占位图形。
+
+### 引入
+
+```tsx
+import { Skeleton } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `title` 属性显示标题占位图，通过 `row` 属性配置占位段落行数。
+
+```tsx
+<Skeleton title row={3} />
+```
+
+### 显示头像
+
+通过 `avatar` 属性显示头像占位图。
+
+```tsx
+<Skeleton title avatar row={3} />
+```
+
+### 展示子组件
+
+将 `loading` 属性设置成 `false` 表示内容加载完成，此时会隐藏占位图，并显示 `Skeleton` 的子组件。
+
+```tsx
+<Skeleton title avatar row={3} loading={loading}>
+  <View>实际内容</View>
+</Skeleton>
+```
+
+### 自定义展示内容
+
+通过 `template` 属性完成自定义内容的展示。
+
+```tsx
+const template = () => {
+  return (
+    <View
+      style={{ display: "flex", width: "100%" }}
+    >
+      <Skeleton.Image />
+      <View
+        style={{ flex: 1, marginLeft: 16 }}
+      >
+        <Skeleton.Paragraph rowWidth="60%" />
+        <Skeleton.Paragraph />
+        <Skeleton.Paragraph />
+        <Skeleton.Paragraph />
+        <Skeleton.Paragraph />
+        <Skeleton.Paragraph />
+      </View>
+    </View>
+  )
+}
+
+<Skeleton template={template}/>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| row | 段落占位图行数 | _number \| string_ | `0` |
+| rowWidth | 段落占位图宽度，可传数组来设置每一行的宽度 | _number \| string \| (number \| string)[]_ | `100%` |
+| title | 是否显示标题占位图 | _boolean_ | `false` |
+| avatar | 是否显示头像占位图 | _boolean_ | `false` |
+| loading | 是否显示骨架屏，传 `false` 时会展示子组件内容 | _boolean_ | `true` |
+| animate | 是否开启动画 | _boolean_ | `true` |
+| round | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` |
+| titleWidth | 标题占位图宽度 | _number \| string_ | `40%` |
+| avatarSize | 头像占位图大小 | _number \| string_ | `32px` |
+| avatarShape | 头像占位图形状，可选值为 `square` | _square \| round_ | `round` |
+| template | 骨架屏自定义 | _ReactNode_ | `-` |
+
+### Skeleton.Paragraph Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| round | 是否将段落显示为圆角风格 | _boolean_ | `false` |
+| rowWidth | 段落占位图宽度 | _number \| string_ | `100%` |
+
+### Skeleton.Title Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| round | 是否将段落显示为圆角风格 | _boolean_ | `false` |
+| titleWidth | 标题占位图宽度 | _number \| string_ | `100%` |
+
+### Skeleton.Avatar Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| avatarSize | 头像占位图大小 | _number \| string_ | `32px` |
+| avatarShape | 头像占位图形状，可选值为 `square` | _square \| round_ | `round` |
+
+### Skeleton.Image Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| imageSize | 图片占位图大小 | _number \| string_ | `32px` |
+| imageShape | 图片占位图形状，可选值为 `square` | _square \| round_ | `round` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                         | 默认值                         | 描述 |
+|---------------------------------------------|-------------------------------|-----|
+| --skeleton-avatar-size                      | _32px * $hd_                  | -   |
+| --skeleton-avatar-background                | _var(--active-color)_         | -   |
+| --skeleton-duration                         | _1.2s_                        | -   |
+| --skeleton-paragraph-height                 | _16px * $hd_                  | -   |
+| --skeleton-paragraph-background             | _var(--active-color)_         | -   |
+| --skeleton-title-width                      | _40%_                         | -   |
+| --skeleton-paragraph-margin-top             | _var(--padding-xs)_           | -   |
+| --skeleton-image-size                       | _96px * $hd_                  | -   |
+| --skeleton-image-radius                     | _24px * $hd_                  | -   |

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

@@ -0,0 +1,80 @@
+import { useState } from "react"
+import { View, Image } from "@tarojs/components"
+import { Skeleton, Switch, Flex } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+function BasicSkeleton() {
+  return (
+    <Block title="基础用法">
+      <Skeleton title row={3} />
+    </Block>
+  )
+}
+
+function AvatarSkeleton() {
+  return (
+    <Block title="显示头像">
+      <Skeleton title avatar row={3} />
+    </Block>
+  )
+}
+
+function LoadingSkeleton() {
+  const [loading, setLoading] = useState(true)
+
+  return (
+    <Block title="显示子组件">
+      <Switch checked={loading} onChange={setLoading} size={24} className="demo-switch" />
+      <Skeleton title avatar row={3} loading={loading}>
+        <Flex className="demo-preview">
+          <Image src="https://img.yzcdn.cn/vant/logo.png" className="demo-image" />
+          <View>
+            <View className="demo-title">关于 Taroify</View>
+            <View className="demo-content">
+              <View>Taroify 是移动端组件库 Vant 的 Taro React 版本。</View>
+              <View>两者基于相同的视觉规范，提供近似一致的 API 接口，助力开发者快速搭建小程序应用。</View>
+            </View>
+          </View>
+        </Flex>
+      </Skeleton>
+    </Block>
+  )
+}
+
+function CustomSkeleton() {
+  return (
+    <Block title="自定义展示内容">
+      <Skeleton
+        template={
+          <View style={{ display: "flex", width: "100%" }}>
+            <Skeleton.Image />
+            <View
+              style={{ flex: 1, marginLeft: 16 }}
+            >
+              <Skeleton.Paragraph rowWidth="60%" />
+              <Skeleton.Paragraph />
+              <Skeleton.Paragraph />
+              <Skeleton.Paragraph />
+              <Skeleton.Paragraph />
+              <Skeleton.Paragraph />
+            </View>
+          </View>
+        }
+      />
+    </Block>
+  )
+}
+
+export default function SkeletonDemo() {
+  return (
+    <Page title="Skeleton 骨架屏" className="skeleton-demo">
+      <BasicSkeleton />
+      <AvatarSkeleton />
+      <LoadingSkeleton />
+      <CustomSkeleton />
+    </Page>
+  )
+}

package/metaData/components/slider/api.md

@@ -0,0 +1,28 @@
+## API
+
+### Slider Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 当前进度百分比，在双滑块模式下为数组格式 | _number \| [number, number]_ | `0` |
+| value | 当前进度百分比，在双滑块模式下为数组格式 | _number \| [number, number]_ | `0` |
+| max | 最大值 | _number \| string_ | `100` |
+| min | 最小值 | _number \| string_ | `0` |
+| step | 步长 | _number \| string_ | `1` |
+| size | 进度条高度，默认单位为 `px` | _number \| string_ | `2px` |
+| range | 是否开启双滑块模式 | _boolean_ | `false` |
+| disabled | 是否禁用滑块 | _boolean_ | `false` |
+| readonly | 是否为只读状态，只读状态下无法修改滑块的值 | _boolean_ | `false` |
+| orientation | 滑块按钮展示方向，`vertical` 为垂直展示 | _SliderOrientation_ | `horizontal` |
+
+### Slider.Thumb Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 滑块按钮大小，默认单位为 `px` |_number \| string_ | `24px` |
+
+### Slider Events
+
+| 事件名      | 说明           | 回调参数            |
+|----------|--------------|-----------------|
+| onChange | 进度变化且结束拖动后触发 | _value: number_ |

package/metaData/components/slider/doc.md

@@ -0,0 +1,151 @@
+# Slider 滑块
+
+### 介绍
+
+滑动输入条，用于在给定的范围内选择一个值。
+
+### 引入
+
+```tsx
+import { Slider } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<Slider defaultValue={50} />
+```
+
+### 双滑块
+
+添加 `range` 属性就可以开启双滑块模式，确保 `value` 的值是一个数组。
+
+```tsx
+<Slider range defaultValue={[20, 60]} />
+```
+
+### 指定选择范围
+
+```tsx
+<Slider min={-50} max={50} defaultValue={0} />
+```
+
+### 禁用
+
+```tsx
+<Slider disabled defaultValue={50} />
+```
+
+### 指定步长
+
+```tsx
+<Slider step={10} defaultValue={50} />
+```
+
+### 自定义样式
+
+```tsx
+<Slider className="custom-color" size={4} defaultValue={50} />
+```
+
+```scss
+.custom-color {
+  --slider-active-background-color: #ee0a24;
+}
+```
+
+### 自定义按钮
+
+```tsx
+function StyledThumbSlider() {
+  const [value, setValue] = useState(50)
+  return (
+    <Slider className="custom-color" value={value} onChange={setValue}>
+      <Slider.Thumb>
+        <View className="custom-thumb">{value}</View>
+      </Slider.Thumb>
+    </Slider>
+  )
+}
+```
+
+```scss
+.custom-color {
+  --slider-active-background-color: #ee0a24;
+}
+
+.custom-thumb {
+  width: 26px * 2;
+  color: #fff;
+  font-size: 10px * 2;
+  line-height: 18px * 2;
+  text-align: center;
+  background-color: var(--slider-active-background-color);
+  border-radius: 100px * 2;
+}
+```
+
+### 垂直方向
+
+设置 `orientation="vertical"` 属性后，滑块会垂直展示，且高度为 100% 父元素高度。
+
+```tsx
+<Slider orientation="vertical" defaultValue={50} />
+<Slider
+  style={{ marginLeft: "100px" }}
+  range
+  orientation="vertical"
+  defaultValue={[20, 60]}
+/>
+```
+
+## API
+
+### Slider Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 当前进度百分比，在双滑块模式下为数组格式 | _number \| [number, number]_ | `0` |
+| value | 当前进度百分比，在双滑块模式下为数组格式 | _number \| [number, number]_ | `0` |
+| max | 最大值 | _number \| string_ | `100` |
+| min | 最小值 | _number \| string_ | `0` |
+| step | 步长 | _number \| string_ | `1` |
+| size | 进度条高度，默认单位为 `px` | _number \| string_ | `2px` |
+| range | 是否开启双滑块模式 | _boolean_ | `false` |
+| disabled | 是否禁用滑块 | _boolean_ | `false` |
+| readonly | 是否为只读状态，只读状态下无法修改滑块的值 | _boolean_ | `false` |
+| orientation | 滑块按钮展示方向，`vertical` 为垂直展示 | _SliderOrientation_ | `horizontal` |
+
+### Slider.Thumb Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 滑块按钮大小，默认单位为 `px` |_number \| string_ | `24px` |
+
+### Slider Events
+
+| 事件名      | 说明           | 回调参数            |
+|----------|--------------|-----------------|
+| onChange | 进度变化且结束拖动后触发 | _value: number_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                 | 默认值                                        | 描述  |
+|------------------------------------|--------------------------------------------|-----|
+| --slider-border-radius             | _var(--border-radius-max)_                 | -   |
+| --slider-active-background-color   | _var(--blue)_                              | -   |
+| --slider-inactive-background-color | _var(--gray-3)_                            | -   |
+| --slider-disabled-opacity          | _var(--disabled-opacity)_                  | -   |
+| --slider-track-height              | _2px * $hd_                                | -   |
+| --slider-track-transition-duration | _var(--animation-duration-fast)_           | -   |
+| --slider-thumb-width               | _24px * $hd_                               | -   |
+| --slider-thumb-height              | _24px * $hd_                               | -   |
+| --slider-thumb-border-radius       | _50%_                                      | -   |
+| --slider-thumb-background-color    | _var(--white)_                             | -   |
+| --slider-thumb-box-shadow          | _0 1px * $hd 2px * $hd rgba(0, 0, 0, 0.5)_ | -   |

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

@@ -0,0 +1,54 @@
+import { Slider } from "@fjyueke/bify-core"
+import { View } from "@tarojs/components"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function StyledThumbSlider() {
+  const [value, setValue] = useState(50)
+  return (
+    <Slider className="custom-color" value={value} onChange={setValue}>
+      <Slider.Thumb>
+        <View className="custom-thumb">{value}</View>
+      </Slider.Thumb>
+    </Slider>
+  )
+}
+
+export default function SliderDemo() {
+  return (
+    <Page title="Slider 滑块" className="slider-demo">
+      <Block title="基础用法">
+        <Slider defaultValue={50} />
+      </Block>
+      <Block title="双滑块">
+        <Slider range defaultValue={[20, 60]} />
+      </Block>
+      <Block title="指定选择范围">
+        <Slider min={-50} max={50} defaultValue={0} />
+      </Block>
+      <Block title="禁用">
+        <Slider disabled defaultValue={50} />
+      </Block>
+      <Block title="指定步长">
+        <Slider step={10} defaultValue={50} />
+      </Block>
+      <Block title="自定义样式">
+        <Slider className="custom-color" size={4} defaultValue={50} />
+      </Block>
+      <Block title="自定义按钮">
+        <StyledThumbSlider />
+      </Block>
+      <Block title="自定义样式" className="vertical-slider">
+        <Slider orientation="vertical" defaultValue={50} />
+        <Slider
+          style={{ marginLeft: "100px" }}
+          range
+          orientation="vertical"
+          defaultValue={[20, 60]}
+        />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/space/api.md

@@ -0,0 +1,12 @@
+## API
+
+### Props
+
+| 参数                  | 说明                                                                         | 类型                                    | 默认值       |
+| --------------------- | ---------------------------------------------------------------------------- | --------------------------------------- | ------------ |
+| direction             | 垂直排列方式 可选值 `horizontal` `vertical`                                  | _string_                                | `horizontal` |
+| size                  | 间距，可选值为 `mini` `small` `medium` `large`，或者自定义间距               | _string \| number \| [number, number?]_ | `small`      |
+| wrap                  | 子元素的换行方式，可选值为 `nowrap` `wrap` `wrap-reverse`                    | _boolean_                               | `wrap`       |
+| justify               | 主轴对齐方式，可选值为 `start` `end` `center` `space-around` `space-between` | _string_                                | `start`      |
+| align                 | 交叉轴对齐方式，可选值为 `start` `center` `end` `baseline` `stretch`         | _string_                                | `start`      |
+| fill `v0.1.1-alpha.2` | 是否填充整个父元素                                                           | _boolean_                               | `false`      |