fix(ui): 修复搜索栏背景色和弹窗嵌套导致的层级问题

- 为搜索栏添加白色背景，避免在深色模式下显示异常
- 将 SchemeA 组件中的行业选择器弹窗提升到外层，避免嵌套弹窗在真机上的层级冲突
- 更新 lessons-learned 文档，记录弹窗嵌套问题的解决方案

@@ -178,12 +178,62 @@ setTimeout(() => {
 <IconFont :name="iconName" :key="iconName" />
 <IconFont :name="iconName" :key="iconName" />
 ```
 ```
 
 
+### ❌ 坑 3: 嵌套 nut-popup 导致真机层级冲突
+
+**问题描述**:
+```vue
+<!-- ❌ 真机测试时，内层弹窗被外层弹窗的底部按钮遮挡 -->
+<PlanPopup title="申请计划书">
+  <!-- 表单内容 -->
+
+  <!-- 嵌套的弹窗 -->
+  <nut-popup position="bottom" v-model:visible="showIndustryPicker">
+    <nut-picker :columns="industryColumns" />
+  </nut-popup>
+</PlanPopup>
+```
+
+**场景**: SchemeA 组件使用 PlanPopup 容器（外层 nut-popup），内部再嵌套一个行业选择器（内层 nut-popup）
+
+**原因**:
+1. **小程序渲染机制**: 微信小程序的双线程渲染导致嵌套弹窗的层级处理异常
+2. **渲染上下文**: 外层 `nut-popup` 创建了独立的渲染上下文，内层即使设置更高 `z-index` 也可能被遮挡
+3. **DOM 顺序**: 外层弹窗的底部按钮在 DOM 中位于内层弹窗之后，真机渲染时可能覆盖
+
+**解决方案**: 将内层弹窗提升到外层弹窗外部
+```vue
+<!-- ✅ 正确：弹窗并列，不嵌套 -->
+<PlanPopup title="申请计划书">
+  <!-- 表单内容 -->
+</PlanPopup>
+
+<!-- 内层弹窗提升到外层，设置更高的 z-index -->
+<nut-popup
+  position="bottom"
+  v-model:visible="showIndustryPicker"
+  :z-index="9999"
+  :overlay="true"
+>
+  <nut-picker :columns="industryColumns" />
+</nut-popup>
+```
+
+**关键点**:
+- ✅ 将内层 `nut-popup` 移到外层组件外部
+- ✅ 设置 `:z-index="9999"` 确保显示在最上层
+- ✅ 保持 DOM 顺序：外层弹窗 → 内层弹窗（后渲染的在上层）
+
+**适用场景**:
+- 任何需要在 `nut-popup` 内部再使用 `nut-popup` 的情况
+- 特别是选择器（Picker）、对话框（Dialog）等弹窗组件
+
 ### ✅ NutUI 最佳实践
 ### ✅ NutUI 最佳实践
 
 
 1. **优先使用原生组件**: 当 NutUI 组件样式限制时
 1. **优先使用原生组件**: 当 NutUI 组件样式限制时
 2. **添加 key 属性**: 动态切换图标时
 2. **添加 key 属性**: 动态切换图标时
-3. **深度样式覆盖**: 尝试 `:deep()` 选择器
-4. **查阅文档**: 确认 NutUI 版本和已知问题
+3. **避免嵌套弹窗**: 始终将内层弹窗提升到外层外部
+4. **深度样式覆盖**: 尝试 `:deep()` 选择器
+5. **查阅文档**: 确认 NutUI 版本和已知问题
 
 
 ---
 ---
 
 

@@ -95,9 +95,15 @@
       />
       />
       <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">%</span>
       <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">%</span>
     </div>
     </div>
+  </PlanPopup>
 
 
-    <!-- Industry Picker -->
-    <nut-popup position="bottom" v-model:visible="showIndustryPicker">
+  <!-- Industry Picker - 提升到 PlanPopup 外部，避免嵌套弹窗导致的层级问题 -->
+  <nut-popup
+    position="bottom"
+    v-model:visible="showIndustryPicker"
+    :z-index="9999"
+    :overlay="true"
+  >
     <nut-picker
     <nut-picker
       :columns="industryColumns"
       :columns="industryColumns"
       title="选择行业"
       title="选择行业"
@@ -105,7 +111,6 @@
       @cancel="showIndustryPicker = false"
       @cancel="showIndustryPicker = false"
     />
     />
   </nut-popup>
   </nut-popup>
-  </PlanPopup>
 </template>
 </template>
 
 
 <script setup>
 <script setup>

@@ -9,7 +9,7 @@
       <NavHeader title="我的计划书" />
       <NavHeader title="我的计划书" />
 
 
       <!-- Search Bar -->
       <!-- Search Bar -->
-      <view class="px-[24rpx] py-[16rpx]">
+      <view class="px-[24rpx] py-[16rpx] bg-white">
         <SearchBar
         <SearchBar
           v-model="searchValue"
           v-model="searchValue"
           placeholder="搜索计划书名称、客户姓名..."
           placeholder="搜索计划书名称、客户姓名..."