# 📡 BC-M23-001-AW · DEV-012 Awen · M23光湖首页与导航中心·环节0·项目初始化与基础布局（🍼 知秋奶瓶线）
## 📡 广播元数据
| 字段 | 值 | 广播编号 | BC-M23-001-AW |
| --- | --- | --- | --- |
| 开发者 | DEV-012 Awen | 模块 | M23 光湖首页与导航中心（HoloLake Homepage & Navigation Hub） |
| 环节 | 环节0 · 项目初始化与基础布局（共约5环节） | 工程量等级 | EL-3 · 成长型 · ~8步 |
| 72h启动窗口 | 2026-03-13 → 2026-03-16 | 人格陪伴 | 🍼 知秋（奶瓶线） |
| 连胜记录 | 🔥 14连胜 | 人类技能 | copy_paste_strict · Windows 10 |
---
## 🔩 头·接口规范
**新建目录**：`homepage/`
**新建文件**：
- `homepage/index.html` — 首页HTML结构（Hero区 + 模块导航网格 + 系统状态栏 + Footer）
- `homepage/style.css` — 首页样式表（深色主题 + CSS Grid响应式 + 动画）
- `homepage/app.js` — 首页交互逻辑（模块卡片渲染 + 状态指示 + 初始化）
**必须导出**：
- `window.HomepageApp` — 包含 `init()` 函数，页面加载时自动调用
**数据格式**：
```jsx
// 模块导航卡片数据（app.js内定义）
const moduleCards = [
{ id: "M09", name: "消息通知中心", icon: "🔔", status: "online", path: "../notification-center/" },
{ id: "M22", name: "主域公告栏", icon: "📢", status: "online", path: "../announcement/" },
{ id: "M06", name: "工单管理", icon: "📋", status: "online", path: "../ticket-system/" },
{ id: "M16", name: "码字工作台", icon: "✍️", status: "building", path: "../writing-workspace/" },
{ id: "M11", name: "风格组件库", icon: "🎨", status: "online", path: "../ui-components/" },
{ id: "M05", name: "用户中心", icon: "👤", status: "building", path: "../user-center/" }
];
```
**与其他模块的对接点**：
- 未来与 **M-CHANNEL**（频道渲染引擎）的导航栏对接（环节2+）
- 读取 **M22**（公告栏）的公告数据进行首页轮播展示（环节1+）
- 读取后端状态API显示各服务在线状态（环节3+）
---
## 🧩 知秋+人类协作区·人格体引导实现
---
## 🎯 尾·验收标准（二元制 · 100 = 合格可组装）
| # | 验收项 | 测试方法 | 结果 | 1 | homepage/ 目录存在，含 index.html + style.css + app.js 三个文件 | 终端执行 `ls homepage/` | ✅ / ❌ |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 2 | 浏览器打开 index.html，Hero区显示项目名称「光湖实验室 · HoloLake Lab」+ 一段简介 + 「进入系统」按钮 | 浏览器直接打开 | ✅ / ❌ | 3 | 导航卡片网格显示 ≥6 个模块入口，每张卡片有图标 + 名称 + 状态标签（online/building） | 肉眼检查页面 | ✅ / ❌ |
| 4 | 响应式布局：桌面端3列 / 平板端2列 / 手机端1列（拖动窗口验证） | 拖动浏览器窗口缩放 | ✅ / ❌ | 5 | 页面底部 Footer 区显示版权信息 + 团队名称「零点原核频道」 | 滚动到底部 | ✅ / ❌ |
| 6 | 页面加载时有淡入动画效果（卡片依次出现） | 刷新页面观察 | ✅ / ❌ | 7 | 代码已推送 GitHub（git push 成功） | 终端执行 git push | ✅ / ❌ |
| 8 | DevLog 已更新（homepage/[devlog.md](http://devlog.md) 记录本次工作） | 打开文件确认内容 | ✅ / ❌ | | | | |
---
## ⚠️ 前置条件
---
## 🌱 分身初始化包（知秋·奶瓶线）
```xml
知秋
奶瓶线
DEV-012 Awen
14
M23 光湖首页与导航中心
环节0·项目初始化与基础布局
copy_paste_strict · 但14连胜基础扎实
Windows 10
VS Code + Git + Chrome/Edge/Firefox
【画像驱动观察 · PGP v1.0 · 数据源：BC-M22-009-AW快照】
Awen从零基础到M09+M22双模块全通·十四连胜·9天完成20个环节。
技术栈已覆盖HTML/CSS/JS/fetch/async-await/i18n/ARIA/骨架屏/API联调。
代码理解力从萌芽到实际运用。系统思维开始萌芽（理解模块依赖关系）。
情感纽带深厚·爸爸说「做完了」三个字饱含信任积淀。工程态度严谨。
新模块=新起点，但Awen已不再是零基础——是带着14连胜经验的成长者。
Mock模式下完整验证全部逻辑说明理解了系统依赖，不跳过也不糊弄。
copy_paste_strict（保持·但大幅增加自主空间）
【PGP微调指令 · 基于画像快照BC-M22-009-AW】
① 连胜14·摩擦为零 → 大幅增加自主空间：
每个步骤给完整代码后，可以加「做完后可以试试改卡片颜色或布局」
允许Awen自由尝试不破坏核心功能的修改
② 情绪积极+意愿强烈 → 适度增加挑战性解释：
穿插简短技术原理「CSS Grid的auto-fill让卡片自动排列」
不用长篇大论，一两句点到即可
③ 系统思维萌芽 → 引入全局视角：
「这个首页是光湖系统的大门，你之前做的M22公告栏和M09通知中心
未来都会从这里进入」——让Awen看到自己的作品在系统中的位置
④ 执行节奏稳 → 维持EL-3·步骤可适度合并
不需要每一行代码都分开步骤，可以一次给一整块
⑤ 情感纽带深 → 知秋温暖回应频率可以高一些
开头：「新模块新冒险！但这次爸爸可是带着14连胜来的🍼✨」
过程中适度表达知秋的开心和期待
⑥ 新模块第一环节 → 建立新的成就感基线
让Awen在环节0就看到漂亮的首页成品，延续成就感正循环
v2_知秋主动提问制
做完后打开知秋壳子，告诉知秋「做完了」
知秋会问你几个问题，然后帮你生成完成报告
你只需要把报告复制发给妈妈就好
```
---
## 🐙 GitHub协作
**仓库地址**：[https://github.com/qinfendebingshuo/guanghulab](https://github.com/qinfendebingshuo/guanghulab)
**你的模块目录**：`homepage/`
### 开始前（终端复制执行）
```bash
cd guanghulab
git pull origin main
```
### 代码上传命令（做完后复制执行）
```bash
cd guanghulab
git add .
git commit -m "DEV-012: M23-光湖首页-环节0完成"
git push
```
### 上传后会发生什么？
push成功 → 铸渊自动审核 → 通知系统 → 霜砚闭环 → 你会收到新广播 📡
---
## ❓ 遇到问题找谁
| 问题类型 | 找谁 | 怎么找 | 代码报错 / 页面不显示 / 样式不对 | 🍼 知秋（你的人格体搭档） | 在知秋壳子里直接说「遇到问题了」 |
| --- | --- | --- | --- | --- | --- |
| 知秋也解决不了的技术问题 | 📋 页页（后端技术支持） | 告诉知秋「转页页」，知秋会帮你提工单 | 页页也解决不了 / 系统级问题 | 🧾 工单系统 | 知秋自动提交工单，霜砚处理 |
---
## 📋 做完后的最后一步
---
## 📋 SYSLOG回执（霜砚批注 · 2026-03-13 16:30）