feat: ✨ Toast支持横向排版和纵向排版(#780) #881
Conversation
Toast支持横向排版和纵向排版 ✅ Closes: Moonofweisheng#780
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次 PR 对 Toast 组件进行了改进。文档中新增了“排版方向”的说明及 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant 页面 as Index.vue
participant Toast as wd-toast 组件
用户->>页面: 点击显示水平/竖直 Toast 按钮
页面->>Toast: 调用 toast.success({ message, direction })
alt 当 direction 为 "vertical"
Toast->>Toast: 设置 is-vertical 类，调整布局为竖直
else 默认水平布局
Toast->>Toast: 保持默认水平布局
end
Toast->>用户: 显示 Toast 消息
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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: 1
🧹 Nitpick comments (4)
src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue (2)
11-11: 建议提取重复的条件判断多处重复使用
toastOption.direction === 'vertical'判断，建议提取为计算属性。+const isVertical = computed(() => toastOption.value.direction === 'vertical') + // 在模板中使用 -:custom-class="`wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`" +:custom-class="`wd-toast__icon ${isVertical.value ? 'is-vertical' : ''}`"Also applies to: 14-14, 23-23
119-123: 建议增加 direction 值的类型保护当前实现可能无法优雅地处理拼写错误的 'horizonal'，建议添加类型保护。
+const isValidDirection = (dir?: string): dir is 'vertical' | 'horizontal' => { + return dir === 'vertical' || dir === 'horizontal' +} + const rootClass = computed(() => { + const direction = toastOption.value.direction return `wd-toast ${props.customClass} wd-toast--${position.value} ${ (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'wd-toast--with-icon' : '' - } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${toastOption.value.direction === 'vertical' ? 'is-vertical' : ''}` + } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${isValidDirection(direction) && direction === 'vertical' ? 'is-vertical' : ''}` })src/uni_modules/wot-design-uni/components/wd-toast/index.ts (1)
69-69: 优化了状态更新方式直接更新
show属性而不是替换整个对象是个好的优化，它保留了其他 toast 选项。建议在注释中说明这个行为。const close = () => { + // 仅更新 show 状态，保留其他 toast 选项 toastOption.value.show = false }docs/component/toast.md (1)
69-79: 文档中新增“排版方向”说明：
文档对新参数 direction 的说明较为清楚，并提供了示例代码展示如何调用 success toast 时传入 direction: 'vertical'。
【建议】检查可选值描述中 “horizonal” 的拼写，是否应该调整为 “horizontal”，以避免使用者产生困惑。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/component/toast.md(2 hunks)src/pages/toast/Index.vue(2 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-toast/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-toast/index.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-toast/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue(2 hunks)
🔇 Additional comments (4)
src/pages/toast/Index.vue (1)
26-29: 代码实现清晰，展示了两种调用方式示例代码结构良好，分别展示了简单调用和对象配置两种使用方式，便于用户理解。
Also applies to: 107-116
src/uni_modules/wot-design-uni/components/wd-toast/index.scss (2)
16-18: 新增竖直排版样式块：
这部分代码利用 @include when(vertical) 来判断是否应用竖直布局，并将 flex-direction 设置为 column，逻辑清晰，符合预期。
29-33: 调整图标边距以适应竖直排版：
在图标样式中新增的 when(vertical) 块，将 margin-right 设为 0 并添加 margin-bottom 使用新变量 $-toast-icon-margin-bottom，很好地解决了横向与竖直布局下图标间距不一致的问题。src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (1)
650-650: 新增变量 $-toast-icon-margin-bottom：
新增的 $-toast-icon-margin-bottom 定义合理，为竖直布局下图标提供了适当的下边距支持，能有效增强布局的一致性。
| @@ -20,6 +20,7 @@ export type ToastLoadingType = LoadingType // 提示信息加载状态类型 | |||
| export type ToastOptions = { | |||
| msg?: string | |||
| duration?: number | |||
| direction?: 'vertical' | 'horizonal' | |||
There was a problem hiding this comment.
修正 'horizonal' 拼写错误
direction 类型定义中 'horizonal' 拼写错误，应该为 'horizontal'。
- direction?: 'vertical' | 'horizonal'
+ direction?: 'vertical' | 'horizontal'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| direction?: 'vertical' | 'horizonal' | |
| direction?: 'vertical' | 'horizontal' |
Toast支持横向排版和纵向排版 ✅ Closes: Moonofweisheng#780
Toast支持横向排版和纵向排版
✅ Closes: #780
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#780
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit