@fjyueke/bify-mcp 1.0.0

package/metaData/components/number-keyboard/api.md

@@ -0,0 +1,21 @@
+## API
+
+### NumberKeyboard Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前输入值 | _string_ | - |
+| open | 是否显示键盘 | _boolean_ | - |
+| title | 键盘标题 | _string_ | - |
+| maxlength | 输入值最大长度 | _number \| string_ | - |
+| transition | 是否开启过场动画 | _boolean_ | `true` |
+| extraKey | 底部额外按键的内容 | _ReactNode \| [ReactNode, ReactNode]_ | `''` |
+| random | 是否将通过随机顺序展示按键 | _boolean_ | `false` |
+
+### NumberKeyboard Events
+
+| 事件名 | 说明                           | 回调参数      |
+| ------ | ------------------------------ | ------------- |
+| onChange  | 点击按键时触发                 | key: 按键内容 |
+| onBackspace | 点击删除键时触发               | -             |
+| onHide  | 点击关闭按钮时触发             | -             |

package/metaData/components/number-keyboard/doc.md

@@ -0,0 +1,247 @@
+# NumberKeyboard 数字键盘
+
+### 介绍
+
+虚拟数字键盘，可以配合[密码输入框组件](/components/password-input/)或自定义的输入框组件使用。
+
+### 引入
+
+```tsx
+import { NumberKeyboard } from "@fjyueke/bify-core";
+```
+
+## 代码演示
+
+### 默认样式
+
+数字键盘提供了 `onKeyPress`、`onBackspace`、`onHide` 事件，分别对应输入内容、删除内容和隐藏键盘。
+
+```tsx
+function BasicNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出默认键盘"
+        isLink
+        onClick={() => onKeyboard?.("basic")}
+      />
+      <NumberKeyboard
+        open={keyboard === "basic"}
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      />
+    </>
+  )
+}
+```
+
+> 点击键盘以外的区域时，键盘会自动收起，通过阻止元素上的 touchstart 事件冒泡可以避免键盘收起。
+
+### 带右侧栏的键盘
+
+使用 `NumberKeyboard.Sidebar` 子组件可以用来展示键盘的右侧栏，常用于输入金额的场景。
+
+```tsx
+function SidebarNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出带右侧栏的键盘"
+        isLink
+        onClick={() => onKeyboard?.("sidebar")}
+      />
+      <NumberKeyboard
+        open={keyboard === "sidebar"}
+        extraKey={[undefined, "."]}
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Sidebar>
+          <NumberKeyboard.Key size="large" code="backspace" />
+          <NumberKeyboard.Key size="large" code="keyboard-hide" color="blue">
+            完成
+          </NumberKeyboard.Key>
+        </NumberKeyboard.Sidebar>
+      </NumberKeyboard>
+    </>
+  )
+}
+
+```
+
+### 身份证号键盘
+
+通过 `extraKey` 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 `extraKey` 设置为 `X`。
+
+```tsx
+function IdCardNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出身份证号键盘"
+        isLink
+        onClick={() => onKeyboard?.("idCard")}
+      />
+      <NumberKeyboard
+        open={keyboard === "idcard"}
+        extraKey="X"
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Header>
+          <NumberKeyboard.Button>完成</NumberKeyboard.Button>
+        </NumberKeyboard.Header>
+      </NumberKeyboard>
+    </>
+  )
+}
+```
+
+### 键盘标题
+
+通过 `title` 属性可以设置键盘标题。
+
+```tsx
+function TitleNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出身份证号键盘"
+        isLink
+        onClick={() => onKeyboard?.("title")}
+      />
+      <NumberKeyboard
+        open={keyboard === "title"}
+        title="键盘标题"
+        extraKey="."
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Header>
+          <NumberKeyboard.Button>完成</NumberKeyboard.Button>
+        </NumberKeyboard.Header>
+      </NumberKeyboard>
+    </>
+  )
+}
+```
+
+### 配置多个按键
+
+将 `extraKey` 配置成数组，可以实现配置多个按键。
+
+```tsx
+function NumberKeyboardWithKeys(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出配置多个按键的键盘"
+        isLink
+        onClick={() => onKeyboard?.("keys")}
+      />
+      <NumberKeyboard
+        open={keyboard === "keys"}
+        extraKey={["00", "."]}
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Sidebar>
+          <NumberKeyboard.Key size="large" code="backspace" />
+          <NumberKeyboard.Key size="large" code="keyboard-hide" color="blue">
+            完成
+          </NumberKeyboard.Key>
+        </NumberKeyboard.Sidebar>
+      </NumberKeyboard>
+    </>
+  )
+}
+```
+
+### 随机数字键盘
+
+通过 `random` 属性可以随机排序数字键盘，常用于安全等级较高的场景。
+
+```tsx
+function RandomNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出配置随机数字的键盘"
+        isLink
+        onClick={() => onKeyboard?.("random")}
+      />
+      <NumberKeyboard
+        open={keyboard === "random"}
+        random
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      />
+    </>
+  )
+}
+```
+
+## API
+
+### NumberKeyboard Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前输入值 | _string_ | - |
+| open | 是否显示键盘 | _boolean_ | - |
+| title | 键盘标题 | _string_ | - |
+| maxlength | 输入值最大长度 | _number \| string_ | - |
+| transition | 是否开启过场动画 | _boolean_ | `true` |
+| extraKey | 底部额外按键的内容 | _ReactNode \| [ReactNode, ReactNode]_ | `''` |
+| random | 是否将通过随机顺序展示按键 | _boolean_ | `false` |
+
+### NumberKeyboard Events
+
+| 事件名 | 说明                           | 回调参数      |
+| ------ | ------------------------------ | ------------- |
+| onChange  | 点击按键时触发                 | key: 按键内容 |
+| onBackspace | 点击删除键时触发               | -             |
+| onHide  | 点击关闭按钮时触发             | -             |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                          | 默认值                                         | 描述  |
+|---------------------------------------------|---------------------------------------------|-----|
+| number-keyboard-z-index                     | _100_                                       | -   |
+| number-keyboard-background-color            | _var(--gray-2)_                             | -   |
+| number-keyboard-with-title-border-radius    | _20px * $hd 20px * $hd 0 0_                 | -   |
+| number-keyboard-header-color                | _var(--gray-7)_                             | -   |
+| number-keyboard-header-padding-top          | _6px * $hd_                                 | -   |
+| number-keyboard-header-height               | _34px * $hd_                                | -   |
+| number-keyboard-header-font-size            | _var(--font-size-lg)_                       | -   |
+| number-keyboard-key-height                  | _48px * $hd_                                | -   |
+| number-keyboard-key-font-size               | _28px * $hd_                                | -   |
+| number-keyboard-key-background-color        | _var(--white, $white)_                      | -   |
+| number-keyboard-key-border-radius           | _var(--border-radius-lg)_                   | -   |
+| number-keyboard-key-line-height             | _1.5_                                       | -   |
+| number-keyboard-key-active-background-color | _var(--gray-3)_                             | -   |
+| number-keyboard-key-active-opacity          | _var(--active-opacity)_                     | -   |
+| number-keyboard-large-key-font-size         | _var(--font-size-lg)_                       | -   |
+| number-keyboard-hide-padding                | _0 var(--padding-md)_                       | -   |
+| number-keyboard-hide-font-size              | _24px * $hd_                                | -   |
+| number-keyboard-hide-color                  | _var(--text-link-color)_                    | -   |
+| number-keyboard-hide-active-opacity         | _var(--number-keyboard-key-active-opacity)_ | -   |
+| number-keyboard-backspace-font-size         | _22px * $hd_                                | -   |
+| number-keyboard-button-color                | _var(--white)_                              | -   |
+| number-keyboard-button-background-color     | _var(--primary-color)_                      | -   |

package/metaData/components/number-keyboard/example/index.tsx

@@ -0,0 +1,201 @@
+import { Cell, NumberKeyboard, Toast } from "@fjyueke/bify-core"
+import { ArrowRight } from "@fjyueke/bify-icons"
+import { useState } from "react"
+import BlockCard from "../../../components/block-card"
+import Page from "../../../components/page"
+import "./index.scss"
+
+interface KeyboardProps {
+  keyboard?: string
+
+  onKeyboard?(keyboard: string): void
+
+  onKeyPress?(value: string | number, code: string): void
+}
+
+function BasicNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出默认键盘"
+        isLink
+        onClick={() => onKeyboard?.("basic")}
+      />
+      <NumberKeyboard
+        open={keyboard === "basic"}
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      />
+    </>
+  )
+}
+
+function SidebarNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出带右侧栏的键盘"
+        isLink
+        onClick={() => onKeyboard?.("sidebar")}
+      />
+      <NumberKeyboard
+        open={keyboard === "sidebar"}
+        extraKey={[undefined, "."]}
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Sidebar>
+          <NumberKeyboard.Key size="large" code="backspace" />
+          <NumberKeyboard.Key size="large" code="keyboard-hide" color="blue">
+            完成
+          </NumberKeyboard.Key>
+        </NumberKeyboard.Sidebar>
+      </NumberKeyboard>
+    </>
+  )
+}
+
+function IdCardNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出身份证号键盘"
+        isLink
+        onClick={() => onKeyboard?.("idCard")}
+      />
+      <NumberKeyboard
+        open={keyboard === "idCard"}
+        extraKey="X"
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Header>
+          <NumberKeyboard.Button>完成</NumberKeyboard.Button>
+        </NumberKeyboard.Header>
+      </NumberKeyboard>
+    </>
+  )
+}
+
+function TitleNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出带标题的键盘"
+        isLink
+        onClick={() => onKeyboard?.("title")}
+      />
+      <NumberKeyboard
+        open={keyboard === "title"}
+        title="键盘标题"
+        extraKey="."
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Header>
+          <NumberKeyboard.Button>完成</NumberKeyboard.Button>
+        </NumberKeyboard.Header>
+      </NumberKeyboard>
+    </>
+  )
+}
+
+function NumberKeyboardWithKeys(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出配置多个按键的键盘"
+        isLink
+        onClick={() => onKeyboard?.("keys")}
+      />
+      <NumberKeyboard
+        open={keyboard === "keys"}
+        extraKey={["00", "."]}
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      >
+        <NumberKeyboard.Sidebar>
+          <NumberKeyboard.Key size="large" code="backspace" />
+          <NumberKeyboard.Key size="large" code="keyboard-hide" color="blue">
+            完成
+          </NumberKeyboard.Key>
+        </NumberKeyboard.Sidebar>
+      </NumberKeyboard>
+    </>
+  )
+}
+
+function RandomNumberKeyboard(props: KeyboardProps) {
+  const { keyboard, onKeyboard, onKeyPress } = props
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹出配置随机数字的键盘"
+        isLink
+        onClick={() => onKeyboard?.("random")}
+      />
+      <NumberKeyboard
+        open={keyboard === "random"}
+        random
+        onKeyPress={onKeyPress}
+        onHide={() => onKeyboard?.("")}
+      />
+    </>
+  )
+}
+
+export default function NumberKeyboardDemo() {
+  const [keyboard, setKeyboard] = useState("basic")
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState<any>()
+
+  const onKeyPress = (aValue: string | number, code: string) => {
+    setOpen(code !== "keyboard-hide")
+    if (code === "backspace") {
+      setValue("backspace")
+    } else if (code === "extra") {
+      setValue(`输入：${aValue}`)
+    }
+  }
+
+  return (
+    <Page title="NumberKeyboard 数字键盘" className="number-keyboard-demo">
+      <BlockCard>
+        <BasicNumberKeyboard keyboard={keyboard} onKeyboard={setKeyboard} onKeyPress={onKeyPress} />
+        <SidebarNumberKeyboard
+          keyboard={keyboard}
+          onKeyboard={setKeyboard}
+          onKeyPress={onKeyPress}
+        />
+        <IdCardNumberKeyboard
+          keyboard={keyboard}
+          onKeyboard={setKeyboard}
+          onKeyPress={onKeyPress}
+        />
+        <TitleNumberKeyboard keyboard={keyboard} onKeyboard={setKeyboard} onKeyPress={onKeyPress} />
+        <NumberKeyboardWithKeys
+          keyboard={keyboard}
+          onKeyboard={setKeyboard}
+          onKeyPress={onKeyPress}
+        />
+        <RandomNumberKeyboard
+          keyboard={keyboard}
+          onKeyboard={setKeyboard}
+          onKeyPress={onKeyPress}
+        />
+      </BlockCard>
+      <Toast open={open} duration={800} onClose={() => setOpen(false)} children={value} />
+    </Page>
+  )
+}

package/metaData/components/pagination/api.md

@@ -0,0 +1,18 @@
+## API
+
+### Props
+
+| 参数                      | 说明                       | 类型     | 默认值 |
+| ------------------------- | -------------------------- | -------- | ------ |
+| current                   | 当前页码                   | _number_ | -      |
+| mode `v0.1.0-alpha.9`     | 显示模式，可选值为 simple  | _string_ | multi  |
+| prevText `v0.1.0-alpha.9` | 上一页按钮文字             | _string_ | 上一页 |
+| nextText `v0.1.0-alpha.9` | 下一页按钮文字             | _string_ | 下一页 |
+| siblingCount              | 当前页码两侧显示的数字个数 | _number_ | `2`    |
+| count                     | 总页数                     | _number_ | -      |
+
+### Events
+
+| 事件名   | 说明           | 回调参数 |
+| -------- | -------------- | -------- |
+| onChange | 页码改变时触发 | -        |

package/metaData/components/pagination/doc.md

@@ -0,0 +1,113 @@
+# Pagination 分页
+
+### 介绍
+
+数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。
+
+### 引入
+
+```js
+import { Pagination } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `current` 来绑定当前页码。
+
+```tsx
+export default function BasicPagination() {
+  const [current, setCurrent] = useState<number>(1)
+  return <Pagination current={current} count={10} onChange={(page) => setCurrent(page)} />
+}
+```
+
+### 简单模式
+
+将 `mode` 设置为 `simple` 来切换到简单模式，此时分页器不会展示具体的页码按钮。
+
+```tsx
+export default function BasicPagination() {
+  const [current, setCurrent] = useState<number>(1)
+  return (
+    <Pagination current={current} count={10} mode="simple" onChange={(page) => setCurrent(page)} />
+  )
+}
+```
+
+### 显示省略号
+
+设置 `Pagination.Item.type` 为 `start-ellipsis` 或者 `end-ellipsis` 展示省略号按钮，点击后可以快速跳转。
+
+```tsx
+function PaginationWithEllipses() {
+  const [current, setCurrent] = useState<number>(1)
+  return (
+    <Pagination current={current} siblingCount={1} count={13} onChange={(page) => setCurrent(page)}>
+      <Pagination.Item type="start-ellipsis" />
+      <Pagination.Item type="end-ellipsis" />
+    </Pagination>
+  )
+}
+```
+
+### 自定义按钮
+
+通过 `Pagination.Item` 组件来自定义分页按钮的内容。
+
+```tsx
+function PaginationWithCustomButton() {
+  const [current, setCurrent] = useState<number>(1)
+  return (
+    <Pagination current={current} count={6} onChange={(page) => setCurrent(page)}>
+      <Pagination.Item type="previous">
+        <ArrowLeft />
+      </Pagination.Item>
+      <Pagination.Item type="next">
+        <ArrowRight />
+      </Pagination.Item>
+    </Pagination>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数                      | 说明                       | 类型     | 默认值 |
+| ------------------------- | -------------------------- | -------- | ------ |
+| current                   | 当前页码                   | _number_ | -      |
+| mode `v0.1.0-alpha.9`     | 显示模式，可选值为 simple  | _string_ | multi  |
+| prevText `v0.1.0-alpha.9` | 上一页按钮文字             | _string_ | 上一页 |
+| nextText `v0.1.0-alpha.9` | 下一页按钮文字             | _string_ | 下一页 |
+| siblingCount              | 当前页码两侧显示的数字个数 | _number_ | `2`    |
+| count                     | 总页数                     | _number_ | -      |
+
+### Events
+
+| 事件名   | 说明           | 回调参数 |
+| -------- | -------------- | -------- |
+| onChange | 页码改变时触发 | -        |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                        | 默认值                         | 描述 |
+| ------------------------------------------- | ------------------------------ | ---- |
+| --pagination-height                         | _40px \* $hd_                  | -    |
+| --pagination-font-size                      | _var(--font-size-md)_          | -    |
+| --pagination-background-color               | _var(--white)_                 | -    |
+| --pagination-item-min-width                 | _36px \* $hd_                  | -    |
+| --pagination-item-color                     | _var(--blue)_                  | -    |
+| --pagination-item-active-color              | _var(--white)_                 | -    |
+| --pagination-item-active-background-color   | _var(--pagination-item-color)_ | -    |
+| --pagination-item-disabled-color            | _var(--gray-7)_                | -    |
+| --pagination-item-disabled-background-color | _var(--background-color)_      | -    |
+| --pagination-item-disabled-opacity          | _var(--disabled-opacity)_      | -    |
+| --pagination-button-padding                 | _0 var(--padding-base)_        | -    |
+| --pagination-desc-color                     | _var(--gray-7)_                | -    |

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

@@ -0,0 +1,73 @@
+import { Pagination } from "@fjyueke/bify-core"
+import { ArrowLeft, ArrowRight } from "@fjyueke/bify-icons"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicPagination() {
+  const [current, setCurrent] = useState<number>(1)
+  return (
+    <Block title="基础用法">
+      <Pagination current={current} count={10} onChange={(page) => setCurrent(page)} />
+    </Block>
+  )
+}
+
+function SimplePagination() {
+  const [current, setCurrent] = useState<number>(1)
+  return (
+    <Block title="简单模式">
+      <Pagination
+        current={current}
+        count={10}
+        mode="simple"
+        onChange={(page) => setCurrent(page)}
+      />
+    </Block>
+  )
+}
+
+function PaginationWithEllipses() {
+  const [current, setCurrent] = useState<number>(1)
+  return (
+    <Block title="显示省略号">
+      <Pagination
+        current={current}
+        siblingCount={1}
+        count={13}
+        onChange={(page) => setCurrent(page)}
+      >
+        <Pagination.Item type="start-ellipsis" />
+        <Pagination.Item type="end-ellipsis" />
+      </Pagination>
+    </Block>
+  )
+}
+
+function PaginationWithCustomButton() {
+  const [current, setCurrent] = useState<number>(1)
+  return (
+    <Block title="自定义按钮">
+      <Pagination current={current} count={6} onChange={(page) => setCurrent(page)}>
+        <Pagination.Item type="previous">
+          <ArrowLeft />
+        </Pagination.Item>
+        <Pagination.Item type="next">
+          <ArrowRight />
+        </Pagination.Item>
+      </Pagination>
+    </Block>
+  )
+}
+
+export default function PaginationDemo() {
+  return (
+    <Page title="Pagination 分页" className="pagination-demo">
+      <BasicPagination />
+      <SimplePagination />
+      <PaginationWithEllipses />
+      <PaginationWithCustomButton />
+    </Page>
+  )
+}

package/metaData/components/password-input/api.md

@@ -0,0 +1,25 @@
+## API
+
+### PasswordInput Props
+
+| 参数       | 说明                                  | 类型           | 默认值                         |
+|----------|-------------------------------------|--------------|-----------------------------|
+| value    | 密码值                                 | _string_     | `''`                        |
+| length   | 密码最大长度                              | _number \| string_                     | `6` |
+| gutter   | 输入框格子之间的间距，如 `20px` `2em`，默认单位为`px` | _number \| string_                     | `0` |
+| mask     | 是否隐藏密码内容                            | _boolean_    | `true`                      |
+| focus    | 是否聚焦，聚焦时会显示光标                       | _boolean_    | `false`                     |
+| feedback | 输入框下方文字提示           | _ReactText \| PasswordInputFeedbackProps \| ReactElement_ | - |
+
+### PasswordInput Events
+
+| 事件名     | 说明       | 回调参数 |
+|---------|----------|------|
+| onFocus | 输入框聚焦时触发 | -    |
+
+
+### PasswordInput.Feedback Props
+
+| 参数    | 说明                                                      | 类型       | 默认值 |
+|-------|---------------------------------------------------------|----------|-----|
+| color | 颜色，可选值为 `primary` `info` `success`  `warning`  `danger` | _string_ | -   |