# webos **Repository Path**: mikenchen/webos ## Basic Information - **Project Name**: webos - **Description**: 整合web os client和web os server - **Primary Language**: Unknown - **License**: LGPL-2.1 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-18 - **Last Updated**: 2026-03-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # WebOS 一个基于 Web 技术栈的桌面操作系统风格 Web 应用，采用 Monorepo 架构，包含前端和后端。 ## 项目简介 WebOS 是一个完整的 Web 桌面操作系统，提供类似 Windows/macOS 的用户体验，支持多任务管理、窗口拖拽、终端操作等功能。 ### 技术栈 #### 前端 (frontend/) - **框架**: Vue 3.5.29 + TypeScript - **构建工具**: Vite 7.3.1 - **UI 组件库**: antdv-next 1.1.4 - **样式**: Tailwind CSS 4.2.1 - **状态管理**: Pinia 3.0.4 - **路由**: Vue Router 5.0.3 - **代码编辑器**: Monaco Editor 0.50.0 - **实时通信**: @microsoft/signalr 10.0.0 #### 后端 (backend/) - **运行时**: Node.js 20.18.0 - **框架**: Express - **WebSocket**: express-ws - **终端**: node-pty 1.1.0 - **日志**: pino 10.3.1 + rotating-file-stream 3.2.9 ## 项目结构 ``` web-os/ ├── frontend/ # 前端项目 (Vue3) │ ├── public/ # 静态资源 │ ├── src/ │ │ ├── assets/ # 静态文件（图片、样式等） │ │ ├── components/ # 组件 │ │ │ ├── core/ # 核心组件 │ │ │ │ ├── calculator/ # 计算器 │ │ │ │ ├── coding-editor/ # 代码编辑器 │ │ │ │ ├── fallback/ # 错误页面 │ │ │ │ ├── icon/ # 图标组件 │ │ │ │ └── resize-layout/ # 可调整布局 │ │ │ └── web-os/ # WebOS 特有组件 │ │ │ ├── app.vue # 应用窗口 │ │ │ ├── background.vue # 背景组件 │ │ │ ├── desktop.vue # 桌面 │ │ │ ├── dock.vue # 任务栏 │ │ │ ├── launchpad.vue # 启动器 │ │ │ ├── loading.vue # 加载页 │ │ │ ├── login.vue # 登录页 │ │ │ └── widget.vue # 桌面小部件 │ │ ├── model/ # 数据模型 │ │ ├── router/ # 路由配置 │ │ ├── stores/ # Pinia 状态管理 │ │ ├── types/ # TypeScript 类型定义 │ │ ├── utils/ # 工具函数 │ │ └── views/ # 页面视图 │ │ ├── fallback/ # 错误页面 │ │ ├── home/ # 首页 │ │ ├── system/ # 系统页面 │ │ └── work/ # 工作页面 │ ├── package.json │ ├── vite.config.ts │ └── tailwind.config.js │ ├── backend/ # 后端项目 (Node.js) │ ├── modules/ # 业务模块 │ │ ├── src/ │ │ │ ├── app.mjs # 应用管理 │ │ │ ├── debug.mjs # 调试接口 │ │ │ ├── design.mjs # 设计器接口 │ │ │ ├── file.mjs # 文件管理 │ │ │ ├── folder.mjs # 文件夹管理 │ │ │ ├── network.mjs # 网络请求 │ │ │ ├── os.mjs # 系统信息 │ │ │ └── terminal.mjs # 终端管理 │ │ └── index.mjs │ ├── utils/ # 工具函数 │ ├── index.mjs # 入口文件 │ └── package.json │ ├── .gitignore # Git 忽略文件 ├── package.json # 根目录配置（concurrently） └── README.md # 项目说明 ``` ## 快速开始 ### 环境要求 - Node.js: ^20.19.0 || >=22.12.0 - npm 或 pnpm ### 安装依赖 #### 安装所有依赖 ```bash npm install ``` 或使用 pnpm： ```bash pnpm install ``` ### 启动项目 #### 同时启动前后端（推荐） ```bash npm run dev ``` 或使用 pnpm： ```bash pnpm run dev ``` 这将同时启动： - 前端: http://localhost:3030 - 后端: http://localhost:3040 #### 单独启动前端 ```bash cd frontend npm run dev ``` #### 单独启动后端 ```bash cd backend npm run dev ``` ### 构建项目 #### 构建前端 ```bash cd frontend npm run build ``` #### 构建后端 ```bash cd backend npm run build ``` ## 主要功能 ### 桌面系统 - 完整的桌面界面，支持背景切换 - 任务栏（Dock），显示运行中的应用 - 启动器（Launchpad），快速启动应用 - 窗口管理，支持拖拽、调整大小、最大化、最小化 - 桌面小部件（Widget） ### 系统应用 - **终端**: 基于 Xterm.js 的 Web 终端 - **文件管理**: 文件和文件夹浏览、上传、下载 - **代码编辑器**: 基于 Monaco Editor 的代码编辑器 - **记事本**: 文本编辑 - **视频播放器**: 视频文件播放 - **网络**: 网络请求测试 - **设置**: 系统配置 ### 核心组件 - **计算器**: 完整的计算器功能 - **代码编辑器**: 支持多种语言（TypeScript、JSON、CSS、HTML、Nginx、TOML） - **图标系统**: 基于 Iconify 的图标库 - **可调整布局**: 支持拖拽调整大小的布局组件 ### 后端服务 - **终端服务**: 基于 node-pty 的真实终端 - **文件服务**: 文件和文件夹操作 - **WebSocket**: 实时通信支持 - **日志系统**: 基于 pino 的日志记录 ## 开发指南 ### 前端开发 #### 添加新组件 1. 在 `frontend/src/components/` 下创建组件 2. 在需要的地方导入使用 3. 组件会自动按需导入（通过 unplugin-vue-components） #### 添加新页面 1. 在 `frontend/src/views/` 下创建页面 2. 在 `frontend/src/router/routes/` 中配置路由 3. 在桌面图标中添加入口（`frontend/src/model/app.ts`） #### 状态管理 使用 Pinia stores，位于 `frontend/src/stores/`： - `app.ts`: 应用状态 - `auth.ts`: 认证状态 - `editor.ts`: 编辑器配置 - `user.ts`: 用户信息 ### 后端开发 #### 添加新接口 1. 在 `backend/modules/src/` 下创建模块文件 2. 在 `backend/modules/index.mjs` 中注册路由 3. 使用 logger 记录日志 #### 模块示例 ```javascript export function createNewHandler(app, logger) { app.get('/api/new', (req, res) => { logger.info('New endpoint called'); res.json({ message: 'Hello' }); }); } ``` ## 项目配置 ### 端口配置 - 前端: 3030 - 后端: 3040 - 终端服务: 3040 ### 环境变量 - 前端: `frontend/.env.development` / `frontend/.env.production` - 后端: `backend/.env.development` / `backend/.env.production` ### 代理配置 前端通过 Vite proxy 代理后端请求： - `/wos-server` -> `http://localhost:3040/` - `/ws-server` -> `http://localhost:3040/` ## 依赖说明 ### 核心依赖 | 依赖 | 版本 | 用途 | |-------|-------|------| | vue | ^3.5.29 | 前端框架 | | antdv-next | ^1.1.4 | UI 组件库 | | monaco-editor | ^0.50.0 | 代码编辑器 | | pinia | ^3.0.4 | 状态管理 | | express | - | 后端框架 | | node-pty | ^1.1.0 | 终端模拟 | ### 开发依赖 | 依赖 | 版本 | 用途 | |-------|-------|------| | vite | ^7.3.1 | 构建工具 | | typescript | ~5.9.3 | 类型检查 | | eslint | ^10.0.2 | 代码检查 | | prettier | 3.8.1 | 代码格式化 | ## 常见问题 ### 端口被占用 如果端口 3030 或 3040 被占用，可以修改： - 前端端口: `frontend/vite.config.ts` 中的 `server.port` - 后端端口: `backend/index.mjs` 中的 `TERMINAL_PORT` ### Monaco Editor 报错 如果遇到 Monaco Editor 相关错误，尝试： ```bash cd frontend rm -rf node_modules/.vite npm run dev ``` ### 后端启动失败 检查 Node.js 版本是否符合要求： ```bash node --version # 应该是 v20.19.0 或更高 ``` ## 贡献指南 欢迎提交 Issue 和 Pull Request！ ### 开发流程 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ### 代码规范 - 前端遵循 ESLint 和 Prettier 配置 - 提交前运行 `npm run lint` 检查代码 - 运行 `npm run type-check` 进行类型检查 ## 许可证 MIT License - 详见 [LICENSE](LICENSE) 文件 ## 联系方式 - 项目地址: [GitHub/Gitee] - 问题反馈: [Issues] ## 致谢 感谢以下开源项目的启发和支持： - [MacOS Web UI](https://gitee.com/hamm/mac-ui) - [Monaco Editor](https://microsoft.github.io/monaco-editor/) - [Xterm.js](https://xtermjs.org/)