版本号命名规则 (v X.Y.Z)：
- X (第一位)：架构级别改动
- Y (第二位)：功能新增
- Z (第三位)：Bug 修复与优化
一个基于 Vue 2.6 + Element UI 2.15.14 的仿 Windows 10 云桌面系统。项目已完成权限模块、登录验证模块、Axios 请求模块、内置介绍文档、国际化（i18n）等常用功能模块，可用于开发中大型 Web 应用。已在实际项目中应用于云盘系统与企业级 OA 系统。
喜欢的小伙伴可以免费拿去使用，给个免费的 ⭐ Star 就是最大的支持！
- 深浅双模主题 (Dark/Light Mode)：完美集成的深色模式与浅色模式切换，基于全局 Vuex 状态管理与 LocalStorage 持久化存储。针对所有桌面窗口、任务栏及上下文菜单提供了两套完整的光影材质。
- 现代化毛玻璃质感 (Glassmorphism)：底层 UI 进行了全面重构，全面采用响应式的毛玻璃亚克力材质，辅以精致的沉浸式阴影与交互动效。
- 动态任务栏与系统托盘：底部任务栏实时显示已打开应用，点击可切换显隐，并高度集成时间、电量、网络状态实时侦测。任务栏按钮零间隙排列，消除点击死区。
- 开始菜单与应用矩阵：仿 Windows 开始菜单逻辑，支持桌面级别的应用唤醒与后台挂起管理。
- 桌面右键上下文菜单：桌面空白处右键弹出仿 Windows 原生风格的毛玻璃上下文菜单，支持二级子菜单展开。内置查看（大/中/小图标切换）、刷新、个人信息、显示桌面、更换壁纸、系统设置、全屏切换、模拟新通知等快捷操作。菜单弹出位置自动适配屏幕边界，不会被截断。
- 桌面图标三档尺寸切换：通过右键菜单「查看」子菜单，可在大图标、中等图标、小图标之间一键切换。当前选中尺寸以对勾高亮标记，切换过程带平滑过渡动画。
- 统一消息接管：通过代理插件包装
Vue.prototype.$notify，全系统任何位置调用this.$notify()都会被自动拦截并写入 Vuex Store 留存历史，同时保留 Element UI 原始弹窗效果。 - 任务栏铃铛入口：任务栏右下角集成铃铛图标，未读消息时显示红色数字角标，带呼吸缩放动画（2秒周期
scale(1) → scale(1.1)循环）。 - 右侧抽屉面板：点击铃铛从右侧滑出抽屉面板，集中展示全部历史通知。每条通知按类型（success/warning/info/error）显示不同颜色图标。
- 已读状态管理：未读通知左侧高亮紫色边框 + 右上角脉冲圆点动画；点击通知标记单条已读，圆点与高亮消失。支持全部已读、单条删除、清空全部操作。
- 列表过渡动画：新消息从右侧滑入，删除消息向左滑出，列表重排自带平滑过渡。
- 深色模式全适配：抽屉面板、通知卡片、按钮等完整适配深浅双模主题。
- 多窗口管理：支持窗口拖拽、缩放、最小化、最大化、关闭，双击标题栏切换全屏
- 窗口拖拽缩放：主应用窗口支持拖拽边缘自由调整大小，提供 8 个方向（上下左右 + 四角）的缩放手柄。自动约束最小尺寸防止内容挤压，并支持窗口尺寸记忆（关闭后再次打开自动恢复上次自定义的大小）。可通过桌面右键菜单「查看」或系统设置随时开关。
- 边界防碰撞计算：拖拽窗口时引入了高精度的动态锚定，自动识别屏幕边界及防止陷入任务栏盲区。
- 系统层级视图锁定：采用了全局
100vh + overflow:hidden阻断策略，根绝了业务系统导致窗口产生破坏性外层滚动条的问题。 - Keep-Alive 窗口缓存：窗口生命周期由任务栏状态精确驱动。打开的应用通过
<keep-alive>保留内部状态，最小化不丢数据；关闭时延迟销毁组件，确保退场动画完整播放后再释放内存，彻底杜绝后台冗余组件累积导致的内存泄漏。
- 溢出滚动 + 双箭头导航：当应用内子页面数量超出窗口宽度时，标签栏不再折行，而是自动启用水平滚动模式。左右两端出现圆形箭头按钮，点击可平滑滚动；同时支持鼠标滚轮横向滚动。箭头智能显隐，滚到尽头自动消失。窗口拖拽缩放时标签栏实时自适应，箭头同步更新。
- 按需渲染零冗余：使用 Vue 动态组件
<component :is>机制，任意时刻仅渲染当前选中的子页面，其余标签仅为轻量 DOM 文字按钮。即使 50 个菜单标签也不会有任何性能问题。 - 自动聚焦定位：切换菜单时，若激活的标签不在可视区域内，系统自动将其滚动到可见范围。
- 应用级权限 (type: 1)：控制桌面上显示哪些应用图标
- 页面级权限 (type: 2)：控制应用内部显示哪些子页面/菜单
- 层级关系 (parentid)：通过
parentid建立应用与子页面的父子层级 - 默认页面 (defaultPage)：可配置应用打开时默认展示的子页面
- 系统内置「介绍文档」桌面应用，包含：项目总览、权限体系、核心功能、开发指南、动画特效、右键菜单、菜单优化、通知中心等 8 个专题页面
- 无需翻阅外部文档，直接在系统内查阅所有使用说明与技术实现原理
- 包含高度耦合框架环境的多语言（中/英）热切换方案，涵盖全局开始菜单、系统状态文本和桌面交互。
- 采用数据驱动的应用与页签翻译机制：后端接口按需提供
permissionsname（中文）和permissionsnameen（英文）字段，前端根据i18n.locale自动处理中英双语渲染，抛弃本地硬编码，极大地降低维护成本。
- 使用 Mockjs 模拟后端接口，前端独立可运行
/getMenu接口和登录接口后期可无缝替换为真实后端 API
# 安装依赖
npm install
# 启动开发服务器
npm run serve
# 打包生产环境
npm run build
# 本地预览打包产物（需全局安装 http-server）
cd dist
http-serversrc/
├── assets/ # 静态资源 & SCSS 变量
├── components/
│ ├── Function/ # 应用外壳组件（窗口容器）
│ ├── Main/ # 主框架组件（桌面、任务栏、开始菜单等）
│ ├── Menu/ # 各应用的子页面组件
│ └── util/ # 公共工具组件（窗口头部、标题栏等）
├── http/ # Axios 请求封装
├── mock/ # Mockjs 模拟数据
├── store/ # Vuex 状态管理
├── utils/ # 工具函数（权限、拖拽指令等）
└── App.vue # 根组件
在 src/mock/modules/common.js 的 menu 数组中添加配置：
// 添加一个应用（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 | 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 | - | 国际化完整支持 |
- 消息通知中心：任务栏右下角新增铃铛图标，点击从右侧滑出抽屉面板，集中展示全系统历史通知。通过代理插件自动拦截所有
$notify调用并写入 Vuex Store 留存。未读消息以红色角标（呼吸缩放动画）和紫色脉冲圆点双重提示。支持标记已读、全部已读、单条删除、清空全部操作，通知条目带滑入/滑出过渡动画。完整适配深色模式。 - 右键模拟通知：桌面右键菜单新增「模拟新通知」选项，点击随机生成一条通知消息，同时弹出 Element UI 弹窗并自动记录到通知中心，便于功能演示。
- 通知中心文档：「介绍文档」应用新增「通知中心」专题页面，详细介绍核心架构、交互操作、呼吸灯/脉冲动画原理、已读逻辑流程及 Demo 体验方式。
- 窗口拖拽缩放：主应用窗口（云盘、插件展示、用户管理、介绍文档）支持拖拽边缘自由调整大小，8 个方向（上下左右 + 四角）缩放手柄，最小尺寸约束防止内容挤压。支持尺寸记忆（Vuex + LocalStorage 持久化），关闭后再次打开自动恢复上次自定义的大小。可通过桌面右键菜单「查看」子菜单或系统设置面板随时开关。
- 菜单标签栏自适应增强：标签栏引入 ResizeObserver 实时监听容器尺寸变化，窗口拖拽缩放时箭头导航同步自适应更新，修复了 flex 布局约束链导致溢出检测失效的问题。
- 智能菜单标签栏：应用窗口内的标签栏全面升级为水平滚动模式，当子页面过多时自动出现左右双箭头导航，支持鼠标滚轮横向滚动和自动聚焦定位，告别简陋的折行排列。
- 桌面右键二级子菜单：右键上下文菜单新增「查看」子菜单，支持鼠标悬停展开，可在大/中/小三档图标尺寸间一键切换，当前选中项以对勾标记。子菜单同时集成了窗口缩放开关。
- 桌面图标三档尺寸：桌面程序图标支持大图标、中等图标、小图标三种尺寸，切换时附带平滑过渡动画，尺寸偏好通过 Vuex + LocalStorage 持久化。
- Keep-Alive 窗口缓存：引入
v-if+<keep-alive>动态控制窗口生命周期。应用驻留任务栏期间保留状态，彻底关闭后延迟销毁组件确保退场动画完整播放，杜绝内存泄漏。 - 任务栏交互优化：消除任务栏按钮间的点击死区，零间隙排列确保任意位置点击均可响应。
- 内置文档扩充：「介绍文档」应用新增「右键菜单」和「菜单优化」两个专题页面，并同步更新了窗口缩放功能的介绍卡片。
- 应用搜索框功能
- 更生动流畅的过渡动画提升系统的"苹果级"质感
- 极致 UI 重构：整体 UI 全面过渡到高阶 Glassmorphism (毛玻璃) 设计语言，赋予任务栏、开始菜单、弹窗和桌面应用现代化的立体光影感。
- 深浅双色主题引擎：原生集成了系统级别的『深色模式 / 浅色模式』，实现了桌面环境与内层业务组件外观的分层独立渲染策略。
- 全屏架构与国际化融合：在桌面级别的右键菜单中直接集成底层系统全屏 API，完美处理中英双语识别与自动切换。
- 防滚动硬截断优化：在前端底层根绝了因为窗口模糊发光、尺寸溢出带来的恶意滚动条 Bug，锁定最佳 100vh 视觉比例。
- 移除 iView 依赖，全面统一使用 Element UI
- 新增「介绍文档」内置桌面应用，涵盖项目总览、权限体系、核心功能、开发指南
- 优化任务栏显隐切换逻辑，解决全屏弹窗遮挡问题
- 重构窗口拖拽边界算法，自动避让任务栏
- 支持应用
defaultPage配置，打开应用时自动定位到指定子页面 - 重构系统介绍与技术解决模块下的教程页面 UI
- 预留国际化 (i18n) 模块架构
如有疑问可以加我微信：a2417978181 咨询。
该系统会稳定持续地升级维护，喜欢的话请给个 Star 吧，谢谢！