@fjyueke/bify-mcp 1.0.0

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

@@ -0,0 +1,203 @@
+import { Button, Cell, Field, Input, Textarea } from "@fjyueke/bify-core"
+import { getEnv } from "@tarojs/taro"
+import { MusicOutlined, SmileOutlined, WarningOutlined } from "@fjyueke/bify-icons"
+import { useState } from "react"
+import Block from "../../../components/block"
+import CustomWrapper from "../../../components/custom-wrapper"
+import Page from "../../../components/page"
+import "./index.scss"
+
+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>
+  )
+}
+
+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>
+  )
+}
+
+function DisabledField() {
+  return (
+    <Cell.Group inset>
+      <Field label="文本">
+        <Input placeholder="输入框只读" readonly value="输入框只读" />
+      </Field>
+      <Field label="文本">
+        <Input placeholder="输入框已禁用" disabled />
+      </Field>
+    </Cell.Group>
+  )
+}
+
+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>
+  )
+}
+
+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>
+  )
+}
+
+function ButtonField() {
+  return (
+    <Cell.Group inset>
+      <Field align="center" label="短信验证码">
+        <Input placeholder="请输入短信验证码" />
+        <Button size="small" color="primary">
+          发送验证码
+        </Button>
+      </Field>
+    </Cell.Group>
+  )
+}
+
+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>
+  )
+}
+
+function TextareaWithAutoHeight() {
+  const env = getEnv();
+
+  return (
+    // @ts-ignore
+    <Cell.Group inset style={{ "--textarea-line-height": env === "WEB" ? "1.2rem" : "1" }}>
+      <Field align="start" label="留言">
+        <Textarea autoHeight placeholder="请输入留言" />
+      </Field>
+    </Cell.Group>
+  )
+}
+
+function TextareaWithLimit() {
+  const env = getEnv();
+  return (
+    // @ts-ignore
+    <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>
+  )
+}
+
+export default function FieldDemo() {
+  return (
+    <Page title="Field 输入框" className="field-demo">
+      <Block title="基础用法">
+        <BasicField />
+      </Block>
+      <Block title="自定义类型">
+        <CustomField />
+      </Block>
+      <Block title="禁用输入框">
+        <DisabledField />
+      </Block>
+      <Block title="显示图标">
+        <IconField />
+      </Block>
+      <Block title="错误提示">
+        <ErrorField />
+      </Block>
+      <Block title="插入按钮">
+        <ButtonField />
+      </Block>
+      <Block title="高度自适应">
+        <CustomWrapper>
+          <TextareaWithAutoHeight />
+        </CustomWrapper>
+      </Block>
+      <Block title="显示字数统计">
+        <CustomWrapper>
+          <TextareaWithLimit />
+        </CustomWrapper>
+      </Block>
+      <Block title="输入框内容对齐">
+        <CustomWrapper>
+          <FieldWithInputAlign />
+        </CustomWrapper>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/fixed-nav/api.md

@@ -0,0 +1,21 @@
+## API
+
+### Flex Props
+
+| 参数         | 说明             | 类型               | 默认值                          |
+| ------------ | ---------------- | ------------------ | ------------------------------- |
+| open         | 是否打开         | _boolean_          | `false`                         |
+| data         | 悬浮导航内数据   | _FixedNavItem[]_   | `[]`                            |
+| backdrop     | 是否显示遮罩层   | _boolean_          | `true`                          |
+| activeText   | 收起按钮文案     | _string_           | `收起导航`                      |
+| inactiveText | 展开按钮文案     | _string_           | `快速导航`                      |
+| type         | 悬浮导航方向     | _left \| right_    | `right`                         |
+| position     | 悬浮导航垂直位置 | _FixedNavPosition_ | `{top: 'auto', bottom: 'auto'}` |
+| content      | 自定义按钮       | _ReactNode_        | `-`                             |
+
+### Events
+
+| 事件名   | 说明             | 回调参数         |
+| -------- | ---------------- | ---------------- |
+| onChange | 展开收起按钮回调 | _value: boolean_ |
+| onClick  | 选择之后触发     | _item_           |

package/metaData/components/fixed-nav/doc.md

@@ -0,0 +1,196 @@
+# FixedNav 悬浮导航
+
+### 介绍
+
+伸缩式交互，用于快捷导航
+
+请升级 `taroify` 到 >= `v0.1.2-alpha.0` 版本来使用该组件。
+
+### 引入
+
+```tsx
+import { FixedNav } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+const list = [
+  {
+    id: 1,
+    text: "首页",
+    icon: <WapHomeOutlined />,
+  },
+  {
+    id: 2,
+    text: "分类",
+    icon: <AppsOutlined />,
+  },
+  {
+    id: 3,
+    text: "购物车",
+    num: 2,
+    icon: <ShoppingCartOutlined />,
+  },
+  {
+    id: 4,
+    text: "我的",
+    icon: <UserOutlined />,
+  },
+]
+
+const App = () => {
+  const [open, setOpen] = useState(false)
+
+  return <FixedNav open={open} onChange={setOpen} data={list} position={{ top: "150px" }} />
+}
+```
+
+### 位置在左侧
+
+```tsx
+const list = [
+  {
+    id: 1,
+    text: "首页",
+    icon: <WapHomeOutlined />,
+  },
+  {
+    id: 2,
+    text: "分类",
+    icon: <AppsOutlined />,
+  },
+  {
+    id: 3,
+    text: "购物车",
+    num: 2,
+    icon: <ShoppingCartOutlined />,
+  },
+  {
+    id: 4,
+    text: "我的",
+    icon: <UserOutlined />,
+  },
+]
+
+const App = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FixedNav
+      open={open2}
+      onChange={setOpen2}
+      data={list}
+      type="left"
+      backdrop={false}
+      position={{ top: "300px" }}
+    />
+  )
+}
+```
+
+### 自定义内容
+
+```tsx
+const CustomerFixedNav = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FixedNav
+      open={open}
+      onChange={setOpen}
+      type="left"
+      backdrop={false}
+      position={{ top: "400px" }}
+      content={
+        <>
+          <GiftOutlined color="#FFF" />
+          <span className="fixed-nav-text">{open ? "开" : "关"}</span>
+        </>
+      }
+    >
+      <ul className="taroify-fixed-nav_content customer">
+        <li className="taroify-fixed-nav_content_item">我</li>
+        <li className="taroify-fixed-nav_content_item">是</li>
+        <li className="taroify-fixed-nav_content_item">自</li>
+        <li className="taroify-fixed-nav_content_item">定</li>
+        <li className="taroify-fixed-nav_content_item">义</li>
+      </ul>
+    </FixedNav>
+  )
+}
+```
+
+```scss
+.fixed-nav-demo {
+  .fixed-nav-text {
+    color: #fff;
+    line-height: 26px;
+    width: 48px;
+    font-size: 24px;
+  }
+
+  .taroify-fixed-nav_content {
+    &.customer {
+      border-radius: 0 50px 50px 0;
+      margin: 0;
+      padding-left: 160px;
+      padding-right: 40px;
+      right: auto;
+    }
+
+    &_item {
+      align-items: center;
+      color: #1a1a1a;
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      flex-shrink: 0;
+      height: 100%;
+      justify-content: center;
+      min-width: 100px;
+      position: relative;
+      font-size: 28px;
+    }
+  }
+}
+```
+
+## API
+
+### Flex Props
+
+| 参数         | 说明             | 类型               | 默认值                          |
+| ------------ | ---------------- | ------------------ | ------------------------------- |
+| open         | 是否打开         | _boolean_          | `false`                         |
+| data         | 悬浮导航内数据   | _FixedNavItem[]_   | `[]`                            |
+| backdrop     | 是否显示遮罩层   | _boolean_          | `true`                          |
+| activeText   | 收起按钮文案     | _string_           | `收起导航`                      |
+| inactiveText | 展开按钮文案     | _string_           | `快速导航`                      |
+| type         | 悬浮导航方向     | _left \| right_    | `right`                         |
+| position     | 悬浮导航垂直位置 | _FixedNavPosition_ | `{top: 'auto', bottom: 'auto'}` |
+| content      | 自定义按钮       | _ReactNode_        | `-`                             |
+
+### Events
+
+| 事件名   | 说明             | 回调参数         |
+| -------- | ---------------- | ---------------- |
+| onChange | 展开收起按钮回调 | _value: boolean_ |
+| onClick  | 选择之后触发     | _item_           |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                          | 默认值                   | 描述 |
+| ----------------------------- | ------------------------ | ---- |
+| --fixed-nav-z-index           | _1010_                   | -    |
+| --fixed-nav-z-content-index   | _1009_                   | -    |
+| --fixed-nav-button-background | _var(--blue, $blue)_     | -    |
+| --fixed-nav-button-font-size  | _12px \* $hd_            | -    |
+| --fixed-nav-background-color  | _var(--white, $white)_   | -    |
+| --fixed-nav-color             | _var(--gray-8, $gray-8)_ | -    |

package/metaData/components/fixed-nav/example/index.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react"
+import { FixedNav } from "@fjyueke/bify-core"
+import {
+  WapHomeOutlined,
+  AppsOutlined,
+  ShoppingCartOutlined,
+  UserOutlined,
+  GiftOutlined,
+} from "@fjyueke/bify-icons"
+import Page from "../../../components/page"
+import "./index.scss"
+
+const CustomerFixedNav = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FixedNav
+      open={open}
+      onChange={setOpen}
+      type="left"
+      backdrop={false}
+      position={{ top: "400px" }}
+      content={
+        <>
+          <GiftOutlined color="#FFF" />
+          <span className="fixed-nav-text">{open ? "开" : "关"}</span>
+        </>
+      }
+    >
+      <ul className="taroify-fixed-nav_content customer">
+        <li className="taroify-fixed-nav_content_item">我</li>
+        <li className="taroify-fixed-nav_content_item">是</li>
+        <li className="taroify-fixed-nav_content_item">自</li>
+        <li className="taroify-fixed-nav_content_item">定</li>
+        <li className="taroify-fixed-nav_content_item">义</li>
+      </ul>
+    </FixedNav>
+  )
+}
+
+export default function BackTopDemo() {
+  const [open, setOpen] = useState(false)
+  const [open2, setOpen2] = useState(false)
+  const list = [
+    {
+      id: 1,
+      text: "首页",
+      icon: <WapHomeOutlined />,
+    },
+    {
+      id: 2,
+      text: "分类",
+      icon: <AppsOutlined />,
+    },
+    {
+      id: 3,
+      text: "购物车",
+      icon: <ShoppingCartOutlined />,
+    },
+    {
+      id: 4,
+      text: "我的",
+      icon: <UserOutlined />,
+    },
+  ]
+  return (
+    <Page title="FixedNav 悬浮导航" className="fixed-nav-demo">
+      <FixedNav open={open} onChange={setOpen} data={list} position={{ top: "150px" }} />
+      <FixedNav
+        open={open2}
+        onChange={setOpen2}
+        data={list}
+        type="left"
+        backdrop={false}
+        position={{ top: "300px" }}
+      />
+      <CustomerFixedNav />
+    </Page>
+  )
+}

package/metaData/components/fixed-view/api.md

@@ -0,0 +1,10 @@
+## API
+
+### Props
+
+| 参数          | 说明                                               | 类型      | 默认值  |
+| ------------- | -------------------------------------------------- | --------- | ------- |
+| position      | 固定位置，可选值 `top` `bottom`                    | _string_  | -       |
+| safeArea      | 安全区域，可选值 `top` `bottom`                    | _string_  | -       |
+| nativeSafeTop | 是否启用顶部安全区域原生属性                       | _boolean_ | `false` |
+| placeholder   | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | -       |

package/metaData/components/fixed-view/doc.md

@@ -0,0 +1,25 @@
+# FixedView 固定视图
+
+### 介绍
+
+用于固定在顶部或底部的视图。
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<FixedView position="top">固定在顶部</FixedView>
+<FixedView position="bottom">固定在底部</FixedView>
+```
+
+## API
+
+### Props
+
+| 参数          | 说明                                               | 类型      | 默认值  |
+| ------------- | -------------------------------------------------- | --------- | ------- |
+| position      | 固定位置，可选值 `top` `bottom`                    | _string_  | -       |
+| safeArea      | 安全区域，可选值 `top` `bottom`                    | _string_  | -       |
+| nativeSafeTop | 是否启用顶部安全区域原生属性                       | _boolean_ | `false` |
+| placeholder   | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | -       |

package/metaData/components/fixed-view/example/index.tsx

@@ -0,0 +1,12 @@
+import { FixedView } from "@fjyueke/bify-core"
+import Page from "../../../components/page"
+
+import "./index.scss"
+
+export default function FixedViewDemo() {
+  return (
+    <Page title="FixedView 固定视图" className="fixed-view-demo">
+      <FixedView position="bottom">固定在底部</FixedView>
+    </Page>
+  )
+}

package/metaData/components/flex/api.md

@@ -0,0 +1,18 @@
+## API
+
+### Flex Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| gutter | 列元素之间的间距（单位为 px） | _number_ | - |
+| direction | 项目定位方向，可选值为 `row` `row-reverse` `column` `column-reverse` | _boolean_ | `row` |
+| wrap | 子元素的换行方式，可选值为 `nowrap` `wrap` `wrap-reverse` | _boolean_ | `nowrap` |
+| justify | 主轴对齐方式，可选值为 `start` `end` `center` `space-around` `space-between` | _string_ | `start` |
+| align | 交叉轴对齐方式，可选值为 `start` `center` `end` `baseline` `stretch` | _string_ | `start` |
+
+### Flex.Item Props
+
+| 参数   | 说明           | 类型               | 默认值 |
+| ------ | -------------- | ------------------ | ------ |
+| span   | 列元素宽度     | _number_ | -      |
+| offset | 列元素偏移距离 | _number_ | -      |

package/metaData/components/flex/doc.md

@@ -0,0 +1,103 @@
+# Layout 布局
+
+### 介绍
+
+`Flex` 组件是 CSS `flex` 布局的一个封装。
+
+### 引入
+
+```tsx
+import { Flex } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+`Flex` 组件提供了 `24列栅格`，通过在 `Flex.Item` 上添加 `span` 属性设置列所占的宽度百分比。此外，添加 `offset` 属性可以设置列的偏移宽度，计算方式与 span 相同。
+
+```tsx
+<Flex>
+  <Flex.Item span={8}>span: 8</Flex.Item>
+  <Flex.Item span={8}>span: 8</Flex.Item>
+  <Flex.Item span={8}>span: 8</Flex.Item>
+</Flex>
+
+<Flex>
+  <Flex.Item span={4}>span: 4</Flex.Item>
+  <Flex.Item span={10} offset={4}>
+    offset: 4, span: 10
+  </Flex.Item>
+</Flex>
+
+<Flex>
+  <Flex.Item offset={12} span={12}>
+    offset: 12, span: 12
+  </Flex.Item>
+</Flex>
+```
+
+### 设置列元素间距
+
+通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0。
+
+```tsx
+<Flex gutter={20}>
+  <Flex.Item span={8}>span: 8</Flex.Item>
+  <Flex.Item span={8}>span: 8</Flex.Item>
+  <Flex.Item span={8}>span: 8</Flex.Item>
+</Flex>
+```
+
+### 对齐方式
+
+通过 `justify` 属性可以设置主轴上内容的对齐方式，等价于 flex 布局中的 `justify-content` 属性。
+
+```tsx
+<!-- 居中 -->
+<Flex justify="center">
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+</Flex>
+
+<!-- 右对齐 -->
+<Flex justify="end">
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+</Flex>
+
+<!-- 两端对齐 -->
+<Flex justify="space-between">
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+</Flex>
+
+<!-- 每个元素的两侧间隔相等 -->
+<Flex justify="space-around">
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+  <Flex.Item span={6}>span: 6</Flex.Item>
+</Flex>
+```
+
+## API
+
+### Flex Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| gutter | 列元素之间的间距（单位为 px） | _number_ | - |
+| direction | 项目定位方向，可选值为 `row` `row-reverse` `column` `column-reverse` | _boolean_ | `row` |
+| wrap | 子元素的换行方式，可选值为 `nowrap` `wrap` `wrap-reverse` | _boolean_ | `nowrap` |
+| justify | 主轴对齐方式，可选值为 `start` `end` `center` `space-around` `space-between` | _string_ | `start` |
+| align | 交叉轴对齐方式，可选值为 `start` `center` `end` `baseline` `stretch` | _string_ | `start` |
+
+### Flex.Item Props
+
+| 参数   | 说明           | 类型               | 默认值 |
+| ------ | -------------- | ------------------ | ------ |
+| span   | 列元素宽度     | _number_ | -      |
+| offset | 列元素偏移距离 | _number_ | -      |