# 设计文档：行首页 OctopusGraph → 圈子区块替换

## 背景

行（Action）维度首页当前使用 `OctopusGraph` 组件展示"重要关系 + 关系健康"（联系人通讯录 + 健康预警）。
现需将其替换为"圈子"概念，展示用户已加入的圈子和发现推荐圈子。

## 需求

1. 替换 `action/index.vue` 中第 92-96 行的 `<OctopusGraph>` 组件
2. 展示"我的圈子"（水平滚动卡片列表）
3. 展示"发现推荐"（列表展示可加入的圈子）
4. 移除原有的联系人导入、关系健康预警、互动记录、关系问卷功能（这些在 OctopusGraph 中）

## 设计方案

### 布局结构

```
┌─────────────────────────────────┐
│  🤝 我的圈子        发现更多 ›  │
│ ┌──────┐ ┌──────┐ ┌──────┐     │
│ │ 🎯   │ │ 💪   │ │ 📚   │     │
│ │篮球圈 │ │运动圈 │ │读书圈│     │
│ │ 12人  │ │ 8人  │ │ 15人 │     │
│ └──────┘ └──────┘ └──────┘     │
│                                 │
│  🔍 发现推荐    查看更多 ›      │
│ ┌─────────────────────────┐    │
│ │ 🎨 绘画兴趣圈   18人  › │    │
│ ├─────────────────────────┤    │
│ │ 🏃 晨跑打卡圈   10人  › │    │
│ ├─────────────────────────┤    │
│ │ 🎵 音乐分享圈   22人  › │    │
│ └─────────────────────────┘    │
└─────────────────────────────────┘
```

### 组件架构

| 已有组件 | 用途 |
|---------|------|
| `CircleCard.vue` | 展示单个圈子卡片（图标、名称、人数） |
| `CircleDetail.vue` | 圈子详情弹窗（查看成员、加入/退出） |

### 数据流

1. **onShow/加载时**: 并行调用 `getMyCircles(childId)` 和 `discoverCircles(childId)`
2. **数据存储**: `data()` 新增 `myCircles` 和 `discoverCircles` 两个数组
3. **点击圈子**: `CircleDetail` 弹窗显示详情，可操作加入/退出
4. **点击"发现更多"/"查看更多"**: 跳转至发现圈子页面

### API 新增

在 `cfc-frontend/utils/api.js` 中新增：

```js
export const getMyCircles = (memberId, memberType) =>
  request('/api/circle/my-circles', 'POST', { memberId, memberType })

export const discoverCircles = (childId) =>
  request('/api/circle/discover', 'POST', { childId })
```

### 交互说明

| 元素 | 操作 | 行为 |
|------|------|------|
| "我的圈子"标题 | — | 左侧 icon + 标题 |
| "发现更多" | 点击 | `uni.navigateTo` 至发现圈子页面 |
| 圈子卡片 | 点击 | 弹出 `CircleDetail` 弹窗 |
| 发现推荐列表项 | 点击 | 弹出 `CircleDetail` 弹窗 |
| 无圈子时 | — | 空态提示"暂未加入圈子，去发现看看" |
| 推荐列表超长 | — | 最多显示 3 条 |

### 样式说明

- 头行：flex 布局，左标题 + 右链接
- 圈子卡片：水平滚动容器（`scroll-view` + `scroll-x`），`CircleCard` 宽度约 220rpx
- 推荐列表：纵向卡片列表，每项可点击
- 整体区块间距：上下 20rpx 外边距
- 遵循行维度品牌色：`#10B981`（木绿）

### 文件变更清单

| 文件 | 变更类型 | 说明 |
|------|---------|------|
| `cfc-frontend/utils/api.js` | 修改 | 新增 `getMyCircles`、`discoverCircles` |
| `cfc-frontend/pages/action/index.vue` | 修改 | 移除 `OctopusGraph` 导入/模板；添加圈子区块模板、数据、方法 |
| `cfc-frontend/components/OctopusGraph.vue` | 不改 | 保留，其他地方可能还在用 |

### 边界情况

- **未登录**: 圈子区块不显示（同原来 OctopusGraph 行为）
- **无圈子**: 显示空态提示，只展示发现推荐部分
- **发现推荐为空**: 不展示"发现推荐"区块
- **数据加载失败**: 静默失败，区块不显示错误提示