===============
LIBRARY RULES
===============
From library maintainers:
- Use Mix-UI components for mobile-first React applications
- Import components from '@kfe/mix-ui' package
- Follow TypeScript best practices when using components
- Check component API documentation for proper prop usage

### Basic Icon Usage with Mix-UI

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Icons 图标.md

Shows the basic implementation of various icons from '@kfe/mix-ui' in React, categorized by size (24px and 16px). It includes examples like 'ArrowClockwise', 'ArrowDown', 'Alipay', and 'CurrencyBubble'.

```typescript
import React from 'react'
import {
  ArrowClockwise24,
  ArrowClockwise16,
  ArrowDown24,
  ArrowDown16,
  ArrowSquarePathFill24,
  ArrowSquarePathFill16,
  Alipay24,
  CurrencyBubbleFill24,
  BadgeCgFill24
} from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {
  return (
    <div>
      <DemoBlock title='24px'>
        <ArrowClockwise24 />
        <ArrowDown24 />
        <ArrowSquarePathFill24 />
        <Alipay24 />
        <CurrencyBubbleFill24 />
        <BadgeCgFill24 />
      </DemoBlock>

      <DemoBlock title='16px'>
        <ArrowClockwise16 />
        <ArrowDown16 />
        <ArrowSquarePathFill16 />
      </DemoBlock>
    </div>
  )
}
```

--------------------------------

### Basic Image Usage with Mix-UI

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Image 图片.md

Demonstrates the fundamental usage of the Mix-UI Image component, displaying a single image with a specified source. This serves as the starting point for integrating the component.

```tsx
import React from 'react'
import { Image } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <>
      <DemoBlock title='一、基础用法' padding='0'>
        <div className='demo-image'>
          <Image className='demo-class' src='https://picd.zhimg.com/50/v2-871cf0c7c844eb7c10500f983411f1a9.webp' />
        </div>
      </DemoBlock>
    </>
  )
}
```

--------------------------------

### CSS Styling for Dialog Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Dialog 弹出框.md

Provides CSS examples for customizing the Dialog component's appearance, including global styles for the popup and specific styles for the confirm button.

```css
.dialog {
  &:global(.mu-popup) {
    background-color: blue;
  }

  :global(.mu-dialog__confirm) {
    background-color: aqua;
    color: red;
  }
}
```

--------------------------------

### 运行 Mix-UI 文档处理器 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

用于启动 Mix-UI 文档处理流程的命令。支持基本用法、直接运行和调试模式。

```Bash
pnpm process-mixui
```

```Bash
node dist/index.js mixui
```

```Bash
node dist/index.js mixui --debug
```

--------------------------------

### Tabs with Scrollspy and Sticky Navigation

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Tabs 标签页.md

This example demonstrates how to use the Tabs component with the `scrollspy` and `sticky` properties enabled for a scrollable navigation experience. It includes basic setup and content for multiple tabs.

```tsx
import React from 'react'
import { Tabs } from '@kfe/mix-ui'
import './style.less'

export default () => {
  return (
    <div className='demo-tabs'>
      <Tabs
        sticky
        scrollspy={{ autoFocusLast: true, reachBottomThreshold: 50 }}
      >
        {[1, 2, 3, 4, 5, 6, 7, 8].map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            <div style={{ height: '50vh' }}>内容 {item}</div>
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}
```

--------------------------------

### 开发模式 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

启动开发模式，通常会启用文件监听和自动重新构建。

```Bash
pnpm dev
```

--------------------------------

### DOMPurify Sanitization Examples

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/RichText 富文本展示.md

Provides several examples demonstrating how DOMPurify sanitizes various types of potentially harmful HTML and JavaScript code, ensuring security.

```js
DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // becomes <img src="x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // becomes <svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); // becomes <p>abc</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">'); // becomes <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table>
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // becomes <ul><li><a href="//google.com">click</a></li></ul>
```

--------------------------------

### 调试模式 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

运行工具时启用调试模式，以查看详细的处理过程信息。

```Bash
node dist/index.js mixui --debug
```

--------------------------------

### CyclicRoll Horizontal and Vertical Scrolling Example

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/CyclicRoll 跑马灯.md

Provides a React example showcasing the CyclicRoll component with both horizontal ('horizon') and vertical ('vertical') scrolling directions. It demonstrates how to set the 'direction' and 'speed' props, along with basic styling.

```tsx
import React from 'react'
import { CyclicRoll } from '@kfe/mix-ui'
import './cyclicRoll.less'

export default () => {
  return (
    <>
      <p>横向滚动</p>
      <CyclicRoll speed={500} direction='horizon' className='mu-cyclic-roll-demo mu-cyclic-roll-demo-horizon' style={{ color: 'blue' }}>
        <p>1</p>
        <p>2</p>
        <p>3</p>
      </CyclicRoll>
      <p>纵向滚动</p>
      <CyclicRoll className='mu-cyclic-roll-demo' speed={30} direction='vertical'>
        <p>1</p>
        <p>2</p>
        <p>3</p>
      </CyclicRoll>
    </>

  )
}
```

--------------------------------

### 查看帮助信息 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

显示文档处理工具的帮助信息和可用命令的命令。

```Bash
node dist/index.js --help
```

--------------------------------

### Tabs with Alignment Options

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Tabs 标签页.md

Demonstrates how to control the alignment of the tab bar using the 'align' prop, with options for 'start' and 'center'.

```tsx
import React from 'react'
import { Tabs } from '@kfe/mix-ui'

export default () => {
  return (
    <div className='demo-tabs'>
      <Tabs align='start'>
        {[1, 2, 3].map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            内容 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs align='center'>
        {[1, 2, 3].map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            内容 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}
```

--------------------------------

### Import Loading Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Loading 加载.md

Demonstrates how to import the Loading component from the '@kfe/mix-ui' library.

```js
import { Loading } from '@kfe/mix-ui';
```

--------------------------------

### XSS Protection Example

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/RichText 富文本展示.md

Illustrates the XSS protection capabilities of the RichText component by rendering potentially malicious HTML, such as an image with an onerror attribute.

```tsx
import React from 'react'
import { RichText } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {
  return (
    <div className='demo-rich-text'>
      <DemoBlock title='图片加载错误 xss 注入' padding='0'>
        <RichText content='<img src=x onerror=alert(1) />' />
      </DemoBlock>
    </div>
  )
}
```

--------------------------------

### 自定义源/目标目录 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

运行文档处理器时，指定自定义源目录和目标目录的命令。

```Bash
node dist/index.js mixui --source-dir custom/source --target-dir custom/output
```

--------------------------------

### HorizontalCard with Image Cover

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/HorizontalCard 横向卡片.md

Illustrates how to use the HorizontalCard component with an image as a cover. This example includes importing the Image component and applying custom styling.

```tsx
import React from 'react'
import { DemoBlock } from 'demos'
import { HorizontalCard, Image } from '@kfe/mix-ui'
import './index.less'

export default () => {
  return (
    <DemoBlock background='#f6f8fc' title='自定义内容'>
      <HorizontalCard
        title='标题'
        cover={
          <div className='horizontal-card-demos-img-wrap'>
            <Image
              className='horizontal-card-demos-img'
              src='https://picx.zhimg.com/v2-ec0cf4fcff7aa1db67b14566e55b7842.jpg?source=320ce2a5'
              showLoading={false}
            />
          </div>
        }
      >
        自定义内容
      </HorizontalCard>
    </DemoBlock>
  )
}
```

--------------------------------

### Import Image Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Image 图片.md

Demonstrates how to import the Image component from the '@kfe/mix-ui' library. This is the initial step to use the component in your project.

```javascript
import { Image } from '@kfe/mix-ui';
```

--------------------------------

### CountDown with Custom Format

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/CountDown 倒计时.md

Illustrates how to customize the displayed countdown text using the 'format' prop. The example sets a format for days, hours, minutes, and seconds.

```tsx
import React from 'react'
import { CountDown } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <DemoBlock title='自定义格式' padding='12px'>
      <div className='demo-count-down'>
        <CountDown time={30 * 60 * 60 * 1000} format='DD 天 HH 时 mm 分 ss 秒' />
      </div>
    </DemoBlock>
  )
}
```

--------------------------------

### 安装依赖 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

用于安装项目所需依赖的命令。通常在项目初始化或更新后执行。

```Bash
pnpm install
```

--------------------------------

### Basic HorizontalCard Usage

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/HorizontalCard 横向卡片.md

Shows the fundamental usage of the HorizontalCard component, displaying a title and custom content. This serves as a starting point for integrating the card into your application.

```tsx
import React from 'react'
import { DemoBlock } from 'demos'
import { HorizontalCard } from '@kfe/mix-ui'

export default () => {
  return (
    <DemoBlock background='#f6f8fc' title='自定义内容'>
      <HorizontalCard title='标题'>
        自定义内容
      </HorizontalCard>
    </DemoBlock>
  )
}
```

--------------------------------

### 配置环境变量 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

通过设置环境变量来调整工具的行为，例如关闭敏感信息清理。

```Bash
CLEAN_SENSITIVE=false
```

--------------------------------

### Using CollapseItem Ref to Toggle Panel

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Collapse 折叠面板.md

Provides an example of how to use a ref to access a `CollapseItem` instance and call its `toggle` method to programmatically expand or collapse the panel.

```ts
import { useRef } from 'react';
import type { CollapseItemInstance } from '@kfe/mix-ui';

const collapseItemRef = useRef<CollapseItemInstance>(null);

collapseItemRef.current?.toggle();
```

--------------------------------

### Import Button Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Button 按钮.md

Demonstrates how to import the Button component from the '@kfe/mix-ui' library.

```javascript
import { Button } from '@kfe/mix-ui';
```

--------------------------------

### 加载状态 - Switch

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Switch 开关.md

演示如何通过 `loading` 属性将 Switch 组件设置为加载状态，此时开关不可点击。

```tsx
import React from 'react'
import { Switch } from '@kfe/mix-ui'

export default () => {
  return <Switch loading defaultChecked />
}
```

--------------------------------

### 添加新的处理器 (TypeScript)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

演示如何扩展新的文档处理器。需要实现 `IDocProcessor` 接口并注册到主入口文件中。

```TypeScript
import { IDocProcessor, ProcessOptions } from '../types/index.js';

export class MyProcessor implements IDocProcessor {
  public readonly name = 'my-library';

  async process(options: ProcessOptions = {}): Promise<void> {
    // 实现你的处理逻辑
  }
}
```

```TypeScript
import { MyProcessor } from './processors/my-processor.js';

const processors: Record<string, IDocProcessor> = {
  mixui: new MixUIProcessor(),
  mylibrary: new MyProcessor(), // 添加新的处理器
};
```

--------------------------------

### Enable Popup for DatetimePicker

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/DatetimePicker 时间选择.md

Illustrates how to enable the popup feature for DatetimePicker using the 'popup' prop. This example also shows how to integrate it with a Field component and use 'onConfirm' for value updates.

```tsx
import React, { useState } from 'react'
import { DatetimePicker, Field } from '@kfe/mix-ui'

export default () => {
  const [value, setValue] = useState(new Date())
  return (
    <DatetimePicker
      popup={{
        round: true
      }}
      type='date'
      title='选择年月日'
      minDate={new Date(2021, 0, 1)}
      maxDate={new Date(2025, 10, 1)}
      value={value}
      onConfirm={setValue}
    >
      {(val, _, actions) => {
        return (
          <Field
            readOnly
            clickable
            label='选择年月日'
            value={val.toLocaleDateString('zh-CN')}
            placeholder='请选择日期'
            onClick={() => actions.open()}
          />
        )
      }}
    </DatetimePicker>
  )
}
```

--------------------------------

### Import Input Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Input 输入框.md

Demonstrates how to import the Input component from the '@kfe/mix-ui' library.

```js
import { Input } from '@kfe/mix-ui';
```

--------------------------------

### Basic Tabs Usage and Styles

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Tabs 标签页.md

Shows the basic implementation of the Tabs component with different display styles: line, capsule, jumbo (with descriptions), and card. It includes examples of how to structure TabPanes and their content.

```tsx
import React from 'react'
import { Tabs } from '@kfe/mix-ui'
import './style.less'

const items = Array.from({ length: 3 }, (_, i) => i + 1)
const signItems = [
  {
    title: '头1',
    content: '内容1',
    description: '哈哈哈哈',
    sign: {
      content: <img src='https://pic2.zhimg.com/v2-aac9df70bbd91b55b6d4fb12719af3e0.png' />,
      left: '0px',
      top: '0px'

    }
  },
  {
    title: '头2',
    content: '内容2',
    description: '哈哈哈哈',
    sign: {
      content: <img src='https://pic2.zhimg.com/v2-aac9df70bbd91b55b6d4fb12719af3e0.png' />,
      left: '10px',
      bottom: '10px'

    }
  },
  {
    title: '头3',
    content: '内容3',
    description: '哈哈哈哈',
    sign: {
      content: <img src='https://pic2.zhimg.com/v2-aac9df70bbd91b55b6d4fb12719af3e0.png' />,
      right: '20px',
      top: '20px'

    }
  }
]

export default () => {
  return (
    <div className='demo-tabs'>
      <Tabs defaultActive={2}>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            下划线标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs border type='capsule'>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            胶囊标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs border type='capsule2'>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            胶囊2标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs border type='jumbo'>
        {signItems.map((item, index) => (
          <Tabs.TabPane
            key={index}
            title={item.title}
            description={item.content}
            sign={item.sign}
          >
            {item.content}
          </Tabs.TabPane>
        ))}
      </Tabs>
      <Tabs type='card'>
        {items.map(item => (
          <Tabs.TabPane key={item} title={`标签${item}`}>
            卡片标签页 {item}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}
```

--------------------------------

### Disabled Button State

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Button 按钮.md

Shows how to disable buttons using the `disabled` prop, making them unclickable. This example includes disabled buttons with primary, pay, default types, and with/without the `surface` and `stroke` props.

```tsx
import React from 'react'
import { Button } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <DemoBlock title='禁用状态' padding='12px'>
      <div className='demo-button'>
        <Button disabled type='primary'>
          会员色
        </Button>
        <Button disabled type='pay'>
          购买红
        </Button>
        <Button disabled type='default'>
          主题色
        </Button>
        <Button disabled surface type='primary'>
          会员色
        </Button>
        <Button disabled surface type='pay'>
          购买红
        </Button>
        <Button disabled surface type='default'>
          主题色
        </Button>
        <Button disabled stroke type='primary'>
          会员色
        </Button>
        <Button disabled stroke type='pay'>
          购买红
        </Button>
        <Button disabled stroke type='default'>
          主题色
        </Button>
      </div>
    </DemoBlock>
  )
}
```

--------------------------------

### Steps Basic Usage

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/steps.md

Demonstrates the basic usage of the Steps component, allowing users to navigate through different stages of a process. It includes steps for order placement, order acceptance, pickup, and transaction completion. A button is provided to advance to the next step.

```js
import { Steps } from '@kfe/mix-ui';
```

```tsx
import React, { useState } from 'react'
import { Steps, Button } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {
  const [active, setActive] = useState(1)
  const nextStep = () => setActive((prev) => (prev >= 3 ? 0 : prev + 1))
  return (
    <DemoBlock title='相邻组件水平间距' padding='12px'>
      <Steps active={active}>
        <Steps.Item>买家下单</Steps.Item>
        <Steps.Item>商家接单</Steps.Item>
        <Steps.Item>买家提货</Steps.Item>
        <Steps.Item>交易完成</Steps.Item>
      </Steps>
      <div style={{ padding: 20 }}>
        <Button onClick={nextStep}>
          下一步
        </Button>
      </div>
    </DemoBlock>
  )
}
```

--------------------------------

### 贡献指南 - 提交更改 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

提交代码更改到本地仓库的 Git 命令。

```Bash
git commit -m 'Add some AmazingFeature'
```

--------------------------------

### Set Square Button Shape

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Button 按钮.md

Demonstrates how to create square-shaped buttons using the 'square' prop in the Mix UI Button component. This example shows primary, pay, and default button types with the square attribute.

```tsx
import React from 'react'
import { Button } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <DemoBlock title='按钮形状' padding='12px'>
      <div className='demo-button'>
        <Button square type='primary'>
          会员色
        </Button>
        <Button square type='pay'>
          购买红
        </Button>
        <Button square type='default'>
          主题色
        </Button>
      </div>
    </DemoBlock>
  )
}
```

--------------------------------

### 引入 Sticky 组件

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Sticky 粘性布局.md

演示如何从 '@kfe/mix-ui' 库中引入 Sticky 组件。

```js
import { Sticky } from '@kfe/mix-ui';
```

--------------------------------

### Import Empty Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Empty 空状态.md

Demonstrates how to import the Empty component from the '@kfe/mix-ui' library.

```javascript
import { Empty } from '@kfe/mix-ui';
```

--------------------------------

### CountDown Manual Control with Refs

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/CountDown 倒计时.md

Shows how to control the CountDown component manually using refs. The 'start', 'pause', and 'reset' methods can be called on the component instance. Includes 'autoStart={false}' and 'onFinish' event handling.

```tsx
import React, { useRef } from 'react'
import { CountDown, Toast, Button } from '@kfe/mix-ui'
import type { CountDownInstance } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  const ref = useRef<CountDownInstance>(null)
  return (
    <DemoBlock title='手动控制' padding='12px'>
      <div className='demo-count-down'>
        <CountDown
          ref={ref}
          time={3000}
          millisecond
          format='HH:mm:ss:SS'
          autoStart={false}
          onFinish={() => Toast.info('倒计时结束')}
        />
        <br />
        <Button
          text='开始'
          onClick={() => ref.current?.start()}
        />
        <Button
          text='暂停'
          onClick={() => ref.current?.pause()}
        />
        <Button
          text='重置'
          onClick={() => ref.current?.reset()}
        />
      </div>
    </DemoBlock>
  )
}
```

--------------------------------

### Controlling Picker Visibility with useRef

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Picker 选择器.md

Demonstrates how to use React's `useRef` hook to get a reference to the Picker instance and call its methods like `open()`, `close()`, or `toggle()` to manage the picker's visibility.

```TypeScript
import { useRef } from 'react';
import type { PickerInstance } from '@kfe/mix-ui';

const pickerRef = useRef<PickerInstance>();

pickerRef.current?.open();
```

--------------------------------

### Import WechatOverlay

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/WechatOverlay 微信遮罩.md

Demonstrates how to import the WechatOverlay component from the '@kfe/mix-ui' library.

```javascript
import { WechatOverlay } from '@kfe/mix-ui';
```

--------------------------------

### 构建项目 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

用于构建项目的命令，将 TypeScript 代码编译为可执行的 JavaScript。

```Bash
pnpm build
```

--------------------------------

### Popup Positioning

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Popup 弹出层.md

Illustrates how to control the Popup's position using the `position` prop. It supports 'top', 'bottom', 'left', 'right', and defaults to center. The example uses state to manage different positions triggered by buttons.

```tsx
import React, { useState } from 'react'
import { Button, Popup, PopupPosition } from '@kfe/mix-ui'

export default () => {
  const [state, setState] = useState<PopupPosition>('')

  const onClose = () => setState('')

  return (
    <>
      <Button onClick={() => setState('top')}>顶部弹出</Button>
      <Button onClick={() => setState('bottom')}>底部弹出</Button>
      <Button onClick={() => setState('left')}>左侧弹出</Button>
      <Button onClick={() => setState('right')}>右侧弹出</Button>

      <Popup
        visible={state === 'top'}
        style={{ height: '30%' }}
        position='top'
        onClose={onClose}
      />
      <Popup
        visible={state === 'bottom'}
        style={{ height: '30%' }}
        position='bottom'
        onClose={onClose}
      />
      <Popup
        visible={state === 'left'}
        style={{ width: '30%', height: '100%' }}
        position='left'
        onClose={onClose}
      />
      <Popup
        visible={state === 'right'}
        style={{ width: '30%', height: '100%' }}
        position='right'
        onClose={onClose}
      />
    </>
  )
}
```

--------------------------------

### 贡献指南 - 推送到分支 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

将本地分支的更改推送到远程仓库的 Git 命令。

```Bash
git push origin feature/AmazingFeature
```

--------------------------------

### Basic Overlay Usage

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Overlay 遮罩.md

Shows a basic example of using the Overlay component in React. It includes a button to toggle the overlay's visibility and demonstrates how to control the overlay using the `visible` prop and close it by clicking outside.

```tsx
import React, { useState } from 'react'
import { Button, Overlay } from '@kfe/mix-ui'

export default () => {
  const [show, setShow] = useState(false)

  return (
    <>
      <Button onClick={() => setShow(true)}>
        显示遮罩层
      </Button>
      <Overlay visible={show} onClick={() => setShow(false)} />
    </>
  )
}
```

--------------------------------

### 贡献指南 - 创建特性分支 (Bash)

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/README.md

在贡献代码时，创建新的特性分支的 Git 命令。

```Bash
git checkout -b feature/AmazingFeature
```

--------------------------------

### Max UI Checkbox and CheckboxGroup Instance Types

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Checkbox 复选框.md

Demonstrates how to use TypeScript to get the instance types for Checkbox and CheckboxGroup components in React. It shows how to create refs and call methods like 'toggle' and 'toggleAll' on these instances.

```TypeScript
import { useRef } from 'react';
import type { CheckboxInstance, CheckboxGroupInstance } from '@kfe/max-ui';

const checkboxRef = useRef<CheckboxInstance>();
const checkboxGroupRef = useRef<CheckboxGroupInstance>();

checkboxRef.current?.toggle();
checkboxGroupRef.current?.toggleAll();
```

--------------------------------

### 引入 Switch 组件

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Switch 开关.md

展示如何从 '@kfe/mix-ui' 库中引入 Switch 组件。

```js
import { Switch } from '@kfe/mix-ui';
```

--------------------------------

### Customize Button Second Line Text

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Button 按钮.md

Illustrates how to add and customize the second line of text on buttons using the 'secondText' prop. This example shows how to display additional information below the main button text for different button types.

```tsx
import React from 'react'
import { Button } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'
import './style.less'

export default () => {
  return (
    <DemoBlock title='按钮第二行文本' padding='12px'>
      <div className='demo-button'>
        <Button type='primary' secondText='立即购买'>新会员首月仅 0.3 元/天</Button>
        <Button type='pay' secondText='立即购买'>新会员首月仅 0.3 元/天</Button>
        <Button type='default' secondText='立即购买'>新会员首月仅 0.3 元/天</Button>
      </div>
    </DemoBlock>
  )
}
```

--------------------------------

### 引入 Pag 组件

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Pag 动画工作流.md

展示了如何在项目中使用 `@kfe/mix-ui` 库引入 `Pag` 组件。这是一个基础的 JavaScript 导入语句。

```javascript
import { Pag } from '@kfe/mix-ui';
```

--------------------------------

### Overlay with Embedded Content

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Overlay 遮罩.md

Illustrates how to embed custom content within the Overlay component. This example shows a button to trigger the overlay, which then displays a styled div in its center. The overlay's visibility is managed using React's `useState` hook.

```tsx
import React, { useState } from 'react'
import { Button, Overlay } from '@kfe/mix-ui'

export default () => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button onClick={() => setVisible(true)}>
        嵌入内容
      </Button>
      <Overlay visible={visible} onClick={() => setVisible(false)}>
        <div
          style={{
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <div style={{ width: 120, height: 120, backgroundColor: '#fff', borderRadius: 4 }} />
        </div>
      </Overlay>
    </>
  )
}
```

--------------------------------

### Customizing Icon Size and Color with Mix-UI

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Icons 图标.md

Illustrates how to customize the size and color of icons imported from '@kfe/mix-ui'. Examples show setting a custom size (e.g., 100, 120) and color (e.g., 'red') for icons like 'ArrowClockwise' and 'Vip'.

```typescript
import React from 'react'
import {
  ArrowClockwise24,
  Vip24
} from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {
  return (
    <div>
      <DemoBlock title='图标大小'>
        <ArrowClockwise24 size={100} />
        <Vip24 size={120} />
      </DemoBlock>

      <DemoBlock title='图标颜色'>
        <ArrowClockwise24 color='red' />
      </DemoBlock>
    </div>
  )
}
```

--------------------------------

### 引入 Swiper 组件

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Swiper 轮播.md

这是引入 Swiper 组件的基本方式，通常在项目文件顶部进行。它依赖于 '@kfe/mix-ui' 库。

```js
import { Swiper } from '@kfe/mix-ui';
```

--------------------------------

### Import Lazyload Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Lazyload 懒加载.md

Demonstrates how to import the Lazyload component from the '@kfe/mix-ui' library.

```javascript
import { Lazyload } from '@kfe/mix-ui';
```

--------------------------------

### Mix-UI Form with Various Item Types

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Form 表单.md

This snippet demonstrates how to use the Mix-UI Form component with various standard form item types. It includes examples for Checkbox, Checkbox.Group, Radio.Group, Picker, and Input.TextArea. The form is configured with a submit button and basic layout.

```tsx
import React from 'react'
import {
  Button,
  Checkbox,
  Input,
  Radio,
  Form,
  Picker
} from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {
  const [form] = Form.useForm()

  const onFinish = values => {
    console.log(values)
  }

  return (
    <DemoBlock title='表单项类型' padding='12px 0'>
      <Form
        colon
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: '16px 16px 0' }}>
            <Button block>
              提交
            </Button>
          </div>
      }
      >
        <Form.Item name='checkbox' label='复选框' valuePropName='checked'>
          <Checkbox />
        </Form.Item>
        <Form.Item
          name='checkbox_group'
          label='复选框组'
          initialValue={['c1', 'c2']}
        >
          <Checkbox.Group direction='horizontal'>
            <Checkbox name='c1'>
              复选框1
            </Checkbox>
            <Checkbox name='c2'>
              复选框2
            </Checkbox>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item name='radio' label='单选框'>
          <Radio.Group direction='horizontal'>
            <Radio name='r1'>单选框1</Radio>
            <Radio name='r2'>单选框2</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          isLink
          name='picker'
          label='城市选择'
          trigger='onConfirm'
          onClick={(_, action) => {
            action.current?.open()
          }}
        >
          <Picker
            popup
            columns={[
              '南京',
              '苏州',
              '常州',
              '淮安',
              '扬州',
              '南通',
              '宿迁',
              '泰州',
              '无锡'
            ]}
          >
            {val => val || '请选择城市'}
          </Picker>
        </Form.Item>
        <Form.Item name='textarea' label='详细地址'>
          <Input.TextArea rows={3} autoSize maxLength={140} showWordLimit />
        </Form.Item>
      </Form>
    </DemoBlock>
  )
}
```

--------------------------------

### Import Popup Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Popup 弹出层.md

Demonstrates how to import the Popup component from the '@kfe/mix-ui' library.

```js
import { Popup } from '@kfe/mix-ui';
```

--------------------------------

### Form.useWatch for Update Subscription

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Form 表单.md

This example demonstrates using Form.useWatch to subscribe to form field changes and re-render components accordingly. It watches the 'account' and 'type' fields to display user login information, and conditionally renders input fields based on the selected login method.

```tsx
import React from 'react'
import { Form, Input, Button, Radio, Space } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

interface FieldType { account?: string, loginMethod?: 'mobile' | 'email' }

export default function () {
  const [form] = Form.useForm<FieldType>()

  const account = Form.useWatch('account', form)
  const type = Form.useWatch('type', form)

  console.log('watch rerender')
  return (
    <DemoBlock title='useWatch 订阅更新' padding='12px 0'>
      <Form
        form={form}
        initialValues={{
          type: 'mobile',
          account: '18888888888'
        }}
        footer={
          <>
            <div className='notice-footer'>
              你将使用 {type === 'mobile' ? '手机号' : '邮箱'} {account} 登录
            </div>
            <div style={{ margin: '16px 16px 0' }}>
              <Button block>
                提交
              </Button>
            </div>
          </>
      }
      >
        <Form.Item name='type' label='登录方式'>
          <Radio.Group>
            <Space>
              <Radio name='mobile'>手机号</Radio>
              <Radio name='email'>邮箱</Radio>
            </Space>
          </Radio.Group>
        </Form.Item>
        {type === 'mobile' && (
          <Form.Item name='account' label='手机号'>
            <Input placeholder='请输入手机号' />
          </Form.Item>
        )}
        {type === 'email' && (
          <Form.Item name='account' label='邮箱'>
            <Input placeholder='请输入邮箱' />
          </Form.Item>
        )}
      </Form>
    </DemoBlock>
  )
}
```

--------------------------------

### Import Overlay Component

Source: https://github.com/zvip-fe/mix-mkt-open-docs/blob/main/docs/mix-ui/Overlay 遮罩.md

Demonstrates how to import the Overlay component from the '@kfe/mix-ui' library into your JavaScript project.

```js
import { Overlay } from '@kfe/mix-ui';
```