@king-design/intact 2.0.0-beta.1 → 2.0.0

package/components/affix/demos/basic.md

@@ -3,7 +3,8 @@ title: 基础用法
 order: 0
 ---
 
-通过`top`可以指定元素固定在顶部的位置，通过`bottom`可以指定元素固定在底部的位置，都不指定时，默认固定在最顶部
+通过`top`可以指定元素固定在顶部的位置，通过`bottom`可以指定元素固定在底部的位置，都不指定时，
+默认固定在最顶部，即`top = 0`
 
 > 可以通过缩放浏览器查看效果
 

package/components/affix/demos/custom.md

@@ -6,17 +6,17 @@ order: 1
 通过`shouldFix`可以自定义元素固定的规则，此时设置的`top` `bottom`属性，仅仅用来设置固定的位置，并不用于固定
 规则的判断，当`shouldFix`返回`true`时，元素就会固定，否则不固定。本例中：只要滚动超过`100px`就会固定
 
-通过`exclude`可以在内部判断元素应该固定时，排除某些情况，让它不固定。本例中：当当前示例容器超出视野（viewport）
+通过`exclude`可以在判断元素应该固定时，排除某些情况，让它不固定。本例中：当前示例容器超出视野（viewport）
 之外时，不启用固定
 
 ```vdt
 import {Affix, Button} from 'kpc';
 
 <div ref="node">
-    <Affix top={150} shouldFix={this._shouldFix}>
+    <Affix top={150} shouldFix={this.shouldFix}>
         <Button type="primary">fix at 150px from the top when scroll top 100px</Button>
     </Affix>
-    <Affix bottom={this.get('bottom')} exclude={this._exclude}>
+    <Affix bottom={this.get('bottom')} exclude={this.exclude}>
         <Button type="primary">fix at the bottom only when this demo is in viewport</Button>
     </Affix>
 </div>
@@ -44,14 +44,14 @@ export default class extends Component<Props> {
     }
 
     @bind
-    _shouldFix() {
+    shouldFix() {
         // when scroll top greater than or equal to 100
         // fix it at 150px from top
         return window.pageYOffset >= 100;
     }
 
     @bind
-    _exclude() {
+    exclude() {
         // when this demo is not in the viewport
         // don't fix it
         const {top} = (this.refs.node as HTMLElement).getBoundingClientRect();

package/components/affix/index.md

@@ -9,8 +9,8 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| top | 指定元素固定距离顶部的位置 | `Number` | `undefined` |
-| bottom | 指定元素固定距离底部的位置 | `Number` | `undefined` |
+| top | 指定元素固定距离顶部的位置 | `number` | `undefined` |
+| bottom | 指定元素固定距离底部的位置 | `number` | `undefined` |
 | shouldFix | 自定义元素固定规则 | `Function` | `undefined` |
 | exclude | 排除某些固定的情况 | `Function` | `undefined` |
 

package/components/affix/styles.ts

@@ -7,7 +7,7 @@ const defaults = {
     zIndex: 9
 };
 
-let affix: any;
+let affix: typeof defaults;
 setDefault(() => {
     affix = deepDefaults(theme, {affix: defaults}).affix;
 });

package/components/badge/demos/text.md

@@ -3,7 +3,7 @@ title: 展示文字
 order: 0
 ---
 
-通过`text`属性，展示文案。如果`text`为`Number`类型，还可以指定`max`来规定最大展示数字，
+通过`text`属性，展示文案。如果`text`为`number`类型，还可以指定`max`来规定最大展示数字，
 超过该数字，后面添加加号`+`
 
 ```vdt

package/components/badge/index.md

@@ -9,6 +9,6 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| text | 要展示的文案，不指定该属性，则展示红点 | `String` | `Number` | `undefined` |
-| max | 如果`text`属性`Number`类型，可以通过该属性指定最大数字 | `Number` | `undefined` |
-| disabled | 禁用徽标展示 | `Boolean` | `false` |
+| text | 要展示的文案，不指定该属性，则展示红点 | `string` | `number` | `undefined` |
+| max | 如果`text`属性`number`类型，可以通过该属性指定最大数字 | `number` | `undefined` |
+| disabled | 禁用徽标展示 | `boolean` | `false` |

package/components/badge/styles.ts

@@ -14,7 +14,7 @@ const defaults = {
     textColor: '#fff',
 };
 
-let badge: any;
+let badge: typeof defaults;
 setDefault(() => {
     badge = deepDefaults(theme, {badge: defaults}).badge;
 });

package/components/breadcrumb/demos/basic.md

@@ -3,7 +3,7 @@ title: 基础用法
 order: 0
 ---
 
-通过添加`to`属性，来展示超链接
+通过添加`to`属性，来设置超链接
 
 > `to`属性支持`vue-router`或者`react-router` `push`方法参数用法
 

package/components/breadcrumb/index.md

@@ -11,14 +11,13 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| separator | 指定分隔符 | `String` | `undefined` |
+| separator | 指定分隔符 | `string` | `undefined` |
 
 ## BreadcrumbItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| to | 指定超链接地址 | `String` | `undefined` |
-| separator | 指定分隔符，会覆盖`Breadcrumb`中的定义 | `String` | `">"` |
+| to | 指定超链接地址 | `string` | `object` | `undefined` |
 
 # 扩展点
 
@@ -26,10 +25,4 @@ sidebar: doc
 
 | 名称 | 说明 |
 | --- | --- |
-| separator | 扩展分隔符 |
-
-## BreadcrumbItem
-
-| 名称 | 说明 |
-| --- | --- |
-| separator | 扩展分隔符，优先级高于`Breadcrumb`中的定义 |
+| separator | 指定分隔符 |

package/components/breadcrumb/item.ts

@@ -1,15 +1,14 @@
 import {Component, TypeDefs, VNode} from 'intact';
 import {bind} from '../utils';
 import template from './item.vdt';
-import {isExternalLink} from '../utils';
-import {useRouter} from '../../hooks/useRouter';
+import {useRouter, navigate} from '../../hooks/useRouter';
 
 export interface BreadcrumbItemProps {
-    to?: string,
+    to?: string | object,
 }
 
 const typeDefs: Required<TypeDefs<BreadcrumbItemProps>> = {
-    to: String,
+    to: [String, Object],
 };
 
 export class BreadcrumbItem extends Component<BreadcrumbItemProps> {
@@ -20,15 +19,6 @@ export class BreadcrumbItem extends Component<BreadcrumbItemProps> {
 
     @bind
     private onClick(): void  {
-        const to = this.get('to');
-
-        if (to) {
-            const router = this.router.value;
-            if (router && !isExternalLink(to)) {
-                router.push(to!);
-            } else {
-                window.location.href = to!;
-            }
-        }
+        navigate(this.router.value, this.get('to'));
     }
 }

package/components/breadcrumb/styles.ts

@@ -12,7 +12,7 @@ const defaults = {
     activeColor: `#262626`,
 };
 
-let breadcrumb: any;
+let breadcrumb: typeof defaults;
 setDefault(() => {
     breadcrumb = deepDefaults(theme, {breadcrumb: defaults}).breadcrumb;
 });
@@ -20,8 +20,9 @@ setDefault(() => {
 export default function makeStyles() {
     return css`
         font-size: ${breadcrumb.fontSize};
+        display: flex;
+        align-items: center;
         .k-breadcrumb-item {
-            display: inline-block;
             &:last-of-type .k-breadcrumb-link {
                 font-weight: ${breadcrumb.activeFontWeight};
                 color: ${breadcrumb.activeColor};
@@ -31,9 +32,12 @@ export default function makeStyles() {
         .k-breadcrumb-link a {
             color: ${breadcrumb.color};
         }
-        a.k-breadcrumb-link:hover,
-        .k-breadcrumb-link a:hover {
-            color: ${breadcrumb.hoverColor};
+        a.k-breadcrumb-link,
+        .k-breadcrumb-link a {
+            cursor: pointer;
+            &:hover {
+                color: ${breadcrumb.hoverColor};
+            }
         }
         .k-breadcrumb-separator {
             margin: 0 ${breadcrumb.gap};

package/components/button/demos/group.md

@@ -36,14 +36,14 @@ import {Button, ButtonGroup} from 'kpc';
         <Button type="primary">重启</Button>
     </ButtonGroup>
     <br /><br />
-    <p>radio按钮组</p>
+    <p>单选按钮组</p>
     <ButtonGroup checkType="radio" v-model="city">
         <Button value="beijing">北京</Button>
         <Button value="shanghai" ref="__radioShanghai">上海</Button>
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
-    <p>checkbox按钮组</p>
+    <p>多选按钮组</p>
     <ButtonGroup checkType="checkbox" v-model="cities">
         <Button value="beijing" size="small">北京</Button>
         <Button value="shanghai" size="small" ref="__checkboxShanghai">上海</Button>

package/components/button/demos/icon.md

@@ -13,6 +13,7 @@ import {Button, Icon} from 'kpc';
 <div>
     <Button icon><Icon class="ion-ios-search" /></Button>
     <Button icon circle><Icon class="ion-ios-search" /></Button>
+    <Button icon circle type="none"><Icon class="ion-ios-search" /></Button>
     <Button type="danger" size="large" icon circle><Icon class="ion-ios-search" size="large" /></Button>
     <Button type="primary"><Icon class="ion-ios-search" size="small" />搜索</Button>
     <Button circle type='primary'><Icon class="ion-ios-search" size="small" />搜索</Button>

package/components/button/demos/loading.md

@@ -5,7 +5,7 @@ order: 2
 
 添加`loading`属性，可以将按钮设为加载状态，此时按钮不可点。
 
-> 请给图标元素添加`k-icon`类名，或者使用`Icon`组件，用于定位图标元素，
+> 请给图标元素添加`icon`类名，或者使用`Icon`组件，用于定位图标元素，
 > 以便按钮变为`loading`状态时能够将它替换为loading图标
 
 ```vdt

package/components/button/demos/tagName.md

@@ -4,7 +4,6 @@ order: 5
 ---
 
 `Button`默认渲染成`button`元素，通过`tagName`，我们可以渲染成任意元素或组件。
-此时，我们可以通过`tagProps`属性，给指定的`tagName`传递与`Button`属性名相冲突的属性。
 
 > 当给`Button`指定`href`属性时，则它会强制渲染成`a`标签
 

package/components/button/index.md

@@ -11,27 +11,27 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"default"` |
+| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"`| `"default"` |
 | size | 按钮尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
-| icon | 是否为图标按钮（宽高相等）| `Boolean` | `false` |
-| circle | 是否为圆角按钮 | `Boolean` | `false` |
-| loading | 是否为正在加载中的按钮 | `Boolean` | `false` |
-| disabled | 是否禁用状态 | `Boolean` | `false` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| htmlType | 按钮`<button>`元素的`type` | `String` | `"button"` |
-| tagName | 按钮渲染后的实际html元素，例如我们可以传入`"a"`来渲染成超链接 | `String` | `button` |
-| tagProps | 当指定`tagName`时，该属性将传给`tagName`指定的元素 | `Object` | `undefind` |
-| value | 对于`radio`类型的按钮组，我们可以给每个按钮指定一个选中时的值 | `*` | `undefined` |
-| name | 对于`radio`类型的按钮组，我们给`radio`指定`name`属性 | `String` | `undefined` |
-| ghost | 展示透明背景的按钮 | `Boolean` | `false` |
+| icon | 是否为图标按钮（宽高相等）| `boolean` | `false` |
+| circle | 是否为圆角按钮 | `boolean` | `false` |
+| loading | 是否为正在加载中的按钮 | `boolean` | `false` |
+| disabled | 是否禁用状态 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| htmlType | 按钮`<button>`元素的`type` | `string` | `"button"` |
+| tagName | 按钮渲染后的实际html元素，例如我们可以传入`"a"`来渲染成超链接 | `string` | `button` |
+| value | 对于`radio/checkbox`类型的按钮组，我们可以给每个按钮指定一个选中时的值 | `*` | `undefined` |
+| name | 对于`radio/checkbox`类型的按钮组，我们给`input`指定`name`属性 | `string` | `undefined` |
+| ghost | 展示透明背景的按钮 | `boolean` | `false` |
 
 ## ButtonGroup
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| vertical | 是否垂直排列按钮组 | `Boolean` | `false` |
+| vertical | 是否垂直排列按钮组 | `boolean` | `false` |
 | checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` &#124; `"checkbox"` &#124; `"none"` | `"none"` |
 | value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
+| fluid | 是否宽度100% | `boolean` | `false` |
 
 # 方法
 

package/components/button/index.vdt

@@ -2,6 +2,8 @@ import {getRestProps} from '../utils';
 import {Icon} from '../icon';
 import {makeButtonStyles} from './styles';
 import {DynamicButton} from './dynamicButton';
+import {Wave} from '../wave';
+import {button as theme} from './styles';
 
 let {
     type, className, size, icon, circle, ref, key, tabindex,
@@ -61,28 +63,35 @@ const loadingIcon = (
 const buttonGroup = this.buttonGroup;
 const checkType = buttonGroup ? buttonGroup.get('checkType') : 'none';
 const isCheckType = checkType !== 'none';
+const typeStyles = theme[type];
+const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
 
-<DynamicButton 
-    class={classNameObj}
-    tagName={tagName}
-    {...getRestProps(this)}
-    ref={this.elementRef}
-    tabindex={disabled || loading ? '-1' : tabindex}
-    ev-click={this.onClick}
-    ev-mouseup={this.onMouseUp}
-    htmlType={htmlType}
-    name={isCheckType ? null : name}
+<Wave disabled={loading || disabled || type === 'none' || type === 'link'}
+    inset="-2px"
+    color={waveColor}
 >
-    {loading ? 
-        iconSide === 'right' ?
-            [children, loadingIcon] :
-            [loadingIcon, children] :
-        children 
-    }
-    <input type={checkType} v-if={isCheckType}
-        class="k-button-input"
-        name={name} 
-        checked={checked}
-        tabindex="-1"
-    />
-</DynamicButton>
+    <DynamicButton 
+        class={classNameObj}
+        tagName={tagName}
+        {...getRestProps(this)}
+        ref={this.elementRef}
+        tabindex={disabled || loading ? '-1' : tabindex}
+        ev-click={this.onClick}
+        ev-mouseup={this.onMouseUp}
+        htmlType={htmlType}
+        name={isCheckType ? null : name}
+    >
+        {loading ? 
+            iconSide === 'right' ?
+                [children, loadingIcon] :
+                [loadingIcon, children] :
+            children 
+        }
+        <input type={checkType} v-if={isCheckType}
+            class="k-button-input"
+            name={name} 
+            checked={checked}
+            tabindex="-1"
+        />
+    </DynamicButton>
+</Wave>

package/components/button/styles.ts

@@ -1,6 +1,6 @@
 import {css, cx} from '@emotion/css';
 import { ButtonProps, Button } from './index';
-import {theme, ThemeValue, setDefault} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette, getLeft, darken}  from '../../styles/utils';
 import '../../styles/global';
 
@@ -11,17 +11,17 @@ type Types = ValueOf<typeof types>
 type Sizes = ValueOf<typeof sizes>
 
 type TypeStyles = {
-    color: ThemeValue<string>
-    bgColor: ThemeValue<string>
-    borderColor: ThemeValue<string>
-    hoverBorderColor: ThemeValue<string>
-    ghostColor: ThemeValue<string>
+    color: string
+    bgColor: string
+    borderColor: string
+    hoverBorderColor: string
+    ghostColor: string
 }
 
 type SizeStyles = {
-    fontSize: ThemeValue<string>
-    height: ThemeValue<string>
-    padding: ThemeValue<string>
+    fontSize: string
+    height: string
+    padding: string
 }
 
 export const types = ['primary', 'warning', 'danger', 'active', 'success'] as const;
@@ -103,6 +103,7 @@ const btnSizeStyles = sizes.reduce((memo, size) => {
 
 const defaults = deepDefaults(
     {
+        get transition() { return theme.transition.middle },
         active: btnActiveStyles,
         secondary: {
             get color() { return theme.color.primary },
@@ -113,6 +114,11 @@ const defaults = deepDefaults(
         link: {
             get color() { return theme.color.link },
             get hoverColor() { return theme.color.linkHover },
+            get hoverBgColor() { return theme.color.hoverBg },
+        },
+
+        none: {
+            get hoverBgColor() { return theme.color.bg },
         },
 
         // ButtonGroup
@@ -136,7 +142,7 @@ const defaults = deepDefaults(
     btnSizeStyles,
 );
 
-let button: any;
+let button: typeof defaults;
 setDefault(() => {
     button = deepDefaults(theme, {button: defaults}).button;
 });
@@ -163,7 +169,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             border: 1px solid ${button.borderColor};
             font-size: ${button.fontSize};
             white-space: nowrap;
-            transition: all ${theme.transition};
+            transition: all ${button.transition};
             line-height: ${button.lineHeight};
             &:hover,
             &:focus {
@@ -221,6 +227,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 color: ${link.color};
                 &:hover {
                     color: ${link.hoverColor};
+                    background: ${link.hoverBgColor};
                 }
             }
 
@@ -236,14 +243,17 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
 
             &.k-none,
             &.k-link {
+                background: transparent;
                 &, &:hover {
                     border: none;
-                    background: transparent;
                 }
                 &.k-active {
                     color: ${theme.color.primary};
                 }
             }
+            &.k-none:hover {
+                background: ${button.none.hoverBgColor};
+            }
 
             ${sizes.map(size => {
                 const styles = button[size];

package/components/card/demos/basic.md

@@ -11,12 +11,12 @@ import {Card} from 'kpc';
 
 <div>
     <Card title="用户信息">
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
     <Card title="用户信息" type="border">
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
 </div>
 ```

package/components/card/demos/extra.md

@@ -6,22 +6,28 @@ order: 2
 使用`extra`扩展点，可以在头部右侧追加内容
 
 ```vdt
-import {Card} from 'kpc';
+import {Card, Tabs, Tab} from 'kpc';
 
 <div>
     <Card title="用户信息">
         <b:extra>
-            数据继承
+            <Tabs value="1" size="small">
+                <Tab value="1">数据集成</Tab>
+                <Tab value="2">数据采集</Tab>
+            </Tabs>
         </b:extra>
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
     <Card title="用户信息" type="border">
         <b:extra>
-            数据采集
+            <Tabs value="1" size="small">
+                <Tab value="1">数据集成</Tab>
+                <Tab value="2">数据采集</Tab>
+            </Tabs>
         </b:extra>
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
 </div>
 ```

package/components/card/demos/noHeader.md

@@ -10,12 +10,12 @@ import {Card} from 'kpc';
 
 <div>
     <Card>
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
     <Card type="border">
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
 </div>
 ```

package/components/card/index.md

@@ -11,15 +11,15 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 卡片标题 | `String` | `VNode` | `undefined` | 
+| title | 卡片标题 | `string` | `VNode` | `undefined` | 
 | type | 卡片类型 | `"shadow"` | `"border"` | `"none"` | `"shadow"` |
 
 ## CardColumn
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| width | 列宽，必须带单位 | `String` | `undefined` |
-| center | 该列内容是否居中 | `Boolean` | `false` |
+| width | 列宽，必须带单位 | `string` | `undefined` |
+| center | 该列内容是否居中 | `boolean` | `false` |
 
 # 扩展点
 

package/components/card/styles.ts

@@ -6,13 +6,13 @@ import '../../styles/global';
 const defaults = {
     border: '1px solid #e5e5e5',
     padding: '16px',
-    boxShadow: '0 0 20px 0 rgba(0, 0, 0, .06)',
+    boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
     headerHeight: '48px',
     headerFontSize: '14px',
     bgColor: '#fff',
 };
 
-let card: any;
+let card: typeof defaults;
 setDefault(() => {
     card = deepDefaults(theme, {card: defaults}).card;
 });

package/components/carousel/index.md

@@ -11,14 +11,14 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前展示的内容块对应的的值 | `String` | `"$0"` |
-| autoplay | 是否自动切换，如果指定数值，则表示切换的时间间隔（ms），为`0`则不自动切换 | `Boolean` | `Number` | `false` |
+| value | 当前展示的内容块对应的的值 | `string` | `"$0"` |
+| autoplay | 是否自动切换，如果指定数值，则表示切换的时间间隔（ms），为`0`则不自动切换 | `boolean` | `number` | `false` |
 | arrow | 左右快速切换箭头展示的方式，`hover`：鼠标移入展示；`always`：一直展示；`never`：不展示 | `"hover"` | `"always"` | `"never"` | `"hover"` |
 | effect | 指定切换动画 | `"slide"` | `"fade"` | `"slide"` |
-| clonedAmount | 指定前后克隆的内容块数量 | `Number` | `1` |
+| clonedAmount | 指定前后克隆的内容块数量 | `number` | `1` |
 
 ## CarouselItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 定义内容块选中后的值 | `String` | `"${index}"` |
+| value | 定义内容块选中后的值 | `string` | `"${index}"` |

package/components/carousel/styles.ts

@@ -4,7 +4,7 @@ import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
-    transition: `.5s ease`,
+    get transition() { return theme.transition.large },
     height: `300px`,
 
     indicator: {
@@ -34,7 +34,7 @@ const defaults = {
     }
 };
 
-let carousel: any;
+let carousel: typeof defaults;
 setDefault(() => {
     carousel = deepDefaults(theme, {carousel: defaults}).carousel;
 });

package/components/carousel/useSlide.ts

@@ -70,9 +70,10 @@ export function useSlide(
             if (oldIndex === length - 1 && newIndex === 0) {
                 // the current item is the last one and the next item is the first one,
                 // we set translate to the first cloned item immediately without transition
-                await setTranslate(itemsWithCloned[0], false);
+                await setTranslate(itemsWithCloned[(itemsWithCloned.length - length) / 2 - 1], false);
             } else if (oldIndex === 0 && newIndex === length - 1) {
-                await setTranslate(itemsWithCloned[itemsWithCloned.length - 1], false);
+                const lengthWithCloned = itemsWithCloned.length;
+                await setTranslate(itemsWithCloned[lengthWithCloned - (lengthWithCloned - length) / 2], false);
             }
         }
 

package/components/cascader/demos/loadData.md

@@ -4,7 +4,7 @@ order: 7
 ---
 
 如果数据项中的`children`属性为空数组`[]`，则代表该项子数据为动态加载的，此时可以指定`loadData`
-属性来定义动态加载的逻辑，组件会将当前展开项的数据当做参数`item`传入，你只需要更新`item`的`children`
+属性来定义动态加载的逻辑，组件会将当前展开项的数据当做参数`data`传入，你只需要更新`data`的`children`
 属性即可，该函数的返回值为`Promise`对象
 
 组件默认遇到`children`为`[]`空数组的情况就会去进行异步加载，你可以通过`loaded`属性设为`true`来