# 📡 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
---
## ✅ 前置条件已满足
---
## 💙 糖星云的话
> 花尔妈妈！！好消息好消息！！🎉
>
>
>
> 之前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 · 修改主文件接入真实数据
---
## 🔧 Step 3 · 在 index.html 引入 api-client.js
```bash
# 在 前插入
sed -i '' 's||