@king-design/intact 3.5.1 → 3.6.0-beta.0

package/components/tour/index.spec.ts

@@ -0,0 +1,259 @@
+import { Component } from 'intact';
+import BasicDemo from '~/components/tour/demos/basic';
+import DeclarativeDemo from '~/components/tour/demos/declarative';
+import ClosableDemo from '~/components/tour/demos/closable';
+import CustomTextDemo from '~/components/tour/demos/customText';
+import BeforeChangeDemo from '~/components/tour/demos/beforeChange';
+import EventsDemo from '~/components/tour/demos/events';
+import MaskClosableDemo from '~/components/tour/demos/maskClosable';
+import NotargetDemo from '~/components/tour/demos/notarget';
+import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Tour, TourStep } from './';
+
+describe('Tour', () => {
+    afterEach(() => {unmount()});
+
+    it('should show and hide tour correctly', async () => {
+        const [instance, element] = mount(BasicDemo);
+        
+        let tourContent = getElement('.k-tour-step');
+        expect(tourContent).to.be.undefined;
+        
+        const buttons = element.querySelectorAll('.k-btn');
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('启动引导')) as HTMLElement;
+        startBtn.click();
+        await wait();
+        
+        tourContent = getElement('.k-tour-step');
+        expect(tourContent).to.exist;
+        
+        expect(tourContent!.querySelector('.k-tour-step-title')!.textContent).to.eql('第一步');
+        
+        const indicator = tourContent!.querySelector('.k-tour-step-indicator');
+        expect(indicator!.textContent!.trim()).to.eql('1 / 2');
+        
+        const nextBtn = tourContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        nextBtn.click();
+        await wait();
+        
+        const updatedContent = getElement('.k-tour-step');
+        expect(updatedContent!.querySelector('.k-tour-step-title')!.textContent).to.eql('第二步');
+        
+        const doneBtn = updatedContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        doneBtn.click();
+        await wait();
+        
+        expect(getElement('.k-tour-step')).to.be.undefined;
+    });
+
+    it('should work with declarative TourStep components', async () => {
+        const [instance, element] = mount(DeclarativeDemo);
+        
+        const buttons = element.querySelectorAll('.k-btn');
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('启动引导')) as HTMLElement;
+        startBtn.click();
+        await wait(50);
+        
+        const tourContent = getElement('.k-tour-step');
+        expect(tourContent).to.exist;
+        
+        expect(tourContent!.querySelector('.k-tour-step-title')!.textContent).to.eql('第一步');
+        expect(tourContent!.querySelector('.k-tour-step-body')!.textContent).to.include('子组件方式的第一步');
+
+        const nextBtn = tourContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        nextBtn.click();
+        await wait(50);
+        
+        const updatedContent = getElement('.k-tour-step');
+        expect(updatedContent!.querySelector('.k-tour-step-title')!.textContent).to.eql('第二步');
+        expect(updatedContent!.querySelector('.k-tour-step-body')!.textContent).to.include('子组件方式的第二步');
+    });
+
+    it('should handle closable property correctly', async () => {
+        const [instance, element] = mount(ClosableDemo);
+        
+        const buttons = element.querySelectorAll('.k-btn');
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('启动引导')) as HTMLElement;
+        startBtn.click();
+        await wait(50);
+        
+        (instance as any).set('closable', true);
+        await wait(50);
+        const tourContent = getElement('.k-tour-step');
+        expect(tourContent).to.exist;
+        
+        const closeIcon = tourContent!.querySelector('.k-tour-step-close');
+        expect(closeIcon).to.be.null;
+    });
+
+    it('should handle beforeChange correctly', async () => {
+        const [instance, element] = mount(BeforeChangeDemo);
+        
+        const buttons = element.querySelectorAll('.k-btn');
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('启动引导')) as HTMLElement;
+        startBtn.click();
+        await wait();
+        
+        expect((instance as any).get('currentStep')).to.eql(0);
+        
+        let tourContent = getElement('.k-tour-step');
+        let nextBtn = tourContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        nextBtn.click();
+        await wait();
+        
+        expect((instance as any).get('currentStep')).to.eql(1);
+        
+        tourContent = getElement('.k-tour-step');
+        nextBtn = tourContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        nextBtn.click();
+        await wait();
+        
+        expect((instance as any).get('currentStep')).to.eql(2);
+
+        tourContent = getElement('.k-tour-step');
+        nextBtn = tourContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        nextBtn.click();
+        await wait();
+
+        const input = element.querySelector('.step3-input .k-input-inner') as HTMLInputElement;
+        input.value = 'next';
+        dispatchEvent(input, 'input');
+        await wait();
+        
+        tourContent = getElement('.k-tour-step');
+        nextBtn = tourContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        nextBtn.click();
+        await wait();
+        console.log('currentStep', (instance as any).get('currentStep'));
+        expect((instance as any).get('currentStep')).to.eql(3);
+    });
+
+    it('should trigger events correctly', async () => {
+        const [instance, element] = mount(EventsDemo);
+        
+        const prevSpy = sinon.spy(instance, 'handlePrev');
+        const nextSpy = sinon.spy(instance, 'handleNext');
+        const finishSpy = sinon.spy(instance, 'handleFinish');
+        
+        const buttons = element.querySelectorAll('.k-btn');
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('开始引导')) as HTMLElement;
+        startBtn.click();
+        await wait();
+        
+        const tourContent = getElement('.k-tour-step');
+        const nextBtn = tourContent!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        nextBtn.click();
+        await wait();
+        
+        expect(nextSpy.callCount).to.eql(1);
+        
+        const prevBtn = getElement('.k-tour-step')!.querySelector('.k-tour-step-buttons .k-btn:not(.k-primary)') as HTMLElement;
+        prevBtn.click();
+        await wait();
+        
+        expect(prevSpy.callCount).to.eql(1);
+        
+        nextBtn.click();
+        await wait();
+        nextBtn.click();
+        await wait();
+        const doneBtn = getElement('.k-tour-step')!.querySelector('.k-tour-step-buttons .k-primary') as HTMLElement;
+        doneBtn.click();
+        await wait();
+        
+        console.log('finishSpy.callCount', finishSpy.callCount);
+        expect(finishSpy.callCount).to.eql(0);
+    });
+
+    it('should handle maskClosable correctly', async () => {
+        const [instance, element] = mount(MaskClosableDemo);
+        
+        const buttons = element.querySelectorAll('.k-btn');
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('启动引导')) as HTMLElement;
+        startBtn.click();
+        await wait(50);
+        
+        const highlight = getElement('.k-tour-target-highlight');
+        expect(highlight).to.exist;
+        
+        dispatchEvent(document, 'click');
+        await wait(50);
+        
+        expect(getElement('.k-tour-step')).to.be.undefined;
+        
+        startBtn.click();
+        await wait(50);
+        (instance as any).set('maskClosable', false);
+        await wait(50);
+        
+        dispatchEvent(document, 'click');
+        await wait(50);
+        
+        expect(getElement('.k-tour-step')).to.exist;
+    });
+
+    it('should handle custom text correctly', async () => {
+        const [instance, element] = mount(CustomTextDemo);
+        
+        const buttons = element.querySelectorAll('.k-btn');
+        const startBtn = Array.from(buttons).find(btn => btn.textContent?.includes('启动引导')) as HTMLElement;
+        startBtn.click();
+        await wait(50);
+        
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+
+    it('should handle target correctly', async () => {
+        const [instance, element] = mount(NotargetDemo);
+        
+        const btn = element.querySelector('.k-btn') as HTMLElement;
+        btn.click();
+        await wait(50);
+        
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+
+    // it('should handle theme correctly', async () => {
+    //     interface DemoProps {
+    //         theme: string;
+    //         tourData: any[];
+    //     }
+        
+    //     class Demo extends Component<DemoProps> {
+    //         static template = `
+    //             const { Tour } = this;
+    //             <div>
+    //                 <Tour
+    //                     data={this.get('tourData')}
+    //                     visible={true}
+    //                     theme={this.get('theme')}
+    //                 />
+    //             </div>
+    //         `;
+    //         Tour = Tour;
+            
+    //         static defaults() {
+    //             return {
+    //                 theme: 'dark',
+    //                 tourData: [
+    //                     {
+    //                         target: 'body',
+    //                         title: '主题测试',
+    //                         content: '测试深色主题'
+    //                     }
+    //                 ]
+    //             } as DemoProps;
+    //         }
+    //     }
+
+    //     const [instance, element] = mount(Demo);
+    //     await wait(50);
+        
+    //     expect(element.innerHTML).to.matchSnapshot();
+        
+    //     instance.set('theme', 'light');
+    //     await wait(50);
+        
+    //     expect(element.innerHTML).to.matchSnapshot();
+    // });
+});

package/components/tour/index.ts

@@ -0,0 +1,2 @@
+export * from './tour';
+export * from './step';

package/components/tour/step.ts

@@ -0,0 +1,55 @@
+import {Component, TypeDefs, VNode, Children} from 'intact';
+import template from './step.vdt';
+import { useConfigContext } from '../config';
+import type {Events} from '../types';
+
+export interface TourStepProps {
+    title?: string | VNode;
+    content?: Children;
+    target?: string | HTMLElement;
+    position?: string | any;
+    nextText?: string;
+    prevText?: string;
+}
+
+export interface TourStepEvents { }
+
+export interface TourStepBlocks {
+    header: null;
+    content: null;
+    footer: null;
+}
+
+const typeDefs: Required<TypeDefs<TourStepProps>> = {
+    title: [String, VNode],
+    content: [String, VNode, Array],
+    target: [String, Object],
+    position: [String, Object],
+    nextText: String,
+    prevText: String,
+};
+
+const defaults = (): Partial<TourStepProps> => ({
+    position: 'bottom',
+    nextText: '下一步',
+    prevText: '上一步',
+});
+
+export class TourStep extends Component<TourStepProps, TourStepEvents, TourStepBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    private config = useConfigContext();
+
+    getTarget(): HTMLElement | null {
+        const target = this.get('target');
+        if (!target) return null;
+        
+        if (typeof target === 'string') {
+            return document.querySelector(target);
+        }
+    
+        return target as HTMLElement;
+    }
+}

package/components/tour/step.vdt

@@ -0,0 +1,75 @@
+import {Button} from '../button';
+import {Icon} from '../icon';
+import {makeStyles} from './styles';
+import {TourContext} from './tour';
+import {getRestProps} from '../utils';
+
+const {
+    title,
+    content,
+    className,
+    children,
+    nextText,
+    prevText
+} = this.get();
+
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-tour-step`]: true,
+    [className]: className,
+};
+
+<TourContext.Consumer>
+    {({value, total, doneText, onPrev, onNext, onFinish, closable}) => {
+        const isFirst = value === 0;
+        const isLast = value === total - 1;
+        const showHeader = !!title;
+        const displayIndex = value + 1;
+
+        return (
+            <div class={classNameObj} {...getRestProps(this)}>
+                {/* 头部区域 */}
+                <div class={`${k}-tour-step-header`} v-if={!!title || $blocks.header}>
+                    <div class={`${k}-tour-step-title`}>
+                        <b:header>{title}</b:header>
+                    </div>
+                    <div v-if={!closable} class={`${k}-tour-step-close`} ev-click={onFinish}>
+                        <Icon class={`${k}-icon-close`} />
+                    </div>
+                </div>
+                
+                {/* 内容区域 */}
+                <div class={`${k}-tour-step-body`}>
+                    { children || content}
+                </div>
+                
+                {/* 底部区域 */}
+                <div class={`${k}-tour-step-footer`}>
+                    <b:footer>
+                        <div class={`${k}-tour-step-indicator`}>
+                            {displayIndex} / {total}
+                        </div>
+                        <div class={`${k}-tour-step-buttons`}>
+                            <Button
+                                v-if={!isFirst}
+                                size="small"
+                                type="secondary"
+                                ev-click={onPrev}
+                            >
+                                {prevText}
+                            </Button>
+                            <Button
+                                size="small"
+                                type="primary"
+                                ev-click={isLast ? onFinish : onNext}
+                            >
+                                {isLast ? doneText : nextText}
+                            </Button>
+                        </div>
+                    </b:footer>
+                </div>
+            </div>
+        );
+    }}
+</TourContext.Consumer> 

package/components/tour/styles.ts

@@ -0,0 +1,283 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import {cache} from '../utils';
+
+const defaults = {
+    minWidth: '280px',
+    maxWidth: '400px',
+    gap: '8px',
+    get color() { return theme.color.text },
+    bgColor: '#fff',
+    padding: {
+        body: '16px',
+        header: '12px 16px',
+        footer: '12px 16px',
+    },
+    fontSize: {
+        title: '16px',
+        content: '12px',
+    },
+    border: '1px solid var(--kui-color-border)',
+    arrow: {
+        size: '8px',
+        offset: '10px',
+        borderColor: 'rgba(221, 221, 221, .5)',
+    },
+    
+    mask: {
+        color: 'rgba(0, 0, 0, 0.5)',
+        targetPadding: '8px',
+        targetBorderRadius: '4px',
+    },
+
+    // dark
+    dark: {
+        get bgColor() { return theme.color.title },
+        color: '#fff',
+        get arrowBorderColor() { return theme.color.title },
+    },
+};
+
+let tour: typeof defaults;
+setDefault(() => {
+    tour = deepDefaults(theme, {tour: defaults}).tour;
+    makeStyles?.clearCache();
+});
+
+export type Theme = 'dark' | 'light';
+export const themes: Theme[] = ['dark', 'light'];
+
+const directionMap = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left',
+};
+
+export const makeStyles = cache(function makeStyles(k: string) {
+    const arrowLong = tour.arrow.size;
+    const arrowShort = `calc(${arrowLong} - 1px)`;
+
+    return css`
+        .${k}-tour {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1000;
+            pointer-events: none;
+        }
+
+        .${k}-tour-target-highlight {
+            position: fixed;
+            box-shadow: 0 0 0 9999px ${tour.mask.color};
+            border-radius: ${tour.mask.targetBorderRadius};
+            z-index: 999;
+            pointer-events: none;
+            transition: all 0.3s ease;
+            
+            &.${k}-hoverable {
+                pointer-events: auto;
+                cursor: pointer;
+                
+                &:hover {
+                    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        top: -4px;
+                        left: -4px;
+                        right: -4px;
+                        bottom: -4px;
+                        border: 2px solid rgba(255, 255, 255, 0.5);
+                        border-radius: ${tour.mask.targetBorderRadius};
+                        animation: pulse 1.5s infinite;
+                    }
+                }
+            }
+        }
+        
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+                opacity: 0.8;
+            }
+            50% {
+                transform: scale(1.05);
+                opacity: 0.5;
+            }
+            100% {
+                transform: scale(1);
+                opacity: 0.8;
+            }
+        }
+
+        .${k}-tour-step-wrapper {
+            position: absolute;
+            z-index: 1000;
+            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
+            pointer-events: auto;
+            
+            /* 居中显示样式 */
+            &.${k}-tour-centered {
+                position: fixed !important;
+                top: 50% !important;
+                left: 50% !important;
+                transform: translate(-50%, -50%) !important;
+            }
+        }
+
+        .${k}-tour-step {
+            background: #fff;
+            border-radius: 4px;
+            padding: 0;
+            min-width: 240px;
+            max-width: 400px;
+            position: relative;
+        }
+
+        .${k}-tour-step-container {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .${k}-tour-step-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px 16px 8px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .${k}-tour-step-title {
+            font-weight: 500;
+            font-size: 16px;
+            color: #262626;
+        }
+
+        .${k}-tour-step-close {
+            cursor: pointer;
+            color: #999;
+            &:hover {
+                color: #666;
+            }
+        }
+
+        .${k}-tour-step-body {
+            font-size: ${tour.fontSize.content};
+            padding: 16px;
+            color: #595959;
+        }
+
+        .${k}-tour-step-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 16px 16px;
+        }
+
+        .${k}-tour-step-indicator {
+            color: #8c8c8c;
+        }
+
+        .${k}-tour-step-buttons {
+            display: flex;
+            gap: 8px;
+        }
+
+        /* 箭头样式 */
+        .${k}-tour-arrow {
+            pointer-events: none;
+            &:before, & {
+                position: absolute;
+                display: block;
+                border-style: solid;
+                border-color: transparent;
+            }
+            &:before {
+                content: ' ';
+            }
+            &.${k}-top,
+            &.${k}-bottom {
+                &:before, & {
+                    border-width: ${arrowLong} ${arrowShort};
+                }
+                &:before {
+                    left: calc(-1 * ${arrowShort});
+                }
+            }
+            &.${k}-top {
+                top: calc(-2 * ${arrowLong});
+                &:before {
+                    top: calc(-${arrowLong} + 1px);
+                }
+            }
+            &.${k}-bottom {
+                bottom: calc(-2 * ${arrowLong});
+                &:before {
+                    bottom: calc(-${arrowLong} + 1px);
+                }
+            }
+            &.${k}-left,
+            &.${k}-right {
+                &:before, & {
+                    border-width: ${arrowShort} ${arrowLong};
+                }
+                &:before {
+                    top: calc(-1 * ${arrowShort});
+                }
+            }
+            &.${k}-left {
+                left: calc(-2 * ${arrowLong});
+                &:before {
+                    left: calc(-${arrowLong} + 1px);
+                }
+            }
+            &.${k}-right {
+                right: calc(-2 * ${arrowLong});
+                &:before {
+                    right: calc(-${arrowLong} + 1px);
+                }
+            }
+        }
+
+        ${themes.map(theme => {
+            let borderColor: string;
+            let bgColor: string;
+            let color: string;
+            if (theme === 'dark') {
+                borderColor = tour.dark.arrowBorderColor;
+                bgColor = tour.dark.bgColor;
+                color = tour.dark.color;
+            } else {
+                borderColor = tour.arrow.borderColor;
+                bgColor = tour.bgColor;
+                color = tour.color;
+            }
+
+            return css`
+                &.${k}-${theme}  {
+                    background: ${bgColor};
+                    color: ${color};
+                    .${k}-tour-step-wrapper .${k}-tour-arrow {
+                        ${Object.keys(directionMap).map(direction => {
+                            const borderDirection = directionMap[direction as keyof typeof directionMap];
+                            return css`
+                                &.${k}-${direction} {
+                                    &:before {
+                                        border-${borderDirection}-color: ${bgColor};
+                                    }
+                                }
+                            `
+                        })}
+                    }
+                }
+            `
+        })}
+    `;
+});
+
+// 让样式能被导入
+export default makeStyles;