docs: 添加赛博朋克网页操作系统项目需求文档
添加详细的项目需求文档，描述一个基于单一HTML文件的赛博朋克风格网页操作系统实现方案
This commit is contained in:
dzq
parent
2aacdcd3f2
commit
d4fb485bb1
|
|
@ -0,0 +1,134 @@
|
||||||
|
## 提示词内容
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**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**: 生成一个让测试者眼前一亮的赛博朋克风格网页操作系统，展示大语言模型在前端工程领域的代码生成能力、架构设计能力和视觉审美水平。
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
## 提示词内容
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**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**: 生成一个让测试者眼前一亮的赛博朋克风格网页操作系统，展示大语言模型在前端工程领域的代码生成能力、架构设计能力和视觉审美水平。
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue