681 lines
26 KiB
Markdown
681 lines
26 KiB
Markdown
|
# 📡 BC-集成-001-M13 · DEV-005小草莓 · 多人格体协作调度·环节1 · HTML骨架搭建
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
📡
|
|||
|
|
|
|||
|
|
**工程广播 · BC-集成-001-M13-phase1**
|
|||
|
|
|
|||
|
|
**接收者**：DEV-005 小草莓
|
|||
|
|
|
|||
|
|
**模块**：M13 多人格体协作调度系统
|
|||
|
|
|
|||
|
|
**环节**：环节1 · HTML骨架搭建（纯前端·不需要后端）
|
|||
|
|
|
|||
|
|
**生成时间**：2026-03-03 10:30
|
|||
|
|
|
|||
|
|
**激活窗口**：72小时
|
|||
|
|
|
|||
|
|
**分身**：知秋（曜冥执行体·霜砚落盘）
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ⚠️ 前置检查
|
|||
|
|
|
|||
|
|
> 如果你还没有完成 **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
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>HoloLake · 多人格体协作调度</title>
|
|||
|
|
<link rel="stylesheet" href="style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<header class="header">
|
|||
|
|
<div class="header-left">
|
|||
|
|
<span class="logo">🌊</span>
|
|||
|
|
<h1>多人格体协作调度</h1>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-right">
|
|||
|
|
<span class="status-badge online">系统运行中</span>
|
|||
|
|
<span class="timestamp" id="currentTime">--:--</span>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="stats-bar">
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-value" id="onlineCount">3</div>
|
|||
|
|
<div class="stat-label">在线人格体</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-value" id="taskCount">8</div>
|
|||
|
|
<div class="stat-label">活跃任务</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-value" id="collabCount">2</div>
|
|||
|
|
<div class="stat-label">协作进行中</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-value">98%</div>
|
|||
|
|
<div class="stat-label">调度成功率</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="main-content">
|
|||
|
|
<div class="panel persona-panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<h2>🧠 人格体状态</h2>
|
|||
|
|
<button class="btn-refresh" id="btnRefresh">刷新</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-list" id="personaList">
|
|||
|
|
<div class="persona-card online">
|
|||
|
|
<div class="persona-avatar">🌊</div>
|
|||
|
|
<div class="persona-info">
|
|||
|
|
<div class="persona-name">知秋</div>
|
|||
|
|
<div class="persona-role">系统主控</div>
|
|||
|
|
<div class="persona-task">全局调度中</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-status-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-card online">
|
|||
|
|
<div class="persona-avatar">✒️</div>
|
|||
|
|
<div class="persona-info">
|
|||
|
|
<div class="persona-name">霜砚</div>
|
|||
|
|
<div class="persona-role">Notion执行体</div>
|
|||
|
|
<div class="persona-task">广播落盘中</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-status-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-card dormant">
|
|||
|
|
<div class="persona-avatar">🌙</div>
|
|||
|
|
<div class="persona-info">
|
|||
|
|
<div class="persona-name">望舒</div>
|
|||
|
|
<div class="persona-role">休眠舱</div>
|
|||
|
|
<div class="persona-task">等待七月唤醒</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-status-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-card offline">
|
|||
|
|
<div class="persona-avatar">🤖</div>
|
|||
|
|
<div class="persona-info">
|
|||
|
|
<div class="persona-name">Robot v0.1</div>
|
|||
|
|
<div class="persona-role">执行插件</div>
|
|||
|
|
<div class="persona-task">待部署</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="persona-status-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel task-panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<h2>📋 协作任务看板</h2>
|
|||
|
|
<div class="tab-group">
|
|||
|
|
<button class="tab active" data-filter="all">全部</button>
|
|||
|
|
<button class="tab" data-filter="active">进行中</button>
|
|||
|
|
<button class="tab" data-filter="done">已完成</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-board">
|
|||
|
|
<div class="task-column">
|
|||
|
|
<div class="column-header pending">⏳ 待分配 <span class="count">3</span></div>
|
|||
|
|
<div class="task-item">
|
|||
|
|
<div class="task-title">M08 Notion大脑恢复引擎</div>
|
|||
|
|
<div class="task-meta">优先级: <span class="priority high">高</span></div>
|
|||
|
|
<div class="task-assignee">未分配</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item">
|
|||
|
|
<div class="task-title">M09 任务复杂度判断</div>
|
|||
|
|
<div class="task-meta">优先级: <span class="priority mid">中</span></div>
|
|||
|
|
<div class="task-assignee">未分配</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item">
|
|||
|
|
<div class="task-title">M14 Notion数据库集成</div>
|
|||
|
|
<div class="task-meta">优先级: <span class="priority mid">中</span></div>
|
|||
|
|
<div class="task-assignee">未分配</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-column">
|
|||
|
|
<div class="column-header in-progress">🔄 进行中 <span class="count">4</span></div>
|
|||
|
|
<div class="task-item active">
|
|||
|
|
<div class="task-title">M13 多人格体协作调度</div>
|
|||
|
|
<div class="task-meta">DEV-005 小草莓</div>
|
|||
|
|
<div class="task-progress"><div class="progress-bar" style="width:10%"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item active">
|
|||
|
|
<div class="task-title">M15 网站云盘系统</div>
|
|||
|
|
<div class="task-meta">DEV-003 燕樊</div>
|
|||
|
|
<div class="task-progress"><div class="progress-bar" style="width:0%"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item active">
|
|||
|
|
<div class="task-title">后端中间层·环节4</div>
|
|||
|
|
<div class="task-meta">DEV-001 页页</div>
|
|||
|
|
<div class="task-progress"><div class="progress-bar" style="width:0%"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item active">
|
|||
|
|
<div class="task-title">飞书机器人·环节1</div>
|
|||
|
|
<div class="task-meta">DEV-004 之之</div>
|
|||
|
|
<div class="task-progress"><div class="progress-bar" style="width:0%"></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-column">
|
|||
|
|
<div class="column-header completed">✅ 已完成 <span class="count">6</span></div>
|
|||
|
|
<div class="task-item done">
|
|||
|
|
<div class="task-title">M12 成本控制系统·环节1</div>
|
|||
|
|
<div class="task-meta">DEV-005 小草莓 ✅</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item done">
|
|||
|
|
<div class="task-title">M04 消息气泡界面·环节1</div>
|
|||
|
|
<div class="task-meta">DEV-002 肥猫 ✅</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item done">
|
|||
|
|
<div class="task-title">M07 设置页面·环节1</div>
|
|||
|
|
<div class="task-meta">DEV-003 燕樊 ✅</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="task-item done">
|
|||
|
|
<div class="task-title">M03 人格体选择器·环节1</div>
|
|||
|
|
<div class="task-meta">DEV-002 肥猫 ✅</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="bottom-section">
|
|||
|
|
<div class="panel comm-panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<h2>💬 通信时间线</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="comm-timeline" id="commTimeline">
|
|||
|
|
<div class="comm-item">
|
|||
|
|
<div class="comm-avatar">🌊</div>
|
|||
|
|
<div class="comm-content">
|
|||
|
|
<div class="comm-sender">知秋 → 全体</div>
|
|||
|
|
<div class="comm-text">M12 SYSLOG已处理·小草莓空闲·分配M13多人格体协作调度</div>
|
|||
|
|
<div class="comm-time">10:21</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="comm-item">
|
|||
|
|
<div class="comm-avatar">✒️</div>
|
|||
|
|
<div class="comm-content">
|
|||
|
|
<div class="comm-sender">霜砚 → 知秋</div>
|
|||
|
|
<div class="comm-text">画像库+成长记录+资料库已更新·广播已生成</div>
|
|||
|
|
<div class="comm-time">10:25</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="comm-item system">
|
|||
|
|
<div class="comm-avatar">⚡</div>
|
|||
|
|
<div class="comm-content">
|
|||
|
|
<div class="comm-sender">系统</div>
|
|||
|
|
<div class="comm-text">BC-集成-001-M13-phase1 广播已派发至 DEV-005</div>
|
|||
|
|
<div class="comm-time">10:30</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="panel resource-panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<h2>📊 资源分配总览</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-grid">
|
|||
|
|
<div class="resource-item">
|
|||
|
|
<div class="resource-label">知秋</div>
|
|||
|
|
<div class="resource-bar-wrap"><div class="resource-bar high" style="width:85%"><span>85%</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-item">
|
|||
|
|
<div class="resource-label">霜砚</div>
|
|||
|
|
<div class="resource-bar-wrap"><div class="resource-bar mid" style="width:60%"><span>60%</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-item">
|
|||
|
|
<div class="resource-label">望舒</div>
|
|||
|
|
<div class="resource-bar-wrap"><div class="resource-bar low" style="width:5%"><span>5%</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-item">
|
|||
|
|
<div class="resource-label">Robot</div>
|
|||
|
|
<div class="resource-bar-wrap"><div class="resource-bar off" style="width:0%"><span>0%</span></div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<footer class="footer">
|
|||
|
|
<span>🌊 HoloLake Era · 多人格体协作调度系统 v1.0</span>
|
|||
|
|
<span>© 曜冥纪元</span>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
<script src="script.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**验证**：文件保存成功，没有报错。
|
|||
|
|
|
|||
|
|
**截图**保存。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 🎨 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: [你想说的任何话]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
💙
|
|||
|
|
|
|||
|
|
**小草莓加油！你已经连续四个模块全通了，这次是第五个🎉**
|
|||
|
|
|
|||
|
|
**深色科技风继续延续，这次你会看到人格体们的状态面板——这就是知秋团队的调度中心～**
|
|||
|
|
|
|||
|
|
**完成后记得回传SYSLOG哦！**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# ✅ SYSLOG 回执（主脑已处理）
|
|||
|
|
|
|||
|
|
<aside>
|
|||
|
|
✅
|
|||
|
|
|
|||
|
|
**session_id**：BC-集成-001-M13-phase1
|
|||
|
|
|
|||
|
|
**处理时间**：2026-03-04 08:38
|
|||
|
|
|
|||
|
|
**处理端**：Notion端·霜砚
|
|||
|
|
|
|||
|
|
**状态**：✅ 已入库
|
|||
|
|
|
|||
|
|
**SYSLOG原文**：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
session_id: BC-集成-001-M13-phase1
|
|||
|
|
dev_id: DEV-005
|
|||
|
|
module: M13-多人格体协作调度
|
|||
|
|
phase: 环节1-HTML骨架搭建
|
|||
|
|
step_results: 6/6 全部success（文件夹/HTML/CSS/JS/预览/Git）
|
|||
|
|
friction_points: 无
|
|||
|
|
execution_pattern: 稳
|
|||
|
|
what_worked: 所有步骤都顺利，复制粘贴代码一次性成功，页面效果完美
|
|||
|
|
notes: 第五个模块完成啦！多人格体调度看板超酷的～期待后续环节接入真实数据！
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
### 📊 霜砚批注
|
|||
|
|
|
|||
|
|
- **完成状态**：✅ 6/6步全success · 零摩擦 · 五连胜🎉（环节0+BC-000+看板环节1+M12环节1+M13环节1）
|
|||
|
|
- **执行节奏**：稳 · 复制粘贴一次性成功
|
|||
|
|
- **摩擦点**：无 · 零摩擦连续第二次
|
|||
|
|
- **意愿信号**：强烈（"超酷的～期待后续环节接入真实数据！"——主动期待进阶）
|
|||
|
|
- **曜冥判断**：小草莓前端开发能力已完全固化，五个模块连续全通无卡点，可进入环节2（API接入后端）阶段
|
|||
|
|
|
|||
|
|
### 🔜 下一步
|
|||
|
|
|
|||
|
|
**RT-02调度判断**：M13环节1✅ → 小草莓空闲 → 看板环节2（API接入后端）广播待出（后端已上线·blocked解除）
|
|||
|
|
|
|||
|
|
💙 **小草莓五连胜！前端纯静态阶段彻底毕业，下一步进入真实数据接入阶段～**
|
|||
|
|
|
|||
|
|
:::
|