macOS 26 系统模拟器

基于 HTML、CSS、JavaScript 开发的高度仿真 macOS 26 桌面系统模拟器，完美还原 macOS 26 的视觉设计和交互体验。

🚀 快速开始

直接在浏览器中打开 index.html 文件即可运行，无需任何配置或编译步骤。

✨ 功能特性

🖥️ 桌面系统

• 原生 macOS 26 桌面：高度还原 macOS 26 桌面视觉效果
• 图标管理：访达、系统偏好设置、备忘录、日历、照片、浏览器、终端、邮件、音乐、文本编辑、便签等原生图标
• 壁纸切换：支持多张壁纸切换和浅色/深色模式适配
• 右键菜单：完整的桌面右键菜单功能

📱 菜单栏

• 苹果菜单：包含关于本机、系统偏好设置、注销、关机等选项
• 应用菜单：文件、编辑、查看、前往、窗口、帮助等完整菜单组
• 状态栏：实时显示时间、网络、音量、电池等系统状态
• 液体玻璃效果：采用 macOS 26 最新的液体玻璃设计，半透明背景配合动态光影

🚢 Dock 栏

• 图标交互：鼠标悬停时图标放大动画效果
• 应用启动：点击 Dock 图标快速打开对应应用
• 废纸篓：完整的废纸篓功能，支持文件删除和恢复
• 玻璃质感：Dock 栏采用半透明玻璃效果，与桌面背景融合

🪟 窗口系统

• 三色按钮：红色（关闭）、黄色（最小化）、绿色（最大化）
• 窗口拖拽：支持标题栏拖拽和边缘调整大小
• 层级管理：点击激活窗口，自动调整窗口层级
• 液体玻璃效果：窗口标题栏采用 macOS 26 最新的液体玻璃设计
• 圆角设计：所有窗口采用统一的圆角设计，符合 macOS 26 设计规范

🎯 内置应用

访达

• 左侧边栏显示个人收藏
• 右侧主显示区域
• 图标和列表视图切换
• 液体玻璃效果的侧边栏和标题栏

浏览器

• 模拟 Safari 界面样式
• 多标签页支持
• 地址栏和导航功能
• 快速访问页面
• 液体玻璃效果的标签栏和导航栏

终端

• 黑色背景配绿色文字的经典终端样式
• 支持基本命令：ls、pwd、date、clear、echo、whoami
• 命令历史记录
• 实时命令反馈

备忘录

• 简洁的笔记界面
• 标题和正文编辑
• 自动保存功能
• 液体玻璃效果的标题栏

日历

• 月历视图
• 当日高亮显示
• 星期和日期显示
• 液体玻璃效果的标题栏

照片

• 照片缩略图网格显示
• 照片预览功能
• 液体玻璃效果的标题栏和工具栏
• 现代化的图片浏览界面

邮件

• 收件箱、发件箱、草稿箱等邮件文件夹
• 邮件列表和邮件内容预览
• 液体玻璃效果的界面设计
• 现代化的邮件客户端界面

音乐

• 音乐库、播放列表、电台等功能
• 音乐播放控制
• 液体玻璃效果的界面设计
• 现代化的音乐播放器界面

文本编辑

• 简洁的文本编辑界面
• 支持基本的文本编辑功能
• 液体玻璃效果的标题栏
• 符合 macOS 26 设计规范的文本编辑器

便签

• 可拖动、调整大小的便签窗口
• 支持多种颜色主题
• 自动保存功能
• 液体玻璃效果的界面设计

系统偏好设置

• 外观模式切换（浅色/深色）
• 强调色选择
• 各种系统设置选项
• 液体玻璃效果的界面设计

⌨️ 快捷键支持

• Cmd+C / Ctrl+C：复制选中项目
• Cmd+V / Ctrl+V：粘贴
• Cmd+N / Ctrl+N：新建文件夹
• Cmd+W / Ctrl+W：关闭当前窗口
• Cmd+Q / Ctrl+Q：退出当前应用
• Cmd+M / Ctrl+M：最小化窗口
• Cmd+Tab / Ctrl+Tab：切换应用程序

🎨 视觉特性

• 液体玻璃效果：使用 backdrop-filter 实现的最新液体玻璃设计，半透明背景配合动态光影
• 动态颜色系统：基于 CSS 变量实现的动态颜色，支持浅色/深色模式自动切换
• 圆角设计：所有界面元素采用统一的圆角设计，符合 macOS 26 设计规范
• 平滑动画：所有交互都配有 macOS 风格的流畅动画
• 原生配色：严格遵循 macOS 26 原生色彩系统
• 字体系统：使用 San Francisco 等系统字体

🔧 技术实现

技术栈

• HTML5：语义化标签结构
• CSS3：Flex/Grid 布局、动画、滤镜效果、CSS 变量
• JavaScript ES6+：原生 JavaScript，无框架依赖
• Font Awesome：图标库支持

关键特性

• 无需编译，直接运行
• 响应式设计，支持 1366×768 及以上分辨率
• 兼容 Chrome、Safari、Firefox 最新版本
• 本地存储支持，保存用户设置
• 模块化设计，每个应用有独立的样式和功能

📁 项目结构

macOS-simulator/
├── index.html          # 主页面结构
├── style.css           # 样式文件（包含所有应用的样式）
├── script.js           # 交互逻辑（包含所有应用的功能）
├── README.md           # 中文说明文档
├── README_EN.md        # 英文说明文档
└── images/             # 图片资源文件夹
    └── wallpaper.jpg   # 桌面壁纸

🎯 使用说明

基本操作

1. 双击图标：打开对应应用程序
2. 右键桌面：显示桌面右键菜单
3. 点击菜单栏：访问系统功能
4. Dock 交互：悬停查看动画，点击启动应用

窗口操作

• 拖拽移动：按住窗口标题栏拖拽移动位置
• 调整大小：拖拽窗口边缘或角落调整大小
• 窗口控制：使用左上角三色按钮控制窗口状态

系统设置

• 深色模式：系统偏好设置 → 外观 → 选择深色模式
• 壁纸切换：右键桌面 → 更改桌面背景
• 主题颜色：系统偏好设置中选择不同的强调色

🚧 已知限制

• 这是一个前端模拟器，不包含真实的文件系统
• 部分功能仅为演示用途，如网络状态、电池图标等
• 终端命令为模拟实现，不支持真实的系统命令
• 浏览器无法访问真实网站，仅为界面演示

🛠️ 开发说明

代码结构

• 模块化设计：HTML、CSS、JS 分离，便于维护
• 面向对象：JavaScript 使用类结构组织代码
• 语义化 HTML：使用语义化标签提高可访问性
• CSS 变量：使用 CSS 变量实现动态颜色和主题切换

扩展开发

• 新增应用：在 script.js 中添加 create*Window() 函数
• 新增功能：在对应的处理方法中添加功能逻辑
• 样式定制：在 style.css 中添加对应的样式规则
• 主题定制：修改 CSS 变量即可改变整个系统的主题颜色

📄 许可证

本项目仅供学习和演示使用，请勿用于商业用途。macOS 是 Apple Inc. 的注册商标。

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目。

---

注意：这是一个纯前端的 macOS 26 界面模拟器，仅用于学习和演示目的，不包含真实的操作系统功能。