Windows XP 模拟器 🖥️

写给 2000 年代互联网的一封情书 —— 封装为 React 组件

在线演示 | 使用文档 | 报告问题

English | 简体中文

🕰️ 致 2000 年代的互联网

还记得拨号上网的连接声吗？打开 QQ 看到好友上线的那份雀跃，桌面上那张经典的绿色草坡壁纸，还有那些消磨在扫雷和纸牌上的午后时光……

这个项目是献给那个年代的怀旧之作——2000 年代初的互联网，那时的网络还带着一份新鲜感，个人主页遍地开花，Windows XP 的开机声是无数人每天的记忆序章。无论你是亲历者还是想一探那个时代的人，这个组件都能在浏览器里重现那份感觉。

免责声明： 本项目是一个独立的、由爱好者制作的复刻作品，仅供怀旧与学习交流之用，与微软公司（Microsoft Corporation）及 Windows 操作系统无任何关联，亦未获得其授权或认可。所有相关商标归其各自所有者所有。

✨ 特性

• 🎨 千禧年美学 - 像素级还原标志性的 Windows XP Luna 主题
• 🪟 完整窗口管理 - 可拖拽、可调整大小的窗口，支持最小化/最大化/关闭
• 📁 虚拟文件系统 - 浏览文件夹、打开文件、管理模拟文件系统
• 🌐 Internet Explorer - 内置浏览器，支持历史记录和 iframe 渲染
• 📝 丰富的应用程序 - 记事本、画图、计算器、扫雷、纸牌、媒体播放器等
• ❓ 帮助和支持中心 - 内置帮助文档，包含多个主题
• 🔐 完整启动流程 - 真实的启动画面、登录系统和屏幕保护程序
• 💾 持久化状态 - 窗口和会话状态保存到 localStorage
• 🎵 XP 音效 - 通过 Web Audio API 实现的真实开机、关机和 UI 音效
• ♻️ 回收站 - 完整的文件删除和恢复功能
• 🖱️ 上下文菜单 - 全界面的右键菜单
• 🌍 文化配置 - 中英文使用独立的桌面、开始菜单、浏览器主页和应用集合
• 🎮 经典游戏 - 内置扫雷和纸牌游戏

📦 安装

npm install @caoergou/windows-xp

🚀 快速开始

import { WindowsXP } from '@caoergou/windows-xp';
import '@caoergou/windows-xp/style.css';

function App() {
  return <WindowsXP />;
}

默认登录凭据

• 在线演示: https://eric.run.place/windows-xp/

  • 用户名: User
  • 密码: forthe2000s

• 作为组件使用: 通过 props 自定义

  <WindowsXP username="Admin" password="yourpassword" />

📖 使用方法

基础配置

<WindowsXP
  username="Admin"
  password="mypassword"
  language="zh"
  skipBoot={false}
  autoLogin={false}
  storagePrefix="xp_"
/>

自定义文件系统

const customFS = {
  "Desktop": {
    "type": "folder",
    "name": "Desktop",
    "children": {
      "MyApp.txt": {
        "type": "file",
        "name": "MyApp.txt",
        "app": "Notepad",
        "content": "你好 Windows XP！"
      }
    }
  }
};

<WindowsXP customFileSystem={customFS} />

详细使用和 API 参考请查看 USAGE.md。

📦 包导出

除了主入口 WindowsXP，包还提供多个子路径导出，方便你只拿需要的部分搭建自己的 XP 风格界面：

// 完整的 bundled 体验
import { WindowsXP } from '@caoergou/windows-xp';

// 按需引入
import { Button, Window, Taskbar } from '@caoergou/windows-xp/components';
import { Notepad, Minesweeper } from '@caoergou/windows-xp/apps';
import { useWindowManager, useFileSystem, useApp, useCulture, useAppRegistry } from '@caoergou/windows-xp/hooks';
import { xpScrollbarStyles } from '@caoergou/windows-xp/theme';
import { APP_REGISTRY } from '@caoergou/windows-xp/registry';

你也可以通过自定义文化包和应用程序来扩展这个模拟器。

🎨 内置应用程序

完整实现

• 📝 记事本 - 支持文件的文本编辑器
• 🖼️ 图片查看器 - 图像查看器
• 🌐 Internet Explorer - 带历史记录的网页浏览器
• 📁 资源管理器 - 带导航功能的文件管理器
• 🎨 画图 - 绘图应用
• 🧮 计算器 - 基础计算器
• 💣 扫雷 - 经典游戏
• 🃏 纸牌 - 卡牌游戏
• 💬 QQ 登录 - QQ 登录对话框
• ❓ 帮助和支持 - 帮助中心
• 🏃 运行 - 运行命令对话框
• 🔊 音量控制 - 音量设置

基础 UI（功能有限）

• 🎵 Windows Media Player - 带可视化效果的媒体播放器 UI
• ⚙️ 控制面板 - 系统设置 UI
• 💻 命令提示符 - 带基础命令的终端模拟器
• 🖧 网络连接 - 网络状态 UI

🛠️ 技术栈

• React 18 - 使用 Hooks 的 UI 框架
• TypeScript 5 - 类型安全开发
• styled-components - CSS-in-JS 样式方案
• xp.css - Windows XP 主题库
• react-draggable - 窗口拖拽
• react-resizable - 窗口调整大小
• i18next - 国际化框架

🌐 浏览器支持

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

📝 许可证

MIT 许可证 - 详见 LICENSE 文件。

🙏 致谢

• xp.css - Windows XP CSS 框架
• winXP - 灵感来源
• Microsoft - 创造了标志性的 Windows XP