feat(components): tour component

[Fuphoenixes]

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

Description

🤖[deprecated] Generated by Copilot at 3aa9d89

This pull request adds a new Tour component to the element-plus library, which allows users to create guided tours for their products. The component consists of a main Tour component and three sub-components: TourStep, TourMask and TourSteps. The pull request also includes the documentation, examples and tests for the component, as well as the necessary changes to the components index file and the component sidebar menu.

Related Issue

Fixes #___.

Explanation of Changes

🤖[deprecated] Generated by Copilot at 3aa9d89

• Add a new Tour component to the components package, which guides users through a product with a series of steps (link, link, link, link)
• Implement the Tour component using sub-components for the mask, the step and the steps, which handle the masking effect, the guide card and the steps rendering respectively (link, link, link, link, link)
• Provide utility functions and types for the Tour component logic, such as useTarget, tourKey, isInViewPort, isSameProps, isSameSteps and getNormalizedProps (link)
• Use the withInstall and withNoopInstall helpers to enable global and local registration of the Tour component and its sub-component TourStep (link)
• Use the ElTooltip, ElButton and ElIcon components to enhance the Tour component UI and functionality (link, link)
• Use the useLockscreen hook to prevent scrolling when the mask is visible (link)
• Add unit tests for the Tour component using the vitest framework (link)
• Add documentation for the Tour component, which includes the basic usage, examples, API, slots and events (link, link)
• Add examples for the Tour component, which show how to use the component with different props and slots, such as mask, placement, type and indicator (link, link, link, link, link)

[pull-request-triage]

👋 @Fuphoenixes, thank you for contributing element-plus.

• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

Hello @Fuphoenixes, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=14952
Please comment the example via this playground if needed.

[Fuphoenixes]

tour_zh-CN.md
这是该组件的中文文档的md文件

[Fuphoenixes]

🧪 Playground Preview: https://element-plus.run/?pr=14952 Please comment the example via this playground if needed.

link

[Fuphoenixes]

@btea do we need this component?

[btea]

cc @element-plus/backers

[kooriookami]

Wow, it looks great. I tried it simply and found a problem. When using mask, the buttons behind the mask shouldn't be clickable.

[Fuphoenixes]

Wow, it looks great. I tried it simply and found a problem. When using mask, the buttons behind the mask shouldn't be clickable.

thanks, i have already resolved it.

[Fuphoenixes]

sorry, I changed my git account, so I force-pushed a few more times

[kooriookami]

There're some problems:

1. Focus on popup and press esc, the popup disappeared.
   
2. When popup has no space, click the begin tour button, it shows in the wrong place.
   
   

[ryuhangyeong]

Opinion

1. There may be cases where it cannot be used properly in a mobile environment.

   

2. focus trap not working

3. button is styled as if it can't go to the next step, even though it could. (It seems to be a bug)

   

[Fuphoenixes]

There're some problems:

1. Focus on popup and press esc, the popup disappeared.
   
2. When popup has no space, click the begin tour button, it shows in the wrong place.
   
   

Opinion

1. There may be cases where it cannot be used properly in a mobile environment.
   
2. focus trap not working
3. button is styled as if it can't go to the next step, even though it could. (It seems to be a bug)
   

I refactored it and then resolved these issues.

[Fuphoenixes]

Display exceptions outside of the doc.

done

[Fuphoenixes]

@btea resolved

[kooriookami]

I think if no other bugs, it can be merged.

[FrontEndDog]

Wow, it looks great. I tried it simply and found a problem. When using mask, the buttons behind the mask shouldn't be clickable.

This issue has not been resolved.

[Fuphoenixes]

Wow, it looks great. I tried it simply and found a problem. When using mask, the buttons behind the mask shouldn't be clickable.

This issue has not been resolved.

Hasn't this issue been resolved? Does it mean that the buttons in this blank area cannot be clicked?

[Fuphoenixes]

I think this should allow for clicks, which might be useful in some cases.

[FrontEndDog]

I think this should allow for clicks, which might be useful in some cases.

I think it's more reasonable not to be clickable.
For example, If these buttons are clicked, it will cause the page to jump, it will interrupt the guidance process.

[Fuphoenixes]

I think this should allow for clicks, which might be useful in some cases.

I think it's more reasonable not to be clickable. For example, If these buttons are clicked, it will cause the page to jump, it will interrupt the guidance process.

How about adding a configuration and letting the user decide? Not clickable by default?

[FrontEndDog]

I think this should allow for clicks, which might be useful in some cases.

I think it's more reasonable not to be clickable. For example, If these buttons are clicked, it will cause the page to jump, it will interrupt the guidance process.

How about adding a configuration and letting the user decide? Not clickable by default?

Yes, This is better.

[Fuphoenixes]

Okay, I have added it

[FrontEndDog]

Thanks, It is great!
Merry Christmas!