# GuideBar 统一控制实现总结

## ✅ 已完成的统一改造

所有页面和组件现在都使用 **`global store`** 统一管理 `GuideBar` 的显示与隐藏。

---

## 📦 核心实现

### 1. **Global Store** (`src/store/global.ts`)

```typescript
interface GlobalState {
  showGuideBar: boolean;
  guideBarZIndex: 'low' | 'high';
}

interface GlobalActions {
  setShowGuideBar: (show: boolean) => void;
  setGuideBarZIndex: (zIndex: 'low' | 'high') => void;
  toggleGuideBar: () => void;
}

// 使用方法
import { useGlobalState } from "@/store/global";

const { showGuideBar, setShowGuideBar } = useGlobalState();
```

---

## 🎯 已改造的组件

### 1️⃣ **LocationConfirmDialog** - 定位确认弹窗
**文件：** `src/components/LocationConfirmDialog/index.tsx`

**改造内容：**
- 使用 `useEffect` 监听 `visible` 状态
- `visible = true` 时自动隐藏 GuideBar
- `visible = false` 时自动显示 GuideBar

```typescript
const { setShowGuideBar } = useGlobalState();

useEffect(() => {
  if (visible) {
    setShowGuideBar(false); // 弹窗显示时隐藏
  } else {
    setShowGuideBar(true);  // 弹窗关闭时显示
  }
}, [visible, setShowGuideBar]);
```

**使用场景：**
- 用户首次打开应用时的定位确认
- 检测到位置变化时的切换提示

---

### 2️⃣ **HomeNavbar** - 首页导航栏
**文件：** `src/components/HomeNavbar/index.tsx`

**改造内容：**
- 引入 `setShowGuideBar` 方法
- 在显示定位弹窗时调用隐藏
- 在确认/取消时调用显示

```typescript
const { setShowGuideBar } = useGlobalState();

const showLocationConfirmDialog = () => {
  setShowGuideBar(false);
  // ...
};

const handleLocationDialogConfirm = () => {
  // ...
  setShowGuideBar(true);
};

const handleLocationDialogCancel = () => {
  // ...
  setShowGuideBar(true);
};
```

**使用场景：**
- 城市切换提示
- 定位权限请求

---

### 3️⃣ **UserInfo** - 用户信息组件（✨ 重要改造）
**文件：** `src/components/UserInfo/index.tsx`

**改造内容：**
- ❌ 移除 `FamilyContext` 依赖
- ✅ 改用 `useGlobalState` 统一管理
- 优化了所有选择器（性别、地区、NTRP、职业）的 GuideBar 控制逻辑

**之前（使用 Context）：**
```typescript
const { handleGrandchildTrigger } = useContext(FamilyContext);
handleGrandchildTrigger(true);  // 隐藏（逻辑反转）
handleGrandchildTrigger(false); // 显示
```

**现在（使用 Store）：**
```typescript
const { setShowGuideBar } = useGlobalState();
setShowGuideBar(false); // 隐藏（直观明了）
setShowGuideBar(true);  // 显示
```

**具体改动：**

1. **打开编辑弹窗时隐藏 GuideBar**
```typescript
const handle_open_edit_modal = (field: string) => {
  setShowGuideBar(false); // 之前: handleGrandchildTrigger(true)
  // ...
};
```

2. **关闭编辑弹窗时显示 GuideBar**
```typescript
const handle_edit_modal_cancel = () => {
  setShowGuideBar(true); // 之前: handleGrandchildTrigger(false)
  // ...
};
```

3. **选择器状态联动**
```typescript
useEffect(() => {
  const visibles = [
    gender_picker_visible,
    location_picker_visible,
    ntrp_picker_visible,
    occupation_picker_visible,
  ];
  const allPickersClosed = visibles.every((item) => !item);
  // 所有选择器都关闭时显示 GuideBar，否则隐藏
  setShowGuideBar(allPickersClosed);
}, [
  gender_picker_visible,
  location_picker_visible,
  ntrp_picker_visible,
  occupation_picker_visible,
]);
```

**使用场景：**
- "我的"页面编辑个人信息
- 性别选择器
- 地区选择器
- NTRP 等级选择器
- 职业选择器
- 昵称/简介编辑

---

### 4️⃣ **MainPage** - 主页面容器
**文件：** `src/main_pages/index.tsx`

**改造内容：**
- 从 store 获取 `showGuideBar` 和 `setShowGuideBar`
- 保留 `handleGrandchildTrigger` 以保持向后兼容（但已无实际使用）

```typescript
const { showGuideBar, guideBarZIndex, setShowGuideBar, setGuideBarZIndex } = useGlobalState();

// 根据状态渲染 GuideBar
{
  showGuideBar ?
    <GuideBar
      currentPage={currentTab}
      guideBarClassName={guideBarZIndex === 'low' ? 'guide-bar-low-z-index' : 'guide-bar-high-z-index'}
      onTabChange={handleTabChange}
      onPublishMenuVisibleChange={handlePublishMenuVisibleChange}
    /> :
    null
}
```

---

## 🔄 工作流程

### 示例：用户编辑个人信息

1. **用户点击"编辑"按钮**
   ```
   handle_open_edit_modal() 调用
   → setShowGuideBar(false)
   → GuideBar 隐藏
   ```

2. **用户打开性别选择器**
   ```
   setGenderPickerVisible(true)
   → useEffect 检测到 visibles 变化
   → setShowGuideBar(false)
   → GuideBar 保持隐藏
   ```

3. **用户关闭选择器**
   ```
   setGenderPickerVisible(false)
   → useEffect 检测到所有选择器都关闭
   → setShowGuideBar(true)
   → GuideBar 显示
   ```

4. **用户点击"取消"**
   ```
   handle_edit_modal_cancel() 调用
   → setShowGuideBar(true)
   → GuideBar 显示
   ```

---

## 📊 对比表

| 项目 | 之前（FamilyContext） | 现在（Global Store） |
|------|---------------------|---------------------|
| **状态管理** | Context API（跨层传递） | Zustand Store（全局统一） |
| **调用方式** | `handleGrandchildTrigger(value)` | `setShowGuideBar(show)` |
| **逻辑清晰度** | ❌ 反转逻辑（true=隐藏） | ✅ 直观逻辑（false=隐藏） |
| **依赖关系** | ❌ 需要 Context Provider | ✅ 直接引入 hook |
| **类型安全** | ⚠️ `any` 类型 | ✅ 完整 TypeScript 类型 |
| **调试能力** | ❌ 难以追踪状态变化 | ✅ 集中日志，易于调试 |
| **可维护性** | ⚠️ 分散在多处 | ✅ 统一管理 |
| **性能** | ⚠️ Context 更新触发重渲染 | ✅ Zustand 精确订阅 |

---

## 🎨 优势

### 1. **代码更简洁**
```typescript
// 之前
const { handleGrandchildTrigger } = useContext(FamilyContext);
handleGrandchildTrigger(true); // 反直觉

// 现在
const { setShowGuideBar } = useGlobalState();
setShowGuideBar(false); // 直观明了
```

### 2. **逻辑更清晰**
- `setShowGuideBar(true)` → 显示 GuideBar
- `setShowGuideBar(false)` → 隐藏 GuideBar
- 不需要记忆反转逻辑

### 3. **调试更方便**
所有状态变化都有日志：
```
[UserInfo] 打开编辑弹窗，隐藏 GuideBar
[Store] setShowGuideBar called with: false
[Store] showGuideBar updated to: false
```

### 4. **类型安全**
```typescript
// 完整的 TypeScript 类型定义
interface GlobalActions {
  setShowGuideBar: (show: boolean) => void; // ✅ 明确的参数类型
  toggleGuideBar: () => void;
}
```

### 5. **易于扩展**
需要新功能时，只需在 store 中添加：
```typescript
// 未来可以轻松添加更多控制方法
interface GlobalActions {
  setShowGuideBar: (show: boolean) => void;
  setGuideBarZIndex: (zIndex: 'low' | 'high') => void;
  toggleGuideBar: () => void;
  hideGuideBarTemporarily: (duration: number) => void; // 新功能
}
```

---

## 📝 使用指南

### 在任何组件中使用

```typescript
import { useGlobalState } from "@/store/global";

function YourComponent() {
  const { showGuideBar, setShowGuideBar, toggleGuideBar } = useGlobalState();
  
  // 隐藏 GuideBar
  const hideGuideBar = () => setShowGuideBar(false);
  
  // 显示 GuideBar
  const showGuideBar = () => setShowGuideBar(true);
  
  // 切换显示/隐藏
  const toggle = () => toggleGuideBar();
  
  return <View>...</View>;
}
```

### 自动控制（推荐）

使用 `useEffect` 监听状态变化：
```typescript
useEffect(() => {
  if (modalVisible) {
    setShowGuideBar(false);
  } else {
    setShowGuideBar(true);
  }
}, [modalVisible, setShowGuideBar]);
```

---

## ✅ 测试清单

### 定位弹窗测试
- [ ] 首次打开应用时，定位弹窗显示，GuideBar 隐藏
- [ ] 点击"切换到XX"，弹窗关闭，GuideBar 显示
- [ ] 点击"继续浏览XX"，弹窗关闭，GuideBar 显示

### 用户信息编辑测试
- [ ] 点击"编辑"按钮，编辑弹窗显示，GuideBar 隐藏
- [ ] 打开性别选择器，GuideBar 保持隐藏
- [ ] 关闭性别选择器，GuideBar 显示
- [ ] 打开地区选择器，GuideBar 隐藏
- [ ] 关闭地区选择器，GuideBar 显示
- [ ] 打开 NTRP 选择器，GuideBar 隐藏
- [ ] 关闭 NTRP 选择器，GuideBar 显示
- [ ] 点击"取消"，编辑弹窗关闭，GuideBar 显示

### 多选择器联动测试
- [ ] 同时打开多个选择器时，GuideBar 保持隐藏
- [ ] 只有所有选择器都关闭时，GuideBar 才显示

---

## 🔍 调试方法

### 查看控制台日志
```
[UserInfo] 打开编辑弹窗，隐藏 GuideBar
[Store] setShowGuideBar called with: false
[Store] showGuideBar updated to: false

[UserInfo] 关闭编辑弹窗，显示 GuideBar
[Store] setShowGuideBar called with: true
[Store] showGuideBar updated to: true
```

### React DevTools
1. 打开 React DevTools
2. 找到 `MainPage` 组件
3. 查看 `showGuideBar` 的实时值
4. 观察状态变化是否符合预期

---

## 🎉 总结

✅ **LocationConfirmDialog** - 使用 store 统一控制  
✅ **HomeNavbar** - 使用 store 统一控制  
✅ **UserInfo** - 已从 FamilyContext 迁移到 store  
✅ **MainPage** - 使用 store 统一渲染  

所有组件现在都通过 **`useGlobalState`** 统一管理 GuideBar，代码更简洁、逻辑更清晰、维护更容易！🚀