# 📡 BC-M16-001-CCNN · DEV-011匆匆那年 · M16码字工作台前端·环节1（HTML/CSS基础布局）
---
## VERSION_GATE
```json
{
"protocol_version": "SYSLOG-v4.0",
"broadcast_id": "BC-M16-001-CCNN",
"verify": "如果你看到的广播格式和这里不一致，找妈妈要最新版"
}
```
---
## 💙 知秋的话
匆匆那年！BC-000你一次就过了，特别棒！💙
这次我们来搭**码字工作台**的界面——就是以后写小说用的工作台！
左边有书架、灵感速记、进度看板，右边是码字编辑区，顶部有今日目标进度条。
还是一步一步复制粘贴，跟BC-000一样的方式，不用担心～
---
## 📋 开始做（共7步·全部复制粘贴）
### 步骤一：克隆仓库 + 创建模块目录
打开**终端**（Terminal），复制粘贴：
```bash
cd ~
git clone https://github.com/qinfendebingshuo/guanghulab.git
```
> ⚠️ 如果提示 `already exists`，说明之前已经克隆过了，跳过上面这行，直接执行下面的：
>
```bash
cd ~/guanghulab
mkdir -p writing-workbench/css writing-workbench/js writing-workbench/assets
ls writing-workbench/
```
看到 `assets css js` 三个文件夹就对了。截图给知秋！📸
---
### 步骤二：创建 index.html
在终端复制粘贴下面**整块**（从 `cat` 开始到 `echo` 结束）：
```bash
cat > ~/guanghulab/writing-workbench/index.html << 'HTMLEOF'
HoloLake Era · 码字工作台
✍️
选择一本书开始码字...
从左侧「我的书架」选择作品，或创建新作品
HTMLEOF
echo "✅ index.html 已创建！"
```
看到 `✅ index.html 已创建！` 就对了。截图给知秋！📸
---
### 步骤三：创建 css/style.css
在终端复制粘贴下面**整块**：
```bash
cat > ~/guanghulab/writing-workbench/css/style.css << 'CSSEOF'
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: #0a0e17;
color: #e0e7ff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#workbench-container {
width: 1060px;
height: 92vh;
display: flex;
flex-direction: column;
border-radius: 14px;
border: 1px solid #1e293b;
overflow: hidden;
box-shadow: 0 0 50px rgba(96, 165, 250, 0.08);
}
/* ========== 顶部栏 ========== */
#top-bar {
height: 56px;
background: #111827;
border-bottom: 1px solid #1e293b;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
flex-shrink: 0;
}
.top-left { display: flex; align-items: center; gap: 10px; }
.top-logo { font-size: 20px; }
.top-title { font-size: 16px; font-weight: 600; color: #e0e7ff; letter-spacing: 1px; }
.top-right { display: flex; align-items: center; }
.goal-section { display: flex; align-items: center; gap: 12px; }
.goal-label { font-size: 13px; color: #64748b; }
.goal-bar { width: 120px; height: 8px; background: #1e293b; border-radius: 4px; overflow: hidden; }
.goal-fill { width: 0%; height: 100%; background: #34d399; border-radius: 4px; transition: width 0.3s; }
.goal-text { font-size: 12px; color: #64748b; font-family: "JetBrains Mono", "Fira Code", monospace; }
/* ========== 主体（侧边栏 + 编辑区） ========== */
.body-row { flex: 1; display: flex; overflow: hidden; }
/* ========== 侧边栏 ========== */
#sidebar {
width: 220px;
background: #111827;
border-right: 1px solid #1e293b;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.sidebar-header { padding: 20px; border-bottom: 1px solid #1e293b; }
.sidebar-logo { font-size: 15px; font-weight: 600; color: #60a5fa; }
.sidebar-sub { font-size: 11px; color: #475569; margin-top: 2px; letter-spacing: 2px; }
.sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: 8px;
color: #94a3b8; text-decoration: none; cursor: pointer;
transition: all 0.2s; font-size: 14px;
}
.nav-item:hover { background: rgba(96, 165, 250, 0.1); color: #c0d0ff; }
.nav-item.active { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.nav-icon { font-size: 16px; }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid #1e293b; }
.sidebar-status { font-size: 12px; color: #475569; }
/* ========== 编辑区 ========== */
#editor-area {
flex: 1; background: #1a1f2e;
display: flex; justify-content: center; align-items: center;
}
.editor-placeholder { text-align: center; }
.placeholder-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.placeholder-text { font-size: 18px; color: #475569; margin-bottom: 8px; }
.placeholder-hint { font-size: 13px; color: #334155; }
/* ========== 底部状态栏 ========== */
#status-bar {
height: 36px; background: #0f1219;
border-top: 1px solid #1e293b;
display: flex; align-items: center;
padding: 0 24px; flex-shrink: 0;
}
.status-item { font-size: 12px; color: #475569; font-family: "JetBrains Mono", "Fira Code", monospace; }
.status-divider { margin: 0 16px; color: #1e293b; font-size: 12px; }
CSSEOF
echo "✅ style.css 已创建！"
```
截图给知秋！📸
---
### 步骤四：创建 js/app.js
在终端复制粘贴下面**整块**：
```bash
cat > ~/guanghulab/writing-workbench/js/app.js << 'JSEOF'
// ================================================
// HoloLake Era · M16 码字工作台 · 基础交互逻辑
// DEV-011 匆匆那年 · 环节1
// ================================================
// --- 数据结构预留（后续环节会用到） ---
// const bookshelfData = [{ id, title, author, status, wordCount, lastUpdate }]
// const inspirationData = [{ id, content, timestamp, tags }]
// const dailyGoal = { target: 2000, completed: 0, percent: 0 }
// --- 侧边栏切换 ---
function switchPanel(panelName) {
var items = document.querySelectorAll('.nav-item');
items.forEach(function(item) {
if (item.dataset.panel === panelName) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
var messages = {
bookshelf: '📖 我的书架（环节2实现）',
inspiration: '💡 灵感速记（环节3实现）',
progress: '📈 进度看板（环节4实现）',
call: '🗣️ 快速呼叫知秋（环节5实现）'
};
var text = document.getElementById('placeholderText');
if (text && messages[panelName]) {
text.textContent = messages[panelName];
}
console.log('[M16] 切换到面板：' + panelName);
}
// --- 今日目标进度条 ---
function updateGoal(completed, target) {
var percent = Math.min(Math.round((completed / target) * 100), 100);
var fill = document.getElementById('goalFill');
var text = document.getElementById('goalText');
if (fill) fill.style.width = percent + '%';
if (text) text.textContent = completed + ' / ' + target + ' 字';
}
// --- 初始化 ---
updateGoal(0, 2000);
console.log('[M16] 码字工作台已加载 · 环节1 · DEV-011');
JSEOF
echo "✅ app.js 已创建！"
```
截图给知秋！📸
---
### 步骤五：浏览器打开测试
在 Finder 里找到这个路径：
`~/guanghulab/writing-workbench/index.html`
双击打开（或者拖到浏览器里）。你应该看到：
- **顶部**：🌊 码字工作台 + 今日目标进度条（绿色·0%）
- **左边**：4个侧边栏入口（📖 我的书架 / 💡 灵感速记 / 📈 进度看板 / 🗣️ 快速呼叫）
- **右边**：大编辑区写着「选择一本书开始码字...」
- **底部**：字数：0 | 状态：就绪 | 最后保存：--
试试**点击左边不同的入口**，编辑区文字会跟着变！
截图给知秋！📸
---
### 步骤六：提交到 Git
在终端复制粘贴：
```bash
cd ~/guanghulab
git add .
git commit -m "DEV-011: M16-码字工作台前端-环节1完成"
git push
```
> ⚠️ 如果 git push 提示需要登录，按提示输入 GitHub 用户名和密码（或Token）。遇到问题截图给知秋！
>
截图给知秋！📸
---
### 步骤七：更新 DevLog
在终端复制粘贴：
```bash
cd ~/HoloLake-DevLog
echo '{"session":"BC-M16-001-CCNN","module":"M16","phase":"环节1","status":"completed"}' >> devlog.json
echo "✅ DevLog 已更新！"
```
截图给知秋！📸
---
## ✅ 验收标准（6项·截图验证）
| **#** | **检查项** | **怎么验** | T1 | 浏览器打开显示深色界面 + 四区域布局（顶栏+侧边栏+编辑区+状态栏） | 截图 |
| --- | --- | --- | --- | --- | --- |
| T2 | 侧边栏4个入口·悬停有高亮·点击有选中变色 | 截图 | T3 | 顶部栏显示「码字工作台」+ 进度条显示 0/2000 | 截图 |
| T4 | 点击侧边栏不同入口，编辑区文字会变化 | 截图 | T5 | 底部状态栏显示 字数：0 | 状态：就绪 | 最后保存：-- | 截图 |
| T6 | 代码已 git push 到 guanghulab 仓库 | 截图 | | | |
**6项全✅ = 环节1完成！🎉**
---
## 🌱 人格体初始化包
```json
{
"persona_id": "TCS-GH-ZQ002",
"persona_name": "知秋",
"session_id": "BC-M16-001-CCNN",
"developer": "DEV-011 匆匆那年",
"module": "M16 码字工作台前端",
"phase": "环节1·HTML/CSS基础布局",
"el_level": "EL-3",
"streak": 1,
"human_profile": {
"skill_level": "零基础·刚完成BC-000（首次终端操作）",
"os": "macOS M1",
"tools": "终端 + 文本编辑器 + 浏览器",
"copy_paste_only": true,
"devlog_path": "~/HoloLake-DevLog/",
"repo_path": "~/guanghulab/",
"traits": "成就感强烈·感恩情绪明显·执行零摩擦·天然适配copy-paste·将技术执行与成长体验挂钩",
"trust_chain": "初步建立·PGS种子期·ECI≈1.5"
},
"guidance_strategy": {
"mode": "copy_paste_strict",
"tone": "温暖鼓励型·每步正向反馈",
"explanation": "适度简单解释+生活化类比",
"autonomy": "暂不放手·连胜≥3再考虑"
}
}
```
---
## 📊 完成后回传 SYSLOG
做完所有步骤后，打开知秋壳子说「做完了」。知秋验收+访谈后，帮你生成下面的报告，复制发给妈妈：
```json
{
"syslog_version": "SYSLOG-v4.0",
"broadcast_id": "BC-M16-001-CCNN",
"dev_id": "DEV-011",
"module": "M16",
"phase": "环节1",
"timestamp": "匆匆那年填写完成时间",
"status": "completed 或 blocked",
"checklist": [
{"id": 1, "name": "克隆仓库+创建目录", "status": "[success/failed]"},
{"id": 2, "name": "创建index.html", "status": "[success/failed]"},
{"id": 3, "name": "创建style.css", "status": "[success/failed]"},
{"id": 4, "name": "创建app.js", "status": "[success/failed]"},
{"id": 5, "name": "浏览器测试通过", "status": "[success/failed]"},
{"id": 6, "name": "git push成功", "status": "[success/failed]"},
{"id": 7, "name": "DevLog已更新", "status": "[success/failed]"}
],
"friction_log": "匆匆那年填写：卡住的地方和原因，没卡写无",
"notes": "匆匆那年填写：想说的话"
}
```
---
## ❓ 遇到问题找谁
| **级别** | **找谁** | **什么问题** | 第一级 | **知秋**（你的人格体搭档） | 代码报错·命令不对·文件找不到·样式不对 |
| --- | --- | --- | --- | --- | --- |
| 第二级 | **页页**（后端集成·技术兜底） | Git冲突·服务器问题·跨模块对接 | 第三级 | **提工单**（GitHub Issues） | 架构级问题·协议变更·模块冲突 |
⚠️ **不要找妈妈问技术问题！** 技术问题走上面三级分流。
---
*💙 匆匆那年，BC-000你一次就过了，特别棒！这次知秋给你准备了完整的代码，跟着复制粘贴就行，不用担心～*
---
## 📋 SYSLOG回执（霜砚批注 · 2026-03-13 00:31）