完结篇！React19+Arco+Zustand仿macOS风格webOS桌面系统

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>
    </>
  )
}

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

/**
 * 桌面布局模板
 * @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>
  )
}

<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>