@fjyueke/bify-mcp 1.0.0

package/metaData/components/tag/doc.md

@@ -0,0 +1,162 @@
+# Tag 标签
+
+### 介绍
+
+用于标记关键词和概括主要内容。
+
+### 引入
+
+```ts
+import { Tag } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `color` 属性控制标签颜色。
+
+```tsx
+<Tag>标签</Tag>
+<Tag color="primary">标签</Tag>
+<Tag color="info">标签</Tag>
+<Tag color="success">标签</Tag>
+<Tag color="warning">标签</Tag>
+<Tag color="danger">标签</Tag>
+```
+
+### 空心样式
+
+设置 `variant="outlined"` 属性设置为空心样式。
+
+```tsx
+<Tag color="primary" variant="outlined">
+  标签
+</Tag>
+```
+
+### 圆角样式
+
+通过 `shape="rounded"` 设置为圆角样式。
+
+```tsx
+<Tag color="primary" shape="rounded">
+  标签
+</Tag>
+```
+
+### 右侧圆角样式
+
+通过 `shape="roundedRight"` 设置为圆角样式。
+
+```tsx
+<Tag color="primary" shape="roundedRight">
+  标签
+</Tag>
+```
+
+### 左侧圆角样式
+
+通过 `shape="roundedLeft"` 设置为圆角样式。
+
+```tsx
+<Tag color="primary" shape="roundedLeft">
+  标签
+</Tag>
+```
+
+### 可关闭标签
+
+添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `onClose` 事件，在 `onClose` 事件中可以执行隐藏标签的逻辑。
+
+```tsx
+function CloseTag() {
+  const [visible, setVisible] = useState(true)
+  return (
+    <>
+      {visible && (
+        <Tag color="primary" size="medium" closeable onClose={() => setVisible(false)}>
+          标签
+        </Tag>
+      )}
+    </>
+  )
+}
+```
+
+### 标签大小
+
+通过 `size` 属性调整标签大小。
+
+```tsx
+<Tag color="primary" children="标签" />
+<Tag color="primary" size="medium" children="标签" />
+<Tag color="primary" size="large" children="标签" />
+```
+
+### 自定义颜色
+
+通过 `color` 和 `textColor` 属性设置标签颜色。
+
+```tsx
+<Tag style={{ backgroundColor: "#7232dd" }} children="标签" />
+<Tag style={{ backgroundColor: "#ffe1e1", color: "#ad0000" }} children="标签" />
+<Tag style={{ color: "#7232dd" }} variant="outlined" children="标签" />
+```
+
+## API
+
+### Props
+
+| 参数      | 说明                                                         | 类型      | 默认值    |
+| --------- | ------------------------------------------------------------ | --------- | --------- |
+| size      | 大小，可选值为 `large` `medium`                              | _string_  | -         |
+| color     | 类型，可选值为 `primary` `info` `success` `danger` `warning` | _string_  | `default` |
+| shape     | 形状，可选值为 `rounded` `roundedRight` `roundedLeft`        | _string_  | `square`  |
+| closeable | 是否为可关闭标签                                             | _boolean_ | `false`   |
+
+### Events
+
+| 事件名  | 说明           | 回调参数             |
+| ------- | -------------- | -------------------- |
+| onClick | 点击时触发     | _event: ITouchEvent_ |
+| onClose | 关闭标签时触发 | _event: ITouchEvent_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                    | 默认值                                                                  | 描述 |
+| --------------------------------------- | ----------------------------------------------------------------------- | ---- |
+| --tag-padding                           | _var(0 var(--padding-base))_                                            | -    |
+| --tag-color                             | _var(--white)_                                                          | -    |
+| --tag-font-size                         | _var(--font-size-sm)_                                                   | -    |
+| --tag-border-radius                     | _2px \* $hd_                                                            | -    |
+| --tag-line-height                       | _16px \* $hd_                                                           | -    |
+| --tag-medium-padding                    | _2px * $hd 6px * $hd_                                                   | -    |
+| --tag-large-padding                     | _var(--padding-base) var(--padding-xs)_                                 | -    |
+| --tag-large-border-radius               | _var(--border-radius-md)_                                               | -    |
+| --tag-large-font-size                   | _var(--font-size-md)_                                                   | -    |
+| --tag-rounded-border-radius             | _var(--border-radius-max)_                                              | -    |
+| --tag-rounded-right-padding             | _var(--tag-rounded-right-padding, 0 (6px \* $hd) 0 var(--padding-base)_ | -    |
+| --tag-rounded-left-padding              | _var(--tag-rounded-left-padding, 0 var(--padding-base) 0 (6px \* $hd))_ | -    |
+| --tag-rounded-right-medium-padding      | _2px * $hd 8px * $hd 2px * $hd 6px * $hd_                               | -    |
+| --tag-rounded-left-medium-padding       | _2px * $hd 6px * $hd 2px * $hd 8px * $hd_                               | -    |
+| --tag-rounded-right-large-padding       | _var(--padding-base) 6px \* $hd var(--padding-base) var(--padding-xs)_  | -    |
+| --tag-rounded-left-large-padding        | _var(--padding-base) var(--padding-xs) var(--padding-base) 6px \* $hd_  | -    |
+| --tag-default-color                     | _var(--gray-6)_                                                         | -    |
+| --tag-default-background-color          | _var(--gray-6)_                                                         | -    |
+| --tag-primary-color                     | _var(--primary-color)_                                                  | -    |
+| --tag-primary-background-color          | _var(--primary-color)_                                                  | -    |
+| --tag-info-color                        | _var(--info-color)_                                                     | -    |
+| --tag-info-background-color             | _var(--info-color)_                                                     | -    |
+| --tag-success-color                     | _var(--success-color)_                                                  | -    |
+| --tag-success-background-color          | _var(--success-color)_                                                  | -    |
+| --tag-warning-color                     | _var(--warning-color)_                                                  | -    |
+| --tag-warning-background-color          | _var(--warning-color)_                                                  | -    |
+| --tag-danger-color                      | _var(--danger-color)_                                                   | -    |
+| --tag-danger-background-color           | _var(--danger-color)_                                                   | -    |
+| --tag-outlined-background-color         | _var(--white)_                                                          | -    |
+| --tag-border-color <br>`v0.4.0-alpha.0` | _var(--tag-border-color, currentColor)_                                 | -    |

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

@@ -0,0 +1,84 @@
+import {Cell, Tag} from "@fjyueke/bify-core"
+import {useState} from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function CloseTag() {
+  const [visible, setVisible] = useState(true)
+  return (
+    <>
+      {visible && (
+        <Tag color="primary" size="medium" closeable onClose={() => setVisible(false)}>
+          标签
+        </Tag>
+      )}
+    </>
+  )
+}
+
+export default function TagDemo() {
+  return (
+    <Page title="Tag 标签" className="tag-demo">
+      <Block variant="card" title="基础用法">
+        <Cell title="颜色 default">
+          <Tag>标签</Tag>
+        </Cell>
+        <Cell title="颜色 primary">
+          <Tag color="primary">标签</Tag>
+        </Cell>
+        <Cell title="颜色 info">
+          <Tag color="info">标签</Tag>
+        </Cell>
+        <Cell title="颜色 success">
+          <Tag color="success">标签</Tag>
+        </Cell>
+        <Cell title="颜色 warning">
+          <Tag color="warning">标签</Tag>
+        </Cell>
+        <Cell title="颜色 danger">
+          <Tag color="danger">标签</Tag>
+        </Cell>
+      </Block>
+      <Block variant="card" title="样式风格">
+        <Cell title="空心样式">
+          <Tag color="primary" variant="outlined" children="标签"/>
+        </Cell>
+        <Cell title="圆角样式">
+          <Tag color="primary" shape="rounded" children="标签"/>
+        </Cell>
+        <Cell title="右侧圆角样式">
+          <Tag color="primary" shape="roundedRight" children="标签"/>
+        </Cell>
+        <Cell title="左侧圆角样式">
+          <Tag color="primary" shape="roundedLeft" children="标签"/>
+        </Cell>
+        <Cell title="可关闭标签">
+          <CloseTag/>
+        </Cell>
+      </Block>
+      <Block variant="card" title="标签大小">
+        <Cell title="小号标签">
+          <Tag color="primary" children="标签"/>
+        </Cell>
+        <Cell title="中号标签">
+          <Tag color="primary" size="medium" children="标签"/>
+        </Cell>
+        <Cell title="大号标签">
+          <Tag color="primary" size="large" children="标签"/>
+        </Cell>
+      </Block>
+      <Block variant="card" title="自定义颜色">
+        <Cell title="背景颜色">
+          <Tag style={{backgroundColor: "#7232dd"}} children="标签"/>
+        </Cell>
+        <Cell title="文字颜色">
+          <Tag style={{backgroundColor: "#ffe1e1", color: "#ad0000"}} children="标签"/>
+        </Cell>
+        <Cell title="空心颜色">
+          <Tag style={{color: "#7232dd"}} variant="outlined" children="标签"/>
+        </Cell>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/text-ellipsis/api.md

@@ -0,0 +1,26 @@
+## API
+
+### Props
+
+| 参数         | 说明                                | 类型               | 默认值  |
+| ------------ | ----------------------------------- | ------------------ | ------- |
+| rows         | 展示的行数                          | _number \| string_ | `1`     |
+| content      | 需要展示的文本                      | _string_           | -       |
+| expandText   | 展开操作的文案                      | _string_           | -       |
+| collapseText | 收起操作的文案                      | _string_           | -       |
+| dots         | 省略号的文本内容                    | _string_           | `'...'` |
+| position     | 省略位置，可选值为 `start` `middle` | _string_           | `'end'` |
+
+### Events
+
+| 事件名        | 说明                | 回调参数            |
+| ------------- | ------------------- | ------------------- |
+| onClickAction | 点击展开/收起时触发 | _expanded: boolean_ |
+
+### 方法
+
+通过 `ref` 可以获取到 TextEllipsis 实例并调用实例方法
+
+| 方法名 | 说明     | 参数 | 返回值 |
+| :----- | -------- | ---- | ------ |
+| toggle `v0.7.0`  | 切换文本的展开状态，传 true 为展开，false 为收起，不传参为切换 | _expanded?: boolean_   | -      |

package/metaData/components/text-ellipsis/doc.md

@@ -0,0 +1,135 @@
+# TextEllipsis 文本省略
+
+### 介绍
+
+对长文本进行省略，支持展开/收起。
+
+请升级 `taroify` 到 >= `v0.1.1-alpha.9` 版本来使用该组件。
+
+### 引入
+
+```tsx
+import { TextEllipsis } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+默认展示 `1` 行，超过 `1` 行显示省略号。
+
+```tsx
+<TextEllipsis content="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。" />
+```
+
+### 展开/收起
+
+超过行数支持展开/收起。
+
+```tsx
+<TextEllipsis
+  content="似水流年是一个人所有的一切，只有这个东西，才真正归你所有。其余的一切，都是片刻的欢娱和不幸，转眼间就已跑到那似水流年里去了。"
+  expandText="展开"
+  collapseText="收起"
+/>
+```
+
+### 自定义展示行数
+
+通过设置 `rows` 限制展示行数。
+
+```tsx
+<TextEllipsis
+  content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。"
+  rows={2}
+  expandText="展开"
+  collapseText="收起"
+/>
+```
+
+### 自定义省略位置
+
+通过设置 `position` 控制省略位置。
+
+- 头部省略：
+
+```tsx
+<TextEllipsis
+  content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。"
+  position="start"
+  rows={3}
+  expandText="展开"
+  collapseText="收起"
+/>
+```
+
+- 中部省略：
+
+```tsx
+<TextEllipsis
+  content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。"
+  position="middle"
+  rows={3}
+  expandText="展开"
+  collapseText="收起"
+/>
+```
+
+### 手动控制
+
+通过 ref 可以获取到 TextEllipsis 实例并调用实例方法
+
+```tsx
+const wrapRef = useRef<TextEllipsisInstance>(null);
+
+const onClick = () => {
+  wrapRef.current?.toggle(true)
+}
+
+return (
+  <Block variant="card" title="方法调用">
+    <TextEllipsis ref={wrapRef} content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。" position="start" rows={3} expandText="展开" collapseText="收起" />
+    <Button onClick={onClick}>展开</Button>
+  </Block>
+)
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                                | 类型               | 默认值  |
+| ------------ | ----------------------------------- | ------------------ | ------- |
+| rows         | 展示的行数                          | _number \| string_ | `1`     |
+| content      | 需要展示的文本                      | _string_           | -       |
+| expandText   | 展开操作的文案                      | _string_           | -       |
+| collapseText | 收起操作的文案                      | _string_           | -       |
+| dots         | 省略号的文本内容                    | _string_           | `'...'` |
+| position     | 省略位置，可选值为 `start` `middle` | _string_           | `'end'` |
+
+### Events
+
+| 事件名        | 说明                | 回调参数            |
+| ------------- | ------------------- | ------------------- |
+| onClickAction | 点击展开/收起时触发 | _expanded: boolean_ |
+
+### 方法
+
+通过 `ref` 可以获取到 TextEllipsis 实例并调用实例方法
+
+| 方法名 | 说明     | 参数 | 返回值 |
+| :----- | -------- | ---- | ------ |
+| toggle `v0.7.0`  | 切换文本的展开状态，传 true 为展开，false 为收起，不传参为切换 | _expanded?: boolean_   | -      |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                               | 默认值          | 描述           |
+| ---------------------------------- | --------------- | -------------- |
+| --text-ellipsis-font-size          | _14px \* $hd_   | 文本字体大小   |
+| --text-ellipsis-content-font-color | _var(--gray-8)_ | 文本字体颜色   |
+| --text-ellipsis-line-height        | _1.6_           | 文本的行高     |
+| --text-ellipsis-action-color       | _var(--blue)_   | 操作按钮的颜色 |

package/metaData/components/text-ellipsis/example/index.tsx

@@ -0,0 +1,44 @@
+import { useRef } from "react"
+import { TextEllipsis, Button } from "@fjyueke/bify-core"
+import type { TextEllipsisInstance } from "@fjyueke/bify-core/text-ellipsis";
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+const FunTextEllipsis = () => {
+  const wrapRef = useRef<TextEllipsisInstance>(null);
+
+  const onClick = () => {
+    wrapRef.current?.toggle(true)
+  }
+
+  return (
+    <Block variant="card" title="方法调用">
+      <TextEllipsis ref={wrapRef} content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。" position="start" rows={3} expandText="展开" collapseText="收起" />
+      <Button onClick={onClick}>展开</Button>
+    </Block>
+  )
+}
+
+export default function TextEllipsisDemo() {
+  return (
+    <Page title="TextEllipsis 文本省略" className="text-props-ellipsis-demo">
+      <Block variant="card" title="基础用法">
+        <TextEllipsis content="慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。" />
+      </Block>
+      <Block variant="card" title="展开/收起">
+        <TextEllipsis content="似水流年是一个人所有的一切，只有这个东西，才真正归你所有。其余的一切，都是片刻的欢娱和不幸，转眼间就已跑到那似水流年里去了。" expandText="展开" collapseText="收起" />
+      </Block>
+      <Block variant="card" title="自定义展示行数">
+        <TextEllipsis content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。" rows={2} expandText="展开" collapseText="收起" />
+        <TextEllipsis style={{ marginTop: "0.2rem" }} content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。" rows={4} expandText="展开" collapseText="收起" />
+      </Block>
+      <Block variant="card" title="自定义省略位置">
+        <TextEllipsis content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。" position="start" rows={3} expandText="展开" collapseText="收起" />
+        <TextEllipsis style={{ marginTop: "0.2rem" }} content="那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。" position="middle" rows={3} expandText="展开" collapseText="收起" />
+      </Block>
+      <FunTextEllipsis />
+    </Page>
+  )
+}

package/metaData/components/timeline/api.md

@@ -0,0 +1,20 @@
+## API
+
+### Timeline Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| position | 位置布局，可选值为 `left` `right` `alternate` `alternate-reverse` | _string_ | - |
+
+### Timeline.Item Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| dot | 圆点 | _ReactNode \| TimelineDotProps_ | - |
+
+### Timeline.Dot Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| variant | 圆点变体，可选值为 `outlined` | _string_ | `filled` |
+| color | 圆点颜色，可选值为 `primary` `info` `success` `warning` `danger` | _string_ | `default` |