@fjyueke/bify-mcp 1.0.0

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

@@ -0,0 +1,136 @@
+import { Cell, Image, Loading, Toast, Switch } from "@fjyueke/bify-core"
+import { LikeOutlined } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+let t1
+let t2
+
+export default function ToastDemo() {
+
+  return (
+    <Page title="Toast 轻提示" className="toast-demo">
+      <Block variant="card" title="基础用法">
+        <Cell
+          clickable
+          title="文字提示"
+          isLink
+          onClick={() => Toast.open({ type: "text", message: "文字提示" })}
+        />
+        <Cell
+          clickable
+          title="加载提示"
+          isLink
+          onClick={() => Toast.open({ type: "loading", message: "加载中..." })}
+        />
+        <Cell
+          clickable
+          title="成功提示"
+          isLink
+          onClick={() => Toast.open({ type: "success", message: "成功文案" })}
+        />
+        <Cell
+          clickable
+          title="失败提示"
+          isLink
+          onClick={() => Toast.open({ type: "fail", message: "失败文案" })}
+        />
+      </Block>
+      <Block variant="card" title="自定义图标">
+        <Cell
+          clickable
+          title="自定义图标"
+          isLink
+          onClick={() => Toast.open({ message: "自定义图标", icon: <LikeOutlined /> })}
+        />
+        <Cell
+          clickable
+          title="自定义图片"
+          isLink
+          onClick={() =>
+            Toast.open({
+              message: "自定义图片",
+              icon: (
+                <Image
+                  style={{
+                    width: "40px",
+                    height: "40px",
+                  }}
+                  src="https://img01.yzcdn.cn/vant/logo.png"
+                />
+              ),
+            })
+          }
+        />
+        <Cell
+          clickable
+          title="自定义加载图标"
+          isLink
+          onClick={() => Toast.open({ message: "加载中...", icon: <Loading type="spinner" /> })}
+        />
+      </Block>
+      <Block variant="card" title="自定义位置">
+        <Cell
+          clickable
+          title="顶部展示"
+          isLink
+          onClick={() =>
+            Toast.open({
+              position: "top",
+              message: "顶部展示",
+            })
+          }
+        />
+        <Cell
+          clickable
+          title="底部展示"
+          isLink
+          onClick={() =>
+            Toast.open({
+              position: "bottom",
+              message: "底部展示",
+            })
+          }
+        />
+      </Block>
+      <Block variant="card" title="多例模式">
+        <Cell title="开启">
+          <Switch
+            style={{ display: "block", float: "right" }}
+            size={20}
+            onChange={v => {
+              Toast.allowMultiple(v)
+            }}
+          />
+        </Cell>
+        <Cell
+          title="第一个Toast"
+          isLink
+          onClick={() =>
+          (t1 = Toast.open({
+            type: "loading",
+            message: "第一个Toast",
+            duration: 0,
+            position: "top",
+          }))
+          }
+        />
+        <Cell
+          title="第二个Toast"
+          isLink
+          onClick={() =>
+          (t2 = Toast.open({
+            message: "第二个Toast",
+            duration: 0,
+            position: "bottom",
+          }))
+          }
+        />
+        <Cell title="清除第一个Toast" isLink onClick={() => Toast.close(t1)} />
+        <Cell title="清楚第二个Toast" isLink onClick={() => Toast.close(t2)} />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/tree-select/api.md

@@ -0,0 +1,19 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultTabValue | 左侧默认选中项的索引 | _number \| string_ | `0` |
+| tabValue | 左侧选中项的索引 | _number \| string_ | `0` |
+| defaultValue | 右侧默认选中项的 value，支持传入数组 | _number \| string \|<br>(number \| string)[]_ | `0` |
+| value | 右侧选中项的 value，支持传入数组 | _number \| string \|<br>(number \| string)[]_ | `0` |
+| max | 右侧项最大选中个数 | _number \| string_ | `Infinity` |
+| activeIcon | 自定义右侧栏选中状态的图标 | _ReactNode_ | `<Success />` |
+
+### Events
+
+| 事件名     | 说明                 | 回调参数                  |
+| ---------- | -------------------- | ------------------------- |
+| onTabChange | 点击左侧导航时触发   | _value: any, tabObject: TreeSelect.TabObject_ |
+| onChange | 点击右侧选择项时触发 | _any \| any[]_     |

package/metaData/components/tree-select/doc.md

@@ -0,0 +1,185 @@
+# TreeSelect 分类选择
+
+### 介绍
+
+用于从一组相关联的数据集合中进行选择。
+
+### 引入
+
+```tsx
+import { TreeSelect } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 单选模式
+
+`tabValue` 表示左侧高亮选项的索引，`value` 表示右侧高亮选项的 value。
+
+```tsx
+import { TreeSelect } from "@fjyueke/bify-core"
+
+function RadioTreeSelect() {
+  const [tabValue, setTabValue] = useState(0)
+  const [value, setValue] = useState(0)
+
+  return (
+    <TreeSelect tabValue={tabValue} value={value} onTabChange={setTabValue} onChange={setValue}>
+      <TreeSelect.Tab title="浙江">
+        <TreeSelect.Option value={0}>杭州</TreeSelect.Option>
+        <TreeSelect.Option value={1}>温州</TreeSelect.Option>
+        <TreeSelect.Option value={2} disabled>
+          宁波
+        </TreeSelect.Option>
+        <TreeSelect.Option value={3}>义乌</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="江苏">
+        <TreeSelect.Option value={4}>南京</TreeSelect.Option>
+        <TreeSelect.Option value={5}>无锡</TreeSelect.Option>
+        <TreeSelect.Option value={6}>徐州</TreeSelect.Option>
+        <TreeSelect.Option value={7}>苏州</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="福建" disabled>
+        <TreeSelect.Option value={8}>泉州</TreeSelect.Option>
+        <TreeSelect.Option value={9}>厦门</TreeSelect.Option>
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+```
+
+### 多选模式
+
+`value` 为数组格式时，可以选中多个右侧选项。
+
+```tsx
+import { TreeSelect } from "@fjyueke/bify-core"
+
+function MultiselectTreeSelect() {
+  const [tabValue, setTabValue] = useState(0)
+  const [value, setValue] = useState([0, 1])
+
+  return (
+    <TreeSelect tabValue={tabValue} value={value} onTabChange={setTabValue} onChange={setValue}>
+      <TreeSelect.Tab title="浙江">
+        <TreeSelect.Option value={0}>杭州</TreeSelect.Option>
+        <TreeSelect.Option value={1}>温州</TreeSelect.Option>
+        <TreeSelect.Option value={2} disabled>
+          宁波
+        </TreeSelect.Option>
+        <TreeSelect.Option value={3}>义乌</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="江苏">
+        <TreeSelect.Option value={4}>南京</TreeSelect.Option>
+        <TreeSelect.Option value={5}>无锡</TreeSelect.Option>
+        <TreeSelect.Option value={6}>徐州</TreeSelect.Option>
+        <TreeSelect.Option value={7}>苏州</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="福建" disabled>
+        <TreeSelect.Option value={8}>泉州</TreeSelect.Option>
+        <TreeSelect.Option value={9}>厦门</TreeSelect.Option>
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+```
+
+### 自定义内容
+
+可以通过 `TreeSelect.Tab` 组件自定义右侧区域的内容。
+
+```tsx
+import { TreeSelect } from "@fjyueke/bify-core"
+
+function TreeSelectWithCustomContent() {
+  const [tabValue, setTabValue] = useState(0)
+
+  return (
+    <TreeSelect tabValue={tabValue} onTabChange={setTabValue}>
+      <TreeSelect.Tab title="分组 1">
+        <Image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="分组 2">
+        <Image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+```
+
+### 徽标提示
+
+设置 `badge` 属性后，会在图标右上角展示相应的徽标。
+
+```tsx
+import { TreeSelect } from "@fjyueke/bify-core"
+
+function BadgeTreeSelect() {
+  const [tabValue, setTabValue] = useState(0)
+  const [value, setValue] = useState(0)
+
+  return (
+    <TreeSelect tabValue={tabValue} value={value} onTabChange={setTabValue} onChange={setValue}>
+      <TreeSelect.Tab badge title="浙江">
+        <TreeSelect.Option value={0}>杭州</TreeSelect.Option>
+        <TreeSelect.Option value={1}>温州</TreeSelect.Option>
+        <TreeSelect.Option value={2} disabled>
+          宁波
+        </TreeSelect.Option>
+        <TreeSelect.Option value={3}>义乌</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab badge="5" title="江苏">
+        <TreeSelect.Option value={4}>南京</TreeSelect.Option>
+        <TreeSelect.Option value={5}>无锡</TreeSelect.Option>
+        <TreeSelect.Option value={6}>徐州</TreeSelect.Option>
+        <TreeSelect.Option value={7}>苏州</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="福建" disabled>
+        <TreeSelect.Option value={8}>泉州</TreeSelect.Option>
+        <TreeSelect.Option value={9}>厦门</TreeSelect.Option>n
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultTabValue | 左侧默认选中项的索引 | _number \| string_ | `0` |
+| tabValue | 左侧选中项的索引 | _number \| string_ | `0` |
+| defaultValue | 右侧默认选中项的 value，支持传入数组 | _number \| string \|<br>(number \| string)[]_ | `0` |
+| value | 右侧选中项的 value，支持传入数组 | _number \| string \|<br>(number \| string)[]_ | `0` |
+| max | 右侧项最大选中个数 | _number \| string_ | `Infinity` |
+| activeIcon | 自定义右侧栏选中状态的图标 | _ReactNode_ | `<Success />` |
+
+### Events
+
+| 事件名     | 说明                 | 回调参数                  |
+| ---------- | -------------------- | ------------------------- |
+| onTabChange | 点击左侧导航时触发   | _value: any, tabObject: TreeSelect.TabObject_ |
+| onChange | 点击右侧选择项时触发 | _any \| any[]_     |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                           | 默认值                                | 描述  |
+|----------------------------------------------|------------------------------------|-----|
+| --tree-select-font-size                      | _var(--font-size-md)_              | -   |
+| --tree-select-sidebar-background-color       | _var(--background-color)_          | -   |
+| --tree-select-content-background-color       | _var(--white)_                     | -   |
+| --tree-select-tab-padding                    | _14px * $hd var(--padding-sm)_     | -   |
+| --tree-select-option-padding                 | _0 32px * $hd 0 var(--padding-md)_ | -   |
+| --tree-select-option-font-weight             | _var(--font-weight-bold)_          | -   |
+| --tree-select-option-line-height             | _48px * $hd_                       | -   |
+| --tree-select-option-active-color            | _var(--danger-color)_              | -   |
+| --tree-select-option-active-background-color | _var(--active-color)_              | -   |
+| --tree-select-option-disabled-color          | _var(--gray-5)_                    | -   |
+| --tree-select-option-icon-active-right       | _var(--padding-md, $padding-md)_   | -   |
+| --tree-select-option-icon-active-font-size   | _16px * $hd_                       | -   |

package/metaData/components/tree-select/example/index.tsx

@@ -0,0 +1,112 @@
+import { Image, TreeSelect } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+function RadioTreeSelect() {
+  return (
+    <TreeSelect>
+      <TreeSelect.Tab title="浙江">
+        <TreeSelect.Option value={0}>杭州</TreeSelect.Option>
+        <TreeSelect.Option value={1}>温州</TreeSelect.Option>
+        <TreeSelect.Option value={2} disabled>
+          宁波
+        </TreeSelect.Option>
+        <TreeSelect.Option value={3}>义乌</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="江苏">
+        <TreeSelect.Option value={4}>南京</TreeSelect.Option>
+        <TreeSelect.Option value={5}>无锡</TreeSelect.Option>
+        <TreeSelect.Option value={6}>徐州</TreeSelect.Option>
+        <TreeSelect.Option value={7}>苏州</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="福建" disabled>
+        <TreeSelect.Option value={8}>泉州</TreeSelect.Option>
+        <TreeSelect.Option value={9}>厦门</TreeSelect.Option>
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+
+function MultiselectTreeSelect() {
+  return (
+    <TreeSelect defaultValue={[0, 1]}>
+      <TreeSelect.Tab title="浙江">
+        <TreeSelect.Option value={0}>杭州</TreeSelect.Option>
+        <TreeSelect.Option value={1}>温州</TreeSelect.Option>
+        <TreeSelect.Option value={2} disabled>
+          宁波
+        </TreeSelect.Option>
+        <TreeSelect.Option value={3}>义乌</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="江苏">
+        <TreeSelect.Option value={4}>南京</TreeSelect.Option>
+        <TreeSelect.Option value={5}>无锡</TreeSelect.Option>
+        <TreeSelect.Option value={6}>徐州</TreeSelect.Option>
+        <TreeSelect.Option value={7}>苏州</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="福建" disabled>
+        <TreeSelect.Option value={8}>泉州</TreeSelect.Option>
+        <TreeSelect.Option value={9}>厦门</TreeSelect.Option>
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+
+function TreeSelectWithCustomContent() {
+  return (
+    <TreeSelect>
+      <TreeSelect.Tab title="分组 1">
+        <Image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="分组 2">
+        <Image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+
+function BadgeTreeSelect() {
+  return (
+    <TreeSelect>
+      <TreeSelect.Tab badge title="浙江">
+        <TreeSelect.Option value={0}>杭州</TreeSelect.Option>
+        <TreeSelect.Option value={1}>温州</TreeSelect.Option>
+        <TreeSelect.Option value={2} disabled>
+          宁波
+        </TreeSelect.Option>
+        <TreeSelect.Option value={3}>义乌</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab badge="5" title="江苏">
+        <TreeSelect.Option value={4}>南京</TreeSelect.Option>
+        <TreeSelect.Option value={5}>无锡</TreeSelect.Option>
+        <TreeSelect.Option value={6}>徐州</TreeSelect.Option>
+        <TreeSelect.Option value={7}>苏州</TreeSelect.Option>
+      </TreeSelect.Tab>
+      <TreeSelect.Tab title="福建" disabled>
+        <TreeSelect.Option value={8}>泉州</TreeSelect.Option>
+        <TreeSelect.Option value={9}>厦门</TreeSelect.Option>n
+      </TreeSelect.Tab>
+    </TreeSelect>
+  )
+}
+
+export default function TreeSelectDemo() {
+  return (
+    <Page title="TreeSelect 分类选择" className="tree-select-demo">
+      <Block title="单选模式">
+        <RadioTreeSelect />
+      </Block>
+      <Block title="多选模式">
+        <MultiselectTreeSelect />
+      </Block>
+      <Block title="自定义内容">
+        <TreeSelectWithCustomContent />
+      </Block>
+      <Block title="徽标提示">
+        <BadgeTreeSelect />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/uploader/api.md

@@ -0,0 +1,32 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认已上传的文件列表 | _UploadFile[]_ | - |
+| value | 已上传的文件列表 | _UploadFile[]_ | - |
+| name | 标识符，可以在回调函数的第二项参数中获取 | _number \| string_ | - |
+| multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` |
+| disabled | 是否禁用文件上传 | _boolean_ | `false` |
+| readonly | 是否将上传区域设置为只读状态 | _boolean_ | `false` |
+| removable | 是否展示删除按钮 | _boolean_ | `true` |
+| maxFiles | 文件上传数量限制 | _number \| string_ | - |
+
+### Events
+
+| 事件名                | 说明                   | 回调参数            |
+| --------------------- | ---------------------- | ------------------- |
+| onUpload              | 点击上传区域时触发     | _event: ITouchEvent_ |
+| onChange              | 已上传图片列表改变后触发 | _file: UploadFile \| UploadFile[]_  |
+
+
+### UploadFile
+| 参数                  | 说明                   | 类型                 |
+| --------------------  | ---------------------- | -------------------  |
+| url                   | 下载地址               |    _string_          |
+| type                  | 文件类型(包含image时显示图标,其他显示)  |   _string_           |
+| name                  | 文件名称               | _string_             |
+| removable             | 是否可删除             | _boolean_            |
+| status                | 上传状态(uploading|failed|completed)          | _string_             |
+| message               | uploading|failed 状态时文字提示    | _string_ |