React-WebOS网页版os系统|react19+zustand5+arco仿mac/win桌面os模板

原创React19+Zustand5+ArcoDesign仿macOS桌面网页版os后台系统ReactOS。

react-macos：基于最新技术栈react19.x+vite8+zustand+arco.design+echarts+sortablejs零到一构建web版桌面os后台管理系统解决方案。支持Macos+Window桌面风格、全新自定义栅格桌面布局、可拖拽桌面图标/程序坞菜单。

002360截图20260825205618088

p1

运用技术

  • 开发工具：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

p2

p6

项目目录结构

react-webos使用 vite8 构建工具搭建项目， react hook 语法编码页面。

360截图20260826000812669

React19-WebOS网页版os管理系统已经同步到我的原创作品集。

react19+arco-design网页版webos桌面管理系统

360截图20260826083705581

p3

p5

项目特性

  1. 支持macOS和window两种桌面模式
  2. 全新栅格化桌面菜单布局
  3. 桌面/Dock菜单支持动态JSON配置
  4. 支持桌面菜单和dock菜单自由拖拽排序
  5. 支持自定义桌面主题皮肤、毛玻璃模糊质感
  6. 一款os式后台admin管理系统解决方案

未标题-3

main.jsx入口配置

import '@arco-design/web-react/es/_util/react-19-adapter'
import { createRoot } from 'react-dom/client'
import './style.scss'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'

createRoot(document.getElementById('root')).render(
  <App />
)
import { HashRouter } from 'react-router-dom'

import Router, { AuthRouter } from './router'

function App() {
  return (
    <>
      <HashRouter>
        <AuthRouter>
          <Router />
        </AuthRouter>
      </HashRouter>
    </>
  )
}

001360截图20260825205208420

002360截图20260825205439436

003360截图20260825210741054

image

005360截图20260825211411560

006360截图20260825212150919

006360截图20260825212210018

007360截图20260825212433697

007360截图20260825212504347

image

020360截图20260825215755304

image

008360截图20260825212728365

image

image

009360截图20260825213241125

010360截图20260825213431436

011360截图20260825213536774

011360截图20260825214236381

012360截图20260825213604211

014360截图20260825213740710

015360截图20260825213820373

016360截图20260825213851557

019360截图20260825214709837

桌面布局结构

支持macos和windows两种桌面布局方式。

image

/**
 * 桌面布局模板
 * @author andy
*/

import { useMemo } from 'react'
import { appStore } from '@/store/app'

// 引入布局模板
import Macos from './template/macos'
import Windows from './template/windows'

function Desktop() {
  const { config: { layout, skin } } = appStore()

  // 布局模板
  const DeskLayout = useMemo(() => {
    switch (layout) {
      case 'macos':
        return Macos
      case 'windows':
        return Windows
      default:
        return Macos
    }
  }, [layout])

  return (
    <div className='ra__desk-container flex-c' style={{'--themeSkin': skin}} onContextMenu={(e) => e.preventDefault()}>
      <DeskLayout />
    </div>
  )
}

image

/**
 * 桌面布局模板(macos风格)
*/

import './index.scss'

// 引入公共组件
import Toolbar from '@/layouts/components/Toolbar.jsx'
import Desk from './components/desk.jsx'
import Dock from './components/dock.jsx'

function Macos() {
  return (
    <div className="ra__desk-layout flexbox flex-col">
      <div className='ra__desklayout-header'>
        <Toolbar />
      </div>

      <div className="ra__desklayout-body flex1 flexbox">
        <Desk />
      </div>
      
      <div className='ra__desklayout-footer'>
        <Dock />
      </div>
    </div>
  )
}

react-os栅格桌面布局

image

image

image

自定义桌面菜单变量

// 自定义桌面变量(图标参数)
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', // 图片图标自适应
}

桌面菜单参数

/**
 * @name Desk桌面菜单配置
 * @param label 图标标题
 * @param imgico 图标(支持 本地/网络图片，ArcoDesign内置图标/iconfont图标，自定义组件)
 * @param path 跳转路由页面
 * @param link 跳转外部链接
 * @param hideLabel 是否隐藏图标标题
 * @param filter 是否禁用拖拽
 * @param background 自定义图标背景色
 * @param color 自定义图标颜色
 * @param labelColor 自定义标签颜色
 * @param padding 内边距
 * @param size 栅格磁贴布局(16种) 1x1 ... 12x12
 * @param onClick 点击图标回调函数
 * @param children 二级菜单
 */

image

支持设置children二级弹窗菜单

image

桌面菜单代码片段

const deskMenu = [
  {
    uid: 'uD459A1E-344D-44B5-A9E4-6E8FF88F8612',
    title: '主页',
    list: [
      {imgico: <Today />, size: '3x2', filter: true},
      {label: '便签', imgico: <NoteBook />, size: '3x3'},
      {label: '日历', imgico: <Calendar2x2 />, size: '2x2'},
      ...
      {label: '倒计时', imgico: <CountDown />, size: '3x2'},
      {label: '图表', imgico: <Chart1 />, path: '/home', hideLabel: true, size: '3x2'},
      {label: 'React19.2', imgico: 'react.svg', link: 'https://react.dev/'},
    ]
  },
  {
    uid: 'uF18FF4F-12BD-4538-A753-5FB97FEC9EE9',
    title: 'App',
    list: [
      {label: '日历', imgico: <Calendar1x1 />},
      {label: 'Appstore', imgico: '/static/mac/appstore.png'},
      {label: '地图', imgico: '/static/mac/maps.png'},
      ...
    ]
  },
  {
    uid: 'uC733C3A-2BFF-4B34-957D-048E63C8D5D4',
    title: '摸鱼',
    list: [
      {label: 'React19', imgico: 'react.svg', link: 'https://react.dev/', background: '#fff', padding: '10px'},
      {label: 'Github', imgico: '/static/svg/github.svg', link: 'https://github.com/', background: '#2f4599'},
      {label: '码云Gitee', imgico: '/static/svg/gitee.svg', link: 'https://gitee.com/', background: '#bb2124', size: '2x1'},
      ...
    ]
  },
  {
    uid: 'uC7E7CD2-C99C-4D6E-B8B9-AD7A2851442C',
    title: 'AI',
    list: [
      {label: '豆包', imgico: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/static/image/OnboardingAvatar.0f4f29a4.webp', link: 'https://www.doubao.com/chat/', background: '#cae4ff', size: '2x2'},
      {label: '腾讯元宝', imgico: 'https://www.faxianai.com/wp-content/uploads/2025/02/20250224143149-7fe1f.png', link: 'https://yuanbao.tencent.com/', padding: '15px', size: '2x2'},
      ...
    ]
  },
  {
    uid: 'uE6FB82E-A606-4100-A321-F1A06CFB39DC',
    title: '工作台',
    list: [
      {label: 'React^19.2.8', imgico: 'react.svg', link: 'https://react.dev/', background: '#EAFAFF', labelColor: '#ff0', padding: '20px', size: '2x2'},
      {label: '首页', imgico: <IconHome />, path: '/home', color: '#fff'},
      {label: '控制台', imgico: <IconDesktop />, path: '/home/dashboard', color: '#fff'},
      {
        label: '编程开发',
        size: '2x2',
        children: [
          {label: 'React^19.2', imgico: '/react.svg', link: 'https://react.dev/'},
          {label: 'Arco', imgico: '/arco.svg', link: 'https://arco.design/'},
          ...
        ]
      },
      {
        label: '组件',
        children: [
          {label: '表格', imgico: '/static/svg/table.svg', path: '/components/table/all',},
          ...
        ]
      },
      {
        label: '管理中心',
        children: [
          {label: '用户管理', imgico: <IconUserGroup />, path: '/user', color: '#fff'},
          ...
        ]
      },
      ...
      {
        label: '关于', imgico: 'elec-icon-guanyu', hideLabel: true, color: '#7ee8ff',
        onClick: () => {
          Modal.info({
            ...
          })
        }
      },
    ]
  }
]

React-OS自定义Dock程序坞菜单

image

image

macOS桌面模式，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>

Okay，以上就是React19+Arco从0-1搭建网页版webOS桌面系统的一些项目分享，希望对大家有些帮助！

附上一些最新实战进阶项目

React19+Electron聊天室|electron41跨平台仿QQ/微信客户端聊天软件

react19-webai网页版AI模板|DeepSeek-V4+React19+Arco智能ai系统

React19-Admin后台管理系统|vite8+react19+arco+zustand通用后台模板

vite8-webos网页版os管理|Vue3+Vite8.0+ArcoDesign搭建pc端os桌面系统

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序

Vite8+DeepSeek-V4网页版AI助手|vue3+arco本地web版ai流式问答系统

uniapp+deepseek-v4-flash+vue3跨端流式ai应用模板【h5+小程序+app端】

Vite8-Vue3-Admin网页版后台模板|vue3.5+pinia3+echarts后台管理系统

Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板

最新版uni-app+vue3+uv-ui跨端仿携程酒店预订模板【H5+小程序+App端】

20160819150003341be

 

posted @ 2026-08-26 11:06  xiaoyan2017  阅读(7)  评论(0)    收藏  举报
友情链接： UP主小店B站