@fjyueke/bify-mcp 1.0.0

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

@@ -0,0 +1,76 @@
+import { Flex, Image } from "@fjyueke/bify-core"
+import { ImageMode } from "@fjyueke/bify-core/image"
+import { Photo, PhotoFail } from "@fjyueke/bify-icons"
+import { Text } from "@tarojs/components"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function ImageDemo() {
+  const imageUrl = "https://img01.yzcdn.cn/vant/cat.jpeg"
+
+  const modes: ImageMode[] = [
+    "scaleToFill",
+    "aspectFit",
+    "aspectFill",
+    "widthFix",
+    "heightFix",
+    // "top",
+    // "bottom",
+    // "center",
+    // "left",
+    // "right",
+    // "topLeft",
+    // "topRight",
+    // "bottomLeft",
+    // "bottomRight",
+  ]
+
+  return (
+    <Page title="Image 图片" className="image-demo">
+      <Block title="基础用法">
+        <Image width={200} height={200} src={imageUrl} />
+      </Block>
+      <Block title="填充模式">
+        <Flex wrap="wrap" gutter={20}>
+          {modes.map((mode) => (
+            <Flex.Item span={8} key={mode}>
+              <Image width={200} height={200} mode={mode} src={imageUrl} />
+              <Text className="text">{mode}</Text>
+            </Flex.Item>
+          ))}
+        </Flex>
+      </Block>
+      <Block title="圆形图片">
+        <Flex wrap="wrap" gutter={20}>
+          {modes.map((mode) => (
+            <Flex.Item span={8} key={mode}>
+              <Image width={200} height={200} mode={mode} src={imageUrl} round />
+              <Text className="text">{mode}</Text>
+            </Flex.Item>
+          ))}
+        </Flex>
+      </Block>
+      <Block title="加载中,加载失败提示">
+        <Flex wrap="wrap" gutter={20}>
+          <Flex.Item span={8}>
+            <Image width={200} height={200} placeholder={<Photo />} />
+            <Text className="text">加载提示</Text>
+          </Flex.Item>
+          <Flex.Item span={8}>
+            <Image width={200} height={200} placeholder="加载中..." />
+            <Text className="text">加载提示</Text>
+          </Flex.Item>
+          <Flex.Item span={8}>
+            <Image width={200} height={200} src="error" fallback={<PhotoFail />} />
+            <Text className="text">失败提示</Text>
+          </Flex.Item>
+          <Flex.Item span={8}>
+            <Image width={200} height={200} src="error" fallback="加载失败" />
+            <Text className="text">失败提示</Text>
+          </Flex.Item>
+        </Flex>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/index-list/api.md

@@ -0,0 +1,39 @@
+## API
+
+### IndexList Props
+
+| 参数                             | 说明                                                | 类型               | 默认值                                       |
+| -------------------------------- | --------------------------------------------------- | ------------------ | -------------------------------------------- |
+| sticky                           | 是否开启锚点自动吸顶                                | _boolean_          | `true`                                       |
+| stickyOffsetTop                  | 锚点自动吸顶时与顶部的距离                          | _number \| string_ | `0`                                          |
+| inner <br>`v0.2.0-alpha.0`       | 是否是底部弹窗内使用                                | _boolean_          | `false`                                      |
+| delay <br>`v0.2.0-alpha.0`       | inner 为 `true`，并且自定义了弹窗弹出动画时长时设置 | _number_           | inner 为 true 时候是 `300`，false 时候是 `0` |
+| showSidebar <br>`v0.2.1-alpha.0` | 是否显示索引                                        | _boolean_          | `true`                                       |
+
+### IndexList Events
+
+| 事件名                        | 说明             | 回调参数                                    |
+| ----------------------------- | ---------------- | ------------------------------------------- |
+| onChange <br>`v0.2.1-alpha.0` | 索引位变化时触发 | _current: number, anchor: number \| string_ |
+
+### IndexList Method
+
+通过 `ref` 可以获取到 IndexList 实例并调用实例方法
+
+| 方法名                        | 说明         | 参数  | 返回值 |
+| :---------------------------- | ------------ | ----- | ------ |
+| scrollTo <br>`v0.2.1-alpha.0` | 跳转指定位置 | index | -      |
+
+### IndexList.Anchor Props
+
+| 参数     | 说明     | 类型               | 默认值 |
+| -------- | -------- | ------------------ | ------ |
+| index    | 索引字符 | _number \| string_ | -      |
+| children | 索引内容 | _ReactNode_        | -      |
+
+### IndexList Events
+
+| 事件名   | 说明                         | 回调参数                  |
+| -------- | ---------------------------- | ------------------------- |
+| onSelect | 点击索引栏的字符时触发       | _index: number \| string_ |
+| onChange | 当前高亮的索引字符变化时触发 | _index: number \| string_ |

package/metaData/components/index-list/doc.md

@@ -0,0 +1,176 @@
+# IndexList 索引栏
+
+### 介绍
+
+用于列表的索引分类显示和快速定位。
+
+### 引入
+
+```tsx
+import { IndexList } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+点击索引栏时，会自动跳转到对应的 `IndexList.Anchor` 锚点位置。
+
+```tsx
+function BasicIndexList() {
+  const indexList: string[] = []
+  const charCodeOfA = "A".charCodeAt(0)
+
+  for (let i = 0; i < 26; i++) {
+    indexList.push(String.fromCharCode(charCodeOfA + i))
+  }
+
+  return (
+    <IndexList>
+      {_.map(indexList, (index) => {
+        return (
+          <Fragment key={index}>
+            <IndexList.Anchor index={index} />
+            <Cell title="文本" />
+            <Cell title="文本" />
+            <Cell title="文本" />
+          </Fragment>
+        )
+      })}
+    </IndexList>
+  )
+}
+```
+
+### 自定义索引列表
+
+```tsx
+function CustomIndexList() {
+  const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10]
+
+  return (
+    <IndexList>
+      {_.map(customIndexList, (index) => {
+        return (
+          <Fragment key={index}>
+            <IndexList.Anchor index={index}>标题{index}</IndexList.Anchor>
+            <Cell title="文本" />
+            <Cell title="文本" />
+            <Cell title="文本" />
+          </Fragment>
+        )
+      })}
+    </IndexList>
+  )
+}
+```
+
+### 配合弹窗使用
+
+当在弹窗内使用时，请传入 `inner` 属性以便于组件知道是在底部弹窗内，用于启用 `ScrollView`。如果自定义了弹窗弹出动画时间，请手动设置 `delay` 属性，值为动画时长。
+
+```tsx
+function PopupIndexBar() {
+  const [open, setOpen] = useState(false)
+
+  const indexList: string[] = []
+  const charCodeOfA = "A".charCodeAt(0)
+
+  for (let i = 0; i < 26; i++) {
+    indexList.push(String.fromCharCode(charCodeOfA + i))
+  }
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>打开弹窗</Button>
+      <Popup
+        open={open}
+        style={{ height: "80%" }}
+        placement="bottom"
+        rounded
+        onClose={() => setOpen(false)}
+      >
+        <Popup.Close />
+        <View className="index-list-demo_wrap">
+          <IndexList inner delay={300}>
+            {_.map(indexList, (index) => {
+              return (
+                <Fragment key={index}>
+                  <IndexList.Anchor index={index} />
+                  <Cell title="文本" />
+                  <Cell title="文本" />
+                  <Cell title="文本" />
+                </Fragment>
+              )
+            })}
+          </IndexList>
+        </View>
+      </Popup>
+    </>
+  )
+}
+```
+
+## API
+
+### IndexList Props
+
+| 参数                             | 说明                                                | 类型               | 默认值                                       |
+| -------------------------------- | --------------------------------------------------- | ------------------ | -------------------------------------------- |
+| sticky                           | 是否开启锚点自动吸顶                                | _boolean_          | `true`                                       |
+| stickyOffsetTop                  | 锚点自动吸顶时与顶部的距离                          | _number \| string_ | `0`                                          |
+| inner <br>`v0.2.0-alpha.0`       | 是否是底部弹窗内使用                                | _boolean_          | `false`                                      |
+| delay <br>`v0.2.0-alpha.0`       | inner 为 `true`，并且自定义了弹窗弹出动画时长时设置 | _number_           | inner 为 true 时候是 `300`，false 时候是 `0` |
+| showSidebar <br>`v0.2.1-alpha.0` | 是否显示索引                                        | _boolean_          | `true`                                       |
+
+### IndexList Events
+
+| 事件名                        | 说明             | 回调参数                                    |
+| ----------------------------- | ---------------- | ------------------------------------------- |
+| onChange <br>`v0.2.1-alpha.0` | 索引位变化时触发 | _current: number, anchor: number \| string_ |
+
+### IndexList Method
+
+通过 `ref` 可以获取到 IndexList 实例并调用实例方法
+
+| 方法名                        | 说明         | 参数  | 返回值 |
+| :---------------------------- | ------------ | ----- | ------ |
+| scrollTo <br>`v0.2.1-alpha.0` | 跳转指定位置 | index | -      |
+
+### IndexList.Anchor Props
+
+| 参数     | 说明     | 类型               | 默认值 |
+| -------- | -------- | ------------------ | ------ |
+| index    | 索引字符 | _number \| string_ | -      |
+| children | 索引内容 | _ReactNode_        | -      |
+
+### IndexList Events
+
+| 事件名   | 说明                         | 回调参数                  |
+| -------- | ---------------------------- | ------------------------- |
+| onSelect | 点击索引栏的字符时触发       | _index: number \| string_ |
+| onChange | 当前高亮的索引字符变化时触发 | _index: number \| string_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                   | 默认值                                   | 描述 |
+| -------------------------------------- | ---------------------------------------- | ---- |
+| --index-list-sidebar-z-index           | _2_                                      | -    |
+| --index-list-index-font-size           | _var(--font-size-xs)_                    | -    |
+| --index-list-index-line-height         | _var(--line-height-xs)_                  | -    |
+| --index-list-index-font-weight         | _var(--font-weight-bold)_                | -    |
+| --index-list-index-padding             | _0 var(--padding-xs 0 var(--padding-md)_ | -    |
+| --index-list-index-active-color        | _var(--danger-color)_                    | -    |
+| --index-anchor-z-index                 | _1_                                      | -    |
+| --index-anchor-padding                 | _0 var(--padding-md)_                    | -    |
+| --index-anchor-color                   | _var(--text-color)_                      | -    |
+| --index-anchor-font-weight             | _var(--font-weight-bold)_                | -    |
+| --index-anchor-font-size               | _var(--font-size-md)_                    | -    |
+| --index-anchor-line-height             | _32px \* $hd_                            | -    |
+| --index-anchor-background-color        | _transparent_                            | -    |
+| --index-anchor-sticky-color            | _var(--danger-color)_                    | -    |
+| --index-anchor-sticky-background-color | _var(--white)_                           | -    |

package/metaData/components/index-list/example/index.tsx

@@ -0,0 +1,110 @@
+import { Cell, IndexList, Tabs, Popup, Button } from "@fjyueke/bify-core"
+import * as _ from "lodash"
+import { Fragment, useState } from "react"
+import { View } from "@tarojs/components"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicIndexBar() {
+  const indexList: string[] = []
+  const charCodeOfA = "A".charCodeAt(0)
+
+  for (let i = 0; i < 26; i++) {
+    indexList.push(String.fromCharCode(charCodeOfA + i))
+  }
+
+  return (
+    <IndexList>
+      {_.map(indexList, (index) => {
+        return (
+          <Fragment key={index}>
+            <IndexList.Anchor index={index} />
+            <Cell title="文本" />
+            <Cell title="文本" />
+            <Cell title="文本" />
+          </Fragment>
+        )
+      })}
+    </IndexList>
+  )
+}
+
+function CustomIndexBar() {
+  const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10]
+
+  return (
+    <IndexList>
+      {_.map(customIndexList, (index) => {
+        return (
+          <Fragment key={index}>
+            <IndexList.Anchor index={index}>标题{index}</IndexList.Anchor>
+            <Cell title="文本" />
+            <Cell title="文本" />
+            <Cell title="文本" />
+          </Fragment>
+        )
+      })}
+    </IndexList>
+  )
+}
+
+function PopupIndexBar() {
+  const [open, setOpen] = useState(false)
+
+  const indexList: string[] = []
+  const charCodeOfA = "A".charCodeAt(0)
+
+  for (let i = 0; i < 26; i++) {
+    indexList.push(String.fromCharCode(charCodeOfA + i))
+  }
+
+  return (
+    <>
+      <Button block color="primary" className="index-list-demo_btn" onClick={() => setOpen(true)}>
+        打开弹窗
+      </Button>
+      <Popup
+        open={open}
+        style={{ height: "80%" }}
+        placement="bottom"
+        rounded
+        onClose={() => setOpen(false)}
+      >
+        <Popup.Close />
+        <View className="index-list-demo_wrap">
+          <IndexList inner delay={300} sticky={false}>
+            {_.map(indexList, (index) => {
+              return (
+                <Fragment key={index}>
+                  <IndexList.Anchor index={index} />
+                  <Cell title="文本" />
+                  <Cell title="文本" />
+                  <Cell title="文本" />
+                </Fragment>
+              )
+            })}
+          </IndexList>
+        </View>
+      </Popup>
+    </>
+  )
+}
+
+export default function IndexBarDemo() {
+  const [tab, setTab] = useState(0)
+  return (
+    <Page title="IndexList 索引栏" className="index-list-demo">
+      <Tabs value={tab} onChange={setTab}>
+        <Tabs.TabPane title="基础用法">
+          <BasicIndexBar />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="自定义索引列表">
+          <CustomIndexBar />
+        </Tabs.TabPane>
+        <Tabs.TabPane title="配合弹窗使用">
+          <PopupIndexBar />
+        </Tabs.TabPane>
+      </Tabs>
+    </Page>
+  )
+}

package/metaData/components/list/api.md

@@ -0,0 +1,30 @@
+## API
+
+### Props
+
+| 参数                                                                    | 说明                                             | 类型      | 默认值  |
+| ----------------------------------------------------------------------- | ------------------------------------------------ | --------- | ------- |
+| fixedHeight <br>`v0.1.1-alpha.2`                                        | 是否固定高度                                     | _boolean_ | `false` |
+| loading                                                                 | 是否处于加载状态，加载过程中不触发 `onLoad` 事件 | _boolean_ | `false` |
+| hasMore                                                                 | 是否已加载完成，加载完成后不再触发 `onLoad` 事件 | _boolean_ | `false` |
+| offset                                                                  | 滚动条与底部距离小于 offset 时触发 `onLoad` 事件 | _number_  | `100`   |
+| immediateCheck <br>`v0.1.1-alpha.2`                                     | 是否在初始化时立即执行滚动位置检查               | _boolean_ | `true`  |
+| disabled <br>`v0.1.1-alpha.2`                                           | 是否禁用滚动加载                                 | _boolean_ | `false` |
+| direction                                                               | 滚动触发加载的方向，可选值为 `up`                | _string_  | `down`  |
+| <span style="color: red">~~scrollTop~~ <br>`v0.1.1-alpha.2 移除`</span> | 距离顶部的滚动距离                               | _number_  | `0`     |
+
+### Events
+
+| 事件名                                                                 | 说明                               | 回调参数 |
+| ---------------------------------------------------------------------- | ---------------------------------- | -------- |
+| onLoad                                                                 | 滚动条与底部距离小于 offset 时触发 | -        |
+| <span style="color: red">~~onLoading~~ <br>`v0.1.1-alpha.2移除`</span> | 内部 loading 改变时触发            | -        |
+| onScroll  | 滚动时触发      | e      |
+
+### 方法
+
+通过 ref 可以获取到 List 实例并调用实例方法
+
+| 方法名                 | 说明                                                   | 参数 | 返回值 |
+| ---------------------- | ------------------------------------------------------ | ---- | ------ |
+| check `v0.1.1-alpha.2` | 检查当前的滚动位置，若已滚动至底部，则会触发 load 事件 | -    | -      |