fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复 #7029
Conversation
jyqwq
requested review from
anncwb,
jinmao88,
mynetfan and
vince292007
as code owners
|
WalkthroughAdds a new VXE CSS module that raises z-index for VXE tooltip wrappers and select panels, exports it from the styles package, and imports it into two bootstrap entry points to load the styles globally. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
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. Comment |
![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 (1)
packages/styles/src/vxe/index.css (1)
3-9: Consider scoping the rules to modal contexts.The current selectors apply globally to all
.vxe-tooltip--wrapperand.vxe-select--panelelements. For better precision and to avoid potential side effects, consider scoping these rules to modal/dialog contexts:-/** 弹窗内表格tooltip层级问题修复 */ -.vxe-tooltip--wrapper { - z-index: 2001 !important; -} -/** 弹窗内表格组件层级问题修复 */ -.vxe-select--panel { - z-index: 2001 !important; -} +/** 弹窗内表格tooltip层级问题修复 */ +.ant-modal .vxe-tooltip--wrapper, +.vben-modal .vxe-tooltip--wrapper { + z-index: 2001 !important; +} +/** 弹窗内表格组件层级问题修复 */ +.ant-modal .vxe-select--panel, +.vben-modal .vxe-select--panel { + z-index: 2001 !important; +}This approach ensures the fix only applies within modal contexts where the issue occurs.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web-antd/src/bootstrap.ts(1 hunks)packages/styles/package.json(1 hunks)packages/styles/src/vxe/index.css(1 hunks)playground/src/bootstrap.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: mynetfan
Repo: vbenjs/vue-vben-admin PR: 5397
File: playground/src/bootstrap.ts:23-30
Timestamp: 2025-01-15T04:29:13.944Z
Learning: In the Vue-Vben-Admin project, commented code in bootstrap.ts showing modal and drawer configuration examples should be preserved as reference documentation, even after moving to CSS variables for z-index management.
📚 Learning: 2025-01-15T04:29:13.944Z
Learnt from: mynetfan
Repo: vbenjs/vue-vben-admin PR: 5397
File: playground/src/bootstrap.ts:23-30
Timestamp: 2025-01-15T04:29:13.944Z
Learning: In the Vue-Vben-Admin project, commented code in bootstrap.ts showing modal and drawer configuration examples should be preserved as reference documentation, even after moving to CSS variables for z-index management.
Applied to files:
packages/styles/src/vxe/index.cssapps/web-antd/src/bootstrap.tsplayground/src/bootstrap.ts
📚 Learning: 2024-11-05T10:34:13.846Z
Learnt from: ArthurDarkstone
Repo: vbenjs/vue-vben-admin PR: 4807
File: docs/src/components/common-ui/vben-vxe-table.md:65-84
Timestamp: 2024-11-05T10:34:13.846Z
Learning: In `docs/src/components/common-ui/vben-vxe-table.md`, the code examples are provided within markdown scripts for documentation and do not require import statements or explicit type annotations.
Applied to files:
apps/web-antd/src/bootstrap.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: Check (windows-latest)
- GitHub Check: Test (windows-latest)
🔇 Additional comments (3)
packages/styles/package.json (1)
29-32: LGTM! Export structure is correct.The new export entry follows the existing pattern and correctly maps to the vxe CSS file.
apps/web-antd/src/bootstrap.ts (1)
9-9: LGTM! Consistent style import placement.The vxe styles import is correctly positioned with other global style imports at bootstrap time.
playground/src/bootstrap.ts (1)
9-9: LGTM! Consistent with web-antd bootstrap.The vxe styles import mirrors the change in
apps/web-antd/src/bootstrap.ts, ensuring consistent styling across different application entrypoints.
| .vxe-tooltip--wrapper { | ||
| z-index: 2001 !important; | ||
| } | ||
| /** 弹窗内表格组件层级问题修复 */ | ||
| .vxe-select--panel { | ||
| z-index: 2001 !important; | ||
| } |
There was a problem hiding this comment.
Verify the hardcoded z-index value aligns with modal z-index.
The CSS uses a hardcoded z-index: 2001 with !important to override vxe-table component defaults. While this addresses the immediate layering issue, consider:
- Hardcoded value: The z-index of 2001 should be verified against the actual modal z-index to ensure proper layering.
- Global scope: These rules apply to all vxe components globally, not just those within modals. This could have unintended effects on vxe components elsewhere in the application.
Run the following script to verify modal z-index values and check for existing z-index management patterns:
#!/bin/bash
# Find modal/dialog z-index definitions and CSS variable patterns
# Search for modal z-index configurations
echo "=== Modal/Dialog z-index configurations ==="
rg -nP --type=ts --type=js -C3 'modal.*z-?index|drawer.*z-?index|zIndex.*modal|zIndex.*drawer' -g '!node_modules' -g '!dist'
# Search for CSS variables related to z-index
echo -e "\n=== CSS z-index variables ==="
rg -nP --type=css --type=scss -C2 '--.*z-?index|z-?index.*var\(' -g '!node_modules' -g '!dist'
# Search for vxe-table z-index references
echo -e "\n=== VXE-table z-index references ==="
rg -nP -C3 'vxe.*z-?index' -g '!node_modules' -g '!dist'🤖 Prompt for AI Agents
In packages/styles/src/vxe/index.css around lines 3 to 9 the styles force a
global z-index:2001 !important for vxe-tooltip--wrapper and vxe-select--panel
which may conflict with modal stacking and affects all vxe components; run the
provided verification script to find existing modal/dialog z-index values and
any CSS z-index variables, then replace the hardcoded value by scoping the rules
to the modal/dialog container (e.g. .modal .vxe-*) or using a CSS variable (e.g.
z-index: var(--z-modal, 2001)) and remove !important so the modal z-index
controls stacking consistently; if multiple modal z-index values exist, choose
the variable to match the modal stack or set the vxe rules to compute relative
to the modal context (increase only when inside modal) to avoid global side
effects.
|
vxe-table有个z-index参数配置全局层级的，不需要你这么调整的 |
2 participants
Description
默认的modal层级比vxe-table的组件层级高，会有如下问题
调整默认层级可以省去每次设置modal层级
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
✏️ Tip: You can customize this high-level summary in your review settings.