Mac Desktop Simulator

一个完整的模拟 Mac 电脑桌面页面，使用纯 HTML + CSS + JavaScript 实现。

功能特性

🍎 核心功能

• 顶部菜单栏 - 包含系统时间、状态图标和 Spotlight 搜索
• Dock 栏 - 底部应用启动器，支持悬停效果和应用切换
• 桌面图标 - 可双击打开应用，支持右键菜单
• 窗口管理 - 可移动、调整大小、最小化、最大化和关闭窗口
• 系统应用 - 内置多个模拟的 Mac 应用

📱 内置应用

1. Finder - 文件管理器，显示目录结构
2. Safari - 网页浏览器，可输入 URL
3. Mail - 邮件客户端，显示邮件列表和内容
4. 计算器 - 功能完整的计算器应用
5. 备忘录 - 文本编辑器
6. 照片 - 图片查看器

⚡ 交互功能

• 鼠标悬停效果 - 所有可交互元素都有视觉反馈
• 拖拽支持 - 窗口可以自由拖动
• 键盘快捷键：
  • Cmd/Ctrl + Space - 打开 Spotlight 搜索
  • Cmd/Ctrl + W - 关闭当前窗口
  • Cmd/Ctrl + M - 最小化当前窗口
• 右键菜单 - 桌面和图标支持上下文菜单
• 实时时间 - 菜单栏显示当前日期和时间

🎨 设计特点

• macOS 风格 - 紧贴最新 macOS 设计语言
• 毛玻璃效果 - 使用 backdrop-filter 实现模糊效果
• 流畅动画 - CSS 过渡和动画提供流畅体验
• 响应式设计 - 适配不同屏幕尺寸

技术实现

文件结构

├── index.html      # 主页面结构
├── styles.css      # 样式文件
├── script.js       # 交互逻辑
└── README.md       # 项目文档

核心类和方法

MacDesktop 类

主要的桌面管理类，负责：

• 窗口创建和管理
• 应用启动
• 拖拽功能
• Spotlight 搜索
• 键盘快捷键处理

关键方法

• openApp(appName) - 打开指定应用
• createWindow(appName) - 创建应用窗口
• focusWindow(windowObj) - 聚焦窗口
• closeWindow(windowIdOrObj) - 关闭窗口
• minimizeWindow(windowIdOrObj) - 最小化窗口
• maximizeWindow(windowIdOrObj) - 最大化窗口
• setupSpotlight() - 设置 Spotlight 搜索

CSS 架构

• 模块化设计 - 按功能区域组织样式
• BEM 命名 - 使用语义化的类名
• CSS 变量 - 便于主题定制
• Flexbox/Grid - 现代布局方案

JavaScript 特性

• ES6+ 语法 - 使用类、箭头函数等现代特性
• 事件委托 - 高效的事件处理
• 状态管理 - 集中管理窗口和应用状态

使用方法

1. 直接在浏览器中打开 index.html
2. 双击桌面图标或点击 Dock 栏图标打开应用
3. 使用鼠标拖动窗口标题栏移动窗口
4. 点击窗口控制按钮进行窗口操作
5. 使用键盘快捷键提高效率

浏览器兼容性

• Chrome/Edge - 完全支持
• Safari - 完全支持
• Firefox - 完全支持
• 移动浏览器 - 基础功能支持

自定义和扩展

添加新应用

1. 在 getAppContent() 方法中添加应用内容
2. 在 getAppTitle() 方法中添加应用标题
3. 在 HTML 中添加对应的桌面和 Dock 图标
4. 在 setupAppFunctionality() 中添加特定功能

修改主题

• 修改 CSS 中的颜色变量
• 调整背景渐变
• 更改图标样式

添加新功能

• 扩展 MacDesktop 类
• 添加新的事件监听器
• 实现相应的 UI 组件

性能优化

• 使用 CSS transform 进行动画
• 事件委托减少监听器数量
• 懒加载应用内容
• 防抖处理频繁操作

开发说明

这是一个纯前端项目，不需要后端服务器。所有功能都在浏览器中实现，适合作为：

• 前端技术演示
• UI/UX 设计参考
• 教学项目
• 个人作品集展示

许可证

MIT License - 可自由使用和修改。