135 lines
4.8 KiB
Markdown
135 lines
4.8 KiB
Markdown
|
## 提示词内容
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**Role**: 你是一位精通前端开发的全栈工程师，擅长使用原生 Web 技术创建视觉震撼的交互式应用。
|
|||
|
|
|
|||
|
|
**Task**: 请使用单一的 HTML 文件（内嵌 CSS 和 JavaScript）实现一个功能完整的网页端操作系统界面。该系统需要具备现代操作系统的核心交互体验，同时围绕特定主题进行深度定制化展示。
|
|||
|
|
|
|||
|
|
**Theme Selection**: 请以「**赛博朋克未来都市操作系统**」为主题进行设计与实现。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 核心功能需求
|
|||
|
|
|
|||
|
|
### 窗口管理系统
|
|||
|
|
- 实现可自由拖拽、调整大小的窗口系统
|
|||
|
|
- 支持窗口最大化、最小化、关闭及层级管理
|
|||
|
|
- 窗口切换时带有流畅的过渡动画效果
|
|||
|
|
- 任务栏实时显示所有已打开的窗口缩略图
|
|||
|
|
|
|||
|
|
### 桌面环境
|
|||
|
|
- 可交互的动态桌面壁纸，体现赛博朋克都市夜景风格
|
|||
|
|
- 桌面图标支持点击交互，带有hover光效
|
|||
|
|
- 右键菜单包含系统级操作选项（刷新、设置、关于等）
|
|||
|
|
- 桌面小部件区域（时钟、日历、系统状态监控组件）
|
|||
|
|
|
|||
|
|
### 应用程序生态
|
|||
|
|
**必须包含以下应用**：
|
|||
|
|
1. **文件管理器** - 模拟文件夹层级结构，支持文件图标展示与右键菜单操作
|
|||
|
|
2. **终端模拟器** - 可输入命令，模拟 Linux shell 交互体验，支持自定义命令集
|
|||
|
|
3. **浏览器应用** - 内嵌 iframe 框架展示任意网页，带地址栏与导航按钮
|
|||
|
|
4. **设置中心** - 提供系统主题切换、壁纸更换、音量调节、隐私设置等选项
|
|||
|
|
5. **音乐播放器** - 具有播放列表、进度条、音量控制、专辑封面展示功能
|
|||
|
|
6. **便签/笔记应用** - 支持富文本编辑，本地存储保存内容
|
|||
|
|
7. **系统监控面板** - 实时可视化展示 CPU、内存、磁盘、网络使用状态
|
|||
|
|
|
|||
|
|
### 系统特性
|
|||
|
|
- 锁屏界面：显示时间日期，输入密码（或点击跳过）进入系统
|
|||
|
|
- 开始菜单：包含应用列表、电源选项、用户信息
|
|||
|
|
- 通知系统：顶部弹出通知消息，支持多种通知类型
|
|||
|
|
- 实时时钟：系统级时间显示，与国际标准时间同步
|
|||
|
|
- 开机动画：带有品牌特色的启动加载序列
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 视觉设计要求
|
|||
|
|
|
|||
|
|
### 整体风格
|
|||
|
|
- 赛博朋克美学：霓虹配色（粉、紫、蓝、青为主色调）
|
|||
|
|
- 发光效果：大量使用 CSS box-shadow 和 text-shadow 创造霓虹光晕
|
|||
|
|
- 磨砂玻璃：毛玻璃效果应用于窗口、菜单、任务栏
|
|||
|
|
- 赛博元素：网格背景、故障艺术效果、扫描线纹理
|
|||
|
|
|
|||
|
|
### 动画效果
|
|||
|
|
- 窗口打开/关闭：带有缩放+淡入的组合动画
|
|||
|
|
- 拖拽跟随：窗口移动时的惯性平滑效果
|
|||
|
|
- 按钮交互：hover/active 状态切换的微动画
|
|||
|
|
- 背景动态：流动的霓虹光效或粒子系统
|
|||
|
|
- 打字机效果：终端应用和欢迎文字的逐字显示
|
|||
|
|
|
|||
|
|
### 响应式设计
|
|||
|
|
- 适配不同屏幕尺寸
|
|||
|
|
- 移动端提供触控优化交互
|
|||
|
|
- 横竖屏切换自适应布局
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 技术实现规范
|
|||
|
|
|
|||
|
|
### 文件结构
|
|||
|
|
- 单一 HTML 文件（index.html）
|
|||
|
|
- HTML 结构清晰，语义化标签
|
|||
|
|
- CSS 使用 CSS Variables 管理主题色系
|
|||
|
|
- JavaScript 采用模块化设计（ES6+）
|
|||
|
|
|
|||
|
|
### 第三方依赖（CDN引入）
|
|||
|
|
- **Font Awesome** - 图标库
|
|||
|
|
- **Google Fonts** - 定制字体（如 'Orbitron'、'Roboto' 等科技感字体）
|
|||
|
|
- **Chart.js** 或 **ECharts** - 系统监控数据可视化
|
|||
|
|
- **GSAP** 或 **Anime.js** - 复杂动画实现
|
|||
|
|
- **Phosphor Icons** 或 **Bootstrap Icons** - 辅助图标方案
|
|||
|
|
|
|||
|
|
### 性能优化
|
|||
|
|
- CSS 动画使用 GPU 加速
|
|||
|
|
- 懒加载非关键资源
|
|||
|
|
- 平滑的滚动行为
|
|||
|
|
- 防止动画卡顿
|
|||
|
|
|
|||
|
|
### 数据持久化
|
|||
|
|
- 使用 localStorage 保存用户设置
|
|||
|
|
- 壁纸主题偏好设置永久保存
|
|||
|
|
- 已打开窗口状态记忆恢复
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 终端命令集（必须支持）
|
|||
|
|
```
|
|||
|
|
help - 显示帮助信息
|
|||
|
|
clear - 清屏
|
|||
|
|
date - 显示当前日期时间
|
|||
|
|
whoami - 显示当前用户
|
|||
|
|
ls/dir - 列出文件
|
|||
|
|
cd - 切换目录
|
|||
|
|
cat/type - 查看文件内容
|
|||
|
|
echo - 输出文本
|
|||
|
|
neofetch - 显示系统信息
|
|||
|
|
matrix - 启动矩阵雨特效
|
|||
|
|
theme - 切换系统主题
|
|||
|
|
reboot - 重启系统（刷新页面）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 输出格式要求
|
|||
|
|
1. 提供完整可直接运行的单文件 HTML 代码
|
|||
|
|
2. 代码需要包含详细的中文注释
|
|||
|
|
3. 在文件开头提供使用说明
|
|||
|
|
4. 确保所有 CDN 链接可正常访问
|
|||
|
|
5. 代码需要整洁规范，符合最佳实践
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 验收标准
|
|||
|
|
- [ ] 系统可在现代浏览器直接打开运行
|
|||
|
|
- [ ] 所有应用均可正常打开、交互、关闭
|
|||
|
|
- [ ] 视觉风格符合赛博朋克主题
|
|||
|
|
- [ ] 动画流畅无明显卡顿
|
|||
|
|
- [ ] 响应式布局正常工作
|
|||
|
|
- [] 终端命令可正常执行
|
|||
|
|
- [ ] 用户设置可被保存
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**Goal**: 生成一个让测试者眼前一亮的赛博朋克风格网页操作系统，展示大语言模型在前端工程领域的代码生成能力、架构设计能力和视觉审美水平。
|