@fjyueke/bify-mcp 1.0.0

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

@@ -0,0 +1,232 @@
+import { Field, Input, Picker, Popup, Toast } from "@fjyueke/bify-core"
+import { ArrowRight } from "@fjyueke/bify-icons"
+import { useMemo, useState } from "react"
+import Block from "../../../components/block"
+import CustomWrapper from "../../../components/custom-wrapper"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicPicker() {
+  const columns = useMemo(() => [
+    { label2: "杭州", value: "Hangzhou" },
+    { label2: "宁波", value: "Ningbo" },
+    { label2: "温州", value: "Wenzhou" },
+    { label2: "绍兴", value: "Shaoxing" },
+    { label2: "湖州", value: "Huzhou" }
+  ], [])
+
+  return (
+    <>
+      <Toast id="toast" />
+      <Picker
+        title="标题"
+        columns={columns}
+        columnsFieldNames={{ label: "label2" }}
+        onChange={(value) => Toast.open(`当前值：${value}`)}
+        onConfirm={(value) => Toast.open(`当前值：${value}`)}
+      >
+      </Picker>
+    </>
+  )
+}
+
+function DefaultPicker() {
+  const columns = useMemo(() => [
+    { label: "杭州", value: "Hangzhou" },
+    { label: "宁波", value: "Ningbo" },
+    { label: "温州", value: "Wenzhou" },
+    { label: "绍兴", value: "Shaoxing" },
+    { label: "湖州", value: "Huzhou" }
+  ], [])
+  return (
+    <>
+      <Toast id="toast" />
+      <Picker
+        defaultValue="Wenzhou"
+        title="标题"
+        columns={columns}
+        onChange={(value) => Toast.open(`当前值：${value}`)}
+        onConfirm={(value) => Toast.open(`当前值：${value}`)}
+      >
+      </Picker>
+    </>
+  )
+}
+
+function PickerWithMultiColumns() {
+  const columns = useMemo(() => [
+    [
+      { label: "周一", value: "Monday" },
+      { label: "周二", value: "Tuesday" },
+      { label: "周三", value: "Wednesday" },
+      { label: "周四", value: "Thursday" },
+      { label: "周五", value: "Friday" }
+    ],
+    [
+      { label: "上午", value: "morning" },
+      { label: "下午", value: "afternoon"},
+      { label: "晚上", value: "evening"}
+    ]
+  ], [])
+  return (
+    <>
+      <Toast id="toast" />
+      <Picker
+        defaultValue={["Monday", "evening"]}
+        title="标题"
+        columns={columns}
+        onChange={(value) => Toast.open(`当前值：${value}`)}
+        onConfirm={(value) => Toast.open(`当前值：${value}`)}
+      >
+      </Picker>
+    </>
+  )
+}
+
+function DisabledPicker() {
+  const columns = useMemo(() => [
+    { label: "杭州", value: "Hangzhou" },
+    { label: "宁波", value: "Ningbo" },
+    { label: "温州", value: "Wenzhou", disabled: true },
+    { label: "绍兴", value: "Shaoxing" },
+    { label: "湖州", value: "Huzhou" }
+  ], [])
+  return (
+    <Picker
+      columns={columns}
+      onChange={(value) => Toast.open(`当前值：${value}`)}
+      onConfirm={(value) => Toast.open(`当前值：${value}`)}
+    >
+    </Picker>
+  )
+}
+
+function LoadingPicker() {
+  const columns = useMemo(() => [
+    { label: "杭州", value: "Hangzhou" },
+    { label: "宁波", value: "Ningbo" },
+    { label: "温州", value: "Wenzhou" },
+    { label: "绍兴", value: "Shaoxing" },
+    { label: "湖州", value: "Huzhou" }
+  ], [])
+
+  return (
+    <>
+      <Toast id="toast" />
+      <Picker
+        loading
+        title="标题"
+        columns={columns}
+        onChange={(value) => Toast.open(`当前值：${value}`)}
+        onConfirm={(value) => Toast.open(`当前值：${value}`)}
+      >
+      </Picker>
+    </>
+  )
+}
+
+function PickerPopup() {
+  const [value, setValue] = useState("")
+  const [openPicker, setOpenPicker] = useState(false)
+  const columns = useMemo(() => [
+    { label: "杭州", value: "Hangzhou" },
+    { label: "宁波", value: "Ningbo" },
+    { label: "温州", value: "Wenzhou" },
+    { label: "绍兴", value: "Shaoxing" },
+    { label: "湖州", value: "Huzhou" }
+  ], [])
+  return (
+    <>
+      <Field label="城市" isLink onClick={() => setOpenPicker(true)}>
+        <Input readonly placeholder="选择城市" value={value} />
+      </Field>
+      <Popup open={openPicker} rounded placement="bottom" onClose={setOpenPicker}>
+        <Popup.Backdrop />
+        <Picker
+          title="搭配弹出层使用"
+          cancelText="取消"
+          confirmText="确认"
+          columns={columns}
+          onCancel={() => setOpenPicker(false)}
+          onConfirm={(values) => {
+            setValue(values as string)
+            setOpenPicker(false)
+          }}
+        >
+        </Picker>
+      </Popup>
+    </>
+  )
+}
+
+function ManualPicker() {
+  return (
+    <>
+      <Toast id="toast" />
+      <Picker
+        onChange={(value) => Toast.open(`当前值：${value}`)}
+        onConfirm={(value) => Toast.open(`当前值：${value}`)}
+      >
+        <Picker.Toolbar>
+          <Picker.Button>取消</Picker.Button>
+          <Picker.Title>标题</Picker.Title>
+          <Picker.Button>确认</Picker.Button>
+        </Picker.Toolbar>
+        <Picker.Column>
+          <Picker.Option>周一</Picker.Option>
+          <Picker.Option>周二</Picker.Option>
+          <Picker.Option>周三</Picker.Option>
+          <Picker.Option>周四</Picker.Option>
+          <Picker.Option>周五</Picker.Option>
+        </Picker.Column>
+        <Picker.Column>
+          <Picker.Option>上午</Picker.Option>
+          <Picker.Option>下午</Picker.Option>
+          <Picker.Option>晚上</Picker.Option>
+        </Picker.Column>
+      </Picker>
+    </>
+  )
+}
+
+export default function PickerDemo() {
+  return (
+    <Page title="Picker 选择器" className="picker-demo">
+      <Block variant="card" title="基础用法">
+        <CustomWrapper>
+          <BasicPicker />
+        </CustomWrapper>
+      </Block>
+      <Block variant="card" title="默认选中项">
+        <CustomWrapper>
+          <DefaultPicker />
+        </CustomWrapper>
+      </Block>
+      <Block variant="card" title="多列选择">
+        <CustomWrapper>
+          <PickerWithMultiColumns />
+        </CustomWrapper>
+      </Block>
+      <Block variant="card" title="禁用选项">
+        <CustomWrapper>
+          <DisabledPicker />
+        </CustomWrapper>
+      </Block>
+      <Block variant="card" title="加载状态">
+        <CustomWrapper>
+          <LoadingPicker />
+        </CustomWrapper>
+      </Block>
+      <Block variant="card" title="搭配弹出层使用">
+        <CustomWrapper>
+          <PickerPopup />
+        </CustomWrapper>
+      </Block>
+      <Block variant="card" title="手动控制DOM">
+        <CustomWrapper>
+          <ManualPicker />
+        </CustomWrapper>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/popup/api.md

@@ -0,0 +1,48 @@
+## API
+
+### Popup Props
+
+| 参数                  | 说明                                                      | 类型               | 默认值   |
+| --------------------- | --------------------------------------------------------- | ------------------ | -------- |
+| defaultOpen           | 默认是否显示弹出层                                        | _boolean_          | `false`  |
+| open                  | 是否显示弹出层                                            | _boolean_          | `false`  |
+| placement             | 弹出位置，可选值为 `top` `bottom` `right` `left` `center` | _string_           | `center` |
+| duration              | 动画时长，单位毫秒                                        | _number \| string_ | `300`    |
+| rounded               | 是否显示圆角                                              | _boolean_          | `false`  |
+| lock `v0.1.4-alpha.0` | 是否锁定背景滚动                                          | _boolean_          | `true`   |
+
+动画相关参数继承自 `Transition` 组件，详细属性参见：[Transition 组件](/components/style/#动画)
+| Popup 参数 | Transition 对应参数 |
+| --------- | ---------------------- |
+| mountOnEnter | mountOnEnter |
+| transactionName | name |
+| transitionAppear | appear |
+| transactionTimeout | timeout |
+| onTransitionEnter | onEnter |
+| onTransitionEntered | onEntered |
+| onTransitionExit | onExit |
+| onTransitionExited | onExited |
+
+### Popup.Backdrop Props
+
+| 参数      | 说明                   | 类型               | 默认值  |
+| --------- | ---------------------- | ------------------ | ------- |
+| className | 背景板类名             | _string_           | `false` |
+| style     | 背景板样式             | _CSSProperties_    | `false` |
+| open      | 是否显示背景板         | _boolean_          | `false` |
+| closeable | 是否在点击遮罩层后关闭 | _boolean_          | `true`  |
+| duration  | 动画时长，单位毫秒     | _number \| string_ | `300`   |
+
+### Popup.Close Props
+
+| 参数      | 说明                                                         | 类型        | 默认值      |
+| --------- | ------------------------------------------------------------ | ----------- | ----------- |
+| placement | 关闭图标位置，可选值 `top-left` `bottom-left` `bottom-right` | _string_    | `top-right` |
+| children  | 图标内容                                                     | _ReactNode_ | `<Cross />` |
+
+### Events
+
+| 事件名  | 说明             | 回调参数             |
+| ------- | ---------------- | -------------------- |
+| onClick | 点击弹出层时触发 | _event: ITouchEvent_ |
+| onClose | 关闭弹出层时触发 | -                    |

package/metaData/components/popup/doc.md

@@ -0,0 +1,150 @@
+# Popup 弹出层
+
+### 介绍
+
+弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
+
+### 引入
+
+```tsx
+import { Popup } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `open` 控制弹出层是否展示。
+
+```tsx
+<Popup open>内容</Popup>
+```
+
+### 弹出位置
+
+通过 `placement` 属性设置弹出位置，默认居中弹出，可以设置为 `top`、`bottom`、`left`、`right`。
+
+```tsx
+<Popup defaultOpen placement="top" style={{ height: "30%" }} />
+```
+
+### 关闭图标
+
+设置 `Popup.Close` 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 `closeIcon` 属性自定义图标。
+
+```tsx
+<Popup defaultOpen placement="bottom" style={{ height: '30%' }}>
+  <Popup.Close />
+</Popup>
+
+<!-- 自定义图标 -->
+<Popup defaultOpen placement="bottom" style={{ height: '30%' }}>
+  <Popup.Close>
+    <Close />
+  </Popup.Close>
+</Popup>
+```
+
+### 圆角弹窗
+
+设置 `rounded` 属性后，弹窗会根据弹出位置添加不同的圆角样式。
+
+```tsx
+<!-- 圆角弹窗（居中） -->
+<Popup
+  open
+  style={{
+    padding: "64px",
+  }}
+  rounded
+  lock={false}
+>
+  内容
+</Popup>
+
+<!-- 圆角弹窗（底部） -->
+<Popup open rounded placement="bottom" style={{ height: '30%' }} />
+```
+
+### 禁止滚动穿透
+
+```tsx
+<Popup lock>
+  <View>无法滑动</View>
+</Popup>
+```
+
+如果需要内容支持溢出滚动，则需要包裹一层 ScrollView 组件。
+
+```tsx
+<Popup lock>
+  <ScrollView>可以滑动</ScrollView>
+</Popup>
+```
+
+## API
+
+### Popup Props
+
+| 参数                  | 说明                                                      | 类型               | 默认值   |
+| --------------------- | --------------------------------------------------------- | ------------------ | -------- |
+| defaultOpen           | 默认是否显示弹出层                                        | _boolean_          | `false`  |
+| open                  | 是否显示弹出层                                            | _boolean_          | `false`  |
+| placement             | 弹出位置，可选值为 `top` `bottom` `right` `left` `center` | _string_           | `center` |
+| duration              | 动画时长，单位毫秒                                        | _number \| string_ | `300`    |
+| rounded               | 是否显示圆角                                              | _boolean_          | `false`  |
+| lock `v0.1.4-alpha.0` | 是否锁定背景滚动                                          | _boolean_          | `true`   |
+
+动画相关参数继承自 `Transition` 组件，详细属性参见：[Transition 组件](/components/style/#动画)
+| Popup 参数 | Transition 对应参数 |
+| --------- | ---------------------- |
+| mountOnEnter | mountOnEnter |
+| transactionName | name |
+| transitionAppear | appear |
+| transactionTimeout | timeout |
+| onTransitionEnter | onEnter |
+| onTransitionEntered | onEntered |
+| onTransitionExit | onExit |
+| onTransitionExited | onExited |
+
+### Popup.Backdrop Props
+
+| 参数      | 说明                   | 类型               | 默认值  |
+| --------- | ---------------------- | ------------------ | ------- |
+| className | 背景板类名             | _string_           | `false` |
+| style     | 背景板样式             | _CSSProperties_    | `false` |
+| open      | 是否显示背景板         | _boolean_          | `false` |
+| closeable | 是否在点击遮罩层后关闭 | _boolean_          | `true`  |
+| duration  | 动画时长，单位毫秒     | _number \| string_ | `300`   |
+
+### Popup.Close Props
+
+| 参数      | 说明                                                         | 类型        | 默认值      |
+| --------- | ------------------------------------------------------------ | ----------- | ----------- |
+| placement | 关闭图标位置，可选值 `top-left` `bottom-left` `bottom-right` | _string_    | `top-right` |
+| children  | 图标内容                                                     | _ReactNode_ | `<Cross />` |
+
+### Events
+
+| 事件名  | 说明             | 回调参数             |
+| ------- | ---------------- | -------------------- |
+| onClick | 点击弹出层时触发 | _event: ITouchEvent_ |
+| onClose | 关闭弹出层时触发 | -                    |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                            | 默认值                           | 描述 |
+| ------------------------------- | -------------------------------- | ---- |
+| --popup-z-index                 | _1010_                           | -    |
+| --popup-background-color        | _var(--background-color-light)_  | -    |
+| --popup-animation-duration      | _var(--animation-duration-base)_ | -    |
+| --popup-rounded-border-radius   | _16px \* $hd_                    | -    |
+| --popup-close-icon-z-index      | _1_                              | -    |
+| --popup-close-icon-size         | _22px \* $hd_                    | -    |
+| --popup-close-icon-color        | _var(--gray-5)_                  | -    |
+| --popup-close-icon-active-color | _var(--gray-6)_                  | -    |
+| --popup-close-icon-margin       | _16px \* $hd_                    | -    |

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

@@ -0,0 +1,214 @@
+import { ScrollView } from "@tarojs/components"
+import { Cell, Popup } from "@fjyueke/bify-core"
+import { PopupPlacement } from "@fjyueke/bify-core/popup"
+import { Close } from "@fjyueke/bify-icons"
+import { CSSProperties, useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicPopup() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Cell clickable title="显示遮盖层" isLink onClick={() => setOpen(true)} />
+      <Popup
+        open={open}
+        style={{
+          padding: "30px 50px",
+        }}
+        onClose={setOpen}
+      >
+        内容
+      </Popup>
+    </>
+  )
+}
+
+function CenterRoundPopup() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Cell
+        clickable
+        title="圆角弹窗（居中）"
+        isLink
+        onClick={() => setOpen(true)}
+      />
+      <Popup
+        open={open}
+        style={{
+          padding: "64px",
+        }}
+        onClose={setOpen}
+        rounded
+      >
+        内容
+      </Popup>
+    </>
+  )
+}
+
+function LockPopup() {
+  const [open, setOpen] = useState(false)
+  const [data] = useState(new Array(30).fill(0))
+  return (
+    <>
+      <Cell
+        clickable
+        title="弹窗（禁止滚动穿透）"
+        isLink
+        onClick={() => setOpen(true)}
+      />
+      <Popup
+        open={open}
+        style={{
+          height: "30%",
+        }}
+        rounded
+        lock
+        placement="bottom"
+        onClose={setOpen}
+      >
+        <ScrollView className="popup-demo-scroll" scrollY>
+          {data.map((_, index) => (
+            <Cell key={index}>内容-{index}</Cell>
+          ))}
+        </ScrollView>
+      </Popup>
+    </>
+  )
+}
+
+interface OpenOptions {
+  open?: boolean
+  closeable?: boolean
+  customer?: boolean
+  style?: CSSProperties
+  placement?: PopupPlacement
+  rounded?: boolean
+}
+
+export default function PopupDemo() {
+  const [options, setOptions] = useState<OpenOptions>({})
+
+  function handleOpen({ placement, rounded, closeable, customer }: OpenOptions) {
+    const openOptions: OpenOptions = {
+      open: true,
+      placement,
+      rounded,
+      closeable,
+      customer,
+    }
+    if (placement === "left" || placement === "right") {
+      openOptions.style = {
+        height: "100%",
+        width: "40%",
+      }
+    } else if (placement) {
+      openOptions.style = { height: "30%" }
+    }
+    setOptions({
+      ...options,
+      ...openOptions,
+    })
+  }
+
+  return (
+    <Page title="Popup 弹出层" className="popup-demo">
+      <Block variant="card" title="基础用法">
+        <BasicPopup />
+      </Block>
+      <Block variant="card" title="弹出位置">
+        <Cell
+          clickable
+          title="顶部弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "top" })}
+        />
+        <Cell
+          clickable
+          title="底部弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "bottom" })}
+        />
+        <Cell
+          clickable
+          title="左侧弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "left" })}
+        />
+        <Cell
+          clickable
+          title="右侧弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "right" })}
+        />
+      </Block>
+      <Block variant="card" title="关闭按钮">
+        <Cell
+          clickable
+          title="顶部弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "top", closeable: true })}
+        />
+        <Cell
+          clickable
+          title="底部弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "bottom", closeable: true })}
+        />
+        <Cell
+          clickable
+          title="左侧弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "left", closeable: true })}
+        />
+        <Cell
+          clickable
+          title="右侧弹出"
+          isLink
+          onClick={() => handleOpen({ placement: "right", closeable: true })}
+        />
+        <Cell
+          clickable
+          title="自定义图标"
+          isLink
+          onClick={() => handleOpen({ placement: "bottom", closeable: true, customer: true })}
+        />
+      </Block>
+      <Block variant="card" title="圆角弹窗">
+        <CenterRoundPopup />
+        <Cell
+          clickable
+          title="圆角弹窗（底部）"
+          isLink
+          onClick={() => handleOpen({ placement: "bottom", rounded: true })}
+        />
+      </Block>
+      <Block variant="card" title="禁止滚动穿透">
+        <LockPopup />
+      </Block>
+      <Popup
+        open={options.open}
+        placement={options.placement}
+        rounded={options.rounded}
+        style={options.style}
+        onClose={() =>
+          setOptions({
+            ...options,
+            open: false,
+          })
+        }
+      >
+        <Popup.Backdrop />
+        {options.closeable && !options.customer && <Popup.Close />}
+        {options.closeable && options.customer && (
+          <Popup.Close>
+            <Close />
+          </Popup.Close>
+        )}
+      </Popup>
+    </Page>
+  )
+}

package/metaData/components/progress/api.md

@@ -0,0 +1,11 @@
+## API
+
+### Props
+
+| 参数        | 说明                       | 类型                   | 默认值    |
+| ----------- | -------------------------- | ---------------------- | --------- |
+| percent     | 进度百分比                 | _number \| string_     | `0`       |
+| strokeWidth | 进度条粗细，默认单位为`px` | _number \| string_     | `4px`     |
+| color       | 进度条颜色                 | _string_               | `primary` |
+| inactive    | 是否置灰                   | _boolean_              | `false`   |
+| label       | 进度文字                   | _boolean \| ReactNode_ | `true`    |