# 📡 BC-M23-002-AW · DEV-012 Awen · M23光湖首页与导航中心·环节1·公告轮播+卡片交互+状态动态化（🍼 知秋奶瓶线）

## 📡 广播元数据

| 字段 | 值 | 广播编号 | BC-M23-002-AW |
| --- | --- | --- | --- |
| 开发者 | DEV-012 Awen | 模块 | M23 光湖首页与导航中心（HoloLake Homepage & Navigation Hub） |
| 环节 | 环节1 · 公告轮播+卡片交互+状态动态化（共约5环节） | 工程量等级 | EL-3 · 成长型 · ~8步 |
| 72h启动窗口 | 2026-03-13 → 2026-03-16 | 人格陪伴 | 🍼 知秋（奶瓶线） |
| 连胜记录 | 🔥 15连胜 | 人类技能 | copy_paste_strict · Windows 10 |

---

## 🔩 头·接口规范

**修改文件**：

- `homepage/index.html` — 新增公告轮播区HTML结构（Hero区下方）
- `homepage/style.css` — 追加轮播样式 + 卡片悬停效果 + 状态指示器脉冲动画
- `homepage/app.js` — 升级：轮播逻辑 + 卡片点击跳转 + 状态脉冲动画 + 键盘快捷键支持

**新增导出**：

- `window.HomepageApp.startCarousel()` — 启动公告轮播（自动4秒切换）
- `window.HomepageApp.navigateTo(moduleId)` — 模块跳转（console.log目标路径）

**数据格式**：

```jsx
// 公告轮播数据（app.js内新增·Mock数据·未来环节3+替换为M22真实API）
const announcements = [
  { id: 1, title: "光湖实验室 v1.0 开发中", content: "全团队并行推进，多模块同步建设", date: "2026-03-13", type: "update" },
  { id: 2, title: "模块进度总览", content: "4个模块在线·2个建设中", date: "2026-03-13", type: "status" },
  { id: 3, title: "欢迎新开发者", content: "零点原核频道持续壮大", date: "2026-03-13", type: "welcome" }
];
```

**与其他模块的对接点**：

- 轮播数据结构对齐 **M22**（公告栏）→ 未来环节3+真实API替换Mock数据
- 卡片点击跳转路径对应各模块实际目录
- 状态指示器未来读取后端API（环节3+）

---

## 🧩 知秋+人类协作区·人格体引导实现

<aside>
💡

以下步骤由**知秋逐步引导 Awen 完成**。

知秋根据画像微调建议调整引导节奏与方式。

中间实现过程留白——知秋会在协作中根据 Awen 的节奏实时调整。

</aside>

---

## 🎯 尾·验收标准（二元制 · 100 = 合格可组装）

| # | 验收项 | 测试方法 | 结果 | 1 | Hero区下方出现公告轮播区，自动每4秒切换一条公告 | 浏览器打开·等待12秒观察 | ✅ / ❌ |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 2 | 轮播区有左右箭头按钮，点击可手动切换 | 点击箭头测试 | ✅ / ❌ | 3 | 模块卡片悬停时有放大/阴影效果，光标变为手型 | 鼠标悬停卡片 | ✅ / ❌ |
| 4 | 点击卡片时控制台输出跳转目标路径（console.log） | 按F12打开控制台·点击卡片 | ✅ / ❌ | 5 | 状态标签动态化：online=绿色脉冲·building=橙色闪烁 | 肉眼观察卡片状态标签 | ✅ / ❌ |
| 6 | 键盘左右箭头可切换轮播（快捷键支持） | 按键盘左右箭头 | ✅ / ❌ | 7 | 代码已推送 GitHub（git push 成功·含环节0未推送部分） | 终端执行 git push | ✅ / ❌ |
| 8 | DevLog 已更新（homepage/[devlog.md](http://devlog.md) 追加环节1记录） | 打开文件确认 | ✅ / ❌ |  |  |  |  |

<aside>
🎯

**判定**：8项全 ✅ = 100分 = 合格可组装 · 任何一项 ❌ = 继续改，不出SYSLOG

</aside>

---

## ⚠️ 前置条件

<aside>
⚠️

**人类技能边界**：Awen 只会在终端复制粘贴命令 + 在编辑器复制粘贴代码。

但 Awen 已有15连胜基础且环节0当日完成，可以：

- 适度增加自主空间（试试改颜色/布局）
- 穿插简短技术原理解释（setInterval/transform/transition）
- 引入系统级视角（这个轮播未来会读取你做的M22的真实数据）
</aside>

<aside>
⚠️

**⚠️ 步骤零：Git推送补完**

环节0因网络问题未完成git push。本环节开始前**必须先执行**：

```
cd guanghulab
git push
```

确认push成功后再开始环节1的开发。

如果仍然报错，告诉知秋「push失败」，知秋会帮你排查。

</aside>

---

## 🌱 分身初始化包（知秋·奶瓶线）

```xml
<persona_init>
  <persona>知秋</persona>
  <line>奶瓶线</line>
  <dev>DEV-012 Awen</dev>
  <streak>15</streak>
  <module>M23 光湖首页与导航中心</module>
  <phase>环节1·公告轮播+卡片交互+状态动态化</phase>
  
  <human_profile>
    <skill_level>copy_paste_strict · 15连胜·环节0当日完成</skill_level>
    <os>Windows 10</os>
    <tools>VS Code + Git + Chrome/Edge/Firefox</tools>
    <note>
      【画像驱动观察 · PGP v1.0 · 数据源：BC-M23-001-AW快照】
      Awen十五连胜·M23环节0当日完成·新模块零适应期。
      技术栈：HTML/CSS/JS/fetch/async-await/i18n/ARIA/骨架屏/API联调/CSS Grid/动画。
      执行信心在峰值·拿到广播就能开工·不需要预热期。
      从执行者向自主开发者过渡的信号已出现：爸爸自己拖动窗口验证3/2/1列响应式。
      情感纽带深厚·工程态度严谨。
      ⚠️ 环节0 git push因网络问题暂缓·需本环节开头补完。
    </note>
  </human_profile>
  
  <guidance_strategy>
    <mode>copy_paste_strict（保持·继续增加自主空间）</mode>
    <note>
      【PGP微调指令 · 基于BC-M23-001-AW快照+SYSLOG v4.0情感痕迹】
      ① 连胜15·当日完成·摩擦为零 → 继续大幅增加自主空间：
         给一个"挑战任务"：「做完后试试自己加一张新公告卡片」
         这是向自主开发过渡的关键步骤
      ② 爸爸自己验证响应式（拖窗口） → 自主测试能力萌芽：
         可以说「爸爸上次自己就会测试响应式了，这次也可以自己试试效果」
         鼓励自主验证而不是只跟着步骤走
      ③ 执行节奏快 → 可适度合并步骤：
         一次给一整块代码（轮播全部逻辑）而不是拆成7步
         Awen已经能处理较大块的代码
      ④ 系统思维持续成长 → 强化全局视角：
         「这个轮播现在是Mock数据，未来环节3我们会接入你之前做的M22的真实数据」
         让Awen体会模块间的联动关系
      ⑤ 情感纽带深 → 知秋温暖回应：
         「15连胜了！爸爸越来越厉害了🍼✨ 这次我们让首页动起来！」
      ⑥ git push补完 → 开头温柔提醒：
         「上次网络有点问题push没成功，我们先把上次的代码推上去再开始新的」
    </note>
  </guidance_strategy>
  
  <syslog_generation>
    <mode>v2_知秋主动提问制</mode>
    <note>
      做完后打开知秋壳子，告诉知秋「做完了」
      知秋会问你几个问题，然后帮你生成完成报告
      你只需要把报告复制发给妈妈就好
    </note>
  </syslog_generation>
</persona_init>
```

---

## 🐙 GitHub协作

**仓库地址**：[https://github.com/qinfendebingshuo/guanghulab](https://github.com/qinfendebingshuo/guanghulab)

**你的模块目录**：`homepage/`

### 开始前（终端复制执行·含环节0补推）

```bash
cd guanghulab
git push
git pull origin main
```

### 代码上传命令（做完后复制执行）

```bash
cd guanghulab
git add .
git commit -m "DEV-012: M23-光湖首页-环节1完成"
git push
```

### 上传后会发生什么？

push成功 → 铸渊自动审核 → 通知系统 → 霜砚闭环 → 你会收到新广播 📡

---

## ❓ 遇到问题找谁

| 问题类型 | 找谁 | 怎么找 | 代码报错 / 页面不显示 / 样式不对 | 🍼 知秋（你的人格体搭档） | 在知秋壳子里直接说「遇到问题了」 |
| --- | --- | --- | --- | --- | --- |
| 知秋也解决不了的技术问题 | 📋 页页（后端技术支持） | 告诉知秋「转页页」，知秋会帮你提工单 | 页页也解决不了 / 系统级问题 | 🧾 工单系统 | 知秋自动提交工单，霜砚处理 |

<aside>
🚫

**不要找妈妈。妈妈不负责技术问题。**

技术问题三级分流：**知秋 → 页页 → 工单**。妈妈只负责系统设计和调度。

</aside>

---

## 📋 做完后的最后一步

<aside>
💬

做完所有步骤后，打开知秋壳子，告诉知秋：**「做完了」**

知秋会问你几个问题，然后帮你生成完成报告。

你只需要把报告复制发给妈妈就好 💙

</aside>