@fjyueke/bify-mcp 1.0.0

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

@@ -0,0 +1,81 @@
+import { Button, Circle, Space } from "@fjyueke/bify-core"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+interface PercentProps {
+  percent?: number
+}
+
+function BasicCircle({ percent }: PercentProps) {
+  const [currentPercent, setCurrentPercent] = useState(0)
+
+  return (
+    <Circle percent={percent} onChange={setCurrentPercent}>
+      {currentPercent.toFixed(0)}%
+    </Circle>
+  )
+}
+
+function CustomCircle({ percent }: PercentProps) {
+  return (
+    <Space>
+      <Circle strokeLinecap="square" percent={percent} strokeWidth={60}>
+        宽度定制 top
+      </Circle>
+      <Circle strokeLinecap="butt" startPosition="bottom" percent={percent} color="#ee0a24" layerColor="#ebedf0">
+        颜色定制 bottom
+      </Circle>
+      <Circle
+        startPosition="left"
+        percent={percent}
+        color={{
+          "0%": "#3fecff",
+          "100%": "#6149f6",
+        }}
+      >
+        渐变色 left
+      </Circle>
+      <Circle clockwise={false} startPosition="right" percent={percent} color="#07c160">
+        逆时针方向 right
+      </Circle>
+      <Circle percent={percent} size={120} color="#7232dd">
+        大小定制
+      </Circle>
+    </Space>
+  )
+}
+
+export default function CircleDemo() {
+  const [percent, setPercent] = useState(70)
+
+  return (
+    <Page title="Circle 环形进度条" className="circle-demo">
+      <Block title="基础用法">
+        <BasicCircle percent={percent} />
+      </Block>
+      <Block title="样式定制">
+        <CustomCircle percent={percent} />
+      </Block>
+      <Block>
+        <Space>
+          <Button
+            color="primary"
+            size="small"
+            onClick={() => setPercent((prevPercent) => Math.min(prevPercent + 20, 100))}
+          >
+            增加
+          </Button>
+          <Button
+            color="danger"
+            size="small"
+            onClick={() => setPercent((prevPercent) => Math.max(prevPercent - 20, 0))}
+          >
+            减少
+          </Button>
+        </Space>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/collapse/api.md

@@ -0,0 +1,31 @@
+## API
+
+### Collapse Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认展开面板的 value | 手风琴模式：_number \| string_<br>非手风琴模式：_(number \| string)[]_ | - |
+| value | 当前展开面板的 value | 手风琴模式：_number \| string_<br>非手风琴模式：_(number \| string)[]_ | - |
+| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
+| bordered | 是否显示外边框 | _boolean_ | `true` |
+
+### Collapse Events
+
+| 事件名 | 说明           | 回调参数                                 |
+| ------ | -------------- | ---------------------------------------- |
+| onChange | 切换面板时触发 | _value: any_ |
+
+### Collapse.Item Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 唯一标识符，默认为索引值 | _number \| string_ | `index` |
+| icon | 标题栏左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_ | - |
+| expandIcon | 标题栏右侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_ | - |
+| size | 标题栏大小，可选值为 `large` | _string_ | - |
+| title | 标题栏左侧内容 | _number \| string_ | - |
+| extra | 标题栏右侧内容 | _number \| string_ | - |
+| brief | 标题栏描述信息 | _number \| string_ | - |
+| bordered | 是否显示内边框 | _boolean_ | `true` |
+| clickable| 是否开启点击反馈 | _boolean_ | `true` |
+| disabled | 是否禁用面板 | _boolean_ | `false` |

package/metaData/components/collapse/doc.md

@@ -0,0 +1,142 @@
+# Collapse 折叠面板
+
+### 介绍
+
+将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。
+
+### 引入
+
+```tsx
+import { Collapse } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `value` 控制展开的面板列表，`value` 为数组格式。
+
+```tsx
+function BasicCollapse() {
+  const [value, setValue] = useState([0])
+  return (
+    <Collapse value={value} onChange={setValue}>
+      <Collapse.Item title="标题1">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题2">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题3">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+    </Collapse>
+  )
+}
+```
+
+### 手风琴
+
+通过 `accordion` 可以设置为手风琴模式，最多展开一个面板，此时 `value` 为字符串格式。
+
+```tsx
+function AccordionCollapse() {
+  const [value, setValue] = useState(0)
+  return (
+    <Collapse accordion value={value} onChange={setValue}>
+      <Collapse.Item title="标题1">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题2">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题3">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+    </Collapse>
+  )
+}
+```
+
+### 只读状态和禁用状态
+
+通过 `clickable=false` 属性禁止显示反馈动画，通过 `disabled` 属性来禁用单个面板。
+
+```tsx
+function CollapseWithDisabledWithReadonly() {
+  return (
+    <Collapse defaultValue={[0]}>
+      <Collapse.Item title="正常状态">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="只读状态" clickable={false}>
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+      <Collapse.Item title="禁用状态" disabled>
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+    </Collapse>
+  )
+}
+```
+
+### 自定义标题内容
+
+通过 `title` 属性可以自定义标题栏的内容。
+
+```tsx
+function CustomCollapse() {
+  return (
+    <Collapse defaultValue={[0]}>
+      <Collapse.Item
+        className="custom-collapse-item1"
+        title={
+          <>
+            标题1
+            <QuestionOutlined />
+          </>
+        }
+      >
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+      <Collapse.Item icon={<ShopOutlined />} title="标题2" extra="内容" clickable={false}>
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+    </Collapse>
+  )
+}
+```
+
+## API
+
+### Collapse Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 默认展开面板的 value | 手风琴模式：_number \| string_<br>非手风琴模式：_(number \| string)[]_ | - |
+| value | 当前展开面板的 value | 手风琴模式：_number \| string_<br>非手风琴模式：_(number \| string)[]_ | - |
+| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
+| bordered | 是否显示外边框 | _boolean_ | `true` |
+
+### Collapse Events
+
+| 事件名 | 说明           | 回调参数                                 |
+| ------ | -------------- | ---------------------------------------- |
+| onChange | 切换面板时触发 | _value: any_ |
+
+### Collapse.Item Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 唯一标识符，默认为索引值 | _number \| string_ | `index` |
+| icon | 标题栏左侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_ | - |
+| expandIcon | 标题栏右侧[图标](/components/icon)或[图片](/components/image) | _ReactNode_ | - |
+| size | 标题栏大小，可选值为 `large` | _string_ | - |
+| title | 标题栏左侧内容 | _number \| string_ | - |
+| extra | 标题栏右侧内容 | _number \| string_ | - |
+| brief | 标题栏描述信息 | _number \| string_ | - |
+| bordered | 是否显示内边框 | _boolean_ | `true` |
+| clickable| 是否开启点击反馈 | _boolean_ | `true` |
+| disabled | 是否禁用面板 | _boolean_ | `false` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                       | 默认值                                   | 描述  |
+|------------------------------------------|---------------------------------------|-----|
+| --collapse-item-title-disabled-color     | _var(--gray-5)_                       | -   |
+| --collapse-item-transition-duration      | _var(--animation-duration-base)_      | -   |
+| --collapse-item-content-padding          | _var(--padding-sm) var(--padding-md)_ | -   |
+| --collapse-item-content-font-size        | _var(--font-size-md)_                 | -   |
+| --collapse-item-content-line-height      | _1.5_                                 | -   |
+| --collapse-item-content-color            | _var(--gray-6)_                       | -   |
+| --collapse-item-content-background-color | _var(--white)_                        | -   |

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

@@ -0,0 +1,81 @@
+import { Collapse } from "@fjyueke/bify-core"
+import { QuestionOutlined, ShopOutlined } from "@fjyueke/bify-icons"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicCollapse() {
+  const [value, setValue] = useState([0])
+  return (
+    <Collapse value={value} onChange={setValue}>
+      <Collapse.Item title="标题1">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题2">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题3">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+    </Collapse>
+  )
+}
+
+function AccordionCollapse() {
+  return (
+    <Collapse accordion defaultValue={0}>
+      <Collapse.Item title="标题1">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题2">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="标题3">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+    </Collapse>
+  )
+}
+
+function CollapseWithDisabledWithReadonly() {
+  return (
+    <Collapse defaultValue={[0]}>
+      <Collapse.Item title="正常状态">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
+      <Collapse.Item title="只读状态" clickable={false}>
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+      <Collapse.Item title="禁用状态" disabled>
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+    </Collapse>
+  )
+}
+
+function CustomCollapse() {
+  return (
+    <Collapse defaultValue={[0]}>
+      <Collapse.Item
+        className="custom-collapse-item1"
+        title={
+          <>
+            标题1
+            <QuestionOutlined />
+          </>
+        }
+      >
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+      <Collapse.Item icon={<ShopOutlined />} title="标题2" extra="内容" clickable={false}>
+        代码是写出来给人看的，附带能在机器上运行
+      </Collapse.Item>
+    </Collapse>
+  )
+}
+
+export default function CollapseDemo() {
+  return (
+    <Page title="Collapse 折叠面板" className="collapse-demo">
+      <Block title="基础用法">
+        <BasicCollapse />
+      </Block>
+      <Block title="手风琴">
+        <AccordionCollapse />
+      </Block>
+      <Block title="只读状态和禁用状态">
+        <CollapseWithDisabledWithReadonly />
+      </Block>
+      <Block title="自定义标题内容">
+        <CustomCollapse />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/config-provider/api.md

@@ -0,0 +1,7 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| theme| 自定义主题变量 | _object_ | - |

package/metaData/components/config-provider/doc.md

@@ -0,0 +1,193 @@
+# ConfigProvider 全局配置
+
+### 介绍
+
+用于配置 Taroify 组件的主题样式。
+
+### 引入
+
+```tsx
+import { ConfigProvider } from "@fjyueke/bify-core";
+```
+
+## 定制主题
+
+### 介绍
+
+Taroify 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 CSS
+变量，可以实现**定制主题、动态切换主题**等效果。
+
+#### 示例
+
+以 Button 组件为例，查看组件的样式，可以看到 `.taroify-button--primary` 类名上存在以下变量：
+
+```scss
+.taroify-button--primary {
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-background-color);
+}
+```
+
+### 自定义 CSS 变量
+
+#### 通过 CSS 覆盖
+
+你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
+
+```css
+/* 添加这段样式后，Primary Button 会变成红色 */
+:root {
+    --button-primary-background-color: red;
+}
+```
+
+> 注意：小程序不存在 `:root` 元素，只能在 `page` 根元素里覆盖 CSS 变量。
+
+#### 通过 ConfigProvider 覆盖
+
+`ConfigProvider` 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 `ConfigProvider` 组件，并通过 `theme` 属性来配置一些主题变量。
+
+```tsx
+function CustomThemeVars() {
+  const [rate, setRate] = useState(4)
+  const [slider, setSlider] = useState(50)
+
+  return (
+    <ConfigProvider
+      theme={{
+        rateIconFullColor: "#07c160",
+        sliderTrackHeight: "4px",
+        sliderButtonWidth: "20px",
+        sliderButtonHeight: "20px",
+        sliderActiveBackgroundColor: "#07c160",
+        buttonPrimaryBorderColor: "#07c160",
+        buttonPrimaryBackgroundColor: "#07c160",
+      }}
+    >
+      <Field label="评分">
+        <Rate allowHalf value={rate} onChange={setRate} />
+      </Field>
+      <Field label="滑块">
+        <Slider value={slider} onChange={setSlider} />
+      </Field>
+      <View style={{ margin: "16px" }}>
+        <Button shape="round" block color="primary">
+          提交
+        </Button>
+      </View>
+    </ConfigProvider>
+  )
+}
+
+```
+
+> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。在小程序中 ConfigProvider 不能放置在 `app.ts` 文件里，因为 `app.ts` 文件不能渲染任何内容。
+
+#### 在 TypeScript 中使用
+
+在 TypeScript 中定义 themeVars 时，建议使用 Taroify 提供的 ConfigProviderThemeVars 类型，可以提供完善的类型提示：
+
+```ts
+import type { ConfigProviderThemeVars } from '@fjyueke/bify-core';
+
+const themeVars: ConfigProviderThemeVars = {
+  rateIconFullColor: "#07c160",
+  sliderTrackHeight: "4px",
+  sliderActiveBackgroundColor: "#07c160",
+  buttonPrimaryBorderColor: "#07c160",
+  buttonPrimaryBackgroundColor: "#07c160",
+};
+```
+
+### 基础变量
+
+Taroify 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
+
+#### 变量列表
+
+下面是所有的基础变量：
+
+```scss
+// Color Palette
+--black: #000;
+--white: #fff;
+--gray-1: #f7f8fa;
+--gray-2: #f2f3f5;
+--gray-3: #ebedf0;
+--gray-4: #dcdee0;
+--gray-5: #c8c9cc;
+--gray-6: #969799;
+--gray-7: #646566;
+--gray-8: #323233;
+--red: #ee0a24;
+--blue: #1989fa;
+--orange: #ff976a;
+--orange-dark: #ed6a0c;
+--orange-light: #fffbe8;
+--green: #07c160;
+
+// Gradient Colors
+--gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+--gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+
+// Component Colors
+--primary-color: var(--blue);
+--success-color: var(--green);
+--danger-color: var(--red);
+--warning-color: var(--orange);
+--text-color: var(--gray-8);
+--active-color: var(--gray-2);
+--active-opacity: 0.7;
+--disabled-opacity: 0.5;
+--background-color: var(--gray-1);
+--background-color-light: #fafafa;
+--text-link-color: #576b95;
+
+// Padding
+--padding-base: 4px;
+--padding-xs: 8px;
+--padding-sm: 12px;
+--padding-md: 16px;
+--padding-lg: 24px;
+--padding-xl: 32px;
+
+// Font
+--font-size-xs: 10px;
+--font-size-sm: 12px;
+--font-size-md: 14px;
+--font-size-lg: 16px;
+--font-weight-bold: 500;
+--line-height-xs: 14px;
+--line-height-sm: 18px;
+--line-height-md: 20px;
+--line-height-lg: 22px;
+--base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
+  'Microsoft Yahei', sans-serif;
+--price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue,
+  Arial, sans-serif;
+
+// Animation
+--animation-duration-base: 0.3s;
+--animation-duration-fast: 0.2s;
+--animation-timing-function-enter: ease-out;
+--animation-timing-function-leave: ease-in;
+
+// Border
+--border-color: var(--gray-3);
+--border-width-base: 1px;
+--border-radius-sm: 2px;
+--border-radius-md: 4px;
+--border-radius-lg: 8px;
+--border-radius-max: 999px;
+```
+
+你可以在各个组件文档底部的表格中查看组件变量。
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| theme| 自定义主题变量 | _object_ | - |

package/metaData/components/config-provider/example/index.tsx

@@ -0,0 +1,54 @@
+import { Button, ConfigProvider, Field, Rate, Slider, ConfigProviderThemeVars } from "@fjyueke/bify-core"
+import { View } from "@tarojs/components"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+const themeVars: ConfigProviderThemeVars ={
+  rateIconFullColor: "#07c160",
+  sliderTrackHeight: "4px",
+  sliderActiveBackgroundColor: "#07c160",
+  buttonPrimaryBorderColor: "#07c160",
+  buttonPrimaryBackgroundColor: "#07c160",
+}
+
+export default function ConfigProviderDemo() {
+  const [rate, setRate] = useState(4)
+  const [slider, setSlider] = useState(50)
+
+  return (
+    <Page className="config-provider-demo" title="ConfigProvider 全局配置">
+      <Block title="默认主题">
+        <Field label="评分">
+          <Rate allowHalf value={rate} onChange={setRate} />
+        </Field>
+        <Field label="滑块">
+          <Slider value={slider} onChange={setSlider} />
+        </Field>
+        <View style={{ margin: "16px" }}>
+          <Button shape="round" block color="primary">
+            提交
+          </Button>
+        </View>
+      </Block>
+      <Block title="定制主题">
+        <ConfigProvider
+          theme={themeVars}
+        >
+          <Field label="评分">
+            <Rate allowHalf value={rate} onChange={setRate} />
+          </Field>
+          <Field label="滑块">
+            <Slider value={slider} onChange={setSlider} />
+          </Field>
+          <View style={{ margin: "16px" }}>
+            <Button shape="round" block color="primary">
+              提交
+            </Button>
+          </View>
+        </ConfigProvider>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/countdown/api.md

@@ -0,0 +1,46 @@
+## API
+
+### Props
+
+| 参数         | 说明           | 类型                                   | 默认值        |
+|------------|--------------|--------------------------------------|------------|
+| value      | 倒计时时长，单位毫秒   | _number_                             | `0`        |
+| format     | 时间格式         | _string_                             | `HH:mm:ss` |
+| autostart  | 是否自动开始倒计时    | _boolean_                            | `true`     |
+| interval   | 倒计时渲染间隔，单位毫秒 | _number_                             | `1000`     |
+| onChange   | 倒计时变化时触发     | _(currentTime: CurrentTime) => void_ | -          |
+| onComplete | 倒计时结束时触发     | _() => void_                         | -          |
+
+### format 格式
+
+| 格式  | 说明      |
+|-----|---------|
+| DD  | 天数      |
+| HH  | 小时      |
+| mm  | 分钟      |
+| ss  | 秒数      |
+| S   | 毫秒（1 位） |
+| SS  | 毫秒（2 位） |
+| SSS | 毫秒（3 位） |
+
+### CurrentTime 格式
+
+| 名称           | 说明          | 类型       |
+|--------------|-------------|----------|
+| total        | 剩余总时间（单位毫秒） | _number_ |
+| days         | 剩余天数        | _number_ |
+| hours        | 剩余小时        | _number_ |
+| minutes      | 剩余分钟        | _number_ |
+| seconds      | 剩余秒数        | _number_ |
+| milliseconds | 剩余毫秒        | _number_ |
+
+### 方法
+
+通过 ref 可以获取到 Countdown 实例并调用实例方法。
+
+| 方法名     | 说明                                       | 参数  | 返回值 |
+|---------|------------------------------------------|-----|-----|
+| start   | 开始倒计时                                    | -   | -   |
+| pause   | 暂停倒计时                                    | -   | -   |
+| reset   | 重设倒计时，若 `autostart` 为 `true`，重设后会自动开始倒计时 | -   | -   |
+| restart | 重启倒计时                                    | -   | -   |