@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.2

package/components/tag/useNowrap.ts

@@ -0,0 +1,117 @@
+import {
+    NonNullableRefObject,
+    VNodeComponentClass,
+    VNode,
+    useInstance,
+    createRef,
+    findDomFromVNode,
+    onBeforeMount,
+    nextTick,
+} from 'intact';
+import type { Tags } from './tags';
+import { useState, State, watchState } from '../../hooks/useState';
+import { tag as tagStyles } from './styles';
+import { getLeft, getRight } from '../../styles/utils';
+import { useReceive } from '../../hooks/useReceive';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+
+export function useNowrap(originVNodes: State<VNode[]>) {
+    const instance = useInstance() as Tags;
+    const containerRef = createRef<HTMLDivElement>();
+    const children = useState<VNode[]>([]);
+    const hiddenChildren = useState<VNode[]>([]);
+    const estimateMoreElementWidth = useEstimateMoreElementWidth();
+    const offsetMap = useChildrenOffset(originVNodes);
+
+    watchState(originVNodes, (v) => {
+        children.set(v);
+        nextTick(refresh);
+    });
+
+    // instance.watch('children', refresh, { presented: true })
+    useResizeObserver(containerRef, refresh);
+
+    function refresh() {
+        if (!instance.get('nowrap') || instance.$unmounted) return;
+
+        const container = containerRef.value!;
+        const containerWidth = container.offsetWidth;
+        const vNodes: VNode[] = [];
+        const _originVNodes = originVNodes.value;
+        const length = _originVNodes.length;
+
+        if (_originVNodes.length > 1) {
+            _originVNodes.forEach((vNode, index) => {
+                const offset = offsetMap.get(vNode)!;
+                // estimate the "more" element's with for performance
+                const width = estimateMoreElementWidth(length - index - 1);
+
+                if (offset + width <= containerWidth) {
+                    vNodes.push(vNode);
+                }
+            });
+        } else {
+            vNodes.push(..._originVNodes);
+        }
+
+        /**
+         * refresh function will be called in ResizeObserver,
+         * state changed will cause container's width to change,
+         * and a error will throw (ResizeObserver loop completed with undelivered notifications)
+         * so we call setState in requestAnimationFrame
+         */
+        requestAnimationFrame(() => {
+            hiddenChildren.set(_originVNodes.slice(vNodes.length))
+            children.set(vNodes);
+        });
+    }
+
+    return { containerRef, children, hiddenChildren }
+}
+
+function useChildrenOffset(vNodes: State<VNode[]>) {
+    const instance = useInstance() as Tags;
+    const map: Map<VNode, number> = new Map();
+
+    // instance.watch('children', updateMap, { presented: true })
+    watchState(vNodes, () => nextTick(updateMap));
+
+    function updateMap() {
+        map.clear();
+
+        if (!instance.get('nowrap')) return;
+
+        vNodes.value.forEach((vNode) => {
+            const dom = findDomFromVNode(vNode, true);
+            if (!dom || dom.nodeType !== 1) return;
+
+            const { offsetLeft, offsetWidth } = dom as HTMLElement;
+
+            map.set(vNode, offsetLeft + offsetWidth);
+        });
+    }
+
+    return map;
+}
+
+function useEstimateMoreElementWidth() {
+    const instance = useInstance() as Tags;
+    const widthPerChar = 7.2;
+    let cacheWidth = 0;
+
+    onBeforeMount(cache);
+    useReceive<Tags>(['size', 'border'], cache, true);
+
+    function cache() {
+        const { size, border } = instance.get();
+
+        cacheWidth = parseInt(tagStyles.tags.gap) + widthPerChar /* the "+" mark */;
+        if (border !== 'none') {
+            cacheWidth += 2;
+        }
+        const padding = size === 'default' ? tagStyles.padding : tagStyles[size!].padding;
+        cacheWidth += parseInt(getLeft(padding)) + parseInt(getRight(padding));
+    }
+
+    return (count: number) => Math.round(count.toString().length * widthPerChar + cacheWidth);
+}

package/components/timepicker/index.md

@@ -29,12 +29,25 @@ sidebar: doc
 | min | 最小可选时间 | `Value` | `undefind` |
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
 | step | 固定时间点的步长 | `string` | `undefined` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
 import {Dayjs} from 'dayjs';
 import {VNode} from 'intact';
 
 export type Value = string | Date | number | Dayjs;
+
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
 ```
 

package/components/timepicker/index.spec.ts

@@ -59,7 +59,7 @@ describe('Timepicker', () => {
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
         // remove one value
-        const [, close] = picker2.querySelectorAll<HTMLElement>('.k-select-close');
+        const [, close] = picker2.querySelectorAll<HTMLElement>('.k-tag-close');
         close.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00']);

package/components/tooltip/content.ts

@@ -9,6 +9,7 @@ import template from './content.vdt';
 import {bind} from '../utils';
 import {Tooltip} from './tooltip';
 import {useArrow} from './useArrow';
+import { tooltip as tooltipTheme } from './styles';
 
 export interface TooltipContentProps extends DropdownMenuProps { } 
 export interface TooltipContentEvents extends DropdownMenuEvents { }
@@ -16,14 +17,14 @@ export interface TooltipContentBlocks extends DropdownMenuBlocks {
     buttons: null
 }
 
-export class TooltipContent extends DropdownMenu<
-    TooltipContentProps,
-    TooltipContentEvents,
-    TooltipContentBlocks
-> {
+export class TooltipContent<
+    T extends TooltipContentProps = TooltipContentProps,
+    E extends TooltipContentEvents = TooltipContentEvents,
+    B extends TooltipContentBlocks = TooltipContentBlocks,
+> extends DropdownMenu<T, E, B> {
     static template = template;
 
-    private isEmptyChildren: boolean = true;
+    protected isEmptyChildren: boolean = true;
     private arrow = useArrow();
 
     init() {
@@ -35,10 +36,23 @@ export class TooltipContent extends DropdownMenu<
     }
 
     @bind
-    private onEnter() {
+    private onEnter(elem: HTMLElement) {
+        // fix the width, https://github.com/ksc-fe/kpc/issues/873
+        const maxWidth = parseInt(tooltipTheme.maxWidth);
+        const width = elem.offsetWidth;
+        if (width === maxWidth) {
+            elem.style.width = `${width}px`;
+        }
         this.dropdown!.position();
     }
 
+    @bind
+    private onAfterLeave(elem: HTMLElement) {
+        // remove the position after leave, https://github.com/ksc-fe/kpc/issues/873
+        const style = elem.style;
+        style.left = style.top = style.width  = '';
+    }
+
     @bind
     protected onMouseEnter(e: MouseEvent) {
         const dropdown = this.dropdown as Tooltip; 

package/components/tooltip/content.vdt

@@ -18,15 +18,27 @@ const classNameObj = {
     [`k-${size}`]: size !== 'default',
     [className]: className,
     [makeStyles()]: true,
+    [$props.className]: $props.className,
 };
 
 <t:super
     value={!!value && !this.isEmptyChildren}
-    transition={{name: 'k-fade', onEnter: this.onEnter}}
+    transition={{
+        name: 'k-fade',
+        onEnter: this.onEnter,
+        onAfterLeave: this.onAfterLeave,
+        onLeaveCancelled: this.onAfterLeave,
+    }}
     class={classNameObj}
 >
     <b:children>
-        {children}
+        <b:body>{children}</b:body>
+        <div class="k-tooltip-footer" v-if={confirm} key="tooltip-footer">
+            <b:footer>
+                <Button ev-click={this.cancel} size="small">{cancelText}</Button>
+                <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
+            </b:footer>
+        </div>
         <i v-if={showArrow}
             key="tooltip-arrow"
             class={{
@@ -35,11 +47,5 @@ const classNameObj = {
             }}
             ref={arrowRef}
         ></i>
-        <div class="k-tooltip-buttons" v-if={confirm} key="tooltip-buttons">
-            <b:buttons>
-                <Button ev-click={this.cancel} size="small">{cancelText}</Button>
-                <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
-            </b:buttons>
-        </div>
     </b:children>
 </t:super>

package/components/tooltip/demos/trigger.md

@@ -4,7 +4,7 @@ order: 2
 ---
 
 使用`trigger`指定触发方式，`click`点击触发，`hover`悬浮触发，`foucs`聚焦触发，默认为`hover`，在悬浮触发情况下，
-鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`canHover`属性
+鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`hoverable`属性
 
 ```vdt
 import {Tooltip, ButtonGroup, Button, Input} from 'kpc';

package/components/tooltip/index.md

@@ -10,26 +10,23 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"focus"` | `"hover"` |
-| disabled | 是否禁用整个菜单 | `boolean` | `false` |
+| disabled | 是否禁用提示 | `boolean` | `false` |
 | value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认在触发器正上方向上偏移`10px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` |
 | of | 弹出菜单的位置是相对当前触发元素，还是触发元素所在的菜单元素，这在嵌套菜单中可能会用到，可以使所有子菜单保持统一的对齐方式，例如：级联选择（Cascader）组件 | `"self"` | `"parent"` | `Event` | `"self"` |
-| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个 DOM 用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
 | showArrow | 弹层是否展示箭头 | `boolean` | `true` |
 | theme | 指定主题 | `"dark"` | `"light"` | `"dark"` |
 | hoverable | 对于悬浮触发`hover`的方式，提示内容弹层是否在鼠标悬浮时仍然展示，默认鼠标离开触发元素弹层就会关闭 | `boolean` | `false` |
 | always | 是否一直保持当前展示/隐藏状态 | `boolean` | `false` |
 | size | 弹层尺寸 | `"default"` | `"small"` | `"default"` |
-| confirm | 带“确认”和“取消”按钮的确认弹层 | `boolean` | `false` |
-| onText | `confirm`模式下的“确认”按钮文案 | `string` | `"确认"` |
-| cancelText | `confirm`模式下的“取消”按钮文案 | `string` | `"取消"` |
 | content | 指定提示的内容，当然你也可以用`content`扩展点指定 | `string` | `VNode` | `undefined` |
 
 ```ts
 type Position = {
     my?: string | [string, string]
     at?: string | [string, string]
-    collision?: Collision | [Collision, Collision] 
+    collision?: Collision | [Collision, Collision]
     collisionDirection?: ['left'] | ['top'] | ['left', 'top']
 }
 

package/components/tooltip/index.spec.ts

@@ -3,11 +3,11 @@ import BasicDemo from '~/components/tooltip/demos/basic';
 import PositionDemo from '~/components/tooltip/demos/position';
 import TriggerDemo from '~/components/tooltip/demos/trigger';
 import ContentDemo from '~/components/tooltip/demos/content';
-import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
 import {Tooltip} from './';
-import {Radio} from '../radio';
+import {Dialog} from '../dialog';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import { tooltip as tooltipTheme } from './styles';
 
 describe('Tooltip', () => {
     afterEach((done) => {
@@ -57,7 +57,7 @@ describe('Tooltip', () => {
             expect(a >= b - 1 && a <= b + 1).to.be.true;
         };
 
-        
+
         instance.set('position', 'left');
         await wait();
         contains('k-right');
@@ -136,7 +136,7 @@ describe('Tooltip', () => {
         await wait(500);
         const content1 = getElement('.k-tooltip-content');
 
-        //  should not hide when move mouse from button to tooltip content    
+        //  should not hide when move mouse from button to tooltip content
         expect(content1).eql(content);
 
         dispatchEvent(canHover, 'mouseleave');
@@ -155,35 +155,6 @@ describe('Tooltip', () => {
         expect(content.querySelector<HTMLElement>('.k-slider')!.outerHTML).to.matchSnapshot();
     });
 
-    it('should handle confirm tooltip corectly', async () => {
-        const [instance, element] = mount(ConfirmDemo);
-
-        const cancelCb = sinon.spy();
-        const okCb = sinon.spy();
-
-        instance.refs.__test.on('cancel', cancelCb);
-        instance.refs.__test.on('ok', okCb);
-
-        dispatchEvent(element.children[0], 'click');
-        await wait();
-        let content = getElement('.k-tooltip-content')!;
-        expect((content.querySelector('.k-tooltip-buttons') as HTMLElement).outerHTML).to.matchSnapshot();
-
-        (content.querySelector('.k-btn') as HTMLElement).click();
-        await wait(500);
-        expect(content.style.display).eql('none');
-
-        dispatchEvent(element.firstElementChild!, 'click');
-        await wait();
-        content = getElement('.k-tooltip-content')!;
-        const [, btn] = Array.from<HTMLElement>(content.querySelectorAll('.k-btn'));
-        btn.click();
-
-        await wait(500);
-        expect(content.style.display).eql('none');
-        expect(cancelCb.callCount).eql(1);
-        expect(okCb.callCount).eql(1);
-    });
 
     it('should always show tooltip', async () => {
         const [, element] = mount(AlwaysDemo);
@@ -229,7 +200,7 @@ describe('Tooltip', () => {
 
     //     const app = new Vue({
     //         render: h => h(
-    //             'Test', 
+    //             'Test',
     //             {ref: 'test'}),
     //         components: {Test},
     //     }).$mount(container);
@@ -264,7 +235,7 @@ describe('Tooltip', () => {
     //             </div>
     //         `,
     //         components: {
-    //             Tooltip:  Tooltip as any, 
+    //             Tooltip:  Tooltip as any,
     //             Radio: Radio as any,
     //         },
     //         data: {
@@ -330,16 +301,19 @@ describe('Tooltip', () => {
             static defaults = () => ({show: false});
             Tooltip = Tooltip;
             mounted() {
-                const element = findDomFromVNode(this.$lastInput!, true) as Element;
-                const windowHeight = window.innerHeight || document.documentElement.clientHeight;
-                (element.parentNode as HTMLElement).style.height = `${windowHeight * 2}px`;
+                const element = findDomFromVNode(this.$lastInput!, true) as HTMLElement;
+                const style = element.style;
+                style.position = 'fixed';
+                style.top = '-200px';
+                // const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+                // (element.parentNode as HTMLElement).style.height = `${windowHeight * 2}px`;
             }
         }
 
         const [i] = mount(Demo);
 
-        await wait(500);
-        window.scrollTo(0, 10000);
+        // await wait(500);
+        // window.scrollTo(0, 10000);
 
         i.set('show', true);
 
@@ -349,4 +323,59 @@ describe('Tooltip', () => {
         console.log(JSON.stringify(content.getBoundingClientRect()));
         expect(content.getBoundingClientRect().top < 0).to.be.true;
     });
+
+    it('should add className', async () => {
+        class Demo extends Component {
+            static template = `
+                const Tooltip = this.Tooltip;
+                <div>
+                    <Tooltip content="hello" class="a">
+                        <div ref="test" class="b">test</div>
+                    </Tooltip>
+                </div>
+            `;
+            Tooltip = Tooltip;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = instance.refs.test;
+        expect(trigger.className).to.eql('b a');
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const dropdown = getElement('.k-tooltip-content')!;
+        expect(dropdown.classList.contains('a')).to.be.true;
+    });
+
+    it('should fix the width in small container', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Dialog} = this;
+                <div style="text-align: right; position: relative; width: 350px;">
+                    <Tooltip content="这是一段很长的描述文字，这是一段很长的描述文字，这是一段很长的描述文字" container={dom => dom}>
+                        <span class="trigger">test</span>
+                    </Tooltip>
+                </div>
+            `
+            private Tooltip = Tooltip;
+            private Dialog = Dialog;
+        }
+
+        const [instance, element] = mount(Demo);
+        const trigger = element.querySelector<HTMLDivElement>('.trigger')!;
+        const expecedWidth = parseInt(tooltipTheme.maxWidth);
+
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const content = getElement('.k-tooltip-content')!;
+        const width = content.offsetWidth;
+        expect(width).to.eql(expecedWidth);
+
+        dispatchEvent(trigger, 'mouseleave');
+        await wait();
+        dispatchEvent(trigger, 'mouseenter');
+        await wait();
+        const newWidth = content.offsetWidth;
+        expect(newWidth).to.eql(width);
+    });
 });

package/components/tooltip/styles.ts

@@ -32,7 +32,7 @@ const defaults = {
     smallPadding: '4px',
 };
 
-let tooltip: typeof defaults;
+export let tooltip: typeof defaults;
 setDefault(() => {
     tooltip = deepDefaults(theme, {tooltip: defaults}).tooltip;
 });
@@ -161,9 +161,9 @@ export default function makeStyles() {
             })}
 
             // confirm
-            .k-tooltip-buttons {
+            .k-tooltip-footer {
                 padding-top: ${tooltip.confirm.gaps};
-                .k-btn:last-of-type {
+                .k-btn:not(:first-of-type) {
                     margin-left: ${tooltip.confirm.gaps};
                 }
             }

package/components/tooltip/tooltip.ts

@@ -49,6 +49,7 @@ const defaults = (): Partial<TooltipProps> => ({
     showArrow: true,
     theme: 'dark',
     position: {my: 'center bottom-10', at: 'center top', collision: 'flipfit'},
+    collison: 'flipfit',
     hoverable: false,
     always: false,
     confirm: false,
@@ -72,7 +73,12 @@ export class Tooltip<
     static defaults = defaults;
     static events = events;
 
-    protected alwaysPortal = true;
+    show(shouldFocus: boolean = false) {
+        if (this.get('disabled')) return;
+
+        clearTimeout(this.timer);
+        this.set('value', true);
+    }
 
     hide(immediately: boolean) {
         if (this.get('always')) return;

package/components/transfer/index.vdt

@@ -5,6 +5,7 @@ import {Input} from '../input';
 import {Checkbox} from '../checkbox';
 import {Button} from '../button';
 import {Tree} from '../tree';
+import {Icon} from '../icon';
 
 const {
     data, className, keyName, labelName, 
@@ -45,7 +46,7 @@ const Panel = (model) => {
                 size="small"
             >
                 <b:prefix>
-                    <i class="ion-ios-search"></i>
+                    <Icon class="k-icon-search" size="small" />
                 </b:prefix>
             </Input>
         </b:filter>
@@ -83,7 +84,7 @@ const Panel = (model) => {
             type="primary"
             size="large"
         >
-            <i class="k-transfer-icon ion-ios-arrow-left" />
+            <Icon class="k-transfer-icon k-icon-left" />
         </Button>
         <Button circle icon 
             disabled={!enableAdd()}
@@ -91,7 +92,7 @@ const Panel = (model) => {
             type="primary"
             size="large"
         >
-            <i class="k-transfer-icon ion-ios-arrow-right" />
+            <Icon class="k-transfer-icon k-icon-right" />
         </Button>
     </div>
     {Panel('right')}

package/components/treeSelect/index.md

@@ -33,6 +33,9 @@ sidebar: doc
 | checkbox | 是否展示复选框 | `boolean` | `false` |
 | filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` &#124; `"left"` &#124; `"bottom"` &#124; `"right"` &#124; `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
 import {Key, Children} from 'intact';
@@ -47,6 +50,14 @@ export type TreeDataItem<K extends Key> = {
     children?: TreeDataItem<K>[]
 }
 
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
 ```
 
 # 扩展点

package/components/types.ts

@@ -8,6 +8,7 @@ export interface CommonInputHTMLAttributes {
     form?: string
     name?: string
     required?: boolean
+    maxlength?: string | number
     // value?: string
 }
 

package/components/upload/index.spec.ts

@@ -69,7 +69,7 @@ describe('Upload', () => {
             remove.click();
             await wait();
             let dialog = getElement('.k-dialog')!;
-            const [, cancel] = dialog.querySelectorAll('.k-dialog-footer .k-btn');
+            const cancel = dialog.querySelector('.k-dialog-footer .k-dialog-cancel');
             (cancel as HTMLDivElement).click();
             await wait(500);
             expect(element.innerHTML).to.matchSnapshot();
@@ -77,7 +77,7 @@ describe('Upload', () => {
             remove.click();
             await wait();
             dialog = getElement('.k-dialog')!;
-            const [ok] = dialog.querySelectorAll('.k-dialog-footer .k-btn');
+            const ok = dialog.querySelector('.k-dialog-footer .k-dialog-ok');
             (ok as HTMLDivElement).click();
             await wait(500);
             expect(element.innerHTML).to.matchSnapshot();
@@ -132,7 +132,7 @@ describe('Upload', () => {
             await wait(1000);
             expect(element.innerHTML.replace(/blob:[^"]*/g, '')).to.matchSnapshot();
 
-            const view = element.querySelector('.k-upload-overlap') as HTMLElement;
+            const view = element.querySelector('.k-upload-zoom') as HTMLElement;
             view.click();
             await wait();
             const dialog = getElement('.k-dialog')!;
@@ -157,7 +157,7 @@ describe('Upload', () => {
         this.timeout(0);
         const [instance, element] = mount(ManuallyDemo);
 
-        const upload = instance.$lastInput!.children as Upload;
+        const upload = instance.refs.instance as Upload;
         upload.on('success', async () => {
             await wait(500);
             expect(element.innerHTML).to.matchSnapshot();

package/components/upload/index.vdt

@@ -43,12 +43,12 @@ const handle = (
                     {_$('点击上传')}
                 </Button>
                 <div class="k-upload-area" v-else>
-                    <Icon class="k-icon-add-big" />
+                    <Icon class="k-icon-add-bold" />
                     <div innerHTML={_$('将文件拖到此处，或<a>点击上传</a>')}></div>
                 </div>
             </template>
             <div v-else class="k-upload-picture-card k-upload-add">
-                <Icon class="k-icon-add-big" size="large" />
+                <Icon class="k-icon-add-bold" size="large" />
                 <div>{_$('上传图片')}</div>
             </div>
         </b:content>
@@ -101,7 +101,7 @@ const {show, close, image, isShow} = this.showImage;
                     <div class="k-upload-overlap k-upload-icons" v-else>
                         <Icon class="k-upload-zoom ion-ios-eye-outline" size="large"
                             hoverable
-                            ev-click={linkEvent($value, show)}
+                            ev-click={() => show($value)}
                         />
                         {closeBtn($value, $key)}
                     </div>
@@ -129,10 +129,10 @@ const {show, close, image, isShow} = this.showImage;
                     <div class="k-upload-name c-ellipsis">
                         <Icon class="k-upload-file-icon ion-document" />
                         <span class="k-upload-file-name">{$value.name}</span>
-                        <Icon class="k-upload-status-icon ion-ios-checkmark-outline" 
+                        <Icon class="k-upload-status-icon k-icon-success-fill" 
                             v-if={$value.status === UploadFileStatus.Done}
                         />
-                        <Icon class="k-upload-status-icon ion-ios-close-outline"
+                        <Icon class="k-upload-status-icon k-icon-error-fill"
                             v-else-if={$value.status === UploadFileStatus.Error}
                         />
                     </div>

package/components/upload/styles.ts

@@ -225,8 +225,6 @@ export function makeStyles() {
         }
         .k-upload-add {
             border: ${upload.gallery.add.border};
-            // font-size: ${upload.gallery.add.fontSize};
-            // line-height: calc(${upload.gallery.height} - 2px);
             cursor: pointer;
             &:hover {
                 border-color: ${upload.gallery.add.hoverBorderColor};