@fjyueke/bify-mcp 1.0.0

package/metaData/components/action-sheet/example/index.tsx

@@ -0,0 +1,116 @@
+import { ActionSheet, Cell } from "@fjyueke/bify-core"
+import { ArrowRight } from "@fjyueke/bify-icons"
+import { useMemo, useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicActionSheet() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(() => [
+    { name: "选项一", value: "1" },
+    { name: "选项二", value: "2" },
+    { name: "选项三", value: "3" },
+  ], [])
+  return (
+    <>
+      <Cell clickable isLink title="基础用法"  onClick={() => setOpen(true)} />
+      <ActionSheet actions={actions} open={open} onSelect={() => setOpen(false)} onClose={setOpen} />
+    </>
+  )
+}
+
+function ActionSheetWithCancel() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(() => [
+    { name: "选项一", value: "1" },
+    { name: "选项二", value: "2" },
+    { name: "选项三", value: "3" },
+  ], [])
+  return (
+    <>
+      <Cell
+        clickable
+        isLink
+        title="展示取消按钮"
+        onClick={() => setOpen(true)}
+      />
+      <ActionSheet
+        cancelText="取消"
+        actions={actions}
+        open={open}
+        onSelect={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        onClose={setOpen}
+      />
+    </>
+  )
+}
+
+function ActionSheetWithDescription() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(() => [
+    { name: "选项一", value: "1", subname: "这是一段描述信息" },
+    { name: "选项二", value: "2" },
+    { name: "选项三", value: "3" },
+  ], [])
+  return (
+    <>
+      <Cell
+        clickable
+        title="展示描述信息"
+        isLink
+        onClick={() => setOpen(true)}
+      />
+      <ActionSheet
+        description="这是一段描述信息"
+        cancelText="取消"
+        actions={actions}
+        open={open}
+        onSelect={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        onClose={setOpen}
+      />
+    </>
+  )
+}
+
+function ActionSheetWithStatuses() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(() => [
+    { name: "选项一", value: "1", style: { color: "#ee0a24" } },
+    { name: "选项二", value: "2", disabled: true },
+    { name: "选项三", value: "3", loading: true },
+  ], [])
+  return (
+    <>
+      <Cell clickable title="选项状态" isLink onClick={() => setOpen(true)} />
+      <ActionSheet
+        actions={actions}
+        cancelText="取消"
+        open={open}
+        onSelect={(value) => {
+          console.log(value)
+          setOpen(false)
+        }}
+        onCancel={() => setOpen(false)}
+        onClose={setOpen}
+      />
+    </>
+  )
+}
+
+export default function ActionSheetDemo() {
+  return (
+    <Page title="ActionSheet 动作面板" className="action-sheet-demo">
+      <Block variant="card" title="基础用法">
+        <BasicActionSheet />
+        <ActionSheetWithCancel />
+        <ActionSheetWithDescription />
+      </Block>
+      <Block variant="card" title="选项状态">
+        <ActionSheetWithStatuses />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/area-picker/api.md

@@ -0,0 +1,25 @@
+## API
+
+### Props
+
+| 参数                              | 说明                                                      | 类型             | 默认值  |
+| --------------------------------- | --------------------------------------------------------- | ---------------- | ------- |
+| defaultValue                      | 默认选中的值                                              | _string[]_       | -       |
+| value                             | 选中的值                                                  | _string[]_       | -       |
+| areaList <br>`v0.1.1-alpha.7`     | 省市区数据                                                | _object_         | -       |
+| depth                             | 显示列数，3-省市区，2-省市，1-省                          | _string_         | `3`     |
+| title <br>`v0.1.1-alpha.7`        | 顶部栏标题                                                | _ReactNode_      | -       |
+| confirmText <br>`v0.1.1-alpha.7`  | 确认按钮文字                                              | _ReactNode_      | `确认`  |
+| cancelText <br>`v0.1.1-alpha.7`   | 取消按钮文字                                              | _ReactNode_      | `取消`  |
+| loading                           | 是否显示加载状态                                          | _boolean_        | `false` |
+| readonly                          | 是否为只读状态，只读状态下无法切换选项                    | _boolean_        | `false` |
+| siblingCount                      | 可见的选项相邻个数                                        | _number_         | `3`     |
+| optionHeight <br>`v0.1.1-alpha.7` | 选项高度，支持 `px` `vw` `vh` `rem` `rpx` 单位，默认 `px` | _number\|string_ | `44`    |
+
+### Events
+
+| 事件      | 说明               | 回调参数                                                                   |
+| --------- | ------------------ | -------------------------------------------------------------------------- |
+| onConfirm | 点击完成按钮时触发 | _values: string[], options: PickerOptionObject[]_                          |
+| onCancel  | 点击取消按钮时触发 | _values: string[], options: PickerOptionObject[]_                          |
+| onChange  | 选项改变时触发     | _values: string[], option: PickerOptionObject, column: PickerOptionObject_ |

package/metaData/components/area-picker/doc.md

@@ -0,0 +1,132 @@
+# AreaPicker 省市区选择
+
+### 介绍
+
+省市区三级联动选择，通常与[弹出层](/components/popup)组件配合使用。
+
+### 引入
+
+```tsx
+import { AreaPicker } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+初始化省市区组件时，需要通过 `areaList` 属性传入省市区数据。
+
+```tsx
+<AreaPicker areaList={areaList} />
+```
+
+### areaList 格式
+
+areaList 为对象结构，包含 `province_list`、`city_list`、`county_list` 三个 key。
+
+每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 `11`，以 0 补足 6 位，为 `110000`。
+
+示例数据如下：
+
+```js
+const areaList = {
+  province_list: {
+    110000: "北京市",
+    120000: "天津市",
+  },
+  city_list: {
+    110100: "北京市",
+    120100: "天津市",
+  },
+  county_list: {
+    110101: "东城区",
+    110102: "西城区",
+    // ....
+  },
+}
+```
+
+### @vant/area-data
+
+Vant 官方提供了一份默认的省市区数据，可以通过 [@vant/area-data](https://github.com/youzan/vant/tree/dev/packages/vant-area-data) 引入：
+
+```bash
+# 通过 npm
+npm i @vant/area-data
+
+# 通过 yarn
+yarn add @vant/area-data
+
+# 通过 pnpm
+pnpm add @vant/area-data
+```
+
+```tsx
+import { areaList } from "@vant/area-data"
+```
+
+### 选中省市区
+
+通过 `defaultValue` 设置默认值
+
+通过 `value` `onChange` 控制选中
+
+```tsx
+<AreaPicker areaList={areaList} defaultValue={["330000", "330300", "330305"]} />
+```
+
+### 配置显示列
+
+可以通过 `depth` 属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为 `2`，则只会显示省市选择。
+
+```tsx
+<AreaPicker depth={2} areaList={areaList} />
+```
+
+### 手动控制 DOM
+
+初始化省市区组件时，需要通过 `AreaPicker.Columns` 子组件传入省市区数据。
+
+```tsx
+import { AreaPicker } from "@fjyueke/bify-core"
+import { areaList } from "@vant/area-data"
+
+function BasicAreaPicker() {
+  return (
+    <AreaPicker>
+      <AreaPicker.Toolbar>
+        <AreaPicker.Button>取消</AreaPicker.Button>
+        <AreaPicker.Title>标题</AreaPicker.Title>
+        <AreaPicker.Button>确认</AreaPicker.Button>
+      </AreaPicker.Toolbar>
+      <AreaPicker.Columns children={areaList} />
+    </AreaPicker>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数                              | 说明                                                      | 类型             | 默认值  |
+| --------------------------------- | --------------------------------------------------------- | ---------------- | ------- |
+| defaultValue                      | 默认选中的值                                              | _string[]_       | -       |
+| value                             | 选中的值                                                  | _string[]_       | -       |
+| areaList <br>`v0.1.1-alpha.7`     | 省市区数据                                                | _object_         | -       |
+| depth                             | 显示列数，3-省市区，2-省市，1-省                          | _string_         | `3`     |
+| title <br>`v0.1.1-alpha.7`        | 顶部栏标题                                                | _ReactNode_      | -       |
+| confirmText <br>`v0.1.1-alpha.7`  | 确认按钮文字                                              | _ReactNode_      | `确认`  |
+| cancelText <br>`v0.1.1-alpha.7`   | 取消按钮文字                                              | _ReactNode_      | `取消`  |
+| loading                           | 是否显示加载状态                                          | _boolean_        | `false` |
+| readonly                          | 是否为只读状态，只读状态下无法切换选项                    | _boolean_        | `false` |
+| siblingCount                      | 可见的选项相邻个数                                        | _number_         | `3`     |
+| optionHeight <br>`v0.1.1-alpha.7` | 选项高度，支持 `px` `vw` `vh` `rem` `rpx` 单位，默认 `px` | _number\|string_ | `44`    |
+
+### Events
+
+| 事件      | 说明               | 回调参数                                                                   |
+| --------- | ------------------ | -------------------------------------------------------------------------- |
+| onConfirm | 点击完成按钮时触发 | _values: string[], options: PickerOptionObject[]_                          |
+| onCancel  | 点击取消按钮时触发 | _values: string[], options: PickerOptionObject[]_                          |
+| onChange  | 选项改变时触发     | _values: string[], option: PickerOptionObject, column: PickerOptionObject_ |

package/metaData/components/area-picker/example/index.tsx

@@ -0,0 +1,60 @@
+import { AreaPicker, Toast } from "@fjyueke/bify-core"
+import { PickerOptionObject } from "@fjyueke/bify-core/picker"
+import { areaList } from "@vant/area-data"
+import * as _ from "lodash"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function toastOptions(options?: PickerOptionObject[]) {
+  const labels = _.map(options, ({ label }) => label)
+  Toast.open(JSON.stringify(labels))
+}
+
+function BasicAreaPicker() {
+  return <AreaPicker onConfirm={(_values_, options) => toastOptions(options)} areaList={areaList} />
+}
+
+function AreaPickerWithValue() {
+  return <AreaPicker defaultValue={["330000", "330300", "330305"]} onConfirm={(_values_, options) => toastOptions(options)} areaList={areaList} />
+}
+
+function AreaPickerWithColumns() {
+  return (
+    <AreaPicker depth={2} onConfirm={(_values_, options) => toastOptions(options)} areaList={areaList} />
+  )
+}
+
+function ManualAreaPicker() {
+  return (
+    <AreaPicker onConfirm={(_values_, options) => toastOptions(options)}>
+      <AreaPicker.Toolbar>
+        <AreaPicker.Button>取消</AreaPicker.Button>
+        <AreaPicker.Title>标题</AreaPicker.Title>
+        <AreaPicker.Button>确认</AreaPicker.Button>
+      </AreaPicker.Toolbar>
+      <AreaPicker.Columns children={areaList} />
+    </AreaPicker>
+  )
+}
+
+
+export default function AreaPickerDemo() {
+  return (
+    <Page title="AreaPicker 省市区选择器" className="area-picker-demo">
+      <Block variant="card" title="基础用法">
+        <BasicAreaPicker />
+      </Block>
+      <Block variant="card" title="选中省市区">
+        <AreaPickerWithValue />
+      </Block>
+      <Block variant="card" title="配置显示列">
+        <AreaPickerWithColumns />
+      </Block>
+      <Block variant="card" title="手动控制DOM">
+        <ManualAreaPicker />
+      </Block>
+      <Toast id="toast" />
+    </Page>
+  )
+}

package/metaData/components/avatar/api.md

@@ -0,0 +1,19 @@
+## API
+
+### Avatar Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| src | 传入图片的链接,传入之后嵌套内容不展示 | _string_ | - |
+| alt | 图片不显示时的文本内容 | _string_ | - |
+| shape | 形状，可选值为 `square` `rounded` `circle` | _string_ | `circle` |
+| size | 大小，可选值为 `mini` `small` `medium` `large` | _string_ | `medium` |
+
+### Avatar.Group Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| shape | 形状，可选值为 `square` `rounded` `circle` | _string_ | `circle` |
+| spacing | 间距，可选值为 `small` `medium` `large` | _string_ | `medium` |
+| limit | 显示的最大头像个数 | _number_ | - |
+| total | 头像总数。用于计算额外头像的数量。| _string_ | - |

package/metaData/components/avatar/doc.md

@@ -0,0 +1,170 @@
+# Avatar 头像
+
+### 介绍
+
+显示用户头像、首字母或备用图标。
+
+### 引入
+
+```ts
+import { Avatar } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+设置 `style` 可以修改,背景颜色
+
+```tsx
+<Avatar>P</Avatar>
+<Avatar style={{ background: "green" }}>N</Avatar>
+<Avatar style={{ background: "pink" }}>HP</Avatar>
+```
+
+### 尺寸
+
+设置 `size` 属性后，可以选择四个大小。
+
+```tsx
+<Avatar src="https://joesch.moe/api/v1/random" size="mini" />
+<Avatar src="https://joesch.moe/api/v1/random" size="small" />
+<Avatar src="https://joesch.moe/api/v1/random" size="medium" />
+<Avatar src="https://joesch.moe/api/v1/random" size="large" />
+```
+
+### 形状
+
+通过 `variant` 属性来设置形状。
+
+```tsx
+<Avatar src="https://joesch.moe/api/v1/random" />
+<Avatar src="https://joesch.moe/api/v1/random" shape="square" />
+<Avatar src="https://joesch.moe/api/v1/random" shape="rounded" />
+```
+
+### 群组
+
+最多显示5个。
+
+```tsx
+<Avatar.Group total={24}>
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+</Avatar.Group>
+```
+
+### 最大
+
+通过 `max` 属性最大可展示数量,最多显示5个。
+
+```tsx
+<Avatar.Group max={3}>
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+  <Avatar src="https://joesch.moe/api/v1/random" />
+</Avatar.Group>
+```
+
+### 图标
+
+```tsx
+<Avatar style={{ background: "red" }}>
+  <Cross />
+</Avatar>
+<Avatar style={{ background: "pink" }}>
+  <LocationOutlined />
+</Avatar>
+<Avatar style={{ background: "green" }}>
+  <SettingOutlined />
+</Avatar>
+```
+
+### 徽章
+
+```tsx
+<Badge className="avatar-dot" dot position="bottom-right">
+  <Avatar src="https://joesch.moe/api/v1/random" />
+</Badge>
+<Badge
+  className="avatar-avatar"
+  content={<Avatar src="https://joesch.moe/api/v1/random" />}
+  position="bottom-right"
+>
+  <Avatar src="https://joesch.moe/api/v1/random" />
+</Badge>
+```
+
+```scss
+.avatar-dot {
+  bottom: 2px * 2;
+  right: 6px * 2,
+}
+
+.avatar-avatar {
+  --badge-background-color: transparent;
+  --badge-padding: 0;
+  --badge-size: 12px * 2;
+  --avatar-size: var(--badge-size);
+  bottom: 2px * 2;
+  right: 6px * 2,
+}
+```
+
+## API
+
+### Avatar Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| src | 传入图片的链接,传入之后嵌套内容不展示 | _string_ | - |
+| alt | 图片不显示时的文本内容 | _string_ | - |
+| shape | 形状，可选值为 `square` `rounded` `circle` | _string_ | `circle` |
+| size | 大小，可选值为 `mini` `small` `medium` `large` | _string_ | `medium` |
+
+### Avatar.Group Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| shape | 形状，可选值为 `square` `rounded` `circle` | _string_ | `circle` |
+| spacing | 间距，可选值为 `small` `medium` `large` | _string_ | `medium` |
+| limit | 显示的最大头像个数 | _number_ | - |
+| total | 头像总数。用于计算额外头像的数量。| _string_ | - |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                            | 默认值                                            | 描述  |
+|-------------------------------|------------------------------------------------|-----|
+| --avatar-color                | _var(--white)_                                 | -   |
+| --avatar-background-color     | _var(--gray-5)_                                | -   |
+| --avatar-border-color         | _var(--white)_                                 | -   |
+| --avatar-border-width         | _2PX_                                          | -   |
+| --avatar-font-weight          | _var(--font-weight-bold)_                      | -   |
+| --avatar-font-family          | _Roboto, Helvetica, Arial, sans-serif_         | -   |
+| --avatar-font-size-mini       | _var(--avatar-font-size, var(--font-size-xs))_ | -   |
+| --avatar-font-size-small      | _var(--avatar-font-size, var(--font-size-sm))_ | -   |
+| --avatar-font-size-medium     | _var(--avatar-font-size, var(--font-size-md))_ | -   |
+| --avatar-font-size-large      | _var(--avatar-font-size, var(--font-size-lg))_ | -   |
+| --avatar-border-radius-mini   | _var(--avatar-border-radius, 2px * $hd)_       | -   |
+| --avatar-border-radius-small  | _var(--avatar-border-radius, 4px * $hd)_       | -   |
+| --avatar-border-radius-medium | _var(--avatar-border-radius, 5px * $hd)_       | -   |
+| --avatar-border-radius-large  | _var(--avatar-border-radius, 6px * $hd)_       | -   |
+| --avatar-size-mini            | _var(--avatar-size, 16px * $hd)_               | -   |
+| --avatar-size-small           | _var(--avatar-size, 26px * $hd)_               | -   |
+| --avatar-size-medium          | _var(--avatar-size, 38px * $hd)_               | -   |
+| --avatar-size-large           | _var(--avatar-size, 56px * $hd)_               | -   |
+| --avatar-spacing-mini         | _var(--avatar-spacing, var(--padding-xs))_     | -   |
+| --avatar-spacing-small        | _var(--avatar-spacing, var(--padding-sm))_     | -   |
+| --avatar-spacing-medium       | _var(--avatar-spacing, var(--padding-md))_     | -   |
+| --avatar-spacing-large        | _var(--avatar-spacing, var(--padding-lg))_     | -   |

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

@@ -0,0 +1,76 @@
+import { Avatar, Badge } from "@fjyueke/bify-core"
+import { Cross, LocationOutlined, SettingOutlined } from "@fjyueke/bify-icons"
+import * as _ from "lodash"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function randomAvatar() {
+  return `https://joesch.moe/api/v1/random?t=${_.random(Number.MAX_VALUE)}`
+}
+
+export default function AvatarDemo() {
+  return (
+    <Page title="Avatar 头像" className="avatar-demo">
+      <Block title="基础用法" className="avatar-block">
+        <Avatar>P</Avatar>
+        <Avatar style={{ background: "green" }}>N</Avatar>
+        <Avatar style={{ background: "pink" }}>HP</Avatar>
+      </Block>
+      <Block title="尺寸" className="avatar-block">
+        <Avatar src={randomAvatar()} size="mini" />
+        <Avatar src={randomAvatar()} size="small" />
+        <Avatar src={randomAvatar()} size="medium" />
+        <Avatar src={randomAvatar()} size="large" />
+      </Block>
+      <Block title="形状" className="avatar-block">
+        <Avatar src={randomAvatar()} />
+        <Avatar src={randomAvatar()} shape="square" />
+        <Avatar src={randomAvatar()} shape="rounded" />
+      </Block>
+      <Block title="群组" className="avatar-block">
+        <Avatar.Group limit={5}>
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+        </Avatar.Group>
+      </Block>
+      <Block title="最大" className="avatar-block">
+        <Avatar.Group limit={3}>
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+          <Avatar src={randomAvatar()} />
+        </Avatar.Group>
+      </Block>
+      <Block title="图标" className="avatar-block">
+        <Avatar style={{ background: "red" }}>
+          <Cross />
+        </Avatar>
+        <Avatar style={{ background: "pink" }}>
+          <LocationOutlined />
+        </Avatar>
+        <Avatar style={{ background: "green" }}>
+          <SettingOutlined />
+        </Avatar>
+      </Block>
+      <Block title="徽章用法" className="avatar-block">
+        <Badge className="avatar-dot" dot position="bottom-right">
+          <Avatar src={randomAvatar()} />
+        </Badge>
+        <Badge
+          className="avatar-avatar"
+          content={<Avatar src={randomAvatar()} />}
+          position="bottom-right"
+        >
+          <Avatar src={randomAvatar()} />
+        </Badge>
+      </Block>
+    </Page>
+  )
+}

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

@@ -0,0 +1,21 @@
+## 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`