@king-design/intact 3.5.2 → 3.6.0

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; 

package/components/tour/tour.ts

@@ -0,0 +1,107 @@
+import {
+    Component,
+    TypeDefs,
+    VNode,
+    createRef,
+    onMounted,
+    onUpdated,
+    nextTick
+} from "intact";
+import template from "./tour.vdt";
+import { useConfigContext } from '../config';
+import { TourStepProps } from './step';
+import type {Events} from '../types';
+import { createContext } from '../context';
+import { usePosition } from './usePosition';
+import { Feedback } from '../position';
+import { useSteps } from './useSteps';
+import { useArrow } from './useArrow';
+import { useHighlight } from './useHighlight';
+import { useNavigation } from './useNavigation';
+import { useFixBody } from './useFixBody';
+import { useMaskClosable } from './useMaskClosable';
+import {Theme, themes} from './styles';
+
+export interface TourProps {
+    value?: number;
+    theme?: Theme
+    data?: TourStepProps[];
+    beforeChange?: (current: number) => boolean | Promise<boolean>;
+    maskClosable?: boolean;
+    closable?: boolean;
+    doneText?: string;
+    showArrow?: boolean;
+    visible?: boolean;
+}
+
+export interface TourEvents {
+    finish: [];
+    prev: [number];
+    next: [number];
+    positioned: [Feedback];
+}
+
+export interface TourBlocks {
+    default: null;
+}
+
+export interface TourContextValue {
+    value: number;
+    total: number;
+    doneText: string;
+    closable: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    onFinish: () => void;
+}
+
+export const TourContext = createContext<TourContextValue>();
+
+const typeDefs: Required<TypeDefs<TourProps>> = {
+    value: Number,
+    theme: themes,
+    data: Array,
+    beforeChange: Function,
+    maskClosable: Boolean,
+    closable: Boolean,
+    doneText: String,
+    showArrow: Boolean,
+    visible: Boolean,
+};
+
+const defaults = (): Partial<TourProps> => ({
+    value: 0,
+    theme: 'light',
+    data: [],
+    maskClosable: true,
+    closable: true,
+    doneText: '完成',
+    showArrow: true,
+    visible: true,
+});
+
+const events: Events<TourEvents> = {
+    finish: true,
+    prev: true,
+    next: true,
+    positioned: true,
+};
+
+export class Tour extends Component<TourProps, TourEvents, TourBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static events = events;
+
+    public config = useConfigContext();
+    public tourRef = createRef<HTMLDivElement>();
+    
+    public steps = useSteps();
+    public arrow = useArrow();
+    public highlight = useHighlight(this.steps.getTargetElement);
+    private position = usePosition(this.tourRef, this.steps.getTargetElement);
+    public navigation = useNavigation(this.steps.getTotalSteps);
+    private fixBody = useFixBody();
+    private useMaskClosable = useMaskClosable();
+    
+} 

package/components/tour/tour.vdt

@@ -0,0 +1,83 @@
+import {makeStyles} from './styles';
+import {TourStep} from './step';
+import {TourContext} from './tour';
+import {getRestProps, stopPropagation} from '../utils';
+import {mapChildren, isComponentVNode} from '../utils';
+
+const { className, data, children, value, hoverable,
+    showArrow, theme, visible, maskClosable,
+    doneText, closable,
+} = this.get();
+const { k } = this.config;
+
+const currentValue = value !== undefined ? value : 0;
+const {arrowType, arrowRef} = this.arrow;
+const {highlightRef} = this.highlight;
+const {prev, next, finish} = this.navigation;
+const {getTotalSteps} = this.steps;
+
+const contextValue = {
+    value: value || 0,
+    total: getTotalSteps(),
+    doneText: doneText,
+    closable: closable,
+    onPrev: prev,
+    onNext: next,
+    onFinish: finish
+}
+
+const classNameObj = {
+    [`${k}-tour`]: true,
+    [`${k}-${theme}`]: true,
+    [className]: className,
+    [makeStyles(k)]: true,
+};
+
+<div class={classNameObj} {...getRestProps(this)} v-if={visible}>
+    <TourContext.Provider value={contextValue}>
+        {/* 高亮目标元素 */}
+        <div 
+            class={{
+                [`${k}-tour-target-highlight`]: true,
+                [`${k}-hoverable`]: hoverable
+            }}
+            v-if={currentValue !== undefined} 
+            ref={highlightRef}
+        ></div>
+        
+        {/* 步骤内容 */}
+        <div
+            class={`${k}-tour-step-wrapper`} 
+            ref={this.tourRef}
+            ev-click={stopPropagation}
+        >
+            <template v-if={!children}>
+                <TourStep 
+                    v-for={data} 
+                    v-if={$key === currentValue}
+                    key={$key}
+                    {...$value}
+                />
+            </template>
+            <template v-else>
+                {mapChildren(children, (vNode, index) => {
+                    if (isComponentVNode(vNode, TourStep)) {
+                        if (index === currentValue) {
+                            return vNode;
+                        }
+                    }
+                    return null;
+                })}
+            </template>
+            
+            {/* 箭头 */}
+            <i v-if={showArrow && arrowType.value}
+                class={{
+                    [`${k}-tour-arrow`]: true,
+                    [`${k}-${arrowType.value}`]: arrowType.value,
+                }}
+                ref={arrowRef}
+            ></i>
+        </div>
+    </TourContext.Provider>
+</div>

package/components/tour/useArrow.ts

@@ -0,0 +1,46 @@
+import {useInstance, createRef, nextTick} from 'intact';
+import { Tour } from './tour';
+import {Feedback} from '../position';
+import {useState} from '../../hooks/useState';
+import {clamp} from '../utils';
+
+export function useArrow() {
+    const instance = useInstance() as Tour;
+    const arrowType = useState<string | null>(null);
+    const arrowRef = createRef<HTMLElement>();
+
+    // 监听positioned事件
+    instance.on('positioned', (feedback: Feedback) => {
+        updateArrow(feedback);
+    });
+
+    // update arrow position and type
+    function updateArrow(feedback: Feedback) {
+        if (!instance.get('showArrow')) return;
+
+        arrowType.set(feedback[feedback.important]);
+        
+        nextTick(() => {
+            if (instance.$unmounted) return;
+
+            const arrow = arrowRef.value!;
+            const {target, element} = feedback;
+            
+            if (feedback.important === 'vertical') {
+                // vertical important, adjust horizontal position
+                const arrowWidth = arrow.offsetWidth;
+                let left = target.left - element.left + (target.width - arrowWidth) / 2;
+                left = clamp(left, 1, element.width - 1 - arrowWidth);
+                arrow.setAttribute('style', `left: ${left}px`);
+            } else {
+                // horizontal important, adjust vertical position
+                const arrowHeight = arrow.offsetHeight;
+                let top = target.top - element.top + target.height / 2 - arrowHeight / 2;
+                top = clamp(top, 1, element.height - 1 - arrowHeight);
+                arrow.setAttribute('style', `top: ${top}px`);
+            }
+        });
+    }
+
+    return {arrowType, arrowRef};
+} 

package/components/tour/useFixBody.ts

@@ -0,0 +1,22 @@
+import {useInstance} from 'intact';
+import type {Tour} from './tour';
+import {useFixBody as useFixBodyHook} from '../../hooks/useFixBody';
+
+export function useFixBody() {
+    const instance = useInstance() as Tour;
+    
+    const fixBodyHook = useFixBodyHook();
+
+    instance.watch('visible', (visible) => {
+        if (visible) {
+            fixBodyHook.onOpen();
+        } else {
+            fixBodyHook.onClose();
+        }
+    });
+
+    return {
+        onOpen: fixBodyHook.onOpen,
+        onClosed: fixBodyHook.onClose
+    };
+}

package/components/tour/useHighlight.ts

@@ -0,0 +1,36 @@
+import {useInstance, createRef, nextTick} from 'intact';
+import { Tour } from './tour';
+
+export function useHighlight(getTargetElement: (index?: number) => HTMLElement | null,) {
+    const instance = useInstance() as Tour;
+    const highlightRef = createRef<HTMLElement>();
+
+    instance.on('$updated' as any, updateHighlight);
+        
+    instance.watch('visible', (visible) => {
+        if (visible) {
+            nextTick(() => {
+                updateHighlight();
+            });
+        }
+    });
+    
+    // update highlight element position and size
+    function updateHighlight() {
+        const highlightElem = highlightRef.value;
+        const targetElem = getTargetElement();
+        
+        if (highlightElem && targetElem) {
+            const rect = targetElem.getBoundingClientRect();
+            const padding = 8;
+            
+            highlightElem.style.width = `${rect.width + padding * 2}px`;
+            highlightElem.style.height = `${rect.height + padding * 2}px`;
+            highlightElem.style.position = 'fixed';
+            highlightElem.style.left = `${rect.left - padding}px`;
+            highlightElem.style.top = `${rect.top - padding}px`;
+        }
+    }
+
+    return {highlightRef, updateHighlight};
+} 

package/components/tour/useMaskClosable.ts

@@ -0,0 +1,26 @@
+import { useInstance } from "intact";
+import { useDocumentClick } from "../../hooks/useDocumentClick";
+import type {Tour} from './tour';
+
+export function useMaskClosable() {
+    const tour = useInstance() as Tour;
+    const [addDocumentClick, removeDocumentClick] = useDocumentClick(tour.tourRef, (e) => {
+        const maskClosable = tour.get('maskClosable');
+        if (maskClosable) {
+            // 检查点击的是否是当前目标元素或其子元素
+            const targetElement = tour.steps.getTargetElement();
+            if (targetElement && (e.target === targetElement || targetElement.contains(e.target as Node))) {
+                return; // 点击的是目标元素，不关闭
+            }
+            tour.navigation.finish();
+        }
+    }, true);
+
+    tour.watch('visible', (visible: boolean | undefined) => {
+        if (visible) {
+            addDocumentClick();
+        } else {
+            removeDocumentClick();
+        }
+    });
+}

package/components/tour/useNavigation.ts

@@ -0,0 +1,46 @@
+import {useInstance, createRef, nextTick} from 'intact';
+import { Tour } from './tour';
+
+export function useNavigation(getTotalSteps: () => number) {
+    const instance = useInstance() as Tour;
+    
+    async function prev() {
+        const { value, beforeChange } = instance.get();
+        if (value === undefined || value <= 0) return;
+
+        if (beforeChange) {
+            const canChange = await beforeChange(value - 1);
+            if (canChange === false) return;
+        }
+
+        instance.set('value', value - 1);
+        instance.trigger('prev', value - 1);
+    }
+
+    async function next() {
+        const { value, beforeChange } = instance.get();
+        if (value === undefined) return;
+
+        const steps = getTotalSteps();
+        
+        if (value >= steps - 1) {
+            finish();
+            return;
+        }
+
+        if (beforeChange) {
+            const canChange = await beforeChange(value + 1);
+            if (canChange === false) return;
+        }
+
+        instance.set('value', value + 1);
+        instance.trigger('next', value + 1);
+    }
+
+    function finish() {
+        instance.trigger('finish');
+        instance.set('visible', false);
+    }
+
+    return {prev, next, finish};
+}