@king-design/intact 3.5.2 → 3.6.0

package/components/table/index.spec.ts

@@ -496,7 +496,6 @@ describe('Table', () => {
         checkbox.click();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        debugger;
         expect(table.getCheckedData()).to.have.lengthOf(8);
 
         const arrow = element.querySelector('.k-table-arrow') as HTMLElement;
@@ -723,4 +722,73 @@ describe('Table', () => {
         expect(spy.callCount).to.eql(5);
         expect(spy.lastCall.lastArg).to.eql({value: 2, limit: 10});
     });
+
+    it('fixHeader with Affix header scroll sync', async () => {
+        interface Props {
+            data: any[]
+            fixHeader: boolean | number
+            virtual: boolean
+            stickScrollbar: boolean | number
+        }
+        
+        class Demo extends Component<Props> {
+            static template = `
+                const {Table, TableColumn} = this;
+                const {data, fixHeader, virtual, stickScrollbar} = this.get();
+                <Table data={data} fixHeader={fixHeader} virtual={virtual} stickScrollbar={stickScrollbar} ref="table">
+                    <TableColumn fixed="left" key="name" title="Name" width="200" />
+                    <TableColumn key="column1" title="Column1" width="300" />
+                    <TableColumn key="column2" title="Column2" width="300" />
+                    <TableColumn key="column3" title="Column3" width="300" />
+                    <TableColumn fixed="right" key="action" title="Action" width="200" />
+                </Table>
+            `;
+            
+            static defaults() {
+                return {
+                    data: Array.from({length: 10}, (_, i) => ({
+                        name: `Name ${i}`,
+                        column1: `Column1 ${i}`,
+                        column2: `Column2 ${i}`,
+                        column3: `Column3 ${i}`,
+                        action: `Action ${i}`
+                    })),
+                    fixHeader: 200,
+                    virtual: false,
+                    stickScrollbar: false
+                };
+            }
+            
+            private Table = Table;
+            private TableColumn = TableColumn;
+        }
+
+        const [instance, element] = mount(Demo);
+        
+        // Test 1: fixHeader only - scroll left 50px
+        await wait();
+        const scrollContainer = element.querySelector('.k-table-wrapper') as HTMLElement;
+        scrollContainer.scrollLeft = 50;
+        await wait(100);
+        const affixWrapper1 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper1.scrollLeft).to.eql(50);
+        
+        // Test 2: fixHeader + virtual - scroll left 50px more (total 100px)
+        instance.set('virtual', true);
+        await wait();
+        scrollContainer.scrollLeft = 100;
+        await wait(100);
+        
+        const affixWrapper2 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper2.scrollLeft).to.eql(100);
+        
+        // Test 3: stickScrollbar + fixHeader - scroll right 50px (back to 50px)
+        instance.set('stickScrollbar', true);
+        await wait();
+        scrollContainer.scrollLeft = 50;
+        await wait(100);
+        
+        const affixWrapper3 = element.querySelector('.k-table-affix-header .k-affix-wrapper') as HTMLElement;
+        expect(affixWrapper3.scrollLeft).to.eql(50);
+    });
 });

package/components/table/useStickyHeader.ts

@@ -22,7 +22,7 @@ export function useStickyHeader(callbacks: ScrollCallback[]) {
 
     // when the scroll element scroll horizontally, scroll the sticky header too 
     callbacks.push(scrollLeft => {
-        if (isNull(stickHeader.value)) return;
+        if (isNull(stickHeader.value) && !instance.get('fixHeader')) return;
 
         const affixHeadWrapper = headRef.value!.parentElement as HTMLElement;
         affixHeadWrapper.scrollLeft = scrollLeft;

package/components/timepicker/demos/step.md

@@ -6,7 +6,7 @@ order: 2
 当指定了`step`属性时，组件将展示成`Select`样式，只能选择固定的几个时间点。通过`min`和`max`限定
 选择时间范围（默认：00:00:00 ~ 23:59:59），`step`指定步长，它们值类型都为时间字符串
 
-> 可以通过`showFomart`或`format`来格式化时间字符串，来隐藏“秒”
+> 可以通过`showFormat`或`format`来格式化时间字符串，来隐藏“秒”
 
 ```vdt
 import {Timepicker} from 'kpc';

package/components/timepicker/index.spec.ts

@@ -8,7 +8,6 @@ import {Timepicker} from 'kpc';
 import {Component} from 'intact';
 
 describe('Timepicker', () => {
-
     afterEach(async () => {
         unmount();
         await wait(500);
@@ -19,10 +18,18 @@ describe('Timepicker', () => {
         const [instance, element] = mount(BasicDemo);
 
         const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+        const inputInner = picker1.querySelector('.k-input-inner') as HTMLInputElement;
+
+        expect(inputInner.value).eql('');
         picker1.click();
         await wait(500);
-        let dropdown = getElement('.k-time-content')!;
+        expect(inputInner.value).eql('');
+
+        const dropdown = getElement('.k-time-content')!;
+        const ok = dropdown.querySelector('.k-btn') as HTMLElement;
+        expect(ok.classList.contains('k-disabled')).eql(true);
         expect(dropdown.innerHTML).to.matchSnapshot();
+
         const next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)') as HTMLElement;
         next.click();
         await wait();
@@ -32,7 +39,6 @@ describe('Timepicker', () => {
         await wait();
         expect(instance.get('time')).to.be.null;
         expect(dropdown.innerHTML).to.matchSnapshot();
-        const ok = dropdown.querySelector('.k-btn') as HTMLElement;
         ok.click();
         await wait(500);
         expect(instance.get('time')).to.eql('02:00:00');
@@ -43,27 +49,56 @@ describe('Timepicker', () => {
         await wait(500);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
+        // should reset show value on hiding
+        const activeHour = dropdown.querySelector('.k-scroll-select-item.k-active') as HTMLElement;
+        dispatchEvent(activeHour.nextElementSibling!, 'click');
+        await wait();
+        expect(inputInner.value).eql('04:03:03');
+        expect(instance.get('time')).eql('03:03:03');
+        document.body.click();
+        await wait();
+        expect(inputInner.value).eql('03:03:03');
+        expect(instance.get('time')).eql('03:03:03');
+    });
+
+    it('multipe time', async function() {
+        const [instance, element] = mount(BasicDemo);
+        const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+
         // multiple
         picker2.click();
-        await wait(500);
-        dropdown = getElement('.k-time-content')!;
-        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
+        let dropdown = getElement('.k-time-content')!;
         const ok2 = dropdown.querySelector('.k-btn') as HTMLElement;
+        expect(ok2.classList.contains('k-disabled')).eql(false);
+
+        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
+        const inputInner = picker2.querySelector('.k-input-inner') as HTMLInputElement;
+        expect(inputInner.value).eql('01:00:00');
+        expect(instance.get('timeArray')).eql([]);
+
         ok2.click();
-        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(12)')!.click();
+        await wait();
+        expect(instance.get('timeArray')).eql(['01:00:00']);
+
+        dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
+        await wait();
         ok2.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
+        expect(ok2.classList.contains('k-disabled')).eql(false);
+
         // click the same time will do nothing
         ok2.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
+
         // remove one value
         const [, close] = picker2.querySelectorAll<HTMLElement>('.k-tag-close');
         close.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00']);
-        expect(dropdown.innerHTML).to.matchSnapshot();
 
         // clear
         picker2.querySelector<HTMLElement>('.k-select-clear')!.click();
@@ -79,24 +114,107 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
     });
 
-    it('range', async () => {
-        const [instance, element] = mount(RangeDemo);
+    describe('range', () => {
+        it('basic', async () => {
+            const [instance, element] = mount(RangeDemo);
 
-        const picker = element.querySelector('.k-select') as HTMLElement;
-        picker.click();
-        await wait(500);
-        const dropdown = getElement('.k-time-content')!;
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
-        (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
-        await wait();
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-active')!.nextElementSibling!.nextElementSibling as HTMLElement).click();
-        await wait();
-        expect(dropdown.innerHTML).to.matchSnapshot();
-        dropdown.querySelector<HTMLElement>('.k-btn')!.click();
-        await wait();
-        expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
+            const picker = element.querySelector('.k-select') as HTMLElement;
+            picker.click();
+            await wait(500);
+            const dropdown = getElement('.k-time-content')!;
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            (end.querySelector('.k-active')!.nextElementSibling!.nextElementSibling as HTMLElement).click();
+            await wait();
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
+
+            // clear
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            expect(instance.get('time')).to.eql(null);
+        });
+
+        it('only select one value then click confirm button directly', async () => {
+            const [instance, element] = mount(RangeDemo);
+
+            const picker = element.querySelector('.k-select') as HTMLElement;
+            picker.click();
+            await wait();
+            const dropdown = getElement('.k-time-content')!;
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+
+            // skip select end and confirm
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['01:00:00', '23:59:59']);
+
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            picker.click();
+            await wait();
+            (end.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['00:00:00', '00:59:59']);
+
+            // click confirm directly
+            picker.querySelector<HTMLElement>('.k-select-clear')!.click();
+            await wait();
+            picker.click();
+            await wait();
+            dropdown.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            expect(instance.get('time')).eql(['00:00:00', '23:59:59']);
+        });
+
+        it('should unique', async () => {
+            const [instance, element] = mount(RangeDemo);
+            const [, multipe] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+
+            // multiple
+            multipe.click();
+            await wait();
+            let dropdown = getElement('.k-time-content')!;
+            const confirm = dropdown.querySelector('.k-btn') as HTMLElement;
+
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([['00:00:00', '23:59:59']]);
+
+            // confirm again
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([['00:00:00', '23:59:59']]);
+        });
+
+        it('should maintain consistency when we select the next value', async () => {
+            const [instance, element] = mount(RangeDemo);
+            const [, multipe] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
+            instance.set('timeArr', [['01:00:00', '02:00:00']]);
+
+            // multiple
+            multipe.click();
+            await wait();
+            let dropdown = getElement('.k-time-content')!;
+            const confirm = dropdown.querySelector('.k-btn') as HTMLElement;
+            const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+            await wait();
+            confirm.click();
+            await wait();
+            expect(instance.get('timeArr')).eql([
+                ['01:00:00', '02:00:00'],
+                ['02:00:00', '02:00:00'],
+            ]);
+        });
     });
 
     it('step', async () => {
@@ -123,11 +241,11 @@ describe('Timepicker', () => {
         (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-disabled')!.nextElementSibling as HTMLElement).click();
+        (end.querySelector('.k-active')!.previousElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
-        expect(instance.get('time')).to.eql(['00:30:00', '00:30:00']);
+        expect(instance.get('time')).to.eql(['00:30:00', '23:30:00']);
     });
 
     it('format', async () => {

package/components/timepicker/panelPicker.ts

@@ -10,14 +10,18 @@ import {useValue} from './useValue';
 import {useDisabled} from './useDisabled';
 import {usePanel} from '../datepicker/usePanel';
 import {State} from '../../hooks/useState';
-import {PanelTypes} from '../datepicker/usePanel';
 import {useStep} from './useStep';
 import {
     TimepickerProps,
     TimepickerEvents,
     TimepickerBlocks,
     typeDefs,
+    NOW_START,
+    NOW_END,
 } from './constants';
+import { useConfirm } from './useConfirm';
+import { StateValueItem } from '../datepicker/useValueBase';
+import { useDefaultValue } from './useDefaultValue';
 
 export class PanelPicker<
     Multipe extends boolean = false,
@@ -31,10 +35,12 @@ export class PanelPicker<
     static typeDefs = typeDefs;
 
     public formats = useFormats();
-    public disabled = useDisabled(this.formats);
-    public panel = usePanel(PanelTypes.Time);
-    public value = useValue(this.formats, this.disabled, this.panel);
+    public defaultValue = useDefaultValue();
+    public disabled = useDisabled(this.formats, this.defaultValue);
+    public panel = usePanel();
+    public value = useValue(this.formats, this.disabled, this.panel, this.defaultValue);
     public step = useStep(this.disabled, this.formats);
+    public confirm = useConfirm(this.value, this.formats.getValueString, this.defaultValue);
 
     protected getPlaceholder() {
         const {placeholder, range} = this.get();

package/components/timepicker/panelPicker.vdt

@@ -7,17 +7,19 @@ import {Button} from '../button';
 import {PanelFlags} from '../datepicker/usePanel';
 import {last} from '../datepicker/helpers';
 import {ScrollSelect} from '../scrollSelect';
+import { makeStyles as makeStylesInheritDatepicker } from '../datepicker/styles';
 
-const {className, range, multiple} = this.get();
+const {className, range, multiple, min, max} = this.get();
 const {
     value: {value},
-    onConfirm,
     onChangeTime,
     onChangeTimeByStep,
     getTimeValue,
+    setMoment,
 } = this.value;
 const lastValue = last(value);
 const { k } = this.config;
+const { onConfirm } = this.confirm;
 
 const classNameObj = {
     [`${k}-time-content`]: true,
@@ -56,7 +58,7 @@ const generatePanel = flag => {
     );
 };
 
-<t:super class={`${k}-timepicker`}>
+<t:super class={`${k}-timepicker ${makeStylesInheritDatepicker(k)}`}>
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
             <div class={`${k}-datepicker-wrapper`}>

package/components/timepicker/useConfirm.ts

@@ -0,0 +1,33 @@
+import {useInstance, Component, TypeDefs} from 'intact';
+import {useState, watchState, State} from '../../hooks/useState';
+import type {useFormats} from './useFormats';
+import type {useDisabled} from './useDisabled';
+import {isEqualArray, last, bind} from '../utils';
+import type { PanelPicker } from './panelPicker';
+import { useValue } from './useValue';
+import { StateValueRange, StateValue, DayjsValueRange, StateValueItem } from '../datepicker/useValueBase';
+import type { useDefaultValue } from './useDefaultValue';
+
+export function useConfirm(
+    value: ReturnType<typeof useValue>,
+    getValueString: ReturnType<typeof useFormats>['getValueString'],
+    defaultValue: ReturnType<typeof useDefaultValue>,
+) {
+    const instance = useInstance() as PanelPicker;
+
+    function onConfirm() {
+        const { multiple } = instance.get();
+        // if we click confirm button directly, set the value to placeholder values
+        value.setValue(defaultValue.get(), false);
+
+        if (!multiple) {
+            instance.hide();
+        } else {
+            value.unique();
+        }
+
+        value.updateValue();
+    }
+
+    return { onConfirm }
+}

package/components/timepicker/useDefaultValue.ts

@@ -0,0 +1,30 @@
+import { useInstance } from 'intact';
+import { StateValueItem } from '../datepicker/useValueBase';
+import type { PanelPicker } from './panelPicker';
+import { last } from '../datepicker/helpers';
+import {NOW_START, NOW_END} from './constants';
+import { isArray } from 'intact-shared';
+
+export function useDefaultValue() {
+    const instance = useInstance() as PanelPicker; 
+
+    function get(): StateValueItem {
+        const _value = instance.value.value.value;
+        const lastValue = last(_value);
+        const { range } = instance.get();
+
+        if (range) {
+            // consider the second last value to maintain consistency
+            const penulimate = getPenulimate(_value);
+            return Object.assign([NOW_START, NOW_END], penulimate, lastValue);
+        }
+        return lastValue || NOW_START;
+    }
+
+    return { get };
+}
+
+function getPenulimate(value: unknown[]) {
+    if (!isArray(value)) return;
+    return value[value.length - 2];
+}

package/components/timepicker/useDisabled.ts

@@ -1,13 +1,26 @@
+import { useInstance } from 'intact';
 import {useDisabled as useDisabledBase} from '../datepicker/useDisabled';
 import type {useFormats} from './useFormats';
 import {PanelFlags} from '../datepicker/usePanel';
+import {isGT, isLT, last} from '../datepicker/helpers';
+import type { PanelPicker } from './panelPicker';
+import { StateValueItem } from '../datepicker/useValueBase';
+import type { useDefaultValue } from './useDefaultValue';
 
-export function useDisabled(formats: ReturnType<typeof useFormats>) {
-    const {isDisabledTime, ...rest} = useDisabledBase(formats);
+export function useDisabled(
+    formats: ReturnType<typeof useFormats>,
+    defaultValue: ReturnType<typeof useDefaultValue>,
+) {
+    const instance = useInstance() as PanelPicker; 
+    const {isDisabledTime, isDisabledConfirm: isDisabledConfirmBase, isDisabledValue, ...rest} = useDisabledBase(formats);
 
     function isDisabledTimeByStep(value: string, flag: PanelFlags) {
-        return isDisabledTime(formats.createDateByValueFormat(value), flag);
+        return isDisabledTime(formats.createDateByValueFormat(value));
     } 
 
-    return {isDisabledTime, isDisabledTimeByStep, ...rest};
+    function isDisabledConfirm(): boolean {
+        return isDisabledValue(defaultValue.get());
+    } 
+
+    return {isDisabledTime, isDisabledTimeByStep, isDisabledConfirm, isDisabledValue, ...rest};
 }

package/components/timepicker/useFormats.ts

@@ -2,7 +2,7 @@ import {useInstance, Component} from 'intact';
 import dayjs, {Dayjs} from '../datepicker/dayjs';
 import {isString} from 'intact-shared';
 import type {TimepickerProps} from './';
-import type {Value} from '../datepicker/basepicker';
+import type {Value} from '../datepicker/useValueBase';
 import {YEAR_FORMAT, TIME_FORMAT, PREFIX} from './constants'
 
 export function useFormats<T extends Component<TimepickerProps>>() {

package/components/timepicker/useValue.ts

@@ -2,23 +2,29 @@ import {useInstance} from 'intact';
 import type {PanelPicker} from './panelPicker';
 import type {useFormats} from './useFormats';
 import {last} from '../utils';
-import {
-    useValue as useValueBase,
-    StateValueItem,
-    DayjsValueItem
-} from '../datepicker/basepicker';
+import {useValueBase, StateValueItem, DayjsValueItem, DayjsValue, StateValueRange} from '../datepicker/useValueBase';
 import type {useDisabled} from '../datepicker/useDisabled';
 import type {usePanel} from '../datepicker/usePanel';
 import {NOW_START, NOW_END} from './constants';
 import {PanelFlags} from '../datepicker/usePanel';
+import type Dayjs from 'dayjs';
+import type { useDefaultValue } from './useDefaultValue';
 
 export function useValue(
     formats: ReturnType<typeof useFormats>,
     disabled: ReturnType<typeof useDisabled>,
     panel: ReturnType<typeof usePanel>,
+    defaultValue: ReturnType<typeof useDefaultValue>,
 ) {
     const instance = useInstance() as PanelPicker;
-    const {value, getDayjsValue, setValue, onChangeTime, ...rest} = useValueBase(
+    const {
+        value,
+        getDayjsValue,
+        setValue,
+        onChangeTime,
+        getTimeValue: getTimeValueBase,
+        ...rest
+    } = useValueBase(
         formats,
         disabled,
         panel,
@@ -28,7 +34,7 @@ export function useValue(
         function(v: DayjsValueItem) {
             // pop the last value when input
             // because it is a placeholder date
-            value.value.pop();
+            // value.value.pop(); // no placeholder any more 
             setValue(v, true);
         },
         function() {
@@ -39,21 +45,18 @@ export function useValue(
         }
     );
 
-    setValue(getPlaceholderDates(), false);
-
-    instance.watch('value', value => {
-        const dayjsValue = getDayjsValue(); 
-        setValue(last(dayjsValue) || getPlaceholderDates(), false);
-    });
-
-    function getPlaceholderDates(): StateValueItem {
-        return instance.get('range') ? [NOW_START, NOW_END] : NOW_START;
-    }
-
     function onChangeTimeByStep(v: string, flag: PanelFlags) {
         const date = formats.createDateByValueFormat(v);
         onChangeTime(date, flag);
     }
 
-    return {value, setValue, getDayjsValue, onChangeTime, onChangeTimeByStep, ...rest};
+    function getTimeValue(flag: PanelFlags): Dayjs.Dayjs | null | undefined {
+        const value = defaultValue.get();
+        if (instance.get('range')) {
+            return (value as StateValueRange)[flag];
+        }
+        return value as Dayjs.Dayjs;
+    }
+
+    return {value, setValue, getDayjsValue, onChangeTime, onChangeTimeByStep, getTimeValue, ...rest};
 }

package/components/tour/demos/basic.md

@@ -0,0 +1,73 @@
+---
+title: 基础用法
+order: 0
+---
+
+```vdt
+import {Tour, Button} from 'kpc';
+
+<div>
+    <div class="example-container">
+        <Button id="btn1">示例元素1</Button>
+        <Button id="btn2" style="margin-left: 20px;">示例元素2</Button>
+    </div>
+    <Tour
+        v-model="currentStep"
+        visible={this.get('showTour')}
+        data={this.get('tourData')} 
+        ev-finish={this.close}
+    />
+    <div style="margin-top: 20px;">
+        <Button ev-click={this.settour}>
+            启动引导
+        </Button>
+        <span style="margin-left: 10px;">
+            当前步骤: {this.get('currentStep') >= 0 ? this.get('currentStep') + 1 : '未启动'}
+        </span>
+    </div>
+</div>
+```
+
+```ts
+import {bind} from 'kpc';
+import {TourStepProps} from 'kpc';
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            currentStep: 0 as number,
+            showTour: false,  // 默认不显示
+            tourData: [
+                {
+                    target: '#btn1',
+                    title: '第一步',
+                    content: '这是第一步的引导说明',
+                    position: 'bottom'
+                },
+                {
+                    target: '#btn2',
+                    title: '第二步',
+                    content: '这是第二步的引导说明',
+                    position: 'right'
+                }
+            ]
+        };
+    }
+
+    @bind
+    settour() {
+        this.set({
+            showTour: true,
+            currentStep: 0
+        });
+    }
+
+    @bind
+    close() {
+        this.set({
+            showTour: false
+        });
+    }
+}
+```