@fjyueke/bify-mcp 1.0.0

package/metaData/components/back-top/doc.md

@@ -0,0 +1,142 @@
+# BackTop 回到顶部
+
+### 介绍
+
+返回页面顶部的操作按钮。
+
+请升级 `taroify` 到 >= `0.1.0-alpha.4` 版本来使用该组件。
+
+### 引入
+
+```tsx
+import { BackTop } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+请滚动右侧的示例页面，当页面滚动 200px 时，右下角会出现返回顶部按钮。
+
+```tsx
+const list = [...Array(50).keys()]
+;<View>
+  <Cell.Group>
+    {arr.map((v) => {
+      return <Cell key={v}>{v}</Cell>
+    })}
+  </Cell.Group>
+  <BackTop />
+</View>
+```
+
+### 自定义位置
+
+通过 right 和 bottom 属性来设置组件距离右侧和底部的位置。
+
+```tsx
+function CustomContent) {
+  const list = [...Array(50).keys()];
+
+  return (
+    <View>
+      <Cell.Group>
+        {list.map((v) => {
+          return (
+            <Cell key={v}>{v}</Cell>
+          )
+        })}
+      </Cell.Group>
+      <BackTop />
+    </View>
+  )
+}
+```
+
+### 自定义内容
+
+使用 `children` 来自定义组件展示的内容。
+
+```tsx
+function CustomContent() {
+  const list = [...Array(50).keys()]
+
+  return (
+    <View>
+      <Cell.Group>
+        {list.map((v) => {
+          return <Cell key={v}>{v}</Cell>
+        })}
+      </Cell.Group>
+      <BackTop>返回顶部</BackTop>
+    </View>
+  )
+}
+```
+
+```css
+.custom-back-top {
+  width: 160px;
+  font-size: 28px;
+  text-align: center;
+}
+```
+
+### 瞬间滚动
+
+当设置 `immediate` 属性后，页面滚动的过程不再有过渡效果，而是瞬间滚动到顶部。
+
+```tsx
+function SetImmediate() {
+  const list = [...Array(50).keys()]
+
+  return (
+    <View>
+      <Cell.Group>
+        {list.map((v) => {
+          return <Cell key={v}>{v}</Cell>
+        })}
+      </Cell.Group>
+      <BackTop immediate />
+    </View>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数      | 说明                                | 类型      | 默认值   |
+| --------- | ----------------------------------- | --------- | -------- | ---- |
+| right     | 距离页面右侧的距离，默认单位为 `px` | _number_  | _string_ | `30` |
+| bottom    | 距离页面底部的距离，默认单位为 `px` | _number_  | _string_ | `40` |
+| offset    | 滚动高度达到此参数值时才显示组件    | _number_  | `200`    |
+| immediate | 是否瞬间滚动到顶部                  | _boolean_ | `false`  |
+| zIndex    | 设置组件的 z-index 层级             | _number_  | `100`    |
+
+### Event
+
+| 事件    | 说明           | 回调参数            |
+| ------- | -------------- | ------------------- |
+| onClick | 点击组件时触发 | _event:ITouchEvent_ |
+
+### 注意
+
+非 `H5` 项目需要显式调用 `onClick`
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                  | 默认值               | 描述 |
+| --------------------- | -------------------- | ---- |
+| --back-top-size       | _80px_               | -    |
+| --back-top-icon-size  | _40px_               | -    |
+| --back-top-right      | _60px_               | -    |
+| --back-top-bottom     | _80px_               | -    |
+| --back-top-z-index    | _100_                | -    |
+| --back-top-text-color | _#fff_               | -    |
+| --back-top-background | _var(--blue, $blue)_ | -    |

package/metaData/components/back-top/example/index.tsx

@@ -0,0 +1,96 @@
+import { BackTop, Cell, Tabs } from "@fjyueke/bify-core"
+import { useState } from "react"
+import { View } from "@tarojs/components";
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicBackTop() {
+  const list = [...Array(50).keys()];
+
+  return (
+    <View>
+      <Cell.Group>
+        {list.map(v => {
+          return (
+            <Cell key={v}>{v}</Cell>
+          )
+        })}
+      </Cell.Group>
+      <BackTop />
+    </View>
+  )
+}
+
+function CustomLocation() {
+  const list = [...Array(50).keys()];
+
+  return (
+    <View>
+      <Cell.Group>
+        {list.map((v) => {
+          return (
+            <Cell key={v}>{v}</Cell>
+          )
+        })}
+      </Cell.Group>
+      <BackTop right={100} bottom={200} />
+    </View>
+  )
+}
+
+function CustomContent() {
+  const list = [...Array(50).keys()];
+
+  return (
+    <View>
+      <Cell.Group>
+        {list.map((v) => {
+          return (
+            <Cell key={v}>{v}</Cell>
+          )
+        })}
+      </Cell.Group>
+      <BackTop className="custom-back-top">返回顶部</BackTop>
+    </View>
+  )
+}
+
+function SetImmediate() {
+  const list = [...Array(50).keys()];
+
+  return (
+    <View>
+      <Cell.Group>
+        {list.map((v) => {
+          return (
+            <Cell key={v}>{v}</Cell>
+          )
+        })}
+      </Cell.Group>
+      <BackTop immediate />
+    </View>
+  )
+}
+
+export default function BackTopDemo() {
+  const [value, setValue] = useState(0)
+  
+  return (
+    <Page title="BackTop 回到顶部" className="back-top-demo">
+      <Tabs value={value} onChange={setValue}>
+        <Tabs.TabPane title="基础用法">
+          <BasicBackTop />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="自定义位置">
+          <CustomLocation />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="自定义内容">
+          <CustomContent />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="瞬间滚动">
+          <SetImmediate />
+        </Tabs.TabPane>
+      </Tabs>
+    </Page>
+  )
+}

package/metaData/components/backdrop/api.md

@@ -0,0 +1,20 @@
+## API
+
+### Props
+
+| 参数        | 说明                     | 类型        | 默认值  |
+| ----------- | ------------------------ | ----------- | ------- |
+| className   | 自定义类名               | _string_    | -       |
+| children    | 用于在遮罩层上方嵌入内容 | _ReactNode_ | -       |
+| defaultOpen | 是否默认展示遮罩层       | _boolean_   | `false` |
+| open        | 是否展示遮罩层           | _boolean_   | `false` |
+| duration    | 动画时长，单位毫秒       | _number_    | `300`   |
+| lock        | 是否锁定背景滚动         | _boolean_   | `true`  |
+| closeable   | 点击遮罩层时是否关闭     | _boolean_   | `false` |
+
+### Event
+
+| 事件    | 说明       | 回调参数 |
+| ------- | ---------- | -------  |
+| onClick | 点击时触发 | -        |
+| onClose | 关闭时触发 | -        |

package/metaData/components/backdrop/doc.md

@@ -0,0 +1,98 @@
+# Backdrop 背景板
+
+### 介绍
+
+创建一个背景幕，用于强调特定的页面元素，并阻止用户进行其他操作。
+
+### 引入
+
+```jsx
+import { Backdrop } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```jsx
+import { Backdrop, Button } from "@fjyueke/bify-core"
+
+function BackdropExample() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>显示背景板</Button>
+      <Backdrop open={open} closeable onClose={() => setOpen(false)} />
+    </>
+  )
+}
+```
+
+### 嵌入内容
+
+通过 children 可以在背景板上嵌入任意内容。
+
+```jsx
+import { Backdrop, Button } from "@fjyueke/bify-core"
+
+function BackdropExample() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>嵌入内容</Button>
+      <Backdrop open={open} closeable onClose={() => setOpen(false)}>
+        <View className="content-wrapper">
+          <View className="content-block" />
+        </View>
+      </Backdrop>
+    </>
+  )
+}
+```
+
+```scss
+.content-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.content-block {
+  width: 60px * 2;
+  height: 60px * 2;
+  background-color: #fff;
+}
+```
+
+## API
+
+### Props
+
+| 参数        | 说明                     | 类型        | 默认值  |
+| ----------- | ------------------------ | ----------- | ------- |
+| className   | 自定义类名               | _string_    | -       |
+| children    | 用于在遮罩层上方嵌入内容 | _ReactNode_ | -       |
+| defaultOpen | 是否默认展示遮罩层       | _boolean_   | `false` |
+| open        | 是否展示遮罩层           | _boolean_   | `false` |
+| duration    | 动画时长，单位毫秒       | _number_    | `300`   |
+| lock        | 是否锁定背景滚动         | _boolean_   | `true`  |
+| closeable   | 点击遮罩层时是否关闭     | _boolean_   | `false` |
+
+### Event
+
+| 事件    | 说明       | 回调参数 |
+| ------- | ---------- | -------  |
+| onClick | 点击时触发 | -        |
+| onClose | 关闭时触发 | -        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                        | 默认值               | 描述 |
+| --------------------------- | -------------------- | ---- |
+| --backdrop-z-index          | _1000_               | -    |
+| --backdrop-background-color | _rgba(0, 0, 0, 0.7)_ | -    |

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

@@ -0,0 +1,33 @@
+import { Backdrop, Button } 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"
+
+export default function BackdropDemo() {
+  const [open, setOpen] = useState(false)
+  const [opened2, setOpened2] = useState(false)
+
+  return (
+    <Page title="Backdrop" className="backdrop-demo">
+      <Block title="基础用法">
+        <Button variant="contained" color="primary" onClick={() => setOpen(true)}>
+          显示背景板
+        </Button>
+        <Backdrop open={open} closeable onClose={() => setOpen(false)} />
+      </Block>
+      <Block title="嵌入内容">
+        <Button variant="contained" color="primary" onClick={() => setOpened2(true)}>
+          嵌入内容
+        </Button>
+        <Backdrop open={opened2} closeable onClose={() => setOpened2(false)}>
+          <View className="content-wrapper">
+            <View className="content-block" />
+          </View>
+        </Backdrop>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/badge/api.md

@@ -0,0 +1,10 @@
+## API
+
+### Props
+
+| 参数     | 说明                                                         | 类型               | 默认值      |
+| -------- | ------------------------------------------------------------ | ------------------ | ----------- |
+| content  | 徽标内容                                                     | _ReactNode_        | -           |
+| dot      | 是否展示为小红点                                             | _boolean_          | `false`     |
+| max      | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | -           |
+| position | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right`   | _string_           | `top-right` |

package/metaData/components/badge/doc.md

@@ -0,0 +1,169 @@
+# Badge 徽标
+
+### 介绍
+
+在右上角展示徽标数字或小红点。
+
+请升级 `taroify` 到 >= `v0.3.0-alpha.0` 版本来使用该组件。
+
+### 引入
+
+```ts
+import { Badge } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+设置 `content` 属性后，Badge 会在子元素的右上角显示对应的徽标，也可以通过 `dot` 来显示小红点。
+
+```tsx
+<Badge content={5}>
+  <View className="badge-block" />
+</Badge>
+<Badge content="10">
+  <View className="badge-block" />
+</Badge>
+<Badge content="Hot">
+  <View className="badge-block" />
+</Badge>
+<Badge dot>
+  <View className="badge-block" />
+</Badge>
+```
+
+```scss
+.badge-block {
+  width: 40px * 2;
+  height: 40px * 2;
+  background: #f2f3f5ff;
+  border-radius: 4px * 2;
+}
+```
+
+### 最大值
+
+设置 `max` 属性后，当 `content` 的数值超过最大值时，会自动显示为 `{max}+`。
+
+```tsx
+<Badge content={10} max={9}>
+  <View className="badge-block" />
+</Badge>
+<Badge content={21} max={20}>
+  <View className="badge-block" />
+</Badge>
+<Badge content={100} max={99}>
+  <View className="badge-block" />
+</Badge>
+```
+
+### 自定义颜色
+
+通过 `color` 属性来设置徽标的颜色。
+
+```tsx
+<Badge className="custom-color" content={5}>
+  <View className="badge-block" />
+</Badge>
+<Badge className="custom-color" content={10}>
+  <View className="badge-block" />
+</Badge>
+<Badge className="custom-color" content="Hot">
+  <View className="badge-block" />
+</Badge>
+<Badge className="custom-color" dot>
+  <View className="badge-block" />
+</Badge>
+```
+
+```scss
+.custom-color {
+  --badge-background-color: red;
+}
+```
+
+### 自定义徽标内容
+
+通过 `content` 属性可以自定义徽标的内容，比如插入一个图标。
+
+```tsx
+<Badge content={<Success className="badge-icon" />}>
+  <View className="badge-block" />
+</Badge>
+<Badge content={<Cross className="badge-icon" />}>
+  <View className="badge-block" />
+</Badge>
+<Badge content={<Down className="badge-icon" />}>
+  <View className="badge-block" />
+</Badge>
+```
+
+```scss
+.badge-icon {
+  display: block;
+  margin-left: 0;
+  font-size: 10px * 2;
+  line-height: 16px * 2;
+}
+```
+
+### 自定义徽标位置
+
+通过 `position` 属性来设置徽标的位置。
+
+```tsx
+<Badge content={10} position="top-left">
+  <View className="badge-block" />
+</Badge>
+<Badge content={10} position="top-right">
+  <View className="badge-block" />
+</Badge>
+<Badge content={10} position="bottom-left">
+  <View className="badge-block" />
+</Badge>
+<Badge content={10} position="bottom-right">
+  <View className="badge-block" />
+</Badge>
+```
+
+### 独立展示
+
+当 Badge 没有子元素时，会作为一个独立的元素进行展示。
+
+```tsx
+<Badge content="20" />
+<Badge content={100} max={99} />
+```
+
+## API
+
+### Props
+
+| 参数     | 说明                                                         | 类型               | 默认值      |
+| -------- | ------------------------------------------------------------ | ------------------ | ----------- |
+| content  | 徽标内容                                                     | _ReactNode_        | -           |
+| dot      | 是否展示为小红点                                             | _boolean_          | `false`     |
+| max      | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | -           |
+| position | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right`   | _string_           | `top-right` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                     | 默认值                                                  | 描述 |
+| ------------------------ | ------------------------------------------------------- | ---- |
+| --badge-size             | _16px \* $hd_                                           | -    |
+| --badge-color            | _var(--white)_                                          | -    |
+| --badge-padding          | _0 3px \* $hd_                                          | -    |
+| --badge-font-family      | _-apple-system-font, helvetica neue, arial, sans-serif_ | -    |
+| --badge-font-size        | _var(--font-size-sm)_                                   | -    |
+| --badge-font-weight      | _var(--font-weight-bold)_                               | -    |
+| --badge-border-width     | _var(--border-width-base)_                              | -    |
+| --badge-border-color     | _var(--white)_                                          | -    |
+| --badge-border-radius    | _var(--border-radius-max)_                              | -    |
+| --badge-background-color | _var(--red)_                                            | -    |
+| --badge-dot-color        | _var(--badge-background-color)_                         | -    |
+| --badge-dot-size         | _8PX_                                                   | -    |

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

@@ -0,0 +1,81 @@
+import { Badge } from "@fjyueke/bify-core"
+import { Cross, Down, Success } from "@fjyueke/bify-icons"
+import { View } from "@tarojs/components"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function BadgeDemo() {
+  return (
+    <Page title="Badge 徽标" className="badge-demo">
+      <Block title="基础用法">
+        <Badge content={5}>
+          <View className="badge-block" />
+        </Badge>
+        <Badge content="10">
+          <View className="badge-block" />
+        </Badge>
+        <Badge content="Hot">
+          <View className="badge-block" />
+        </Badge>
+        <Badge dot>
+          <View className="badge-block" />
+        </Badge>
+      </Block>
+      <Block title="最大值">
+        <Badge content={10} max={9}>
+          <View className="badge-block" />
+        </Badge>
+        <Badge content={21} max={20}>
+          <View className="badge-block" />
+        </Badge>
+        <Badge content={100} max={99}>
+          <View className="badge-block" />
+        </Badge>
+      </Block>
+      <Block title="自定义颜色">
+        <Badge className="custom-color" content={5}>
+          <View className="badge-block" />
+        </Badge>
+        <Badge className="custom-color" content={10}>
+          <View className="badge-block" />
+        </Badge>
+        <Badge className="custom-color" content="Hot">
+          <View className="badge-block" />
+        </Badge>
+        <Badge className="custom-color" dot>
+          <View className="badge-block" />
+        </Badge>
+      </Block>
+      <Block title="自定义徽标内容">
+        <Badge content={<Success className="badge-icon" />}>
+          <View className="badge-block" />
+        </Badge>
+        <Badge content={<Cross className="badge-icon" />}>
+          <View className="badge-block" />
+        </Badge>
+        <Badge content={<Down className="badge-icon" />}>
+          <View className="badge-block" />
+        </Badge>
+      </Block>
+      <Block title="自定义徽标位置">
+        <Badge content={10} position="top-left">
+          <View className="badge-block" />
+        </Badge>
+        <Badge content={10} position="top-right">
+          <View className="badge-block" />
+        </Badge>
+        <Badge content={10} position="bottom-left">
+          <View className="badge-block" />
+        </Badge>
+        <Badge content={10} position="bottom-right">
+          <View className="badge-block" />
+        </Badge>
+      </Block>
+      <Block title="独立展示" className="independent-badges">
+        <Badge content="20" />
+        <Badge content={100} max={99} />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/button/api.md

@@ -0,0 +1,31 @@
+## API
+
+### Props
+
+| 参数           | 说明                                               | 类型                                                      | 默认值         |
+|--------------|--------------------------------------------------|---------------------------------------------------------|-------------|
+| variant      | 按钮变种，可选值为 `contained` `text` `outlined`          | _string_                                                | `contained` |
+| color        | 按钮颜色，可选值为 `primary` `success` `warning` `danger` | _string_                                                | `default`   |
+| size         | 尺寸，可选值为 `large` `small` `mini`                   | _string_                                                | `medium`    |
+| shape        | 按钮形状，可选值为 `square` `round`                       | _string_                                                | `square`    |
+| icon         | 左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_                                             | -           |
+| iconPosition <br>`v0.1.1-alpha.0` | 图标展示位置，可选值为 `right`     | _string_                                                 | `left`      |
+| formType     | 原生 button 标签的 type 属性                            | _string_                                                | `button`    |
+| block        | 是否为块级元素                                          | _boolean_                                               | `false`     |
+| disabled     | 是否禁用按钮                                           | _boolean_                                               | `false`     |
+| hairline     | 是否使用 0.5px 边框                                    | _boolean_                                               | `false`     |
+| loading      | 是否显示为加载状态                                        | _boolean \| [LoadingProps](/components/loading/#props)_ | `false`     |
+| children     | 按钮文字                                             | _string_                                                | -           |
+
+
+### Button.Group Props
+
+| 参数       | 说明                                               | 类型        | 默认值         |
+|----------|--------------------------------------------------|-----------|-------------|
+| variant  | 按钮变种，可选值为 `contained` `text` `outlined`          | _string_  | `contained` |
+| color    | 按钮颜色，可选值为 `primary` `success` `warning` `danger` | _string_  | `default`   |
+| size     | 尺寸，可选值为 `large` `small` `mini`                   | _string_  | `medium`    |
+| shape    | 按钮形状，可选值为 `round`                                | _string_  | `square`    |
+| block    | 是否为块级元素                                          | _boolean_ | -           |
+| disabled | 是否禁用按钮                                           | _boolean_ | -           |
+| hairline | 是否使用 0.5px 边框                                    | _boolean_ | -           |