vbenjs/vue-vben-adminPublic

NotificationsYou must be signed in to change notification settings
Fork8.4k
Star30.9k

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复#7029

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Jump to bottom

Open

jyqwq wants to merge5 commits intovbenjs:main

base:main

Choose a base branch

fromjyqwq:feature/弹窗内vxe-table内组件的层级问题修复

Open

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复#7029

jyqwq wants to merge5 commits intovbenjs:mainfromjyqwq:feature/弹窗内vxe-table内组件的层级问题修复

The head ref may contain hidden characters:"feature/\u5F39\u7A97\u5185vxe-table\u5185\u7EC4\u4EF6\u7684\u5C42\u7EA7\u95EE\u9898\u4FEE\u590D"

Dismiss

Conversation

Copy link

Contributor

jyqwq commentedDec 17, 2025•
edited by coderabbitaibot
Loading

Description

默认的modal层级比vxe-table的组件层级高，会有如下问题

调整默认层级可以省去每次设置modal层级

Type of change

Please delete options that are not relevant.

[ ✅ ] Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update
Please, don't make changes topnpm-lock.yaml unless you introduce a new test example.

Checklist

ℹ️ Check all checkboxes - this will indicate that you have done everything in accordance with the rules inCONTRIBUTING.

[ ✅ ] If you introduce new functionality, document it. You can run documentation withpnpm run docs:dev command.
[ ✅ ] Run the tests withpnpm test.
[ ✅ ] Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages withfeat:,fix:,perf:,docs:, orchore:.
[ ✅ ] My code follows the style guidelines of this project
[ ✅ ] I have performed a self-review of my own code
[ ✅ ] I have commented my code, particularly in hard-to-understand areas
[ ✅ ] I have made corresponding changes to the documentation
[ ✅ ] My changes generate no new warnings
[ ✅ ] I have added tests that prove my fix is effective or that my feature works
[ ✅ ] New and existing unit tests pass locally with my changes
[ ✅ ] Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

Styling
- Added z-index fixes for tooltip wrappers and select panels to ensure correct layering inside modals and dialogs.
Chores
- Loaded the new style module at app bootstrap so these styling fixes are applied globally on startup.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复

5c5828f

jyqwq requested review fromanncwb,jinmao88,mynetfan andvince292007 ascode owners

December 17, 2025 09:09

Copy link

changeset-botbot commentedDec 17, 2025•
edited
Loading

⚠️ No Changeset found

Latest commit:6d746ba

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go.If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

Contributor

coderabbitaibot commentedDec 17, 2025•
edited
Loading

Walkthrough

Adds 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

Cohort / File(s)	Summary
VXE Styles Export `packages/styles/package.json`	Added`./vxe` export entry pointing to`./src/vxe/index.css`.
VXE CSS Styles `packages/styles/src/vxe/index.css`	New CSS rules:`.vxe-tooltip--wrapper { z-index: 2001 !important; }`,`.vxe-select--panel { z-index: 2001 !important; }`.
Bootstrap Imports Apps `apps/web-antd/src/bootstrap.ts`,`playground/src/bootstrap.ts`	Added`import '@vben/styles/vxe'` to load the new styles at bootstrap.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Verifyexports entry path and package resolution.
Check CSS specificity and potential side effects inside modals.
Confirm import order in bootstrap files relative to other global styles.

Suggested labels

bug

Suggested reviewers

anncwb
jinmao88
vince292007

Poem

🐰 I hopped through styles with a goal so small,
Lifted tooltips where modals call,
Two rules, one export, added with care,
Now panels perch without despair,
A tiny tweak — peace in the UI hall. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing z-index layering issues for vxe-table components inside modals, which directly corresponds to the CSS modifications and style imports in the changeset.
Description check	✅ Passed	The description includes problem context with screenshots, specifies it as a bug fix, and shows completion of all checklist items. However, it lacks detailed technical explanation of the solution and doesn't explicitly link to the issue number in the description text.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between1345fd7 and6d746ba.

📒 Files selected for processing (1)

packages/styles/src/vxe/index.css (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

packages/styles/src/vxe/index.css

⏰ 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)

GitHub Check: Lint (windows-latest)
GitHub Check: Check (windows-latest)
GitHub Check: Test (windows-latest)
GitHub Check: Check (ubuntu-latest)
GitHub Check: Lint (ubuntu-latest)
GitHub Check: post-update (ubuntu-latest)
GitHub Check: post-update (windows-latest)

Thanks for usingCodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment@coderabbitai help to get the list of available commands and usage tips.}

jyqwq added2 commits

December 17, 2025 17:10

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复

c19a726

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复

581b488

coderabbitaibot reviewed

Dec 17, 2025

View reviewed changes

Copy link

Contributor

coderabbitaibot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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--wrapper and.vxe-select--panel elements. 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

📥 Commits

Reviewing files that changed from the base of the PR and between1479f15 and581b488.

📒 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: mynetfanRepo: vbenjs/vue-vben-admin PR: 5397File: playground/src/bootstrap.ts:23-30Timestamp: 2025-01-15T04:29:13.944ZLearning: 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: mynetfanRepo: vbenjs/vue-vben-admin PR: 5397File: playground/src/bootstrap.ts:23-30Timestamp: 2025-01-15T04:29:13.944ZLearning: 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.css
apps/web-antd/src/bootstrap.ts
playground/src/bootstrap.ts

📚 Learning: 2024-11-05T10:34:13.846Z

Learnt from: ArthurDarkstoneRepo: vbenjs/vue-vben-admin PR: 4807File: docs/src/components/common-ui/vben-vxe-table.md:65-84Timestamp: 2024-11-05T10:34:13.846ZLearning: 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 inapps/web-antd/src/bootstrap.ts, ensuring consistent styling across different application entrypoints.

packages/styles/src/vxe/index.css

Comment on lines 3 to 9

		.vxe-tooltip--wrapper {
		z-index:2001!important;
		}
		/** 弹窗内表格组件层级问题修复 */
		.vxe-select--panel {
		z-index:2001!important;
		}

Copy link

Contributor

coderabbitaibotDec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

⚠️ Potential issue |🟠 Major

Verify the hardcoded z-index value aligns with modal z-index.

The CSS uses a hardcodedz-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 configurationsecho"=== 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-indexecho -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 referencesecho -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 aglobal z-index:2001 !important for vxe-tooltip--wrapper and vxe-select--panelwhich may conflict with modal stacking and affects all vxe components; run theprovided verification script to find existing modal/dialog z-index values andany CSS z-index variables, then replace the hardcoded value by scoping the rulesto 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-indexcontrols stacking consistently; if multiple modal z-index values exist, choosethe variable to match the modal stack or set the vxe rules to compute relativeto the modal context (increase only when inside modal) to avoid global sideeffects.

jyqwq added2 commits

December 17, 2025 17:51

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复

1345fd7

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复

6d746ba

Labels

None yet

Movatterモバイル変換

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复#7029

Are you sure you want to change the base?

fix(ZIndex): 弹窗内vxe-table内组件的层级问题修复#7029

Uh oh!

Conversation

jyqwq commentedDec 17, 2025• edited by coderabbitaibotLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Description

Type of change

Checklist

Summary by CodeRabbit

Uh oh!

changeset-botbot commentedDec 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitaibot commentedDec 17, 2025• editedLoading Uh oh!There was an error while loading.Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitaibot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitaibotDec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jyqwq commentedDec 17, 2025•
edited by coderabbitaibot
Loading

changeset-botbot commentedDec 17, 2025•
edited
Loading

coderabbitaibot commentedDec 17, 2025•
edited
Loading