413 lines
13 KiB
Markdown
413 lines
13 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 | 🌱成长型
|
|||
|
|
|
|||
|
|
**生成时间**：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>
|
|||
|
|
|
|||
|
|
:::
|