feat: optimize table search function #8
Conversation
WalkthroughThis pull request introduces a new dependency, Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant SB as TinySearchBox Component
participant ST as SearchTable Component
participant UI as Grid UI
U->>SB: Enter search keywords
SB->>ST: Emit search filter event
ST->>ST: Call reloadGrid(filters)
ST->>UI: Update grid with filtered results
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (63)
💤 Files with no reviewable changes (54)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (4)
🔇 Additional comments (19)
✨ Finishing Touches
🪧 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: 2
🔭 Outside diff range comments (1)
template/tinyvue/src/views/list/search-table/index.vue (1)
329-329: 🛠️ Refactor suggestionHardcoded message should be internationalized
The success message "已删除" is hardcoded in Chinese. It should be internationalized for better localization support.
Modal.message({ - message: '已删除', + message: t('searchTable.operation.delete.success'), status: 'success', });You'll also need to add this new key to your locale files.
🧹 Nitpick comments (1)
template/tinyvue/src/locale/zh-CN.ts (1)
8-9: Correct integration of localization modules.The imported localization objects are properly spread into the main export object, making their translations available throughout the application.
Consider maintaining consistent naming convention for localization imports. Other imports use the pattern
locale<ModuleName>(likelocaleLogin), whilelist18doesn't follow this pattern.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
template/tinyvue/package.json(1 hunks)template/tinyvue/src/locale/en-US.ts(1 hunks)template/tinyvue/src/locale/zh-CN.ts(1 hunks)template/tinyvue/src/main.ts(1 hunks)template/tinyvue/src/views/list/search-table/index.vue(6 hunks)template/tinyvue/src/views/list/search-table/locale/en-US.ts(1 hunks)template/tinyvue/src/views/list/search-table/locale/zh-CN.ts(1 hunks)template/tinyvue/src/views/list/search-table/search-table.less(3 hunks)
🔇 Additional comments (13)
template/tinyvue/src/main.ts (1)
14-14: Appropriate CSS import for the new search box component.This import correctly includes the required CSS styles for the newly added search box functionality from the
@opentiny/vue-search-boxpackage.template/tinyvue/package.json (1)
45-45:Details
❓ Verification inconclusive
Verify stability of very early package version.
The
@opentiny/vue-search-boxpackage is being used at version^0.0.1, which indicates this is a very early release that may not be stable for production use.
🏁 Script executed:
#!/bin/bash # Check if there are newer versions of the package available npm view @opentiny/vue-search-box versions --json # Check if the package is being actively maintained npm view @opentiny/vue-search-box time --json | jq 'to_entries | sort_by(.value) | .[-5:] | from_entries' # Check for any package dependencies that might cause issues npm view @opentiny/vue-search-box dependencies --jsonLength of output: 1146
Action Required: Reassess Dependency Version for Stability
- The dependency declaration in
template/tinyvue/package.jsoncurrently specifies"@opentiny/vue-search-box": "^0.0.1".- Our verification shows that two versions have been published—
0.0.1and0.0.2—with the latest update on 2025-03-25.- Since the package is still in the pre-1.0.0 stage, even a patch-level increment (0.0.1 → 0.0.2) might introduce breaking changes under semver’s rules for 0.x releases. Moreover, using
^0.0.1restricts the update range to versions<0.0.2, which may prevent automatically receiving any stability fixes available in 0.0.2.Recommendation:
- Evaluate whether the current version 0.0.1 meets production stability requirements.
- If improvements have been confirmed in 0.0.2 that address stability issues, consider updating the dependency (and its version range) accordingly.
- If you decide to retain 0.0.1, please ensure that its experimental status is acceptable for your production context.
template/tinyvue/src/views/list/search-table/locale/zh-CN.ts (1)
4-4: Well-formed localization entry for search placeholder.This localization entry correctly provides a Chinese placeholder text for the new search functionality, instructing users to select attributes or enter keywords.
template/tinyvue/src/locale/zh-CN.ts (1)
2-3: Import of additional localization modules.These imports appropriately bring in the localization files needed for the enhanced search functionality and other features.
template/tinyvue/src/locale/en-US.ts (1)
3-3: Appropriate integration of locale stringsThe addition of localization strings from the search-table component follows the existing pattern in this file. This change will make the search placeholder text available throughout the application.
Also applies to: 9-9
template/tinyvue/src/views/list/search-table/locale/en-US.ts (1)
4-5: Good addition of search placeholder textThe new placeholder text provides clear guidance to users on how to interact with the search functionality.
template/tinyvue/src/views/list/search-table/search-table.less (2)
14-25: Well-structured CSS for the search componentThe new search-div class and the deep selector for tiny-input are properly implemented to style the new search box component.
59-60: Improved button stylingThe updated styling for the btn class with proper padding and background color improves the visual appearance of the action buttons.
template/tinyvue/src/views/list/search-table/index.vue (5)
3-3: Good use of Breadcrumb componentThe addition of the Breadcrumb component improves navigation and context for the users.
15-48: Improved search interface with TinySearchBoxThe new search interface is cleaner and more user-friendly compared to the previous complex form implementation.
58-58: Enhanced grid with selection capabilityAdding a selection column allows users to perform batch operations on the table data.
169-169: Proper implementation of the search box componentThe TinySearchBox component is properly imported and integrated with reactive state management.
Also applies to: 191-191
339-342: Correct implementation of reloadGrid functionThe reloadGrid function now accepts filters and correctly assigns them to filterOptions before reloading the grid.
|
感谢贡献，请将国际化词条文件存放在 template/nestJs/locales.json |
|
@discreted66 麻烦在PR描述里贴个效果图 |
template/tinyvue/src/locale/en-US.ts
Outdated
| @@ -1,10 +1,12 @@ | |||
| import localeLogin from '@/views/login/locale/en-US'; | |||
| import localeI18 from '@/views/locale/locale/en-US'; | |||
| import list18 from '@/views/list/search-table/locale/en-US'; | |||
There was a problem hiding this comment.
命名建议优化成：list18 -> localeSearchTable
| {{ $t('searchTable.operation.import') }} | ||
| </tiny-button> | ||
| <div class="search-div"> | ||
| <TinySearchBox |
There was a problem hiding this comment.
命令风格需要保持统一
| <TinySearchBox | |
| <tiny-search-box |
| }, | ||
| ) { | ||
| const { ...rest } = filterOptions.value; | ||
| let obj = {}; |
There was a problem hiding this comment.
变量名应该用有意义的名字，能够一眼看出这个变量的用途
| let obj = {}; | |
| let searchInfo = {}; |
| 'Please select attributes or enter keywords to search', | ||
| 'searchTable.form.number.placeholder': 'Please enter Set Number', | ||
| 'searchTable.form.name': 'Set Name', | ||
| 'searchTable.form.name.placeholder': 'Please enter Set Name', |
There was a problem hiding this comment.
search-table/locale/ 这个文件夹里的内容是不是没用了？国际化词条都在后台数据库保存，通过 nestJs/locales.json 进行初始化。如果确认没用了，可以整体清理一波，删除无用的文件。
| <tiny-button @click="toCsvEvent"> | ||
| {{ $t('searchTable.operation.import') }} | ||
| </tiny-button> | ||
| <div class="search-div"> |
There was a problem hiding this comment.
| <div class="search-div"> | |
| <div class="search-box-container"> |
discreted66
changed the title
discreted66
force-pushed
the
dev
branch
2 times, most recently
from
8378620 to
30eebe3
Compare
|
@all-contributors please add @discreted66 for code. |
|
I've put up a pull request to add @discreted66! 🎉 |
3 participants
优化表格搜索功能
效果如下：
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Style