一个基于 React + TypeScript + Vite 构建的 Web 桌面环境，模拟 Windows 桌面操作系统的界面和基本功能。该项目提供了一个完整的桌面体验，包括窗口管理、开始菜单、任务栏、日期面板等功能。
-
🖥️ 桌面环境
- 可拖拽的桌面图标
- 双击打开窗口
- 图标选中效果
- 自动排列图标
-
🪟 窗口管理
- 窗口拖拽
- 最大化/最小化/关闭
- 窗口层级管理
- 窗口大小调整
- 任务栏切换
-
🎯 开始菜单
- 可点击打开/关闭
- 常用程序快捷方式
- 用户信息显示
- 二级菜单支持
- 设置和注销选项
-
⏰ 任务栏
- 显示当前时间
- 日期面板
- 日期和时间设置
- 窗口切换
-
📅 日期面板
- 显示当前日期和时间
- 日历视图
- 日期选择功能
- 时间设置
-
🎮 内置应用
- 计算器
- 记事本
- 浏览器
- 设置
- 贪吃蛇游戏
- 俄罗斯方块
- 音乐播放器
- 天气小部件
- 待办事项
- 图片编辑器
- 数据大屏
- 文档查看器
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Zustand (状态管理)
- React Context API
- Material Icons
- 克隆项目
git clone [项目地址]
cd miktop- 安装依赖
npm install- 启动开发服务器
npm run dev- 构建生产版本
npm run buildsrc/
├── components/ # 组件
│ ├── Desktop.tsx # 桌面组件
│ ├── Window.tsx # 窗口组件
│ ├── Taskbar.tsx # 任务栏组件
│ ├── StartMenu.tsx # 开始菜单组件
│ ├── DatePanel.tsx # 日期面板组件
│ ├── DateTimeSettings.tsx # 日期时间设置组件
│ ├── DesktopIcon.tsx # 桌面图标组件
│ ├── WindowButton.tsx # 窗口按钮组件
│ └── windows/ # 窗口内容组件
│ ├── Calculator.tsx # 计算器
│ ├── Notepad.tsx # 记事本
│ ├── Browser.tsx # 浏览器
│ ├── Settings.tsx # 设置
│ ├── SnakeGame.tsx # 贪吃蛇游戏
│ ├── TetrisGame.tsx # 俄罗斯方块
│ ├── MusicPlayer.tsx # 音乐播放器
│ ├── WeatherWidget.tsx # 天气小部件
│ ├── TodoList.tsx # 待办事项
│ ├── PhotoEditor.tsx # 图片编辑器
│ ├── Dashboard.tsx # 数据大屏
│ └── ... # 其他窗口组件
├── contexts/ # 上下文
│ ├── DesktopContext.tsx # 桌面上下文
│ └── ThemeContext.tsx # 主题上下文
├── config/ # 配置
│ └── windowTypes.tsx # 窗口类型配置
├── types/ # 类型定义
│ ├── window.ts # 窗口类型
│ └── images.d.ts # 图片类型
├── store/ # 状态管理
│ └── desktop.ts # 桌面状态
├── assets/ # 资源
├── App.tsx # 应用入口
├── main.tsx # 主入口文件
├── index.css # 全局样式
└── App.css # 应用样式
- 双击桌面空白处：创建新窗口
- 双击桌面图标：打开对应窗口
- 拖拽窗口标题栏：移动窗口
- 拖拽窗口边缘：调整窗口大小
- 点击窗口按钮：
_: 最小化□: 最大化/还原×: 关闭
- 点击开始按钮：打开/关闭开始菜单
- 点击任务栏按钮：切换窗口
- 点击任务栏时间：打开日期面板
- 在日期面板中点击日期：选择日期
- 在日期面板中点击"更改日期和时间设置"：打开设置面板
- 添加右键菜单
- 实现窗口大小调整
- 添加更多桌面图标
- 实现开始菜单功能
- 添加日期面板
- 支持主题切换
- 添加文件系统
- 实现拖放功能
- 添加更多游戏和应用
- 支持多语言
欢迎提交 Issue 和 Pull Request 来帮助改进项目。
MIT