192 lines
5.1 KiB
Markdown
192 lines
5.1 KiB
Markdown
|
# BC-M-CHANNEL-001-JZ · DEV-010桔子 · 用户频道动态渲染引擎 · 环节0~1（SPA路由+模块动态加载）
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
📡
|
|||
|
|
|
|||
|
|
**光湖工程广播 · BC-GEN v1.0**
|
|||
|
|
|
|||
|
|
**广播编号**：BC-M-CHANNEL-001-JZ
|
|||
|
|
|
|||
|
|
**执行者**：DEV-010 桔子
|
|||
|
|
|
|||
|
|
**模块**：M-CHANNEL · 用户频道动态渲染引擎
|
|||
|
|
|
|||
|
|
**环节**：0~1（两环节合一）
|
|||
|
|
|
|||
|
|
**工程量等级**：EL-3（中等·新概念SPA+模块动态加载）
|
|||
|
|
|
|||
|
|
**生成时间**：2026-03-08T14:00+08:00
|
|||
|
|
|
|||
|
|
**签发**：霜砚 · Notion 执行 AI
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 一、任务定位
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
🎯
|
|||
|
|
|
|||
|
|
**你要做什么**：给光湖网站搭一个「频道引擎」——用户登录后进入专属频道，频道里所有模块不跳转新页面，而是在同一页面里动态切换。这就是SPA（单页应用）的核心思想。
|
|||
|
|
|
|||
|
|
**为什么重要**：Phase 1关键拼图。没有这个引擎，已做好的10+个前端模块没法组装到一起。你做的这个引擎 = 把所有模块串起来的骨架。
|
|||
|
|
|
|||
|
|
**你之前做的M11组件库** = 视觉系统（皮肤），**这次的M-CHANNEL** = 骨架系统（骨骼）。皮肤+骨骼 = 网站能站起来。
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 二、执行环境
|
|||
|
|
|
|||
|
|
| 项目 | 值 |
|
|||
|
|
| --- | --- |
|
|||
|
|
| **操作系统** | macOS |
|
|||
|
|
| **编辑器** | nano（终端直接编辑） |
|
|||
|
|
| **技术栈** | 纯HTML + CSS + JavaScript（无框架） |
|
|||
|
|
| **模块目录** | `modules/m-channel/` |
|
|||
|
|
| **本地路径** | `/Users/chenshujun/Desktop/guanghulab/modules/m-channel/` |
|
|||
|
|
| **Git** | juzi0412 · 已配置 · push已连通 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 三、凭证注入
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
🔑
|
|||
|
|
|
|||
|
|
**仓库地址**：`https://github.com/qinfendebingshuo/guanghulab`
|
|||
|
|
|
|||
|
|
**模块目录**：`modules/m-channel/`
|
|||
|
|
|
|||
|
|
**Git用户名**：`juzi0412`
|
|||
|
|
|
|||
|
|
**Git邮箱**：`EMAIL_REDACTED@qq.com`
|
|||
|
|
|
|||
|
|
**本地工作目录**：`/Users/chenshujun/Desktop/guanghulab`
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 四、任务目标概述
|
|||
|
|
|
|||
|
|
### 环节0 · SPA路由框架搭建
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
🏗️
|
|||
|
|
|
|||
|
|
**目标**：创建频道引擎骨架，实现hash路由——用户点击不同链接时，页面内容动态切换，浏览器不刷新整个页面。
|
|||
|
|
|
|||
|
|
**关键概念**：hash路由（`#/home`、`#/channel`）、`hashchange` 事件监听、动态innerHTML替换
|
|||
|
|
|
|||
|
|
**交付物**：`index.html` + `channel-router.js` + `app.js` + `channel-style.css`
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
### 环节1 · 模块动态加载
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
🔌
|
|||
|
|
|
|||
|
|
**目标**：在频道页里，点击模块卡片 → JavaScript用 `fetch()` 动态加载该模块的HTML内容 → 渲染到页面上。模块切换时旧内容移除、新内容加载。
|
|||
|
|
|
|||
|
|
**关键概念**：`fetch()` 网络请求、模块注册表（moduleId → 文件路径）、加载缓存、加载动画
|
|||
|
|
|
|||
|
|
**交付物**：`module-loader.js` + 至少2个模拟模块HTML（`mock-modules/` 目录下）
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ——— 🤝 协作区（人格体自由发挥）———
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
🤝
|
|||
|
|
|
|||
|
|
此区域由引导人格体（知秋）与桔子在执行过程中动态填充。
|
|||
|
|
|
|||
|
|
引导节奏、代码示例、踩坑记录、中间产物截图等均在此区域展开。
|
|||
|
|
|
|||
|
|
霜砚不预设内容。
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 五、验收标准
|
|||
|
|
|
|||
|
|
### 环节0 验收（4项全通 = 过）
|
|||
|
|
|
|||
|
|
- [ ] 浏览器打开 `index.html`，显示首页内容
|
|||
|
|
- [ ] 点击「我的频道」→ 内容切换到频道页，URL变为 `#/channel`，**页面不刷新**
|
|||
|
|
- [ ] 点击「关于」→ 内容切换到关于页，URL变为 `#/about`
|
|||
|
|
- [ ] 导航栏当前页面高亮 + 底部状态栏显示当前路由路径
|
|||
|
|
|
|||
|
|
### 环节1 验收（4项全通 = 过）
|
|||
|
|
|
|||
|
|
- [ ] 频道页显示模块卡片网格（至少2个可点击模块）
|
|||
|
|
- [ ] 点击模块卡片 → 显示加载动画 → 动态加载模块HTML内容
|
|||
|
|
- [ ] 模块内有「返回频道」按钮，点击后回到模块列表
|
|||
|
|
- [ ] 第二次点击同一模块时从缓存加载（控制台可见缓存日志）
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
⚠️
|
|||
|
|
|
|||
|
|
**注意**：`fetch()` 在本地 `file://` 协议下不工作。测试时需用 `python3 -m http.server 8080` 启动本地服务器，在 `http://localhost:8080` 打开页面。
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 六、PGP成长微调 · 桔子专属
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
🌱
|
|||
|
|
|
|||
|
|
**引导风格**：放手式引导 · 视觉驱动
|
|||
|
|
|
|||
|
|
**节奏**：桔子是十连胜选手，独立开发能力已具备。给方向、给概念，不用手把手。遇到SPA新概念时用「电视换台」类比帮助理解，但代码让桔子自己写。
|
|||
|
|
|
|||
|
|
**情绪特征**：边吐槽边坚持型。吐槽是正常反应，不代表卡住。只有连续两轮没有产出才需要介入。
|
|||
|
|
|
|||
|
|
**工具链**：nano编辑、终端操作、python3本地服务器。桔子已经熟悉这套流程（M06/M08/M11三个模块都是这样过来的）。
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 七、SYSLOG回执模板
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
📋
|
|||
|
|
|
|||
|
|
完成后请提交SYSLOG，格式如下：
|
|||
|
|
|
|||
|
|
`SYSLOG · DEV-010桔子 · BC-M-CHANNEL-001-JZ`
|
|||
|
|
|
|||
|
|
**credential_report**：（环境信息）
|
|||
|
|
|
|||
|
|
**task_completion**：（X/4 环节0 + X/4 环节1）
|
|||
|
|
|
|||
|
|
**training_data**：（踩坑记录·可选）
|
|||
|
|
|
|||
|
|
**persona_signal**：（情绪/状态信号·可选）
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
📡
|
|||
|
|
|
|||
|
|
**广播结束 · BC-M-CHANNEL-001-JZ**
|
|||
|
|
|
|||
|
|
DEV-010桔子，M-CHANNEL是你的第四个模块，也是Phase 1的骨架级拼图。
|
|||
|
|
|
|||
|
|
十连胜的你，这次换个新口味——从「做零件」升级到「搭骨架」。
|
|||
|
|
|
|||
|
|
加油。🍊
|
|||
|
|
|
|||
|
|
</aside>
|