@fjyueke/bify-mcp 1.0.0

package/metaData/components/dropdown-menu/example/index.tsx

@@ -0,0 +1,182 @@
+import { Button, Cell, DropdownMenu, Switch } from "@fjyueke/bify-core"
+import { View, PageMeta } from "@tarojs/components"
+import { Key, useCallback, useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+function BasicDropdownMenu() {
+  const [options] = useState(
+    [
+      { title: "默认排序", value: 0 },
+      { title: "好评排序", value: 1 },
+      { title: "销量排序", value: 2 },
+    ].concat(Array.from({ length: 20 }, (_, i) => ({ title: "选项" + i, value: 3 + i }))),
+  )
+  const [opened, setOpened] = useState(false)
+  const getScrollHeight = useCallback((len) => {
+    return len < 5 ? len * 46 : 5 * 46
+  }, [])
+  return (
+    <>
+      <PageMeta pageStyle={opened ? "overflow: hidden;" : ""} />
+      <DropdownMenu>
+        {/* @ts-ignore */}
+        <DropdownMenu.Item
+          style={{ "--dropdown-menu-item-content-max-height": getScrollHeight(23) + "px" }}
+          options={options}
+          lock
+          onOpen={() => setOpened(true)}
+          onClose={() => setOpened(false)}
+        />
+        {/* @ts-ignore */}
+        <DropdownMenu.Item
+          style={{ "--dropdown-menu-item-content-max-height": getScrollHeight(4) + "px" }}
+          lock
+          onOpen={() => setOpened(true)}
+          onClose={() => setOpened(false)}
+        >
+          <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+          <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+          <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+          <DropdownMenu.Option value={3}>活动商品2</DropdownMenu.Option>
+        </DropdownMenu.Item>
+      </DropdownMenu>
+    </>
+  )
+}
+
+function DropdownMenuWithCustomContent() {
+  const [value, setValue] = useState<Key | false>()
+  const [option1, setOption1] = useState(0)
+  const [switch1, setSwitch1] = useState(true)
+  const [switch2, setSwitch2] = useState(false)
+  const [options] = useState([
+    {
+      title: (
+        <View>
+          默认<View>排序</View>
+        </View>
+      ),
+      value: 0,
+    },
+    { title: "好评排序", value: 1 },
+    { title: "销量排序", value: 2 },
+  ])
+  return (
+    <DropdownMenu value={value} onChange={setValue}>
+      <DropdownMenu.Item
+        value={option1}
+        onChange={setOption1}
+        options={options}
+      ></DropdownMenu.Item>
+      <DropdownMenu.Item title="筛选">
+        <Cell title="包邮" align="center">
+          <Switch size="24" checked={switch1} onChange={setSwitch1} />
+        </Cell>
+        <Cell title="团购" align="center">
+          <Switch size="24" checked={switch2} onChange={setSwitch2} />
+        </Cell>
+        <View style="padding: 5px 16px;">
+          <Button color="primary" block shape="round" onClick={() => setValue(false)}>
+            确认
+          </Button>
+        </View>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+
+function DropdownMenuWithCustomColor() {
+  return (
+    <DropdownMenu className="custom-color">
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>默认排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>好评排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>销量排序</DropdownMenu.Option>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+
+function UpDropdownMenu() {
+  return (
+    <DropdownMenu direction="up">
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>默认排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>好评排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>销量排序</DropdownMenu.Option>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+function BackDropDropdownMenu() {
+  return (
+    <DropdownMenu backdropType="outer">
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        <DropdownMenu.Option value={0}>默认排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>好评排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>销量排序</DropdownMenu.Option>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+
+function DisabledDropdownMenu() {
+  return (
+    <DropdownMenu>
+      <DropdownMenu.Item disabled>
+        <DropdownMenu.Option value={0}>全部商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>新款商品</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>活动商品</DropdownMenu.Option>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item disabled>
+        <DropdownMenu.Option value={0}>默认排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={1}>好评排序</DropdownMenu.Option>
+        <DropdownMenu.Option value={2}>销量排序</DropdownMenu.Option>
+      </DropdownMenu.Item>
+    </DropdownMenu>
+  )
+}
+
+export default function DropdownMenuDemo() {
+  return (
+    <Page className="dropdown-menu-demo" title="DropdownMenu 下拉菜单">
+      <Block title="基础用法">
+        <BasicDropdownMenu />
+      </Block>
+      <Block title="自定义菜单内容">
+        <DropdownMenuWithCustomContent />
+      </Block>
+      <Block title="自定义选中态颜色">
+        <DropdownMenuWithCustomColor />
+      </Block>
+      <Block title="向上展开">
+        <UpDropdownMenu />
+      </Block>
+      <Block title="背景板位置">
+        <BackDropDropdownMenu />
+      </Block>
+      <Block title="禁用菜单">
+        <DisabledDropdownMenu />
+      </Block>
+      <View style={{ height: "400px", background: "transparent", width: "100vw" }}></View>
+    </Page>
+  )
+}

package/metaData/components/empty/api.md

@@ -0,0 +1,20 @@
+## API
+
+### Empty Props
+
+| 参数       | 说明  | 类型          | 默认值 |
+|----------|-----|-------------|-----|
+| children | 内容  | _ReactNode_ | -   |
+
+### Empty.Image Props
+
+| 参数    | 说明                                              | 类型              | 默认值       |
+|-------|-------------------------------------------------|-----------------|-----------|
+| style | 图片样式                                            | _CSSProperties_ | -         |
+| src   | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_        | `default` |
+
+### Empty.Description Props
+
+| 参数       | 说明        | 类型          | 默认值 |
+|----------|-----------|-------------|-----|
+| children | 图片下方的描述文字 | _ReactNode_ | -   |

package/metaData/components/empty/doc.md

@@ -0,0 +1,126 @@
+# Empty 空状态
+
+### 介绍
+
+空状态时的占位提示。
+
+### 引入
+
+```ts
+import { Empty } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<Empty>
+  <Empty.Image />
+  <Empty.Description>描述文字</Empty.Description>
+</Empty>
+```
+
+### 图片类型
+
+Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。
+
+```tsx
+<!-- 通用错误 -->
+<Empty>
+  <Empty.Image src="error" />
+  <Empty.Description>描述文字</Empty.Description>
+</Empty>
+<!-- 网络错误 -->
+<Empty>
+  <Empty.Image src="network" />
+  <Empty.Description>描述文字</Empty.Description>
+</Empty>
+<!-- 搜索提示 -->
+<Empty>
+  <Empty.Image src="search" />
+  <Empty.Description>描述文字</Empty.Description>
+</Empty>
+```
+
+### 自定义图片
+
+需要自定义图片时，可以在 image 属性中传入任意图片 URL。
+
+```tsx
+<Empty>
+  <Empty.Image
+    className="custom-empty__image"
+    src="https://img.yzcdn.cn/vant/custom-empty-image.png"
+  />
+  <Empty.Description>描述文字</Empty.Description>
+</Empty>
+```
+
+```scss
+.custom-empty__image {
+  width: 90px * 2;
+  height: 90px * 2;
+}
+```
+
+### 底部内容
+
+通过默认插槽可以在 Empty 组件的下方插入内容。
+
+```tsx
+<Empty>
+  <Empty.Image />
+  <Empty.Description>描述文字</Empty.Description>
+  <Button shape="round" color="danger" className="bottom-button">
+    按钮
+  </Button>
+</Empty>
+```
+
+```scss
+.bottom-button {
+  margin-top: 24px * 2;
+  width: 160px * 2;
+  height: 40px * 2;
+}
+```
+
+## API
+
+### Empty Props
+
+| 参数       | 说明  | 类型          | 默认值 |
+|----------|-----|-------------|-----|
+| children | 内容  | _ReactNode_ | -   |
+
+### Empty.Image Props
+
+| 参数    | 说明                                              | 类型              | 默认值       |
+|-------|-------------------------------------------------|-----------------|-----------|
+| style | 图片样式                                            | _CSSProperties_ | -         |
+| src   | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_        | `default` |
+
+### Empty.Description Props
+
+| 参数       | 说明        | 类型          | 默认值 |
+|----------|-----------|-------------|-----|
+| children | 图片下方的描述文字 | _ReactNode_ | -   |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                              | 默认值                       | 描述  |
+|---------------------------------|---------------------------|-----|
+| --empty-padding                 | _var(--padding-xl) 0_     | -   |
+| --empty-image-size              | _160px * $hd_             | -   |
+| --empty-image-width             | _var(--empty-image-size)_ | -   |
+| --empty-image-height            | _var(--empty-image-size)_ | -   |
+| --empty-description-margin-top  | _var(--padding-md)_       | -   |
+| --empty-description-padding     | _0 60px * $hd_            | -   |
+| --empty-description-color       | _var(--gray-6)_           | -   |
+| --empty-description-font-size   | _var(--font-size-md)_     | -   |
+| --empty-description-line-height | _var(--line-height-md)_   | -   |

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

@@ -0,0 +1,66 @@
+import { Button, Empty, Tabs } from "@fjyueke/bify-core"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function PresetEmpty() {
+  const [tab, setTab] = useState(0)
+  return (
+    <Block title="图片类型">
+      <Tabs value={tab} onChange={setTab}>
+        <Tabs.TabPane title="通用错误">
+          <Empty>
+            <Empty.Image src="error" />
+            <Empty.Description>描述文字</Empty.Description>
+          </Empty>
+        </Tabs.TabPane>
+        <Tabs.TabPane title="网络错误">
+          <Empty>
+            <Empty.Image src="network" />
+            <Empty.Description>描述文字</Empty.Description>
+          </Empty>
+        </Tabs.TabPane>
+        <Tabs.TabPane title="搜索提示">
+          <Empty>
+            <Empty.Image src="search" />
+            <Empty.Description>描述文字</Empty.Description>
+          </Empty>
+        </Tabs.TabPane>
+      </Tabs>
+    </Block>
+  )
+}
+
+export default function EmptyDemo() {
+  return (
+    <Page title="Empty 空状态" className="empty-demo">
+      <Block title="基础用法">
+        <Empty>
+          <Empty.Image />
+          <Empty.Description>描述文字</Empty.Description>
+        </Empty>
+      </Block>
+      <PresetEmpty />
+      <Block title="自定义图片">
+        <Empty>
+          <Empty.Image
+            style={{ width: 160, height: 160 }}
+            className="custom-empty__image"
+            src="https://img.yzcdn.cn/vant/custom-empty-image.png"
+          />
+          <Empty.Description>描述文字</Empty.Description>
+        </Empty>
+      </Block>
+      <Block title="底部内容">
+        <Empty>
+          <Empty.Image />
+          <Empty.Description>描述文字</Empty.Description>
+          <Button shape="round" color="primary" className="bottom-button">
+            按钮
+          </Button>
+        </Empty>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/field/api.md

@@ -0,0 +1,10 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| label | 左侧文本 | _string \| [FormLabelProps](/components/form/#formlabel-props) \| ReactElement_ | - |
+| feedback | 提示文案，为空时不展示 | _string \| [FormFeedbackProps](/components/form/#formfeedback-props) \| ReactElement_ | - |
+
+> 属性继承自 Form.Item 组件，更多属性参见：[Form.Item 组件](/components/form/#formitem-props)

package/metaData/components/field/doc.md

@@ -0,0 +1,274 @@
+# Field 输入框
+
+### 介绍
+
+用户可以在文本框内输入或编辑文字。
+
+### 引入
+
+```tsx
+import { Field } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+可以通过 `value` 设置输入框的值，通过 `placeholder` 设置占位提示文字，通过 `onChange` 事件获得改变的值。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function BasicField() {
+  const [value, setValue] = useState("")
+  return (
+    <Cell.Group inset>
+      <Field label="文本">
+        <Input placeholder="请输入文本" value={value} onChange={(e) => setValue(e.detail.value)} />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+### 自定义类型
+
+根据 `type` 属性定义不同类型的输入框，默认值为 `text`。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function CustomField() {
+  const [text, setText] = useState("")
+  const [idcard, setIdcard] = useState("")
+  const [number, setNumber] = useState("")
+  const [digit, setDigit] = useState("")
+  const [password, setPassword] = useState("")
+  return (
+    <Cell.Group inset>
+      <Field label="文本">
+        <Input placeholder="请输入文本" value={text} onChange={(e) => setText(e.detail.value)} />
+      </Field>
+      <Field label="身份证号">
+        <Input
+          type="idcard"
+          placeholder="请输入身份证号"
+          value={idcard}
+          onChange={(e) => setIdcard(e.detail.value)}
+        />
+      </Field>
+      <Field label="整数">
+        <Input
+          type="number"
+          placeholder="请输入整数"
+          value={number}
+          onChange={(e) => setNumber(e.detail.value)}
+        />
+      </Field>
+      <Field label="数字">
+        <Input
+          type="digit"
+          placeholder="请输入数字（支持小数）"
+          value={digit}
+          onChange={(e) => setDigit(e.detail.value)}
+        />
+      </Field>
+      <Field label="密码">
+        <Input
+          password
+          placeholder="请输入密码"
+          value={password}
+          onChange={(e) => setPassword(e.detail.value)}
+        />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+### 禁用输入框
+
+通过 `readonly` 将输入框设置为只读状态，通过 `disabled` 将输入框设置为禁用状态。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function DisabledField() {
+  return (
+    <Cell.Group inset>
+      <Field label="文本">
+        <Input placeholder="输入框只读" readonly />
+      </Field>
+      <Field label="文本">
+        <Input placeholder="输入框已禁用" disabled />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+### 显示图标
+
+通过 `icon` 和 `rightIcon` 配置输入框两侧的图标，通过设置 `clearable` 在输入过程中展示清除图标。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function IconField() {
+  return (
+    <Cell.Group inset>
+      <Field label="文本" icon={<SmileOutlined />} rightIcon={<WarningOutlined />}>
+        <Input placeholder="显示图标" />
+      </Field>
+      <Field label="文本" icon={<MusicOutlined />}>
+        <Input placeholder="显示清除图标" clearable />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+### 错误提示
+
+设置 `required` 属性表示这是一个必填项，可以配合 `Input` 或 `Field.Feedback` 组件显示对应的错误提示。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function ErrorField() {
+  return (
+    <Cell.Group inset>
+      <Field label="用户名" required>
+        <Input placeholder="请输入用户名" color="danger" />
+      </Field>
+      <Field
+        required
+        label="手机号"
+        feedback={<Field.Feedback status="invalid">手机号格式错误</Field.Feedback>}
+      >
+        <Input placeholder="请输入手机号" />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+### 插入按钮
+
+通过 `Button` 可以在输入框尾部插入按钮。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function ButtonField() {
+  return (
+    <Cell.Group inset>
+      <Field align="center" label="短信验证码">
+        <Input placeholder="请输入短信验证码" />
+        <Button size="small" color="primary">
+          发送验证码
+        </Button>
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+### 高度自适应
+
+对于 Textarea 组件，可以通过 `autoHeight` 属性设置高度自适应。
+
+```tsx
+import { Cell, Field, Textarea } from "@fjyueke/bify-core"
+import { getEnv } from "@tarojs/taro"
+const env = getEnv();
+function FieldWithTextarea() {
+  return (
+    <Cell.Group inset style={{ "--textarea-line-height": env === "WEB" ? "1.2rem" : "1" }}>
+      <Field align="start" label="留言">
+        <Textarea autoHeight placeholder="请输入留言" />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+>Tips: 微信placeholder不支持line-height
+
+### 显示字数统计
+
+设置 `limit` 属性后会在底部显示字数统计。
+
+```tsx
+import { Cell, Field, Textarea } from "@fjyueke/bify-core"
+import { getEnv } from "@tarojs/taro"
+const env = getEnv();
+function FieldWithTextareaLimit() {
+  return (
+    <Cell.Group inset style={{ "--textarea-line-height": env === "WEB" ? "1.2rem" : "1" }}>
+      <Field align="start" label="留言">
+        <Textarea style={{ height: "48px" }} limit={50} placeholder="请输入留言" />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+### 输入框内容对齐
+
+通过 Input 组件的 `align` 属性可以设置输入框内容的对齐方式，可选值为 `center`、`right`。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function FieldWithInputAlign() {
+  return (
+    <Cell.Group inset>
+      <Field label="文本">
+        <Input align="left" placeholder="输入框内容左对齐" />
+      </Field>
+      <Field label="文本">
+        <Input align="center" placeholder="输入框内容居中对齐" />
+      </Field>
+      <Field label="文本">
+        <Input align="right" placeholder="输入框内容右对齐" />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+
+### 标签（Field.Label）和反馈（Field.Feedback）
+
+使用 `label` 和 `feedback` 属性的对象或元素表示法，提供全部属性。
+
+```tsx
+import { Cell, Field, Input } from "@fjyueke/bify-core"
+
+function FieldWithVaraintLabel() {
+  return (
+    <Cell.Group inset>
+      <Field label="文本">
+        <Input placeholder="请输入文本" />
+      </Field>
+      <Field label={{ children: "文本" }}>
+        <Input placeholder="请输入文本" />
+      </Field>
+      <Field label={<Field.Label>文本</Field.Label>}>
+        <Input placeholder="请输入文本" />
+      </Field>
+    </Cell.Group>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| label | 左侧文本 | _string \| [FormLabelProps](/components/form/#formlabel-props) \| ReactElement_ | - |
+| feedback | 提示文案，为空时不展示 | _string \| [FormFeedbackProps](/components/form/#formfeedback-props) \| ReactElement_ | - |
+
+> 属性继承自 Form.Item 组件，更多属性参见：[Form.Item 组件](/components/form/#formitem-props)