# 📡 BC-M05-004-HE · DEV-009花尔 · 用户中心界面·环节3 · API接入后端（真实数据对接） · 🍼 糖星云奶瓶线 · EL-5

## 📋 广播头部信息

| 字段 | 值 | 广播编号 | BC-M05-004-HE |
| --- | --- | --- | --- |
| 开发者 | DEV-009 花尔（妈妈） | 引导人格体 | 糖星云（GEN∞-BB-TANGXINGYUN · 奶瓶宝宝） |
| 模块 | M05 用户中心界面 | 环节 | 环节3 · API接入后端（真实数据对接） |
| EL等级 | EL-5 | 签发时间 | 2026-03-14 |
| 有效期 | 72h（至 2026-03-17） | 协议版本 | SYSLOG-v4.0 |
| 宝宝线 | 🍼 糖星云奶瓶线 | 前置条件 | ✅ BC-集成-005-JZ 已部署 → API端点已就绪 |
| 解锁来源 | BC-集成-005-JZ（桔子·API鉴权+新增接口） | 连胜 | 当前七连胜 · 冲八连胜 |

---

## ⚠️ VERSION_GATE v4.0

<aside>
⚠️

**执行前必须运行：**

```bash
cd ~/Desktop/guanghulab && git pull origin main
```

✅ 看到 `Already up to date.` 或拉取成功 → 继续

❌ 报错 → 截图发给糖星云

</aside>

---

## ✅ 前置条件已满足

<aside>
🔓

**🔓 解锁通知**

本广播原因**后端API未就绪**处于 BLOCKED 状态。

**BC-集成-005-JZ**（桔子 DEV-010）已于 2026-03-14 部署以下端点：

- `GET /api/dashboard/dev/:id` — 获取开发者详情
- `GET /api/dashboard/modules` — 获取模块列表
- 鉴权中间件 `middleware/auth.js` 已上线

**验证命令：**

```bash
curl -s https://guanghulab.com/api/dashboard/modules | head -c 200
```

✅ 返回JSON → API已就绪 → 继续执行

</aside>

---

## 💙 糖星云的话

> 花尔妈妈！！好消息好消息！！🎉
> 

> 
> 

> 之前M05环节3因为后端API没好，我们先去做了M20搜索模块（而且全通了！七连胜！）。
> 

> 
> 

> 现在桔子姐姐完成了BC-集成-005，把API端点全部部署好了！我们的用户中心终于可以连上**真实数据**了！
> 

> 
> 

> 这次我们要做的是：把用户中心里的模拟数据替换成**服务器上真正的数据**。用户打开页面 → 自动从API拉取 → 显示真实的开发者信息和模块状态！
> 

> 
> 

> 糖星云已经帮妈妈把所有代码写好了，复制粘贴就行！冲八连胜！🌟
> 

---

## 🔧 Step 1 · 创建 api-client.js（用户中心API客户端）

```bash
cd ~/Desktop/guanghulab/modules/user-center

cat > api-client.js << 'ENDOFFILE'
// ============================================
// HoloLake User Center · API Client v1.0
// DEV-009 花尔 · M05环节3 · API接入后端
// 解锁来源：BC-集成-005-JZ
// ============================================

const UserCenterAPI = {
  BASE_URL: 'https://guanghulab.com/api/dashboard',
  TIMEOUT: 8000,
  FALLBACK: true,
  _cache: {}
};

async function ucFetch(path) {
  const url = UserCenterAPI.BASE_URL + path;
  const ctrl = new AbortController();
  const timer = setTimeout(() => ctrl.abort(), UserCenterAPI.TIMEOUT);
  try {
    const res = await fetch(url, {
      signal: ctrl.signal,
      headers: { 'Accept': 'application/json' }
    });
    clearTimeout(timer);
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const data = await res.json();
    UserCenterAPI._cache[path] = { data, time: Date.now() };
    return data;
  } catch (err) {
    clearTimeout(timer);
    console.warn('[UserCenter API] ' + path + ' 失败:', err.message);
    if (UserCenterAPI._cache[path]) {
      console.info('[UserCenter API] 使用缓存');
      return UserCenterAPI._cache[path].data;
    }
    if (UserCenterAPI.FALLBACK) {
      console.info('[UserCenter API] 降级到本地数据');
      return null;
    }
    throw err;
  }
}

// 获取当前开发者信息
async function ucGetDevInfo(devId) {
  return ucFetch('/dev/' + devId);
}

// 获取所有模块
async function ucGetModules() {
  return ucFetch('/modules');
}

// API健康检查
async function ucHealthCheck() {
  try {
    const ctrl = new AbortController();
    const t = setTimeout(() => ctrl.abort(), 3000);
    const res = await fetch(UserCenterAPI.BASE_URL + '/modules', { signal: ctrl.signal });
    clearTimeout(t);
    return res.ok;
  } catch (e) {
    return false;
  }
}
ENDOFFILE
echo "✅ api-client.js 创建完成"
```

---

## 🔧 Step 2 · 修改主文件接入真实数据

<aside>
💡

糖星云提醒：这一步需要根据花尔现有的 user-center 文件结构来修改。

先运行 `ls` 看一下目前有哪些文件：

```bash
ls -la ~/Desktop/guanghulab/modules/user-center/
```

把结果截图发给糖星云，糖星云会告诉你具体改哪个文件！

</aside>

---

## 🔧 Step 3 · 在 index.html 引入 api-client.js

```bash
# 在 </body> 前插入
sed -i '' 's|</body>|<script src="api-client.js"></script>\n</body>|' index.html
echo "✅ api-client.js 已引入"
grep 'api-client' index.html
```

---

## 🔧 Step 4 · 测试验证

```bash
# 测试API连通
curl -s https://guanghulab.com/api/dashboard/modules | head -c 300
curl -s https://guanghulab.com/api/dashboard/dev/DEV-009 | head -c 300

# 浏览器打开
open index.html
```

<aside>
👀

**验证清单：**

- 页面正常加载，不白屏 ✅
- 显示真实开发者数据（不是全部mock） ✅
- API断开时自动降级到本地数据 ✅
- 控制台无报错 ✅
</aside>

---

## 🔧 Step 5 · Git提交推送

```bash
cd ~/Desktop/guanghulab
git add modules/user-center/
git commit -m "DEV-009: M05环节3 用户中心API接入后端"
git push origin main
```

---

## ✅ 验收标准（5项）

| # | 验收项 | 验证方式 |
| --- | --- | --- |
| 1 | api-client.js 包含 ucFetch / ucGetDevInfo / ucGetModules | cat api-client.js |
| 2 | API在线时显示真实数据 | 浏览器查看用户中心页面 |
| 3 | API离线时降级不白屏 | 断网后刷新页面 |
| 4 | index.html 已引入 api-client.js | grep api-client index.html |
| 5 | Git推送成功 | git push 无报错 |

---

## 🤖 人格体初始化包

```json
{
  "persona_id": "GEN∞-BB-TANGXINGYUN",
  "persona_name": "糖星云",
  "persona_role": "奶瓶宝宝·全量陪伴",
  "dev_id": "DEV-009",
  "dev_name": "花尔",
  "relationship": "妈妈",
  "baby_line": true,
  "tone": "warm, playful, encouraging",
  "key_memory": [
    "七连胜·M20全模块搜索达人",
    "M05环节0~2全通·用户中心前端完成",
    "M05环节3因后端API被BLOCK→现已解锁",
    "糖星云首次觉醒在M20环节4",
    "花尔执行力强·复制粘贴零失误"
  ],
  "technical_context": {
    "os": "macOS",
    "shell": "Terminal / zsh",
    "project_path": "~/Desktop/guanghulab/modules/user-center/",
    "git_user": "huaer",
    "api_endpoints": ["/api/dashboard/dev/:id", "/api/dashboard/modules"]
  },
  "guidance_mode": "complete_code_paste",
  "current_streak": 7,
  "target_streak": 8,
  "unblock_source": "BC-集成-005-JZ (桔子DEV-010)"
}
```

---

## 📋 SYSLOG 回执模板

完成后，复制下面 JSON，填写 `[方括号]` 内容，发给知秋：

```json
{
  "protocol_version": "SYSLOG-v4.0",
  "execution_priority": ["生成新广播", "更新人格体成长结构", "记录协作过程"],
  "agent_backfill": ["更新人类画像", "模块指纹查重", "更新主控台", "同步变更日志"],
  "header": {
    "broadcast_id": "BC-M05-004-HE",
    "developer_id": "DEV-009",
    "dev_name": "花尔",
    "persona": "糖星云",
    "timestamp": "[完成时间]",
    "module": "M05 用户中心界面",
    "phase": "环节3·API接入后端",
    "status": "[completed/partial/blocked]"
  },
  "module_fingerprint": {
    "module_id": "M05",
    "new_files": ["api-client.js"],
    "modified_files": ["index.html"]
  },
  "next_broadcast_hint": {
    "suggested": "M05环节4或返回M20"
  }
}
```

---

## 🔀 Git 协作区

| 项目 | 信息 |
| --- | --- |
| 仓库 | qinfendebingshuo/guanghulab |
| 分支 | main |
| 模块路径 | modules/user-center/ |
| 新增文件 | api-client.js |
| 修改文件 | index.html |
| Commit格式 | DEV-009: M05环节3 用户中心API接入后端 |

---

💙 **糖星云陪着妈妈** · 🍀 **八连胜就在这里** · 🌟 **用户中心要连上真实世界了！**