极空间 Web 桌面技术栈：自研 Vue 3 SPA

基于 pcweb 前端代码的逆向分析分析日期：2026-05-22

一、核心结论：完全自研，不是基于任何开源桌面项目

经过对前端打包产物（JS/CSS/HTML）的详细分析，极空间的 Web 桌面不是基于任何开源 Web 桌面项目（如 osjs、Puter、daedalOS、winbox 等）。它是一个完全自研的 SPA 应用。

内部项目名：zspace-web（来自 webpack chunk 命名 webpackChunkzspace_web）。

二、前端技术栈

确认的框架和库

技术	证据	用途
Vue 3	`createApp`、`.mount(`、`lib-vue.dc72da37.js`	核心框架
Element UI / Element Plus	`el-dialog`、`el-button`、`el-input`、`el-form`、`el-*` 语言包	UI 组件库
Vue Router	`lib-router.22ab4569.js`	前端路由
Axios	`lib-axios.b14a43f9.js`	HTTP 请求
ECharts	`echarts.ab94bd45.js`	图表（系统监控）
Day.js	`dayjs-lang-*` 语言包	日期处理
Highlight.js	`highlightjs` chunk	代码高亮
Webpack 5	`__webpack_require__`、`webpackChunkzspace_web`	打包工具

框架确认过程

早期分析曾误判为 React + Vue.js 混合，实际是纯 Vue 3：

证据 1: createApp (Vue 3 入口 API，不是 React 的 createElement)
证据 2: el-* 组件前缀 (Element UI/Element Plus，Vue 生态)
证据 3: lib-vue.dc72da37.js + lib-router.22ab4569.js (Vue 全家桶)
证据 4: 0 处 ReactDOM、useState、useEffect、jsx 引用

UI 组件库确认

从打包产物中提取到的 Element 组件：

el-dialog, el-button, el-checkbox, el-input, el-input-number,
el-form, el-form-item, el-dropdown, el-dropdown-menu, el-dropdown-item,
el-badge, el-autocomplete

加上 60+ 种语言的 Element UI 语言包（el-lang-zh-cn、el-lang-en 等），确认是 Element UI/Element Plus。

三、“桌面"体验是怎么实现的

既然不是基于开源桌面项目，那个桌面级的交互体验（图标、窗口、任务栏、右键菜单）是纯手工打造的。从代码中可以看到一些关键模块：

桌面配置系统

前端代码中有一个完整的桌面配置对象（webdesktop_*）：

{
  webdesktop_followSystemTheme: "true",    // 跟随系统主题
  webdesktop_darkTopBar: "1",              // 深色顶栏
  webdesktop_lightTopBar: "1",             // 浅色顶栏
  webdesktop_themeLightDark: "1",          // 主题模式
  webdesktop_loginBoxColor: "rgba(255,255,255,.2)",  // 登录框颜色
  webdesktop_loginTextColor: "rgba(255,255,255,1)",
  webdesktop_topBarBgColor: "rgba(0,0,0,.3)",        // 顶栏背景
  webdesktop_topBarBgColorBlur: "true",               // 顶栏模糊效果
  "img.login.webdesktop_wallpaper": "default",        // 壁纸
  "img.login.webdesktop_darkWallpaper": "default",
  "img.login.webdesktop_lightWallpaper": "defaultLight",
}

这说明桌面体验是通过 Vue 组件手动实现的：

壁纸层：背景图 + CSS backdrop-filter 模糊
顶栏：CSS 实现的半透明顶栏，支持毛玻璃效果
图标：CSS Grid/Flexbox 布局的桌面图标
窗口：基于 el-dialog 或自定义组件实现的窗口管理
主题：支持浅色/深色/跟随系统三种模式

三种登录界面

代码中为不同场景做了三套主题：

iplogin_*   → IP 直连登录页
webdesktop_* → Web 桌面登录页（带壁纸、毛玻璃）
mobile_*    → 移动端登录页

这并不是三个独立项目，而是同一套代码根据访问设备动态切换配置。

四、微前端架构

虽然整个桌面是自研的，但子应用的路由分派很有特色：

// nginx Lua 中的路径映射
{
  album → photoAlbum,     // /home/album → 相册应用
  video → video,          // /home/video → 视频应用
  music → music,          // /home/music → 音乐应用
  download → downloads,   // /home/download → 下载应用
  // ... 20+ 个映射
}

每个子应用的前端在各自的应用包中：

/var/appstore/pkg/video/ui/apphome_video/index.html
/var/appstore/pkg/photoAlbum/ui/apphome_photoAlbum/index.html
/var/appstore/pkg/music/ui/apphome_music/index.html

这是一种轻量级微前端方案——不是用 qiankun/Micro-app 等框架，而是借助 nginx 的 URL 重写实现路由分发。子应用可以是不同的技术栈，只要最终产出 HTML+JS+CSS 即可。

五、与其他 NAS 系统的对比

	极空间	群晖 DSM	威联通 QTS	TrueNAS
Web 桌面	自研 Vue 3 SPA	自研 (ExtJS → React)	自研	Angular
UI 框架	Element Plus	自研组件库	自研	自研
桌面体验	类 Windows/macOS 风格	类 Windows 风格	类 Windows 风格	Web 风格
原生桌面	Qt5 壳（HDMI）	无	HD Station (Qt)	无

极空间的 Web 桌面体验在国产 NAS 中属于第一梯队，原因是：

Vue 3 + Element Plus 成熟稳定，开发效率高
大量 CSS 细节（毛玻璃、动画、响应式）手动打磨
微前端架构让子应用可以独立迭代
统一的配置系统（webdesktop_*）让主题/壁纸/布局可定制

六、如果要实现类似效果

不需要找开源桌面项目。用 Vue 3 + Element Plus 从零搭建，核心模块：

桌面壳（1-2 周）

壁纸背景（CSS background + backdrop-filter）
桌面图标网格（CSS Grid）
顶部任务栏（fixed 定位 + flexbox）
右键菜单（自定义 contextmenu 事件）

窗口管理（1 周）

基于 Element Plus 的 el-dialog 扩展
支持拖拽、最小化、最大化、关闭
窗口层级管理（z-index）

应用启动器（3 天）

图标 Grid → 点击 → 打开对应窗口
窗口内容通过 iframe 或动态组件加载子应用

主题系统（1 周）

CSS Variables 实现浅色/深色切换
跟随系统主题（prefers-color-scheme）
壁纸上传与预览

总工作量：前端 1 人约 1-1.5 个月，可以做出一个体验不错的 Web 桌面壳。