@fjyueke/bify-mcp 1.0.0

package/metaData/components/share-sheet/doc.md

@@ -0,0 +1,215 @@
+# ShareSheet 分享面板
+
+### 介绍
+
+底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。
+
+### 引入
+
+```tsx
+import { ShareSheet } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+分享面板通过 `ShareSheet.Option` 组件来定义分享选项。
+
+```tsx
+import { ShareSheet } from "@fjyueke/bify-core"
+
+function BasicShareSheet() {
+  const [open, setOpen] = useState(true)
+  return (
+    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+      <ShareSheet.Header title="立即分享给好友" />
+      <ShareSheet.Options>
+        <ShareSheet.Option icon="wechat" name="微信" />
+        <ShareSheet.Option icon="wechat-moments" name="朋友圈" />
+        <ShareSheet.Option icon="weibo" name="微博" />
+        <ShareSheet.Option icon="qq" name="QQ" />
+      </ShareSheet.Options>
+      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+    </ShareSheet>
+  )
+}
+```
+
+### 展示多行选项
+
+当分享选项的数量较多时，可以将 `options` 定义为数组嵌套的格式，每个子数组会作为一行选项展示。
+
+```tsx
+import { ShareSheet } from "@fjyueke/bify-core"
+
+function MultilineShareSheet() {
+  const [open, setOpen] = useState(true)
+  return (
+    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+      <ShareSheet.Header title="立即分享给好友" />
+      <ShareSheet.Options>
+        <ShareSheet.Option icon="wechat" name="微信" />
+        <ShareSheet.Option icon="wechat-moments" name="朋友圈" />
+        <ShareSheet.Option icon="weibo" name="微博" />
+        <ShareSheet.Option icon="qq" name="QQ" />
+      </ShareSheet.Options>
+      <ShareSheet.Options>
+        <ShareSheet.Option icon="link" name="复制链接" />
+        <ShareSheet.Option icon="poster" name="分享海报" />
+        <ShareSheet.Option icon="qrcode" name="二维码" />
+        <ShareSheet.Option icon="weapp-qrcode" name="小程序码" />
+      </ShareSheet.Options>
+      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+    </ShareSheet>
+  )
+}
+```
+
+### 自定义图标
+
+除了使用内置的几种图标外，可以直接在 `icon` 中传入 Image 组件来使用自定义的图标。
+
+```tsx
+import { Image, ShareSheet } from "@fjyueke/bify-core"
+
+function CustomShareSheet() {
+  const [open, setOpen] = useState(true)
+  return (
+    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+      <ShareSheet.Options>
+        <ShareSheet.Option
+          icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-fire.png" />}
+          name="名称"
+        />
+        <ShareSheet.Option
+          icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-light.png" />}
+          name="名称"
+        />
+        <ShareSheet.Option
+          icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-water.png" />}
+          name="名称"
+        />
+      </ShareSheet.Options>
+      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+    </ShareSheet>
+  )
+}
+```
+
+### 展示描述信息
+
+通过 `description` 属性可以设置标题下方的描述文字, 在 `options` 内设置 `description` 属性可以添加分享选项描述。
+
+```tsx
+import { ShareSheet } from "@fjyueke/bify-core"
+
+function ShareSheetWithDescription() {
+  const [open, setOpen] = useState(true)
+  return (
+    <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+      <ShareSheet.Header title="立即分享给好友">描述信息</ShareSheet.Header>
+      <ShareSheet.Options>
+        <ShareSheet.Option icon="wechat" name="微信" />
+        <ShareSheet.Option icon="weibo" name="微博" />
+        <ShareSheet.Option icon="link" name="复制链接" description="描述信息" />
+        <ShareSheet.Option icon="poster" name="分享海报" />
+        <ShareSheet.Option icon="qrcode" name="二维码" />
+      </ShareSheet.Options>
+      <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+    </ShareSheet>
+  )
+}
+```
+
+## API
+
+### ShareSheet Props
+
+| 参数          | 说明         | 类型              | 默认值     |
+|-------------|------------|-----------------|---------|
+| defaultOpen | 默认是否显示动作面板 | _boolean_       | `false` |
+| open        | 是否显示动作面板   | _boolean_       | `false` |
+| className   | 样式类名       | _string_        | -       |
+| style       | 样式对象       | _CSSProperties_ | -       |
+| rounded     | 是否为圆角      | _string_        | -       |
+
+### ShareSheet.Backdrop Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| className | 样式类名 | _string_        | - |
+| style     | 样式对象 | _CSSProperties_ | - |
+| duration  | 动画时长，单位毫秒 | _number \| string_ | `300` |
+| closeable | 点击是否可以关闭  | _boolean_ | `true` |
+
+### ShareSheet.Header Props
+
+| 参数        | 说明   | 类型              | 默认值 |
+|-----------|------|-----------------|-----|
+| className | 样式类名 | _string_        | -   |
+| style     | 样式对象 | _CSSProperties_ | -   |
+| title     | 标题   | _string_        | -   |
+| children  | 描述信息 | _string_        | -   |
+
+### ShareSheet.Option Props
+
+|     参数     | 说明 | 类型 | 默认值 |
+| ----------- | --- | --- | --- |
+| className   | 分享选项类名 | _string_ | - |
+| name        | 分享渠道名称 | _string_ | - |
+| value       | 选项值  | _string_        | - |
+| description | 分享选项描述 | _string_ | - |
+| icon        | 图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`<br/>`weapp-qrcode` `wechat-moments`，支持传入 Image 组件 | _string_ | - |
+| openType    | 微信开放能力，可选值为 `contact` `contactShare` `share`<br/>`getRealnameAuthInfo` `getAuthorize` `getPhoneNumber`<br/>`getUserInfo` `lifestyle` `launchApp` `openSetting` `feedback` | _string_ | - |
+
+### Events
+
+| 事件名      | 说明        | 回调参数                            |
+|----------|-----------|---------------------------------|
+| onSelect | 点击分享选项时触发 | _event: ShareSheet.OptionEvent_ |
+| onCancel | 点击取消按钮时触发 | -                               |
+| onClose  | 关闭面板时触发   | -                               |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                         | 默认值                                                       | 描述  |
+|--------------------------------------------|-----------------------------------------------------------|-----|
+| --share-sheet-description-font-size        | _var(--font-size-sm)_                                     | -   |
+| --share-sheet-options-padding              | _var(--padding-md) 0 var(--padding-md) var(--padding-xs)_ | -   |
+| --share-sheet-option-icon-margin           | _0 var(--padding-md)_                                     | -   |
+| --share-sheet-option-icon-size             | _48px * $hd_                                              | -   |
+| --share-sheet-option-icon-width            | _var(--share-sheet-option-icon-size)_                     | -   |
+| --share-sheet-option-icon-height           | _var(--share-sheet-option-icon-size)_                     | -   |
+| --share-sheet-option-icon-font-size        | _var(--share-sheet-option-icon-size)_                     | -   |
+| --share-sheet-option-name-padding          | _0 var(--padding-base)_                                   | -   |
+| --share-sheet-option-name-margin-top       | _var(--padding-xs)_                                       | -   |
+| --share-sheet-option-name-color            | _var(--gray-7)_                                           | -   |
+| --share-sheet-option-name-font-size        | _var(--font-size-sm)_                                     | -   |
+| --share-sheet-option-name-line-height      | _1.4_                                                     | -   |
+| --share-sheet-option-description-padding   | _0 var(--padding-base)_                                   | -   |
+| --share-sheet-option-description-color     | _var(--gray-5)_                                           | -   |
+| --share-sheet-option-description-font-size | _var(--font-size-sm)_                                     | -   |
+
+
+## 常见问题
+
+### 如何实现分享逻辑？
+
+在不同的 App 或浏览器中，存在各式各样的分享接口或分享方式，因此 ShareSheet 组件不提供具体的分享逻辑，需要开发者根据业务场景自行实现。
+
+#### 微信内分享
+
+由于微信未提供分享相关的 API，需要引导用户点击右上角进行分享。
+
+#### App 内分享
+
+可以通过 JSBridge 调用原生应用的 SDK 进行分享。
+
+#### 分享海报或二维码
+
+可以通过 [Popup](/components/popup/) 组件以弹层的形式展示图片，然后引导用户保存图片进行分享。

package/metaData/components/share-sheet/example/index.tsx

@@ -0,0 +1,143 @@
+import { Cell, Image, ShareSheet } from "@fjyueke/bify-core"
+import { ArrowRight } from "@fjyueke/bify-icons"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicShareSheet() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Cell
+        clickable
+        title="显示分享面板"
+        isLink
+        onClick={() => setOpen(true)}
+      />
+      <ShareSheet
+        open={open}
+        onSelect={() => setOpen(false)}
+        onClose={setOpen}
+        onCancel={() => {
+          setOpen(false)
+        }}
+      >
+        <ShareSheet.Backdrop />
+        <ShareSheet.Header title="立即分享给好友" />
+        <ShareSheet.Options>
+          <ShareSheet.Option icon="wechat" name="微信" openType="share" />
+          <ShareSheet.Option icon="wechat-moments" name="朋友圈" />
+          <ShareSheet.Option icon="weibo" name="微博" />
+          <ShareSheet.Option icon="qq" name="QQ" />
+        </ShareSheet.Options>
+        <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+      </ShareSheet>
+    </>
+  )
+}
+
+function MultilineShareSheet() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Cell
+        clickable
+        title="显示分享面板"
+        isLink
+        onClick={() => setOpen(true)}
+      />
+      <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+        <ShareSheet.Header title="立即分享给好友" />
+        <ShareSheet.Options>
+          <ShareSheet.Option icon="wechat" name="微信" />
+          <ShareSheet.Option icon="wechat-moments" name="朋友圈" />
+          <ShareSheet.Option icon="weibo" name="微博" />
+          <ShareSheet.Option icon="qq" name="QQ" />
+        </ShareSheet.Options>
+        <ShareSheet.Options>
+          <ShareSheet.Option icon="link" name="复制链接" />
+          <ShareSheet.Option icon="poster" name="分享海报" />
+          <ShareSheet.Option icon="qrcode" name="二维码" />
+          <ShareSheet.Option icon="weapp-qrcode" name="小程序码" />
+        </ShareSheet.Options>
+        <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+      </ShareSheet>
+    </>
+  )
+}
+
+function CustomShareSheet() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Cell
+        clickable
+        title="显示分享面板"
+        isLink
+        onClick={() => setOpen(true)}
+      />
+      <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+        <ShareSheet.Options>
+          <ShareSheet.Option
+            icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-fire.png" />}
+            name="名称"
+          />
+          <ShareSheet.Option
+            icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-light.png" />}
+            name="名称"
+          />
+          <ShareSheet.Option
+            icon={<Image src="https://img.yzcdn.cn/vant/custom-icon-water.png" />}
+            name="名称"
+          />
+        </ShareSheet.Options>
+        <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+      </ShareSheet>
+    </>
+  )
+}
+
+function ShareSheetWithDescription() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Cell
+        clickable
+        title="显示分享面板"
+        isLink
+        onClick={() => setOpen(true)}
+      />
+      <ShareSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+        <ShareSheet.Header title="立即分享给好友">描述信息</ShareSheet.Header>
+        <ShareSheet.Options>
+          <ShareSheet.Option icon="wechat" name="微信" />
+          <ShareSheet.Option icon="weibo" name="微博" />
+          <ShareSheet.Option icon="link" name="复制链接" description="描述信息" />
+          <ShareSheet.Option icon="poster" name="分享海报" />
+          <ShareSheet.Option icon="qrcode" name="二维码" />
+        </ShareSheet.Options>
+        <ShareSheet.Button type="cancel">取消</ShareSheet.Button>
+      </ShareSheet>
+    </>
+  )
+}
+
+export default function ShareSheetDemo() {
+  return (
+    <Page title="ShareSheet 分享面板" className="share-sheet-demo">
+      <Block variant="card" title="基础用法">
+        <BasicShareSheet />
+      </Block>
+      <Block variant="card" title="展示多行选项">
+        <MultilineShareSheet />
+      </Block>
+      <Block variant="card" title="自定义图标">
+        <CustomShareSheet />
+      </Block>
+      <Block variant="card" title="展示描述信息">
+        <ShareSheetWithDescription />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/sidebar/api.md

@@ -0,0 +1,28 @@
+## API
+
+### Sidebar Props
+
+| 参数    | 说明             | 类型               | 默认值 |
+| ------- | ---------------- | ------------------ | ------ |
+| defaultValue | 默认导航项的索引 | _number \| string_ | `0`    |
+| value | 当前导航项的索引 | _number \| string_ | `0`    |
+
+### Sidebar Events
+
+| 事件名 | 说明             | 回调参数        |
+| ------ | ---------------- | --------------- |
+| onChange | 切换导航项时触发 | _value: any, tab: Sidebar.TabObject_ |
+
+### Sidebar.Tab Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| disabled | 是否禁用该项 | _boolean_ | `false` |
+| children | 内容 | _ReactNode_ | - |
+| badge | 图标上徽标的内容 | _boolean \| number \| string \| Badge \| ReactNode_ | - |
+
+### Sidebar.Tab Events
+
+| 事件名 | 说明       | 回调参数        |
+| ------ | ---------- | --------------- |
+| onClick  | 点击时触发 | _event: ITouchEvent_|

package/metaData/components/sidebar/doc.md

@@ -0,0 +1,122 @@
+# Sidebar 侧边导航
+
+### 介绍
+
+垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+
+### 引入
+
+```ts
+import { Sidebar } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<Sidebar>
+  <Sidebar.Tab>标签名</Sidebar.Tab>
+  <Sidebar.Tab>标签名</Sidebar.Tab>
+  <Sidebar.Tab>标签名</Sidebar.Tab>
+</Sidebar>
+```
+
+### 徽标提示
+
+设置 `badge` 属性后，会在右上角展示相应的徽标。
+
+```tsx
+<Sidebar>
+  <Sidebar.Tab badge>标签名</Sidebar.Tab>
+  <Sidebar.Tab badge="5">标签名</Sidebar.Tab>
+  <Sidebar.Tab badge={<Badge position="bottom-right" max={99} content={100} />}>标签名</Sidebar.Tab>
+</Sidebar>
+```
+
+### 禁用选项
+
+通过 `disabled` 属性禁用选项。
+
+```tsx
+<Sidebar>
+  <Sidebar.Tab>标签名</Sidebar.Tab>
+  <Sidebar.Tab disabled>标签名</Sidebar.Tab>
+  <Sidebar.Tab>标签名</Sidebar.Tab>
+</Sidebar>
+```
+
+### 监听切换事件
+
+设置 `onChange` 方法来监听切换导航项时的事件。
+
+```tsx
+import { Sidebar } from "@fjyueke/bify-core"
+
+function EventSidebar() {
+  return (
+    <>
+      <Toast id="toast" />
+      <Sidebar onChange={(newValue, { children }: Sidebar.TabObject) => Toast.open(children)}>
+        <Sidebar.Tab>标签名 1</Sidebar.Tab>
+        <Sidebar.Tab>标签名 2</Sidebar.Tab>
+        <Sidebar.Tab>标签名 3</Sidebar.Tab>
+      </Sidebar>
+    </>
+  )
+}
+```
+
+## API
+
+### Sidebar Props
+
+| 参数    | 说明             | 类型               | 默认值 |
+| ------- | ---------------- | ------------------ | ------ |
+| defaultValue | 默认导航项的索引 | _number \| string_ | `0`    |
+| value | 当前导航项的索引 | _number \| string_ | `0`    |
+
+### Sidebar Events
+
+| 事件名 | 说明             | 回调参数        |
+| ------ | ---------------- | --------------- |
+| onChange | 切换导航项时触发 | _value: any, tab: Sidebar.TabObject_ |
+
+### Sidebar.Tab Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| disabled | 是否禁用该项 | _boolean_ | `false` |
+| children | 内容 | _ReactNode_ | - |
+| badge | 图标上徽标的内容 | _boolean \| number \| string \| Badge \| ReactNode_ | - |
+
+### Sidebar.Tab Events
+
+| 事件名 | 说明       | 回调参数        |
+| ------ | ---------- | --------------- |
+| onClick  | 点击时触发 | _event: ITouchEvent_|
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                           | 默认值                                   | 描述  |
+|----------------------------------------------|---------------------------------------|-----|
+| --sidebar-width                              | _80px * $hd_                          | -   |
+| --sidebar-disabled-color                     | _var(--gray-5)_                       | -   |
+| --sidebar-tab-font-size                      | _var(--font-size-md)_                 | -   |
+| --sidebar-tab-line-height                    | _var(--line-height-md)_               | -   |
+| --sidebar-tab-color                          | _var(--text-color)_                   | -   |
+| --sidebar-tab-padding                        | _20px * $hd var(--padding-sm)_        | -   |
+| --sidebar-tab-background-color               | _var(--background-color)_             | -   |
+| --sidebar-tab-active-background-color        | _var(--active-color)_                 | -   |
+| --sidebar-tab-active-font-weight             | _var(--font-weight-bold)_             | -   |
+| --sidebar-tab-active-color                   | _var(--text-color)_                   | -   |
+| --sidebar-tab-active-border-width            | _4px * $hd_                           | -   |
+| --sidebar-tab-active-border-height           | _16px * $hd_                          | -   |
+| --sidebar-tab-active-border-color            | _var(--red)_                          | -   |
+| --sidebar-tab-active-active-background-color | _var(--white)_                        | -   |
+| --sidebar-tab-disabled-color                 | _var(--sidebar-disabled-color)_       | -   |
+| --sidebar-tab-disabled-background-color      | _var(--sidebar-tab-background-color)_ | -   |

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

@@ -0,0 +1,58 @@
+import { Badge, Grid, Sidebar, Toast } from "@fjyueke/bify-core"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function EventSidebar() {
+  return (
+    <>
+      <Toast id="toast" />
+      <Sidebar onChange={(_, { children }: Sidebar.TabObject) => Toast.open(children)}>
+        <Sidebar.Tab>标签名 1</Sidebar.Tab>
+        <Sidebar.Tab>标签名 2</Sidebar.Tab>
+        <Sidebar.Tab>标签名 3</Sidebar.Tab>
+      </Sidebar>
+    </>
+  )
+}
+
+export default function SidebarDemo() {
+  return (
+    <Page title="Sidebar 侧边导航" className="sidebar-demo">
+      <Grid columns={2} centered bordered={false}>
+        <Grid.Item>
+          <Block title="基础用法">
+            <Sidebar>
+              <Sidebar.Tab>标签名</Sidebar.Tab>
+              <Sidebar.Tab>标签名</Sidebar.Tab>
+              <Sidebar.Tab>标签名</Sidebar.Tab>
+            </Sidebar>
+          </Block>
+        </Grid.Item>
+        <Grid.Item>
+          <Block title="徽标提示">
+            <Sidebar>
+              <Sidebar.Tab badge>标签名</Sidebar.Tab>
+              <Sidebar.Tab badge="5">标签名</Sidebar.Tab>
+              <Sidebar.Tab badge={<Badge position="bottom-right" max={99} content={100} />}>标签名</Sidebar.Tab>
+            </Sidebar>
+          </Block>
+        </Grid.Item>
+        <Grid.Item>
+          <Block title="禁用选项">
+            <Sidebar>
+              <Sidebar.Tab>标签名</Sidebar.Tab>
+              <Sidebar.Tab disabled>标签名</Sidebar.Tab>
+              <Sidebar.Tab>标签名</Sidebar.Tab>
+            </Sidebar>
+          </Block>
+        </Grid.Item>
+        <Grid.Item>
+          <Block title="监听切换事件">
+            <EventSidebar />
+          </Block>
+        </Grid.Item>
+      </Grid>
+    </Page>
+  )
+}

package/metaData/components/signature/api.md

@@ -0,0 +1,19 @@
+## API
+
+### Signature Props
+
+| 参数            | 说明               | 类型     | 默认值           |
+| --------------- | ------------------ | -------- | ---------------- |
+| type            | 导出图片类型       | _string_ | `png`            |
+| penColor        | 笔触颜色，默认黑色 | _string_ | `#000`           |
+| lineWidth       | 线条宽度           | _number_ | `3`              |
+| backgroundColor | 背景颜色           | _string_ | -                |
+| canvasId        | canvas id          | _string_ | `taroify-canvas` |
+
+### Signature Events
+
+| 事件名    | 说明           | 回调参数 |
+| --------- | -------------- | -------- |
+| onStart   | 开始签名时触发 | -        |
+| onEnd     | 结束签名时触发 | -        |
+| onSigning | 签名过程中触发 | -        |