@fjyueke/bify-mcp 1.0.0

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

@@ -0,0 +1,138 @@
+import { Cell, Dialog } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicDialog() {
+  return (
+    <>
+      <Cell
+        title="提示弹窗"
+        clickable
+        bordered
+        isLink
+        onClick={() => Dialog.alert({ title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" })}
+      />
+    </>
+  )
+  // )
+  // return (
+  //   <>
+  //     <Dialog
+  //       open
+  //       title="标题"
+  //       message="代码是写出来给人看的，附带能在机器上运行"
+  //       messageAlign="left"
+  //       confirm="ok"
+  //       cancel="cancel"
+  //       onConfirm={() => console.log("confirm")} onCancel={() => console.log("cancel")}
+  //     />
+  //   </>
+  // )
+}
+
+function NoTitleDialog() {
+  return (
+    <>
+      <Cell
+        title="提示弹窗（无标题）"
+        clickable
+        bordered
+        isLink
+        onClick={() => Dialog.alert("生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。")}
+      />
+    </>
+  )
+}
+
+function ConfirmDialog() {
+  return (
+    <>
+      <Cell
+        title="确认弹窗"
+        clickable
+        bordered
+        isLink
+        onClick={() => Dialog.confirm({ title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" })}
+      />
+    </>
+  )
+}
+
+function RoundedDialog() {
+  return (
+    <>
+      <Cell
+        title="提示弹窗"
+        clickable
+        bordered
+        isLink
+        onClick={() => Dialog.confirm({ theme: "rounded", title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" })}
+      />
+    </>
+  )
+}
+
+function RoundedNoTitleDialog() {
+  return (
+    <>
+      <Cell
+        title="提示弹窗（无标题）"
+        clickable
+        bordered
+        isLink
+        onClick={() => Dialog.alert({ theme: "rounded", title: "标题", message: "代码是写出来给人看的，附带能在机器上运行" })}
+      />
+    </>
+  )
+}
+
+function AsyncCloseDialog() {
+  return (
+    <>
+      <Cell
+        title="异步关闭"
+        clickable
+        bordered
+        isLink
+        onClick={() => Dialog.confirm({
+          title: "标题",
+          message: "如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。",
+          async onBeforeClose(action) {
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                // action !== 'confirm'  拦截取消操作
+                resolve(action === "confirm");
+              }, 1000);
+            });
+          },
+          onCancel() {
+            console.log("cancel")
+          },
+          onConfirm() {
+            console.log("confirm")
+          },
+        })}
+      />
+    </>
+  )
+}
+
+export default function DialogDemo() {
+  return (
+    <Page title="Dialog 弹出框" className="dialog-demo">
+      <Block variant="card" title="基础用法">
+        <BasicDialog />
+        <NoTitleDialog />
+        <ConfirmDialog />
+      </Block>
+      <Block variant="card" title="圆角按钮样式">
+        <RoundedDialog />
+        <RoundedNoTitleDialog />
+      </Block>
+      <Block variant="card" title="异步关闭">
+        <AsyncCloseDialog />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/divider/api.md

@@ -0,0 +1,15 @@
+## API
+
+### Divider Props
+
+| 参数       | 说明           | 类型        | 默认值     |
+|----------|--------------|-----------|---------|
+| dashed   | 是否使用虚线       | _boolean_ | `false` |
+| hairline | 是否使用 0.5px 线 | _boolean_ | `true`  |
+| type `v0.7.0` | 水平还是垂直类型 | _horizontal \| vertical_ | `horizontal`  |
+
+### Divider.Text Props
+
+| 参数          | 说明                       | 类型       | 默认值      |
+|-------------|--------------------------|----------|----------|
+| orientation | 内容位置，可选值为 `left` `right` | _string_ | `center` |

package/metaData/components/divider/doc.md

@@ -0,0 +1,108 @@
+# Divider 分割线
+
+### 介绍
+
+用于将内容分隔为多个区域。
+
+### 引入
+
+```ts
+import { Divider } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+默认渲染一条水平分割线。
+
+```tsx
+<Divider />
+```
+
+### 展示文字
+
+通过插槽在可以分割线中间插入内容。
+
+```tsx
+<Divider>文本</Divider>
+```
+
+### 内容位置
+
+通过 `orientation` 指定内容所在位置。
+
+```tsx
+<Divider>
+  <Divider.Text orientation="left">文字</Divider.Text>
+</Divider>
+<Divider>
+  <Divider.Text orientation="right">文字</Divider.Text>
+</Divider>
+```
+
+### 虚线
+
+添加 `dashed` 属性使分割线渲染为虚线。
+
+```tsx
+<Divider dashed>文本</Divider>
+```
+
+### 自定义样式
+
+可以使用 `className` 属性，也可以直接通过 `style` 属性设置分割线的样式。
+
+```tsx
+<Divider style={{ color: "#1989fa", borderColor: "#1989fa", padding: "0 16px" }}>
+  文本
+</Divider>
+```
+
+### 垂直
+
+添加 `type` 属性使分割线垂直展示。
+
+```tsx
+<Divider type='vertical'>文本</Divider>
+<Divider type='vertical' dashed>文本</Divider>
+<Divider type='vertical' dashed hairline>文本</Divider>
+<Divider type="vertical" style={{ color: "#1989fa", borderColor: "#1989fa" }}>
+  文本
+</Divider>
+```
+
+## API
+
+### Divider Props
+
+| 参数       | 说明           | 类型        | 默认值     |
+|----------|--------------|-----------|---------|
+| dashed   | 是否使用虚线       | _boolean_ | `false` |
+| hairline | 是否使用 0.5px 线 | _boolean_ | `true`  |
+| type `v0.7.0` | 水平还是垂直类型 | _horizontal \| vertical_ | `horizontal`  |
+
+### Divider.Text Props
+
+| 参数          | 说明                       | 类型       | 默认值      |
+|-------------|--------------------------|----------|----------|
+| orientation | 内容位置，可选值为 `left` `right` | _string_ | `center` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                            | 默认值                            | 描述  |
+|-------------------------------|--------------------------------|-----|
+| --divider-margin              | _var(--padding-md) 0_          | -   |
+| --divider-vertical-padding    | _0 var(--padding-xs)_          | -   |
+| --divider-color               | _var(--gray-6)_                | -   |
+| --divider-font-size           | _var(--font-size-md)_          | -   |
+| --divider-line-height         | _24px * $hd_                   | -   |
+| --divider-border-color        | _var(--border-color)_          | -   |
+| --divider-border-width        | _var(--border-width-base) 0 0_ | -   |
+| --divider-content-padding     | _var(--padding-md)_            | -   |
+| --divider-content-left-width  | _10%_                          | -   |
+| --divider-content-right-width | _10%_                          | -   |

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

@@ -0,0 +1,45 @@
+import { Divider } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function DividerDemo() {
+  return (
+    <Page title="Divider 分割线" className="divider-demo">
+      <Block title="基础用法">
+        <Divider />
+      </Block>
+      <Block title="展示文字">
+        <Divider>文本</Divider>
+      </Block>
+      <Block title="内容位置">
+        <Divider>
+          <Divider.Text orientation="left">文字</Divider.Text>
+        </Divider>
+        <Divider>
+          <Divider.Text orientation="right">文字</Divider.Text>
+        </Divider>
+      </Block>
+      <Block title="虚线">
+        <Divider dashed>文本</Divider>
+      </Block>
+      <Block title="自定义样式">
+        <Divider style={{ color: "#1989fa", borderColor: "#1989fa", padding: "0 16px" }}>
+          文本
+        </Divider>
+      </Block>
+      <Block title="垂直分割线">
+        <Divider type="vertical">文本</Divider>
+        <Divider type="vertical" dashed>
+          文本
+        </Divider>
+        <Divider type="vertical" hairline>
+          文本
+        </Divider>
+        <Divider type="vertical" style={{ color: "#1989fa", borderColor: "#1989fa" }}>
+          文本
+        </Divider>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/dropdown-menu/api.md

@@ -0,0 +1,37 @@
+## API
+
+### DropdownMenu Props
+
+| 参数                              | 说明                               | 类型     | 默认值  |
+| --------------------------------- | ---------------------------------- | -------- | ------- |
+| direction                         | 菜单展开方向，可选值为`up`         | _string_ | `down`  |
+| backdropType <br>`v0.2.3-alpha.0` | 背景板位置，可选值 `inner` `outer` | _string_ | `inner` |
+
+### DropdownMenu.Item Props
+
+| 参数                         | 说明                   | 类型                             | 默认值         |
+| ---------------------------- | ---------------------- | -------------------------------- | -------------- |
+| defaultValue                 | 默认选中项对应的 value | _any_                            | -              |
+| value                        | 当前选中项对应的 value | _any_                            | -              |
+| title                        | 菜单项标题             | _string_                         | 当前选中项文字 |
+| disabled                     | 是否禁用菜单           | _boolean_                        | `false`        |
+| lock <br>`v0.1.7-alpha.0`    | 是否锁定背景滚动       | _boolean_                        | `false`        |
+| options <br>`v0.1.7-alpha.0` | 选项数组               | 同下方 DropdownMenu.Option Props | -              |
+
+### DropdownMenu.Item Events
+
+| 事件名                    | 说明                          | 回调参数     |
+| ------------------------- | ----------------------------- | ------------ |
+| onChange                  | 点击选项导致 value 变化时触发 | _value: any_ |
+| onOpen `v0.1.1-alpha.1`   | 打开菜单栏时触发              | -            |
+| onClose `v0.1.1-alpha.1`  | 关闭菜单栏时触发              | -            |
+| onOpened `v0.1.1-alpha.1` | 打开菜单栏且动画结束后触发    | -            |
+| onClosed `v0.1.1-alpha.1` | 关闭菜单栏且动画结束后触发    | -            |
+
+### DropdownMenu.Option Props
+
+| 键名  | 说明                                                    | 类型        |
+| ----- | ------------------------------------------------------- | ----------- |
+| value | 标识符                                                  | _any_       |
+| icon  | 左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_ |
+| title | 展示 DropdownMenu 选中的 title 内容                     | _ReactNode_ |

package/metaData/components/dropdown-menu/doc.md

@@ -0,0 +1,279 @@
+# DropdownMenu 下拉菜单
+
+### 介绍
+
+向下弹出的菜单列表。
+
+### 引入
+
+```tsx
+import { DropdownMenu } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+import { DropdownMenu } from "@fjyueke/bify-core"
+
+function BasicDropdownMenu() {
+  const [options] = useState([
+    { title: "默认排序", value: 0 },
+    { title: "好评排序", value: 1 },
+    { title: "销量排序", value: 2 },
+  ])
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item options={options} />
+    </DropdownMenu>
+  )
+}
+```
+
+### 自定义菜单内容
+
+可以通过 `DropdownMenu.Item` 组件自定义内容。
+
+```tsx
+import { DropdownMenu } from "@fjyueke/bify-core"
+import { Key } from "react"
+
+function DropdownMenuWithCustomContent() {
+  const [value, setValue] = useState<Key | false>()
+  const [option1, setOption1] = useState(0)
+  const [switch1, setSwitch1] = useState(true)
+  const [switch2, setSwitch2] = useState(false)
+  const [options] = useState([
+    {
+      title: (
+        <View>
+          默认<View>排序</View>
+        </View>
+      ),
+      value: 0,
+    },
+    { title: "好评排序", value: 1 },
+    { title: "销量排序", value: 2 },
+  ])
+  return (
+    <DropdownMenu value={value} onChange={setValue}>
+      <DropdownMenu.Item
+        value={option1}
+        onChange={setOption1}
+        options={options}
+      ></DropdownMenu.Item>
+      <DropdownMenu.Item title="筛选">
+        <Cell title="包邮" align="center">
+          <Switch size="24" checked={switch1} onChange={setSwitch1} />
+        </Cell>
+        <Cell title="团购" align="center">
+          <Switch size="24" checked={switch2} onChange={setSwitch2} />
+        </Cell>
+        <View style="padding: 5px 16px;">
+          <Button color="danger" block shape="round" onClick={() => setValue(false)}>
+            确认
+          </Button>
+        </View>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+```
+
+### 自定义选中态颜色
+
+通过 `css` 可以自定义菜单标题和选项的选中态颜色。
+
+```tsx
+import { DropdownMenu } from "@fjyueke/bify-core"
+
+function DropdownMenuWithCustomColor() {
+  return (
+    <DropdownMenu className="custom-color">
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>默认排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>好评排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>销量排序</DropdownMenu.Option>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+```
+
+```scss
+.custom-color {
+  --dropdown-menu-title-active-color: #1989fa;
+  --dropdown-menu-option-active-color: #1989fa;
+}
+```
+
+### 向上展开
+
+将 `direction` 属性值设置为 `up`，菜单即可向上展开。
+
+```tsx
+import { DropdownMenu } from "@fjyueke/bify-core"
+
+function UpDropdownMenu() {
+  return (
+    <DropdownMenu direction="up">
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>默认排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>好评排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>销量排序</DropdownMenu.Option>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+```
+
+### 禁用菜单
+
+```tsx
+import { DropdownMenu } from "@fjyueke/bify-core"
+
+function DisabledDropdownMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Item disabled>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item disabled>
+        <DropdownMenu.Option value={0}>默认排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>好评排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>销量排序</DropdownMenu.Option>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+```
+
+### 阻止滑动穿透
+
+在 h5 上设置 lock 即可阻止滑动穿透 \
+若要在微信小程序上支持，还需下面两项设置 \
+1.设置滑动容器高度(--dropdown-menu-item-content-max-height)，不设置超长时无法滑动 \
+2.当下拉展开时，禁用外层滑动(通过 PageMeta，或者你包裹的滑动容器)，不设置无法阻止下拉反方向的滑动
+
+```tsx
+function BasicDropdownMenu() {
+  const [options] = useState(
+    [
+      { title: "默认排序", value: 0 },
+      { title: "好评排序", value: 1 },
+      { title: "销量排序", value: 2 },
+    ].concat(Array.from({ length: 20 }, (_, i) => ({ title: "选项" + i, value: 3 + i }))),
+  )
+  const [opened, setOpened] = useState(false)
+  const getScrollHeight = useCallback((len) => {
+    return len < 5 ? len * 46 : 5 * 46
+  }, [])
+  return (
+    <>
+      <PageMeta pageStyle={opened ? "overflow: hidden;" : ""} />
+      <DropdownMenu>
+        {/* @ts-ignore */}
+        <DropdownMenu.Item
+          style={{ "--dropdown-menu-item-content-max-height": getScrollHeight(23) + "px" }}
+          options={options}
+          lock
+          onOpen={() => setOpened(true)}
+          onClose={() => setOpened(false)}
+        />
+        {/* @ts-ignore */}
+        <DropdownMenu.Item
+          style={{ "--dropdown-menu-item-content-max-height": getScrollHeight(4) + "px" }}
+          lock
+          onOpen={() => setOpened(true)}
+          onClose={() => setOpened(false)}
+        >
+          <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+          <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+          <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+          <DropdownMenu.Option value={3}>活动商品2</DropdownMenu.Option>
+        </DropdownMenu.Item>
+      </DropdownMenu>
+    </>
+  )
+}
+```
+
+## API
+
+### DropdownMenu Props
+
+| 参数                              | 说明                               | 类型     | 默认值  |
+| --------------------------------- | ---------------------------------- | -------- | ------- |
+| direction                         | 菜单展开方向，可选值为`up`         | _string_ | `down`  |
+| backdropType <br>`v0.2.3-alpha.0` | 背景板位置，可选值 `inner` `outer` | _string_ | `inner` |
+
+### DropdownMenu.Item Props
+
+| 参数                         | 说明                   | 类型                             | 默认值         |
+| ---------------------------- | ---------------------- | -------------------------------- | -------------- |
+| defaultValue                 | 默认选中项对应的 value | _any_                            | -              |
+| value                        | 当前选中项对应的 value | _any_                            | -              |
+| title                        | 菜单项标题             | _string_                         | 当前选中项文字 |
+| disabled                     | 是否禁用菜单           | _boolean_                        | `false`        |
+| lock <br>`v0.1.7-alpha.0`    | 是否锁定背景滚动       | _boolean_                        | `false`        |
+| options <br>`v0.1.7-alpha.0` | 选项数组               | 同下方 DropdownMenu.Option Props | -              |
+
+### DropdownMenu.Item Events
+
+| 事件名                    | 说明                          | 回调参数     |
+| ------------------------- | ----------------------------- | ------------ |
+| onChange                  | 点击选项导致 value 变化时触发 | _value: any_ |
+| onOpen `v0.1.1-alpha.1`   | 打开菜单栏时触发              | -            |
+| onClose `v0.1.1-alpha.1`  | 关闭菜单栏时触发              | -            |
+| onOpened `v0.1.1-alpha.1` | 打开菜单栏且动画结束后触发    | -            |
+| onClosed `v0.1.1-alpha.1` | 关闭菜单栏且动画结束后触发    | -            |
+
+### DropdownMenu.Option Props
+
+| 键名  | 说明                                                    | 类型        |
+| ----- | ------------------------------------------------------- | ----------- |
+| value | 标识符                                                  | _any_       |
+| icon  | 左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_ |
+| title | 展示 DropdownMenu 选中的 title 内容                     | _ReactNode_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                            | 默认值                                             | 描述 |
+| ----------------------------------------------- | -------------------------------------------------- | ---- |
+| --dropdown-menu-height                          | _48px \* $hd_                                      | -    |
+| --dropdown-menu-background-color                | _var(--white)_                                     | -    |
+| --dropdown-menu-z-index                         | _11_                                               | -    |
+| --dropdown-menu-box-shadow                      | _0 2px * $hd 12px * $hd rgba(100, 101, 102, 0.12)_ | -    |
+| --dropdown-menu-title-font-size                 | _15px \* $hd_                                      | -    |
+| --dropdown-menu-title-color                     | _var(--text-color)_                                | -    |
+| --dropdown-menu-title-padding                   | _0 var(--padding-xs)_                              | -    |
+| --dropdown-menu-title-line-height               | _var(--line-height-lg)_                            | -    |
+| --dropdown-menu-title-active-opacity            | _var(--active-opacity)_                            | -    |
+| --dropdown-menu-title-active-color              | _var(--danger-color)_                              | -    |
+| --dropdown-menu-title-disabled-color            | _var(--gray-6)_                                    | -    |
+| --dropdown-menu-item-z-index                    | _calc(var(--dropdown-menu-z-index) - 1)_           | -    |
+| --dropdown-menu-item-content-max-height         | _80%_                                              | -    |
+| --dropdown-menu-item-content-animation-duration | _var(--animation-duration-fast)_                   | -    |
+| --dropdown-menu-option-active-color             | _var(--danger-color)_                              | -    |