From e1dff63c59da484346d9742aedefcf1aea6a376b Mon Sep 17 00:00:00 2001
From: zty <zty15901013695@gmail.com>
Date: Thu, 11 Jun 2026 15:13:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=80=89=E6=8B=A9=E6=9D=90=E6=96=99?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=86=85=E5=81=A5=E5=BA=B7/=E7=8E=AF?=
 =?UTF-8?q?=E4=BF=9D=E4=B8=8B=E6=8B=89=E8=A2=AB=E9=81=AE=E6=8C=A1(z-index)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

弹窗 z-index 1100 高于 Ant 下拉默认 1050，导致下拉渲染在弹窗下方、
看起来是空的且选中不生效。给两个 select 加 getPopupContainer 渲染进
弹窗内部，下拉正常显示、选中与筛选恢复正常。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/MaterialPickerModal.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/MaterialPickerModal.vue b/apps/web/src/components/MaterialPickerModal.vue
index 958bc79..0f35188 100644
--- a/apps/web/src/components/MaterialPickerModal.vue
+++ b/apps/web/src/components/MaterialPickerModal.vue
@@ -13,11 +13,11 @@
         <a-radio-button value="self">自建库</a-radio-button>
       </a-radio-group>
       <span class="lbl" style="margin-left: 20px">健康等级：</span>
-      <a-select v-model:value="healthGrade" size="small" style="width: 110px" allow-clear placeholder="全部" @change="reload">
+      <a-select v-model:value="healthGrade" size="small" style="width: 110px" allow-clear placeholder="全部" :get-popup-container="popupContainer" @change="reload">
         <a-select-option v-for="g in healthGrades" :key="g" :value="g">{{ g }} 级</a-select-option>
       </a-select>
       <span class="lbl" style="margin-left: 20px">环保等级：</span>
-      <a-select v-model:value="envGrade" size="small" style="width: 100px" allow-clear placeholder="全部" @change="reload">
+      <a-select v-model:value="envGrade" size="small" style="width: 100px" allow-clear placeholder="全部" :get-popup-container="popupContainer" @change="reload">
         <a-select-option v-for="g in envGrades" :key="g" :value="g">{{ g }}</a-select-option>
       </a-select>
     </div>
@@ -137,6 +137,10 @@ const rowState = reactive<Record<string, { checked: boolean; area: number | null
 
 const picked = computed(() => new Set(props.existingIds));
 
+// 让下拉渲染进弹窗内部，避免被弹窗 z-index 盖住（否则下拉看起来是空的）
+const popupContainer = (trigger: HTMLElement) =>
+  (trigger.closest('.ant-modal-content') as HTMLElement) || document.body;
+
 // 大类 -> 子类[]
 const tree = computed(() => {
   const map = new Map<string, string[]>();