Feat ✨ drop menu 添加 filterable 支持本地搜索 #1040
Conversation
加入本地搜索的使用文档
ts加入对应的搜索属性
加入本地搜索对应逻辑功能
✅ 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. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更主要修复了多个文档和徽章图片的 Markdown 格式问题，删除了 Petercat AI 助手相关的前端集成与样式，并为下拉菜单组件（DropMenu）新增了本地搜索功能及相关属性，完善了组件类型定义和文档说明。 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant DropMenuItem组件
participant wd-search输入框
用户->>DropMenuItem组件: 打开下拉菜单
DropMenuItem组件->>wd-search输入框: 显示（若 filterable 为 true）
用户->>wd-search输入框: 输入关键字
wd-search输入框->>DropMenuItem组件: 触发 handleFilterChange
DropMenuItem组件->>DropMenuItem组件: 过滤 options，更新 filterOptions
用户->>DropMenuItem组件: 选择过滤后的选项
DropMenuItem组件->>DropMenuItem组件: 触发 choose，处理选中逻辑
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
Walkthrough此PR为下拉菜单组件添加了 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
Show resolved
Hide resolved
![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/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (1)
74-79: 需要修复格式问题代码存在一些空格格式问题，需要修正以符合项目代码风格。
以下为修复格式问题的建议：
- customPopupStyle: makeStringProp(''), - - /** 可搜索（目前只支持本地搜索） */ - filterable: makeBooleanProp(false), - /** 搜索框占位符 */ - filterPlaceholder: String, + customPopupStyle: makeStringProp(''), + /** 可搜索（目前只支持本地搜索） */ + filterable: makeBooleanProp(false), + /** 搜索框占位符 */ + filterPlaceholder: String🧰 Tools
🪛 ESLint
[error] 75-75: Delete
··(prettier/prettier)
[error] 79-79: Delete
,(prettier/prettier)
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (4)
159-170: 过滤逻辑实现合理formatFilterOptions函数实现了不区分大小写的字符串匹配，但可以考虑优化性能和用户体验。
对于大量选项时，可以考虑以下优化：
function formatFilterOptions( options: Record<string, any>[], filterVal: string ) { + // 优化：空字符串直接返回所有选项 + if (!filterVal.trim()) { + filterOptions.value = options; + return; + } + + // 转换为小写一次，避免循环中重复转换 + const lowerFilterVal = filterVal.toLowerCase(); const filterOptionsTemp = options.filter((item) => { const label = item?.[props.labelKey] return typeof label === 'string' - ? label.toLowerCase().includes(filterVal.toLowerCase()) - : String(label).toLowerCase().includes(filterVal.toLowerCase()) + ? label.toLowerCase().includes(lowerFilterVal) + : String(label).toLowerCase().includes(lowerFilterVal) }) filterOptions.value = filterOptionsTemp }
234-239: 添加了下拉菜单打开时的清空逻辑使用延时清空搜索避免UI闪烁，处理合理。但建议考虑一些边缘情况处理。
为避免潜在的内存泄漏问题，建议储存timeout引用以便在组件销毁时清理：
+ const clearFilterTimeout = ref<ReturnType<typeof setTimeout> | null>(null); + onBeforeUnmount(() => { + if (clearFilterTimeout.value) { + clearTimeout(clearFilterTimeout.value); + clearFilterTimeout.value = null; + } + }) function open() { // ...现有代码 //关闭弹窗清空搜索 延迟避免清空画面闪过 if (filterVal.value !== '') { - setTimeout(() => { + if (clearFilterTimeout.value) { + clearTimeout(clearFilterTimeout.value); + } + clearFilterTimeout.value = setTimeout(() => { handleFilterChange({ value: '' }) + clearFilterTimeout.value = null; }, 300) } }
159-181: 考虑添加空结果提示当过滤后没有任何匹配结果时，目前没有提供空状态展示。
建议添加一个空结果状态展示：
<template> <!-- 现有代码 --> <view v-if="options.length"> <wd-search v-if="filterable" v-model="filterVal" :placeholder="filterPlaceholder || translate('filterPlaceholder')" hide-cancel placeholder-left @change="handleFilterChange" /> + <view v-if="filterable && filterOptions.length === 0 && filterVal" class="wd-drop-item__empty"> + {{ translate('noMatchingData') }} + </view> <view v-for="(item, index) in filterOptions" <!-- 其余代码 --> </view> </view> <!-- 其余代码 --> </template>并在translations中添加相应文案：
// 在相应的翻译文件中 { filterPlaceholder: '搜索', noMatchingData: '无匹配数据' }
76-77: 代码格式需要修正代码中存在一些格式问题，如多余空格和不一致的格式。
建议使用项目的代码格式化工具（如Prettier）来统一代码格式，尤其是以下几处：
- 第76行的额外空格
- 第159-162行的函数声明格式
- 第182行的额外空格
- 第233行的额外空格
Also applies to: 90-92, 159-170, 172-181
🧰 Tools
🪛 ESLint
[error] 76-76: Delete
··(prettier/prettier)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
docs/public/petercatai/assistant.min.jsis excluded by!**/*.min.jsdocs/public/petercatai/dayjs.min.jsis excluded by!**/*.min.js
📒 Files selected for processing (9)
README.md(1 hunks)README_en.md(1 hunks)docs/.vitepress/config.mts(1 hunks)docs/.vitepress/theme/components/HomeStar.vue(2 hunks)docs/component/drop-menu.md(2 hunks)docs/public/petercatai/assistant.min.css(0 hunks)src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts(1 hunks)src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue(7 hunks)src/uni_modules/wot-design-uni/readme.md(1 hunks)
💤 Files with no reviewable changes (1)
- docs/public/petercatai/assistant.min.css
🧰 Additional context used
🪛 ESLint
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
[error] 75-75: Delete ··
(prettier/prettier)
[error] 79-79: Delete ,
(prettier/prettier)
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
[error] 76-76: Delete ··
(prettier/prettier)
[error] 158-162: Replace ⏎function·formatFilterOptions(⏎··options:·Record<string,·any>[],⏎··filterVal:·string⏎ with function·formatFilterOptions(options:·Record<string,·any>[],·filterVal:·string
(prettier/prettier)
[error] 182-182: Delete ··
(prettier/prettier)
[error] 233-233: Delete ··
(prettier/prettier)
🔇 Additional comments (16)
docs/.vitepress/config.mts (1)
4-4: 跳过：仅更新时间戳
此处仅更新了@LastEditTime注释，无实质性功能或配置变更，可忽略审查。src/uni_modules/wot-design-uni/readme.md (1)
16-16: 修复徽章 URL 换行问题，保证图片正常渲染
已将src属性的 URL 从多行合并为单行，避免 Markdown 渲染时出现断行导致徽章无法显示的问题。README.md (1)
20-20: 修复徽章 URL 换行问题，保证 Markdown 图片渲染正常
将src属性的 URL 从多行合并为单行，避免出现意外断行导致徽章无法显示。docs/.vitepress/theme/components/HomeStar.vue (2)
4-4: 更新最后编辑时间
已将@LastEditTime更新为最新编辑日期，保持文件头注释信息与实际变更同步。
20-20: 修复徽章 URL 换行问题，保证图片正常渲染
已将<img>标签的src属性 URL 从多行合并为单行，避免模板渲染时因断行导致徽章不可见。README_en.md (1)
20-20: 修复徽章 URL 格式，确保正确渲染
合并src属性 URL 为单行，避免换行导致徽章无法显示的问题。docs/component/drop-menu.md (2)
186-196: 文档更新清晰地介绍了新增的本地搜索功能新增的"本地搜索"部分很好地描述了filterable和filter-placeholder属性的使用方法，并提供了三种不同场景的代码示例，方便开发者理解如何实现。
222-223: 属性表文档更新完整filterable属性的描述简洁明了，正确标明了类型为boolean和默认值为false。
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts (1)
76-79: 属性定义清晰并保持一致的文档风格新增的filterable和filterPlaceholder属性遵循了现有代码的注释和类型定义风格，并使用了适当的默认值。
🧰 Tools
🪛 ESLint
[error] 79-79: Delete
,(prettier/prettier)
src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue (7)
22-29: 搜索组件集成良好搜索组件被正确地条件渲染并绑定了必要的属性和事件。使用了适当的placeholder处理逻辑，既支持自定义也支持默认值。
31-32: 正确更新了选项列表循环将options替换为filterOptions，确保筛选功能正常工作。
66-77: 引入了必要的组件和composable正确导入了wdSearch组件和useTranslate composable用于国际化支持。
🧰 Tools
🪛 ESLint
[error] 76-76: Delete
··(prettier/prettier)
90-92: 添加了必要的响应式变量添加了filterVal和filterOptions用于管理搜索状态和过滤结果。
110-123: 监听options变化更新过滤结果合理处理了options变化的情况，确保过滤结果与当前搜索条件同步。
172-181: 处理搜索输入变化逻辑清晰当搜索框清空时正确重置为完整列表，当有输入时进行过滤，逻辑合理。
187-187: 选择项逻辑更新正确choose函数已更新为使用filterOptions而非原始options，确保从过滤后的列表中选择。
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
需求来源: #550
之前的解决方案已讨论完成, 但是合并代码已出现问题, 故重新提交请求, 之前的PR: #552
💡 需求背景和解决方案
当下拉选项过多时, 有搜索功能可以更方便的找到目标, 通过在组件中添加filterable属性, 在下拉顶部增加一个检索框, 输入内容, 则过滤出相应选项
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档
其他