设计文档：行首页 OctopusGraph → 圈子区块替换
背景
行（Action）维度首页当前使用 OctopusGraph 组件展示"重要关系 + 关系健康"（联系人通讯录 + 健康预警）。
现需将其替换为"圈子"概念，展示用户已加入的圈子和发现推荐圈子。
需求
- 替换
action/index.vue 中第 92-96 行的 <OctopusGraph> 组件
- 展示"我的圈子"（水平滚动卡片列表）
- 展示"发现推荐"（列表展示可加入的圈子）
- 移除原有的联系人导入、关系健康预警、互动记录、关系问卷功能（这些在 OctopusGraph 中）
设计方案
布局结构
┌─────────────────────────────────┐
│ 🤝 我的圈子 发现更多 › │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ 🎯 │ │ 💪 │ │ 📚 │ │
│ │篮球圈 │ │运动圈 │ │读书圈│ │
│ │ 12人 │ │ 8人 │ │ 15人 │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
│ 🔍 发现推荐 查看更多 › │
│ ┌─────────────────────────┐ │
│ │ 🎨 绘画兴趣圈 18人 › │ │
│ ├─────────────────────────┤ │
│ │ 🏃 晨跑打卡圈 10人 › │ │
│ ├─────────────────────────┤ │
│ │ 🎵 音乐分享圈 22人 › │ │
│ └─────────────────────────┘ │
└─────────────────────────────────┘
组件架构
| 已有组件 |
用途 |
CircleCard.vue |
展示单个圈子卡片（图标、名称、人数） |
CircleDetail.vue |
圈子详情弹窗（查看成员、加入/退出） |
数据流
- onShow/加载时: 并行调用
getMyCircles(childId) 和 discoverCircles(childId)
- 数据存储:
data() 新增 myCircles 和 discoverCircles 两个数组
- 点击圈子:
CircleDetail 弹窗显示详情，可操作加入/退出
- 点击"发现更多"/"查看更多": 跳转至发现圈子页面
API 新增
在 cfc-frontend/utils/api.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 行为）
- 无圈子: 显示空态提示，只展示发现推荐部分
- 发现推荐为空: 不展示"发现推荐"区块
- 数据加载失败: 静默失败，区块不显示错误提示
