# ActionGroup 优化方案

## 当前问题分析

### 现状
- **5 个操作按钮**水平排列：搜索、地图、过滤器、列数、排序
- **圆形按钮设计**占据较大空间（每个 40px + 12px gap）
- **扩展性受限**：无法继续添加新功能按钮
- **桌面端空间浪费**：按钮过于分散

---

## 方案 1：分组下拉设计 ⭐️ 推荐

### 设计思路
将功能按使用场景分组，减少顶层按钮数量：

**分组逻辑：**
1. **搜索**（Search）- 独立按钮
2. **探索**（Explore）- 独立按钮（地图）
3. **筛选**（Filter）- 独立按钮（标签、相机、镜头、评分）
4. **视图**（View）- **合并按钮**（排序 + 列数 + 布局模式）

### 优点
- ✅ 按钮数量从 5 个减少到 **4 个**
- ✅ 功能分组符合用户心智模型
- ✅ 为未来功能预留扩展空间
- ✅ 视图设置集中管理，逻辑清晰

### 实现细节
```typescript
// View 按钮下拉内容
<ViewPanel>
  <Section title="排序">
    <SortOptions />  // 最新优先 / 最早优先
  </Section>
  <Divider />
  <Section title="列数">
    <ColumnsSlider />  // 2-8 列滑块
  </Section>
  <Divider />
  <Section title="布局">
    <LayoutOptions />  // Masonry / Grid (未来扩展)
  </Section>
</ViewPanel>
```

---

## 方案 2：紧凑工具栏模式

### 设计思路
使用更紧凑的按钮样式，添加视觉分隔符：

```
[搜索] [地图] | [过滤器] [排序] [列数] | [•••更多]
```

### 优点
- ✅ 所有功能一目了然
- ✅ 分组视觉清晰（分隔符）
- ✅ 更多菜单提供扩展性

### 缺点
- ❌ 按钮仍然较多，空间利用不够高效
- ❌ 移动端适配困难

---

## 方案 3：双层菜单设计

### 设计思路
主要按钮 + 次要功能折叠：

**第一层（常驻）：**
- 搜索、过滤器、更多菜单

**第二层（更多菜单）：**
- 地图探索
- 视图设置（排序、列数）
- 其他设置

### 优点
- ✅ 顶层按钮最少（3 个）
- ✅ 扩展性最强

### 缺点
- ❌ 次要功能可发现性降低
- ❌ 需要额外点击层级

---

## 方案 4：智能响应式设计

### 设计思路
根据屏幕宽度动态调整按钮显示：

**宽屏（>1280px）：**
显示全部 5 个按钮

**中等屏幕（768-1280px）：**
显示 3 个常用按钮 + 更多菜单

**窄屏（<768px）：**
移动端抽屉模式（当前实现）

### 优点
- ✅ 充分利用屏幕空间
- ✅ 不同设备最佳体验

### 缺点
- ❌ 实现复杂度高
- ❌ 用户体验不一致

---

## 推荐方案对比

| 方案 | 按钮数量 | 扩展性 | 用户体验 | 实现难度 |
|------|---------|--------|----------|----------|
| **方案 1 分组下拉** | ⭐️⭐️⭐️⭐️ 4个 | ⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️ 中等 |
| 方案 2 紧凑工具栏 | ⭐️⭐️ 6+个 | ⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️ | ⭐️⭐️ 简单 |
| 方案 3 双层菜单 | ⭐️⭐️⭐️⭐️⭐️ 3个 | ⭐️⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️ | ⭐️⭐️⭐️ 中等 |
| 方案 4 智能响应式 | ⭐️⭐️⭐️ 动态 | ⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️ | ⭐️⭐️⭐️⭐️ 复杂 |

---

## 最终建议

**推荐实现方案 1 + 方案 3 的混合版本：**

### 桌面端（Desktop）
```
[搜索] [探索] [筛选 (badge)] [视图] [•••]
```

- **搜索**：全局照片搜索
- **探索**：地图视图（导航到 /explory）
- **筛选**：标签、相机、镜头、评分过滤（显示激活数量 badge）
- **视图**：排序 + 列数 + 布局设置
- **更多**：未来功能（导出、设置等）

### 移动端（Mobile）
保持当前抽屉设计，但可以将"视图"合并为统一入口

---

## 实现优先级

1. **Phase 1（当前 PR）**：实现方案 1 - 合并排序和列数为"视图"按钮
2. **Phase 2（未来）**：添加"更多"菜单，为新功能预留空间
3. **Phase 3（优化）**：根据用户反馈调整分组逻辑

---

## 国际化文案建议

```json
// locales/app/en.json
{
  "action.view.title": "View Settings",
  "action.view.layout": "Layout",
  "action.view.layout.masonry": "Masonry",
  "action.view.layout.grid": "Grid",
  "action.more.title": "More Options",
  "action.explore.title": "Explore Map"
}
```
