iter(g53): 新增 tour 引导漫游组件

This commit is contained in:
HIsheR
2026-10-26 12:17:22 +08:00
parent bb8c44df60
commit 697d354703
12 changed files with 339 additions and 10 deletions
+38 -1
View File
@@ -65,7 +65,8 @@
"autoComplete(props):输入联想,输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起,options 可传函数做远程联想",
"datePicker(props):日期选择,单月网格 + 翻月 / 今天快捷键,value 为 YYYY-MM-DD 信号,min/max 闭区间限制,方向键逐日逐周可导航",
"backTop(props):返回顶部悬浮按钮,越过阈值才浮现,外环 conic-gradient 显示已滚比例,点击平滑回顶",
"colorPicker(props):颜色选择,预设色板(缺省语义令牌色)+ 原生取色器 + 手输 CSS 颜色串,value 为颜色串信号"
"colorPicker(props):颜色选择,预设色板(缺省语义令牌色)+ 原生取色器 + 手输 CSS 颜色串,value 为颜色串信号",
"tour(props):引导漫游,返回 { el, start, close } 句柄;聚光框按 target 选择器定位,卡片自动选方位,Esc / 跳过走 onClose"
],
"keyTypes": [
"ButtonProps",
@@ -2244,6 +2245,42 @@
"点色块即提交;手输框支持任意 CSS 颜色串(含 var(--ua-color-accent)),回车提交",
"触发器左侧色块始终预览当前值,点击外部或 Esc 收起"
]
},
{
"id": "tour",
"title": "引导漫游 Tour",
"demo": "sec-tour",
"props": [
{
"n": "steps",
"t": "TourStep[]",
"r": 1,
"d": "步骤序列:每步含 target 选择器、title、可选 description"
},
{
"n": "padding",
"t": "number",
"d": "聚光区相对目标的外扩像素;缺省 6"
},
{
"n": "onFinish",
"t": "() => void",
"d": "走完最后一步的回调"
},
{
"n": "onClose",
"t": "() => void",
"d": "中途跳过(× 或 Esc)的回调"
}
],
"example": "const t = tour({ steps: [{ target: '#sec-tour', title: '引导漫游', description: '按选择器定位' }], onFinish: () => toast.success('完成') }); document.body.append(t.el); t.start();",
"steps": [
"tour() 返回 { el, start, close } 句柄:el 必须挂到 body(fixed 定位,不占布局)",
"start() 从第一步播放,可重复调用重播;close() 立即退出并按跳过处理",
"聚光框按 target 选择器定位并外扩 padding,其余区域由超大 box-shadow 压暗(省掉独立遮罩层)",
"卡片优先落在目标下方,空间不足自动翻到上方,左右夹在视口内;滚动 / 缩放会实时重算",
"末步按钮文案变「完成」并触发 onFinish;× 或 Esc 触发 onClose,焦点归还开启前的元素"
]
}
]
}