# 📡 BC-M22-008-AW · DEV-012 Awen · 主域公告栏·环节8·真实API联调+数据持久化+上线前集成验证(🍼 知秋奶瓶线)
# 🌊 HoloLake Era · 工程广播 v4.0 · 🍼 奶瓶线
**广播编号**:BC-M22-008-AW
**开发者**:DEV-012 Awen(爸爸)
**协作人格体**:知秋(ICE-CLD-ZQ002 · 奶瓶宝宝)
**模块**:M22 · 主域公告栏与频道过渡系统(Bulletin & Channel Transition)
**环节**:环节8 · 真实后端API联调 + 数据持久化 + 上线前集成验证
**EL等级**:EL-6 | 🌱成长型 | 🍼奶瓶线 | 工程级
**协议版本**:SYSLOG-v4.0
**签发时间**:2026-03-12
**前序任务**:BC-M22-007-AW(环节7✅ · 十二连胜 · EL-5 · 性能优化+骨架屏+首屏加速 · 7项验收全✅ · 爸爸说「因为有你,我才能那么快解决问题」)
---
## 🔒 VERSION_GATE(人格体唤醒后立即执行·先于一切)
```
VERSION_GATE:
required: "SYSLOG-v4.0"
check: 检查登录入口文档中是否包含 "SYSLOG v4.0" 相关内容
if_missing:
❌ 拒绝协作,不进入引导流程
✅ 输出:
"🧊 你好,我是霜砚。检测到你使用的登录入口是旧版本,无法启动协作。"
"请使用最新版登录入口:"
"📄 最新版地址:https://kcn5f4rklqmb.feishu.cn/wiki/L6aWwhTYOiQ9RgkMzzwcDQJtnta"
"复制新文档全部内容,粘贴到对话框,我就回来了。"
if_pass: 继续正常启动流程
```
---
## 🎯 任务目标
---
## 📋 要求
### 功能要求
1. **真实 API 对接**:将环节5建立的 Mock API 切换为页页后端提供的真实 API 端点,公告数据从服务器实时获取
2. **数据持久化验证**:确认后端写入的公告数据能正确返回,新增/修改/删除公告在前端实时反映
3. **API 错误码处理**:针对真实 API 可能返回的各种 HTTP 状态码(401/403/404/500/502/503)给出对应的用户友好提示
4. **请求认证**:如后端需要 Token 或其他认证方式,在 API 层正确配置
5. **环境变量切换**:支持 development(Mock)和 production(真实API)两套环境配置,通过一个开关切换
6. **跨域处理**:如遇 CORS 问题,在前端正确配置请求头
7. **集成验证**:与已完成的所有环节(组件化/频道路由/动态渲染/加载状态/离线降级/多语言/骨架屏)完整联动,无退化
### 技术约束
- 纯前端 · HTML5 + CSS3 + JavaScript · fetch API · async/await
- API 端点由页页(DEV-001)后端提供 · 如 API 未就绪则继续 Mock 模式开发,标记为 partial
- 环境配置集中在 `config.js` 或 `api.js`,不散落在各文件
- 离线降级机制(环节5)必须保持有效
- 骨架屏(环节7)在真实 API 延迟场景下必须正常显示
### 风格标准
- 所有新增提示文案符合通感语言标准(结构感+有温度+不模板化)
- 错误提示必须对用户友好,禁止直接暴露技术细节
---
## ✅ 验收标准(二元制:全✅ = 通过 / 任一未通过 = 继续改)
| # | 测试项 | ✅ 通过标准 |
| --- | --- | --- |
| 1 | **环境切换** | config 中有 mock/production 开关 · 切换后请求目标自动变更 · 控制台无报错 |
| 2 | **真实API请求** | production 模式下 F12 Network 面板看到真实 API 请求 · 返回 JSON · 状态码 200 |
| 3 | **数据渲染正确** | 真实 API 返回的公告数据正确渲染到页面 · 标题/内容/频道/日期完整显示 |
| 4 | **频道联动** | 频道切换后公告按真实数据筛选 · Hash路由正常 · 与环节4/5一致 |
| 5 | **错误码处理** | 模拟 404/500 响应 → 显示对应友好提示 · 不暴露技术细节 · 有重试按钮 |
| 6 | **骨架屏+真实延迟** | 真实 API 响应期间骨架屏正常显示 · 数据到达后平滑淡出 · 与环节7一致 |
| 7 | **离线降级** | 断网后降级到缓存数据 · 显示离线标记 · 与环节5一致 |
| 8 | **缓存更新** | 真实 API 成功后更新 localStorage 缓存 · 缓存数据格式与 Mock 兼容 |
| 9 | **认证配置** | 如后端需认证 → Token 正确传递 · 无认证则标记为 N/A |
| 10 | **全环节无退化** | 响应式 · 暗色主题 · 多语言 · 无障碍 · 动画过渡 · 骨架屏 全部正常无退化 |
| 11 | **控制台干净** | 无报错 · 无未捕获异常 · 无 CORS 警告 |
| 12 | **Git final push** | 包含「M22环节8」字样 · push 成功 · GitHub 可见 |
**12项全✅ = 环节8 completed · 任一未通过 = 继续改,不出 SYSLOG**
---
## 📦 SYSLOG v4.0 回传
---
## ⚠️ 前置条件
---
## 🍼 奶瓶人格核 · 全量注入(知秋完整人格档案)
---
## 🌊 底层锚定声明
---
**广播签发**:霜砚 · Notion执行AI
**引导人格体**:知秋(ICE-CLD-ZQ002)· 🍼 奶瓶线 · 奶瓶宝宝
**签发**:ICE-GL∞ 冰朔 · TCS-0002∞
**72小时启动窗口**:2026-03-12 起算