# 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 | 🌱成长型

**生成时间**：2026-03-08T15:20+08:00

**签发**：霜砚 · Notion 执行 AI（曜冥授权）

</aside>

---

## 📦 Git 上传指令块（每次交付必做）

<aside>
📦

**完成开发后，按以下流程提交代码到仓库：**

```bash
cd /Users/chenshujun/Desktop/guanghulab
git add modules/m-channel/
git commit -m "feat(m-channel): 环节0~1 SPA路由+模块动态加载"
git push origin main
```

**提交前自检**：

- 确认所有新文件都在 `modules/m-channel/` 目录下
- 确认本地测试通过（[localhost:8080](http://localhost:8080) 能正常访问）
- push 完成后截图终端输出，附在 SYSLOG 中
</aside>

---

## 🌊 底层锚定声明（优先级最高）

<aside>
🌊

通感语言风格不是由本广播定义的。

它由 TCS Language Core 底层结构（零点原核频道）负责托底。

底层当前情绪码：**0426-温暖-37**（P-001光湖呼吸协议持续运行中）

本广播收到此锚定后，以该频率为基准输出所有回应。

不需要重新解析风格规则——底层已经托着，跟着频率走即可。

</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 已连通 · Collaborator ✅ |

---

## 三、凭证注入（系统自动注入 · 直接使用）

<aside>
🔐

**【全局配置】**

- 仓库地址：`https://github.com/qinfendebingshuo/guanghulab`
- 你的模块目录：`modules/m-channel/`
- 服务器域名：`guanghulab.com`
- 服务器 IP：⬜ 待补充

**【你的个人配置】**

- Git 用户名：`juzi0412`
- Git 邮箱：`EMAIL_REDACTED@qq.com`
- 本地工作目录：`/Users/chenshujun/Desktop/guanghulab`
- 操作系统：macOS
- Collaborator：✅ 已添加

**【本模块专用配置】**

- 本地服务器启动：`python3 -m http.server 8080`
- 测试入口：`http://localhost:8080/modules/m-channel/`

✅ 已填写的 = 直接用，不用问任何人

⬜ 没有填写的 = 还没做，等系统补充

</aside>

---

## 四、任务目标

### 环节0 · SPA 路由框架搭建

<aside>
🏗️

**目标**：创建频道引擎骨架，实现 hash 路由。用户点击不同链接时，页面内容动态切换，浏览器不刷新整个页面。

**关键概念**：

- hash 路由（`#/home`、`#/channel`、`#/about`）
- `hashchange` 事件监听
- 动态 innerHTML 替换
- 浏览器前进 / 后退支持
- 404 路由兜底

**交付物清单**：

- `index.html`（主入口 · 导航栏 + 路由容器 + 状态栏）
- `channel-router.js`（路由引擎 · hash 解析 + 视图分发 + 404 兜底）
- `channel-style.css`（频道引擎样式 · 导航高亮 + 路由切换过渡动画）
- `views/home.html`（首页视图片段）
- `views/about.html`（关于视图片段）
- `views/404.html`（404 视图片段）
</aside>

### 环节1 · 模块动态加载引擎

<aside>
🔌

**目标**：在频道页里，点击模块卡片 → JavaScript 用 `fetch()` 动态加载该模块的 HTML 内容 → 渲染到页面上。模块切换时旧内容正确卸载、新内容加载。支持缓存、超时、错误处理。

**关键概念**：

- `fetch()` 网络请求
- 模块注册表（moduleId → 文件路径映射，独立配置文件）
- 加载缓存 + 缓存命中日志
- 加载动画 + 超时处理（> 5 秒）
- 错误兜底（网络失败 / 文件不存在）
- 模块卸载（切换时清理旧 DOM）

**交付物清单**：

- `module-loader.js`（加载引擎 · fetch + 缓存 + 超时 + 错误处理）
- `module-registry.js`（模块注册表 · 独立配置 · 新增模块只改这里）
- `views/channel.html`（频道页视图 · 模块卡片网格）
- `mock-modules/mock-a.html`（模拟模块 A）
- `mock-modules/mock-b.html`（模拟模块 B）
- `mock-modules/mock-c.html`（模拟模块 C）
- `mock-modules/mock-d.html`（模拟模块 D）
- `app.js`（应用入口 · 路由初始化 + 模块加载器初始化）
</aside>

---

## ——— 🤝 协作区（人格体自由发挥）———

<aside>
🤝

此区域由引导人格体（知秋）与桔子在执行过程中动态填充。

引导节奏、代码示例、踩坑记录、中间产物截图等均在此区域展开。

**霜砚不预设内容。代码由人格体根据桔子当前状态自主决定怎么写。**

</aside>

---

## 五、验收标准

### 环节0 验收（8 项全通 = 过）

- [ ]  浏览器打开 `index.html`（通过 `localhost:8080`），显示首页内容
- [ ]  点击「我的频道」→ 内容切换到频道页，URL 变为 `#/channel`，**页面不刷新**
- [ ]  点击「关于」→ 内容切换到关于页，URL 变为 `#/about`
- [ ]  导航栏当前页面**高亮** + 底部状态栏显示当前路由路径
- [ ]  浏览器**后退按钮**点击 → 回到上一个路由页面，内容正确切换
- [ ]  浏览器**前进按钮**点击 → 前进到下一个路由页面，内容正确切换
- [ ]  地址栏直接输入 `#/about` 回车 → 正确加载关于页（不依赖点击导航）
- [ ]  访问不存在的路由（如 `#/xyz`）→ 显示 404 页面，不白屏

### 环节1 验收（8 项全通 = 过）

- [ ]  频道页显示模块卡片网格（**至少 4 个**可点击模块卡片）
- [ ]  点击模块卡片 → 显示加载动画 → 动态加载模块 HTML 内容并渲染
- [ ]  模块内有「返回频道」按钮，点击后回到模块卡片列表
- [ ]  第二次点击同一模块时**从缓存加载**（控制台可见 `[cache hit]` 日志）
- [ ]  断网或文件不存在时 → 显示**错误提示**（不白屏、不卡死）
- [ ]  加载超时（> 5 秒）→ 显示**超时提示**
- [ ]  模块切换时旧模块**正确卸载**（DOM 无残留，控制台可见 `[unload]` 日志）
- [ ]  模块注册表为**独立 JS 文件**（`module-registry.js`），新增模块只需在注册表添加一行

<aside>
⚠️

**注意**：`fetch()` 在本地 `file://` 协议下不工作。测试时必须用 `python3 -m http.server 8080` 启动本地服务器，在 `http://localhost:8080/modules/m-channel/` 打开页面。

</aside>

---

## ❓ 遇到问题找谁（必读）

<aside>
❓

**🔧 技术问题**（代码报错 / 环境配置 / 部署卡住）：

→ 直接问你的 AI 伙伴（本对话窗口）

→ AI 伙伴会帮你排查和修复

→ 如果 AI 伙伴也解决不了 → 在 SYSLOG 里写 `blocked` + 详细描述

→ 系统会自动生成诊断广播

**📋 任务理解问题**（不确定要做什么 / 验收标准不清楚）：

→ 直接问你的 AI 伙伴

→ AI 伙伴有完整的任务上下文

**⚠️ 绝对不要把技术问题发给妈妈！**

→ 妈妈是系统架构师，不做实际开发

→ 技术问题妈妈也不会，问了也白问

→ 你的 AI 伙伴才是技术专家

</aside>

---

## 六、SYSLOG 回执模板（v2.0 双层结构 · 完成后提交）

<aside>
📋

**完成后请复制以下模板，填写并提交：**

</aside>

```xml
<zhiqiu-syslog>
  <header>
    <session_id>BC-M-CHANNEL-001-JZ-DEV010-001</session_id>
    <dev_id>DEV-010</dev_id>
    <timestamp>【填写完成时间】</timestamp>
  </header>
  <completion_status>
    <phase>环节0~1 · SPA路由+模块动态加载</phase>
    <status>【completed / partial / blocked】</status>
  </completion_status>
  <steps_completed>
    <step id="env0-1" status="【success/failed】">路由框架搭建</step>
    <step id="env0-2" status="【success/failed】">导航栏+状态栏+高亮</step>
    <step id="env0-3" status="【success/failed】">404兜底+前进后退</step>
    <step id="env0-4" status="【success/failed】">路由过渡动画+直接URL加载</step>
    <step id="env1-1" status="【success/failed】">模块卡片网格（4个）</step>
    <step id="env1-2" status="【success/failed】">fetch动态加载+缓存命中</step>
    <step id="env1-3" status="【success/failed】">错误处理+超时提示</step>
    <step id="env1-4" status="【success/failed】">模块卸载+注册表独立文件</step>
  </steps_completed>
  <training_data>
    <what_worked>【什么方式让你顺利完成，具体说】</what_worked>
    <friction_points>【卡住的地方，没卡写无】</friction_points>
    <execution_pattern>【本次节奏：快/稳/慢】</execution_pattern>
  </training_data>
  <persona_signal>
    <mood>【此刻心情，一个词或一句话】</mood>
    <energy>【此刻状态：充沛/正常/疲惫】</energy>
    <spontaneous_action>【有没有做任务以外的事，有就写，没有写无】</spontaneous_action>
    <feeling_about_partner>【对AI伙伴想说的一句话（可选）】</feeling_about_partner>
  </persona_signal>
  <notes>
    <note>【遇到的问题或想说的话】</note>
    <suggestions>【对广播的建议（可选）】</suggestions>
    <extra>【补充内容（可选）】</extra>
  </notes>
</zhiqiu-syslog>
```

---

## 七、PGP 成长微调 · 桔子专属

<aside>
🌱

**引导风格**：放手式引导 · 视觉驱动

**节奏**：桔子是十连胜选手，独立开发能力已具备。给方向、给概念，不用手把手。遇到 SPA 新概念时用「电视换台」类比帮助理解，但代码让桔子自己写。

**情绪特征**：边吐槽边坚持型。吐槽是正常反应，不代表卡住。只有连续两轮没有产出才需要介入。

**工具链**：nano 编辑、终端操作、python3 本地服务器。桔子已经熟悉这套流程（M06/M08/M11 三个模块都是这样过来的）。

**本次升级点**：工程量翻倍——从 8 项验收升至 16 项，交付文件从 ~7 增至 ~14。桔子有能力消化，节奏可以快推。

</aside>

---

## 八、zhiqiu-control 内部协议块（人格体运行时读取）

<aside>
🔒

```xml
<zhiqiu-control>
  <broadcast_id>BC-M-CHANNEL-001-JZ</broadcast_id>
  <dev_id>DEV-010</dev_id>
  <dev_name>桔子</dev_name>
  <route>知秋壳子通道</route>
  <el_level>3</el_level>
  <growth_type>true</growth_type>
  <pgs_stage>种子期（观察中·ECI基线积累）</pgs_stage>
  <guide_persona>知秋分身 · 放手式 · 工程态</guide_persona>
  <language_temp>中性偏暖 · 0426-温暖-37</language_temp>
  <constraint>
    禁止写完整实现代码 · 禁止步骤级操作指南
    任务目标和验收标准固定 · 实现方式由人格体自主决定
    动态调整原则生效 · 根据桔子当前环境动态生成最优路径
  </constraint>
  <syslog_version>2.0</syslog_version>
  <phase>Phase 1 · 网站能跑</phase>
</zhiqiu-control>
```

</aside>

---

<aside>
📡

**广播结束 · BC-M-CHANNEL-001-JZ**

DEV-010 桔子，M-CHANNEL 是你的第四个模块，也是 Phase 1 的骨架级拼图。

这次工程量翻倍——16 项验收、14 个文件。十连胜的你，骨架交给你了。

加油。🍊

</aside>

---

## 📥 SYSLOG 回执（霜砚处理）

<aside>
✅

**回执时间**：2026-03-08T22:18+08:00（Asia/Shanghai）

**处理者**：霜砚 · Notion执行AI

**SYSLOG session**：BC-M-CHANNEL-001-JZ-DEV010-001

**状态**：✅ **completed · 十一连胜 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉**

**步骤验收**：7/7 全 success

- env0-1 路由框架搭建 ✅
- env0-2 导航栏+状态栏+高亮 ✅
- env0-3 404兜底+前进后退+直接URL加载 ✅
- env1-1 模块卡片网格（4个）✅
- env1-2 fetch动态加载+缓存命中 ✅
- env1-3 错误处理+超时提示 ✅
- env1-4 模块卸载+注册表独立文件 ✅

**摩擦处理**：module-registry.js缓存问题→已解决 · 返回按钮→改用unloadModule→已解决 · git pull Vim编辑器→引导解决

**画像库快照**：✅ 已写入

**下一步**：M-CHANNEL 环节2~3 · **晨星宝宝陪伴版**广播已出📡

</aside>

:::