232 lines
8.3 KiB
Markdown
232 lines
8.3 KiB
Markdown
|
# 📡 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>
|