@fjyueke/bify-mcp 1.0.0

package/metaData/components/button/doc.md

@@ -0,0 +1,235 @@
+# Button 按钮
+
+### 介绍
+
+按钮用于触发一个操作，如提交表单。
+
+### 引入
+
+```jsx
+import { Button } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 按钮颜色
+
+按钮支持 `default`、`primary`、`info`、`success`、`warning`、`danger` 六种颜色，默认为 `default`。
+
+```jsx
+<Button color="primary">主要按钮</Button>
+<Button color="info">信息按钮</Button>
+<Button color="success">成功按钮</Button>
+<Button color="warning">警告按钮</Button>
+<Button color="danger">危险按钮</Button>
+<Button color="default">默认按钮</Button>
+```
+
+### 文本按钮
+
+通过 `variant="text"` 属性将按钮设置为文本按钮。
+
+```jsx
+<Button variant="text" color="primary">主要按钮</Button>
+<Button variant="text" color="info">信息按钮</Button>
+<Button variant="text" color="success">成功按钮</Button>
+<Button variant="text" color="warning">警告按钮</Button>
+<Button variant="text" color="danger">危险按钮</Button>
+<Button variant="text" color="default">默认按钮</Button>
+```
+
+### 轮廓按钮
+
+通过 `variant="contained"` 属性将按钮设置为轮廓按钮。
+
+```jsx
+<Button variant="outlined" color="primary">主要按钮</Button>
+<Button variant="outlined" color="info">信息按钮</Button>
+<Button variant="outlined" color="success">成功按钮</Button>
+<Button variant="outlined" color="warning">警告按钮</Button>
+<Button variant="outlined" color="danger">危险按钮</Button>
+<Button variant="outlined" color="default">默认按钮</Button>
+```
+
+### 细边框
+
+设置 `hairline` 属性可以展示 0.5px 的细边框。
+
+```jsx
+<Button variant="outlined" color="primary" hairline>主要按钮</Button>
+<Button variant="outlined" color="info" hairline>信息按钮</Button>
+<Button variant="outlined" color="success" hairline>成功按钮</Button>
+<Button variant="outlined" color="warning" hairline>警告按钮</Button>
+<Button variant="outlined" color="danger" hairline>危险按钮</Button>
+<Button variant="outlined" color="default" hairline>默认按钮</Button>
+```
+
+### 禁用状态
+
+通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
+
+```jsx
+<Button variant="contained" color="primary" disabled>主要按钮</Button>
+<Button variant="contained" color="info" disabled>信息按钮</Button>
+<Button variant="contained" color="success" disabled>成功按钮</Button>
+<Button variant="contained" color="warning" disabled>警告按钮</Button>
+<Button variant="contained" color="danger" disabled>危险按钮</Button>
+<Button variant="contained" color="default" disabled>默认按钮</Button>
+```
+
+### 加载状态
+
+通过 `loading` 属性设置按钮为加载状态，可以通过 `{type: "spinner"}` 设置加载类型。
+
+```tsx
+<Button color="success" loading />
+<Button color="success" loading={{ type: "spinner" }} />
+<Button color="primary" loading>加载中...</Button>
+```
+
+### 按钮形状
+
+通过 `shape="square"` 设置方形按钮，通过 `shape="round"` 设置圆形按钮。
+
+```jsx
+<Button variant="contained" color="primary" shape="square">方形按钮</Button>
+<Button variant="contained" color="primary" shape="round">圆形按钮</Button>
+```
+
+### 图标按钮
+
+通过 `icon` 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
+
+```jsx
+<Button variant="contained" color="primary" icon={<DoneOutlined />} />
+<Button variant="contained" color="primary" icon={<DoneOutlined />}>主要按钮</Button>
+<Button variant="outlined" color="primary" icon={<DoneOutlined />} iconPosition="right">轮廓按钮</Button>
+```
+
+### 按钮尺寸
+
+支持 `large`、`medium`、`small`、`mini` 四种尺寸，默认为 `medium`。
+
+```jsx
+<Button color="primary" size="large">大号按钮</Button>
+<Button color="primary" size="medium">普通按钮</Button>
+<Button color="primary" size="small">小型按钮</Button>
+<Button color="primary" size="mini">迷你按钮</Button>
+```
+
+### 块级元素
+
+按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素。
+
+```jsx
+<Button color="primary" block>块级按钮</Button>
+```
+
+### 自定义颜色
+
+通过 `css` 属性可以自定义按钮的颜色。
+
+```tsx
+<Button style={{ backgroundColor: "#7232dd", color: "#fff" }}>单色按钮</Button>
+<Button style={{ borderColor: "#7232dd", color: "#7232dd" }}>单色按钮</Button>
+<Button style={{ background: "linear-gradient(to right, #ff6034, #ee0a24)", color: "#fff" }}>渐变色按钮</Button>
+```
+
+### 按钮组
+
+```tsx
+<Button.Group variant="contained" color="primary" shape="round">
+  <Button> <ArrowLeft /> 上一步</Button>
+  <Button> <Replay /> 刷新</Button>
+  <Button>下一步 <Arrow /></Button>
+</Button.Group>
+
+<Button.Group variant="outlined" shape="round" size="small">
+  <Button> <ArrowLeft /> 上一步</Button>
+  <Button><Replay /> 刷新</Button>
+  <Button>下一步 <Arrow /></Button>
+</Button.Group>
+
+<Button.Group variant="text" color="primary" shape="round">
+  <Button> <ArrowLeft /> 上一步</Button>
+  <Button> <Replay /> 刷新</Button>
+  <Button>下一步 <Arrow /></Button>
+</Button.Group>
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                                               | 类型                                                      | 默认值         |
+|--------------|--------------------------------------------------|---------------------------------------------------------|-------------|
+| variant      | 按钮变种，可选值为 `contained` `text` `outlined`          | _string_                                                | `contained` |
+| color        | 按钮颜色，可选值为 `primary` `success` `warning` `danger` | _string_                                                | `default`   |
+| size         | 尺寸，可选值为 `large` `small` `mini`                   | _string_                                                | `medium`    |
+| shape        | 按钮形状，可选值为 `square` `round`                       | _string_                                                | `square`    |
+| icon         | 左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_                                             | -           |
+| iconPosition <br>`v0.1.1-alpha.0` | 图标展示位置，可选值为 `right`     | _string_                                                 | `left`      |
+| formType     | 原生 button 标签的 type 属性                            | _string_                                                | `button`    |
+| block        | 是否为块级元素                                          | _boolean_                                               | `false`     |
+| disabled     | 是否禁用按钮                                           | _boolean_                                               | `false`     |
+| hairline     | 是否使用 0.5px 边框                                    | _boolean_                                               | `false`     |
+| loading      | 是否显示为加载状态                                        | _boolean \| [LoadingProps](/components/loading/#props)_ | `false`     |
+| children     | 按钮文字                                             | _string_                                                | -           |
+
+
+### Button.Group Props
+
+| 参数       | 说明                                               | 类型        | 默认值         |
+|----------|--------------------------------------------------|-----------|-------------|
+| variant  | 按钮变种，可选值为 `contained` `text` `outlined`          | _string_  | `contained` |
+| color    | 按钮颜色，可选值为 `primary` `success` `warning` `danger` | _string_  | `default`   |
+| size     | 尺寸，可选值为 `large` `small` `mini`                   | _string_  | `medium`    |
+| shape    | 按钮形状，可选值为 `round`                                | _string_  | `square`    |
+| block    | 是否为块级元素                                          | _boolean_ | -           |
+| disabled | 是否禁用按钮                                           | _boolean_ | -           |
+| hairline | 是否使用 0.5px 边框                                    | _boolean_ | -           |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                | 默认值                                      | 描述  |
+|-----------------------------------|------------------------------------------|-----|
+| --button-line-height              | _1.2_                                    | -   |
+| --button-border-width             | _var(--border-width-base)_               | -   |
+| --button-border-radius            | _var(--border-radius-sm)_                | -   |
+| --button-border-radius-max        | _var(--border-radius-max)_               | -   |
+| --button-transition-duration      | _var(--animation-duration-fast)_         | -   |
+| --button-disabled-opacity         | _var(--disabled-opacity)_                | -   |
+| --button-loading-icon-size        | _20px * $hd_                             | -   |
+| --button-height-mini              | _24px * $hd_                             | -   |
+| --button-padding-mini             | _0 var(--padding-base)_                  | -   |
+| --button-font-size-mini           | _var(--font-size-xs)_                    | -   |
+| --button-height-small             | _32px * $hd_                             | -   |
+| --button-padding-small            | _0 var(--padding-xs)_                    | -   |
+| --button-font-size-small          | _var(--font-size-sm)_                    | -   |
+| --button-height-medium            | _44px * $hd_                             | -   |
+| --button-padding-medium           | _0 var(--padding-md)_                    | -   |
+| --button-font-size-medium         | _var(--font-size-md)_                    | -   |
+| --button-height-large             | _50px * $hd_                             | -   |
+| --button-font-size-large          | _var(--font-size-lg)_                    | -   |
+| --button-default-color            | _var(--text-color)_                      | -   |
+| --button-default-background-color | _var(--white)_                           | -   |
+| --button-default-border-color     | _var(--border-color)_                    | -   |
+| --button-primary-color            | _var(--white)_                           | -   |
+| --button-primary-background-color | _var(--primary-color)_                   | -   |
+| --button-primary-border-color     | _var(--button-primary-background-color)_ | -   |
+| --button-info-color               | _var(--white)_                           | -   |
+| --button-info-background-color    | _var(--info-color)_                      | -   |
+| --button-info-border-color        | _var(--button-info-background-color)_    | -   |
+| --button-success-color            | _var(--white)_                           | -   |
+| --button-success-background-color | _var(--success-color)_                   | -   |
+| --button-success-border-color     | _var(--button-success-background-color)_ | -   |
+| --button-warning-color            | _var(--white)_                           | -   |
+| --button-warning-background-color | _var(--warning-color)_                   | -   |
+| --button-warning-border-color     | _var(--button-warning-background-color)_ | -   |
+| --button-danger-color             | _var(--white)_                           | -   |
+| --button-danger-background-color  | _var(--danger-color)_                    | -   |
+| --button-danger-border-color      | _var(--button-danger-background-color)_  | -   |

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

@@ -0,0 +1,235 @@
+import { Button, Space, WhiteSpace } from "@fjyueke/bify-core"
+import { Arrow, ArrowLeft, Replay, ShopOutlined } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function ButtonDemo() {
+  return (
+    <Page title="Button 按钮" className="button-demo">
+      <Block title="按钮颜色">
+        <Space>
+          <Button variant="contained" color="primary">
+            主要按钮
+          </Button>
+          <Button variant="contained" color="info">
+            信息按钮
+          </Button>
+          <Button variant="contained" color="success">
+            成功按钮
+          </Button>
+          <Button variant="contained" color="warning">
+            警告按钮
+          </Button>
+          <Button variant="contained" color="danger">
+            危险按钮
+          </Button>
+          <Button variant="contained" color="default">
+            默认按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="文本按钮">
+        <Space>
+          <Button variant="text" color="primary">
+            主要按钮
+          </Button>
+          <Button variant="text" color="info">
+            信息按钮
+          </Button>
+          <Button variant="text" color="success">
+            成功按钮
+          </Button>
+          <Button variant="text" color="warning">
+            警告按钮
+          </Button>
+          <Button variant="text" color="danger">
+            危险按钮
+          </Button>
+          <Button variant="text" color="default">
+            默认按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="轮廓按钮">
+        <Space>
+          <Button variant="outlined" color="primary">
+            主要按钮
+          </Button>
+          <Button variant="outlined" color="info">
+            信息按钮
+          </Button>
+          <Button variant="outlined" color="success">
+            成功按钮
+          </Button>
+          <Button variant="outlined" color="warning">
+            警告按钮
+          </Button>
+          <Button variant="outlined" color="danger">
+            危险按钮
+          </Button>
+          <Button variant="outlined" color="default">
+            默认按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="细边框按钮">
+        <Space>
+          <Button variant="outlined" color="primary" hairline>
+            主要按钮
+          </Button>
+          <Button variant="outlined" color="info" hairline>
+            信息按钮
+          </Button>
+          <Button variant="outlined" color="success" hairline>
+            成功按钮
+          </Button>
+          <Button variant="outlined" color="warning" hairline>
+            警告按钮
+          </Button>
+          <Button variant="outlined" color="danger" hairline>
+            危险按钮
+          </Button>
+          <Button variant="outlined" color="default" hairline>
+            默认按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="禁止状态">
+        <Space>
+          <Button variant="contained" color="primary" disabled>
+            主要按钮
+          </Button>
+          <Button variant="contained" color="info" disabled>
+            信息按钮
+          </Button>
+          <Button variant="contained" color="success" disabled>
+            成功按钮
+          </Button>
+          <Button variant="contained" color="warning" disabled>
+            警告按钮
+          </Button>
+          <Button variant="contained" color="danger" disabled>
+            危险按钮
+          </Button>
+          <Button variant="contained" color="default" disabled>
+            默认按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="加载状态">
+        <Space>
+          <Button color="success" loading />
+          <Button color="success" loading={{ type: "spinner" }} />
+          <Button color="primary" loading>
+            加载中...
+          </Button>
+        </Space>
+      </Block>
+      <Block title="按钮形状">
+        <Space>
+          <Button variant="contained" color="primary" shape="square">
+            方形按钮
+          </Button>
+          <Button variant="contained" color="primary" shape="round">
+            圆形按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="图标按钮">
+        <Space>
+          <Button variant="contained" color="primary" icon={<ShopOutlined />} />
+          <Button variant="contained" color="primary" icon={<ShopOutlined />}>
+            主要按钮
+          </Button>
+          <Button variant="outlined" color="primary" icon={<ShopOutlined />} iconPosition="right">
+            轮廓按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="按钮尺寸">
+        <Button variant="contained" color="primary" size="large">
+          大号按钮
+        </Button>
+        <WhiteSpace />
+        <Space>
+          <Button variant="contained" color="primary" size="medium">
+            普通按钮
+          </Button>
+          <Button variant="contained" color="primary" size="small">
+            小型按钮
+          </Button>
+          <Button variant="contained" color="primary" size="mini">
+            迷你按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="块级按钮">
+        <Button color="primary" block>
+          块级按钮
+        </Button>
+      </Block>
+      <Block title="自定义颜色">
+        <Space>
+          <Button style={{ backgroundColor: "#7232dd", color: "#fff", borderColor: "#7232dd" }}>
+            单色按钮
+          </Button>
+          <Button style={{ borderColor: "#7232dd", color: "#7232dd" }}>单色按钮</Button>
+          <Button
+            style={{
+              background: "linear-gradient(to right, #ff6034, #ee0a24)",
+              color: "#fff",
+              border: 0,
+            }}
+          >
+            渐变色按钮
+          </Button>
+        </Space>
+      </Block>
+      <Block title="按钮组">
+        <Space direction="vertical">
+          <Button.Group variant="contained" shape="round" color="primary">
+            <Button>
+              <ArrowLeft />
+              上一步
+            </Button>
+            <Button>
+              <Replay />
+              刷新
+            </Button>
+            <Button>
+              下一步
+              <Arrow />
+            </Button>
+          </Button.Group>
+          <Button.Group variant="outlined" shape="round">
+            <Button>
+              <ArrowLeft /> 上一步
+            </Button>
+            <Button>
+              <Replay />
+              刷新
+            </Button>
+            <Button>
+              下一步
+              <Arrow />
+            </Button>
+          </Button.Group>
+          <Button.Group variant="text" shape="round">
+            <Button>
+              <ArrowLeft /> 上一步
+            </Button>
+            <Button>
+              <Replay />
+              刷新
+            </Button>
+            <Button>
+              下一步
+              <Arrow />
+            </Button>
+          </Button.Group>
+        </Space>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/calendar/api.md

@@ -0,0 +1,62 @@
+## API
+
+### Props
+
+| 参数                                      | 说明                                                                                                  | 类型                                              | 默认值                                                        |
+| ----------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------------- |
+| type                                      | 选择类型:<br>`single` 表示选择单个日期，<br>`multiple` 表示选择多个日期，<br>`range` 表示选择日期区间 | _string_                                          | `single`                                                      |
+| defaultValue                              | 默认选中的日期，`type` 为 `multiple` 或 `range` 时为数组，传入 `null` 表示默认不选择                  | _Date \| Date[] \| null_                          | 今天                                                          |
+| value                                     | 选中的日期，`type` 为 `multiple` 或 `range` 时为数组，传入 `null` 表示默认不选择                      | _Date \| Date[] \| null_                          | 今天                                                          |
+| formatter                                 | 日期格式化函数                                                                                        | _(day: Calendar.DayObject) => Calendar.DayObject_ | -                                                             |
+| title                                     | 日历标题                                                                                              | _ReactNode_                                       | `日期选择`                                                    |
+| showSubtitle<br> `v0.1.1-alpha.6`         | 是否展示日历副标题（年月）                                                                            | _boolean_                                         | `true`                                                        |
+| subtitle                                  | 自定义日历副标题                                                                                      | _ReactNode\|((date: Date) => ReactNode)_          | (date) => \`${date.getFullYear()}年${date.getMonth() + 1}月\` |
+| watermark                                 | 是否显示月份背景水印                                                                                  | _boolean_                                         | `true`                                                        |
+| min                                       | 可选择的最小日期                                                                                      | _Date_                                            | 当前日期                                                      |
+| max                                       | 可选择的最大日期                                                                                      | _Date_                                            | 当前日期的六个月后                                            |
+| poppable <br> `v0.1.1-alpha.6`            | 是否以弹层的形式展示日历                                                                              | _boolean_                                         | `false`                                                       |
+| showPopup <br> `v0.1.1-alpha.6`           | 是否显示日历弹窗, poppable: true 时生效                                                               | _boolean_                                         | `false`                                                       |
+| popupPlacement                            | 弹出位置，可选值为 `left` `right` `top` , poppable: true 时生效                                       | _string_                                          | `bottom`                                                      |
+| popupRound                                | 是否显示圆角弹窗, poppable: true 时生效                                                               | _boolean_                                         | `true`                                                        |
+| popupCloseIcon                            | 弹框是否显示关闭图标, poppable: true 时生效                                                           | _boolean_                                         | `true`                                                        |
+| readonly                                  | 是否为只读状态，只读状态下不能选择日期                                                                | _boolean_                                         | `false`                                                       |
+| showConfirm <br> `v0.1.1-alpha.6`         | 是否展示确认按钮                                                                                      | _boolean_                                         | `true`                                                        |
+| confirmText <br> `v0.1.1-alpha.6`         | 确认按钮的文字                                                                                        | _ReactNode_                                       | `确认`                                                        |
+| confirmDisabledText <br> `v0.1.1-alpha.6` | 确认按钮处于禁用状态时的文字                                                                          | _ReactNode_                                       | `确认`                                                        |
+| firstDayOfWeek                            | 设置周起始日                                                                                          | _0-6_                                             | `0`                                                           |
+
+### Calendar.DayObject 数据结构
+
+日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容
+
+| 键名      | 说明                                                          | 类型     |
+| --------- | ------------------------------------------------------------- | -------- |
+| value     | 日期对应的 Date 对象                                          | _Date_   |
+| type      | 日期类型，可选值为 `active` `start` `middle` `end` `disabled` | _string_ |
+| children  | 中间显示的文字                                                | _string_ |
+| top       | 上方的提示信息                                                | _string_ |
+| bottom    | 下方的提示信息                                                | _string_ |
+| className | 额外类名                                                      | _string_ |
+
+### Events
+
+| 事件名                       | 说明                                                                    | 回调参数                |
+| ---------------------------- | ----------------------------------------------------------------------- | ----------------------- |
+| onChange                     | 点击并选中任意日期时触发                                                | _value: Date \| Date[]_ |
+| onConfirm                    | 日期选择完成后触发，若使用 `Calendar.Button` 组件，则点击确认按钮后触发 | _value: Date \| Date[]_ |
+| onClose <br>`v0.1.1-alpha.6` | 关闭弹层时出发                                                          | _visible: boolean_      |
+
+### Calendar.Footer Props
+
+| 参数     | 说明     | 类型       | 默认值 |
+| -------- | -------- | ---------- | ------ |
+| children | 底部内容 | _ReactNoe_ | -      |
+
+### Calendar.Button Props
+
+| 参数                | 说明                         | 类型        | 默认值    |
+| ------------------- | ---------------------------- | ----------- | --------- |
+| children            | 按钮内容                     | _ReactNoe_  | 确认      |
+| type                | 按钮类型                     | _confirm_   | `confirm` |
+| confirmText         | 确认按钮的文字               | _ReactNode_ | -         |
+| confirmDisabledText | 确认按钮处于禁用状态时的文字 | _ReactNode_ | -         |