🖥️ Bos Desktop OS

一个精美的桌面操作系统模拟器

在线预览 · 功能特性 · 截图展示 · 技术架构

---

📖 项目简介

Bos 是一个桌面操作系统模拟器，采用纯前端技术（HTML / CSS / JavaScript）实现，无需任何后端服务。它模拟了一个完整的桌面操作系统体验，包含 21 个内置应用、窗口管理系统、主题切换、国际化支持等功能。

✨ 功能特性

🎨 设计系统

• 极简风格：纯色背景，无渐变，暖灰色系
• 亮色 / 暗色模式：一键切换，实时生效
• 6 种强调色：橙、蓝、绿、红、紫、粉，亮色/暗色模式均生效
• 字体大小调节：12-20px 全局生效
• CSS 变量系统：统一的设计令牌管理

🪟 窗口系统

• 窗口拖动（标题栏）、调整大小（右下角手柄）
• 最大化 / 最小化 / 关闭
• 双击标题栏最大化
• 窗口层级管理（点击置顶）
• 弹性缓动动画（cubic-bezier(0.34, 1.56, 0.64, 1)）

🌐 国际化（i18n）

• 支持 简体中文 和 English
• 覆盖锁屏、任务栏、开始菜单、设置、通知中心等所有界面
• 切换语言后自动刷新生效

🔒 锁屏界面

• 显示用户头像（emoji）和账户名称
• 实时同步设置中的更改
• 支持自动解锁

📱 21 个内置应用

应用	说明	应用	说明
💻 我的电脑	文件管理器，支持创建/删除文件	🌐 浏览器	URL 导航和搜索
⚙️ 设置	主题、显示、声音、账户等	🧮 计算器	基础计算器
📝 便签	多便签，自动保存	⬛ 终端	模拟终端，支持多种命令
🌤️ 天气	12 个城市天气预报	🕐 时钟	实时时钟 + 秒表
📅 日历	月视图日历	📋 记事本	文本编辑器
📊 系统监视	运行时间、CPU、内存	📷 截图	模拟截图工具
✅ 待办事项	任务管理	🎨 颜色选择	HEX/RGB 颜色选择器
🔤 Base64	Base64 编解码	{ } JSON	JSON 格式化
.* 正则测试	正则表达式测试	📝 Markdown	Markdown 实时预览
⏳ 倒计时	倒计时器	🎲 随机数	随机数生成器
🪙 硬币	硬币翻转

⌨️ 快捷键

快捷键	功能
Ctrl + Shift + C	打开计算器
Ctrl + Shift + T	打开终端
Ctrl + Shift + N	打开记事本
Ctrl + Shift + S	截图
Ctrl + W	关闭当前窗口
Esc	关闭菜单

🎮 其他特性

• 桌面快捷方式：从开始菜单添加/移除
• 开始菜单：搜索过滤 + 应用列表
• 任务栏：支持顶部/底部切换
• 通知中心：音量控制 + 彩蛋消息
• 右键菜单：刷新、设置、关于
• 数据持久化：所有设置和数据保存到 localStorage

🚀 快速开始

方式一：直接打开

# 克隆仓库
git clone https://github.com/Bynlk/Bos.git

# 进入目录
cd Bos

# 直接用浏览器打开 index.html
start index.html

方式二：本地服务器

# 使用 Python
python -m http.server 8080

# 或使用 Node.js
npx serve .

# 然后访问 http://localhost:8080

📁 项目结构

Bos/
├── index.html              # 主入口文件
├── README.md               # 项目说明
├── css/
│   ├── base.css            # 基础样式、CSS 变量系统
│   ├── layout.css          # 布局样式（锁屏、桌面、任务栏、窗口）
│   └── apps.css            # 所有应用样式
└── js/
    ├── core/
    │   ├── state.js        # 全局状态管理、i18n 国际化
    │   ├── ui.js           # UI 控制（锁屏、桌面、菜单、快捷键）
    │   └── window.js       # 窗口管理（创建、拖动、调整大小）
    └── apps/
        ├── loader.js       # 应用加载器
        ├── browser.js      # 浏览器应用
        ├── settings.js     # 设置应用
        ├── calculator.js   # 计算器应用
        └── tools.js        # 所有工具类应用

🛠️ 技术栈

• HTML5 — 语义化页面结构
• CSS3 — CSS 变量、Flexbox、动画、backdrop-filter
• JavaScript (ES6+) — 模块化、localStorage 持久化
• 零依赖 — 无任何第三方库

🌍 浏览器兼容

浏览器	支持
Chrome	✅
Edge	✅
Firefox	✅
Safari	✅

📝 开发者

Bynlk — 开发者

• 版本：1.0.0
• 有bug请提交issue啦！

📄 License

MIT