fix: long text style in sidemenu. fixed #4749 #4770
Conversation
|
WalkthroughThe changes involve modifications to the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- packages/@core/ui-kit/menu-ui/src/components/menu.vue (1 hunks)
- packages/@core/ui-kit/menu-ui/src/sub-menu.vue (2 hunks)
🔇 Additional comments (2)
packages/@core/ui-kit/menu-ui/src/sub-menu.vue (1)
45-47: LGTM! Verify styling implementation.
The structural changes to wrap menu names in <span> tags are good. This provides better control for text styling and overflow handling.
Let's verify if the parent components implement the necessary styles for long text:
Also applies to: 64-66
✅ Verification successful
Long text handling is already implemented in menu styles
Found the necessary text overflow handling styles in packages/@core/ui-kit/menu-ui/src/components/menu.vue:
overflow: hidden;
text-overflow: ellipsis;The wrapping of menu names in <span> tags combined with these existing styles properly handles long text in the menu items. The implementation is complete and correct.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for related style implementations in parent components
rg -t vue 'overflow|text-overflow|whitespace' packages/@core/ui-kit/menu-ui/
Length of output: 106
Script:
#!/bin/bash
# Search for style-related patterns in .vue files
rg -l '\.vue$' packages/@core/ui-kit/menu-ui/ | xargs rg 'overflow|text-overflow|whitespace|ellipsis'
# Also check for any CSS/SCSS files in the menu-ui directory
fd -e css -e scss . packages/@core/ui-kit/menu-ui/ --exec cat {}
Length of output: 15922
packages/@core/ui-kit/menu-ui/src/components/menu.vue (1)
721-724: Fix correctly addresses the long text styling issue in menu items
Wrapping the menu item title with a span and applying the @include menu-title; mixin ensures that long text in the side menu is styled appropriately. This change enhances readability and resolves issue #4749.
| <template #title> | ||
| <span>{{ menu.name }}</span> | ||
| </template> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding explicit styles for long text handling.
To ensure consistent handling of long text across all menu items, consider adding specific styles to handle text overflow.
Add styles to the spans:
- <span>{{ menu.name }}</span>
+ <span class="menu-item-text">{{ menu.name }}</span>And add these styles in your component:
<style scoped>
.menu-item-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>Also applies to: 64-66
Description
修复侧边菜单文字较长时的显示问题
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Bug Fixes
Style