# 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>