feat: ✨ 新增Tour引导操作组件 #608
feat: ✨ 新增Tour引导操作组件 #608
Conversation
用于引导用户了解产品功能的气泡组件
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for wot-design-uni ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
Walkthrough此次更改引入了多个组件的文档和功能更新，包括新增的 Changes
Possibly related PRs
Suggested reviewers
Poem
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (10)
Files skipped from review due to trivial changes (1)
Files skipped from review as they are similar to previous changes (2)
Additional comments not posted (10)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
src/uni_modules/wot-design-uni/components/wd-tour/wd-tour.vue (1)
98-119: 考虑优化错误处理在
setPopupStyles方法中，对于可能出现的错误，目前只是使用console.error进行了输出。建议对错误进行更细致的处理，例如：
- 对不同类型的错误进行区分和提示，帮助开发者快速定位问题。
- 在生产环境下，可以考虑降级处理，避免影响用户体验。
- 可以将错误信息记录到日志系统，方便后续问题排查。
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (7)
- docs/component/tour.md (1 hunks)
- src/pages.json (2 hunks)
- src/pages/index/Index.vue (1 hunks)
- src/pages/tour/Index.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-tour/index.scss (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-tour/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-tour/wd-tour.vue (1 hunks)
Additional comments not posted (23)
src/pages/tour/Index.vue (3)
4-11: 示例清晰展示了Tour组件的基本用法。该示例通过一个按钮点击触发Tour引导，并通过
show1状态变量控制Tour的显示和隐藏。Tour的步骤定义在steps1数组中，包含了正确的属性配置。
13-24: 示例很好地展示了Tour组件的样式定制功能。该示例通过设置
bgColor属性自定义了Tour的背景颜色，并通过content插槽和contentStyle属性自定义了提示内容的样式。这为用户提供了灵活的样式定制选项，以满足不同的设计需求。
26-38: 示例完整展示了Tour组件的多步骤引导功能。该示例定义了两个引导步骤，分别通过
target属性指定了不同的目标元素。这种方式可以引导用户按照特定的顺序了解页面的不同部分和功能。示例中还通过popupStyle属性自定义了提示框的样式，以适应不同的设计需求。src/uni_modules/wot-design-uni/components/wd-tour/types.ts (4)
7-7: 类型定义正确
TTourType类型定义正确，涵盖了引导组件的两种模式：'step' 和 'card'。导出该类型以便在代码库的其他部分使用是一个很好的实践。
12-29: 接口定义完整
IStepOptions接口定义完整，涵盖了配置引导步骤所需的属性。其中：
target属性支持字符串选择器和 Element 对象，提供了灵活性。content属性是可选的，允许存在没有内容的步骤。- 自定义样式属性
contentStyle和popupStyle允许对步骤进行细粒度的样式设置。接口的设计考虑周全，非常适合引导组件的使用场景。
35-42: 接口定义合理
IRect接口以结构化的方式表示元素的尺寸和位置，其中：
- 泛型类型参数
T允许值类型（数字或字符串）的灵活性。- 所有属性都是可选的，允许部分尺寸/位置定义。
接口的设计合理，可以满足各种场景下表示元素尺寸和位置的需求。
44-120: 组件属性定义完善
tourOptions常量包含了引导组件的所有属性定义，其中：
- 使用了
../common/props中的baseProps，并定义了引导组件特有的其他属性。- 属性名描述清晰，遵循一致的命名约定。
- 使用 Vue 的
PropType工具类型正确定义了属性类型。- 为可选属性提供了默认值，确保组件有合理的默认行为。
属性定义完善，涵盖了引导组件的各种配置需求，非常适合组件的使用场景。
src/uni_modules/wot-design-uni/components/wd-tour/index.scss (5)
4-17: 很棒的 mixin！这个 mixin 提供了一种可重用的方式来定位元素的伪元素在底部。它允许自定义水平位置（左侧或右侧）和偏移量，使用条件语句根据提供的参数应用适当的样式。mixin 的逻辑和语法都没有明显的问题。
19-34: 很好的深色主题样式！这些样式为
wd-tour组件提供了一个深色主题变体。它们将文本颜色更改为较浅的阴影以获得更好的对比度，调整遮罩元素的阴影以创建更暗的叠加层，将弹出元素的背景色更改为较暗的阴影，并更新箭头的边框颜色以匹配较暗的背景。样式的语法和属性没有明显的问题。
37-45: 遮罩元素样式没问题！这些样式将元素定位为固定的，以覆盖整个视口。它有一个透明的背景，允许下面的内容可见。高 z-index 确保元素显示在其他内容之上。样式的语法和属性没有明显的问题。
46-81: 弹出元素样式看起来不错！这些样式将弹出元素定位为固定的，具有高 z-index，以显示在其他内容之上。它有一个白色背景和圆角。箭头使用 ::before 伪元素创建，并根据修饰符类定位在不同的位置。箭头的边框颜色设置为与弹出框的背景色相匹配。
position-bottommixin 用于将箭头定位在左侧和右侧位置的底部。样式的语法、属性和修饰符使用没有明显的问题。
93-124: 内容元素样式没有问题！这些样式设置内容元素的显示、内边距、外边距、字体大小和对齐方式。顶部内容右对齐，当有标题时具有底部外边距。内部内容具有外边距和较小的字体大小，当有标题时没有外边距。底部内容具有顶部外边距，并使用 flexbox 进行对齐和间距。bottom-init 内容具有水平外边距。bottom-operate 内容使用 flexbox 进行对齐，元素之间有间隙。样式的语法、属性和修饰符使用没有明显的问题。
docs/component/tour.md (6)
7-28: 文档说明清晰，示例代码恰当。该部分对
Tour组件的基本用法进行了清晰的说明，提到了target属性应设置为目标元素的id。同时，针对微信小程序的特殊性给出了很好的提示。示例代码也很好地演示了基本的组件设置。
39-54: 类型说明准确，示例代码恰当。该部分对引导类型
step和card进行了清晰的说明。同时提到无论使用哪种类型，基本数据类型需要保持一致，这一点很重要。示例代码也很好地展示了两种类型的区别。
56-90: 自定义样式说明清晰，示例代码恰当。该部分对如何使用
popupStyle和contentStyle自定义每个步骤的样式进行了清晰的说明。同时提到开发者应避免覆盖默认的必要参数，这一点很有帮助。示例代码也很好地演示了自定义样式的用法。
92-113: 自定义内容说明清晰，示例代码恰当。该部分对如何使用
slot插槽自定义气泡弹出层内容进行了清晰的说明。示例代码也很好地演示了自定义内容的用法。
115-133: 组件属性列表完整，说明详细。该部分以表格的形式列出了
Tour组件的所有属性。每个属性都有说明、类型、可选值、默认值和最低版本的详细信息。表格格式清晰易读。
134-164: 数据格式、插槽、事件和外部样式类列表完整，说明详细。这些部分以表格的形式列出了
Tour组件的steps属性的数据格式、可用插槽、事件和外部样式类。每个项目都有详细的说明和最低版本信息。表格格式清晰易读。src/uni_modules/wot-design-uni/components/wd-tour/wd-tour.vue (3)
1-65: 模板结构清晰，逻辑合理模板部分的结构和逻辑都很清晰，通过条件渲染和样式绑定实现了引导步骤的显示和定位。以下是一些细节：
- 根元素绑定了 class 和 touchmove 事件以防止滚动。
- 使用 v-show 指令控制遮罩层和弹出层的显示。
- 通过 v-for 指令渲染引导步骤，并根据当前步骤的索引进行条件渲染。
- 弹出层的位置和对齐方式通过样式绑定动态设置。
- 提供了自定义内容和按钮的插槽。
总体而言，模板部分的实现很好，没有明显的问题。
67-179: 使用 Composition API，逻辑清晰脚本部分使用了 Vue 3 的 Composition API 和 script setup 语法，代码结构清晰，逻辑易于理解。以下是一些细节：
- 通过
defineProps和defineEmits函数定义了组件的 props 和 emits。- 使用
ref函数定义了响应式状态变量。- 使用
computed函数定义了计算属性。- 定义了计算弹出层位置和处理用户交互的方法。
- 使用侦听器响应
modelValueprop 的变化。总体而言，脚本部分的实现很好，代码可读性和可维护性较高。
181-183: 样式引入方式合理样式部分使用了 SCSS 语法，并通过
@import语句引入了外部的样式文件。这种方式可以使组件的样式与结构和逻辑分离，提高代码的可维护性。src/pages.json (1)
755-764: 代码没有问题！新增的"tour"页面配置正确无误，包括：
- 页面路径和名称设置恰当。
- 样式配置禁用了垂直方向的回弹滚动，并设置了导航栏标题文本。
- 整体结构和值都没有明显问题。
添加这个新页面有效地扩展了应用程序的导航结构。
src/pages/index/Index.vue (1)
292-295: 看起来不错！新增的
tour条目与现有的list数组结构一致，表明正在引入一个新的"引导"功能。这个改动是合理的。
用于引导用户了解产品功能的气泡组件
用于引导用户了解产品功能的气泡组件
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
adjustPosition属性，允许开发者控制键盘显示时页面位置的自动调整。before-preview功能，新增file参数，提供更详细的文件处理信息。文档
样式