# Web OS UI

**Repository Path**: mikenchen/web-os-client

## Basic Information

- **Project Name**: Web OS UI
- **Description**: 使用Vue3+Vite6+Typescript+Element Plus等技术实现的PC端系统风格的Web OS UI
- **Primary Language**: TypeScript
- **License**: LGPL-2.1
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2025-01-20
- **Last Updated**: 2025-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webos, vue3, elementPlus, TypeScript, webui

## README

# WebOS Client

## 介绍
web-os-client 是一个使用 Vue3、Vite6、Typescript 和 Element Plus 技术构建的 PC 端系统风格 WebUI，旨在提供免费的学习和参考资源。

服务端地址：[https://gitee.com/mikenchen/web-os-server](https://gitee.com/mikenchen/web-os-server)

#### 文件目录
```
public/
├── monaco-editor/          存放monaco-editor组件，加速页面打开
src/
├── assets/                 存放静态文件
├── components/             存放可复用的 UI 组件
│   ├── core                自定义通用组件
│   ├── ui                  shadcn-vue3组件，参考官网生成
│   └── web-os              webos使用到的组件
├── designer-extensions/    存放epic-designer低代码扩展
├── helper/                 自定义帮助类
├── lib/                    自定义通用包
├── model/                  桌面图标默认数据
├── router/                 页面导航
├── store/                  缓存
├── types/                  类型定义
├── utils/                  工具函数
├── views/                  自定义帮助类
│   ├── _core/              通用页面
│   └── home/               桌面相关文件
│   └── system/             系统相关文件
│   └── work/               业务相关文件
└── preferences.ts          项目配置文件

```


#### 安装教程
```
1.  git clone https://gitee.com/mikenchen/web-os-client.git
2.  cd web-os-client
3.  pnpm install
4.  pnpm run dev
```

#### 服务端
服务端项目地址：[https://gitee.com/mikenchen/web-os-server](https://gitee.com/mikenchen/web-os-server)
```
1.  git clone https://gitee.com/mikenchen/web-os-server.git
2.  cd web-os-server
3.  pnpm install
4.  pnpm run start 或 pnpm run start:win
```


## 项目预览
- 提供了多个界面截图，包括设计界面、桌面界面、加载界面、登录界面和主界面等。

## 主要功能
- 实现了一个完整的 Web 操作系统界面，包括桌面、任务栏、启动器、窗口管理等功能。
- 支持多任务处理、窗口拖动、调整大小等交互操作。
- 集成了 Monaco 编辑器，支持代码编辑和语法高亮。
- 提供了丰富的 UI 组件库，涵盖表单、对话框、导航菜单等多种常用组件。

#### 项目预览

| 欢迎页  |  登录页 |
|---|---|
|  ![输入图片说明](preview/loading.png) |  ![输入图片说明](preview/login.png) |


| 主桌面  |  主要页面 |
|---|---|
|  ![输入图片说明](preview/desktop.png) |  ![输入图片说明](preview/main.png) |

| 终端  |  低代码 |
|---|---|
|  ![输入图片说明](preview/terminal.png) |  ![输入图片说明](preview/design.png) |

#### 主要功能

| 插件 | 功能 |
|---------------|--------------|
| [monaco-editor](https://microsoft.github.io/monaco-editor/) | VS Code代码编辑器 |
| [epic-designer](https://docs.epicjs.cn/guide/start/)             |    开源低代码平台          |
| [@iconify/tailwind](https://iconify.design/docs/usage/css/tailwind/)             |    tailwind离线图标插件          |
| [@microsoft/signalr](https://www.npmjs.com/package/@microsoft/signalr)              |   实时通信           |
| [Xterm.js](https://xtermjs.org/)              |   web-terminal终端           |


## 参考
- 项目灵感和技术参考自开源社区和现代前端开发实践。
1.  Vben Admin(https://doc.vben.pro/)
2.  Hamm/MacOS Web UI(https://gitee.com/hamm/mac-ui)
3.  win11React(https://github.com/blueedgetechno/win11React)


## Gitee 特性
- 本项目托管在 Gitee 上，便于国内开发者快速访问和贡献代码。