@canlooks/can-ui 0.0.70 → 0.0.72

package/documentation/dist/atom-one-dark.min.css

@@ -1 +0,0 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

package/documentation/dist/components/accordion.md

@@ -1,38 +0,0 @@
-# Accordion 手风琴
-
-## 示例
-
-```tsx
-import {Accordion, Flex} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <Flex width="100%" direction="column" compact>
-            <Accordion title="标题1">
-                内容1
-            </Accordion>
-            <Accordion title="标题2">
-                内容2
-            </Accordion>
-            <Accordion title="标题3">
-                内容3
-            </Accordion>
-        </>
-    )
-}
-```
-
-## Props
-
-| 属性               | 类型                                                  | 默认值        | 说明                               |
-|------------------|-----------------------------------------------------|------------|----------------------------------|
-| size             | 'small' \| 'medium'                      \| 'large' | Theme.size | 组件的尺寸，默认由[Theme](/guide/theme)传递 |
-| title            | ReactNode                                           | -          | 标题                               |
-| prefix           | ReactNode                                           | -          | 标题的前缀                            |
-| suffix           | ReactNode                                           | -          | 标题的后缀                            |
-| expandIcon       | ReactNode \| ((expanded: boolean) => ReactNode)     | -          | 展开与折叠图标                          |
-| defaultExpanded  | boolean                                             | false      | 默认展开状态                           |
-| expanded         | boolean                                             | -          | 受控的展开状态                          |
-| onExpandedChange | (expanded: boolean) => void                         | -          | 展开回调                             |
-| readOnly         | boolean                                             | false      |                                  |
-| disabled         | boolean                                             | false      |                                  |

package/documentation/dist/components/actionSheet.md

@@ -1,49 +0,0 @@
-# ActionSheet 上拉菜单
-
-## 示例
-
-```tsx
-import {ActionSheet} from '@canlooks/can-ui'
-
-export default function Index() {
-    const [open, setOpen] = React.useState(false)
-
-    return (
-        <>
-            <Button onClick={() => setOpen(true)}>打开上拉菜单</Button>
-            <ActionSheet
-                open={open}
-                onClose={() => setOpen(false)}
-                title="标题"
-                actions={[
-                    {label: '选项1', onClick: () => console.log('选项1')},
-                    {label: '选项2', onClick: () => console.log('选项2')}
-                ]}
-            />
-        </>
-    )
-}
-```
-
-## Props
-
-| 属性             | 类型                                      | 默认值   | 说明                  |
-|----------------|-----------------------------------------|-------|---------------------|
-| title          | ReactNode                               | -     | 标题                  |
-| actions        | [MenuItemProps](/components/menuItem#MenuItemProps)[] | -     | 菜单                  |
-| placement      | 'top' \| 'bottom'                       | -     | 弹出菜单的位置             |
-| maskClosable   | boolean                                 | false | 是否可通过点击遮罩层关闭对话框     |
-| escapeClosable | boolean                                 | true  | 是否可通过键盘的【ESC】键关闭对话框 |
-| onAction       | (action) => void                        | -     | 点击选项                |
-| onConfirm      | (e) => void                             | -     | 点击确定                |
-| onCancel       | (e) => void                             | -     | 点击取消                |
-| defaultOpen    | boolean                                 | false | 默认打开状态              |
-| open           | boolean                                 | -     | 受控的打开状态             |
-| onClose        | (reason) => void                        | -     | 关闭回调                |
-| showConfirm    | boolean                                 | false | 是否显示确定选项            |
-| confirmText    | ReactNode                               | '确定'  |                     |
-| confirmProps   | [MenuItemProps](/components/menuItem#MenuItemProps)   | -     |                     |
-| showCancel     | boolean                                 | true  | 是否显示取消选项            |
-| cancelText     | ReactNode                               | '取消'  |                     |
-| cancelProps    | [MenuItemProps](/components/menuItem#MenuItemProps)   | -     |                     |
-| slideProps     | TransitionBaseProps                     | -     | 传递给<Slide/>动画组件的属性  |

package/documentation/dist/components/alert.md

@@ -1,38 +0,0 @@
-# Alert 提示框
-
-## 示例
-
-```tsx
-import {Alert, Flex} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <Flex width="100%" direction="column" gap={12}>
-            <Alert status="info" title="这是一条信息提示" description="这里是消息的内容"/>
-            <Alert status="success" title="这是一条信息提示" description="这里是消息的内容"/>
-            <Alert status="warning" title="这是一条信息提示" description="这里是消息的内容" closable/>
-            <Alert status="error" title="这是一条信息提示" description="这里是消息的内容"/>
-            <Alert variant="filled" title="这是一条信息提示" description="这里是消息的内容"/>
-            <Alert variant="outlined" title="这是一条信息提示" description="这里是消息的内容"/>
-            <Alert loading title="这是一条信息提示" description="这里是消息的内容"/>
-        </Flex>
-    )
-}
-```
-
-## Props
-
-| 属性          | 类型                                                          | 默认值        | 说明       |
-|-------------|-------------------------------------------------------------|------------|----------|
-| variant     | 'filled' \| 'outlined' \| 'standard'                        | 'standard' | 样式       |
-| status      | 'success' \| 'error'                 \| 'warning' \| 'info' | 'error'    | 状态       |
-| color       | string                                                      | -          | 颜色       |
-| showIcon    | boolean                                                     | true       | 是否显示图标   |
-| icon        | ReactNode                                                   | -          | 图标       |
-| title       | ReactNode                                                   | -          | 标题       |
-| description | ReactNode                                                   | -          | 说明       |
-| prefix      | ReactNode                                                   | -          | 前缀内容     |
-| suffix      | ReactNode                                                   | -          | 后缀内容     |
-| closable    | boolean                                                     | false      | 是否渲染关闭按钮 |
-| onClose     | (e) => void                                                 | -          | 关闭回调     |
-| loading     | boolean                                                     | false      | 加载状态     |

package/documentation/dist/components/anchorList.md

@@ -1,36 +0,0 @@
-# AnchorList 锚点列表
-
-## 示例
-
-```tsx
-import {AnchorList} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <AnchorList
-            style={{width: '100%'}}
-            anchors={[
-                {id: 'anchor1', label: '锚点1'},
-                {id: 'anchor2', label: '锚点2', active: true},
-                {id: 'anchor2-1', label: '锚点2-1', level: 1},
-                {id: 'anchor2-2', label: '锚点2-2', level: 1},
-                {id: 'anchor3', label: '锚点3'},
-            ]}
-        />
-    )
-}
-```
-
-**锚点中的`active`状态通常无需手动设置，若滚动元素中有对应id的元素，会根据滚动位置自动计算。**
-
-## Props
-
-| 属性               | 类型                                                                                     | 默认值       | 说明           |
-|------------------|----------------------------------------------------------------------------------------|-----------|--------------|
-| anchors          | {<br/>id: string,<br/> label: string,<br/> level: number,<br/> active: boolean<br/>}[] | -         | 锚点列表         |
-| renderAnchorItem | (item: AnchorItem, active: boolean) => void                                            | -         | 渲染锚点的方法      |
-| indent           | number                                                                                 | 24        | 缩进           |
-| scroller         | Element                                                                                | document  | 滚动元素         |
-| routeMode        | 'history' \| 'location'                                                                | 'history' | 路由跳转模式       |
-| offset           | number                                                                                 | 0         | 目标元素距离顶部的偏移量 |
-| scrollBehavior   | 'auto' \| 'instant'                          \| 'smooth'                               | 'auto'    |              |

package/documentation/dist/components/autocomplete.md

@@ -1,68 +0,0 @@
-# Autocomplete 自动填充
-
-## 基础示例
-
-```tsx
-import {Autocomplete} from '@canlooks/can-ui'
-
-export default function Index() {
-    const options = [
-        {label: 'Apple', value: 'apple'},
-        {label: 'Banana', value: 'banana'},
-        {label: 'Cherry', value: 'cherry'}
-    ]
-
-    return (
-        <Autocomplete
-            style={{width: 300}}
-            options={options}
-        />
-    )
-}
-```
-
-## 动态数据
-
-```tsx
-import {Autocomplete} from '@canlooks/can-ui'
-
-export default function Index() {
-    const [options, setOptions] = React.useState([])
-
-    const loadOptions = (inputValue: string) => {
-        return new Promise((resolve) => {
-            inputValue
-                ? setTimeout(() => {
-                    resolve([
-                        {label: 'Apple', value: 'apple'},
-                        {label: 'Banana', value: 'banana'},
-                        {label: 'Cherry', value: 'cherry'}
-                    ])
-                }, 1000)
-                : resolve([])
-        })
-    }
-
-    return (
-        <Autocomplete
-            style={{width: 300}}
-            loadOptions={loadOptions}
-        />
-    )
-}
-```
-
-## Props
-
-`<Autocomplete/>`组件继承了`<Input/>`组件的所有属性外，还有如下属性：
-
-| 属性          | 类型                                                    | 默认值     | 说明               |
-|-------------|-------------------------------------------------------|---------|------------------|
-| options     | [MenuItemProps](/components/menuItem#MenuItemProps)[] | -       | 选项               |
-| loadOptions | (inputValue) => options \| Promise\<options>          | -       | 动态加载的选项          |
-| primaryKey  | string \| number                                      | 'value' | 指定选项中的主键名        |
-| labelKey    | string \| number                                      | 'label' | 指定选项中用于当作label的键 |
-| onSelect    | (selectedValue, option) => void                       | -       | 选中回调             |
-| renderInput | (inputProps) => ReactElement                          | -       | 自定义渲染输入框         |
-| popperProps | [PopperProps](/components/popper)                     | -       | 传递给`Popper`组件的属性 |
-| popperRef   | [PopperRef](/components/popper)                       | -       |                  |

package/documentation/dist/components/avatar.md

@@ -1,79 +0,0 @@
-# Avatar 头像
-
-## Avatar
-
-```tsx
-import {Avatar, Flex, Icon} from '@canlooks/can-ui'
-import {faUser} from '@fortawesome/free-solid-svg-icons'
-
-export default function Index() {
-    const src = 'https://avatars.githubusercontent.com/u/47269261?v=4'
-
-    return (
-        <Flex
-            width="100%"
-            gap={12}
-            alignItems="center"
-            justifyContent="center"
-        >
-            <Avatar size="small" src=""/>
-            <Avatar src={src}/>
-            <Avatar size="large" src={src}/>
-            <Avatar>
-                <Icon icon={faUser}/>
-            </Avatar>
-            <Avatar shape="square">
-                <Icon icon={faUser}/>
-            </Avatar>
-            <Avatar color="primary">
-                <Icon icon={faUser}/>
-            </Avatar>
-        </Flex>
-    )
-}
-```
-
-### Avatar Props
-
-| 属性       | 类型                     | 默认值        | 说明                     |
-|----------|------------------------|------------|------------------------|
-| color    | Color                  | -          | 颜色                     |
-| size     | string \| number       | 'medium'   | 尺寸                     |
-| shape    | 'circular' \| 'square' | 'circular' | 形状                     |
-| src      | string                 | -          | 若不指定`src`则渲染`children` |
-| children | ReactNode              | -          | 若不指定`children`则使用`src` |
-| imgProps | ImgHTMLAttributes      | -          | 传递给`<img/>`标签的属性       |
-
-## AvatarGroup
-
-```tsx
-import {AvatarGroup, Flex} from '@canlooks/can-ui'
-import {faUser} from '@fortawesome/free-solid-svg-icons'
-
-export default function Index() {
-    const src = 'https://avatars.githubusercontent.com/u/47269261?v=4'
-
-    return (
-        <AvatarGroup
-            items={[
-                {src},
-                {children: <Icon icon={faUser}/>},
-                {src},
-                {children: <Icon icon={faUser}/>},
-                {src},
-                {children: <Icon icon={faUser}/>}
-            ]}
-        />
-    )
-}
-```
-
-### AvatarGroup Props
-
-| 属性            | 类型                     | 默认值  | 说明                         |
-|---------------|------------------------|------|----------------------------|
-| items         | AvatarProps[]          | -    |                            |
-| hoverable     | boolean                | true | 是否可以hover交互                |
-| max           | number                 | 5    | 最大显示数量                     |
-| total         | number                 | -    | 总数，若不指定则取items或children的长度 |
-| renderSurplus | (surplus) => ReactNode | -    | 超过最大限制时，渲染的额外内容            |

package/documentation/dist/components/badge.md

@@ -1,33 +0,0 @@
-# Badge 角标
-
-## 示例
-
-```tsx
-import {Badge, Flex} from '@canlooks/can-ui'
-import {faUser} from '@fortawesome/free-solid-svg-icons'
-
-export default function Index() {
-    return (
-        <Flex alignItems="center" justifyContent="center" gap={24}>
-            <Badge count={100}>
-                <Avatar>
-                    <Icon icon={faUser}/>
-                </Avatar>
-            </Badge>
-        </Flex>
-    )
-}
-```
-
-## Props
-
-| 属性        | 类型                  | 默认值        | 说明            |
-|-----------|---------------------|------------|---------------|
-| count     | number              | -          | 角标数值          |
-| color     | string              | 'error'    | 颜色            |
-| placement | string              | 'topRight' | 位置            |
-| variant   | 'dot' \| 'standard' | 'standard' | 角标样式          |
-| max       | number              | 99         | 最大数值，超过会显示`+` |
-| showZero  | boolean             | false      | 数量为0时是否显示角标   |
-| offsetX   | number              | 0          | 位置偏移量         |
-| offsetY   | number              | 0          | 位置偏移量         |

package/documentation/dist/components/bottomNavigation.md

@@ -1,39 +0,0 @@
-# BottomNavigation 底部导航
-
-## 示例
-
-```tsx
-import {BottomNavigation, Icon} from '@canlooks/can-ui'
-import {faUser} from '@fortawesome/free-solid-svg-icons'
-
-export default function Index() {
-    return (
-        <div style={{
-            width: '100%',
-            height: 56,
-            position: 'relative'
-        }}>
-            <BottomNavigation
-                items={[
-                    {value: 'index', label: '首页'},
-                    {value: 'about', label: '关于'},
-                    {value: 'me', label: '我的', icon: <Icon icon={faUser}/>},
-                ]}
-            />
-        </div>
-    )
-}
-```
-
-## Props
-
-| 属性                | 类型                                                                                                                          | 默认值                                   | 说明              |
-|-------------------|-----------------------------------------------------------------------------------------------------------------------------|---------------------------------------|-----------------|
-| items             | {<br/>value: string,<br/>icon: ReactNode,<br/>label: ReactNode,<br/>showLabelInactive: boolean,<br/>active: boolean<br/>}[] | -                                     |                 |
-| showLabelInactive | boolean                                                                                                                     | items数量小于等于3时默认为`true`<br/>否则为`false` | 未激活状态下是否显示label |
-| primaryKey        | string \| number                                                                                                            | 'value'                               | 选项的主键           |
-| labelKey          | string \| number                                                                                                            | 'label'                               | 作为`label`的键     |
-| defaultValue      | string \| number                                                                                                            | -                                     | 默认值             |
-| value             | string \| number                                                                                                            | -                                     | 受控的值            |
-| onChange          | (value) => void                                                                                                             | -                                     | 值变化的回调          |
-

package/documentation/dist/components/breadcrumb.md

@@ -1,28 +0,0 @@
-# Breadcrumb 面包屑
-
-## 示例
-
-```tsx
-import {Breadcrumb, Icon} from '@canlooks/can-ui'
-import {faUser} from '@fortawesome/free-solid-svg-icons'
-
-export default function Index() {
-    return (
-        <Breadcrumb
-            items={[
-                {label: 'Home'},
-                {label: 'Components'},
-                {label: 'Me', icon: <Icon icon={faUser}/>}
-            ]}
-        />
-    )
-}
-```
-
-## Props
-
-| 属性        | 类型                                  | 默认值   | 说明  |
-|-----------|-------------------------------------|-------|-----|
-| items     | [ButtonProps](/components/button#Props)[] | -     |     |
-| separator | ReactNode                           | '/'   | 分隔符 |
-| readOnly  | boolean                             | false |     |

package/documentation/dist/components/bubbleConfirm.md

@@ -1,34 +0,0 @@
-# BubbleConfirm 气泡确认框
-
-## 示例
-
-```tsx
-import {BubbleConfirm, Button} from '@canlooks/can-ui'
-
-export default function Index() {
-    const onConfirm = async () => {
-        await new Promise(resolve => setTimeout(resolve, 1000))
-    }
-
-    return (
-        <BubbleConfirm
-            title="这里是标题"
-            content="这里是气泡确认框的内容"
-            onConfirm={onConfirm}
-        >
-            <Button>确认</Button>
-        </BubbleConfirm>
-    )
-}
-```
-
-## Props
-
-| 属性        | 类型          | 默认值   | 说明                                |
-|-----------|-------------|-------|-----------------------------------|
-| icon      | ReactNode   | -     |                                   |
-| title     | ReactNode   | -     |                                   |
-| footer    | ReactNode   | -     | 自定以渲染footer，若不指定则使用默认的`取消`与`确定`按钮 |
-| showArrow | boolean     | true  | 是否显示气泡的箭头                         |
-| loading   | boolean     | false |                                   |
-| onConfirm | (e) => void | -     | 确认回调                              |

package/documentation/dist/components/button.md

@@ -1,62 +0,0 @@
-# Button 按钮
-
-## 示例
-
-```tsx
-import {Button, Flex} from '@canlooks/can-ui'
-
-export default function Index() {
-    const rowProps = {
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 12
-    }
-
-    return (
-        <Flex width="100%" direction="column" gap={12}>
-            <Flex {...rowProps}>
-                <Button>按钮</Button>
-                <Button variant="flatted">按钮</Button>
-                <Button variant="outlined">按钮</Button>
-                <Button variant="dashed">按钮</Button>
-                <Button variant="ghost">按钮</Button>
-                <Button variant="text">按钮</Button>
-                <Button variant="plain">按钮</Button>
-            </Flex>
-            <Flex {...rowProps}>
-                <Button color="success">按钮</Button>
-                <Button color="warning">按钮</Button>
-                <Button color="error">按钮</Button>
-                <Button color="info">按钮</Button>
-                <Button loading>按钮</Button>
-            </Flex>
-            <Flex {...rowProps}>
-                <Button size="small">按钮</Button>
-                <Button size="large">按钮</Button>
-            </Flex>
-            <Flex {...rowProps}>
-                <Button shape="circular">钮</Button>
-                <Button shape="rounded">按钮</Button>
-            </Flex>
-        </Flex>
-    )
-}
-```
-
-## Props
-
-`<Button/>`组件继承了`<button/>`元素的所有属性，除此之外还有以下属性：
-
-| 属性          | 类型                                                                                                        | 默认值          | 说明            |
-|-------------|-----------------------------------------------------------------------------------------------------------|--------------|---------------|
-| color       | string                                                                                                    | -            |               |
-| shape       | 'square' \| 'circular' \| 'rounded'                                                                       | 'square'     | 形状            |
-| size        | 'small' \| 'medium' \| 'large'                                                                            | 'medium'     | 尺寸            |
-| variant     | 'flatted'                           \| 'filled' \| 'outlined' \| 'dashed' \| 'ghost' \| 'text' \| 'plain' | 'filled'     | 样式            |
-| orientation | 'horizontal' \| 'vertical'                                                                                | 'horizontal' | 前后缀的排列方向      |
-| prefix      | ReactNode                                                                                                 | -            |               |
-| suffix      | ReactNode                                                                                                 | -            |               |
-| loading     | boolean                                                                                                   | false        |               |
-| readOnly    | boolean                                                                                                   | false        |               |
-| icon        | ReactNode                                                                                                 | -            | prefix属性的别名   |
-| label       | ReactNode                                                                                                 | -            | children属性的别名 |

package/documentation/dist/components/card.md

@@ -1,30 +0,0 @@
-# Card 卡片
-
-## 示例
-
-```tsx
-import {Card, Flex} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <Flex gap={12} wrap="wrap">
-            <Card>Card</Card>
-            <Card bordered>Card</Card>
-            <Card elevation={1}>Card</Card>
-            <Card elevation={2}>Card</Card>
-            <Card elevation={3}>Card</Card>
-            <Card elevation={4}>Card</Card>
-            <Card elevation={5}>Card</Card>
-        </Flex>
-    )
-}
-```
-
-## Props
-
-| 属性           | 类型      | 默认值                                | 说明             |
-|--------------|---------|------------------------------------|----------------|
-| flexable     | boolean | false                              | 卡片内容是否使用flex布局 |
-| bordered     | boolean | false                              | 是否渲染边框         |
-| elevation    | number  | 0                                  | 支持0-5          |
-| borderRadius | number  | [Theme.borderRadius](/guide/theme) | 圆角             |

package/documentation/dist/components/cascade.md

@@ -1,48 +0,0 @@
-# Cascade 级联选择器
-
-## 示例
-
-```tsx
-import {Cascade} from '@canlooks/can-ui'
-
-export default function Index() {
-    const options = [
-        {
-            value: 'zhejiang',
-            label: 'Zhejiang',
-            children: [
-                {
-                    value: 'hangzhou',
-                    label: 'Hangzhou',
-                    children: [
-                        {
-                            value: 'xihu',
-                            label: 'West Lake',
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            value: 'jiangsu',
-            label: 'Jiangsu',
-            children: [
-                {
-                    value: 'nanjing',
-                    label: 'Nanjing',
-                    children: [
-                        {
-                            value: 'zhonghuamen',
-                            label: 'Zhong Hua Men',
-                        },
-                    ],
-                },
-            ],
-        },
-    ]
-
-    return (
-        <Cascade options={options} style={{width: 200}}/>
-    )
-}
-```

package/documentation/dist/components/checkbox.md

@@ -1,36 +0,0 @@
-# Checkbox 选择框
-
-## 示例
-
-```tsx
-import {Checkbox} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <Checkbox label="选择"/>
-    )
-}
-```
-
-### CheckboxGroup
-
-```tsx
-import {CheckboxGroup} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <CheckboxGroup
-            items={[
-                {
-                    label: '选项1',
-                    value: 1
-                },
-                {
-                    label: '选项2',
-                    value: 2
-                }
-            ]}
-        />
-    )
-}
-```

package/documentation/dist/components/colorPicker.md

@@ -1,27 +0,0 @@
-# ColorPicker 颜色选择
-
-## 示例
-
-```tsx
-import {ColorPicker} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <ColorPicker/>
-    )
-}
-```
-
-## Props
-
-颜色选择器的值使用`Color`对象，详情请查看[官方文档](https://github.com/Qix-/color)。
-
-| 属性           | 类型                             | 默认值      | 说明    |
-|--------------|--------------------------------|----------|-------|
-| size         | 'small' \| 'medium' \| 'large' | 'medium' |       |
-| shape        | 'square' \| 'circular'         | 'square' |       |
-| label        | ReactNode                      | '自定义'    |       |
-| presets      | Color[]                        | -        | 预设的颜色 |
-| defaultValue | Color                          | -        | 默认的颜色 |
-| value        | Color                          | -        | 受控的颜色 |
-| onChange     | (Color) => void                | -        | 变化回调  |