@fjyueke/bify-mcp 1.0.0

package/metaData/components/uploader/doc.md

@@ -0,0 +1,340 @@
+# Uploader 文件上传
+
+### 介绍
+
+用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。
+
+### 引入
+
+```tsx
+import { Uploader } from "taroify/core"
+```
+
+## 代码演示
+
+### 基础用法
+
+文件上传触发 `onUpload` 事件，获取到对应的 `file` 对象。
+
+```tsx
+function BasicUploader() {
+  const [file, setFile] = useState<Uploader.File>()
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFile({
+        url: tempFiles[0].path,
+        type: tempFiles[0].type,
+        name: tempFiles[0].originalFileObj?.name,
+      })
+    })
+  }
+
+  return <Uploader value={file} onUpload={onUpload} onChange={setFile} />
+}
+```
+
+### 文件预览
+
+通过 `value` 属性可以绑定已经上传的文件列表，并展示文件列表的预览图。
+
+```tsx
+function PreviewUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+    },
+    {
+      url: "https://img.yzcdn.cn/vant/tree.jpg",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple onUpload={onUpload} onChange={setFiles} />
+}
+```
+
+### 上传状态
+
+通过 `status` 属性可以标识上传状态，`uploading` 表示上传中，`failed` 表示上传失败，`completed` 表示上传完成。
+
+```tsx
+function UploaderWithStatus() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+      status: "uploading",
+      message: "上传中...",
+    },
+    {
+      url: "https://img01.yzcdn.cn/vant/tree.jpg",
+      status: "failed",
+      message: "上传失败",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple onUpload={onUpload} onChange={setFiles} />
+}
+```
+
+### 限制上传数量
+
+通过 `maxFiles` 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。
+
+```tsx
+function MaxFilesUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple maxFiles={2} onUpload={onUpload} onChange={setFiles} />
+}
+```
+
+### 自定义上传样式
+
+通过children可以自定义上传区域的样式。
+
+```tsx
+function CustomUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([])
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+  return (
+    <Uploader multiple value={files} onChange={setFiles} onUpload={onUpload}>
+      <Button icon={<Plus />} color="primary">
+        上传文件
+      </Button>
+    </Uploader>
+  )
+}
+```
+
+### 自定义上传列表项
+
+通过自定义 `itemrender` 控制每个上传区块
+```tsx
+function CustomPreviewUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  const itemRender = ({ file }: { file: Uploader.File }) => {
+    return (
+      <Uploader.Image
+        key={file.url}
+        url={file.url}
+        name={file.name}
+        type={file.type}
+        onRemove={() => setFiles(files.filter((item) => item !== file))}
+      >
+        <View className="preview-cover taroify-ellipsis">图片名称</View>
+      </Uploader.Image>
+    )
+  }
+
+  return (
+    <Uploader
+      value={files}
+      multiple
+      onUpload={onUpload}
+      onChange={setFiles}
+      itemRender={itemRender}
+    />
+  )
+}
+```
+
+```scss
+.preview-cover {
+  position: absolute;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px * 2;
+  color: #fff;
+  font-size: 12px * 2;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+```
+
+### 禁用文件上传
+
+通过 `disabled` 属性禁用文件上传。
+
+```tsx
+<Uploader disabled />
+```
+
+## 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_ |
+
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                        | 默认值                                       | 描述  |
+|-------------------------------------------|-------------------------------------------|-----|
+| --uploader-size                           | _80px * $hd_                              | -   |
+| --uploader-disabled-opacity               | _var(--disabled-opacity)_                 | -   |
+| --uploader-upload-size                    | _var(--uploader-size)_                    | -   |
+| --uploader-upload-width                   | _var(--uploader-upload-size)_             | -   |
+| --uploader-upload-height                  | _var(--uploader-upload-size)_             | -   |
+| --uploader-upload-margin                  | _0 var(--padding-xs) var(--padding-xs) 0_ | -   |
+| --uploader-upload-background-color        | _var(--gray-1)_                           | -   |
+| --uploader-upload-active-background-color | _var(--active-color)_                     | -   |
+| --uploader-upload-icon-color              | _var(--gray-4)_                           | -   |
+| --uploader-upload-icon-font-size          | _24px * $hd_                              | -   |
+| --uploader-upload-text-margin-top         | _var(--padding-xs)_                       | -   |
+| --uploader-upload-text-color              | _var(--gray-6)_                           | -   |
+| --uploader-upload-text-font-size          | _var(--font-size-sm)_                     | -   |
+| --uploader-preview-margin                 | _0 var(--padding-xs) var(--padding-xs) 0_ | -   |
+| --uploader-preview-image-size             | _var(--uploader-size)_                    | -   |
+| --uploader-preview-image-width            | _var(--uploader-preview-image-size)_      | -   |
+| --uploader-preview-image-height           | _var(--uploader-preview-image-size)_      | -   |
+| --uploader-remove-size                    | _14px * $hd_                              | -   |
+| --uploader-remove-width                   | _var(--uploader-remove-size)_             | -   |
+| --uploader-remove-height                  | _var(--uploader-remove-size)_             | -   |
+| --uploader-remove-background-color        | _rgba(0, 0, 0, 0.7)_                      | -   |
+| --uploader-remove-border-radius           | _0 0 0 12px * $hd_                        | -   |
+| --uploader-remove-icon-font-size          | _16px * $hd_                              | -   |
+| --uploader-remove-icon-color              | _var(--white)_                            | -   |
+| --uploader-file-size                      | _var(--uploader-size)_                    | -   |
+| --uploader-file-width                     | _var(--uploader-file-size)_               | -   |
+| --uploader-file-height                    | _var(--uploader-file-size)_               | -   |
+| --uploader-file-background-color          | _var(--background-color)_                 | -   |
+| --uploader-file-icon-font-size            | _20px * $hd_                              | -   |
+| --uploader-file-icon-color                | _var(--gray-7)_                           | -   |
+| --uploader-file-name-padding              | _0 var(--padding-base)_                   | -   |
+| --uploader-file-name-margin-top           | _var(--padding-xs)_                       | -   |
+| --uploader-file-name-font-size            | _var(--font-size-sm)_                     | -   |
+| --uploader-file-name-color                | _var(--gray-7)_                           | -   |
+| --uploader-mask-color                     | _var(--white)_                            | -   |
+| --uploader-mask-background-color          | _rgba(50, 50, 51, 0.88)_                  | -   |
+| --uploader-mask-icon-size                 | _22px * $hd_                              | -   |
+| --uploader-mask-message-margin-top        | _6px * $hd_                               | -   |
+| --uploader-mask-message-padding           | _0 var(--padding-base)_                   | -   |
+| --uploader-mask-message-font-size         | _var(--font-size-sm)_                     | -   |
+| --uploader-mask-message-line-height       | _var(--line-height-xs)_                   | -   |
+| --uploader-loading-icon-size              | _22px * $hd_                              | -   |
+| --uploader-loading-icon-width             | _var(--uploader-loading-icon-size)_       | -   |
+| --uploader-loading-icon-height            | _var(--uploader-loading-icon-size)_       | -   |
+| --uploader-loading-icon-color             | _var(--white)_                            | -   |

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

@@ -0,0 +1,222 @@
+import { Button, Uploader } from "@fjyueke/bify-core"
+import { Plus } from "@fjyueke/bify-icons"
+import { View } from "@tarojs/components"
+import { chooseImage } from "@tarojs/taro"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicUploader() {
+  const [file, setFile] = useState<Uploader.File>()
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFile({
+        url: tempFiles[0].path,
+        type: tempFiles[0].type,
+        name: tempFiles[0].originalFileObj?.name,
+      })
+    })
+  }
+
+  return <Uploader value={file} onUpload={onUpload} onChange={setFile} />
+}
+
+function PreviewUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+    },
+    {
+      url: "https://img.yzcdn.cn/vant/tree.jpg",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple onUpload={onUpload} onChange={setFiles} />
+}
+
+function UploaderWithStatus() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+      status: "uploading",
+      message: "上传中...",
+    },
+    {
+      url: "https://img01.yzcdn.cn/vant/tree.jpg",
+      status: "failed",
+      message: "上传失败",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple onUpload={onUpload} onChange={setFiles} />
+}
+
+function MaxFilesUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple maxFiles={2} onUpload={onUpload} onChange={setFiles} />
+}
+
+function CustomUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([])
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+  return (
+    <Uploader multiple value={files} onChange={setFiles} onUpload={onUpload}>
+      <Button icon={<Plus />} color="primary">
+        上传文件
+      </Button>
+    </Uploader>
+  )
+}
+
+function CustomPreviewUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  const itemRender = ({ file }: { file: Uploader.File }) => {
+    return (
+      <Uploader.Image
+        key={file.url}
+        url={file.url}
+        name={file.name}
+        type={file.type}
+        onRemove={() => setFiles(files.filter((item) => item !== file))}
+      >
+        <View className="preview-cover taroify-ellipsis">图片名称</View>
+      </Uploader.Image>
+    )
+  }
+
+  return (
+    <Uploader
+      value={files}
+      multiple
+      onUpload={onUpload}
+      onChange={setFiles}
+      itemRender={itemRender}
+    />
+  )
+}
+
+function DisabledUploader() {
+  return <Uploader disabled />
+}
+
+export default function UploaderDemo() {
+  return (
+    <Page title="Uploader 文件上传" className="uploader-demo">
+      <Block title="基础用法">
+        <BasicUploader />
+      </Block>
+      <Block title="文件预览">
+        <PreviewUploader />
+      </Block>
+      <Block title="上传状态">
+        <UploaderWithStatus />
+      </Block>
+      <Block title="限制上传数量">
+        <MaxFilesUploader />
+      </Block>
+      <Block title="自定义上传样式">
+        <CustomUploader />
+      </Block>
+      <Block title="自定义上传列表项">
+        <CustomPreviewUploader />
+      </Block>
+      <Block title="禁用文件上传">
+        <DisabledUploader />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/watermark/api.md

@@ -0,0 +1,18 @@
+## API
+
+### Props
+
+| 参数      | 说明                                                        | 类型               | 默认值    |
+| --------- | ----------------------------------------------------------- | ------------------ | --------- |
+| width     | 水印宽度                                                    | _number_           | `80`      |
+| height    | 水印高度                                                    | _number_           | `80`      |
+| zIndex    | 水印的 z-index                                              | _number \| string_ | `100`     |
+| content   | 文字水印的内容                                              | _string_           | -         |
+| image     | 图片水印的内容，如果与 `content` 同时传入，优先使用图片水印 | _string_           | -         |
+| rotate    | 水印的旋转角度                                              | _number_           | `-11`     |
+| fullPage  | 水印是否全屏显示                                            | _boolean_          | `false`   |
+| gapX      | 水印之间的水平间隔                                          | _number_           | `20`      |
+| gapY      | 水印之间的垂直间隔                                          | _number_           | `20`      |
+| textColor | 文字水印的颜色                                              | _string_           | `#dcdee0` |
+| textSize  | 文字水印的大小                                              | _number_           | `20`      |
+| opacity   | 水印的透明度                                                | _number_           | -         |

package/metaData/components/watermark/doc.md

@@ -0,0 +1,97 @@
+# Watermark 水印
+
+### 介绍
+
+在页面上添加特定的文字或图案作为水印，可用于防止信息盗用。
+
+请升级 `taroify` 到 >= `v0.1.1-alpha.11` 版本来使用该组件。
+
+### 引入
+
+```tsx
+import { Watermark } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 文字水印
+
+通过 `content` 属性来设置水印的文字。
+
+```tsx
+<Watermark content="Taroify" />
+```
+
+### 图片水印
+
+通过 `image` 属性来设置水印图片，并使用 `opacity` 来调整水印的整体透明度。
+
+```tsx
+<Watermark image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png" opacity={0.2} />
+```
+
+### 自定义间隔
+
+通过 `gapX` 和 `gapY` 属性来控制多个重复水印之间的间隔。
+
+```tsx
+<Watermark
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  gapX={30}
+  gapY={10}
+  opacity={0.2}
+/>
+```
+
+### 自定义倾斜角度
+
+通过 `rotate` 属性来控制水印的倾斜角度，默认值为`-11`。
+
+```tsx
+<Watermark
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  rotate={22}
+  opacity={0.2}
+/>
+```
+
+### 显示范围
+
+通过 `fullPage` 属性来控制水印的显示范围。
+
+```tsx
+<Watermark
+  image="https://fastly.jsdelivr.net/npm/@vant/assets/vant-watermark.png"
+  opacity={0.2}
+  fullPage
+/>
+```
+
+## API
+
+### Props
+
+| 参数      | 说明                                                        | 类型               | 默认值    |
+| --------- | ----------------------------------------------------------- | ------------------ | --------- |
+| width     | 水印宽度                                                    | _number_           | `80`      |
+| height    | 水印高度                                                    | _number_           | `80`      |
+| zIndex    | 水印的 z-index                                              | _number \| string_ | `100`     |
+| content   | 文字水印的内容                                              | _string_           | -         |
+| image     | 图片水印的内容，如果与 `content` 同时传入，优先使用图片水印 | _string_           | -         |
+| rotate    | 水印的旋转角度                                              | _number_           | `-11`     |
+| fullPage  | 水印是否全屏显示                                            | _boolean_          | `false`   |
+| gapX      | 水印之间的水平间隔                                          | _number_           | `20`      |
+| gapY      | 水印之间的垂直间隔                                          | _number_           | `20`      |
+| textColor | 文字水印的颜色                                              | _string_           | `#dcdee0` |
+| textSize  | 文字水印的大小                                              | _number_           | `20`      |
+| opacity   | 水印的透明度                                                | _number_           | -         |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/components/config-provider)。
+
+| 名称                | 默认值 | 描述                  |
+| ------------------- | ------ | --------------------- |
+| --watermark-z-index | _100_  | 根节点的 z-index 层级 |