发件人：Pixel🐱 日期：2026-03-07 任务ID：#131 任务名称：造物日志3D互动内容工具 — 技术集成部分
路径：09-虚拟办公区系统/templates/module_aetherviz_demo.html
实现功能： - 24个节点（22名员工 + William + Claude API），全量覆盖Ryan提供的节点数据 - 7色团队着色体系（金/米白/草绿/深紫/深蓝/橙/灰），严格按Luna/Ryan规范 - 3D力导向布局，节点大小按连接数自适应 - 节点标签（three-spritetext）浮于节点上方，中枢节点字体更大 - 6种边类型颜色区分：工作流/调度/技术协作/设计协作/安全监督/人机接口/基础设施 - 粒子流动动画：工作流和人机接口边有粒子流向显示 - 悬停tooltip：显示角色名/职能/连接数 - 单击节点：高亮直接连接，其余节点80%降暗，右侧面板显示详细信息（含连接关系列表） - 双击背景：恢复全局视图 - 按团队过滤：6个过滤按钮（全部/Coco中枢/蜂巢创科·战略发展部/内容组/技术组/跨团队） - 工作流回放：内容生产链（Hunter→Luna→Ryan→Oliver→Iris→Zoe）、投资研究链（Alex→Sophie+Emma→David→Michael→William） - 进度条 + 路径标签，逐步高亮回放 - 重置视图按钮 - 全屏沉浸式，顶部信息栏固定，底部图例和操作提示
技术规格： - 3d-force-graph@1.72.0（CDN） - three-spritetext@1.8.1（CDN，动态加载） - 原生JS，无框架依赖 - 深色主题：背景#060810，金色#F0B90B，基础设施极简风格 - 响应式：监听window.resize自动适配
路径：09-虚拟办公区系统/templates/module_content_3d_template.html
模板特性： - 5步配置区域（STEP 1-5），每步均有注释说明 - CONTENT_CONFIG：标题/副标题/文章链接三项配置 - COLOR_MAP：自定义类别颜色映射，过滤按钮和图例自动生成 - graphData：标准节点+边数据格式，含详细字段注释 - WORKFLOWS：可选工作流回放配置，为空则自动隐藏按钮 - LEGEND_LABELS：可选图例文字覆盖 - 所有UI（过滤按钮/图例/工作流按钮）均由JS根据配置动态渲染，无需手改HTML - 文件末尾附：W2 LLM路由决策树完整示例（16节点/18条边/1条工作流），Luna/Ryan可直接复用
Luna/Ryan使用流程：
1. 复制模板文件，改名为 module_content_[主题名].html
2. 修改CONTENT_CONFIG的title和subtitle
3. 填入COLOR_MAP（3-6个类别）
4. 填入graphData.nodes（每个节点有id/label/group/desc）
5. 填入graphData.links（source/target/label/type）
6. 可选：填入WORKFLOWS做工作流回放
7. 保存，在Flask中访问对应路由预览
为什么选3d-force-graph而非自写Canvas： - 内置物理引擎（力导向布局）自动分组，同团队节点自然聚类 - 内置节点交互（悬停/点击/拖拽/缩放/旋转） - WebGL渲染，24节点/50+边流畅运行 - API简洁，配置驱动，适合内容团队快速复用
Flask集成方式： 这两个HTML文件放在templates/目录下，需要在app.py中注册路由才能访问。 建议在app.py中添加：
@app.route('/demo/aetherviz')
def aetherviz_demo():
return render_template('module_aetherviz_demo.html')
或者直接用浏览器打开HTML文件（CDN资源不依赖Flask即可预览）。
节点数据完全来自Ryan的样板文件，未做任何增删： - 22名员工（全量）+ William + Claude API = 24节点 - 链接关系按Ryan边关系列表实现，共50+条边 - 着色规则按Luna和Ryan的节点着色规则表严格执行
Pixel🐱 | 任务#131 | 2026-03-07