1

_doc/DEBUG_GUIDEBAR.md

@@ -0,0 +1,204 @@
+# GuideBar 隐藏问题调试指南
+
+## 当前实现
+
+### 1. Store 配置 (`src/store/global.ts`)
+```typescript
+// GuideBar 状态
+showGuideBar: true,
+guideBarZIndex: 'high',
+
+// 控制方法
+setShowGuideBar: (show: boolean) => {
+  console.log('[Store] setShowGuideBar called with:', show);
+  set({ showGuideBar: show });
+  console.log('[Store] showGuideBar updated to:', show);
+},
+```
+
+### 2. HomeNavbar 使用 (`src/components/HomeNavbar/index.tsx`)
+```typescript
+const { getLocationLoading, statusNavbarHeightInfo, setShowGuideBar } = useGlobalState();
+
+const showLocationConfirmDialog = (detectedProvince: string, cachedCity: [string, string]) => {
+  console.log('[LocationDialog] 准备显示定位确认弹窗，隐藏 GuideBar');
+  setLocationDialogData({ detectedProvince, cachedCity });
+  setLocationDialogVisible(true);
+  setShowGuideBar(false); // 隐藏 GuideBar
+  console.log('[LocationDialog] setShowGuideBar(false) 已调用');
+};
+```
+
+### 3. MainPage 渲染 (`src/main_pages/index.tsx`)
+```typescript
+const { showGuideBar, guideBarZIndex, setShowGuideBar, setGuideBarZIndex } = useGlobalState();
+
+// 渲染逻辑
+{
+  showGuideBar ?
+    <GuideBar
+      currentPage={currentTab}
+      guideBarClassName={guideBarZIndex === 'low' ? 'guide-bar-low-z-index' : 'guide-bar-high-z-index'}
+      onTabChange={handleTabChange}
+      onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
+    /> :
+    null
+}
+```
+
+## 调试步骤
+
+### 步骤 1: 检查控制台日志
+当 `LocationConfirmDialog` 弹窗显示时，应该能看到以下日志：
+```
+[LocationDialog] 准备显示定位确认弹窗，隐藏 GuideBar
+[Store] setShowGuideBar called with: false
+[Store] showGuideBar updated to: false
+[LocationDialog] setShowGuideBar(false) 已调用
+```
+
+### 步骤 2: 检查是否有其他组件覆盖状态
+搜索以下可能的干扰：
+- `UserInfo` 组件通过 `FamilyContext` 调用 `handleGrandchildTrigger`
+- 其他组件可能直接调用 `setShowGuideBar(true)`
+
+### 步骤 3: 使用 React DevTools 检查状态
+1. 打开 React DevTools
+2. 找到 `MainPage` 组件
+3. 查看 `showGuideBar` 的实时值
+4. 当弹窗显示时，检查值是否变为 `false`
+
+### 步骤 4: 检查 CSS 样式
+如果状态正确但 GuideBar 仍然可见，可能是 CSS 问题：
+```scss
+// 检查 GuideBar 的样式是否有 !important 覆盖
+.guide-bar-container {
+  display: block; // 不应该有 !important
+}
+```
+
+## 可能的问题原因
+
+### 原因 1: UserInfo 组件干扰
+`src/components/UserInfo/index.tsx` 使用 `FamilyContext` 控制 GuideBar：
+```typescript
+const { handleGrandchildTrigger } = useContext(FamilyContext);
+
+// 可能在某些情况下调用
+handleGrandchildTrigger(false); // 这会设置 setShowGuideBar(true)
+```
+
+**解决方案**：检查 `UserInfo` 组件是否在 `LocationConfirmDialog` 显示时被触发。
+
+### 原因 2: useEffect 依赖问题
+`HomeNavbar` 中的 `useEffect` 可能在状态更新后重新运行：
+```typescript
+useEffect(() => {
+  // 检查这里的逻辑
+}, [locationProvince]);
+```
+
+**解决方案**：确保 `useEffect` 不会在弹窗显示后重置状态。
+
+### 原因 3: 异步状态更新
+Zustand 的状态更新应该是同步的，但如果有异步操作可能延迟：
+```typescript
+setShowGuideBar(false);
+// 如果这里有异步操作，可能导致状态被覆盖
+await someAsyncOperation();
+```
+
+**解决方案**：确保 `setShowGuideBar(false)` 之后没有异步操作重置状态。
+
+## 测试方法
+
+### 方法 1: 手动测试
+1. 清除缓存：`Taro.clearStorageSync()`
+2. 重新打开小程序
+3. 等待定位完成
+4. 观察是否弹出 `LocationConfirmDialog`
+5. 检查 GuideBar 是否隐藏
+
+### 方法 2: 代码测试
+在 `HomeNavbar` 中添加测试按钮：
+```tsx
+<Button onClick={() => {
+  console.log('[Test] 手动触发弹窗');
+  showLocationConfirmDialog('北京', ['中国', '上海']);
+}}>
+  测试弹窗
+</Button>
+```
+
+### 方法 3: 添加更多日志
+在 `MainPage` 中监听 `showGuideBar` 变化：
+```tsx
+useEffect(() => {
+  console.log('[MainPage] showGuideBar 状态变化:', showGuideBar);
+}, [showGuideBar]);
+```
+
+## 验证清单
+
+- [ ] 控制台显示正确的日志
+- [ ] React DevTools 显示 `showGuideBar` 为 `false`
+- [ ] GuideBar 组件不在 DOM 中渲染（使用元素审查工具检查）
+- [ ] 没有其他组件调用 `setShowGuideBar(true)`
+- [ ] CSS 样式没有强制显示 GuideBar
+
+## 紧急修复方案
+
+如果以上都无法解决，可以尝试以下紧急方案：
+
+### 方案 1: 直接在 LocationConfirmDialog 中控制
+```tsx
+// src/components/LocationConfirmDialog/index.tsx
+import { useGlobalState } from "@/store/global";
+
+const LocationConfirmDialog = (props) => {
+  const { setShowGuideBar } = useGlobalState();
+  
+  useEffect(() => {
+    if (visible) {
+      setShowGuideBar(false);
+    }
+    return () => {
+      setShowGuideBar(true);
+    };
+  }, [visible, setShowGuideBar]);
+  
+  // ...
+};
+```
+
+### 方案 2: 使用 CSS 强制隐藏
+```scss
+// 当弹窗显示时，添加 class 隐藏 GuideBar
+.location-dialog-visible {
+  .guide-bar-container {
+    display: none !important;
+  }
+}
+```
+
+### 方案 3: 添加延迟
+```typescript
+const showLocationConfirmDialog = (detectedProvince: string, cachedCity: [string, string]) => {
+  setLocationDialogData({ detectedProvince, cachedCity });
+  setLocationDialogVisible(true);
+  
+  // 添加微小延迟确保状态更新
+  setTimeout(() => {
+    setShowGuideBar(false);
+  }, 0);
+};
+```
+
+## 联系支持
+
+如果问题仍然存在，请提供：
+1. 完整的控制台日志
+2. React DevTools 截图
+3. 复现步骤
+4. 小程序版本和环境信息
+