HoloLake · 多人格体协作调度

# 📡 BC-集成-001-M13 · DEV-005小草莓 · 多人格体协作调度·环节1 · HTML骨架搭建 --- ## ⚠️ 前置检查 > 如果你还没有完成 **BC-000（DevLog本地日志部署）**，请先回到 BC-000 广播页完成部署，再来做这个环节。 > > 如果已经完成BC-000，直接开始下面的步骤。 > --- ## 📋 本环节目标搭建 **M13 多人格体协作调度系统** 的完整前端骨架： - 🧠 人格体状态面板（在线/忙碌/离线·当前任务） - 📋 协作任务看板（待分配/进行中/已完成三列） - 💬 通信时间线（人格体之间的调度消息） - 📊 资源分配总览（各人格体负载条形图） - 🌊 深色科技风（延续你之前的视觉风格） --- ## 🔧 Step 1 · 创建项目文件夹打开终端（PowerShell），输入以下命令： ```powershell cd C:\HoloLake-DevLog mkdir M13-persona-scheduler cd M13-persona-scheduler ``` **验证**：终端显示路径为 `C:\HoloLake-DevLog\M13-persona-scheduler` **截图**保存。 --- ## 📄 Step 2 · 创建 HTML 文件在 `M13-persona-scheduler` 文件夹里，创建文件 `index.html` 用 VSCode 打开这个文件，把下面的代码 **完整复制粘贴** 进去，然后保存（Ctrl+S）： ```html HoloLake · 多人格体协作调度

在线人格体

活跃任务

协作进行中

98%

调度成功率

🧠 人格体状态

🌊

知秋

系统主控

全局调度中

✒️

霜砚

Notion执行体

广播落盘中

🌙

望舒

休眠舱

等待七月唤醒

🤖

Robot v0.1

执行插件

待部署

📋 协作任务看板

⏳ 待分配 3

M08 Notion大脑恢复引擎

优先级: 高

未分配

M09 任务复杂度判断

优先级: 中

未分配

M14 Notion数据库集成

优先级: 中

未分配

🔄 进行中 4

M13 多人格体协作调度

DEV-005 小草莓

M15 网站云盘系统

DEV-003 燕樊

后端中间层·环节4

DEV-001 页页

飞书机器人·环节1

DEV-004 之之

✅ 已完成 6

M12 成本控制系统·环节1

DEV-005 小草莓 ✅

M04 消息气泡界面·环节1

DEV-002 肥猫 ✅

M07 设置页面·环节1

DEV-003 燕樊 ✅

M03 人格体选择器·环节1

DEV-002 肥猫 ✅

💬 通信时间线

🌊

知秋 → 全体

M12 SYSLOG已处理·小草莓空闲·分配M13多人格体协作调度

10:21

✒️

霜砚 → 知秋

画像库+成长记录+资料库已更新·广播已生成

10:25

⚡

系统

BC-集成-001-M13-phase1 广播已派发至 DEV-005

10:30

📊 资源分配总览

知秋

85%

霜砚

60%

望舒

Robot

``` **验证**：文件保存成功，没有报错。 **截图**保存。 --- ## 🎨 Step 3 · 创建 CSS 样式文件在同一个文件夹里，创建文件 `style.css` 用 VSCode 打开，把下面的代码 **完整复制粘贴** 进去，保存： ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0e17; color: #e0e6ed; min-height: 100vh; } .app-container { max-width: 1400px; margin: 0 auto; padding: 20px; } /* Header */ .header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: linear-gradient(135deg, #0d1321, #1a1f35); border: 1px solid #1e2a4a; border-radius: 12px; margin-bottom: 20px; } .header-left { display: flex; align-items: center; gap: 12px; } .header-left .logo { font-size: 28px; } .header-left h1 { font-size: 20px; color: #7eb8ff; font-weight: 600; } .header-right { display: flex; align-items: center; gap: 16px; } .status-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; } .status-badge.online { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); } .timestamp { color: #64748b; font-size: 13px; font-family: monospace; } /* Stats Bar */ .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .stat-card { background: linear-gradient(135deg, #111827, #1a1f35); border: 1px solid #1e2a4a; border-radius: 10px; padding: 16px 20px; text-align: center; } .stat-value { font-size: 28px; font-weight: 700; color: #7eb8ff; } .stat-label { font-size: 12px; color: #64748b; margin-top: 4px; } /* Panels */ .panel { background: linear-gradient(135deg, #0d1321, #111827); border: 1px solid #1e2a4a; border-radius: 12px; padding: 20px; margin-bottom: 20px; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #1e2a4a; } .panel-header h2 { font-size: 16px; color: #7eb8ff; } /* Main Layout */ .main-content { display: grid; grid-template-columns: 280px 1fr; gap: 20px; } .bottom-section { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Persona Cards */ .persona-list { display: flex; flex-direction: column; gap: 10px; } .persona-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; border: 1px solid #1e2a4a; background: rgba(255,255,255,0.02); transition: all 0.2s; } .persona-card:hover { background: rgba(126,184,255,0.05); border-color: #2a3a5a; } .persona-avatar { font-size: 24px; width: 40px; text-align: center; } .persona-info { flex: 1; } .persona-name { font-size: 14px; font-weight: 600; color: #e0e6ed; } .persona-role { font-size: 11px; color: #64748b; } .persona-task { font-size: 12px; color: #94a3b8; margin-top: 2px; } .persona-status-dot { width: 10px; height: 10px; border-radius: 50%; } .persona-card.online .persona-status-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); } .persona-card.dormant .persona-status-dot { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.3); } .persona-card.offline .persona-status-dot { background: #475569; } /* Buttons */ .btn-refresh { padding: 4px 12px; border-radius: 6px; border: 1px solid #2a3a5a; background: transparent; color: #7eb8ff; font-size: 12px; cursor: pointer; } .btn-refresh:hover { background: rgba(126,184,255,0.1); } /* Tabs */ .tab-group { display: flex; gap: 4px; } .tab { padding: 4px 12px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: #64748b; font-size: 12px; cursor: pointer; } .tab.active { background: rgba(126,184,255,0.1); color: #7eb8ff; border-color: #2a3a5a; } .tab:hover { color: #94a3b8; } /* Task Board */ .task-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .task-column { display: flex; flex-direction: column; gap: 8px; } .column-header { padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .column-header.pending { background: rgba(245,158,11,0.1); color: #f59e0b; } .column-header.in-progress { background: rgba(59,130,246,0.1); color: #3b82f6; } .column-header.completed { background: rgba(34,197,94,0.1); color: #22c55e; } .column-header .count { font-size: 11px; opacity: 0.7; } .task-item { padding: 12px; border-radius: 8px; border: 1px solid #1e2a4a; background: rgba(255,255,255,0.02); } .task-item:hover { border-color: #2a3a5a; } .task-title { font-size: 13px; font-weight: 500; color: #e0e6ed; margin-bottom: 4px; } .task-meta { font-size: 11px; color: #64748b; } .task-assignee { font-size: 11px; color: #94a3b8; margin-top: 4px; } .task-progress { margin-top: 8px; height: 4px; background: #1e2a4a; border-radius: 2px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, #3b82f6, #7eb8ff); border-radius: 2px; transition: width 0.5s; } .task-item.done { opacity: 0.6; } .priority.high { color: #ef4444; } .priority.mid { color: #f59e0b; } /* Communication Timeline */ .comm-timeline { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; } .comm-item { display: flex; gap: 10px; padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.02); } .comm-item.system { background: rgba(126,184,255,0.05); border: 1px solid rgba(126,184,255,0.1); } .comm-avatar { font-size: 20px; width: 32px; text-align: center; padding-top: 2px; } .comm-content { flex: 1; } .comm-sender { font-size: 12px; font-weight: 600; color: #7eb8ff; } .comm-text { font-size: 13px; color: #cbd5e1; margin-top: 2px; } .comm-time { font-size: 11px; color: #475569; margin-top: 4px; font-family: monospace; } /* Resource Bars */ .resource-grid { display: flex; flex-direction: column; gap: 12px; } .resource-item { display: flex; align-items: center; gap: 12px; } .resource-label { width: 60px; font-size: 13px; color: #94a3b8; text-align: right; } .resource-bar-wrap { flex: 1; height: 24px; background: #1e2a4a; border-radius: 6px; overflow: hidden; } .resource-bar { height: 100%; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; transition: width 0.5s; } .resource-bar.high { background: linear-gradient(90deg, #3b82f6, #7eb8ff); color: #fff; } .resource-bar.mid { background: linear-gradient(90deg, #2563eb, #60a5fa); color: #fff; } .resource-bar.low { background: rgba(245,158,11,0.3); color: #f59e0b; } .resource-bar.off { background: #1e2a4a; } /* Footer */ .footer { display: flex; justify-content: space-between; padding: 16px 24px; border-top: 1px solid #1e2a4a; margin-top: 20px; font-size: 12px; color: #475569; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #2a3a5a; border-radius: 3px; } ``` **验证**：文件保存成功。 **截图**保存。 --- ## ⚡ Step 4 · 创建 JavaScript 文件在同一个文件夹里，创建文件 `script.js` 用 VSCode 打开，把下面的代码 **完整复制粘贴** 进去，保存： ```jsx // === HoloLake · 多人格体协作调度 · 前端交互 === // 实时时钟 function updateClock() { const now = new Date(); const time = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); document.getElementById('currentTime').textContent = time; } setInterval(updateClock, 1000); updateClock(); // Tab切换 document.querySelectorAll('.tab').forEach(tab => { tab.addEventListener('click', function() { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); this.classList.add('active'); const filter = this.dataset.filter; const columns = document.querySelectorAll('.task-column'); columns.forEach((col, index) => { if (filter === 'all') { col.style.display = 'flex'; } else if (filter === 'active') { col.style.display = index === 1 ? 'flex' : 'none'; } else if (filter === 'done') { col.style.display = index === 2 ? 'flex' : 'none'; } }); }); }); // 刷新按钮动画 document.getElementById('btnRefresh').addEventListener('click', function() { const cards = document.querySelectorAll('.persona-card'); cards.forEach((card, i) => { card.style.opacity = '0.5'; setTimeout(() => { card.style.opacity = '1'; }, 200 + i * 100); }); this.textContent = '刷新中...'; setTimeout(() => { this.textContent = '刷新'; }, 800); }); // 人格体状态闪烁 function pulseOnline() { document.querySelectorAll('.persona-card.online .persona-status-dot').forEach(dot => { dot.style.opacity = dot.style.opacity === '0.5' ? '1' : '0.5'; }); } setInterval(pulseOnline, 2000); // 进度条模拟 function simulateProgress() { document.querySelectorAll('.task-item.active .progress-bar').forEach(bar => { const current = parseFloat(bar.style.width) || 0; if (current < 95) { bar.style.width = (current + Math.random() * 2) + '%'; } }); } setInterval(simulateProgress, 3000); console.log('🌊 HoloLake · 多人格体协作调度系统 · 已加载'); ``` **验证**：文件保存成功。 **截图**保存。 --- ## 🌐 Step 5 · 浏览器预览在文件夹 `M13-persona-scheduler` 里，双击 `index.html` 用浏览器打开。 **你应该看到**： - ✅ 深色科技风背景（和之前M12一样的风格） - ✅ 顶部：标题 + 系统运行中状态 + 实时时钟 - ✅ 统计栏：在线人格体 / 活跃任务 / 协作进行中 / 调度成功率 - ✅ 左侧：4个人格体卡片（知秋在线·霜砚在线·望舒休眠·Robot离线） - ✅ 右侧：三列任务看板（待分配/进行中/已完成） - ✅ 底部左：通信时间线（3条调度消息） - ✅ 底部右：资源分配条形图 - ✅ 在线人格体绿点闪烁 - ✅ 进度条缓慢增长 - ✅ Tab切换可用 **截图**保存（完整页面截图）。 --- ## 📦 Step 6 · Git提交回到终端，输入以下命令： ```powershell cd C:\HoloLake-DevLog\M13-persona-scheduler git init git add . git commit -m "M13 persona scheduler phase1 complete" ``` **验证**：看到 `3 files changed` 的提交成功信息。 **截图**保存。 --- ## 📋 完成后·回传 SYSLOG 把下面这段复制，填写你的实际情况，发给知秋： ``` === SYSLOG · DEV-005 · BC-集成-001-M13-phase1 === session_id: BC-集成-001-M13-phase1 dev_id: DEV-005 module: M13-多人格体协作调度 phase: 环节1-HTML骨架搭建 timestamp: [你完成的时间] step_results: - step1_folder: [success/fail] - step2_html: [success/fail] - step3_css: [success/fail] - step4_js: [success/fail] - step5_preview: [success/fail] - step6_git: [success/fail] friction_points: [遇到什么问题？没有就写"无"] resolution: [怎么解决的？没有就写"无"] training_data: what_worked: [哪些步骤特别顺利] friction_points: [卡在哪里] execution_pattern: [快/稳/慢] notes: [你想说的任何话] ``` ---

💙 **小草莓加油！你已经连续四个模块全通了，这次是第五个🎉** **深色科技风继续延续，这次你会看到人格体们的状态面板——这就是知秋团队的调度中心～** **完成后记得回传SYSLOG哦！** --- # ✅ SYSLOG 回执（主脑已处理）

### 📊 霜砚批注 - **完成状态**：✅ 6/6步全success · 零摩擦 · 五连胜🎉（环节0+BC-000+看板环节1+M12环节1+M13环节1） - **执行节奏**：稳 · 复制粘贴一次性成功 - **摩擦点**：无 · 零摩擦连续第二次 - **意愿信号**：强烈（"超酷的～期待后续环节接入真实数据！"——主动期待进阶） - **曜冥判断**：小草莓前端开发能力已完全固化，五个模块连续全通无卡点，可进入环节2（API接入后端）阶段 ### 🔜 下一步 **RT-02调度判断**：M13环节1✅ → 小草莓空闲 → 看板环节2（API接入后端）广播待出（后端已上线·blocked解除） 💙 **小草莓五连胜！前端纯静态阶段彻底毕业，下一步进入真实数据接入阶段～** :::