经过一周研发，又一个react实战项目完结啦！ 基于最新前端技术栈react19+zustand5+arco.design+echarts搭建pc端网页webos管理系统。

react-webos桌面系统支持macOS和window两种桌面风格。

运用技术

• 编码开发：Vscode
  
• 技术框架：react^19.2.8+react-router v7+zustand5
  
• UI组件库：@arco-design/web-react^2.66.16 (字节网页版vue3组件库)
  
• 状态管理：zustand^5.0.15
  
• 滚屏组件：swiper^14.1.0
  
• 拖拽插件：sortablejs^1.15.7
  
• 图表组件：echarts^6.1.0
  
• 模拟数据：mockjs^1.1.0
  
• 样式编译：sass^1.102.0
  
• 构建工具：vite^8.2.0

项目特色

🏆 支持macOS+window两种桌面模式
🚀 全新栅格化桌面菜单
🧩 桌面/Dock菜单支持动态JSON配置
⚡️ 支持桌面菜单和dock菜单自由拖拽排序
⚙️ 支持自定义桌面主题皮肤、毛玻璃模糊质感
🧪 一款os式后台admin管理系统解决方案

项目框架目录

项目目录结构简单，结构一目了然。

React-OS栅格桌面

全新的栅格化桌面布局引擎，支持自定义桌面图标大小/圆角等，支持拖拽桌面图标。

// 自定义桌面变量(图标参数)
const deskVariable = {
  '--icon-radius': '18px', // 圆角
  '--icon-size': '60px', // 图标尺寸
  '--icon-gap-col': '30px', // Y轴间距(左右)
  '--icon-gap-row': '30px', // X轴间距(上下)
  '--icon-labelSize': '12px', // 标签文字大小
  '--icon-labelColor': '#fff', // 标签颜色
  '--icon-fit': 'contain', // 图片图标自适应
}

支持children配置二级菜单。

react自定义程序坞Dock菜单

<div className='ra__macos-dock'>
  <div className={clsx('ra__dock-wrap', dock||'compact')}>
    {
      dockMenu.map((data, key) => (
        <div key={key} className='ra__dock-group'>
          {
            data?.list?.map((item, index) => (
              <div key={index} className='ra__dock-item' onClick={() => handleClickDockMenu(item)}>
                { item.label && <span className='label'>{item.label}</span>}
                {
                  // 二级菜单
                  isArray(item?.children) ?
                  <Trigger
                    trigger='hover'
                    position='top'
                    popupAlign={{ top: 10 }}
                    onVisibleChange={setTriggerVisible}
                    popup={() => (
                      <div className='ra__dock-macpopup'>
                        <Rscroll size={4}>
                          ...
                        </Rscroll>
                      </div>
                    )}
                  >
                    <div className='ra__dock-thumb'>
                      <div className='ra__dock-thumbmenu'>
                        ...
                      </div>
                    </div>
                  </Trigger>
                  :
                  <div className='imgico' style={{background: item?.background, color: item?.color, padding: item?.padding}}>
                    {
                      isImg(item.imgico) ?
                      <img src={item.imgico} />
                      :
                      isObject(item.imgico) ?
                      item.imgico
                      :
                      // iconfont Symbol引用方式
                      <SvgIcon icon={item.imgico} />
                    }
                  </div>
                }
              </div>
            ))
          }
        </div>
      ))
    }
  </div>
</div>

基于react19全家桶技术栈开发网页版os系统就分享到这里了。

扫一扫，发现更多精彩项目。

React19+Electron聊天室|electron41跨平台仿微信EXE客户端|react聊天程序

原创deepseek-v4+react19仿豆包/kimi网页版ai聊天对话系统

Vite8-Naive-Admin高颜值web版通用后台管理模板

2026/6升级版Flutter3.41.5桌面级OS管理系统

Flutter3.41实战抖音直播+短视频+聊天

首发vite8.0+vue3+deepseek+markdown手搓网页版ai流式生成模板

Tauri2.9+Vue3实战电脑版OS系统|vite7.2+tauri2仿mac/wins桌面管理os模板

Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面

Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe

最新研发vite7.0+electron38客户端仿微信EXE聊天软件