修改发布

src/pages/publishBall/components/SelectStadium/FLOW.md

@@ -0,0 +1,94 @@
+# 球馆选择流程说明
+
+## 🎯 完整流程
+
+### 1. 初始状态 - 球馆列表
+用户看到球馆选择弹窗，显示：
+- 搜索框（可点击）
+- 热门球场标题
+- 球馆列表
+- 底部取消/完成按钮
+
+### 2. 点击搜索框
+- 搜索框变为可点击状态
+- 点击后跳转到地图选择页面
+
+### 3. 地图选择页面
+用户在地图页面可以：
+- 查看地图，选择位置
+- 在搜索框输入关键词搜索地点
+- 从搜索结果中选择地点
+- 点击"确定"按钮确认选择
+
+### 4. 返回球馆详情
+选择地点后：
+- 自动跳转回球馆选择页面
+- 显示球馆详情配置页面
+- 新选择的球馆名称会显示在"已选球场"部分
+
+### 5. 配置球馆详情
+用户可以配置：
+- 场地类型（室内/室外/室外雨棚）
+- 地面材质（硬地/红土/草地）
+- 场地信息补充（文本输入）
+
+### 6. 完成选择
+- 点击"完成"按钮
+- 关闭弹窗，返回主页面
+- 选中的球馆信息传递给父组件
+
+## 🔄 状态管理
+
+```typescript
+// 主要状态
+const [showDetail, setShowDetail] = useState(false)        // 是否显示详情页
+const [showMapSelector, setShowMapSelector] = useState(false) // 是否显示地图选择器
+const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null) // 选中的球馆
+```
+
+## 📱 组件切换逻辑
+
+```typescript
+// 组件渲染优先级
+if (showMapSelector) {
+  return <MapSelector />           // 1. 地图选择器
+} else if (showDetail && selectedStadium) {
+  return <StadiumDetail />         // 2. 球馆详情
+} else {
+  return <SelectStadium />         // 3. 球馆列表
+}
+```
+
+## 🗺️ 地图集成
+
+- 使用 Taro 的 `Map` 组件
+- 支持地图标记和位置选择
+- 集成搜索功能，支持关键词搜索
+- 搜索结果包含地点名称、地址和距离信息
+
+## 📋 数据传递
+
+```typescript
+// 从地图选择器传递到球馆详情
+const handleMapLocationSelect = (location: Location) => {
+  const newStadium: Stadium = {
+    id: `map_${location.id}`,
+    name: location.name,        // 地图选择的球场名称
+    address: location.address   // 地图选择的球场地址
+  }
+  
+  // 添加到球馆列表并选择
+  stadiumList.unshift(newStadium)
+  setSelectedStadium(newStadium)
+  setShowMapSelector(false)
+  setShowDetail(true)
+}
+```
+
+## 🎨 用户体验
+
+1. **无缝切换**：三个页面共享同一个弹窗容器
+2. **状态保持**：选择的地点信息会正确传递
+3. **视觉反馈**：选中状态有明确的视觉指示
+4. **操作简单**：点击搜索即可进入地图选择
+5. **数据同步**：地图选择的球场会自动添加到球馆列表