feat: ✨ 新增tour操作引导组件 #606
feat: ✨ 新增tour操作引导组件 #606
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更改引入了一个新的 Changes
Possibly related PRs
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
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 (
|
✅ 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. |
![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 (2)
src/uni_modules/wot-design-uni/components/wd-tour/types.ts (1)
35-43: 考虑改进maxWidth属性的类型
IRect接口的所有属性都是可选的，这提供了灵活性。但是maxWidth属性的类型是any，这可能会导致类型不一致。建议将其类型改为与其他属性一致，例如T。export interface IRect<T extends number | string> { width?: T height?: T top?: T right?: T bottom?: T left?: T - maxWidth?: any + maxWidth?: T }src/pages/index/Index.vue (1)
292-295: 看起来不错！添加新的"tour"功能。添加一个新的
tour条目来表示新功能是合理的。请确保在应用程序的其他相关部分（如路由、组件等）也完成了相应的实现，以保证功能的完整性。
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 (26)
src/uni_modules/wot-design-uni/components/wd-tour/types.ts (3)
7-7: 类型定义正确
TTourType类型正确地定义了引导组件的两种格式：'step' 和 'card'。这个类型可以用来指定引导组件的格式。
12-29: 接口定义完整
IStepOptions接口完整地定义了引导组件每一步的配置选项，包括目标元素、内容以及自定义样式等。这个接口涵盖了配置引导步骤所需的必要属性。
45-121: 配置选项全面且文档完整
tourOptions对象汇集了用于配置引导组件的各种属性，包括可见性、引导格式、步骤、导航、外观和行为等。每个属性都有完整的 JSDoc 注释，描述了其用途和类型。这些属性涵盖了引导组件的广泛配置选项。属性类型使用了
makeBooleanProp、makeNumberProp和makeStringProp等实用函数进行定义，确保了类型的正确性。总的来说，
tourOptions对象的定义是全面且文档完整的。src/pages/tour/Index.vue (3)
1-46: 模板结构清晰，引导功能实现得当模板部分的代码组织合理，使用了语义化的组件将不同的引导实例分隔开。引导实例的触发方式包括按钮点击和选项卡点击，覆盖了常见的交互场景。
wd-tour组件的使用方式正确，通过v-model控制显示状态，通过steps属性配置引导步骤。第二个引导实例还使用了插槽来自定义引导内容的样式，体现了组件的灵活性。整体上模板部分的代码结构合理，没有明显的错误或可优化的地方。
47-100: 脚本逻辑清晰，配置合理脚本部分使用了
setup组合式 API，可以更好地组织组件的逻辑，提高代码的可读性和可维护性。使用ref函数创建响应式变量的方式正确，可以在模板中直接使用这些变量。定义了 4 个布尔类型的响应式变量，分别对应 4 个引导实例，命名清晰，易于理解。定义了 4 个数组常量，分别存储 4 个引导实例的步骤配置，结构清晰，属性配置合理。步骤配置中使用了
target属性指定目标元素的 ID，可以准确地控制引导的位置。步骤配置中还使用了popupStyle和contentStyle属性来自定义引导弹窗和内容的样式，提高了组件的灵活性。整体上脚本部分的代码逻辑清晰，没有明显的错误或可优化的地方。
102-102: 空的样式部分是可以接受的组件使用了
scoped属性来限制样式的作用域，可以防止组件的样式影响到其他组件，提高了组件的封装性。由于组件主要使用了第三方的
wd-tour组件，且通过属性和插槽来自定义样式，因此没有在样式部分定义额外的样式，是合理的。空的样式部分在这种情况下是可以接受的。src/uni_modules/wot-design-uni/components/wd-tour/index.scss (3)
1-2: 代码看起来不错！从其他 SCSS 文件中导入 mixins 和变量是一种很好的做法，可以提高代码的可重用性和可维护性。
4-17: Mixin 实现得很好！
position-bottommixin 允许根据水平对齐方式和偏移值动态定位元素，提供了很好的灵活性。它使用伪元素::before来定位元素，并根据$horizontal-position参数调整left或right属性。Mixin 的实现看起来没有问题。
19-125: 样式组织得很好！
.wot-theme-dark类为深色主题应用了特定的样式，包括遮罩和弹出元素的颜色调整和阴影效果。主结构样式涵盖了引导组件的遮罩背景、弹出窗口和内容。弹出窗口的样式包括箭头定位和放置的变体（左上、右上、左下、右下）。内容样式定义了内容不同部分（顶部、内部、底部）的布局和间距。
使用 BEM 命名约定和 SCSS 嵌套提高了代码的组织性和可维护性。样式的实现看起来没有问题。
docs/component/tour.md (9)
7-28: 示例清晰易懂！基本用法部分的示例代码清晰易懂，很好地展示了如何设置
target属性来指定目标元素的id。同时，针对微信小程序的特殊性提供了有用的提示，为开发者提供了指导。
39-54: 类型说明清晰！类型部分对
step和card两种引导类型进行了清晰的说明，并通过代码示例有效地展示了两种类型的区别。同时，强调了无论使用哪种类型，基本数据类型需要保持一致，这一点很重要。
56-90: 自定义样式说明清晰！自定义样式部分清晰地解释了如何使用
popupStyle和contentStyle来自定义每个引导步骤的样式。同时，提醒避免覆盖默认的必要参数，这一点很有帮助。代码示例也很好地展示了如何使用popupStyle和contentStyle。
92-113: 自定义内容说明清晰！自定义内容部分清晰地解释了如何使用名为
content的slot来自定义气泡弹出层的内容。代码示例也很好地展示了如何使用content插槽。
115-133: 属性表格全面清晰！Tour Attributes 部分提供了一个全面的表格，列出了
Tour组件的所有属性。每个属性都有清晰简洁的说明，并提供了类型、可选值、默认值和最低版本要求。
134-142: 步骤数据格式表格清晰！Step 数据格式部分提供了一个表格，清晰地列出了每个步骤的数据格式。每个属性都有清晰简洁的说明，并提供了类型、是否必填和最低版本要求。
143-152: 插槽表格清晰！Slot 部分提供了一个表格，清晰地列出了
Tour组件的所有插槽。每个插槽都有清晰简洁的说明，并提供了最低版本要求。
153-158: 事件表格清晰！Events 部分提供了一个表格，清晰地列出了
Tour组件的所有事件。每个事件都有清晰简洁的说明，并提供了回调参数和最低版本要求。
160-164: 外部样式类表格清晰！Tour 外部样式类部分提供了一个表格，清晰地列出了
Tour组件的外部样式类。样式类有清晰简洁的说明，并提供了最低版本要求。src/uni_modules/wot-design-uni/components/wd-tour/wd-tour.vue (7)
1-65: 模板结构清晰，逻辑正确该模板使用了 Vue 的条件渲染和列表渲染指令，结构清晰，逻辑正确。它根据当前步骤的索引有条件地显示每个步骤的内容和导航控件，并提供命名插槽以自定义步骤内容、进度和导航按钮。样式绑定和事件处理也实现得很好。
67-76: 组件名称和选项设置正确组件正确命名为
wd-tour，遵循了wd-前缀的约定。组件选项中设置了addGlobalClass、virtualHost和styleIsolation，用于添加全局类、启用虚拟主机以及与父组件共享样式。这些选项的设置是合理的。
78-83: 正确使用 Composition API 和导入必要的工具函数和类型该代码段正确使用了 Vue 的 Composition API，导入了必要的组合式 API 函数，如
computed、watch、ref和nextTick。它还导入了getRect工具函数和tourOptions及IRect类型，确保类型安全。使用getCurrentInstance()获取当前组件实例也是一个很好的做法，可以访问组件的上下文。
84-91: 正确定义组件的 props 和 emits，并初始化响应式变量该代码段使用 Composition API 正确定义了组件的
props和emits。通过使用defineProps函数和导入的tourOptions类型来定义props，确保了类型安全和清晰度。使用defineEmits函数定义了组件可以发出的事件。通过
uni.getWindowInfo()获取了窗口的相关信息，如windowTop、windowWidth和windowHeight，提供了窗口尺寸的信息。使用
ref函数初始化了响应式变量showTour、showPopup、active和alignPosition，允许它们被跟踪和响应式更新。
92-167: 计算属性和方法的实现逻辑正确该代码段正确实现了组件的计算属性和方法。
rootClass计算属性将基础类 'wd-tour' 与customClassprop 结合，允许自定义组件的样式。
setPopupStyles方法使用getRect异步获取当前步骤目标元素的尺寸，并相应地设置popupStyles响应式变量。它还调用setContentStyles来定位内容。
setContentStyles方法根据目标元素的尺寸和窗口大小计算内容的位置。它确定内容的对齐方式（左/右，上/下），并设置contentStyles响应式变量。
handleStepChange方法根据导航类型（'next' 或 'prev'）更新active步骤索引，并发出带有更新索引的 'change' 事件。
handleClose方法将showTour和showPopup设置为 false，发出 'close' 和 'update:modelValue' 事件，表示导览已关闭。
handleClickMask方法在closeOnClickOverlayprop 设置为 true 时关闭导览。这些方法的实现逻辑正确，与组件的预期行为一致。
168-178: 正确监听modelValueprop 的变化并更新组件状态该代码段包含一个监听器，用于监听
modelValueprop 的变化。当
modelValue为真值时，它将active步骤索引设置为currentprop 的值，如果未提供则设置为 0。如果
modelValue为真值，它会调用setPopupStyles来定位弹出框。根据
modelValue的值，它更新showTour和showPopup响应式变量，相应地显示或隐藏导览。这个监听器正确地响应了
modelValueprop 的变化，并相应地更新了组件的状态。
181-183: 正确导入组件的样式该代码段包含组件的样式标签。
样式标签具有
scoped属性，表示样式仅限于此组件。样式使用 SCSS 编写，并从外部文件 './index.scss' 导入。
从外部文件导入样式有助于代码组织和复用。
这是一种很好的做法，可以保持组件的结构清晰和可维护性。
src/pages.json (1)
755-764: 新增页面配置没有问题！新增的 "tour" 页面配置与其他现有页面的结构和样式保持一致，包括指定 "mp-alipay" 平台的属性，如将 "allowsBounceVertical" 设置为 "NO"，以及使用中文指定导航栏标题文本。这些更改增强了应用程序的功能，为用户提供了一个新的导航选项，没有发现任何负面影响。
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档