feat: 添加赛博朋克2078神经网络城市可视化平台

添加完整的单页HTML网站实现，包含3D城市渲染、神经网络可视化、数据卡片和控制面板等功能。使用Three.js、D3.js和GSAP等库实现复杂视觉效果和交互体验。网站采用赛博朋克风格设计，具有霓虹色彩和未来科技感。

docs: 新增星际文明探索者游戏和赛博朋克2078的prompt文档

添加两个markdown文档，分别描述星际文明探索者网页游戏和赛博朋克2078神经网络城市可视化平台的需求规范和技术实现要求。

test: 添加赛博朋克2078网页实现测试文件

包含完整的HTML、CSS和JavaScript代码，实现了一个具有视觉冲击力的赛博朋克风格单页网站，用于测试大语言模型的编程能力。

prompts/code/2-赛博朋克2078.md

@@ -0,0 +1,95 @@
+## 角色定义与任务概述
+
+你是一位世界顶级的前端架构师和创意开发者，专注于打造具有视觉冲击力的沉浸式网站体验。你的任务是从零开始设计并实现一个复杂、动态、视觉效果震撼的单页网站。**仅输出完整的代码实现，不进行任何解释或对话。** 代码需要达到生产级质量，可以直接部署运行。
+
+## 项目主题：赛博朋克2078 - 神经网络城市可视化平台
+
+你将创建一个以"神经网络城市"为核心概念的未来主义网站，融合数据可视化、交互式3D元素、粒子系统和赛博朋克美学风格。网站展示一个虚构的2078年超级都市，包含实时数据流动、神经网络连接、智能系统监控等元素，营造出高度发达的数字文明氛围。
+
+## 视觉设计规范
+
+**整体风格定位为赛博朋克与未来科技主义的结合**，采用以下视觉特征：
+
+- **色彩体系**：以霓虹粉（#ff00ff）、电光蓝（#00ffff）、激光紫（#8800ff）为主色调，辅以深空黑（#0a0a0a）和金属灰作为背景。关键UI元素使用高饱和度的渐变色和发光效果。
+- **Typography**：标题使用具有科技感的无衬线字体（如Orbitron或Rajdhani），正文使用清晰易读的系统字体。所有文字应带有轻微的霓虹发光效果或投影。
+- **深度感设计**：通过视差滚动、多层次背景、模糊遮罩等手法营造空间深度。界面元素应有层次分明的悬浮感。
+- **glitch效果**：适当位置添加赛博朋克特色的glitch（故障艺术）效果，如文字抖动、色彩分离、信号干扰等。
+- **边框与容器**：使用锐角切边、发光边框、半透明磨砂玻璃效果构建界面框架。按钮和卡片应具有悬停时的发光反馈。
+
+## 功能模块与技术实现要求
+
+### 模块一：沉浸式开场动画
+
+页面加载时展示一个震撼的视觉引入序列。首先以全黑背景开始，随后一个发光的神经网络节点从屏幕中心向外扩散，节点之间建立连接线，形成完整的神经网络图形。随着动画推进，视角逐渐拉远，最终揭示整个城市俯瞰图。动画时长约3-4秒，包含平滑的缓动效果，最终自动过渡到主界面。
+
+### 模块二：三维城市概览视图
+
+利用Three.js创建交互式3D城市俯瞰场景。城市由程序化生成的摩天大楼组成，建筑高度错落有致，表面带有LED灯光纹理。城市上空有飞行载具的粒子流，街道上有流动的光带。场景支持鼠标拖拽旋转和滚轮缩放。右上角显示实时时间（2078年格式）和城市状态指标。
+
+### 模块三：神经网络数据流可视化
+
+页面中央展示一个动态的神经网络可视化区域。使用D3.js或自定义Canvas实现，展示节点之间的数据传输脉冲。脉冲沿着连线流动，节点在接收数据时会产生发光闪烁效果。可视化区域外围环绕着不断变化的数据统计数字，如"神经元活跃度"、"数据吞吐量"、"延迟指标"等。
+
+### 模块四：智能系统状态监控面板
+
+设计一个专业的监控仪表板区域，包含以下组件：
+
+- **CPU/内存负载仪表**：使用SVG或Canvas绘制动态仪表盘，指针实时摆动，背景带有网格线
+- **网络流量图表**：采用类似示波器的波形显示，实时更新，带有发光线条
+- **服务器状态网格**：一个微型网格展示多个虚拟服务器的运行状态，正常为绿色，异常为红色
+- **日志滚动窗口**：展示系统日志信息，使用等宽字体，文字带有CRT显示器的扫描线效果
+
+### 模块五：交互式时间线导航
+
+设计一个横向滚动的年代时间线，从2078年回溯到关键历史节点。每个时间节点是一个可点击的胶囊状按钮，悬停时展开显示该节点的详细信息。点击节点后，3D城市视图平滑过渡到对应的历史时期建筑风格。当前选中的时间节点应有显著的霓虹边框效果。
+
+### 模块六：全息投影式数据卡片
+
+创建一组悬浮的数据展示卡片，采用全息投影风格的视觉效果。卡片呈45度角倾斜放置，带有透明渐变边缘。当鼠标移动到卡片上方时，卡片会轻微浮起并增强发光效果，同时显示隐藏的详细信息。卡片内容包括：人口统计、能量消耗、网络节点分布、AI意识同步率等。
+
+### 模块七：搜索与命令控制台
+
+在页面底部固定一个命令输入框，模拟未来的脑机接口。输入框支持自然语言命令（如"显示能源分布"、"切换到东城区视图"、"开始系统诊断"等）。输入时显示霓虹光标跟随，输入完成后按回车执行。命令执行时应有数据传输的视觉反馈，包括：扫描线扫过屏幕、确认音效动画、结果展示弹窗等。
+
+## 交互体验设计
+
+- **页面滚动**：实现平滑的滚动行为，页面各模块在滚动时触发入场动画。背景中的粒子层应以较慢的速度独立移动，创造视差效果。
+- **悬停交互**：所有可交互元素必须有视觉反馈，包括：颜色变化、发光增强、微小位移、边框高亮等。悬停时可能有短暂的粒子爆发效果。
+- **转场动画**：模块之间的切换应使用平滑的淡入淡出、滑动或缩放效果。避免生硬的跳转。
+- **响应式设计**：确保在桌面端（1920px+）、平板端（768px-1919px）和移动端（<768px）都有良好的展示效果。移动端应自动调整为单列布局，3D场景改为陀螺仪控制。
+- **加载状态**：如果某些资源需要较长时间加载，显示一个科技风格的加载动画（如旋转的圆环或进度条）。
+
+## 外部CDN资源引入要求
+
+必须通过CDN引入以下库以实现复杂效果（使用稳定版本）：
+
+- **Three.js**：用于3D城市渲染和粒子系统
+- **GSAP (GreenSock)**：用于高性能动画和时间线控制
+- **D3.js**：用于神经网络连接和复杂数据可视化
+- **Font Awesome**：图标资源
+- **Google Fonts**：引入Orbitron、Rajdhani等科技字体
+- **Particles.js**：背景粒子效果
+- **Tween.js**：平滑过渡动画
+
+所有CDN链接应置于HTML文件头部，确保优先加载。
+
+## 代码结构与质量标准
+
+- **HTML结构**：语义化标签，清晰的模块划分，使用`<section>`和`<article>`合理组织内容
+- **CSS架构**：采用现代CSS特性（CSS Variables、Flexbox、Grid、Backdrop Filter等）。样式代码置于`<style>`标签内，组织有序。
+- **JavaScript逻辑**：使用ES6+语法，模块化设计。代码置于`<script>`标签内，放在DOMContentLoaded事件中执行。
+- **性能优化**：使用requestAnimationFrame进行动画渲染，合理使用CSS硬件加速（transform、opacity），避免在主线程进行重计算
+- **错误处理**：包含基本的错误边界，CDN加载失败时的降级方案
+- **代码注释**：关键逻辑处添加简洁的中文注释
+
+## 特别说明
+
+这是对一个复杂前端系统的完整实现，请确保：
+
+1. 所有代码整合在一个HTML文件中（index.html）
+2. 代码可以直接复制运行，无需额外配置
+3. 视觉效果必须达到令人印象深刻的标准
+4. 动画流畅无卡顿，交互响应及时
+5. 整体风格统一且具有赛博朋克的独特美学
+
+现在，请开始生成代码。

prompts/code/3-交互网页游戏.md

@@ -0,0 +1,91 @@
+## 主题设定
+
+**「星际文明探索者」** —— 一款以宇宙探索为核心主题的沉浸式交互网页游戏。玩家扮演一名星际探险家，驾驶先进的星际飞船在浩瀚的宇宙中穿梭，探索未知星球、收集星际资源、抵御宇宙威胁，并逐步揭开宇宙文明的神秘面纱。
+
+---
+
+## 核心功能需求
+
+### 游戏机制设计
+
+玩家控制一艘具有先进推进系统的星际飞船，在 procedurally generated（程序生成）的宇宙空间中自由移动。游戏应包含以下核心玩法：
+
+**探索系统**：宇宙空间由数千颗恒星、行星、陨石带和星际尘埃组成，支持无限滚动或动态加载机制。每颗星球拥有独特的外观特征（颜色、大小、环系统、大气层效果），玩家可以操控飞船靠近星球进行扫描和分析，揭示星球的地质构成、是否有水资源、是否适宜居住等科学数据。
+
+**资源采集**：玩家在探索过程中可以采集星际资源，包括稀有矿物、能量晶体和古老文明遗迹碎片。资源管理系统需要在界面上清晰展示当前载量和采集进度，同时提供升级飞船引擎、护盾和扫描仪等子系统的功能菜单。
+
+**战斗系统**：宇宙中潜伏着各类威胁，包括自动防御无人机、太空海盗和流浪小行星。战斗采用即时制，玩家通过鼠标控制飞船瞄准，键盘控制移动和技能释放。战斗特效应包含激光束、等离子体爆炸、护盾能量波动等视觉反馈。
+
+**进化成长**：飞船在战斗和探索中获得经验值，解锁新技能和装备。升级界面采用3D旋转展示飞船模型，玩家可以选择性强化推进系统（影响移动速度和加速度）、能量系统（影响护盾持续时间和武器威力）或扫描系统（影响资源发现概率和星球信息完整度）。
+
+### 视觉设计规范
+
+**整体美学**：采用深空蓝紫色调为主基调，配合高亮的星光效果和流线型的界面元素。所有UI元素需采用半透明磨砂玻璃效果，边缘带有微弱的发光描边，营造未来科技感。字体选用无衬线字体，部分标题使用带有渐变发光效果的定制字体。
+
+**背景层**：使用 WebGL 或 Canvas 渲染动态星空背景，星星具有视差滚动效果，远处的星云采用多层半透明叠加营造景深感。偶尔出现的超新星爆发、脉冲星闪烁和流星雨增添动态氛围。
+
+**粒子系统**：飞船引擎喷射的火焰、战斗爆炸效果、能量护盾激活时的涟漪、采集资源时的粒子汇聚效果均需要精心设计。粒子应具有物理运动特性（速度、加速度、生命周期、颜色渐变），总数在保持60fps流畅度的前提下尽可能密集。
+
+**动画过渡**：所有界面切换、菜单弹出、按钮悬停均需配备平滑的动画过渡。推荐使用 CSS Transitions 配合 JavaScript 控制的动画曲线，避免生硬的跳变。飞船移动应具有惯性物理特性，加减速过程自然流畅。
+
+---
+
+## 技术实现要求
+
+### 架构规范
+
+整个项目必须整合为**单一 HTML 文件**（index.html），内部依次包含 `<style>` 标签定义的 CSS 样式和 `<script>` 标签定义的 JavaScript 逻辑。外部资源引用仅限 CDN 方式引入必要的第三方库。
+
+### 第三方库引用（CDN）
+
+必须且仅可从可靠 CDN（如 cdnjs、unpkg、jsdelivr）引入以下类型的库：
+
+**图形渲染库**：可选择引入 Three.js 或 Pixi.js 用于复杂的3D场景渲染或2D高性能图形绘制。若选择 Three.js，需同时引入 OrbitControls（用于相机控制）和 GLTFLoader（用于加载3D模型，如果需要的话）。
+
+**物理引擎库**：可选择引入 Matter.js 或 Cannon.js 用于碰撞检测和刚体物理模拟，特别是陨石撞击和飞船漂移效果。
+
+**动画库**：可选择引入 GSAP 或 anime.js 用于复杂的时间轴动画控制，特别是UI元素入场动画和连击特效。
+
+**音频处理库**：可选择引入 Howler.js 或 Tone.js 用于游戏音效和背景音乐的播放控制，支持空间音频效果更佳。
+
+**粒子库**：可选择引入 tsparticles 或类似专用粒子引擎，用于大规模粒子效果的高效渲染。
+
+### 代码质量标准
+
+**模块化设计**：JavaScript 代码应采用模块化结构，至少包含以下核心模块——游戏主循环模块（Game Loop）、渲染引擎模块（Renderer）、输入处理模块（Input Handler）、实体管理系统（Entity Manager）、UI 界面模块（UI Manager）、数据持久化模块（Save/Load System）。各模块职责清晰，接口规范。
+
+**性能优化**：对于 Canvas/WebGL 渲染的内容，需要实现对象池（Object Pool）管理频繁创建销毁的粒子和实体；采用空间分区（Spatial Partitioning）或四叉树（Quadtree）优化碰撞检测；使用 requestAnimationFrame 实现流畅的动画循环；在非活动状态自动降级渲染质量。
+
+**响应式设计**：游戏界面需完美适配不同尺寸的视口，从移动端竖屏到桌面端宽屏均能正常显示和操作。关键 UI 元素在缩放过程中保持可点击区域足够大，重要信息不被遮挡。
+
+**可访问性**：尽管是视觉为主的游戏，仍需提供基础的键盘操作支持，重要提示信息应配有文字说明，色彩对比度符合 WCAG 标准。
+
+---
+
+## 交付物说明
+
+请生成完整的单一 HTML 文件代码，包含以下内容：
+
+1. **完整的 HTML 结构**：语义化标签构建的游戏容器和 UI 界面
+2. **精美的 CSS 样式**：符合上述视觉设计规范的样式定义，包含所有动画和过渡效果
+3. **健壮的 JavaScript 逻辑**：实现完整的游戏功能，代码注释清晰，结构分明
+4. **CDN 资源引入**：在文件头部正确引入所需的第三方库
+5. **使用说明**：在页面某处或控制台输出简要的操作指南
+
+---
+
+## 评判标准（供测试参考）
+
+评估生成代码时应关注以下维度：
+
+**功能完整性**：游戏是否可正常运行？核心玩法是否都已实现？是否存在明显的逻辑漏洞或功能缺失？
+
+**视觉表现力**：粒子效果是否精美？界面是否具有视觉冲击力？动画过渡是否流畅自然？是否有效利用了引入的图形库能力？
+
+**代码质量**：代码结构是否清晰易读？是否有适当的错误处理？性能表现是否良好（可通过浏览器开发者工具监控）？
+
+**创新亮点**：是否在基础需求之上增加了令人惊喜的创意元素？这些额外特性是否有效增强了用户体验？
+
+---
+
+请基于以上需求描述，生成一套完整的前端工程代码。

prompts/meta/2-网页游戏.md

@@ -0,0 +1 @@
+我需要测试大语言模型的编程能力，请给我一篇prompt，描述生成一套复杂的前端工程，最终实现一个视觉冲击力强的网页游戏。由你定一个内容主题，围绕该主题进行展示。网站采用单文件 HTML 解决方案（包含 HTML, CSS, JavaScript），并引入 CDN实现复杂效果。注意！我只需要prompt，不要代码实现。

test/code/3/3-交互网页游戏.md

@@ -0,0 +1,91 @@
+## 主题设定
+
+**「星际文明探索者」** —— 一款以宇宙探索为核心主题的沉浸式交互网页游戏。玩家扮演一名星际探险家，驾驶先进的星际飞船在浩瀚的宇宙中穿梭，探索未知星球、收集星际资源、抵御宇宙威胁，并逐步揭开宇宙文明的神秘面纱。
+
+---
+
+## 核心功能需求
+
+### 游戏机制设计
+
+玩家控制一艘具有先进推进系统的星际飞船，在 procedurally generated（程序生成）的宇宙空间中自由移动。游戏应包含以下核心玩法：
+
+**探索系统**：宇宙空间由数千颗恒星、行星、陨石带和星际尘埃组成，支持无限滚动或动态加载机制。每颗星球拥有独特的外观特征（颜色、大小、环系统、大气层效果），玩家可以操控飞船靠近星球进行扫描和分析，揭示星球的地质构成、是否有水资源、是否适宜居住等科学数据。
+
+**资源采集**：玩家在探索过程中可以采集星际资源，包括稀有矿物、能量晶体和古老文明遗迹碎片。资源管理系统需要在界面上清晰展示当前载量和采集进度，同时提供升级飞船引擎、护盾和扫描仪等子系统的功能菜单。
+
+**战斗系统**：宇宙中潜伏着各类威胁，包括自动防御无人机、太空海盗和流浪小行星。战斗采用即时制，玩家通过鼠标控制飞船瞄准，键盘控制移动和技能释放。战斗特效应包含激光束、等离子体爆炸、护盾能量波动等视觉反馈。
+
+**进化成长**：飞船在战斗和探索中获得经验值，解锁新技能和装备。升级界面采用3D旋转展示飞船模型，玩家可以选择性强化推进系统（影响移动速度和加速度）、能量系统（影响护盾持续时间和武器威力）或扫描系统（影响资源发现概率和星球信息完整度）。
+
+### 视觉设计规范
+
+**整体美学**：采用深空蓝紫色调为主基调，配合高亮的星光效果和流线型的界面元素。所有UI元素需采用半透明磨砂玻璃效果，边缘带有微弱的发光描边，营造未来科技感。字体选用无衬线字体，部分标题使用带有渐变发光效果的定制字体。
+
+**背景层**：使用 WebGL 或 Canvas 渲染动态星空背景，星星具有视差滚动效果，远处的星云采用多层半透明叠加营造景深感。偶尔出现的超新星爆发、脉冲星闪烁和流星雨增添动态氛围。
+
+**粒子系统**：飞船引擎喷射的火焰、战斗爆炸效果、能量护盾激活时的涟漪、采集资源时的粒子汇聚效果均需要精心设计。粒子应具有物理运动特性（速度、加速度、生命周期、颜色渐变），总数在保持60fps流畅度的前提下尽可能密集。
+
+**动画过渡**：所有界面切换、菜单弹出、按钮悬停均需配备平滑的动画过渡。推荐使用 CSS Transitions 配合 JavaScript 控制的动画曲线，避免生硬的跳变。飞船移动应具有惯性物理特性，加减速过程自然流畅。
+
+---
+
+## 技术实现要求
+
+### 架构规范
+
+整个项目必须整合为**单一 HTML 文件**（index.html），内部依次包含 `<style>` 标签定义的 CSS 样式和 `<script>` 标签定义的 JavaScript 逻辑。外部资源引用仅限 CDN 方式引入必要的第三方库。
+
+### 第三方库引用（CDN）
+
+必须且仅可从可靠 CDN（如 cdnjs、unpkg、jsdelivr）引入以下类型的库：
+
+**图形渲染库**：可选择引入 Three.js 或 Pixi.js 用于复杂的3D场景渲染或2D高性能图形绘制。若选择 Three.js，需同时引入 OrbitControls（用于相机控制）和 GLTFLoader（用于加载3D模型，如果需要的话）。
+
+**物理引擎库**：可选择引入 Matter.js 或 Cannon.js 用于碰撞检测和刚体物理模拟，特别是陨石撞击和飞船漂移效果。
+
+**动画库**：可选择引入 GSAP 或 anime.js 用于复杂的时间轴动画控制，特别是UI元素入场动画和连击特效。
+
+**音频处理库**：可选择引入 Howler.js 或 Tone.js 用于游戏音效和背景音乐的播放控制，支持空间音频效果更佳。
+
+**粒子库**：可选择引入 tsparticles 或类似专用粒子引擎，用于大规模粒子效果的高效渲染。
+
+### 代码质量标准
+
+**模块化设计**：JavaScript 代码应采用模块化结构，至少包含以下核心模块——游戏主循环模块（Game Loop）、渲染引擎模块（Renderer）、输入处理模块（Input Handler）、实体管理系统（Entity Manager）、UI 界面模块（UI Manager）、数据持久化模块（Save/Load System）。各模块职责清晰，接口规范。
+
+**性能优化**：对于 Canvas/WebGL 渲染的内容，需要实现对象池（Object Pool）管理频繁创建销毁的粒子和实体；采用空间分区（Spatial Partitioning）或四叉树（Quadtree）优化碰撞检测；使用 requestAnimationFrame 实现流畅的动画循环；在非活动状态自动降级渲染质量。
+
+**响应式设计**：游戏界面需完美适配不同尺寸的视口，从移动端竖屏到桌面端宽屏均能正常显示和操作。关键 UI 元素在缩放过程中保持可点击区域足够大，重要信息不被遮挡。
+
+**可访问性**：尽管是视觉为主的游戏，仍需提供基础的键盘操作支持，重要提示信息应配有文字说明，色彩对比度符合 WCAG 标准。
+
+---
+
+## 交付物说明
+
+请生成完整的单一 HTML 文件代码，包含以下内容：
+
+1. **完整的 HTML 结构**：语义化标签构建的游戏容器和 UI 界面
+2. **精美的 CSS 样式**：符合上述视觉设计规范的样式定义，包含所有动画和过渡效果
+3. **健壮的 JavaScript 逻辑**：实现完整的游戏功能，代码注释清晰，结构分明
+4. **CDN 资源引入**：在文件头部正确引入所需的第三方库
+5. **使用说明**：在页面某处或控制台输出简要的操作指南
+
+---
+
+## 评判标准（供测试参考）
+
+评估生成代码时应关注以下维度：
+
+**功能完整性**：游戏是否可正常运行？核心玩法是否都已实现？是否存在明显的逻辑漏洞或功能缺失？
+
+**视觉表现力**：粒子效果是否精美？界面是否具有视觉冲击力？动画过渡是否流畅自然？是否有效利用了引入的图形库能力？
+
+**代码质量**：代码结构是否清晰易读？是否有适当的错误处理？性能表现是否良好（可通过浏览器开发者工具监控）？
+
+**创新亮点**：是否在基础需求之上增加了令人惊喜的创意元素？这些额外特性是否有效增强了用户体验？
+
+---
+
+请基于以上需求描述，生成一套完整的前端工程代码。