Mix Market Open Docs

https://github.com/zvip-fe/mix-market-open-docs
Admin
Comprehensive documentation library for Mix-Market ecosystem, featuring Mix-UI component library...
Tokens:83,698
Snippets:306
Trust Score:1.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Dependencies

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

Installs the project's dependencies using the pnpm package manager.

```Bash
pnpm install
```

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

### Mix-UI Empty Basic Usage Examples

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

Provides React examples for the Mix-UI Empty component, showcasing configurations with title, content, and buttons. It covers scenarios from just a title to title, content, and a button, as well as omitting the image.

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

export default () => {

  return (
    <>
      <DemoBlock title='图片 + 主标题' padding='0'>
        <Empty
          title='空模块的主标题'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 主标题 + 描述' padding='0'>
        <Empty
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 主标题 + 描述 + 按钮' padding='0'>
        <Empty
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
          buttonText='我是按钮'
          onButtonClick={() => alert('OK')}
        />
      </DemoBlock>

      <DemoBlock title='主标题 + 描述' padding='0'>
        <Empty
          image='none'
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 描述' padding='0'>
        <Empty
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>
    </>

  )
}
```

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

### Picker Instance Methods

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

Demonstrates how to use the PickerInstance type to interact with the Picker component via a ref. Includes examples for opening, closing, and toggling the picker's visibility.

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

const pickerRef = useRef<PickerInstance>();

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

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

### CardLayout Content Loading Example

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

Provides a React TypeScript example of using the CardLayout component to display custom content. It shows how to render multiple CardLayout instances within a DemoBlock.

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

export default () => {
  return (
    <DemoBlock background='#f6f8fc' title='自定义内容' padding='12px'>
      <CardLayout>CardLayout1</CardLayout>
      <CardLayout>CardLayout2</CardLayout>
      <CardLayout>CardLayout3</CardLayout>
    </DemoBlock>
  )
}
```

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

### Basic Flex Layout Example

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Flex 布局.md

Shows a basic implementation of the Flex component, utilizing its 24-column grid system. It demonstrates how to create columns using Flex.Item and distribute space using the 'span' prop.

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

export default () => {
  return (
    <div className='demo-flex'>
      <Flex justify='center' align='center'>
        <Flex.Item span={12}>span: 12</Flex.Item>
        <Flex.Item span={12}>span: 12</Flex.Item>
      </Flex>

      <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>
    </div>
  )
}
```

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

### Basic Icon Usage with mix-ui

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

Shows how to render various icons from the mix-ui library in different sizes (16px and 24px). It includes examples like 'ArrowClockwise', 'ArrowDown', 'Alipay', and 'CurrencyBubble'.

```tsx
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>
  )
}
```

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

### Image Component Usage (React)

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

Example of how to use the Image component in a React application. This snippet demonstrates basic usage and assumes the component is imported and available.

```jsx
import React from 'react';
import { Image } from '@mix-market/ui';

const App = () => {
  return (
    <>
      <DemoBlock title="基础用法">
        <Image src="https://via.placeholder.com/150" />
      </DemoBlock>
    </>
  );
};

export default App;
```

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

### Basic Overlay Usage

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

Shows a basic example of using the Overlay component. It includes a button to toggle the overlay's visibility and the Overlay component itself, which can be closed by clicking on it.

```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)} />
    </>
  )
}
```

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

### Development Mode

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

Starts the project in development mode using pnpm dev. This typically enables features like hot-reloading or watch mode for automatic recompilation upon file changes.

```Bash
pnpm dev
```

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

### Register New Processor (TypeScript)

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

Example of how to register a newly created document processor in the main script. This involves adding the new processor instance to the `processors` object, making it available for use.

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

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

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

### Mix UI Empty Component - Night Mode Example

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

Demonstrates how to use the Mix UI Empty component in night mode by integrating with ConfigProvider and setting the theme to 'dark'. It showcases various Empty component configurations with different titles, content, and button texts.

```tsx
import React, { useEffect } from 'react'
import { Empty, ConfigProvider } from '@kfe/mix-ui'
import { DemoBlock } from 'demos'

export default () => {

  useEffect(() => {
    const root = document.documentElement
    const oriValue = root.getAttribute('data-prefers-color')
    root.setAttribute('data-prefers-color', 'dark')

    return () => {
      oriValue && root.setAttribute('data-prefers-color', oriValue)
    }
  }, [])

  return (
    <ConfigProvider theme='dark'>
      <DemoBlock title='图片 + 主标题' padding='0'>
        <Empty
          title='空模块的主标题'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 主标题 + 描述' padding='0'>
        <Empty
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 主标题 + 描述 + 按钮' padding='0'>
        <Empty
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
          buttonText='我是按钮'
          onButtonClick={() => alert('OK')}
        />
      </DemoBlock>

      <DemoBlock title='主标题 + 描述' padding='0'>
        <Empty
          image='none'
          title='空模块的主标题'
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>

      <DemoBlock title='图片 + 描述' padding='0'>
        <Empty
          content='这个模块是空内容的描述文案这个模块是空内容的描述文案这个模块是空内容的描述文案'
        />
      </DemoBlock>

      <DemoBlock title='通用空页面' padding='0'>
        <Empty
          title='通用空页面 (默认)'
        />
      </DemoBlock>

      <DemoBlock title='加载失败' padding='0'>
        <Empty
          title='加载失败'
          image='loadingError'
        />
      </DemoBlock>

      <DemoBlock title='无网络' padding='0'>
        <Empty
          title='无网络'
          image='noNetwork'
        />
      </DemoBlock>

      <DemoBlock title='内容异常' padding='0'>
        <Empty
          title='内容异常'
          image='contentError'
        />
      </DemoBlock>

      <DemoBlock title='无创作' padding='0'>
        <Empty
          title='无创作'
          image='noWorks'
        />
      </DemoBlock>

      <DemoBlock title='无收藏' padding='0'>
        <Empty
          title='无收藏'
          image='noCollection'
        />
      </DemoBlock>

      <DemoBlock title='无金额' padding='0'>
        <Empty
          title='无金额'
          image='noBalance'
        />
      </DemoBlock>
    </ConfigProvider>

  )
}
```

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

### Import Steps Component

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

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

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

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

### Tabs Alignment Options

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

Demonstrates how to change the alignment of the tab bar using the `align` prop. Examples show 'start' and 'center' alignments.

```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>
  )
}
```

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

### Programmatic Toggle of CollapseItem

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

Demonstrates how to use a ref to get an instance of `CollapseItem` and call its `toggle` method. This allows for controlling the expanded state of a panel programmatically, for example, in response to other user interactions or application logic.

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

const collapseItemRef = useRef<CollapseItemInstance>(null);

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

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

### Display Help Information

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

Displays the help information for the documentation processing tool. This command lists all available options and their descriptions.

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

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

### Import Loading Component

Source: https://github.com/zvip-fe/mix-market-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';
```

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

### Enable Scrollspy and Sticky Navigation in Tabs

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

This example demonstrates how to enable scrollspy and sticky navigation for the Tabs component in React using TypeScript. The `scrollspy` prop configures the scroll behavior, while `sticky` enables the sticky positioning. This setup allows content to be displayed in a flat layout with enhanced navigation capabilities.

```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>
  )
}
```

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

### Import Overlay Component

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

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

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

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

### DOMPurify Sanitization Examples

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

Provides examples of DOMPurify's sanitization capabilities, demonstrating how it cleans various types of potentially malicious HTML and SVG content.

```javascript
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>
```

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

### Import Input Component

Source: https://github.com/zvip-fe/mix-market-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';
```

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

### Mix UI Empty Component - CHIPS Type Display

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

Illustrates the CHIPS type display for the Mix UI Empty component, showcasing examples for 'chipsLoadingError', 'chipsNoNetwork', and 'chipsContentError'. Each example includes a title, the 'CHIPS' theme, a specific image, and a button text.

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

export default () => {

  return (
    <>
      <ConfigProvider theme='dark'>
        <DemoBlock>
          <Empty
            title='chips 页面加载失败'
            theme='CHIPS'
            image='chipsLoadingError'
            buttonText='刷新试试'
          />
        </DemoBlock>

      </ConfigProvider>
      <DemoBlock>
        <Empty
          title='chips 无网络'
          theme='CHIPS'
          image='chipsNoNetwork'
          buttonText='刷新试试'
        />
      </DemoBlock>
      <DemoBlock>
        <Empty
          title='chips 内容加载失败'
          theme='CHIPS'
          image='chipsContentError'
          buttonText='刷新试试'
        />
      </DemoBlock>
    </>

  )
}
```

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

### Import Image Component

Source: https://github.com/zvip-fe/mix-market-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 first step to using the component in your project.

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

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

### CyclicRoll: Horizontal and Vertical Scrolling Example

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

Provides a React (TSX) example showcasing the CyclicRoll component's ability to perform both horizontal ('horizon') and vertical ('vertical') scrolling. It includes basic styling and demonstrates how to set the scroll direction and speed.

```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>
    </>

  )
}
```

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

### Import Sticky Component

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

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

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

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

### 手动控制 CountDown

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

演示如何通过 `ref` 获取 CountDown 实例，并调用 `start`、`pause`、`reset` 方法来手动控制倒计时。

```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>
  )
}
```

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

### Popover 弹出位置值

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Popover 气泡弹出框.md

列出了 `placement` 属性支持的所有值及其对应的弹出位置。

```bash
top           # 顶部中间位置
top-start     # 顶部左侧位置
top-end       # 顶部右侧位置
left          # 左侧中间位置
left-start    # 左侧上方位置
left-end      # 左侧下方位置
right         # 右侧中间位置
right-start   # 右侧上方位置
right-end     # 右侧下方位置
bottom        # 底部中间位置
bottom-start  # 底部左侧位置
bottom-end    # 底部右侧位置
```

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

### Custom Column Order

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

Shows how to customize the order of columns in the DatetimePicker using the `columnsOrder` prop, for example, to display month, day, then year.

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

export default () => {
  const [value, setValue] = React.useState(new Date())
  return (
    <DatetimePicker
      type='date'
      columnsOrder={['month', 'day', 'year']}
      minDate={new Date(2020, 0, 1)}
      maxDate={new Date(2025, 10, 1)}
      value={value}
      onChange={setValue}
    />
  )
}
```

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

### Flex Layout Direction

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Flex 布局.md

Demonstrates how to control the direction of flex items using the 'direction' prop. Examples include 'row' and 'row-reverse'.

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

export default () => {
  return (
    <div className='demo-flex'>
      <Flex direction='row'>
        <Flex.Item span={8}>span: 8-1</Flex.Item>
        <Flex.Item span={8}>span: 8-2</Flex.Item>
        <Flex.Item span={8}>span: 8-3</Flex.Item>
      </Flex>
      <Flex direction='row-reverse'>
        <Flex.Item span={8}>span: 8-1</Flex.Item>
        <Flex.Item span={8}>span: 8-2</Flex.Item>
        <Flex.Item span={8}>span: 8-3</Flex.Item>
      </Flex>
    </div>
  )
}
```

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

### Disable Sensitive Information Cleaning

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

An example of how to disable the sensitive information cleaning feature using an environment variable. By default, this feature is enabled.

```Bash
CLEAN_SENSITIVE=false
```

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

### Import Flex Component

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Flex 布局.md

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

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

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

### Vertical Button Style Dialog

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

Shows how to apply a 'vertical-button' theme to the Dialog component for a different button layout. This example uses Dialog.show with the theme option.

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

import './style.less'

export default () => {
  return (
    <DemoBlock title='竖排按钮风格' padding='12px'>
      <Button
        text='竖排按钮弹窗'
        onClick={() =>
          Dialog.show({
            title: '品牌方',
            message: '有问题就会有答案',
            theme: 'vertical-button',
            showCancelButton: true
          })}
      />
    </DemoBlock>
  )
}
```

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

### Basic Steps Usage

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

Shows the fundamental usage of the Steps component with a simple progression. It includes state management for the active step and a button to advance through the steps.

```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>
  )
}
```

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

### Basic Skeleton Usage

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Skeleton 骨架屏.md

Demonstrates the basic usage of the Skeleton component, showing a title placeholder and configuring the number of placeholder paragraph rows.

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

export default () => {
  return (
    <DemoBlock title='基础用法' padding='12px'>
      <Skeleton title />
    </DemoBlock>
  )
}
```

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

### Process Mix-UI Documentation (Custom Paths)

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

Runs the Mix-UI documentation processing tool, allowing customization of the source and target directories. This enables users to specify where to read component documentation from and where to save the processed output.

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

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

### Vertical Steps Layout

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

Demonstrates how to render the Steps component in a vertical layout by setting the `direction` prop to 'vertical'. This example shows how to display detailed information for each step.

```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 >= 2 ? 0 : prev + 1))
  return (
    <DemoBlock>
      <Steps direction='vertical' active={active}>
        <Steps.Item>
          <p style={{ lineHeight: 1 }}>【城市】物流状态1</p>
          <p style={{ marginTop: '3px' }}>2016-07-12 12:40</p>
        </Steps.Item>
        <Steps.Item>
          <p style={{ lineHeight: 1 }}>【城市】物流状态2</p>
          <p style={{ marginTop: '3px' }}>2016-07-11 10:00</p>
        </Steps.Item>
        <Steps.Item>
          <p style={{ lineHeight: 1 }}>快件已发货</p>
          <p style={{ marginTop: '3px' }}>2016-07-10 09:30</p>
        </Steps.Item>
      </Steps>
      <div style={{ padding: 20 }}>
        <Button onClick={nextStep}>
          下一步
        </Button>
      </div>
    </DemoBlock>

  )
}
```

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

### 监听 Swiper onChange 事件

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

This example shows how to listen for the `onChange` event, which is triggered after each page swipe. It updates a state variable to display the current page number.

```tsx
import React, { useState } from 'react'
import { Swiper } from '@kfe/mix-ui'
import { DemoBlock, DemoDescription } from 'demos'
import { items } from './items'

import './base.less'

export default () => {
  const [page, setPage] = useState(1)
  return (
    <DemoBlock title='监听 onChange 事件' padding='0'>
      <div className='demo-swiper'>
        <DemoDescription content={`当前是第${page}页`} />
        <Swiper onChange={(i) => setPage(+i + 1)}>{items}</Swiper>
      </div>
    </DemoBlock>

  )
}
```

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

### Import Popup Component

Source: https://github.com/zvip-fe/mix-market-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';
```

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

### Enable Popup

Source: https://github.com/zvip-fe/mix-market-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 the `onConfirm` event.

```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 WechatOverlay

Source: https://github.com/zvip-fe/mix-market-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';
```

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

### Import Typography Component

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Typography 文本.md

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

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

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

### Overlay with Embedded Content

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

Illustrates how to embed custom content within the Overlay component. This example displays a simple white box in the center of the overlay when it's visible.

```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>
    </>
  )
}
```

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

### Import Mix-UI Empty Component

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

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

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

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

### Mix-UI Button Second Text

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

Illustrates how to customize the secondary text displayed below the main button text using the `secondText` prop. Examples are provided 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>
  )
}
```

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

### Mix-UI Button Shapes

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

Demonstrates how to create square buttons using the `square` prop in the Mix-UI Button component. It shows examples with primary, pay, and default 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 square type='primary'>
          会员色
        </Button>
        <Button square type='pay'>
          购买红
        </Button>
        <Button square type='default'>
          主题色
        </Button>
      </div>
    </DemoBlock>
  )
}
```

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

### Import DatetimePicker

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

Demonstrates how to import the DatetimePicker component from the 'react-vant' library.

```js
import { DatetimePicker } from 'react-vant';
```

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

### Process Mix-UI Documentation (Basic)

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

Executes the Mix-UI documentation processing tool using pnpm. This command initiates the process of scanning, filtering, and transforming Mix-UI component documentation.

```Bash
pnpm process-mixui
```

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

### 引入 Button 组件

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

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

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

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

### Flex Layout with Gutter

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Flex 布局.md

Illustrates how to apply spacing between Flex items using the 'gutter' prop. It shows examples of applying horizontal spacing and both horizontal and vertical spacing.

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

export default () => {
  return (
    <div className='demo-flex'>
      <Flex gutter={16}>
        <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 gutter={[16, 16]}>
        <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>
    </div>
  )
}
```

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

### Build Project

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

Builds the project using the pnpm build command. This typically compiles the TypeScript code into a distributable format.

```Bash
pnpm build
```

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

### Styling Dialog with CSS

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

Provides an example of how to style Dialog components using CSS, specifically targeting global classes like '.mu-popup' and '.mu-dialog__confirm' for background and text color modifications.

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

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

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

### Import Radio Component

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/Radio 单选框.md

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

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

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

### WechatOverlay with Embedded Content

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

Illustrates how to use WechatOverlay with custom content, including an image URL and a list of tip texts. This example also includes custom styling via a CSS class.

```tsx
import React, { useState } from 'react'
import { Button, WechatOverlay } from '@kfe/mix-ui'
import './demo.less'

export default () => {
  const [show, setShow] = useState(false)
  return (
    <>
      <Button onClick={() => { setShow(true) }}>
        自定义遮罩层的图片/文字样式
      </Button>
      <WechatOverlay
        visible={show}
        onClick={() => { setShow(false) }}
        imageUrl='https://i-1-lanrentuku.52tup.com/2020/9/9/bbe781de-352f-4bf8-9148-b7341f1037bf.png'
        tipContentList={['Step1 第一步第一步第一步', 'Step2 第二步第二步第二步']}
        className='wechat-overlay-demo'
      />
    </>
  )
}
```

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

### Add New Processor (TypeScript)

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

Example of how to create a new document processor by implementing the `IDocProcessor` interface in TypeScript. This demonstrates the structure for extending the tool to support new component libraries.

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

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

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

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

### Customizing Icon Size and Color with mix-ui

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

Illustrates how to customize the size and color of icons imported from the mix-ui library. Examples show setting a 'size' prop to 100 or 120, and a 'color' prop to 'red'.

```tsx
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>
  )
}
```

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

### Import TextArea Component

Source: https://github.com/zvip-fe/mix-market-open-docs/blob/main/docs/mix-ui/TextArea 文本框.md

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

```js
import { TextArea } from '@kfe/mix-ui';
```
Tokens:
Raw