feat: ✨ Rate 评分新增支持半选和触摸滑动选中 #896
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Closes: #669
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次提交在 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant R as wd-rate组件
participant T as onTouchMove
participant C as changeRate
U->>R: 触摸滑动（选择半星或全星）
R->>T: 捕获 touch 事件
T->>C: 调用 changeRate(index, isHalf)
C->>R: 更新评分状态
R->>U: 渲染更新后的评分
Poem
✨ Finishing Touches
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!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying wot-design-uni with
|
| Latest commit: |
4d92c81
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f16c96a0.wot-design-uni.pages.dev |
| Branch Preview URL: | https://feature-rate-allow-half.wot-design-uni.pages.dev |
![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
🧹 Nitpick comments (5)
src/pages/rate/Index.vue (1)
45-47: 建议添加示例说明建议在示例代码中添加注释，说明半选功能的使用方法和初始值 2.5 的含义。
<demo-block title="允许半选"> + <!-- 支持 0.5 的倍数，如 0.5、1.5、2.5 等 --> <wd-rate v-model="value8" allow-half /> </demo-block>src/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue (2)
140-155: 建议优化触摸事件处理当前触摸事件处理可以进行以下优化：
- 添加防抖处理，避免频繁触发状态更新
- 添加只读和禁用状态的判断
- 添加错误处理
+import { debounce } from '../common/util' + async function onTouchMove(event: TouchEvent) { + if (props.readonly || props.disabled) return + + try { const { clientX } = event.touches[0] const rateItems = await getRect('.wd-rate__item', true, proxy) const targetIndex = Array.from(rateItems).findIndex((rect) => { return clientX >= rect.left! && clientX <= rect.right! }) if (targetIndex !== -1) { const target = rateItems[targetIndex] const itemWidth = target.width! const isHalf = props.allowHalf && clientX - target.left! < itemWidth / 2 const value = isHalf ? targetIndex + 0.5 : targetIndex + 1 if (value >= 0.5) { changeRate(targetIndex, isHalf) } } + } catch (error) { + console.error('[Wot Design] error(wd-rate): Failed to handle touch move', error) + } } + +// 使用防抖包装触摸事件处理函数 +const debouncedTouchMove = debounce(onTouchMove, 16)
93-114: 建议优化评分列表计算逻辑当前的评分列表计算逻辑可以更加简洁和高效：
function computeRateList() { const { modelValue, num, allowHalf } = props // value和num都准备好才能计算 if (modelValue === null || !num) return if (typeof modelValue !== 'number') { console.error('[Wot Design] error(wd-rate): the value of wd-rate should be a number') return } - const tempRateList: string[] = [] - const fullLength = Math.floor(modelValue) - for (let i = 0; i < num; i++) { - if (i < fullLength) { - tempRateList.push('100%') - } else if (i === fullLength && allowHalf && modelValue % 1 !== 0) { - tempRateList.push('50%') - } else { - tempRateList.push('0') - } - } + const tempRateList = Array(num).fill('0').map((_, i) => { + if (i < Math.floor(modelValue)) return '100%' + if (i === Math.floor(modelValue) && allowHalf && modelValue % 1 !== 0) return '50%' + return '0' + }) rateList.value = tempRateList computeActiveValue() }src/uni_modules/wot-design-uni/components/wd-rate/index.scss (1)
12-24: 建议增加浏览器兼容性处理为确保在不同浏览器中的一致性，建议添加相关的浏览器前缀：
touch-action: none; // 禁用默认触摸行为 } @include edeep(item-star) { -webkit-background-clip: text !important; + background-clip: text !important; color: transparent; } @include e(item-half) { position: absolute; left: 0; top: 0; overflow: hidden; width: 50%; + -webkit-box-sizing: border-box; + box-sizing: border-box; }docs/component/rate.md (1)
62-68: 建议补充半选功能的具体使用说明建议在示例代码中补充以下内容：
- 半选状态下的具体分值说明（如 0.5、1.5 等）
- 触摸滑动选择的操作说明
- 建议添加一个包含实际分值的完整示例
## 允许半选 设置 `allowHalf` 属性。 ```html -<wd-rate v-model="value" allow-half /> +<wd-rate v-model="value" allow-half /> + +<!-- 支持 0.5、1.5 等分值 --> +<wd-rate v-model="2.5" allow-half /> + +<!-- 支持触摸滑动选择 --> +<wd-rate v-model="value" allow-half /> + +<script setup lang="ts"> +const value = ref(3.5) +</script></blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used: CodeRabbit UI** **Review profile: CHILL** **Plan: Pro** <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 8e569ac19c9d91064ce6bd41222b469e348f5e1a and 4d92c81c46ffd69510f9ce98bc81005ccbe8e92e. </details> <details> <summary>📒 Files selected for processing (5)</summary> * `docs/component/rate.md` (2 hunks) * `src/pages/rate/Index.vue` (3 hunks) * `src/uni_modules/wot-design-uni/components/wd-rate/index.scss` (1 hunks) * `src/uni_modules/wot-design-uni/components/wd-rate/types.ts` (1 hunks) * `src/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue` (5 hunks) </details> <details> <summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary> * GitHub Check: Cloudflare Pages </details> <details> <summary>🔇 Additional comments (2)</summary><blockquote> <details> <summary>src/uni_modules/wot-design-uni/components/wd-rate/types.ts (1)</summary> `90-95`: **代码实现正确！** `allowHalf` 属性的类型定义和文档注释都很完整，符合组件库的规范。 </details> <details> <summary>docs/component/rate.md (1)</summary> `85-85`: **需要更新版本号占位符** `$LOWEST_VERSION$` 占位符需要替换为实际的版本号。 请确认该功能将在哪个版本发布，并更新文档中的版本信息。 </details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✅ Closes: #669
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#669
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit