Skip to content

feat: new component tour #1875

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

feat: new component tour #1875

wants to merge 6 commits into from

Conversation

cszhjh
Copy link
Member

@cszhjh cszhjh commented Apr 6, 2025

Checklist

List of tasks you have already done and plan to do.

  • Fix linting errors
  • Tests have been added / updated (or snapshots)

Change information

Describe your modifications here.

Issues

close #1797

Related Links

Links related to this pr.

Copy link

vercel bot commented Apr 6, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
varlet ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 3, 2025 10:47am

Copy link

vercel bot commented Apr 6, 2025

@cszhjh is attempting to deploy a commit to the varletjs Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

pkg-pr-new bot commented Apr 6, 2025

Open in StackBlitz

@varlet/cli

npm i https://pkg.pr.new/@varlet/cli@1875

@varlet/icons

npm i https://pkg.pr.new/@varlet/icons@1875

@varlet/import-resolver

npm i https://pkg.pr.new/@varlet/import-resolver@1875

@varlet/preset-tailwindcss

npm i https://pkg.pr.new/@varlet/preset-tailwindcss@1875

@varlet/preset-unocss

npm i https://pkg.pr.new/@varlet/preset-unocss@1875

@varlet/touch-emulator

npm i https://pkg.pr.new/@varlet/touch-emulator@1875

@varlet/shared

npm i https://pkg.pr.new/@varlet/shared@1875

@varlet/ui

npm i https://pkg.pr.new/@varlet/ui@1875

@varlet/use

npm i https://pkg.pr.new/@varlet/use@1875

@varlet/vite-plugins

npm i https://pkg.pr.new/@varlet/vite-plugins@1875

commit: 72d20ea

@haoziqaq
Copy link
Member

haoziqaq commented Apr 29, 2025

总体感觉非常好,几个修改意见:

  1. var-tour-step 的样式风格和 api 设计感觉应该与 dialog 组件有一定的映射关系,毕竟都是 “对话框”。
  2. 内置的关闭按钮,最好换一种风格。
    image
  3. indicators 最好是能做到点击时切换步骤
  4. 增加 esc 的键盘触发关闭
  5. primary 的 indicator 未选中的状态颜色不太明显,可能需要优化一下
    image

Comment on lines +20 to +43
function flattedChildren(subTree: any) {
const vNodes: VNode[] = []

const flat = (subTree: any) => {
if (subTree?.component) {
flat(subTree?.component.subTree)
return
}

if (isArray(subTree?.children)) {
subTree.children.forEach((child: any) => {
if (isVNode(child)) {
vNodes.push(child)

flat(child)
}
})
}
}

flat(subTree)

return vNodes
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个在 space 组件也有类似实现,最好是用同一个实现。

const total = result.length

if (cacheTotal !== total) {
emit('update-total', total)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最好是不要在渲染函数里 emit 事件,建议改成 useChildren useParent

}

export const props = {
open: Boolean,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改成 show 吧,跟其他组件 api 一致性高一些

export const props = {
target: [String, Object] as PropType<string | HTMLElement>,
title: String,
description: String,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个要不要改成 message?

@haoziqaq
Copy link
Member

haoziqaq commented May 5, 2025

TourSteps 这个组件可以考虑一下使用 useChildren useParent 之后,是否还是必要的。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] New component Tour
2 participants