# vue-web-os

**Repository Path**: jxysgzs/vue-web-os

## Basic Information

- **Project Name**: vue-web-os
- **Description**: 一个基于 Vue 2.6 + Element UI 2.15.14 的仿 Windows 10 云桌面脚手架系统。项目已完成权限模块、登录验证模块、Axios 请求模块、内置介绍文档、国际化（i18n）等常用功能模块，可用于开发中大型 Web 应用。
- **Primary Language**: HTML/CSS
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: http://39.98.108.195/vue-web-os/#/signin
- **GVP Project**: No

## Statistics

- **Stars**: 32
- **Forks**: 13
- **Created**: 2020-12-28
- **Last Updated**: 2026-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 重点项目

## README

# Vue-Web-OS v3.2.0

> **版本号命名规则 (v X.Y.Z)**：
> - **X (第一位)**：架构级别改动
> - **Y (第二位)**：功能新增
> - **Z (第三位)**：Bug 修复与优化

一个基于 **Vue 2.6 + Element UI 2.15.14** 的仿 Windows 10 云桌面系统。项目已完成权限模块、登录验证模块、Axios 请求模块、内置介绍文档、国际化（i18n）等常用功能模块，可用于开发中大型 Web 应用。已在实际项目中应用于云盘系统与企业级 OA 系统。

> 喜欢的小伙伴可以免费拿去使用，给个免费的 ⭐ Star 就是最大的支持！

## 🌐 在线体验（建议登录后使用鼠标右键选择全屏进行使用）

[👉 点此体验 Demo](http://39.98.108.195/vue-web-os/#/signin)

## ✨ 核心功能

### 桌面系统与核心视觉引擎
- **深浅双模主题 (Dark/Light Mode)**：完美集成的深色模式与浅色模式切换，基于全局 Vuex 状态管理与 LocalStorage 持久化存储。针对所有桌面窗口、任务栏及上下文菜单提供了两套完整的光影材质。
- **现代化毛玻璃质感 (Glassmorphism)**：底层 UI 进行了全面重构，全面采用响应式的毛玻璃亚克力材质，辅以精致的沉浸式阴影与交互动效。
- **动态任务栏与系统托盘**：底部任务栏实时显示已打开应用，点击可切换显隐，并高度集成时间、电量、网络状态实时侦测。任务栏按钮零间隙排列，消除点击死区。
- **开始菜单与应用矩阵**：仿 Windows 开始菜单逻辑，支持桌面级别的应用唤醒与后台挂起管理。
- **桌面右键上下文菜单**：桌面空白处右键弹出仿 Windows 原生风格的毛玻璃上下文菜单，支持二级子菜单展开。内置查看（大/中/小图标切换）、刷新、个人信息、显示桌面、更换壁纸、系统设置、全屏切换等快捷操作。菜单弹出位置自动适配屏幕边界，不会被截断。
- **桌面图标三档尺寸切换**：通过右键菜单「查看」子菜单，可在大图标、中等图标、小图标之间一键切换。当前选中尺寸以对勾高亮标记，切换过程带平滑过渡动画。

### 窗口管理黑科技
- **多窗口管理**：支持窗口拖拽、缩放、最小化、最大化、关闭，双击标题栏切换全屏
- **窗口拖拽缩放**：主应用窗口支持拖拽边缘自由调整大小，提供 8 个方向（上下左右 + 四角）的缩放手柄。自动约束最小尺寸防止内容挤压，并支持窗口尺寸记忆（关闭后再次打开自动恢复上次自定义的大小）。可通过桌面右键菜单「查看」或系统设置随时开关。
- **边界防碰撞计算**：拖拽窗口时引入了高精度的动态锚定，自动识别屏幕边界及防止陷入任务栏盲区。
- **系统层级视图锁定**：采用了全局 `100vh + overflow:hidden` 阻断策略，根绝了业务系统导致窗口产生破坏性外层滚动条的问题。
- **Keep-Alive 窗口缓存**：窗口生命周期由任务栏状态精确驱动。打开的应用通过 `<keep-alive>` 保留内部状态，最小化不丢数据；关闭时延迟销毁组件，确保退场动画完整播放后再释放内存，彻底杜绝后台冗余组件累积导致的内存泄漏。

### 智能菜单标签栏
- **溢出滚动 + 双箭头导航**：当应用内子页面数量超出窗口宽度时，标签栏不再折行，而是自动启用水平滚动模式。左右两端出现圆形箭头按钮，点击可平滑滚动；同时支持鼠标滚轮横向滚动。箭头智能显隐，滚到尽头自动消失。窗口拖拽缩放时标签栏实时自适应，箭头同步更新。
- **按需渲染零冗余**：使用 Vue 动态组件 `<component :is>` 机制，任意时刻仅渲染当前选中的子页面，其余标签仅为轻量 DOM 文字按钮。即使 50 个菜单标签也不会有任何性能问题。
- **自动聚焦定位**：切换菜单时，若激活的标签不在可视区域内，系统自动将其滚动到可见范围。

### 权限体系
- **应用级权限 (type: 1)**：控制桌面上显示哪些应用图标
- **页面级权限 (type: 2)**：控制应用内部显示哪些子页面/菜单
- **层级关系 (parentid)**：通过 `parentid` 建立应用与子页面的父子层级
- **默认页面 (defaultPage)**：可配置应用打开时默认展示的子页面

### 内置介绍文档
- 系统内置「介绍文档」桌面应用，包含：项目总览、权限体系、核心功能、开发指南、动画特效、右键菜单、菜单优化等 7 个专题页面
- 无需翻阅外部文档，直接在系统内查阅所有使用说明与技术实现原理

### 国际化 (i18n)
- 包含高度耦合框架环境的多语言（中/英）热切换方案，涵盖全局开始菜单、系统状态文本和桌面交互。
- 采用数据驱动的应用与页签翻译机制：后端接口按需提供 `permissionsname`（中文）和 `permissionsnameen`（英文）字段，前端根据 `i18n.locale` 自动处理中英双语渲染，抛弃本地硬编码，极大地降低维护成本。

### 数据模拟
- 使用 Mockjs 模拟后端接口，前端独立可运行
- `/getMenu` 接口和登录接口后期可无缝替换为真实后端 API

## 🚀 快速启动

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 打包生产环境
npm run build

# 本地预览打包产物（需全局安装 http-server）
cd dist
http-server
```

## 📁 项目结构

```
src/
├── assets/              # 静态资源 & SCSS 变量
├── components/
│   ├── Function/        # 应用外壳组件（窗口容器）
│   ├── Main/            # 主框架组件（桌面、任务栏、开始菜单等）
│   ├── Menu/            # 各应用的子页面组件
│   └── util/            # 公共工具组件（窗口头部、标题栏等）
├── http/                # Axios 请求封装
├── mock/                # Mockjs 模拟数据
├── store/               # Vuex 状态管理
├── utils/               # 工具函数（权限、拖拽指令等）
└── App.vue              # 根组件
```

## 🔧 关键配置说明

### 添加新应用

在 `src/mock/modules/common.js` 的 `menu` 数组中添加配置：

```js
// 添加一个应用（type: 1）
{
  id: 100,
  parentid: 0,
  permissionsname: '我的应用',
  permissionsenglish: 'myApp',
  type: 1,
  defaultPage: 'subPage1'  // 可选：指定默认打开的子页面
}

// 添加子页面（type: 2）
{
  id: 101,
  parentid: 100,
  permissionsname: '子页面1',
  permissionsenglish: 'subPage1',
  type: 2
}
```

### 替换后端接口

在 `src/http/index.js` 中配置 `baseURL` 指向真实后端地址，将 Mock 拦截的 `/menu`、`/login` 等接口替换为实际 API 即可。

## 📸 项目预览

##### 登录页面
![vue-web-os](http://lhjf-pr.oss-cn-zhangjiakou.aliyuncs.com/img/20260414/152502/9d066915167841e4828034014529cd82.png "vue-web-os")
##### 桌面（新版毛玻璃主题）
![vue-web-os](http://lhjf-pr.oss-cn-zhangjiakou.aliyuncs.com/img/20260414/152549/571fbc55fa2b4110a442f85d87a88eae.png "vue-web-os")
##### 开始菜单与鼠标右键（含全屏唤起）
![vue-web-os](http://lhjf-pr.oss-cn-zhangjiakou.aliyuncs.com/img/20260414/152620/6850e84648e44d979db61b2c591d01d0.png "vue-web-os")
##### 多窗口与内嵌功能交互展示
![vue-web-os](http://lhjf-pr.oss-cn-zhangjiakou.aliyuncs.com/img/20260414/152648/ea21bac653bc4b7e836000f7b56e2225.png "vue-web-os")

## 📦 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 2.6.x | 核心框架 |
| Element UI | 2.15.14 | UI 组件库 |
| Vuex | 3.x | 状态管理 |
| Axios | 0.19.0 | HTTP 请求 |
| Mockjs | 1.1.0 | 数据模拟 |
| vue-context-menu | 1.0.2 | 右键菜单 |
| ECharts | - | 数据可视化 |
| vue-i18n | - | 国际化完整支持 |

## 📋 版本更新记录

### v3.2.0 (新发布)
- **窗口拖拽缩放**：主应用窗口（云盘、插件展示、用户管理、介绍文档）支持拖拽边缘自由调整大小，8 个方向（上下左右 + 四角）缩放手柄，最小尺寸约束防止内容挤压。支持尺寸记忆（Vuex + LocalStorage 持久化），关闭后再次打开自动恢复上次自定义的大小。可通过桌面右键菜单「查看」子菜单或系统设置面板随时开关。
- **菜单标签栏自适应增强**：标签栏引入 ResizeObserver 实时监听容器尺寸变化，窗口拖拽缩放时箭头导航同步自适应更新，修复了 flex 布局约束链导致溢出检测失效的问题。
- **智能菜单标签栏**：应用窗口内的标签栏全面升级为水平滚动模式，当子页面过多时自动出现左右双箭头导航，支持鼠标滚轮横向滚动和自动聚焦定位，告别简陋的折行排列。
- **桌面右键二级子菜单**：右键上下文菜单新增「查看」子菜单，支持鼠标悬停展开，可在大/中/小三档图标尺寸间一键切换，当前选中项以对勾标记。子菜单同时集成了窗口缩放开关。
- **桌面图标三档尺寸**：桌面程序图标支持大图标、中等图标、小图标三种尺寸，切换时附带平滑过渡动画，尺寸偏好通过 Vuex + LocalStorage 持久化。
- **Keep-Alive 窗口缓存**：引入 `v-if` + `<keep-alive>` 动态控制窗口生命周期。应用驻留任务栏期间保留状态，彻底关闭后延迟销毁组件确保退场动画完整播放，杜绝内存泄漏。
- **任务栏交互优化**：消除任务栏按钮间的点击死区，零间隙排列确保任意位置点击均可响应。
- **内置文档扩充**：「介绍文档」应用新增「右键菜单」和「菜单优化」两个专题页面，并同步更新了窗口缩放功能的介绍卡片。

### v3.1.0
- **应用搜索框功能**
- **更生动流畅的过渡动画提升系统的"苹果级"质感**

### v3.0.1 
- **极致 UI 重构**：整体 UI 全面过渡到高阶 Glassmorphism (毛玻璃) 设计语言，赋予任务栏、开始菜单、弹窗和桌面应用现代化的立体光影感。
- **深浅双色主题引擎**：原生集成了系统级别的『深色模式 / 浅色模式』，实现了桌面环境与内层业务组件外观的分层独立渲染策略。
- **全屏架构与国际化融合**：在桌面级别的右键菜单中直接集成底层系统全屏 API，完美处理中英双语识别与自动切换。
- **防滚动硬截断优化**：在前端底层根绝了因为窗口模糊发光、尺寸溢出带来的恶意滚动条 Bug，锁定最佳 100vh 视觉比例。

### v3.0.0
- 移除 iView 依赖，全面统一使用 Element UI
- 新增「介绍文档」内置桌面应用，涵盖项目总览、权限体系、核心功能、开发指南
- 优化任务栏显隐切换逻辑，解决全屏弹窗遮挡问题
- 重构窗口拖拽边界算法，自动避让任务栏
- 支持应用 `defaultPage` 配置，打开应用时自动定位到指定子页面
- 重构系统介绍与技术解决模块下的教程页面 UI
- 预留国际化 (i18n) 模块架构

## 📞 联系方式

如有疑问可以加我微信：**a2417978181** 咨询。

## ❤️ 支持

该系统会稳定持续地升级维护，喜欢的话请给个 Star 吧，谢谢！